A design system in a box.
hip-ui.tngl.io/docs/introduction
1import{t as e}from"./jsx-runtime-D-oznMWL.js";import{t}from"./PropDocs-CM9cNaM3.js";import{t as n}from"./flex-oubf-_sd.js";import{t as r}from"./text-B77JGejP.js";import{t as i}from"./Example-DfDcphuv.js";var a=e(),o={wrapper:{kGO01o:`xdn7k24`,kLKAdn:`x1e1v5or`,$$css:!0}};function s(){return(0,a.jsx)(n,{direction:`column`,gap:`7xl`,style:o.wrapper,children:(0,a.jsxs)(n,{direction:`column`,gap:`2xl`,children:[(0,a.jsx)(r,{font:`sans`,size:`2xl`,weight:`bold`,children:`Title text`}),(0,a.jsx)(r,{font:`sans`,size:`2xl`,weight:`bold`,children:`Sans serif text (default)`}),(0,a.jsx)(r,{font:`serif`,size:`2xl`,weight:`semibold`,children:`Serif text`}),(0,a.jsx)(r,{font:`mono`,size:`2xl`,children:`Monospace text`})]})})}s.slug=`/examples/text/basic`;var c={wrapper:{kGO01o:`xdn7k24`,kLKAdn:`x1e1v5or`,$$css:!0}};function l(){return(0,a.jsxs)(n,{direction:`column`,gap:`2xl`,style:c.wrapper,children:[(0,a.jsx)(r,{variant:`primary`,children:`Primary text`}),(0,a.jsx)(r,{variant:`secondary`,children:`Secondary text`}),(0,a.jsx)(r,{variant:`critical`,children:`Critical text`})]})}l.slug=`/examples/text/variants`;var u={wrapper:{kGO01o:`xdn7k24`,kLKAdn:`x1e1v5or`,kzqmXN:`x45bhuy`,$$css:!0}};function d(){return(0,a.jsxs)(n,{direction:`column`,gap:`2xl`,style:u.wrapper,children:[(0,a.jsx)(r,{align:`left`,children:`Left aligned text`}),(0,a.jsx)(r,{align:`center`,children:`Center aligned text`}),(0,a.jsx)(r,{align:`right`,children:`Right aligned text`})]})}d.slug=`/examples/text/alignment`;var f={wrapper:{kGO01o:`xdn7k24`,kLKAdn:`x1e1v5or`,$$css:!0}};function p(){return(0,a.jsxs)(n,{direction:`column`,gap:`2xl`,style:f.wrapper,children:[(0,a.jsx)(r,{children:`Regular text`}),(0,a.jsx)(r,{strikethrough:!0,children:`Strikethrough text`}),(0,a.jsx)(r,{strikethrough:!0,variant:`secondary`,children:`Strikethrough secondary text`})]})}p.slug=`/examples/text/strikethrough`;var m={wrapper:{kGO01o:`xdn7k24`,kLKAdn:`x1e1v5or`,$$css:!0}};function h(){return(0,a.jsxs)(n,{direction:`column`,gap:`5xl`,style:m.wrapper,children:[(0,a.jsxs)(n,{direction:`column`,gap:`md`,children:[(0,a.jsx)(r,{size:`sm`,weight:`semibold`,variant:`secondary`,children:`Font Weights`}),(0,a.jsx)(r,{weight:`thin`,children:`Thin weight`}),(0,a.jsx)(r,{weight:`light`,children:`Light weight`}),(0,a.jsx)(r,{weight:`normal`,children:`Normal weight`}),(0,a.jsx)(r,{weight:`medium`,children:`Medium weight`}),(0,a.jsx)(r,{weight:`semibold`,children:`Semibold weight`}),(0,a.jsx)(r,{weight:`bold`,children:`Bold weight`}),(0,a.jsx)(r,{weight:`extrabold`,children:`Extrabold weight`})]}),(0,a.jsxs)(n,{direction:`column`,gap:`md`,children:[(0,a.jsx)(r,{size:`sm`,weight:`semibold`,variant:`secondary`,children:`Font Sizes`}),(0,a.jsx)(r,{size:`xs`,children:`Extra small text`}),(0,a.jsx)(r,{size:`sm`,children:`Small text`}),(0,a.jsx)(r,{size:`base`,children:`Base text`}),(0,a.jsx)(r,{size:`lg`,children:`Large text`}),(0,a.jsx)(r,{size:`xl`,children:`Extra large text`}),(0,a.jsx)(r,{size:`2xl`,children:`2X large text`}),(0,a.jsx)(r,{size:`3xl`,children:`3X large text`})]}),(0,a.jsxs)(n,{direction:`column`,gap:`md`,children:[(0,a.jsx)(r,{size:`sm`,weight:`semibold`,variant:`secondary`,children:`Letter Spacing`}),(0,a.jsx)(r,{tracking:`tighter`,children:`Tighter tracking`}),(0,a.jsx)(r,{tracking:`tight`,children:`Tight tracking`}),(0,a.jsx)(r,{tracking:`normal`,children:`Normal tracking`}),(0,a.jsx)(r,{tracking:`wide`,children:`Wide tracking`}),(0,a.jsx)(r,{tracking:`wider`,children:`Wider tracking`}),(0,a.jsx)(r,{tracking:`widest`,children:`Widest tracking`})]})]})}h.slug=`/examples/text/typography`;var g=[{depth:2,value:`Installation`,id:`installation`},{depth:2,value:`Features`,id:`features`,children:[{depth:3,value:`Tokens`,id:`tokens`},{depth:3,value:`Variants`,id:`variants`},{depth:3,value:`Alignment`,id:`alignment`},{depth:3,value:`Strikethrough`,id:`strikethrough`}]},{depth:2,value:`Props`,id:`props`},{depth:2,value:`Related Components`,id:`related-components`}];function _(e){let n={a:`a`,blockquote:`blockquote`,code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,span:`span`,ul:`ul`,...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i,{src:s}),`
2`,(0,a.jsx)(n.h2,{id:`installation`,children:`Installation`}),`
3`,(0,a.jsx)(n.p,{children:`Run the following command to add the text component to your project.`}),`
4`,(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(n.pre,{className:`shiki shiki-themes github-light github-dark`,style:{backgroundColor:`light-dark(#fff, #24292e)`,"--shiki-light-bg":`#fff`,"--shiki-dark-bg":`#24292e`,color:`light-dark(#24292e, #e1e4e8)`,"--shiki-light":`#24292e`,"--shiki-dark":`#e1e4e8`},tabIndex:`0`,children:(0,a.jsx)(n.code,{className:`language-bash`,children:(0,a.jsxs)(n.span,{className:`line`,children:[(0,a.jsx)(n.span,{style:{color:`light-dark(#6F42C1, #B392F0)`,"--shiki-light":`#6F42C1`,"--shiki-dark":`#B392F0`},children:`pnpm`}),(0,a.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` hip`}),(0,a.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` install`}),(0,a.jsx)(n.span,{style:{color:`light-dark(#032F62, #9ECBFF)`,"--shiki-light":`#032F62`,"--shiki-dark":`#9ECBFF`},children:` typography`})]})})})}),`
5`,(0,a.jsx)(n.h2,{id:`features`,children:`Features`}),`
6`,(0,a.jsx)(n.h3,{id:`tokens`,children:`Tokens`}),`
7`,(0,a.jsxs)(n.p,{children:[`The Text component gives you direct acces to all of the `,(0,a.jsx)(n.a,{href:`/docs/foundations/typography`,children:`typography tokens`}),`.
8You can fully customize the `,(0,a.jsx)(n.code,{children:`font`}),`, `,(0,a.jsx)(n.code,{children:`size`}),`, `,(0,a.jsx)(n.code,{children:`weight`}),`, and `,(0,a.jsx)(n.code,{children:`tracking`}),` properties.`]}),`
9`,(0,a.jsxs)(n.blockquote,{children:[`
10`,(0,a.jsxs)(n.p,{children:[`NOTE: By using this component you are not using the `,(0,a.jsx)(n.a,{href:`/docs/components/content/typography`,children:`typeramp`}),` component.
11It could lead to inconsistent typography across your application.`]}),`
12`]}),`
13`,(0,a.jsx)(n.h3,{id:`variants`,children:`Variants`}),`
14`,(0,a.jsx)(n.p,{children:`Choose from semantic color variants:`}),`
15`,(0,a.jsx)(i,{src:l}),`
16`,(0,a.jsx)(n.h3,{id:`alignment`,children:`Alignment`}),`
17`,(0,a.jsx)(n.p,{children:`Control text alignment:`}),`
18`,(0,a.jsx)(i,{src:d}),`
19`,(0,a.jsx)(n.h3,{id:`strikethrough`,children:`Strikethrough`}),`
20`,(0,a.jsx)(n.p,{children:`Add strikethrough decoration to text:`}),`
21`,(0,a.jsx)(i,{src:p}),`
22`,(0,a.jsx)(n.h2,{id:`props`,children:`Props`}),`
23`,(0,a.jsx)(t,{components:[`Text`]}),`
24`,(0,a.jsx)(n.h2,{id:`related-components`,children:`Related Components`}),`
25`,(0,a.jsxs)(n.ul,{children:[`
26`,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:`/docs/components/content/typography`,children:`Typography`}),` - For semantic typography components`]}),`
27`,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:`/docs/components/form/label`,children:`Label`}),` - For form labels`]}),`
28`,(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.a,{href:`/docs/components/navigation/link`,children:`Link`}),` - For text links`]}),`
29`]})]})}function v(e={}){let{wrapper:t}=e.components||{};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(_,{...e})}):_(e)}export{v as default,g as toc};