const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/docs-CrgJx8Z6.js","assets/jsx-runtime-D-oznMWL.js","assets/button-B3FtKFjE.js","assets/typography.stylex-ZkAqsnF0.js","assets/clsx-Dt5TBCCM.js","assets/react-DNjXG-IQ.js","assets/dialog-DGX3aEDV.js","assets/icon-button-BFGSYviR.js","assets/useDialogStyles-TqxL-C9A.js","assets/Dialog-I4SMYRTn.js","assets/useLocalizedStringFormatter-DkD75zZh.js","assets/Separator-vYV6cmuY.js","assets/shim-DbDEk-re.js","assets/SelectionIndicator-D6_3UuYP.js","assets/useEvent-BOpqN9eb.js","assets/Modal-BkSrc0q6.js","assets/x-CY6exMHP.js","assets/Heading-xkVrWlyG.js","assets/flex-oubf-_sd.js","assets/typography-DYed328x.js","assets/copy-to-clipboard-button-Gr6ZKHbo.js","assets/copy-q8QAXVoJ.js","assets/listbox-Clp-j1PB.js","assets/checkbox-DUW1NmBn.js","assets/separator-Da7WLHKG.js","assets/useListBoxItemStyles-Dp7eJMDi.js","assets/ListBox-T58IHUzj.js","assets/useListState-CzdWVnix.js","assets/Virtualizer-F0WUv2oN.js","assets/select-DPWMB9nm.js","assets/search-field-cB5nPedo.js","assets/suffix-icon-B752tq3D.js","assets/circle-x-CoKQt2Z2.js","assets/triangle-alert-B7sf6y2r.js","assets/useInputStyles-BNn_FOM8.js","assets/useTextField-fMnydpon.js","assets/search-BRon3kli.js","assets/Group-EEFEs9r4.js","assets/Input-BzKLqfLq.js","assets/usePopoverStyles-Dfy7mt0T.js","assets/Autocomplete-Bc9WtO7c.js","assets/useFilter-DcdqT13M.js","assets/chevron-down-D6TeByrN.js","assets/intlStrings-GsTGY_cb.js","assets/sidebar-layout-DGc-vn3w.js","assets/drawer-CI2PcwbW.js","assets/sidebar-BxDooHSf.js","assets/text-B77JGejP.js","assets/Disclosure-CPe41War.js","assets/chevron-right-U1T1g-0g.js","assets/table-of-contents-4OHKHUOU.js","assets/main-C54yPR-t.js","assets/preload-helper-DgFuoWHe.js","assets/link-CghA3pO1.js","assets/main-x1XGuNl0.css","assets/UnShiki-EBFEVXkE.js","assets/useLocation-ITrbnl1F.js","assets/introduction-B_G88cIB.js","assets/disclosure-group-D-zRV_WZ.js","assets/disclosure-CpiymKkH.js","assets/ai-DoQmqHiy.js","assets/todo-table-B_c6e9Ix.js","assets/card-BtUPjIPo.js","assets/avatar-BXECDuPC.js","assets/badge-CaJzeTqO.js","assets/kbd-DmC_OkjK.js","assets/menu-CF7cfwmN.js","assets/popover-xeNePzcC.js","assets/table-N-q6wk5u.js","assets/grip-vertical-BJz78KWw.js","assets/useMove-DBbrzXXx.js","assets/arrow-up-Blh-OMGl.js","assets/arrow-right-PPvQbosa.js","assets/chevron-left-DbRnfiOg.js","assets/circle-check-Dvy1zyAo.js","assets/circle-C8wI6NqR.js","assets/ellipsis-CphssYai.js","assets/spotify-Bj_NpGB_.js","assets/grid-Bb7ZbwQJ.js","assets/slider-S4kyNKva.js","assets/Slider-CElqN1CF.js","assets/heart-Ch07Y8t1.js","assets/plus-ej_ZvU7B.js","assets/volume-2-DY0k0MiO.js","assets/music-Ch1DMlRO.js","assets/switch-DEy04ywE.js","assets/tag-group-B2_VeSnm.js","assets/useGridListItem-Cgvld5eh.js","assets/text-field-C7Ly7588.js","assets/TextField-C3kwgWtw.js","assets/toggle-button-BayrYJIp.js","assets/ToggleButton-DcMI3295.js","assets/move-horizontal-CkvRWiF1.js","assets/star-DVIYU0dX.js","assets/llm-D4gbSGQC.js","assets/segmented-control-DXzNVyUx.js","assets/text-area-3nNR1P52.js","assets/download-BLAWaY3f.js","assets/invoice-MVwP9Ygj.js","assets/link-Com2ZV7N.js","assets/Link-sqzhIGUS.js","assets/circle-check-big-DGIvwwMd.js","assets/pin-DOC9fyCL.js","assets/share-BrHiGGpG.js","assets/ecommerce-Dhx0Zjwh.js","assets/color-swatch-CzN5Xcaf.js","assets/intlStrings-_Xq_dlVb.js","assets/Color-DXRjSJbs.js","assets/empty-state-DjidjdIQ.js","assets/file-drop-zone-DBLr82w0.js","assets/useDrop-Dhpp44c-.js","assets/number-field-lxyuEFSa.js","assets/useNumberField-CKXGFxK4.js","assets/useSpinButton-CRCIZxYe.js","assets/toggle-button-group-D_He7boC.js","assets/upload-CjozFIiv.js","assets/canvas-editor-YdEM2Xbr.js","assets/typography-RGnPf_EK.js","assets/Example-DfDcphuv.js","assets/typeramp-DeRce73P.js","assets/theming-B8ge7BHD.js","assets/spacing-Bsbe5bdk.js","assets/spacing-BOI94FCt.js","assets/radius.stylex-D2K5E-79.js","assets/shadow-CfBMdmZx.js","assets/shadow.stylex-shqCPiy0.js","assets/radius-CkL3wCjv.js","assets/colors-v2mQxkSi.js","assets/animations-DJURr-eU.js","assets/toast-CbVaio6j.js","assets/PropDocs-CM9cNaM3.js","assets/info-cj193x5e.js","assets/star-rating-DqS4usKV.js","assets/skeleton-D7ZdR3wU.js","assets/progress-circle-DqFoyEmw.js","assets/progress-bar-CMyA0ICF.js","assets/meter-DXzfY8Ss.js","assets/badge-niLgsiqu.js","assets/alert-Os6ka4um.js","assets/tooltip-j9g3CXtG.js","assets/popover-CtY7k7GN.js","assets/lightbox-Dw6jzRyG.js","assets/hover-card-CpKLRTup.js","assets/drawer-CzPC22U5.js","assets/dialog-CK6_0vt2.js","assets/alert-dialog-DTviM3iE.js","assets/tabs-ozPDjcDv.js","assets/table-of-contents-C114zcEv.js","assets/sidebar-BzD7VWQp.js","assets/sidebar-layout-CnKvfI12.js","assets/content-AzcgfqTh.js","assets/footer-C84s9ktq.js","assets/header-layout-BHV5EqAr.js","assets/navbar-slF73zu5.js","assets/menu-D3uOkN_8.js","assets/pagination-BucyWGYS.js","assets/arrow-left-CHFTWh_c.js","assets/navbar-C9lbWbbD.js","assets/link-BvMZ1QBS.js","assets/header-layout-dziQebPl.js","assets/footer-CU6dizOy.js","assets/disclosure-DHxelhol.js","assets/disclosure-group-DLawefcF.js","assets/breadcrumbs-C7DdQFoI.js","assets/window-splitter-Do2OKM8R.js","assets/toolbar-Cp_KxBYV.js","assets/toolbar-CvoizF7Q.js","assets/Toolbar-Ca3gaTXo.js","assets/page-D5vhxGYz.js","assets/grid-D9aUw6dw.js","assets/flex-Mf7QASWf.js","assets/text-field-CE2GKXJT.js","assets/text-area-s2PFPY9K.js","assets/switch-CuCERCNW.js","assets/slider-D_pdgc1B.js","assets/select-OrhA-b4-.js","assets/search-field-DbdYLesd.js","assets/radio-DZh88k0x.js","assets/number-field-CVJaQWdT.js","assets/label-Bl5gfGi6.js","assets/form-Nw_ORA6K.js","assets/file-drop-zone-DWL990Fl.js","assets/combobox-Ba65NbzE.js","assets/checkbox-BeBtrknX.js","assets/autocomplete-CXqTMCVQ.js","assets/color-wheel-DU_PCJci.js","assets/color-area-ikDmIO2a.js","assets/color-swatch-CBI0xHtH.js","assets/color-swatch-picker-BCaPvXzA.js","assets/color-swatch-picker-kjwIsh4H.js","assets/useColor-D3rJbj9o.js","assets/color-slider-MoN-jhsb.js","assets/color-slider-CN1YfiTL.js","assets/color-picker-Cdtp-nmf.js","assets/color-field-CGYVt30C.js","assets/color-field-jafvBDRg.js","assets/color-area-KOtsxXrr.js","assets/video-04yu7v72.js","assets/typography-giOIOHSO.js","assets/text-CytUVl_O.js","assets/separator-PoVikaXC.js","assets/markdown-content-BNttHj-r.js","assets/kbd-BvvJ1do2.js","assets/image-cropper-BqLKG7Ta.js","assets/empty-state-5vOlO51b.js","assets/editable-text-BD-5kowN.js","assets/editable-text-afkJoGRL.js","assets/content-B4gPr8oR.js","assets/card-DfITAce4.js","assets/avatar-DA2UAsem.js","assets/aspect-ratio-CLmeJwiG.js","assets/tree-bGMdeVXt.js","assets/tree-AFVdnSnG.js","assets/useDragAndDrop-BkW4xaNT.js","assets/tag-group-B9Jd60Bu.js","assets/useListData-D-Cy5ATk.js","assets/table-Cx6w1Aq5.js","assets/menubar-H8gxVcmA.js","assets/menu-CTm1E2hU.js","assets/listbox-O_Af4wiP.js","assets/context-menu-wRfHPSXf.js","assets/command-menu-BYH3rM78.js","assets/toggle-button-BVhJ43ZM.js","assets/toggle-button-group-CFHplqoB.js","assets/segmented-control-DdMTbXW0.js","assets/icon-button-CAtq9IG8.js","assets/settings-H2zLFrdP.js","assets/copy-to-clipboard-button-DEkDE9z4.js","assets/button-DOyQe58u.js","assets/button-group-tTHu3Gta.js","assets/time-field-C5e70i0L.js","assets/DateField-B3yikNy3.js","assets/useDateFormatter-B0HMsDRK.js","assets/range-calendar-CTJsFu8h.js","assets/range-calendar-ojhTQkTB.js","assets/useCalendarStyles-BzFjsdzT.js","assets/date-range-picker-BEpUNG1U.js","assets/calendar-VcjshhDU.js","assets/date-picker-Cc1-pC1K.js","assets/calendar-DgV8Gzix.js","assets/date-field-UT6J0onL.js","assets/date-field-B4-6e4kz.js","assets/calendar-CGAUf6Y4.js"])))=>i.map(i=>d[i]);
import{i as e,t}from"./jsx-runtime-D-oznMWL.js";import{t as n}from"./react-DNjXG-IQ.js";import{B as r,F as i,T as a,_ as o,c as s,i as c,m as l,n as u,r as ee,t as d,v as f}from"./link-CghA3pO1.js";import{t as p}from"./preload-helper-DgFuoWHe.js";import{a as te,c as m,d as h,f as g,g as _,i as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T}from"./typography-DYed328x.js";import{t as E}from"./link-Com2ZV7N.js";function ne(e){return!!e?.isNotFound}var D=`__root__`;function O(e){if(e.statusCode=e.statusCode||e.code||307,!e._builtLocation&&!e.reloadDocument&&typeof e.href==`string`)try{new URL(e.href),e.reloadDocument=!0}catch{}let t=new Headers(e.headers);e.href&&t.get(`Location`)===null&&t.set(`Location`,e.href);let n=new Response(null,{status:e.statusCode,headers:t});if(n.options=e,e.throw)throw n;return n}function re(e){return e instanceof Response&&!!e.options}function k(e){if(typeof e==`object`&&e&&e.isSerializedRedirect)return O(e)}var A=class{get to(){return this._to}get id(){return this._id}get path(){return this._path}get fullPath(){return this._fullPath}constructor(e){if(this.init=e=>{this.originalIndex=e.originalIndex;let t=this.options,n=!t?.path&&!t?.id;this.parentRoute=this.options.getParentRoute?.(),n?this._path=D:this.parentRoute||a();let r=n?D:t?.path;r&&r!==`/`&&(r=o(r));let i=t?.id||r,s=n?D:l([this.parentRoute.id===`__root__`?``:this.parentRoute.id,i]);r===`__root__`&&(r=`/`),s!==`__root__`&&(s=l([`/`,s]));let c=s===`__root__`?`/`:l([this.parentRoute.fullPath,r]);this._path=r,this._id=s,this._fullPath=c,this._to=f(c)},this.addChildren=e=>this._addFileChildren(e),this._addFileChildren=e=>(Array.isArray(e)&&(this.children=e),typeof e==`object`&&e&&(this.children=Object.values(e)),this),this._addFileTypes=()=>this,this.updateLoader=e=>(Object.assign(this.options,e),this),this.update=e=>(Object.assign(this.options,e),this),this.lazy=e=>(this.lazyFn=e,this),this.redirect=e=>O({from:this.fullPath,...e}),this.options=e||{},this.isRoot=!e?.getParentRoute,e?.id&&e?.path)throw Error(`Route cannot have both an 'id' and a 'path' option.`)}},j=class extends A{constructor(e){super(e)}},M=e(n(),1),N=M.createContext(void 0),P=M.createContext(void 0),F={state:void 0,get:()=>void 0,subscribe:()=>()=>{}};function I(e){let t=c(),n=M.useContext(e.from?P:N),i=e.from??n,o=i?e.from?t.stores.getMatchStoreByRouteId(i):t.stores.activeMatchStoresById.get(i):void 0,s=M.useRef(void 0);return ee(o??F,n=>{if((e.shouldThrow??!0)&&!n&&a(),n===void 0)return;let i=e.select?e.select(n):n;if(e.structuralSharing??t.options.defaultStructuralSharing){let e=r(s.current,i);return s.current=e,e}return i})}function L(e){return I({from:e.from,strict:e.strict,structuralSharing:e.structuralSharing,select:t=>e.select?e.select(t.loaderData):t.loaderData})}function R(e){let{select:t,...n}=e;return I({...n,select:e=>t?t(e.loaderDeps):e.loaderDeps})}function z(e){return I({from:e.from,shouldThrow:e.shouldThrow,structuralSharing:e.structuralSharing,strict:e.strict,select:t=>{let n=e.strict===!1?t.params:t._strictParams;return e.select?e.select(n):n}})}function B(e){return I({from:e.from,strict:e.strict,shouldThrow:e.shouldThrow,structuralSharing:e.structuralSharing,select:t=>e.select?e.select(t.search):t.search})}function V(e){let t=c();return M.useCallback(n=>t.navigate({...n,from:n.from??e?.from}),[e?.from,t])}function H(e){return I({...e,select:t=>e.select?e.select(t.context):t.context})}var U=t(),W=class extends A{constructor(e){super(e),this.useMatch=e=>I({select:e?.select,from:this.id,structuralSharing:e?.structuralSharing}),this.useRouteContext=e=>H({...e,from:this.id}),this.useSearch=e=>B({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useParams=e=>z({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useLoaderDeps=e=>R({...e,from:this.id}),this.useLoaderData=e=>L({...e,from:this.id}),this.useNavigate=()=>V({from:this.fullPath}),this.Link=M.forwardRef((e,t)=>(0,U.jsx)(d,{ref:t,from:this.fullPath,...e}))}};function G(e){return new W(e)}var K=class extends j{constructor(e){super(e),this.useMatch=e=>I({select:e?.select,from:this.id,structuralSharing:e?.structuralSharing}),this.useRouteContext=e=>H({...e,from:this.id}),this.useSearch=e=>B({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useParams=e=>z({select:e?.select,structuralSharing:e?.structuralSharing,from:this.id}),this.useLoaderDeps=e=>R({...e,from:this.id}),this.useLoaderData=e=>L({...e,from:this.id}),this.useNavigate=()=>V({from:this.fullPath}),this.Link=M.forwardRef((e,t)=>(0,U.jsx)(d,{ref:t,from:this.fullPath,...e}))}};function q(e){return new K(e)}function J(e){return typeof e==`object`?new Y(e,{silent:!0}).createRoute(e):new Y(e,{silent:!0}).createRoute}var Y=class{constructor(e,t){this.path=e,this.createRoute=e=>{let t=G(e);return t.isRoot=!1,t},this.silent=t?.silent}};function X(e,t){let n,r,a,o,c=()=>(n||=e().then(e=>{n=void 0,r=e[t??`default`]}).catch(e=>{if(a=e,i(a)&&a instanceof Error&&typeof window<`u`&&typeof sessionStorage<`u`){let e=`tanstack_router_reload:${a.message}`;sessionStorage.getItem(e)||(sessionStorage.setItem(e,`1`),o=!0)}}),n),l=function(e){if(o)throw window.location.reload(),new Promise(()=>{});if(a)throw a;if(!r)if(s)s(c());else throw c();return M.createElement(r,e)};return l.preload=c,l}var ie=()=>p(()=>import(`./docs-CrgJx8Z6.js`),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56])),ae=u(E),Z={header:{k1K539:`xf4e8qq`,keoZOQ:`x1nymk3d xia44gn`,$$css:!0},defaultMargin:{k1K539:`xtzergm`,keoZOQ:`x130hwy6`,$$css:!0},h2:{k1K539:`xzv3oba`,keoZOQ:`x6uc525`,$$css:!0},h3:{k1K539:`x1jz0usu`,keoZOQ:`x1irnib0`,$$css:!0},h4:{k1K539:`xzv3oba`,keoZOQ:`x1irnib0`,$$css:!0},h5:{k1K539:`xzv3oba`,keoZOQ:`x1irnib0`,$$css:!0},grow:{kzQI83:`x1iyjqo2`,k7Eaqz:`xeuugli`,$$css:!0}};function oe({href:e,...t}){return e&&e.startsWith(`/`)?(0,U.jsx)(ae,{to:`/docs/$`,params:{_splat:e.split(`/`).slice(2).join(`/`)},...t}):(0,U.jsx)(E,{...t,href:e})}var se={h1:({className:e,style:t,...n})=>(0,U.jsx)(S,{...n}),h2:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h2,children:(0,U.jsx)(v,{...n})}),h3:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h3,children:(0,U.jsx)(te,{...n})}),h4:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h4,children:(0,U.jsx)(b,{...n})}),h5:({className:e,style:t,...n})=>(0,U.jsx)(T,{id:n.id,style:Z.h5,children:(0,U.jsx)(C,{...n})}),p:({className:e,style:t,...n})=>(0,U.jsx)(y,{...n,style:Z.defaultMargin}),a:({className:e,style:t,...n})=>(0,U.jsx)(oe,{...n}),ul:({className:e,style:t,...n})=>(0,U.jsx)(_,{...n,style:Z.defaultMargin}),ol:({className:e,style:t,...n})=>(0,U.jsx)(g,{...n,style:Z.defaultMargin}),li:({className:e,style:t,...n})=>(0,U.jsx)(h,{...n}),pre:({className:e,style:t,...n})=>(0,U.jsx)(x,{...n,style:Z.defaultMargin}),code:({className:e,style:t,...n})=>(0,U.jsx)(m,{...n}),blockquote:({className:e,style:t,...n})=>(0,U.jsx)(w,{...n,style:Z.defaultMargin})},Q=J(`/docs`)({component:X(ie,`component`)}),ce=[{title:`AI Usage`,description:`How to use AI to enhance building with Hip UI.`,content:`Hip UI interfaces with AI in a few main ways:

1. [**llms.txt**](https://hip-ui.tngl.io/llms.txt) - The docs as static markdown files that can be used as context for AI chats like OpenAi or Claude.
2. **MCP server** - A MCP server that AI can use to get guidance on how to use Hip UI.

## MCP Server

The MCP server exposes the following tools:

- **list-sections** - Lists all available Hip UI docs sections.
- **get-documentation** - Retrieves the full markdown documentation for a given section.

It also exposes some lightweight instructions and rules around using and composing components.

### Setup

To use the MCP server you need to add it to your AI tool of choice.

#### Cursor

\`\`\`json
{
  "mcpServers": {
    "hip-ui": {
      "command": "npx",
      "args": ["hip-ui", "mcp"]
    }
  }
}
\`\`\`

#### VS Code

\`\`\`bash
code --add-mcp '{"name":"hip-ui","command":"npx","args":["hip-ui", "mcp"]}'
\`\`\`

#### Claude Code

\`\`\`bash
claude mcp add hip-ui npx hip-ui mcp
\`\`\`

#### Codex

\`\`\`yaml
[mcp_servers.hip-ui]
command = "npx"
args = ["hip-ui", "mcp"]
\`\`\`

#### Gemini CLI

\`\`\`bash
gemini mcp add hip-ui npx hip-ui mcp
\`\`\``,_meta:{filePath:`ai.mdx`,fileName:`ai.mdx`,directory:`.`,extension:`mdx`,path:`ai`}},{title:`Button Group`,description:`A group of buttons that work together as a single control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/button-group/basic";

<Example src={Basic} />

## Installation

Run the following command to add the button group component to your project.

\`\`\`bash
pnpm hip install button-group
\`\`\`

## Props

This is a custom component built for grouping buttons together. It is built using the [React Aria Group](https://react-spectrum.adobe.com/react-aria/Group.html).

<PropDocs components={["ButtonGroup"]} />

## Related Components

- [Button](/docs/components/buttons/button) - Individual buttons within the group
- [IconButton](/docs/components/buttons/icon-button) - Icon-only buttons for the group
- [ToggleButton](/docs/components/buttons/toggle-button) - Toggleable buttons for the group
- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons specifically`,_meta:{filePath:`components/buttons/button-group.mdx`,fileName:`button-group.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/button-group`}},{title:`Button`,description:`A clickable button component with multiple variants and sizes.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/button/basic";
import { ButtonVariants } from "../../../examples/button/variants";
import { ButtonSizes } from "../../../examples/button/sizes";
import { ButtonWithIcons } from "../../../examples/button/with-icons";
import { ButtonStates } from "../../../examples/button/states";
import { ButtonLoading } from "../../../examples/button/loading";

<Example src={Basic} />

## Installation

Run the following command to add the button component to your project.

\`\`\`bash
pnpm hip install button
\`\`\`

## Features

### Variants

The button comes in four different variants to suit different use cases.

<Example src={ButtonVariants} />

### Sizes

The button supports three different sizes.

<Example src={ButtonSizes} />

### With Icons

Buttons can include icons alongside text for better visual communication.

<Example src={ButtonWithIcons} />

### States

Buttons support different interactive states.

<Example src={ButtonStates} />

### Loading State

Buttons can show a loading state during async operations.

<Example src={ButtonLoading} />

## Props

This component is built using the [React Aria Button](https://react-spectrum.adobe.com/react-aria/Button.html).

<PropDocs components={["Button"]} />

## Related Components

- [IconButton](/docs/components/buttons/icon-button) - For icon-only buttons
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable buttons
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons together
- [Link](/docs/components/navigation/link) - For navigation links that look like buttons`,_meta:{filePath:`components/buttons/button.mdx`,fileName:`button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/button`}},{title:`Copy to Clipboard Button`,description:`A button component that copies text to the clipboard when clicked, with visual feedback via a tooltip.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/copy-to-clipboard-button/basic";
import { CustomIcon } from "../../../examples/copy-to-clipboard-button/custom-icon";

<Example src={Basic} />

## Installation

Run the following command to add the copy to clipboard button component to your project.

\`\`\`bash
pnpm hip install copy-to-clipboard-button
\`\`\`

## Features

### Custom Icon

You can customize the icon displayed on the button.

<Example src={CustomIcon} />

## Props

<PropDocs components={["CopyToClipboardButton"]} />

## Related Components

- [IconButton](/docs/components/buttons/icon-button) - The base icon button component used by CopyToClipboardButton
- [Button](/docs/components/buttons/button) - For buttons with text and icons
- [Tooltip](/docs/components/overlays/tooltip) - For providing context on buttons`,_meta:{filePath:`components/buttons/copy-to-clipboard-button.mdx`,fileName:`copy-to-clipboard-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/copy-to-clipboard-button`}},{title:`Icon Button`,description:`A button component specifically designed for icons with built-in tooltip support.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/icon-button/basic";
import { IconButtonVariants } from "../../../examples/icon-button/variants";
import { IconButtonSizes } from "../../../examples/icon-button/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the icon button component to your project.

\`\`\`bash
pnpm hip install icon-button
\`\`\`

## Features

### Variants

Icon buttons support the same variants as regular buttons.

<Example src={IconButtonVariants} />

### Sizes

Icon buttons support three different sizes.

<Example src={IconButtonSizes} />

## Props

This component is built using the [React Aria Button](https://react-spectrum.adobe.com/react-aria/Button.html).

<PropDocs components={["IconButton"]} />

## Related Components

- [Button](/docs/components/buttons/button) - For buttons with text and icons
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable icon buttons
- [Tooltip](/docs/components/overlays/tooltip) - For providing context on icon-only buttons
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping icon buttons together`,_meta:{filePath:`components/buttons/icon-button.mdx`,fileName:`icon-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/icon-button`}},{title:`Segmented Control`,description:`A segmented control displays a set of mutually exclusive options, allowing users to select one option at a time.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/segmented-control/basic";
import { Size } from "../../../examples/segmented-control/size";
import { WithIcons } from "../../../examples/segmented-control/with-icons";

<Example src={Basic} />

## Installation

Run the following command to add the segmented control component to your project.

\`\`\`bash
pnpm hip install segmented-control
\`\`\`

## Features

### Sizes

Segmented controls support three different sizes: small, medium, and large.

<Example src={Size} />

### With Icons

Segmented control items can include icons alongside text labels.

<Example src={WithIcons} />

## Props

This component is built using [React Aria ToggleButtonGroup](https://react-spectrum.adobe.com/react-aria/ToggleButtonGroup.html).

<PropDocs components={["SegmentedControl", "SegmentedControlItem"]} />

## Related Components

- [Tabs](/docs/components/navigation/tabs) - For organizing content into multiple sections
- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together
- [Radio](/docs/components/form/radio) - For single-selection from multiple options`,_meta:{filePath:`components/buttons/segmented-control.mdx`,fileName:`segmented-control.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/segmented-control`}},{title:`Toggle Button Group`,description:`A group of toggle buttons that work together as a single control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";

import { Basic } from "../../../examples/toggle-button-group/basic";
import { Orientation } from "../../../examples/toggle-button-group/orientation";
import { Variants } from "../../../examples/toggle-button-group/variants";

<Example src={Basic} />

## Installation

Run the following command to add the toggle button group component to your project.

\`\`\`bash
pnpm hip install toggle-button-group
\`\`\`

## Features

### Orientation

The toggle button group component can be oriented horizontally or vertically.

<Example src={Orientation} />

### Variants

The toggle button group component can be grouped or separate.

<Example src={Variants} />

## Props

<PropDocs components={["ToggleButtonGroup"]} />

## Related Components

- [ToggleButton](/docs/components/buttons/toggle-button) - Individual toggle buttons within the group
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping regular buttons together
- [Radio](/docs/components/form/radio) - For single-selection from multiple options
- [Checkbox](/docs/components/form/checkbox) - For multiple-selection options`,_meta:{filePath:`components/buttons/toggle-button-group.mdx`,fileName:`toggle-button-group.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/toggle-button-group`}},{title:`Toggle Button`,description:`A toggle button component that can be pressed to toggle between states.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/toggle-button/basic";
import { Sizes } from "../../../examples/toggle-button/sizes";
import { Variants } from "../../../examples/toggle-button/variants";

<Example src={Basic} />

## Installation

Run the following command to add the toggle button component to your project.

\`\`\`bash
pnpm hip install toggle-button
\`\`\`

## Features

### Sizes

The toggle button component comes in three sizes: small, medium, and large.

<Example src={Sizes} />

### Variants

The toggle button component comes in four variants: primary, secondary, tertiary, and outline.

<Example src={Variants} />

## Props

This component is built using the [React Aria Toggle Button](https://react-spectrum.adobe.com/react-aria/ToggleButton.html).

<PropDocs components={["ToggleButton"]} />

## Related Components

- [Button](/docs/components/buttons/button) - For regular clickable buttons
- [IconButton](/docs/components/buttons/icon-button) - For icon-only toggle buttons
- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together
- [Switch](/docs/components/form/switch) - For toggle switches with labels`,_meta:{filePath:`components/buttons/toggle-button.mdx`,fileName:`toggle-button.mdx`,directory:`components/buttons`,extension:`mdx`,path:`components/buttons/toggle-button`}},{title:`Command Menu`,description:`A command menu component for displaying a searchable list of commands or actions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/command-menu/basic";

<Example src={Basic} />

## Installation

Run the following command to add the command menu component to your project.

\`\`\`bash
pnpm hip install command-menu
\`\`\`

## Props

The command menu is a custom component built using a SearchField, Dialog, and Menu.

<PropDocs
  components={[
    "CommandMenu",
    "CommandMenuItem",
    "CommandMenuSection",
    "CommandMenuSectionHeader",
    "CommandMenuSeparator",
  ]}
/>

## Related Components

- [SearchField](/docs/components/form/search-field) - For the search input in command menus
- [Menu](/docs/components/collections/menu) - The underlying menu component
- [Dialog](/docs/components/overlays/dialog) - For the modal container
- [ListBox](/docs/components/collections/listbox) - For displaying command results`,_meta:{filePath:`components/collections/command-menu.mdx`,fileName:`command-menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/command-menu`}},{title:`Context Menu`,description:`A context menu component that appears on right-click or long press.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/context-menu/basic";

<Example src={Basic} />

## Installation

Run the following command to add the context menu component to your project.

\`\`\`bash
pnpm hip install context-menu
\`\`\`

## Props

This is a custom component built using a Menu and a custom logic to position a Popover.

<PropDocs components={["ContextMenu", "ContextMenuTrigger"]} />

## Related Components

- [Menu](/docs/components/collections/menu) - The underlying menu component
- [Popover](/docs/components/overlays/popover) - For positioning the context menu
- [CommandMenu](/docs/components/collections/command-menu) - For command palette menus
- [Button](/docs/components/buttons/button) - For context menu triggers`,_meta:{filePath:`components/collections/context-menu.mdx`,fileName:`context-menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/context-menu`}},{title:`List Box`,description:`A list box component for displaying a list of selectable items.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/listbox/basic";
import { Virtualization } from "../../../examples/listbox/virtualization";

<Example src={Basic} />

## Installation

Run the following command to add the list box component to your project.

\`\`\`bash
pnpm hip install listbox
\`\`\`

## Features

### Virtualization

The list box supports virtualization by providing the \`isVirtualized\` prop.
The container must have a fixed height and \`overflow: auto\`.

<Example src={Virtualization} />

## Props

This component is built using the [React Aria ListBox](https://react-spectrum.adobe.com/react-aria/ListBox.html).

<PropDocs
  components={[
    "ListBox",
    "ListBoxItem",
    "ListBoxSection",
    "ListBoxSeparator",
    "ListBoxSectionHeader",
  ]}
/>

## Related Components

- [Select](/docs/components/form/select) - For dropdown selection using ListBox
- [ComboBox](/docs/components/form/combobox) - For searchable selection using ListBox
- [Tree](/docs/components/collections/tree) - For hierarchical data display
- [Table](/docs/components/collections/table) - For structured data display`,_meta:{filePath:`components/collections/listbox.mdx`,fileName:`listbox.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/listbox`}},{title:`Menu`,description:`A menu component for displaying a list of actions or options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/menu/basic";

<Example src={Basic} />

## Installation

Run the following command to add the menu component to your project.

\`\`\`bash
pnpm hip install menu
\`\`\`

## Props

This component is built using the [React Aria Menu](https://react-spectrum.adobe.com/react-aria/Menu.html).

<PropDocs components={["Menu", "MenuItem", "MenuSection", "SubMenu"]} />

## Related Components

- [ContextMenu](/docs/components/collections/context-menu) - For right-click context menus
- [CommandMenu](/docs/components/collections/command-menu) - For command palette menus
- [Popover](/docs/components/overlays/popover) - For menu containers
- [Button](/docs/components/buttons/button) - For menu triggers`,_meta:{filePath:`components/collections/menu.mdx`,fileName:`menu.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/menu`}},{title:`Menubar`,description:`A menubar component that displays a horizontal row of menu items, typically used for application navigation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/menubar/basic";
import { Disabled } from "../../../examples/menubar/disabled";
import { Size } from "../../../examples/menubar/size";

<Example src={Basic} />

## Installation

Run the following command to add the menubar component to your project.

\`\`\`bash
pnpm hip install menubar
\`\`\`

## Features

### Disabled State

Menubar items can be disabled to prevent interaction.

<Example src={Disabled} />

### Size

The menubar component supports three sizes: \`sm\`, \`md\`, and \`lg\`.

<Example src={Size} />

## Props

This a custom component that is built using React Aria's [DialogTrigger](https://react-spectrum.adobe.com/react-aria/DialogTrigger.html), [Menu](https://react-spectrum.adobe.com/react-aria/Menu.html), and [Popover](https://react-spectrum.adobe.com/react-aria/Popover.html).

<PropDocs components={["Menubar", "MenubarItem"]} />

## Related Components

- [Menu](/docs/components/collections/menu) - The underlying menu component used in menubar items
- [Popover](/docs/components/overlays/popover) - For positioning the menu popovers
- [MenuItem](/docs/components/collections/menu) - Menu items displayed in the menubar menus
- [SubMenu](/docs/components/collections/menu) - For nested submenus in menubar items`,_meta:{filePath:`components/collections/menubar.mdx`,fileName:`menubar.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/menubar`}},{title:`Table`,description:`A table component for displaying structured data in rows and columns.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/table/basic";
import { Selection } from "../../../examples/table/selection";
import { ResizableColumns } from "../../../examples/table/resizable-columns";
import { DisabledRows } from "../../../examples/table/disabled-rows";
import { Sorting } from "../../../examples/table/sorting";
import { DragAndDrop } from "../../../examples/table/drag-and-drop";
import { Virtualization } from "../../../examples/table/virtualization";

<Example src={Basic} />

## Installation

Run the following command to add the table component to your project.

\`\`\`bash
pnpm hip install table
\`\`\`

## Features

### Selection

With the \`selectionMode\` prop, you can control the selection behavior of the table.
The table support both single and multiple selection modes.

<Example src={Selection} />

> NOTE: The table also supports \`replace\` as a \`selectionBehavior\`.
> Read more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#selection-behavior).

### Resizable Columns

The table supports resizable columns by wrapping the table in a \`ResizableTableContainer\`.

When resizing in enabled the following props are available:

- \`TableColumn.minWidth\` - The minimum width of the column.
- \`TableColumn.maxWidth\` - The maximum width of the column.
- \`TableColumn.defaultWidth\` - The default width of the column. (uncontrolled)
- \`TableColumn.width\` - The width of the column. (controlled)
- \`TableColumn.hasResizer\` - Whether the column has a resizer.

<Example src={ResizableColumns} />

### Row Actions

A row in the table can take an action when the user clicks on it.
React more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#row-actions).

### Sorting

The table supports sorting by setting the \`allowsSorting\` prop on the \`TableColumn\` component.

When sorting is enabled the following props are available:

- \`TableColumn.allowsSorting\` - Whether the column allows sorting.
- \`Table.sortDescriptor\` - The current column that is sorting the table and the direction of the sort.
- \`Table.onSortChange\` - The function to call when the sort changes.

<Example src={Sorting} />

### Drag and Drop

The table supports drag and drop by providing the \`dragAndDropHooks\` prop to the \`Table\` component.
React more about it [here](https://react-spectrum.adobe.com/react-aria/Table.html#drag-and-drop).

<Example src={DragAndDrop} />

### Disabled rows

A row can be disabled by setting the \`isDisabled\` prop to true.

<Example src={DisabledRows} />

### Virtualization

The table supports virtualization by providing the \`isVirtualized\` prop.
The container must have a fixed height and \`overflow: auto\`.

<Example src={Virtualization} />

## Props

This component is built using the [React Aria Table](https://react-spectrum.adobe.com/react-aria/Table.html).

<PropDocs
  components={[
    "Table",
    "TableHeader",
    "TableBody",
    "TableColumn",
    "TableRow",
    "TableCell",
  ]}
/>

## Related Components

- [ListBox](/docs/components/collections/listbox) - For selectable list data
- [Tree](/docs/components/collections/tree) - For hierarchical data display
- [Card](/docs/components/content/card) - For displaying table data in cards
- [Badge](/docs/components/status/badge) - For status indicators in table cells`,_meta:{filePath:`components/collections/table.mdx`,fileName:`table.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/table`}},{title:`Tag Group`,description:`A tag group component for displaying and managing collections of tags.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/tag-group/basic";
import { Removable } from "../../../examples/tag-group/removable";
import { Selected } from "../../../examples/tag-group/selected";
import { WithError } from "../../../examples/tag-group/with-error";

<Example src={Basic} />

## Installation

Run the following command to add the tag group component to your project.

\`\`\`bash
pnpm hip install tag-group
\`\`\`

## Features

### Removable Tags

Tags can be made removable with a remove button.

<Example src={Removable} />

### Selection

Tags can be selectable in single or multiple selection modes.

<Example src={Selected} />

### Error State

Tag groups can display error messages for validation feedback.

<Example src={WithError} />

## Props

This component is built using the [React Aria TagGroup](https://react-spectrum.adobe.com/react-aria/TagGroup.html).

<PropDocs components={["TagGroup", "Tag"]} />

## Related Components

- [Badge](/docs/components/status/badge) - For displaying status indicators
- [Label](/docs/components/form/label) - For form labels and descriptions
- [Button](/docs/components/buttons/button) - For actions on tags
- [Select](/docs/components/form/select) - For single item selection`,_meta:{filePath:`components/collections/tag-group.mdx`,fileName:`tag-group.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/tag-group`}},{title:`Tree`,description:`A tree component for displaying hierarchical data with expandable nodes.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/tree/basic";
import { DragAndDrop } from "../../../examples/tree/drag-and-drop";
import { Virtualization } from "../../../examples/tree/virtualization";

<Example src={Basic} />

## Installation

Run the following command to add the tree component to your project.

\`\`\`bash
pnpm hip install tree
\`\`\`

## Features

### Drag and Drop

The tree supports drag and drop by providing the \`dragAndDropHooks\` prop to the \`Tree\` component.
React more about it [here](https://react-spectrum.adobe.com/react-aria/Tree.html#drag-and-drop).

<Example src={DragAndDrop} />

### Virtualization

The tree supports virtualization by providing the \`isVirtualized\` prop.
The container must have a fixed height and \`overflow: auto\`.

<Example src={Virtualization} />

## Props

This component is built using the [React Aria Tree](https://react-spectrum.adobe.com/react-aria/Tree.html).

<PropDocs components={["Tree", "TreeItem"]} />

## Related Components

- [ListBox](/docs/components/collections/listbox) - For flat list data
- [Table](/docs/components/collections/table) - For structured data display
- [Card](/docs/components/content/card) - For displaying tree data in cards
- [Menu](/docs/components/collections/menu) - For hierarchical menu structures`,_meta:{filePath:`components/collections/tree.mdx`,fileName:`tree.mdx`,directory:`components/collections`,extension:`mdx`,path:`components/collections/tree`}},{title:`Color Area`,description:`A 2D color selection area for choosing colors across two channels.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-area/basic";
import { AspectRatio } from "../../../examples/color-area/aspect-ratio";
import { Disabled } from "../../../examples/color-area/disabled";

<Example src={Basic} />

## Installation

Run the following command to add the color area component to your project.

\`\`\`bash
pnpm hip install color-area
\`\`\`

## Features

### Aspect Ratio

Control the rendered dimensions by setting a custom aspect ratio.

<Example src={AspectRatio} />

## Disabled

The color area can be disabled by setting the \`disabled\` prop to true.

<Example src={Disabled} />

## Props

This component is built using the [React Aria ColorArea](https://react-spectrum.adobe.com/react-aria/ColorArea.html).

<PropDocs components={["ColorArea"]} />

## Related Components

- [ColorField](/docs/components/color/color-field) - For entering color values
- [ColorSwatch](/docs/components/color/color-swatch) - For displaying selected colors`,_meta:{filePath:`components/color/color-area.mdx`,fileName:`color-area.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-area`}},{title:`Color Field`,description:`A color input component for selecting colors with a color picker.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-field/basic";
import { LabelVariant } from "../../../examples/color-field/label-variant";
import { Validation } from "../../../examples/color-field/validation";
import { ValidationWarning } from "../../../examples/color-field/validation-warning";
import { ValidationSuccess } from "../../../examples/color-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the color field component to your project.

\`\`\`bash
pnpm hip install color-field
\`\`\`

## Features

### Label Variant

The color field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria ColorField](https://react-spectrum.adobe.com/react-aria/ColorField.html).

<PropDocs components={["ColorField"]} />

## Related Components

- [ColorSwatch](/docs/components/color/color-swatch) - For displaying color values
- [TextField](/docs/components/form/text-field) - For general text input
- [NumberField](/docs/components/form/number-field) - For numeric input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/color/color-field.mdx`,fileName:`color-field.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-field`}},{title:`Color Picker`,description:`Compose color components to create a color picker.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { DefaultEditor } from "../../../examples/color-picker/default-editor";
import { CustomChildren } from "../../../examples/color-picker/custom-children";
import { Swatches } from "../../../examples/color-picker/swatches";
import { AlphaChannel } from "../../../examples/color-picker/alpha-channel";

This component provides a \`DefaultColorEditor\` component that contains a basic color picker with support for \`hsb\`, \`hsl\` and \`rgb\` values.
It simply composes other color components, which you can also easily do yourself to customize the picker.

<Example src={DefaultEditor} />

## Installation

Run the following command to add the color picker to your project.

\`\`\`bash
pnpm hip install color-picker
\`\`\`

## Features

### Default Editor

The \`DefaultColorEditor\` composes a \`ColorArea\`, \`Hue\` and \`Alpha\` sliders, a format \`Select\`, and a format-aware \`ColorField\`.

<Example src={DefaultEditor} />

### Custom Children

Compose any color UI you like inside \`ColorPicker\`.

<Example src={CustomChildren} />

### Swatches

You can add swatches to the color picker by passing an array of colors to the \`swatches\` prop.

<Example src={Swatches} />

### Alpha Channel

You can hide the alpha channel by passing \`false\` to the \`hasAlpha\` prop.

<Example src={AlphaChannel} />

## Props

This component is built using the React Aria ColorPicker.
See the official guide for full behavior and API details.

- Docs: [React Aria ColorPicker](https://react-spectrum.adobe.com/react-aria/ColorPicker.html#reusable-wrappers)

<PropDocs components={["ColorPicker", "DefaultColorEditor"]} />

## Related Components

- [ColorArea](/docs/components/color/color-area)
- [ColorSlider](/docs/components/color/color-slider)
- [ColorField](/docs/components/color/color-field)
- [ColorSwatchPicker](/docs/components/color/color-swatch-picker)`,_meta:{filePath:`components/color/color-picker.mdx`,fileName:`color-picker.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-picker`}},{title:`Color Slider`,description:`A 1D color selection slider for adjusting a single color channel.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-slider/basic";
import { Channels } from "../../../examples/color-slider/channels";
import { HideValueLabel } from "../../../examples/color-slider/hide-value-label";
import { Disabled } from "../../../examples/color-slider/disabled";
import { Size } from "../../../examples/color-slider/size";

<Example src={Basic} />

## Installation

Run the following command to add the color slider component to your project.

\`\`\`bash
pnpm hip install color-slider
\`\`\`

## Features

### Channels

Adjust different channels such as hue, saturation, lightness, and brightness.

<Example src={Channels} />

### Hide Value Label

The value label can be hidden by setting the \`showValueLabel\` prop to false.

<Example src={HideValueLabel} />

### Disabled

The color slider can be disabled by setting the \`isDisabled\` prop to true.

<Example src={Disabled} />

### Size

The color slider can be sized by setting the \`size\` prop to "sm", "md", or "lg".

<Example src={Size} />

## Props

This component is built using the [React Aria ColorSlider](https://react-spectrum.adobe.com/react-aria/ColorSlider.html).

<PropDocs components={["ColorSlider"]} />

## Related Components

- [ColorArea](/docs/components/color/color-area) - 2D color selection
- [ColorField](/docs/components/color/color-field) - Entering color values
- [Slider](/docs/components/form/slider) - Generic numeric slider`,_meta:{filePath:`components/color/color-slider.mdx`,fileName:`color-slider.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-slider`}},{title:`Color Swatch Picker`,description:`A list of color swatches that allows selecting one color.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-swatch-picker/basic";
import { Size } from "../../../examples/color-swatch-picker/size";
import { Layout } from "../../../examples/color-swatch-picker/layout";

<Example src={Basic} />

## Installation

Run the following command to add the color swatch picker to your project.

\`\`\`bash
pnpm hip install color-swatch-picker
\`\`\`

## Features

### Size

The \`ColorSwatchPicker\` supports the \`size\` prop to adjust the size of the swatches.

<Example src={Size} />

### Layout

The swatches can be laid out in a stack with \`layout="stack"\`

<Example src={Layout} />

## Props

This component is built using [React Aria ColorSwatchPicker](https://react-spectrum.adobe.com/react-aria/ColorSwatchPicker.html).

<PropDocs components={["ColorSwatchPicker", "ColorSwatchPickerItem"]} />

## Related Components

- [ColorSwatch](/docs/components/color/color-swatch) - For individual color previews
- [ColorField](/docs/components/color/color-field) - For color input
- [Grid](/docs/components/layout/grid) - For arranging swatches`,_meta:{filePath:`components/color/color-swatch-picker.mdx`,fileName:`color-swatch-picker.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-swatch-picker`}},{title:`Color Swatch`,description:`A color swatch component for displaying color values.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-swatch/basic";
import { Size } from "../../../examples/color-swatch/size";

<Example src={Basic} />

## Installation

Run the following command to add the color swatch component to your project.

\`\`\`bash
pnpm hip install color-swatch
\`\`\`

## Features

### Size

The \`ColorSwatch\` supports the \`size\` prop with values \`sm\`, \`md\`, and \`lg\`.

<Example src={Size} />

## Props

This component is built using the [React Aria ColorSwatch](https://react-spectrum.adobe.com/react-aria/ColorSwatch.html).

<PropDocs components={["ColorSwatch"]} />

## Related Components

- [ColorField](/docs/components/color/color-field) - For color input with color swatches
- [Card](/docs/components/content/card) - For displaying color swatches in cards
- [Grid](/docs/components/layout/grid) - For organizing color swatches in grids
- [Button](/docs/components/buttons/button) - For interactive color swatches`,_meta:{filePath:`components/color/color-swatch.mdx`,fileName:`color-swatch.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-swatch`}},{title:`Color Wheel`,description:`A circular color picker for selecting hue with a draggable thumb.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/color-wheel/basic";
import { Sizes } from "../../../examples/color-wheel/sizes";
import { Disabled } from "../../../examples/color-wheel/disabled";

<Example src={Basic} />

## Installation

Run the following command to add the color wheel component to your project.

\`\`\`bash
pnpm hip install color-wheel
\`\`\`

## Features

### Sizes

The color wheel supports three sizes via the \`size\` prop (sm, md, lg), which adjust the ring thickness and overall radius.

<Example src={Sizes} />

### Disabled

The color wheel can be disabled using the \`isDisabled\` prop.

<Example src={Disabled} />

## Props

This component is built using the [React Aria ColorWheel](https://react-spectrum.adobe.com/react-aria/ColorWheel.html).

<PropDocs components={["ColorWheel"]} />

## Related Components

- [ColorSlider](/docs/components/color/color-slider) - 1D channel adjustment
- [ColorArea](/docs/components/color/color-area) - 2D color selection
- [ColorField](/docs/components/color/color-field) - Entering color values`,_meta:{filePath:`components/color/color-wheel.mdx`,fileName:`color-wheel.mdx`,directory:`components/color`,extension:`mdx`,path:`components/color/color-wheel`}},{title:`Aspect Ratio`,description:`A component that allows you to set the aspect ratio of a div, with support for images.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/aspect-ratio/basic";
import { NoImage } from "../../../examples/aspect-ratio/no-image";

<Example src={Basic} />

## Installation

Run the following command to add the aspect ratio component to your project.

\`\`\`bash
pnpm hip install aspect-ratio
\`\`\`

## Features

### No Image

The aspect ratio can be set without an image.

<Example src={NoImage} />

## Props

This is a custom component built for setting aspect ratios.

<PropDocs components={["AspectRatio", "AspectRatioImage"]} />

## Related Components

- [Card](/docs/components/content/card) - For cards with aspect ratio images
- [Grid](/docs/components/layout/grid) - For grid layouts with aspect ratio items
- [Flex](/docs/components/layout/flex) - For flex layouts with aspect ratio items
- [Avatar](/docs/components/content/avatar) - For user avatars with consistent aspect ratios`,_meta:{filePath:`components/content/aspect-ratio.mdx`,fileName:`aspect-ratio.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/aspect-ratio`}},{title:`Avatar`,description:`An image element with a fallback for representing the user.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/avatar/basic";
import { AvatarSizes } from "../../../examples/avatar/sizes";
import { AvatarGroup } from "../../../examples/avatar/group";
import { AvatarFallbacks } from "../../../examples/avatar/fallbacks";
import { AvatarButtonExample } from "../../../examples/avatar/button";

<Example src={Basic} />

## Installation

Run the following command to add the avatar component to your project.

\`\`\`bash
pnpm hip install avatar
\`\`\`

## Features

### Sizes

The avatar comes in the standard sizes along with a custom \`xl\` size.

<Example src={AvatarSizes} />

### Group

Avatars can be displayed in groups to show multiple users.

<Example src={AvatarGroup} />

### Fallbacks

Avatars display fallback content when images fail to load or are not provided.

<Example src={AvatarFallbacks} />

### Button

Avatars can be wrapped in a button component for interactive use. The \`AvatarButton\` component provides hover effects with a fade-in overlay.

<Example src={AvatarButtonExample} />

## Props

This is a custom component built for user representation.

<PropDocs components={["Avatar"]} />

## Related Components

- [Badge](/docs/components/status/badge) - For status indicators on avatars
- [Card](/docs/components/content/card) - For cards with user avatars
- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining avatar aspect ratios
- [Typography](/docs/components/content/typography) - For text alongside avatars`,_meta:{filePath:`components/content/avatar.mdx`,fileName:`avatar.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/avatar`}},{title:`Card`,description:`A flexible container component for grouping related content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/card/basic";
import { CardWithImage } from "../../../examples/card/with-image";
import { CardSizes } from "../../../examples/card/sizes";
import { CardWithActions } from "../../../examples/card/with-actions";
import { CardWithBadges } from "../../../examples/card/with-badges";

<Example src={Basic} />

## Installation

Run the following command to add the card component to your project.

\`\`\`bash
pnpm hip install card
\`\`\`

## Features

### With Image

Cards can include images with customizable aspect ratios.

<Example src={CardWithImage} />

### With Actions

Cards can include header actions for interactive elements.

<Example src={CardWithActions} />

### With Badges

Cards can include badges for status indicators and tags.

<Example src={CardWithBadges} />

### Sizes

The card supports three different sizes that affect padding and spacing.

<Example src={CardSizes} />

## Props

This is a custom component built for grouping related content.

<PropDocs
  components={[
    "Card",
    "CardHeader",
    "CardTitle",
    "CardDescription",
    "CardHeaderAction",
    "CardBody",
    "CardFooter",
    "CardImage",
  ]}
/>

## Related Components

- [Table](/docs/components/collections/table) - For structured data display
- [Badge](/docs/components/status/badge) - For status indicators in cards
- [Button](/docs/components/buttons/button) - For card actions
- [AspectRatio](/docs/components/content/aspect-ratio) - For card images`,_meta:{filePath:`components/content/card.mdx`,fileName:`card.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/card`}},{title:`Content`,description:`A wrapper component that applies consistent spacing styles to content elements.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/content/basic";
import { WithLists } from "../../../examples/content/with-lists";
import { WithBlockquote } from "../../../examples/content/with-blockquote";

<Example src={Basic} />

## Installation

Run the following command to add the content component to your project.

\`\`\`bash
pnpm hip install content
\`\`\`

## Features

### Automatic Spacing

The Content component automatically applies consistent margins to child elements:

- **Headings (h1-h5)**: Top and bottom margins for proper vertical rhythm
- **Paragraphs**: Spacing between paragraphs, with adjusted spacing when nested in lists or blockquotes
- **Blockquotes**: Left border, padding, and zero margins for proper indentation
- **Lists**: Proper spacing maintained for list items

### With Lists

The Content component handles spacing for both ordered and unordered lists:

<Example src={WithLists} />

### With Blockquotes

Blockquotes receive special styling with proper indentation and spacing:

<Example src={WithBlockquote} />

## Props

<PropDocs components={["Content"]} />

## Related Components

- [MarkdownContent](/docs/components/content/markdown-content) - For rendering markdown content
- [Typography](/docs/components/content/typography) - For semantic typography components
- [Text](/docs/components/content/text) - For flexible text styling
- [Card](/docs/components/content/card) - For grouping content in containers`,_meta:{filePath:`components/content/content.mdx`,fileName:`content.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/content`}},{title:`Editable Text`,description:`An inline editable text component that switches between display and edit modes. By default the component will enter edit mode for a long press.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/editable-text/basic";
import { Composition } from "../../../examples/editable-text/composition";

<Example src={Basic} />

## Installation

Run the following command to add the editable text component to your project.

\`\`\`bash
pnpm hip install editable-text
\`\`\`

## Features

### Composition

The editable text component can be composed with other components.

<Example src={Composition} />

## Props

This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/).

<PropDocs components={["EditableText"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - For standard text input fields
- [TextArea](/docs/components/form/text-area) - For multi-line text input
- [Text](/docs/components/content/text) - For displaying static text`,_meta:{filePath:`components/content/editable-text.mdx`,fileName:`editable-text.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/editable-text`}},{title:`Empty State`,description:`A component for displaying empty states with image, title, description, and actions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/empty-state/basic";
import { WithActions } from "../../../examples/empty-state/with-actions";
import { Sizes } from "../../../examples/empty-state/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the empty-state component to your project.

\`\`\`bash
pnpm hip install empty-state
\`\`\`

## Features

### With Actions

Empty states can include action buttons to guide users.

<Example src={WithActions} />

### Sizes

The empty state supports three different sizes that affect spacing and image size.

<Example src={Sizes} />

## Props

This is a custom component built for displaying empty states.

<PropDocs
  components={[
    "EmptyState",
    "EmptyStateImage",
    "EmptyStateTitle",
    "EmptyStateDescription",
    "EmptyStateActions",
  ]}
/>

## Related Components

- [Card](/docs/components/content/card) - For grouping related content
- [Button](/docs/components/buttons/button) - For empty state actions
- [Text](/docs/components/content/text) - For custom text styling`,_meta:{filePath:`components/content/empty-state.mdx`,fileName:`empty-state.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/empty-state`}},{title:`ImageCropper`,description:`A composable, headless React component for interactive image cropping with zoom, pan, and aspect ratio control.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/image-cropper/basic";
import { DialogExample } from "../../../examples/image-cropper/dialog";
import { BlobExample } from "../../../examples/image-cropper/blob";

<Example src={Basic} />

## Installation

Run the following command to add the image-cropper component to your project.

\`\`\`bash
pnpm hip install image-cropper
\`\`\`

## Example

### Blob Data

You can also use the image-cropper component with blob data.
This is useful when you want to crop an image that is already loaded into the browser.

<Example src={BlobExample} />

### In a Dialog

<Example src={DialogExample} />

## Features

### Accessibility

The ImageCropper component is designed with accessibility in mind:

- **Required Description**: The \`ImageCropper.Description\` component is required for screen reader users
- **ARIA Attributes**: Automatically includes proper ARIA attributes
- **Keyboard Support**: Full keyboard navigation support

## Props

<PropDocs
  components={[
    "ImageCropperRoot",
    "ImageCropperImage",
    "ImageCropperCropArea",
    "ImageCropperDescription",
  ]}
/>

## Related Components

- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining aspect ratios in layouts
- [Card](/docs/components/content/card) - For grouping content in containers`,_meta:{filePath:`components/content/image-cropper.mdx`,fileName:`image-cropper.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/image-cropper`}},{title:`Kbd`,description:`A keyboard key component for displaying keyboard shortcuts and keys.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/kbd/basic";
import { Shortcuts } from "../../../examples/kbd/shortcuts";
import { Inline } from "../../../examples/kbd/inline";
import { Navigation } from "../../../examples/kbd/navigation";

<Example src={Basic} />

## Installation

Run the following command to add the kbd component to your project.

\`\`\`bash
pnpm hip install kbd
\`\`\`

## Features

### Shortcuts

Display keyboard shortcuts with a combination of keys using the \`+\` separator.

<Example src={Shortcuts} />

### Inline Usage

The Kbd component can be used inline within text for displaying keyboard shortcuts.

<Example src={Inline} />

### Navigation Keys

Display arrow keys and other navigation keys with proper symbols.

<Example src={Navigation} />

## Supported Keys

The component supports the following special keys:

- \`MetaOrCtrl\` - Shows ⌘ on Mac, Ctrl on other platforms
- \`Shift\` - Shows ⇧
- \`Enter\` - Shows ↵
- \`Tab\` - Shows ⇥
- \`Backspace\` - Shows ⌫
- \`Delete\` - Shows ⌦
- \`ArrowLeft\` - Shows ←
- \`ArrowRight\` - Shows →
- \`ArrowUp\` - Shows ↑
- \`ArrowDown\` - Shows ↓
- \`Plus\` - Shows +

## Props

<PropDocs components={["Kbd"]} />

## Related Components

- [Text](/docs/components/content/text) - For text content around keyboard shortcuts`,_meta:{filePath:`components/content/kbd.mdx`,fileName:`kbd.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/kbd`}},{title:`MarkdownContent`,description:`Renders GitHub-flavored markdown with sanitization to prevent XSS.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/markdown-content/basic";

<Example src={Basic} />

## Installation

Run the following command to add the markdown-content component to your project.

\`\`\`bash
pnpm hip install markdown-content
\`\`\`

## Features

### GitHub-Flavored Markdown

The component supports GitHub-flavored markdown including tables, strikethrough, and autolinks.

### Sanitization

Content is sanitized via rehype-sanitize to prevent XSS attacks.

## Props

<PropDocs components={["MarkdownContent"]} />

## Related Components

- [Typography](/docs/components/content/typography) - For semantic typography components
- [Link](/docs/components/navigation/link) - For links within markdown
- [Content](/docs/components/content/content) - For consistent content spacing`,_meta:{filePath:`components/content/markdown-content.mdx`,fileName:`markdown-content.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/markdown-content`}},{title:`Separator`,description:`A visual divider component for separating content sections.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/separator/basic";
import { SeparatorOrientation } from "../../../examples/separator/orientation";

<Example src={Basic} />

## Installation

Run the following command to add the separator component to your project.

\`\`\`bash
pnpm hip install separator
\`\`\`

## Features

### Orientation

Separators can be oriented horizontally or vertically.

<Example src={SeparatorOrientation} />

## Props

This component is built using the [React Aria Separator](https://react-spectrum.adobe.com/react-aria/useSeparator.html#useseparator).

<PropDocs components={["Separator"]} />

## Related Components

- [Flex](/docs/components/layout/flex) - For layouts that use separators
- [Card](/docs/components/content/card) - For cards that use separators
- [Menu](/docs/components/collections/menu) - For menu items with separators
- [Typography](/docs/components/content/typography) - For text sections with separators`,_meta:{filePath:`components/content/separator.mdx`,fileName:`separator.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/separator`}},{title:`Text`,description:`A flexible text component with comprehensive typography controls.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { TextExample } from "../../../examples/text/basic";
import { TextVariants } from "../../../examples/text/variants";
import { TextAlignment } from "../../../examples/text/alignment";
import { TextStrikethrough } from "../../../examples/text/strikethrough";
import { TextTypography } from "../../../examples/text/typography";

<Example src={TextExample} />

## Installation

Run the following command to add the text component to your project.

\`\`\`bash
pnpm hip install typography
\`\`\`

## Features

### Tokens

The Text component gives you direct acces to all of the [typography tokens](/docs/foundations/typography).
You can fully customize the \`font\`, \`size\`, \`weight\`, and \`tracking\` properties.

> NOTE: By using this component you are not using the [typeramp](/docs/components/content/typography) component.
> It could lead to inconsistent typography across your application.

### Variants

Choose from semantic color variants:

<Example src={TextVariants} />

### Alignment

Control text alignment:

<Example src={TextAlignment} />

### Strikethrough

Add strikethrough decoration to text:

<Example src={TextStrikethrough} />

## Props

<PropDocs components={["Text"]} />

## Related Components

- [Typography](/docs/components/content/typography) - For semantic typography components
- [Label](/docs/components/form/label) - For form labels
- [Link](/docs/components/navigation/link) - For text links`,_meta:{filePath:`components/content/text.mdx`,fileName:`text.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/text`}},{title:`Typography`,description:`A collection of text components for consistent typography throughout your application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Headings } from "../../../examples/typography/headings";
import { Text } from "../../../examples/typography/text";
import { TextVariants } from "../../../examples/typography/variants";
import { Lists } from "../../../examples/typography/lists";
import { FontFamilies } from "../../../examples/typography/font-families";
import { FontWeights } from "../../../examples/typography/font-weights";
import { FontSizes } from "../../../examples/typography/font-sizes";
import { LineHeights } from "../../../examples/typography/line-heights";
import { LetterSpacing } from "../../../examples/typography/letter-spacing";
import { Typeramp } from "../../../examples/typography/typeramp";
import { BlockquoteExample } from "../../../examples/typography/blockquote";
import { InlineCodeExample } from "../../../examples/typography/inline-code";
import { LinkedHeadingExample } from "../../../examples/typography/linked-heading";
import { PreExample } from "../../../examples/typography/pre";

<Example src={Typeramp} />

## Installation

Run the following command to add the typography component to your project.

\`\`\`bash
pnpm hip install typography
\`\`\`

## Typeramp

The typeramp is a composed system that combines individual tokens into semantic text styles.
Instead of manually combining tokens each time you need styled text, the typeramp provides pre-composed styles for common use cases.

### Why Use a Typeramp?

A typeramp provides several key benefits when developing applications:

1. **Consistency**: Ensures all text follows the same visual hierarchy and spacing rules
2. **Efficiency**: Reduces the need to manually combine tokens for common text patterns
3. **Maintainability**: Changes to the design system can be made in one place
4. **Accessibility**: Built-in responsive behavior and proper contrast ratios
5. **Semantic Meaning**: Styles are named for their purpose rather than their appearance

### Responsive Behavior

The typeramp includes responsive font sizes that automatically adjust based on screen size. For example, \`heading1\` uses \`fontSize["4xl"]\` on mobile and \`fontSize["5xl"]\` on medium screens and up.

## Features

### Text Variants

The Body and Label components support secondary variants for styling.

<Example src={TextVariants} />

### Lists

Typography also includes list components.

<Example src={Lists} />

### Blockquote

Typography also includes a blockquote component.

<Example src={BlockquoteExample} />

### Inline Code

Typography also includes an inline code component.

<Example src={InlineCodeExample} />

### Pre

Typography also includes a pre component.

<Example src={PreExample} />

### Linked Heading

Typography also includes a linked heading component that adds anchor links and copy-to-clipboard functionality to headings.

<Example src={LinkedHeadingExample} />

## Props

This is a custom component collection built for typography.

<PropDocs
  components={[
    "Heading1",
    "Heading2",
    "Heading3",
    "Heading4",
    "Heading5",
    "Body",
    "SmallBody",
    "LabelText",
    "SubLabel",
    "Blockquote",
    "UnorderedList",
    "OrderedList",
    "ListItem",
    "InlineCode",
    "Pre",
    "LinkedHeading",
  ]}
/>

## Related Components

- [Link](/docs/components/navigation/link) - For text links within typography
- [Badge](/docs/components/status/badge) - For status indicators in text
- [Card](/docs/components/content/card) - For containing typography content
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/content/typography.mdx`,fileName:`typography.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/typography`}},{title:`Video`,description:`A styled video player built with Media Chrome and sensible default controls.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/video/basic";

<Example src={Basic} />

## Installation

Run the following command to add the video component to your project.

\`\`\`bash
pnpm hip install video
\`\`\`

## Features

### Default controls

The component ships with play, seek, timeline, volume, and fullscreen controls.

### Layout stability

The player reserves space with an aspect ratio by default.
This helps avoid layout shift while the media metadata loads.

### Custom controls

Pass custom Media Chrome children when you need a different control layout.
If you do not pass children, the default control bar is rendered automatically.

## Props

<PropDocs components={["Video"]} />

## Related Components

- [Aspect Ratio](/docs/components/content/aspect-ratio) - For reserving space for other media layouts
- [Lightbox](/docs/components/overlays/lightbox) - For immersive media presentation patterns`,_meta:{filePath:`components/content/video.mdx`,fileName:`video.mdx`,directory:`components/content`,extension:`mdx`,path:`components/content/video`}},{title:`Calendar`,description:`A calendar displays one or more date grids and allows users to select a single date.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { DefaultCalendar } from "../../../examples/calendar/default";
import { UnavailableDates } from "../../../examples/calendar/unavailable-dates";
import { MultipleMonths } from "../../../examples/calendar/multiple-months";

This component wraps the headless React Aria Calendar with sensible defaults and StyleX tokens.
It renders a header with previous/next buttons and a month heading, and a grid of cells.

<Example src={DefaultCalendar} />

## Installation

Run the following command to add the calendar to your project.

\`\`\`bash
pnpm hip install calendar
\`\`\`

## Features

### Default

Basic calendar with month navigation.

<Example src={DefaultCalendar} />

### Unavailable Dates

You can mark dates as unavailable by passing an array of dates to the \`isDateUnavailable\` prop.

<Example src={UnavailableDates} />

### Multiple Months

You can display multiple months by passing the \`visibleDuration\` prop.

<Example src={MultipleMonths} />

## Props

This component is built using the React Aria Calendar.
See the official guide for full behavior and API details.

- Docs: [React Aria Calendar](https://react-spectrum.adobe.com/react-aria/Calendar.html#reusable-wrappers)

<PropDocs components={["Calendar"]} />

## Related Components

- [Range Calendar](/docs/components/date-and-time/range-calendar) - For date range input
- [DatePicker](/docs/components/date-and-time/date-picker) - For date input
- [DateRangePicker](/docs/components/date-and-time/date-range-picker) - For date range input
- [DateField](/docs/components/date-and-time/date-field) - For date input`,_meta:{filePath:`components/date-and-time/calendar.mdx`,fileName:`calendar.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/calendar`}},{title:`Date Field`,description:`A date input component for selecting dates with proper formatting.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/date-field/basic";
import { LabelVariant } from "../../../examples/date-field/label-variant";
import { Validation } from "../../../examples/date-field/validation";
import { ValidationWarning } from "../../../examples/date-field/validation-warning";
import { ValidationSuccess } from "../../../examples/date-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the date field component to your project.

\`\`\`bash
pnpm hip install date-field
\`\`\`

## Features

### Label Variant

The date field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria DateField](https://react-spectrum.adobe.com/react-aria/DateField.html).

<PropDocs components={["DateField"]} />

## Related Components

- [TimeField](/docs/components/date-and-time/time-field) - For time input
- [TextField](/docs/components/form/text-field) - For general text input
- [NumberField](/docs/components/form/number-field) - For numeric input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-field.mdx`,fileName:`date-field.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-field`}},{title:`Date Picker`,description:`A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/date-picker/basic";
import { LabelVariant } from "../../../examples/date-picker/label-variant";
import { Validation } from "../../../examples/date-picker/validation";
import { ValidationWarning } from "../../../examples/date-picker/validation-warning";
import { ValidationSuccess } from "../../../examples/date-picker/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the date picker component to your project.

\`\`\`bash
pnpm hip install date-picker
\`\`\`

## Features

### Label Variant

The date picker supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria DatePicker](https://react-spectrum.adobe.com/react-aria/DatePicker.html).

<PropDocs components={["DatePicker"]} />

## Related Components

- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
- [Calendar](/docs/components/date-and-time/calendar) - For standalone calendar display
- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For date range selection
- [TimeField](/docs/components/date-and-time/time-field) - For time input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-picker.mdx`,fileName:`date-picker.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-picker`}},{title:`Date Range Picker`,description:`A date range picker combines date inputs and a RangeCalendar popover to allow users to enter or select a date range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/date-range-picker/basic";
import { LabelVariant } from "../../../examples/date-range-picker/label-variant";
import { Validation } from "../../../examples/date-range-picker/validation";
import { ValidationWarning } from "../../../examples/date-range-picker/validation-warning";
import { ValidationSuccess } from "../../../examples/date-range-picker/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the date range picker component to your project.

\`\`\`bash
pnpm hip install date-range-picker
\`\`\`

## Features

### Label Variant

The date range picker supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria DateRangePicker](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html).

<PropDocs components={["DateRangePicker"]} />

## Related Components

- [DatePicker](/docs/components/date-and-time/date-picker) - For single date selection
- [RangeCalendar](/docs/components/date-and-time/range-calendar) - For standalone range calendar display
- [DateField](/docs/components/date-and-time/date-field) - For date input without popover
- [TimeField](/docs/components/date-and-time/time-field) - For time input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/date-range-picker.mdx`,fileName:`date-range-picker.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/date-range-picker`}},{title:`Range Calendar`,description:`A range calendar lets users select a start and end date from one or more month grids.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { DefaultRangeCalendar } from "../../../examples/range-calendar/default";
import { UnavailableRangeDates } from "../../../examples/range-calendar/unavailable-dates";
import { MultipleMonthsRange } from "../../../examples/range-calendar/multiple-months";

Select a date range using a calendar grid with previous/next navigation.
Supports marking dates unavailable and showing multiple months.

<Example src={DefaultRangeCalendar} />

## Installation

Run the following command to add the range calendar to your project.

\`\`\`bash
pnpm hip install range-calendar
\`\`\`

## Features

### Unavailable Dates

Disable dates via \`isDateUnavailable\`.

<Example src={UnavailableRangeDates} />

### Multiple Months

Show multiple months with \`visibleDuration\`.

<Example src={MultipleMonthsRange} />

## Props

This component is built using the React Aria RangeCalendar.
See the official guide for full behavior and API details.

- Docs: [React Aria RangeCalendar](https://react-spectrum.adobe.com/react-aria/RangeCalendar.html#reusable-wrappers)

<PropDocs components={["RangeCalendar"]} />

## Related Components

- [DateRangePicker](/docs/components/date-and-time/date-range-picker)
- [Calendar](/docs/components/date-and-time/calendar)
- [DateField](/docs/components/date-and-time/date-field)`,_meta:{filePath:`components/date-and-time/range-calendar.mdx`,fileName:`range-calendar.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/range-calendar`}},{title:`Time Field`,description:`A time input component for selecting times with proper formatting.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/time-field/basic";
import { LabelVariant } from "../../../examples/time-field/label-variant";
import { Sizes } from "../../../examples/time-field/sizes";
import { Variants } from "../../../examples/time-field/variants";
import { Description } from "../../../examples/time-field/description";
import { PrefixAndSuffix } from "../../../examples/time-field/prefix-and-suffix";
import { Validation } from "../../../examples/time-field/validation";
import { ValidationWarning } from "../../../examples/time-field/validation-warning";
import { ValidationSuccess } from "../../../examples/time-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the time field component to your project.

\`\`\`bash
pnpm hip install time-field
\`\`\`

## Features

### Label Variant

The time field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Prefix and Suffix

The time field component supports a prefix and suffix.

<Example src={PrefixAndSuffix} />

### Sizes

The time field component comes in three sizes: small, medium, and large.

<Example src={Sizes} />

### Variants

The time field component comes in three variants: primary, secondary, and tertiary.

<Example src={Variants} />

### Description

The time field component supports a description.

<Example src={Description} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria TimeField](https://react-spectrum.adobe.com/react-aria/TimeField.html).

<PropDocs components={["TimeField"]} />

## Related Components

- [DateField](/docs/components/date-and-time/date-field) - For date input
- [TextField](/docs/components/form/text-field) - For general text input
- [NumberField](/docs/components/form/number-field) - For numeric input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/date-and-time/time-field.mdx`,fileName:`time-field.mdx`,directory:`components/date-and-time`,extension:`mdx`,path:`components/date-and-time/time-field`}},{title:`AutocompleteInput`,description:`A text input with a dropdown list of suggestions that filters as you type.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/autocomplete/basic";

<Example src={Basic} />

## Installation

Run the following command to add the AutocompleteInput component to your project.

\`\`\`bash
pnpm hip install autocomplete
\`\`\`

The AutocompleteInput component requires the listbox and text-field components.

Install them if you have not already.

\`\`\`bash
pnpm hip install autocomplete listbox text-field
\`\`\`

## Props

This component is built using the [React Aria Autocomplete](https://react-spectrum.adobe.com/react-aria/Autocomplete.html).

<PropDocs components={["AutocompleteInput"]} />

## Related Components

- [ComboBox](/docs/components/form/combobox) - For selecting from a dropdown with search
- [SearchField](/docs/components/form/search-field) - For search input with clear button
- [TextField](/docs/components/form/text-field) - For general text input
- [Select](/docs/components/form/select) - For dropdown selection without search`,_meta:{filePath:`components/form/autocomplete.mdx`,fileName:`autocomplete.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/autocomplete`}},{title:`Checkbox`,description:`A checkbox component for selecting one or more options from a set.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/checkbox/basic";
import { CheckboxStates } from "../../../examples/checkbox/states";
import { CheckboxWithDescription } from "../../../examples/checkbox/with-description";

<Example src={Basic} />

## Installation

Run the following command to add the checkbox component to your project.

\`\`\`bash
pnpm hip install checkbox
\`\`\`

## Features

### States

Checkboxes support different states including checked, unchecked, indeterminate, and disabled.

<Example src={CheckboxStates} />

### With Description

Checkboxes can include descriptive text to provide additional context.

<Example src={CheckboxWithDescription} />

## Props

This component is built using the [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html).

<PropDocs components={["Checkbox", "CheckboxGroup"]} />

## Related Components

- [Radio](/docs/components/form/radio) - For single selection from multiple options
- [Switch](/docs/components/form/switch) - For binary toggle choices
- [Select](/docs/components/form/select) - For dropdown selection
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/checkbox.mdx`,fileName:`checkbox.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/checkbox`}},{title:`Combo Box`,description:`A combo box component that combines a text input with a dropdown list of options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/combobox/basic";
import { LabelVariant } from "../../../examples/combobox/label-variant";
import { Validation } from "../../../examples/combobox/validation";
import { ValidationWarning } from "../../../examples/combobox/validation-warning";
import { ValidationSuccess } from "../../../examples/combobox/validation-success";
import { Virtualization } from "../../../examples/combobox/virtualization";

<Example src={Basic} />

## Installation

Run the following command to add the combo box component to your project.

\`\`\`bash
pnpm hip install combobox
\`\`\`

## Features

### Label Variant

The combo box supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

### Virtualization

The combo box supports virtualization by providing the \`isVirtualized\` prop.
The container must have a fixed height and \`overflow: auto\`.

<Example src={Virtualization} />

## Props

This component is built using the [React Aria ComboBox](https://react-spectrum.adobe.com/react-aria/ComboBox.html).

<PropDocs
  components={[
    "ComboBox",
    "ComboBoxItem",
    "ComboBoxSection",
    "ComboBoxSectionHeader",
    "ComboBoxSeparator",
  ]}
/>

## Related Components

- [Select](/docs/components/form/select) - For dropdown selection without search
- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
- [SearchField](/docs/components/form/search-field) - For search input with clear button
- [TextField](/docs/components/form/text-field) - For general text input
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/combobox.mdx`,fileName:`combobox.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/combobox`}},{title:`File Drop Zone`,description:`A file drop zone component for drag and drop file uploads.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/file-drop-zone/basic";
import { DefaultTrigger } from "../../../examples/file-drop-zone/default-trigger";

<Example src={Basic} />

## Installation

Run the following command to add the file drop zone component to your project.

\`\`\`bash
pnpm hip install file-drop-zone
\`\`\`

## Features

### Default Trigger

Use \`FileDropDefaultTrigger\` to make the entire drop zone area clickable. The trigger button is positioned absolutely to cover the entire drop zone.

<Example src={DefaultTrigger} />

## Props

This component is built using the [React Aria DropZone](https://react-spectrum.adobe.com/react-aria/DropZone.html) and [React Aria FileTrigger](https://react-spectrum.adobe.com/react-spectrum/FileTrigger.html#filetrigger).

<PropDocs components={["FileDropZone"]} />

## Related Components

- [Button](/docs/components/buttons/button) - For file upload triggers
- [Card](/docs/components/content/card) - For containing file drop zones
- [Badge](/docs/components/status/badge) - For file upload status indicators
- [Typography](/docs/components/content/typography) - For file upload instructions`,_meta:{filePath:`components/form/file-drop-zone.mdx`,fileName:`file-drop-zone.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/file-drop-zone`}},{title:`Form`,description:`A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/form/basic";
import { WithValidation } from "../../../examples/form/with-validation";
import { WithSubmitAndReset } from "../../../examples/form/with-submit-and-reset";

<Example src={Basic} />

## Installation

Run the following command to add the form component to your project.

\`\`\`bash
pnpm hip install form
\`\`\`

## Features

### Server-Side Validation

Forms support server-side validation by providing error messages through the \`validationErrors\` prop. The errors are displayed to the user as soon as they are set, and cleared after the user modifies each field's value.

<Example src={WithValidation} />

### Submit and Reset

Forms support both submit and reset functionality. The \`onSubmit\` event is triggered when a user submits the form with the Enter key or by pressing a submit button. The \`onReset\` event is triggered when a user presses a reset button.

<Example src={WithSubmitAndReset} />

## Props

This component is built using [React Aria Form](https://react-spectrum.adobe.com/react-aria/Form.html).

<PropDocs components={["Form"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - For text input fields in forms
- [NumberField](/docs/components/form/number-field) - For numeric input fields in forms
- [TextArea](/docs/components/form/text-area) - For multi-line text input in forms
- [Select](/docs/components/form/select) - For dropdown selection in forms
- [Checkbox](/docs/components/form/checkbox) - For checkbox inputs in forms
- [Radio](/docs/components/form/radio) - For radio button inputs in forms
- [Button](/docs/components/buttons/button) - For submit and reset buttons in forms`,_meta:{filePath:`components/form/form.mdx`,fileName:`form.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/form`}},{title:`Label`,description:`A label component for form elements with optional descriptions.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/label/basic";
import { LabelSizes } from "../../../examples/label/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the label component to your project.

\`\`\`bash
pnpm hip install label
\`\`\`

## Features

### Sizes

Labels support three different sizes.

<Example src={LabelSizes} />

## Props

This component is built using the [React Aria Label](https://react-spectrum.adobe.com/react-aria/Label.html).

<PropDocs components={["Label", "Description"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - Form inputs that use labels
- [Checkbox](/docs/components/form/checkbox) - Form controls that use labels
- [Radio](/docs/components/form/radio) - Form controls that use labels
- [Switch](/docs/components/form/switch) - Form controls that use labels`,_meta:{filePath:`components/form/label.mdx`,fileName:`label.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/label`}},{title:`Number Field`,description:`A number input component with increment/decrement buttons and validation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/number-field/basic";
import { LabelVariant } from "../../../examples/number-field/label-variant";
import { Validation } from "../../../examples/number-field/validation";
import { ValidationWarning } from "../../../examples/number-field/validation-warning";
import { ValidationSuccess } from "../../../examples/number-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the number field component to your project.

\`\`\`bash
pnpm hip install number-field
\`\`\`

## Features

### Label Variant

The number field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria NumberField](https://react-spectrum.adobe.com/react-aria/NumberField.html).

<PropDocs components={["NumberField"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - For general text input
- [TextArea](/docs/components/form/text-area) - For multi-line text input
- [SearchField](/docs/components/form/search-field) - For search input with clear button
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/number-field.mdx`,fileName:`number-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/number-field`}},{title:`Radio`,description:`A radio button component for selecting a single option from a group.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/radio/basic";
import { RadioWithDescription } from "../../../examples/radio/with-description";
import { RadioHorizontal } from "../../../examples/radio/horizontal";

<Example src={Basic} />

## Installation

Run the following command to add the radio component to your project.

\`\`\`bash
pnpm hip install radio
\`\`\`

## Features

### With Description

Radio buttons can include descriptive text to provide additional context.

<Example src={RadioWithDescription} />

### Horizontal Layout

Radio groups can be displayed horizontally for compact layouts.

<Example src={RadioHorizontal} />

## Props

This component is built using the [React Aria Radio](https://react-spectrum.adobe.com/react-aria/Radio.html).

<PropDocs components={["Radio", "RadioGroup"]} />

## Related Components

- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
- [Switch](/docs/components/form/switch) - For binary toggle choices
- [Select](/docs/components/form/select) - For dropdown selection
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/radio.mdx`,fileName:`radio.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/radio`}},{title:`Search Field`,description:`A search input component with built-in search icon and clear functionality.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/search-field/basic";
import { LabelVariant } from "../../../examples/search-field/label-variant";
import { Validation } from "../../../examples/search-field/validation";
import { ValidationWarning } from "../../../examples/search-field/validation-warning";
import { ValidationSuccess } from "../../../examples/search-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the search field component to your project.

\`\`\`bash
pnpm hip install search-field
\`\`\`

## Features

### Label Variant

The search field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria SearchField](https://react-spectrum.adobe.com/react-aria/SearchField.html).

<PropDocs components={["SearchField"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - For general text input
- [AutocompleteInput](/docs/components/form/autocomplete) - For text input with suggestions
- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
- [CommandMenu](/docs/components/collections/command-menu) - For command palette with search
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/search-field.mdx`,fileName:`search-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/search-field`}},{title:`Select`,description:`A select component for choosing from a list of options.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/select/basic";
import { LabelVariant } from "../../../examples/select/label-variant";
import { SelectWithDescription } from "../../../examples/select/with-description";
import { SelectSizes } from "../../../examples/select/sizes";
import { Validation } from "../../../examples/select/validation";
import { ValidationWarning } from "../../../examples/select/validation-warning";
import { ValidationSuccess } from "../../../examples/select/validation-success";
import { Virtualization } from "../../../examples/select/virtualization";

<Example src={Basic} />

## Installation

Run the following command to add the select component to your project.

\`\`\`bash
pnpm hip install select
\`\`\`

## Features

### Label Variant

The select supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### With Description

Select components can include descriptive text to provide additional context.

<Example src={SelectWithDescription} />

### Sizes

Select components support different sizes for various use cases.

<Example src={SelectSizes} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

### Virtualization

The select supports virtualization by providing the \`isVirtualized\` prop.
The container must have a fixed height and \`overflow: auto\`.

<Example src={Virtualization} />

## Props

This component is built using the [React Aria Select](https://react-spectrum.adobe.com/react-aria/Select.html).

<PropDocs
  components={[
    "Select",
    "SelectItem",
    "SelectSection",
    "SelectSectionHeader",
    "SelectSeparator",
  ]}
/>

## Related Components

- [ComboBox](/docs/components/form/combobox) - For searchable dropdown selection
- [Radio](/docs/components/form/radio) - For single selection from multiple options
- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/select.mdx`,fileName:`select.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/select`}},{title:`Slider`,description:`A range input component for selecting values within a specified range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/slider/basic";
import { Range } from "../../../examples/slider/range";
import { WithLabels } from "../../../examples/slider/with-labels";
import { Vertical } from "../../../examples/slider/vertical";
import { HideValueLabel } from "../../../examples/slider/hide-value-label";
import { ValueFormatting } from "../../../examples/slider/value-formatting";
import { Disabled } from "../../../examples/slider/disabled";

<Example src={Basic} />

## Installation

Run the following command to add the slider component to your project.

\`\`\`bash
pnpm hip install slider
\`\`\`

## Features

### Range Selection

For selecting a range of values, provide an array as the \`defaultValue\` prop.

<Example src={Range} />

### Vertical Orientation

The slider can be oriented vertically by setting the \`orientation\` prop to "vertical".

<Example src={Vertical} />

### With Labels

Add descriptive labels to slider thumbs using the \`thumbLabels\` prop for better accessibility.

<Example src={WithLabels} />

### Hide Value Label

The value label can be hidden by setting the \`showValueLabel\` prop to false.

<Example src={HideValueLabel} />

### Value Formatting

The value label can be formatted using the \`formatOptions\` prop.
This prop is passed to the \`Intl.NumberFormat\` constructor.

<Example src={ValueFormatting} />

### Disabled

The slider can be disabled by setting the \`disabled\` prop to true.

<Example src={Disabled} />

## Props

This component is built using the [React Aria Slider](https://react-spectrum.adobe.com/react-aria/Slider.html).

<PropDocs components={["Slider"]} />

## Related Components

- [NumberField](/docs/components/form/number-field) - For precise numeric input
- [Switch](/docs/components/form/switch) - For binary on/off controls
- [Checkbox](/docs/components/form/checkbox) - For boolean selections`,_meta:{filePath:`components/form/slider.mdx`,fileName:`slider.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/slider`}},{title:`Switch`,description:`A toggle switch component for binary choices.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/switch/basic";
import { Disabled } from "../../../examples/switch/disabled";

<Example src={Basic} />

## Installation

Run the following command to add the switch component to your project.

\`\`\`bash
pnpm hip install switch
\`\`\`

## Features

### Disabled

The switch can be disabled by setting the \`disabled\` prop to true.

<Example src={Disabled} />

## Props

This component is built using the [React Aria Switch](https://react-spectrum.adobe.com/react-aria/Switch.html).

<PropDocs components={["Switch"]} />

## Related Components

- [Checkbox](/docs/components/form/checkbox) - For multiple selection options
- [Radio](/docs/components/form/radio) - For single selection from multiple options
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable button states
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/switch.mdx`,fileName:`switch.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/switch`}},{title:`Text Area`,description:`A multi-line text input component for longer text content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/text-area/basic";

<Example src={Basic} />

## Installation

Run the following command to add the text area component to your project.

\`\`\`bash
pnpm hip install text-area
\`\`\`

## Props

This component is built using the [React Aria TextArea](https://react-spectrum.adobe.com/react-aria/TextArea.html).

<PropDocs components={["TextArea"]} />

## Related Components

- [TextField](/docs/components/form/text-field) - For single-line text input
- [NumberField](/docs/components/form/number-field) - For numeric input
- [SearchField](/docs/components/form/search-field) - For search input with clear button
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/text-area.mdx`,fileName:`text-area.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/text-area`}},{title:`Text Field`,description:`A text input component with support for labels, descriptions, and validation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/text-field/basic";
import { TextFieldVariants } from "../../../examples/text-field/variants";
import { TextFieldSizes } from "../../../examples/text-field/sizes";
import { LabelVariant } from "../../../examples/text-field/label-variant";
import { PasswordField } from "../../../examples/text-field/password";
import { PrefixAndSuffix } from "../../../examples/text-field/prefix-and-suffix";
import { Validation } from "../../../examples/text-field/validation";
import { ValidationWarning } from "../../../examples/text-field/validation-warning";
import { ValidationSuccess } from "../../../examples/text-field/validation-success";

<Example src={Basic} />

## Installation

Run the following command to add the text field component to your project.

\`\`\`bash
pnpm hip install text-field
\`\`\`

## Features

### Label Variant

The text field supports two different label variants: vertical and horizontal.

<Example src={LabelVariant} />

### Prefix and Suffix

The text field supports a prefix and suffix.

<Example src={PrefixAndSuffix} />

### Variants

The text field supports different visual variants.

<Example src={TextFieldVariants} />

### Sizes

The text field supports three different sizes.

<Example src={TextFieldSizes} />

### Password Field

Text fields automatically include password visibility toggle when type is set to "password".

<Example src={PasswordField} />

### Validation

Use the \`validationState\` prop to indicate when a field has validation errors.
Set \`validationState="invalid"\` along with an \`errorMessage\` to display error states.

<Example src={Validation} />

Set \`validationState="warning"\` to show a warning state with a description.

<Example src={ValidationWarning} />

Set \`validationState="valid"\` to show a success state with a description.

<Example src={ValidationSuccess} />

## Props

This component is built using the [React Aria TextField](https://react-spectrum.adobe.com/react-aria/TextField.html).

<PropDocs components={["TextField"]} />

## Related Components

- [TextArea](/docs/components/form/text-area) - For multi-line text input
- [NumberField](/docs/components/form/number-field) - For numeric input
- [SearchField](/docs/components/form/search-field) - For search input with clear button
- [Label](/docs/components/form/label) - For form labels and descriptions`,_meta:{filePath:`components/form/text-field.mdx`,fileName:`text-field.mdx`,directory:`components/form`,extension:`mdx`,path:`components/form/text-field`}},{title:`Flex`,description:`A flexible container component for creating flexible layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/flex/basic";
import { FlexDirections } from "../../../examples/flex/directions";
import { FlexAlignment } from "../../../examples/flex/alignment";
import { FlexWrap } from "../../../examples/flex/wrap";
import { FlexGap } from "../../../examples/flex/gap";

<Example src={Basic} />

## Installation

Run the following command to add the flex component to your project.

\`\`\`bash
pnpm hip install flex
\`\`\`

## Features

### Directions

Flex containers can be arranged in different directions.

<Example src={FlexDirections} />

### Alignment

Flex items can be aligned using various justify and align properties.

<Example src={FlexAlignment} />

### Wrap

Flex containers can wrap their children to new lines when needed.

<Example src={FlexWrap} />

### Gap

Flex containers support different gap sizes between items.

<Example src={FlexGap} />

## Props

This is a custom component built for flexible layouts.

<PropDocs components={["Flex"]} />

## Related Components

- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
- [Card](/docs/components/content/card) - For grouping content in flex layouts
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons in flex layouts
- [Separator](/docs/components/content/separator) - For visual separation in flex layouts`,_meta:{filePath:`components/layout/flex.mdx`,fileName:`flex.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/flex`}},{title:`Grid`,description:`A grid container component for creating two-dimensional layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/grid/basic";
import { GridSpans } from "../../../examples/grid/spans";

<Example src={Basic} />

## Installation

Run the following command to add the grid component to your project.

\`\`\`bash
pnpm hip install grid
\`\`\`

## Features

### Grid Spans

Grid items can span multiple columns and rows.

<Example src={GridSpans} />

## Props

This is a custom component built for grid layouts.

<PropDocs components={["Grid", "GridItem"]} />

## Related Components

- [Flex](/docs/components/layout/flex) - For one-dimensional flexible layouts
- [Card](/docs/components/content/card) - For grouping content in grid layouts
- [AspectRatio](/docs/components/content/aspect-ratio) - For maintaining aspect ratios in grid items
- [Table](/docs/components/collections/table) - For structured data in grid layouts`,_meta:{filePath:`components/layout/grid.mdx`,fileName:`grid.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/grid`}},{title:`Page`,description:`A flexible page layout component with small and large variants for headers, titles, and sticky headers/footers.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/page/basic";
import { LargeVariant } from "../../../examples/page/large-variant";
import { WithIcon } from "../../../examples/page/with-icon";

<Example src={Basic} />

## Installation

Run the following command to add the page component to your project.

\`\`\`bash
pnpm hip install page
\`\`\`

## Features

### Small Variant

A narrow page layout (max-width 880px) for focused content like forms or detail views.

<Example src={Basic} />

### Large Variant

A full-width page layout with support for icons, descriptions, and action buttons in the header.

<Example src={LargeVariant} />

### With Icon

Add an icon to the large page header for visual hierarchy.

<Example src={WithIcon} />

## Props

<PropDocs
  components={[
    "PageRoot",
    "PageHeader",
    "PageBackLink",
    "PageTitle",
    "PageDescription",
    "PageActions",
    "PageIcon",
    "PageStickyHeader",
    "PageStickyFooter",
  ]}
/>

## Related Components

- [Flex](/docs/components/layout/flex) - For flexible layouts within page content
- [Footer](/docs/components/navigation/footer) - For page footers
- [Header Layout](/docs/components/navigation/header-layout) - For app-level headers`,_meta:{filePath:`components/layout/page.mdx`,fileName:`page.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/page`}},{title:`Toolbar`,description:`A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/toolbar/basic";
import { Vertical } from "../../../examples/toolbar/vertical";
import { WithCheckbox } from "../../../examples/toolbar/with-checkbox";

<Example src={Basic} />

## Installation

Run the following command to add the toolbar component to your project.

\`\`\`bash
pnpm hip install toolbar
\`\`\`

## Features

### Vertical Orientation

Toolbars can be oriented vertically for vertical layouts. The arrow key navigation behavior adapts accordingly.

<Example src={Vertical} />

### Interactive Controls

Toolbars can contain various interactive controls including buttons, toggle buttons, checkboxes, and more.
Use the \`ToolbarGroup\` component to group related controls together.

<Example src={WithCheckbox} />

## Props

This component is built using [React Aria Toolbar](https://react-spectrum.adobe.com/react-aria/Toolbar.html).

<PropDocs components={["Toolbar", "ToolbarGroup", "ToolbarSeparator"]} />

## Related Components

- [Button](/docs/components/buttons/button) - For clickable actions in toolbars
- [ToggleButton](/docs/components/buttons/toggle-button) - For toggleable buttons in toolbars
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping buttons together
- [ToggleButtonGroup](/docs/components/buttons/toggle-button-group) - For grouping toggle buttons together`,_meta:{filePath:`components/layout/toolbar.mdx`,fileName:`toolbar.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/toolbar`}},{title:`Window Splitter`,description:`A flexible window splitter component for creating resizable panel layouts.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/window-splitter/basic";
import { Vertical } from "../../../examples/window-splitter/vertical";
import { ThreePanels } from "../../../examples/window-splitter/three-panels";

<Example src={Basic} />

## Installation

Run the following command to add the window-splitter component to your project.

\`\`\`bash
pnpm hip install window-splitter
\`\`\`

## Features

### Vertical Layout

Panels can be arranged vertically by setting the \`direction\` prop on \`PanelGroup\`.

<Example src={Vertical} />

### Multiple Panels

You can create layouts with three or more panels by adding multiple \`Panel\` and \`PanelResizer\` components.

<Example src={ThreePanels} />

## Props

This component is built using [@window-splitter/react](https://react-window-splitter-six.vercel.app/docs/install), which follows the [WAI-ARIA Window Splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).

<PropDocs components={["PanelGroup", "Panel", "PanelResizer"]} />

## Related Components

- [Flex](/docs/components/layout/flex) - For flexible layouts without resizing
- [Grid](/docs/components/layout/grid) - For two-dimensional layouts
- [Separator](/docs/components/content/separator) - For visual separation`,_meta:{filePath:`components/layout/window-splitter.mdx`,fileName:`window-splitter.mdx`,directory:`components/layout`,extension:`mdx`,path:`components/layout/window-splitter`}},{title:`Breadcrumbs`,description:`Breadcrumbs display a hierarchy of links to the current page or resource in an application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/breadcrumbs/basic";
import { Disabled } from "../../../examples/breadcrumbs/disabled";

<Example src={Basic} />

## Installation

Run the following command to add the breadcrumbs component to your project.

\`\`\`bash
pnpm hip install breadcrumbs
\`\`\`

## Features

### Disabled State

Breadcrumbs can be disabled to prevent interaction.

<Example src={Disabled} />

## Props

This component is built using the [React Aria Breadcrumbs](https://react-spectrum.adobe.com/react-aria/Breadcrumbs.html).

<PropDocs components={["Breadcrumbs", "Breadcrumb"]} />

## Related Components

- [Link](/docs/components/navigation/link) - For individual navigation links
- [Button](/docs/components/buttons/button) - For action buttons
- [IconButton](/docs/components/buttons/icon-button) - For icon-only navigation buttons`,_meta:{filePath:`components/navigation/breadcrumbs.mdx`,fileName:`breadcrumbs.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/breadcrumbs`}},{title:`Disclosure Group`,description:`A grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/disclosure-group/basic";
import { DefaultExpanded } from "../../../examples/disclosure-group/default-expanded";
import { MultipleExpanded } from "../../../examples/disclosure-group/multiple-expanded";
import { Sizes } from "../../../examples/disclosure-group/sizes";
import { Separators } from "../../../examples/disclosure-group/separators";

<Example src={Basic} />

## Installation

Run the following command to add the disclosure-group component to your project.

\`\`\`bash
pnpm hip install disclosure-group
\`\`\`

## Features

### Default Expanded

A DisclosureGroup can have one or more disclosures expanded by default using the \`defaultExpandedKeys\` prop. The keys must match the \`id\` props on the child Disclosure components.

<Example src={DefaultExpanded} />

### Multiple Expanded

By default, DisclosureGroup allows only one disclosure to be expanded at a time (accordion behavior). You can enable multiple expanded items by setting \`allowsMultipleExpanded\` to \`true\`.

<Example src={MultipleExpanded} />

### Sizes

DisclosureGroup supports three different sizes: small, medium, and large. The size prop is passed down to all child Disclosure components via SizeContext.

<Example src={Sizes} />

### Separators

You can add separators between each disclosure by using the \`DisclosureGroupSeparator\` component.

<Example src={Separators} />

## Props

This component is built using [React Aria DisclosureGroup](https://react-spectrum.adobe.com/react-aria/DisclosureGroup.html).

<PropDocs components={["DisclosureGroup", "DisclosureGroupSeparator"]} />

## Related Components

- [Disclosure](/docs/components/navigation/disclosure) - For single collapsible sections
- [Dialog](/docs/components/overlays/dialog) - For modal content
- [Popover](/docs/components/overlays/popover) - For overlay content`,_meta:{filePath:`components/navigation/disclosure-group.mdx`,fileName:`disclosure-group.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/disclosure-group`}},{title:`Disclosure`,description:`A collapsible section of content composed of a heading that expands and collapses a panel.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/disclosure/basic";
import { Expanded } from "../../../examples/disclosure/expanded";
import { Disabled } from "../../../examples/disclosure/disabled";
import { Sizes } from "../../../examples/disclosure/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the disclosure component to your project.

\`\`\`bash
pnpm hip install disclosure
\`\`\`

## Features

### Expanded

Disclosure can be expanded by default using the \`defaultExpanded\` prop.

<Example src={Expanded} />

### Disabled State

Disclosure can be disabled to prevent interaction.

<Example src={Disabled} />

### Sizes

Disclosure supports three different sizes: small, medium, and large.

<Example src={Sizes} />

## Props

This component is built using the [React Aria Disclosure](https://react-spectrum.adobe.com/react-aria/Disclosure.html).

<PropDocs components={["Disclosure", "DisclosureTitle", "DisclosurePanel"]} />

## Related Components

- [Disclosure Group](/docs/components/navigation/disclosure-group) - For multiple collapsible sections
- [Dialog](/docs/components/overlays/dialog) - For modal content
- [Popover](/docs/components/overlays/popover) - For overlay content`,_meta:{filePath:`components/navigation/disclosure.mdx`,fileName:`disclosure.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/disclosure`}},{title:`Footer`,description:`A flexible footer component for displaying site information, navigation links, and social media links.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/footer/basic";
import { WithSocialLinks } from "../../../examples/footer/with-social-links";
import { WithSections } from "../../../examples/footer/with-sections";
import { Centered } from "../../../examples/footer/centered";
import { WithSubscribeVertical } from "../../../examples/footer/with-subscribe-vertical";
import { WithSubscribeHorizontal } from "../../../examples/footer/with-subscribe-horizontal";
import { Comprehensive } from "../../../examples/footer/comprehensive";

<Example src={Comprehensive} noPadding />

## Installation

Run the following command to add the footer component to your project.

\`\`\`bash
pnpm hip install footer
\`\`\`

## Features

### Minimal

A simple footer with just copyright information.

<Example src={Basic} noPadding />

### With Sections

Organize footer content into sections with optional titles.

<Example src={WithSections} noPadding />

### With Social Links

Add social media links with icons to your footer.

<Example src={WithSocialLinks} noPadding />

### Centered

Use the \`isCentered\` prop to center all footer content.

<Example src={Centered} noPadding />

### With Subscribe (Vertical)

Add a newsletter subscription form with vertical layout.

<Example src={WithSubscribeVertical} noPadding />

### With Subscribe (Horizontal)

Add a newsletter subscription form with horizontal layout.

<Example src={WithSubscribeHorizontal} noPadding />

## Props

This is a custom component built for footer layouts.

<PropDocs
  components={[
    "FooterRoot",
    "FooterSection",
    "FooterNavSection",
    "FooterNavGroup",
    "FooterCopyright",
    "FooterSocialLinkList",
    "FooterSocialLinkItem",
    "FooterSubscribe",
    "FooterSubscribeTitle",
    "FooterSubscribeDescription",
    "FooterSubscribeInput",
  ]}
/>

## Related Components

- [Link](/docs/components/navigation/link) - For navigation links in footer sections
- [Navbar](/docs/components/navigation/navbar) - For site navigation
- [Grid](/docs/components/layout/grid) - For multi-column footer layouts
- [Flex](/docs/components/layout/flex) - For flexible footer layouts`,_meta:{filePath:`components/navigation/footer.mdx`,fileName:`footer.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/footer`}},{title:`HeaderLayout`,description:`A flexible page layout component with unstyled slots for header, page content, and footer.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/header-layout/basic";
import { WithFooter } from "../../../examples/header-layout/with-footer";
import { WithHero } from "../../../examples/header-layout/with-hero";
import { Styled } from "../../../examples/header-layout/styled";

<Example src={Styled} noPadding />

## Installation

Run the following command to add the header layout component to your project.

\`\`\`bash
pnpm hip install header-layout
\`\`\`

## Features

### Basic

A simple page layout with header and page content slots.

<Example src={Basic} noPadding />

### With Footer

Add a footer slot to your page layout.

<Example src={WithFooter} noPadding />

### With Hero

Add a hero section with primary color background.

<Example src={WithHero} noPadding />

## Props

This is a custom component built for page layouts with header, content, and footer slots.

<PropDocs
  components={[
    "HeaderLayoutRoot",
    "HeaderLayoutHeader",
    "HeaderLayoutPage",
    "HeaderLayoutFooter",
    "HeaderLayoutHero",
  ]}
/>

## Related Components

- [Flex](/docs/components/layout/flex) - For flexible layouts within slots
- [Grid](/docs/components/layout/grid) - For two-dimensional layouts within slots
- [Navbar](/docs/components/navigation/navbar) - For navigation in the header slot
- [Footer](/docs/components/navigation/footer) - For footer content in the footer slot`,_meta:{filePath:`components/navigation/header-layout.mdx`,fileName:`header-layout.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/header-layout`}},{title:`Link`,description:`A link component for navigation and external references.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/link/basic";

<Example src={Basic} />

## Installation

Run the following command to add the link component to your project.

\`\`\`bash
pnpm hip install link
\`\`\`

## Props

This component is built using the [React Aria Link](https://react-spectrum.adobe.com/react-aria/Link.html).

<PropDocs components={["Link"]} />

## Related Components

- [Button](/docs/components/buttons/button) - For action buttons that look like links
- [IconButton](/docs/components/buttons/icon-button) - For icon-only navigation buttons
- [Typography](/docs/components/content/typography) - For text styling and hierarchy
- [Badge](/docs/components/status/badge) - For status indicators on links`,_meta:{filePath:`components/navigation/link.mdx`,fileName:`link.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/link`}},{title:`Navbar`,description:`A responsive navigation bar component with logo, navigation, and action sections. On mobile, navigation and actions are automatically contained in a hamburger menu overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/navbar/basic";
import { Justify } from "../../../examples/navbar/justify";
import { WithActions } from "../../../examples/navbar/with-actions";
import { AlwaysVisibleActions } from "../../../examples/navbar/always-visible-actions";
import { WithMenus } from "../../../examples/navbar/with-menus";
import { ActiveLink } from "../../../examples/navbar/active-link";
import { Sticky } from "../../../examples/navbar/sticky";

<Example src={Basic} noPadding />

## Installation

Run the following command to add the navbar component to your project.

\`\`\`bash
pnpm hip install navbar
\`\`\`

## Features

### Sticky Behavior

The \`Navbar\` component can be made sticky by using the \`useAnimatedNavbar\` hook.

<Example src={Sticky} />

### Active Link

You can mark a link as active by setting the \`isActive\` prop to \`true\`.

<Example src={ActiveLink} />

### Navigation Alignment

The \`NavbarNavigation\` component supports different alignment options using the \`justify\` prop.

<Example src={Justify} />

### With Actions

Navbars can include action buttons that are automatically moved to the mobile menu.

<Example src={WithActions} />

### With Menus

Navbars can include menus that are displayed when hovering over a button.

<Example src={WithMenus} />

## Mobile Behavior

On mobile devices (below the \`md\` breakpoint), the \`NavbarNavigation\` and \`NavbarAction\` components are automatically hidden and shown in a hamburger menu overlay. When the hamburger menu is clicked, it overlays the available space and renders the navigation and actions in a vertical stack with a separator between them.

### Always Visible Actions

The \`NavbarAction\` component can be made always visible on mobile by setting the \`alwaysVisible\` prop to \`true\`.

<Example src={AlwaysVisibleActions} />

## Props

This component is built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/index.html).

<PropDocs
  components={["Navbar", "NavbarLogo", "NavbarNavigation", "NavbarAction"]}
/>

## Related Components

- [Link](/docs/components/navigation/link) - For navigation links in NavbarNavigation
- [Button](/docs/components/buttons/button) - For action buttons in NavbarAction
- [IconButton](/docs/components/buttons/icon-button) - For icon-based actions
- [Flex](/docs/components/layout/flex) - For layout within navbar sections`,_meta:{filePath:`components/navigation/navbar.mdx`,fileName:`navbar.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/navbar`}},{title:`Pagination`,description:`A pagination component for navigating through multiple pages of content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/pagination/basic";
import { FewPages } from "../../../examples/pagination/few-pages";
import { CustomMaxVisiblePages } from "../../../examples/pagination/custom-max-visible-pages";

<Example src={Basic} />

## Installation

Run the following command to add the pagination component to your project.

\`\`\`bash
pnpm hip install pagination
\`\`\`

## Features

### Few Pages

Pagination works well with a small number of pages.

<Example src={FewPages} />

### Custom Max Visible Pages

The component can be configured to show a custom number of pages.

<Example src={CustomMaxVisiblePages} />

## Props

<PropDocs components={["Pagination"]} />

## Related Components

- [Button](/docs/components/buttons/button) - Used internally for pagination controls
- [ButtonGroup](/docs/components/buttons/button-group) - For grouping related buttons`,_meta:{filePath:`components/navigation/pagination.mdx`,fileName:`pagination.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/pagination`}},{title:`SidebarLayout`,description:`A flexible page layout component with unstyled slots for sidebar and page content.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/sidebar-layout/basic";
import { WithHeaderLayout } from "../../../examples/sidebar-layout/with-header-layout";
import { WithHeaderLayoutWrapper } from "../../../examples/sidebar-layout/with-header-layout-wrapper";
import { InconsequentialSidebar } from "../../../examples/sidebar-layout/inconsequential-sidebar";

<Example src={Basic} noPadding />

## Installation

Run the following command to add the sidebar layout component to your project.

\`\`\`bash
pnpm hip install sidebar-layout
\`\`\`

## Features

### InconsequentialSidebar

The \`InconsequentialSidebar\` component is a secondary sidebar for supplementary content that is not critical for navigation or core functionality.

Unlike \`NavigationSidebar\`, this component:

- Does not include mobile drawer support
- Simply hides on smaller screens when space is limited
- Is designed for content that can be safely hidden without impacting usability

#### Use Cases

- **Table of Contents**: Display document structure and quick navigation
- **Related Links**: Show related articles, resources, or supplementary content
- **Filters & Controls**: Secondary filtering options that aren't critical
- **Metadata**: Additional information like tags, categories, or timestamps
- **Secondary Navigation**: Additional navigation that complements the main sidebar

<Example src={InconsequentialSidebar} noPadding />

### With Header Layout

You can combine the sidebar layout with the header layout to create a page layout with a sidebar and header.

<Example src={WithHeaderLayout} noPadding />

You can also wrap the sidebar layout in a header layout.

<Example src={WithHeaderLayoutWrapper} noPadding />

## Props

This is a custom component built for page layouts with sidebar and content slots.

<PropDocs
  components={[
    "SidebarLayoutRoot",
    "SidebarLayoutNavigationSidebar",
    "SidebarLayoutPage",
    "SidebarLayoutInconsequentialSidebar",
  ]}
/>

## Related Components

- [Flex](/docs/components/layout/flex) - For flexible layouts within slots
- [Grid](/docs/components/layout/grid) - For two-dimensional layouts within slots
- [Sidebar](/docs/components/navigation/sidebar) - For navigation in the sidebar slot`,_meta:{filePath:`components/navigation/sidebar-layout.mdx`,fileName:`sidebar-layout.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/sidebar-layout`}},{title:`Sidebar`,description:`A sidebar navigation component with support for sections, groups, and collapsible sections.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/sidebar/basic";
import { WithSections } from "../../../examples/sidebar/with-sections";
import { WithGroups } from "../../../examples/sidebar/with-groups";

<Example src={Basic} />

## Installation

Run the following command to add the sidebar component to your project.

\`\`\`bash
pnpm hip install sidebar
\`\`\`

## Features

### With Sections

Organize sidebar items into sections with titles.

<Example src={WithSections} />

### With Groups

Create collapsible groups for organizing content hierarchically.

<Example src={WithGroups} />

## Components

- \`Sidebar\` - The main container component
- \`SidebarHeader\` - Header section, can be a link
- \`SidebarGroup\` - Collapsible group with disclosure panel
- \`SidebarSection\` - Non-collapsible section with title
- \`SidebarItem\` - Individual navigation items

## Props

<PropDocs
  components={[
    "Sidebar",
    "SidebarHeader",
    "SidebarGroup",
    "SidebarSection",
    "SidebarItem",
  ]}
/>

## Related Components

- [Link](/docs/components/navigation/link) - For navigation links
- [Button](/docs/components/buttons/button) - Used in SidebarGroup
- [Flex](/docs/components/layout/flex) - For layout`,_meta:{filePath:`components/navigation/sidebar.mdx`,fileName:`sidebar.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/sidebar`}},{title:`TableOfContents`,description:`A table of contents component that displays a navigation tree based on document headings and automatically highlights the currently visible section.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/table-of-contents/basic";

<Example src={Basic} noPadding />

## Installation

Run the following command to add the table of contents component to your project.

\`\`\`bash
pnpm hip install table-of-contents
\`\`\`

## Props

<PropDocs components={["TableOfContents"]} />

## Related Components

- [Sidebar](/docs/components/navigation/sidebar) - For navigation menus
- [Breadcrumbs](/docs/components/navigation/breadcrumbs) - For showing navigation path
- [Link](/docs/components/navigation/link) - For navigation links
- [Content](/docs/components/content/content) - For document content layout`,_meta:{filePath:`components/navigation/table-of-contents.mdx`,fileName:`table-of-contents.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/table-of-contents`}},{title:`Tabs`,description:`Tabs organize content into multiple sections and allow users to navigate between them.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/tabs/basic";
import { Disabled } from "../../../examples/tabs/disabled";
import { Size } from "../../../examples/tabs/size";
import { Orientation } from "../../../examples/tabs/orientation";

<Example src={Basic} />

## Installation

Run the following command to add the tabs component to your project.

\`\`\`bash
pnpm hip install tabs
\`\`\`

## Features

### Disabled State

Tabs can be disabled to prevent interaction.

<Example src={Disabled} />

### Sizes

Tabs support three different sizes: small, medium, and large.

<Example src={Size} />

### Orientation

Tabs can be displayed horizontally or vertically.

<Example src={Orientation} />

## Props

This component is built using [React Aria Tabs](https://react-spectrum.adobe.com/react-aria/Tabs.html).

<PropDocs components={["Tabs", "TabList", "Tab", "TabPanel"]} />

## Related Components

- [Segmented Control](/docs/components/buttons/segmented-control) - For mutually exclusive options
- [Menu](/docs/components/collections/menu) - For dropdown navigation
- [Disclosure](/docs/components/navigation/disclosure) - For collapsible content sections`,_meta:{filePath:`components/navigation/tabs.mdx`,fileName:`tabs.mdx`,directory:`components/navigation`,extension:`mdx`,path:`components/navigation/tabs`}},{title:`Alert Dialog`,description:`A modal dialog component specifically designed for critical actions and confirmations.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/alert-dialog/basic";

<Example src={Basic} />

## Installation

Run the following command to add the alert dialog component to your project.

\`\`\`bash
pnpm hip install alert-dialog
\`\`\`

## Props

This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html) with the \`alertdialog\` role.

<PropDocs
  components={[
    "AlertDialog",
    "AlertDialogHeader",
    "AlertDialogDescription",
    "AlertDialogFooter",
    "AlertDialogCancelButton",
    "AlertDialogActionButton",
  ]}
/>

## Related Components

- [Dialog](/docs/components/overlays/dialog) - For general modal dialogs
- [Button](/docs/components/buttons/button) - For dialog action buttons
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
- [Tooltip](/docs/components/overlays/tooltip) - For contextual help`,_meta:{filePath:`components/overlays/alert-dialog.mdx`,fileName:`alert-dialog.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/alert-dialog`}},{title:`Dialog`,description:`A modal dialog component for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/dialog/basic";
import { DialogForm } from "../../../examples/dialog/form";
import { LongContentDialog } from "../../../examples/dialog/long-content";
import { DialogSizes } from "../../../examples/dialog/sizes";

<Example src={Basic} />

### Long Content

Dialogs can handle long-form content inside the body while keeping the surrounding chrome usable.

<Example src={LongContentDialog} />

## Installation

Run the following command to add the dialog component to your project.

\`\`\`bash
pnpm hip install dialog
\`\`\`

## Features

### Form Dialog

Dialogs can contain forms for data collection and user input.

<Example src={DialogForm} />

### Sizes

Dialogs support different sizes to accommodate various content types.

<Example src={DialogSizes} />

## Props

This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).

<PropDocs
  components={["Dialog", "DialogHeader", "DialogDescription", "DialogFooter"]}
/>

## Related Components

- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
- [Button](/docs/components/buttons/button) - For dialog action buttons
- [Form](/docs/components/form/form) - For forms within dialogs`,_meta:{filePath:`components/overlays/dialog.mdx`,fileName:`dialog.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/dialog`}},{title:`Drawer`,description:`A modal drawer component that slides in from the side for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/drawer/basic";
import { DrawerSizes } from "../../../examples/drawer/sizes";
import { DrawerDirections } from "../../../examples/drawer/directions";
import { DrawerNonModal } from "../../../examples/drawer/non-modal";

<Example src={Basic} />

## Installation

Run the following command to add the drawer component to your project.

\`\`\`bash
pnpm hip install drawer
\`\`\`

## Features

### Sizes

Drawers support different sizes to accommodate various content types.

<Example src={DrawerSizes} />

### Directions

Drawers can be positioned in four different directions: left, right, top, and bottom.

<Example src={DrawerDirections} />

### Non-Modal

If you need the page to be interactive while the drawer is open, you can set the \`isNonModal\` prop to \`true\`.

<Example src={DrawerNonModal} />

## Props

This component is built using the [React Aria Dialog](https://react-spectrum.adobe.com/react-aria/Dialog.html).

<PropDocs
  components={[
    "Drawer",
    "DrawerHeader",
    "DrawerDescription",
    "DrawerBody",
    "DrawerFooter",
  ]}
/>

## Related Components

- [Dialog](/docs/components/overlays/dialog) - For centered modal dialogs
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
- [Button](/docs/components/buttons/button) - For drawer action buttons
- [Form](/docs/components/form/form) - For forms within drawers`,_meta:{filePath:`components/overlays/drawer.mdx`,fileName:`drawer.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/drawer`}},{title:`Hover Card`,description:`A hover card component that displays content when hovering over a trigger element.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/hover-card/basic";
import { WithRichContent } from "../../../examples/hover-card/with-rich-content";

<Example src={Basic} />

## Installation

Run the following command to add the hover card component to your project.

\`\`\`bash
pnpm hip install hover-card
\`\`\`

## Features

### With Rich Content

Hover cards can display complex content like user profiles or detailed information.

<Example src={WithRichContent} />

## Accessibility Considerations

A hover card acts different depending on the input modality.

- \`mouse\` - The hover card is displayed when the mouse hovers over the trigger element.
- \`touch\` - The hover card is displayed when the touch device is touched over the trigger element.
- \`keyboard\` - The hover card is displayed when the keyboard is focused and the enter key is pressed on the trigger element.

## Props

This component is built using the [React Aria Components](https://react-spectrum.adobe.com/react-aria/).

<PropDocs components={["HoverCard"]} />

## Related Components

- [Popover](/docs/components/overlays/popover) - For click-triggered overlays
- [Tooltip](/docs/components/overlays/tooltip) - For simple contextual help
- [Dialog](/docs/components/overlays/dialog) - For modal overlays`,_meta:{filePath:`components/overlays/hover-card.mdx`,fileName:`hover-card.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/hover-card`}},{title:`Lightbox`,description:`A full-screen overlay for viewing images with navigation between multiple images.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/lightbox/basic";

<Example src={Basic} />

## Installation

Run the following command to add the lightbox component to your project.

\`\`\`bash
pnpm hip install lightbox
\`\`\`

## Features

### Controlled

The lightbox is controlled via \`isOpen\` and \`onOpenChange\`.
Use a button or other trigger to open it and set \`onOpenChange(false)\` to close.

### Keyboard navigation

When multiple images are provided, use Arrow Left and Arrow Right to navigate.

### Click to dismiss

Click the backdrop or press Escape to close the lightbox.

## Props

<PropDocs components={["Lightbox"]} />

## Related Components

- [Dialog](/docs/components/overlays/dialog) - For modal content overlays
- [ImageCropper](/docs/components/content/image-cropper) - For cropping images`,_meta:{filePath:`components/overlays/lightbox.mdx`,fileName:`lightbox.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/lightbox`}},{title:`Popover`,description:`A popover component for displaying content in an overlay.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/popover/basic";

<Example src={Basic} />

## Installation

Run the following command to add the popover component to your project.

\`\`\`bash
pnpm hip install popover
\`\`\`

## Props

This component is built using the [React Aria Popover](https://react-spectrum.adobe.com/react-aria/Popover.html).

{/* <PropDocs components={["Popover"]} /> */}

## Related Components

- [Dialog](/docs/components/overlays/dialog) - For modal overlays
- [Tooltip](/docs/components/overlays/tooltip) - For contextual help overlays
- [Menu](/docs/components/collections/menu) - For dropdown menus
- [ContextMenu](/docs/components/collections/context-menu) - For right-click context menus`,_meta:{filePath:`components/overlays/popover.mdx`,fileName:`popover.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/popover`}},{title:`Tooltip`,description:`A tooltip component that displays helpful information on hover.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/tooltip/basic";
import { TooltipPlacements } from "../../../examples/tooltip/placements";

<Example src={Basic} />

## Installation

Run the following command to add the tooltip component to your project.

\`\`\`bash
pnpm hip install tooltip
\`\`\`

## Features

### Placements

Tooltips can be positioned in different directions around the trigger element.

<Example src={TooltipPlacements} />

## Usage Guidelines

When using tooltips, follow these best practices:

### Do

- Use tooltips to provide additional context for UI elements that may be unclear
- Keep tooltip content brief and focused
- Use tooltips for icon-only buttons or truncated text that needs clarification
- Use tooltips for supplementary information that's not critical for basic task completion

### Don't

- Put essential information only in tooltips - critical content should be visible by default
- Use tooltips for complex interactive content (use a popover or modal instead)
- Place tooltips on disabled elements (users can't hover/focus them)
- Nest tooltips within other tooltips
- Use tooltips for content that needs to be persistent or copied
- Make tooltips too long - keep them concise and scannable

## Props

This component is built using the [React Aria Tooltip](https://react-spectrum.adobe.com/react-aria/Tooltip.html).

<PropDocs components={["Tooltip"]} />

## Related Components

- [Popover](/docs/components/overlays/popover) - For more complex overlay content
- [IconButton](/docs/components/buttons/icon-button) - Often used with tooltips for context
- [Button](/docs/components/buttons/button) - Can be enhanced with tooltips
- [Badge](/docs/components/status/badge) - Can be enhanced with tooltips for additional info`,_meta:{filePath:`components/overlays/tooltip.mdx`,fileName:`tooltip.mdx`,directory:`components/overlays`,extension:`mdx`,path:`components/overlays/tooltip`}},{title:`Alert`,description:`An Alert displays important information to users in a prominent way, typically used for notifications, warnings, or feedback.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/alert/basic";
import { Variants } from "../../../examples/alert/variants";
import { TitleOnly } from "../../../examples/alert/title-only";
import { WithAction } from "../../../examples/alert/with-action";
import { WithActionTitleOnly } from "../../../examples/alert/with-action-title-only";
import { Dismissible } from "../../../examples/alert/dismissible";
import { TitleOnlyDismissible } from "../../../examples/alert/title-only-dismissible";
import { CustomIcon } from "../../../examples/alert/custom-icon";

<Example src={Basic} />

## Installation

Run the following command to add the alert component to your project.

\`\`\`bash
pnpm hip install alert
\`\`\`

## Features

### Variants

Alerts can be one of the following variants:

- \`info\` (default) - For informational messages
- \`success\` - For successful operations or positive feedback
- \`warning\` - For warnings that need attention
- \`critical\` - For errors or critical issues

Each variant has a distinct color scheme and default icon.

<Example src={Variants} />

### Title Only

Alerts can be displayed with just a title, without a description.

<Example src={TitleOnly} />

### With Actions

Alerts can include action elements such as buttons. On smaller screens, the action area moves to a separate row below the content.

<Example src={WithAction} />

Title-only alerts can also include actions.

<Example src={WithActionTitleOnly} />

### Dismissible

Alerts can be made dismissible by providing an \`onDismiss\` callback. When \`onDismiss\` is provided, a close button will automatically be displayed.

<Example src={Dismissible} />

Title-only alerts can also be dismissible.

<Example src={TitleOnlyDismissible} />

### Custom Icons

You can provide a custom icon to override the default icon for each variant.

<Example src={CustomIcon} />

## Props

<PropDocs components={["Alert"]} />

## Related Components

- [Badge](/docs/components/status/badge) - For small status indicators
- [Toast](/docs/components/status/toast) - For temporary notifications
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations`,_meta:{filePath:`components/status/alert.mdx`,fileName:`alert.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/alert`}},{title:`Badge`,description:`A small status indicator component for highlighting information.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/badge/basic";
import { BadgeVariants } from "../../../examples/badge/variants";
import { BadgeSizes } from "../../../examples/badge/sizes";
import { BadgeWithIcons } from "../../../examples/badge/with-icons";
import { BadgeDismissible } from "../../../examples/badge/dismissible";

<Example src={Basic} />

## Installation

Run the following command to add the badge component to your project.

\`\`\`bash
pnpm hip install badge
\`\`\`

## Features

### Variants

The badge comes in five different variants to convey different types of information.

<Example src={BadgeVariants} />

### Sizes

The badge supports two different sizes.

<Example src={BadgeSizes} />

### With Icons

Badges can include icons to enhance their visual meaning.

<Example src={BadgeWithIcons} />

### Dismissible

Badges can be made dismissible for user interaction.

<Example src={BadgeDismissible} />

## Props

This is a custom component built for status indicators.

<PropDocs components={["Badge"]} />

## Related Components

- [Avatar](/docs/components/content/avatar) - For user avatars with status badges
- [Card](/docs/components/content/card) - For cards with status badges
- [Table](/docs/components/collections/table) - For table cells with status badges
- [Button](/docs/components/buttons/button) - For buttons with notification badges`,_meta:{filePath:`components/status/badge.mdx`,fileName:`badge.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/badge`}},{title:`Meter`,description:`A gauge component for displaying scalar measurements within a known range.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/meter/basic";
import { WithoutValueLabel } from "../../../examples/meter/without-value-label";
import { Sizes } from "../../../examples/meter/sizes";
import { Variants } from "../../../examples/meter/variants";
import { CustomRange } from "../../../examples/meter/custom-range";
import { ValueFormatting } from "../../../examples/meter/value-formatting";
import { CustomValueLabel } from "../../../examples/meter/custom-value-label";

<Example src={Basic} />

## Installation

Run the following command to add the meter component to your project.

\`\`\`bash
pnpm hip install meter
\`\`\`

## Features

### Sizes

The meter supports three different sizes that affect both the bar height and label font size.

<Example src={Sizes} />

### Variants

The meter supports five different variants that affect the color of the bar.

<Example src={Variants} />

### Custom Range

Specify custom min and max values to represent any range of measurements.

<Example src={CustomRange} />

### Without Value Label

The value label can be hidden by setting the \`showValueLabel\` prop to false.

<Example src={WithoutValueLabel} />

### Value Formatting

The value label can be formatted using the \`formatOptions\` prop.
This prop is passed to the \`Intl.NumberFormat\` constructor.

<Example src={ValueFormatting} />

### Custom Value Label

The value label can be customized by passing a custom component to the \`valueLabel\` prop.

<Example src={CustomValueLabel} />

## Props

This component is built using the [React Aria Meter](https://react-spectrum.adobe.com/react-aria/Meter.html).

<PropDocs components={["Meter"]} />

## Related Components

- [ProgressBar](/docs/components/status/progress-bar) - For showing completion status
- [Slider](/docs/components/form/slider) - For interactive value selection
- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/meter.mdx`,fileName:`meter.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/meter`}},{title:`Progress Bar`,description:`A progress indicator component for showing completion status.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/progress-bar/basic";
import { WithoutValueLabel } from "../../../examples/progress-bar/without-value-label";
import { WithoutLabel } from "../../../examples/progress-bar/without-label";
import { Indeterminate } from "../../../examples/progress-bar/indeterminate";
import { Sizes } from "../../../examples/progress-bar/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the progress bar component to your project.

\`\`\`bash
pnpm hip install progress-bar
\`\`\`

## Features

### Without Value Label

The value label can be hidden by setting the \`showValueLabel\` prop to false.

<Example src={WithoutValueLabel} />

### Without Labels

The label is optional and can be omitted for a minimal progress indicator.

<Example src={WithoutLabel} />

### Indeterminate

If your progress is not known, you can omit the \`value\` prop and provide the \`isIndeterminate\` prop to true.

<Example src={Indeterminate} />

### Sizes

The progress bar supports three different sizes.

<Example src={Sizes} />

## Props

This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).

<PropDocs components={["ProgressBar"]} />

## Related Components

- [Slider](/docs/components/form/slider) - For interactive value selection
- [Badge](/docs/components/status/badge) - For status indicators
- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/progress-bar.mdx`,fileName:`progress-bar.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/progress-bar`}},{title:`Progress Circle`,description:`A circular progress indicator component for showing completion status.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/progress-circle/basic";
import { WithLabel } from "../../../examples/progress-circle/with-label";
import { Indeterminate } from "../../../examples/progress-circle/indeterminate";
import { Sizes } from "../../../examples/progress-circle/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the progress circle component to your project.

\`\`\`bash
pnpm hip install progress-circle
\`\`\`

## Features

### With Label

The label is optional and can be omitted for a minimal progress indicator.

<Example src={WithLabel} />

### Indeterminate

If your progress is not known, you can omit the \`value\` prop and provide the \`isIndeterminate\` prop to true.
This is commonly known as a \`Spinner\`.

<Example src={Indeterminate} />

### Sizes

The progress circle supports three different sizes.

<Example src={Sizes} />

## Props

This component is built using the [React Aria ProgressBar](https://react-spectrum.adobe.com/react-aria/ProgressBar.html).

<PropDocs components={["ProgressCircle"]} />

## Related Components

- [Progress Bar](/docs/components/status/progress-bar) - For linear progress indicators
- [Meter](/docs/components/status/meter) - For displaying values within a range
- [Label](/docs/components/form/label) - For form labels`,_meta:{filePath:`components/status/progress-circle.mdx`,fileName:`progress-circle.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/progress-circle`}},{title:`Skeleton`,description:`A loading placeholder component with circle and rectangle variants.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/skeleton/basic";
import { Variants } from "../../../examples/skeleton/variants";
import { CircleSizes } from "../../../examples/skeleton/circle-sizes";
import { RectangleHeight } from "../../../examples/skeleton/rectangle-height";

<Example src={Basic} />

## Installation

Run the following command to add the skeleton component to your project.

\`\`\`bash
pnpm hip install skeleton
\`\`\`

## Features

### Variants

The skeleton supports two variants: circle and rectangle.

<Example src={Variants} />

### Circle Sizes

When using the circle variant, you must provide a size prop. The skeleton supports three sizes: sm, md, and lg.

<Example src={CircleSizes} />

### Rectangle Height

When using the rectangle variant, you can optionally specify a height. If no height is provided, the skeleton will take the full width of its container.

<Example src={RectangleHeight} />

## Props

This is a custom component built for loading placeholders.

<PropDocs components={["Skeleton", "SkeletonGroup"]} />

## Related Components

- [Progress Circle](/docs/components/status/progress-circle) - For loading indicators
- [ProgressBar](/docs/components/status/progress-bar) - For progress indicators`,_meta:{filePath:`components/status/skeleton.mdx`,fileName:`skeleton.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/skeleton`}},{title:`Star Rating`,description:`A rating component with half-star support.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/star-rating/basic";
import { Interactive } from "../../../examples/star-rating/interactive";
import { Sizes } from "../../../examples/star-rating/sizes";

<Example src={Basic} />

## Installation

Run the following command to add the star-rating component to your project.

\`\`\`bash
pnpm hip install star-rating
\`\`\`

## Features

### Interactive

Use \`StarRatingInput\` for user-selectable ratings.
Supports click, hover preview, and keyboard (arrow keys).
Use \`value\` and \`onChange\` for controlled mode, or \`defaultValue\` for uncontrolled.

<Example src={Interactive} />

### Half-star support

The component supports decimal ratings from 0 to 5.
Values between 0.25 and 0.74 display a half star.
Values of 0.75 and above round up to a full star.

### Sizes

The \`size\` prop controls the star icon size in pixels (default 16).
Both read-only and interactive variants support custom sizes.

<Example src={Sizes} />

### Review count

Optionally display the number of reviews next to the rating.

## Props

<PropDocs components={["StarRating", "StarRatingInput"]} />

## Related Components

- [Badge](/docs/components/status/badge) - For status indicators
- [Meter](/docs/components/status/meter) - For numeric gauges and progress
- [ProgressBar](/docs/components/status/progress-bar) - For completion status`,_meta:{filePath:`components/status/star-rating.mdx`,fileName:`star-rating.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/star-rating`}},{title:`Toast`,description:`A Toast displays a brief, temporary notification of actions, errors, or other events in an application.`,content:`import { PropDocs } from "../../../lib/PropDocs";
import { Example } from "../../../lib/Example";
import { Basic } from "../../../examples/toast/basic";
import { Actions } from "../../../examples/toast/actions";
import { Icons } from "../../../examples/toast/icons";

<Example src={Basic} />

## Installation

Run the following command to add the toast component to your project.

\`\`\`bash
pnpm hip install toast
\`\`\`

## Features

### Actions

Toasts can include an action button to perform an action when the user clicks on it.

<Example src={Actions} />

### Variants and Icons

Toasts can be one of the following variants:

- \`success\`
- \`warning\`
- \`critical\`

Each variant can include an icon to display alongside the title and description.

<Example src={Icons} />

## Props

This component is built using [React Aria Toast](https://react-spectrum.adobe.com/react-aria/Toast.html).

<PropDocs
  components={[
    "ToastRegion",
    "Toast",
    "ToastContent",
    "ToastTitle",
    "ToastDescription",
    "ToastClose",
  ]}
/>

## Related Components

- [Dialog](/docs/components/overlays/dialog) - For modal dialogs
- [AlertDialog](/docs/components/overlays/alert-dialog) - For critical actions and confirmations
- [Popover](/docs/components/overlays/popover) - For non-modal overlays
- [Button](/docs/components/buttons/button) - For triggering toasts`,_meta:{filePath:`components/status/toast.mdx`,fileName:`toast.mdx`,directory:`components/status`,extension:`mdx`,path:`components/status/toast`}},{title:`Animations`,description:`A shared set of animations for the UI.`,content:`import {
  AnimationDurations,
  AnimationTimingFunctions,
  AllAnimations,
} from "../../examples/foundations/animations";

Animations provide smooth transitions and visual feedback throughout the UI.
Our animation system includes predefined keyframe animations, duration tokens, and timing function tokens that ensure consistent motion across your application.

## Usage

To use animations, import them from the animations theme file:

\`\`\`tsx
import {
  animations,
  animationDuration,
  animationTimingFunction,
} from "@/components/theme/animations.stylex";

const styles = stylex.create({
  animated: {
    animationName: animations.fadeIn,
    animationDuration: animationDuration.default,
    animationTimingFunction: animationTimingFunction.easeInOut,
  },
});
\`\`\`

## Animation Duration

Animation duration tokens control how long an animation takes to complete.
Use these tokens to maintain consistent timing across your application.

- **fast**: 100ms - For quick, subtle animations
- **default**: 150ms - The standard duration for most animations
- **slow**: 200ms - For more noticeable transitions
- **verySlow**: 300ms - For prominent, attention-grabbing animations
- **extremelySlow**: 500ms - For very slow animations

<AnimationDurations />

## Animation Timing Functions

Timing functions control the acceleration and deceleration of animations, creating different motion feels.

- **linear**: Constant speed throughout the animation
- **easeIn**: Starts slow and accelerates (cubic-bezier curve)
- **easeOut**: Starts fast and decelerates (cubic-bezier curve)
- **easeInOut**: Slow start, fast middle, slow end (cubic-bezier curve)
- **easeElasticOut**: Elastic out (cubic-bezier curve)
- **easeElasticIn**: Elastic in (cubic-bezier curve)
- **easeElasticInOut**: Elastic in and out (cubic-bezier curve)
- **easeSpring**: Spring-like easing (linear curve)

<AnimationTimingFunctions />

## Animations

The following keyframe animations are available for use in your components.
Click on any animation box to see it in action.

- **fadeIn/fadeOut**: Fades an element in from transparent to opaque
- **zoomIn/zoomOut**: Scales an element from 80% to 100% size
- **slideInRight/slideOutRight**: Slides in from the right
- **slideInLeft/slideOutLeft**: Slides in from the left
- **slideInTop/slideOutTop**: Slides in from the top
- **slideInBottom/slideOutBottom**: Slides in from the bottom

<AllAnimations />`,_meta:{filePath:`foundations/animations.mdx`,fileName:`animations.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/animations`}},{title:`Colors`,description:`An accessible semantic color palette.`,content:`import { GrayColors, UiColors } from "../../examples/foundations/color";

## Apprach

We use a semantic color palette approach to define our colors.
Each color has an intended use case and is named accordingly.

Read more about the approach in the [Radix Color Docs](https://www.radix-ui.com/colors/docs/palette-composition/understanding-the-scale).

## Base Colors

The UI is built on top of the Radix Color palette.
There are two type of colors you'll work with:

### Gray Colors

The gray color is used to style the background and borders of the UI.
Each one of these colors matches the tone of a particular UI color.
Read more about [componsing a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette).

<GrayColors />

### UI Colors

These colors are used to style the "primary" state of the UI.
This typically matches your brand color.

<UiColors />

### Scale

Each color is a scale of 12 colors.
Every color has a specific use:

- \`bg\` - App background color
- \`bgSubtle\` - Subtle background color
- \`component1\` - UI Element background
- \`component2\` - Hovered UI Element background
- \`component3\` - Active/Selected UI Element background
- \`border1\` - Subtle border color
- \`border2\` - UI Element border color and focus rings
- \`border3\` - Solid border color
- \`solid1\` - Solid color
- \`solid2\` - Hovered solid color
- \`text1\` - Low contrast text color
- \`text2\` - High contrast text color

## Semantic Colors

For the most part you should not work with the base colors directly.
Instead, use the semantic colors that are defined in the \`semantic-color.stylex.tsx\` file.

Each of these colors represent speficic use cases.
You can edit the semantic colors to any of the included base colors to esaily update the base theme.

There are four semantic colors:

- \`ui\` - The color of the application UI.
- \`primary\` - The primary color used for the main brand.
- \`success\` - The color of the successful actions.
- \`warning\` - The color of the warning actions.
- \`critical\` - The color of the error actions.

### Usage

Use the semantic colors to style your components.

\`\`\`tsx
import { uiColor } from "@/components/theme/color.stylex";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  container: {
    backgroundColor: uiColor.bg,
    color: uiColor.text1,
  },
});
\`\`\`

## Semantic Color Classes

For convenience, we also provide semantic color classes that you can use to style your components.

\`\`\`tsx
import { ui } from "@/components/theme/semantic-color.stylex";
import { Flex } from "@/components/flex";

export function MyComponent() {
  return <Flex style={[ui.bg, ui.text1]}>My Component</Flex>;
}
\`\`\`

### List of classes

Each color includes 2 sets of classes.

#### Utility

For each step in the scale, we include a utility class that makes sense for the color.

For example:

- \`ui.bg\` => sets the background color to \`uiColor.bg\`
- \`ui.borderDim\` => sets the border color to \`uiColor.border1\`

#### Pattern

We also include some classes that compose multiple steps in the scale for hover and active states.

- \`borderInteractive\`
- \`bgGhost\`
- \`bgUi\`
- \`bgAction\`
- \`bgSolidAction\``,_meta:{filePath:`foundations/colors.mdx`,fileName:`colors.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/colors`}},{title:`Radius`,description:`Foundations for consistent radius values.`,content:`import { Radius } from "../../examples/foundations/spacing";

## Usage

To use the radius, you can use the \`radius\` object.

\`\`\`tsx
import { radius } from "@/components/theme/radius.stylex";

const styles = stylex.create({
  example: {
    borderRadius: radius.md,
  },
});
\`\`\`

## Scale

The following is the default scale of radius.
It can be customized by editing the \`radius\` object in the \`radius.stylex.tsx\` file.

<Radius />`,_meta:{filePath:`foundations/radius.mdx`,fileName:`radius.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/radius`}},{title:`Shadow`,description:`Use elevation to create a sense of depth in the UI.`,content:`import { Shadow } from "../../examples/foundations/shadow";

## Usage

To use the shadow, you can use the \`shadow\` object.

\`\`\`tsx
import { shadow } from "@/components/theme/shadow.stylex";

const styles = stylex.create({
  example: {
    boxShadow: shadow["sm"],
  },
});
\`\`\`

## Scale

The following is the default scale of shadow.
It can be customized by editing the \`shadow\` object in the \`shadow.stylex.tsx\` file.

<Shadow />`,_meta:{filePath:`foundations/shadow.mdx`,fileName:`shadow.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/shadow`}},{title:`Spacing`,description:`Build upon consistent spacing to create a consistent design system.`,content:`import {
  Gap,
  HorizontalSpace,
  Size,
  VerticalSpace,
} from "../../examples/foundations/spacing";

## Usage

Use semantic spacing tokens in component styles.
Semantic tokens make intent clearer than raw numeric spacing values.
Use directional and purpose-specific groups for layout:

- \`horizontalSpace\` for left and right spacing.
- \`verticalSpace\` for top and bottom spacing.
- \`gap\` for flex and grid gaps.
- \`size\` for width and height sizing.

\`\`\`tsx
import {
  gap,
  horizontalSpace,
  size,
  verticalSpace,
} from "@/components/theme/semantic-spacing.stylex";

const styles = stylex.create({
  example: {
    gap: gap.md,
    paddingLeft: horizontalSpace.lg,
    paddingTop: verticalSpace.md,
    minHeight: size.lg,
  },
});
\`\`\`

The primitive \`spacing\` scale is still the foundation layer.
Most component styles should consume semantic spacing tokens instead of raw spacing keys.

## Semantic Spacing Tokens

### Horizontal Space

<HorizontalSpace />

### Vertical Space

<VerticalSpace />

### Gap

<Gap />

### Size

<Size />`,_meta:{filePath:`foundations/spacing.mdx`,fileName:`spacing.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/spacing`}},{title:`Theming`,description:`Easily theme your entire application or just a part of it.`,content:`import { Example } from "../../lib/Example";
import { ThemingExample } from "../../examples/foundations/theming";

Any of the foundations can be easily themed to match your brand.

This example renders the same card with the default tokens and then with a theme override.

<Example src={ThemingExample} />

## Semantic Spacing Tokens

Use semantic spacing tokens in component styles instead of primitive spacing values.
Semantic spacing keeps intent clear and makes global spacing changes safer.

\`\`\`tsx
import {
  gap,
  horizontalSpace,
  size,
  verticalSpace,
} from "@/components/theme/semantic-spacing.stylex";

const styles = stylex.create({
  root: {
    gap: gap.md,
    paddingLeft: horizontalSpace.lg,
    paddingTop: verticalSpace.md,
    minHeight: size.lg,
  },
});
\`\`\`

When a theme needs different rhythm, override the semantic spacing tokens first.
This preserves component intent while allowing global spacing adjustments.

## Creating a Theme

To start theming your application fist import the tokens you want to theme.

\`\`\`tsx
import {
  primaryColor,
  uiColor,
} from "@/components/theme/semantic-color.stylex";
\`\`\`

Then you can set the tokens to your desired values.

\`\`\`tsx
import * as stylex from "@stylexjs/stylex";

import {
  primaryColor,
  uiColor,
} from "@/components/theme/semantic-color.stylex";
import { purple } from "@/components/theme/colors/purple.stylex";
import { mauve } from "@/components/theme/colors/mauve.stylex";

export const myPrimaryColorTheme = stylex.createTheme(primaryColor, {
  bg: purple.bg1,
  bgSubtle: purple.bg2,
  bgDim: purple.component1,
  bgSecondary: purple.component2,
  bgActive: purple.component3,
  borderDim: purple.border1,
  border: purple.border2,
  borderInteractive: purple.border3,
  bgSolid: purple.solid1,
  bgSolidDark: purple.solid2,
  textDim: purple.text1,
  text: purple.text2,
  textContrast: purple.textContrast,
});

export const myUiColorTheme = stylex.createTheme(uiColor, {
  bg: mauve.bg1,
  bgSubtle: mauve.bg2,
  bgDim: mauve.component1,
  bgSecondary: mauve.component2,
  bgActive: mauve.component3,
  borderDim: mauve.border1,
  border: mauve.border2,
  borderInteractive: mauve.border3,
  bgSolid: mauve.solid1,
  bgSolidDark: mauve.solid2,
  textDim: mauve.text1,
  text: mauve.text2,
  textContrast: mauve.textContrast,
});
\`\`\`

## Applying a Theme

After that all you need to do is apply the theme to your application.

\`\`\`tsx
import { myPrimaryColorTheme, myUiColorTheme } from "./theme";
import * as stylex from "@stylexjs/stylex";

export function MyApp() {
  return (
    <div {...stylex.props(myPrimaryColorTheme, myUiColorTheme)}>
      <App />
    </div>
  );
}
\`\`\`

> NOTE: you can apply a theme to any part of your application, not just the root component.`,_meta:{filePath:`foundations/theming.mdx`,fileName:`theming.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/theming`}},{title:`Typography`,description:`Create consistent and readable typography.`,content:`import { Example } from "../../lib/Example";
import { FontFamilies } from "../../examples/typography/font-families";
import { FontWeights } from "../../examples/typography/font-weights";
import { FontSizes } from "../../examples/typography/font-sizes";
import { LineHeights } from "../../examples/typography/line-heights";
import { LetterSpacing } from "../../examples/typography/letter-spacing";
import { Typeramp } from "../../examples/typography/typeramp";

Typography is a fundamental design system component that ensures consistent and readable text across your application.
Our typography system is built on a foundation of design tokens and composed into semantic type styles.

This page documents the tokens that compose the typography system.
In most cases you will not need to use the tokens directly, but instead use the [Typography Components](/docs/components/content/typography) or the [Text Component](/docs/components/content/text) to create styled text.

## Tokens

Design tokens are the atomic building blocks of our typography system.
They provide consistent values for font properties that can be used throughout your application.

### Font Family

The font family tokens define the typefaces available in the system:

- **title**: The font used for headings and titles
- **sans**: Inter font family for body text and UI elements
- **serif**: Georgia serif font for emphasis, special content or headings
- **mono**: Monaco monospace font for code and technical content

<Example src={FontFamilies} />

### Font Weight

We provide the full scale of font weights from thin to black.
In general you should avoid using the lighter weights, as they can harm the readability of the text.

<Example src={FontWeights} />

### Font Size

Font size tokens create a harmonious scale from small text to large headings:

<Example src={FontSizes} />

### Line Height

Line height tokens ensure optimal readability by providing appropriate spacing between lines:

<Example src={LineHeights} />

### Letter Spacing (Tracking)

Letter spacing tokens control the space between characters:

<Example src={LetterSpacing} />

## Related

- [Typography Components](/docs/components/content/typography) - Learn about the typography components and using the typeramp
- [Spacing](/docs/foundations/spacing) - Understand spacing tokens used in typography`,_meta:{filePath:`foundations/typography.mdx`,fileName:`typography.mdx`,directory:`foundations`,extension:`mdx`,path:`foundations/typography`}},{title:`Introduction`,description:`Bootstrap your project and design system with Hip UI.`,content:`import { Technology } from "../examples/introduction";

Hip UI is a design system for building modern web applications.
It provides a set of components and tokens that help you build your application quickly and efficiently with a consistent design system.

Hip UI itself is not a library that you install, rather it is a ready made design system that you copy directly into your project (like [shadcn/ui](https://ui.shadcn.com/docs)).
This gives you as much or as little control as you need to build your application.
You can use the components and tokens as is, or you can customize them to your liking.

The main difference between Hip UI and shadcn/ui is that Hip UI is built on two different technologies:

<Technology />

Beyond that we've taken extra care to include all the component you might need to render full applications.
Whether thats navbars, footer, or page layouts, Hip UI has you covered.

## Installation

To get started with hip you can either install all the components at once:

\`\`\`bash
pnpm dlx hip-ui install --all
\`\`\`

Or add a few core building blocks one by one.
In this situation it makes sense to install hip-ui as a dev dependency so as you install components they come from the same version of the library.

\`\`\`bash
pnpm dlx hip-ui install theme
pnpm dlx hip-ui install flex
pnpm dlx hip-ui install typography
pnpm dlx hip-ui install button
\`\`\`

## Navigating the docs

The docs are organized into the following categories:

- **Foundations** - The tokens that are use to build the design system and style your UI
- **Components** - All the available components in Hip UI, organized by category

## Showcases

Here is a list of some site that use Hip UI:

- [Hip UI Website](https://hip-ui.tngl.io) - The docs you're reading right now!
- [kich.io](https://kich.io) - A tool managing your kitchen.`,_meta:{filePath:`introduction.mdx`,fileName:`introduction.mdx`,directory:`.`,extension:`mdx`,path:`introduction`}},{title:`Canvas Editor`,description:`An example showing what building a canvas editor looks like with Hip.`,content:`import { CanvasEditorClientOnly } from "../../showcases/canvas-editor-client-only";

<CanvasEditorClientOnly />`,_meta:{filePath:`showcase/canvas-editor.mdx`,fileName:`canvas-editor.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/canvas-editor`}},{title:`Ecommerce App`,description:`An example showing what building an ecommerce app looks like with Hip.`,content:`import { EcommerceApp } from "../../showcases/ecommerce";

<EcommerceApp />`,_meta:{filePath:`showcase/ecommerce.mdx`,fileName:`ecommerce.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/ecommerce`}},{title:`Invoice App`,description:`An example showing what building an invoice app looks like with Hip.`,content:`import { InvoiceApp } from "../../showcases/invoice";

<InvoiceApp />`,_meta:{filePath:`showcase/invoice.mdx`,fileName:`invoice.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/invoice`}},{title:`LLM App`,description:`An example showing what building an LLM app looks like with Hip.`,content:`import { LLMApp } from "../../showcases/llm";

<LLMApp />`,_meta:{filePath:`showcase/llm.mdx`,fileName:`llm.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/llm`}},{title:`Music Cards`,description:`A collection of music-related cards built with Hip components.`,content:`import { MusicCards } from "../../showcases/music";

<MusicCards />`,_meta:{filePath:`showcase/music.mdx`,fileName:`music.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/music`}},{title:`Spotify App`,description:`A Spotify-style streaming app showcase built with Hip components.`,content:`import { SpotifyApp } from "../../showcases/spotify";

<SpotifyApp />`,_meta:{filePath:`showcase/spotify.mdx`,fileName:`spotify.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/spotify`}},{title:`Todo Table`,description:`A table component for displaying a list of todos.`,content:`import { TodoTable } from "../../showcases/todo-table";

<TodoTable />`,_meta:{filePath:`showcase/todo-table.mdx`,fileName:`todo-table.mdx`,directory:`showcase`,extension:`mdx`,path:`showcase/todo-table`}}],$={"/docs/introduction":p(()=>import(`./introduction-B_G88cIB.js`),__vite__mapDeps([57,1,58,2,3,4,5,48,14,59,42,18,19,20,7,21,47])),"/docs/ai":p(()=>import(`./ai-DoQmqHiy.js`),__vite__mapDeps([60,1])),"/docs/showcase/todo-table":p(()=>import(`./todo-table-B_c6e9Ix.js`),__vite__mapDeps([61,1,62,2,3,4,5,63,64,18,7,65,19,20,21,22,23,13,11,12,14,24,25,26,27,28,66,39,9,10,49,67,30,31,32,33,34,35,36,16,37,38,29,40,41,42,43,68,69,70,71,47,72,73,74,75,76])),"/docs/showcase/spotify":p(()=>import(`./spotify-Bj_NpGB_.js`),__vite__mapDeps([77,1,62,2,3,4,5,63,64,18,78,7,30,31,32,33,34,10,13,11,12,14,35,36,16,37,38,24,44,45,8,9,15,17,46,47,48,49,79,80,70,76,81,82,83])),"/docs/showcase/music":p(()=>import(`./music-Ch1DMlRO.js`),__vite__mapDeps([84,1,62,2,3,4,5,23,18,13,11,12,14,78,7,19,20,21,24,79,80,70,85,86,10,87,69,26,27,16,88,31,32,33,34,38,89,35,37,90,91,47,81,92,93,83])),"/docs/showcase/llm":p(()=>import(`./llm-D4gbSGQC.js`),__vite__mapDeps([94,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,22,23,24,25,26,27,28,66,39,49,67,95,91,29,30,31,32,33,34,35,36,37,38,40,41,42,43,79,80,70,96,89,88,47,21,97])),"/docs/showcase/invoice":p(()=>import(`./invoice-MVwP9Ygj.js`),__vite__mapDeps([98,1,62,2,3,4,5,63,64,23,18,13,11,12,14,78,7,99,19,20,21,100,22,24,25,26,27,28,66,39,9,10,49,85,88,31,32,33,34,38,89,35,37,90,91,47,71,101,74,76,102,82,103,16])),"/docs/showcase/ecommerce":p(()=>import(`./ecommerce-Dhx0Zjwh.js`),__vite__mapDeps([104,1,62,2,3,4,5,63,64,105,10,106,107,108,109,9,7,11,12,13,14,110,38,43,18,78,99,19,20,21,100,22,23,24,25,26,27,28,111,31,32,33,34,112,113,35,92,82,37,30,36,16,29,39,40,41,42,96,89,88,114,91,90,47,115])),"/docs/showcase/canvas-editor":p(()=>import(`./canvas-editor-YdEM2Xbr.js`),__vite__mapDeps([116,1,52,5])),"/docs/foundations/typography":p(()=>import(`./typography-RGnPf_EK.js`),__vite__mapDeps([117,1,118,62,2,3,4,5,20,7,21,18,55,48,14,119,78,19,24,11,12,47])),"/docs/foundations/theming":p(()=>import(`./theming-B8ge7BHD.js`),__vite__mapDeps([120,1,118,62,2,3,4,5,20,7,21,18,55,48,14,78,47])),"/docs/foundations/spacing":p(()=>import(`./spacing-Bsbe5bdk.js`),__vite__mapDeps([121,1,122,78,3,123,47,5])),"/docs/foundations/shadow":p(()=>import(`./shadow-CfBMdmZx.js`),__vite__mapDeps([124,1,18,3,78,125,47])),"/docs/foundations/radius":p(()=>import(`./radius-CkL3wCjv.js`),__vite__mapDeps([126,1,122,78,3,123,47,5])),"/docs/foundations/colors":p(()=>import(`./colors-v2mQxkSi.js`),__vite__mapDeps([127,1,18,3,78,51,52,2,4,5,53,12,54,47])),"/docs/foundations/animations":p(()=>import(`./animations-DJURr-eU.js`),__vite__mapDeps([128,1,62,2,3,4,5,18,22,23,13,11,12,14,24,25,26,27,28,47])),"/docs/components/status/toast":p(()=>import(`./toast-CbVaio6j.js`),__vite__mapDeps([129,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,131,101,32,16])),"/docs/components/status/star-rating":p(()=>import(`./star-rating-DqS4usKV.js`),__vite__mapDeps([132,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,93])),"/docs/components/status/skeleton":p(()=>import(`./skeleton-D7ZdR3wU.js`),__vite__mapDeps([133,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/progress-circle":p(()=>import(`./progress-circle-DqFoyEmw.js`),__vite__mapDeps([134,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/progress-bar":p(()=>import(`./progress-bar-CMyA0ICF.js`),__vite__mapDeps([135,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/meter":p(()=>import(`./meter-DXzfY8Ss.js`),__vite__mapDeps([136,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/status/badge":p(()=>import(`./badge-niLgsiqu.js`),__vite__mapDeps([137,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,64,131,101,32])),"/docs/components/status/alert":p(()=>import(`./alert-Os6ka4um.js`),__vite__mapDeps([138,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,131,74,33,16])),"/docs/components/overlays/tooltip":p(()=>import(`./tooltip-j9g3CXtG.js`),__vite__mapDeps([139,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/overlays/popover":p(()=>import(`./popover-CtY7k7GN.js`),__vite__mapDeps([140,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,67])),"/docs/components/overlays/lightbox":p(()=>import(`./lightbox-Dw6jzRyG.js`),__vite__mapDeps([141,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,15,73,49,16])),"/docs/components/overlays/hover-card":p(()=>import(`./hover-card-CpKLRTup.js`),__vite__mapDeps([142,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,63])),"/docs/components/overlays/drawer":p(()=>import(`./drawer-CzPC22U5.js`),__vite__mapDeps([143,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,45,8,15,16,17])),"/docs/components/overlays/dialog":p(()=>import(`./dialog-CK6_0vt2.js`),__vite__mapDeps([144,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,6,8,15,16,17,88,31,32,33,34,38,89,35,37])),"/docs/components/overlays/alert-dialog":p(()=>import(`./alert-dialog-DTviM3iE.js`),__vite__mapDeps([145,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,8,15,16,17])),"/docs/components/navigation/tabs":p(()=>import(`./tabs-ozPDjcDv.js`),__vite__mapDeps([146,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,27])),"/docs/components/navigation/table-of-contents":p(()=>import(`./table-of-contents-C114zcEv.js`),__vite__mapDeps([147,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,50])),"/docs/components/navigation/sidebar":p(()=>import(`./sidebar-BzD7VWQp.js`),__vite__mapDeps([148,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100,46,49,17])),"/docs/components/navigation/sidebar-layout":p(()=>import(`./sidebar-layout-CnKvfI12.js`),__vite__mapDeps([149,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,150,151,88,31,32,33,34,38,89,35,37,100,152,153,24,154,16,44,45,8,15,17,46,49,50])),"/docs/components/navigation/pagination":p(()=>import(`./pagination-BucyWGYS.js`),__vite__mapDeps([155,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,156,72,73,49,76])),"/docs/components/navigation/navbar":p(()=>import(`./navbar-C9lbWbbD.js`),__vite__mapDeps([157,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,153,24,100,154,16,53,42,36])),"/docs/components/navigation/link":p(()=>import(`./link-BvMZ1QBS.js`),__vite__mapDeps([158,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100])),"/docs/components/navigation/header-layout":p(()=>import(`./header-layout-dziQebPl.js`),__vite__mapDeps([159,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,151,88,31,32,33,34,38,89,35,37,100,152,153,24,154,16])),"/docs/components/navigation/footer":p(()=>import(`./footer-CU6dizOy.js`),__vite__mapDeps([160,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,151,88,31,32,33,34,38,89,35,37,100,99])),"/docs/components/navigation/disclosure":p(()=>import(`./disclosure-DHxelhol.js`),__vite__mapDeps([161,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,59,42])),"/docs/components/navigation/disclosure-group":p(()=>import(`./disclosure-group-DLawefcF.js`),__vite__mapDeps([162,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,58,59,42])),"/docs/components/navigation/breadcrumbs":p(()=>import(`./breadcrumbs-C7DdQFoI.js`),__vite__mapDeps([163,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100,49])),"/docs/components/layout/window-splitter":p(()=>import(`./window-splitter-Do2OKM8R.js`),__vite__mapDeps([164,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/layout/toolbar":p(()=>import(`./toolbar-Cp_KxBYV.js`),__vite__mapDeps([165,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,166,37,167,75])),"/docs/components/layout/page":p(()=>import(`./page-D5vhxGYz.js`),__vite__mapDeps([168,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,53,156])),"/docs/components/layout/grid":p(()=>import(`./grid-D9aUw6dw.js`),__vite__mapDeps([169,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,78])),"/docs/components/layout/flex":p(()=>import(`./flex-Mf7QASWf.js`),__vite__mapDeps([170,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/text-field":p(()=>import(`./text-field-CE2GKXJT.js`),__vite__mapDeps([171,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37,101])),"/docs/components/form/text-area":p(()=>import(`./text-area-s2PFPY9K.js`),__vite__mapDeps([172,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,96,34,89,35,37,38])),"/docs/components/form/switch":p(()=>import(`./switch-CuCERCNW.js`),__vite__mapDeps([173,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,85])),"/docs/components/form/slider":p(()=>import(`./slider-D_pdgc1B.js`),__vite__mapDeps([174,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,79,80])),"/docs/components/form/select":p(()=>import(`./select-OrhA-b4-.js`),__vite__mapDeps([175,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42])),"/docs/components/form/search-field":p(()=>import(`./search-field-DbdYLesd.js`),__vite__mapDeps([176,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,30,31,32,33,34,35,36,16,37,38])),"/docs/components/form/radio":p(()=>import(`./radio-DZh88k0x.js`),__vite__mapDeps([177,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/number-field":p(()=>import(`./number-field-CVJaQWdT.js`),__vite__mapDeps([178,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,111,31,32,33,34,112,113,35,92,82,37,38])),"/docs/components/form/label":p(()=>import(`./label-Bl5gfGi6.js`),__vite__mapDeps([179,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37])),"/docs/components/form/form":p(()=>import(`./form-Nw_ORA6K.js`),__vite__mapDeps([180,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,88,31,32,33,34,38,89,35,37])),"/docs/components/form/file-drop-zone":p(()=>import(`./file-drop-zone-DWL990Fl.js`),__vite__mapDeps([181,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,109,110,38])),"/docs/components/form/combobox":p(()=>import(`./combobox-Ba65NbzE.js`),__vite__mapDeps([182,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,31,32,33,34,41,35,42,37,38])),"/docs/components/form/checkbox":p(()=>import(`./checkbox-BeBtrknX.js`),__vite__mapDeps([183,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/form/autocomplete":p(()=>import(`./autocomplete-CXqTMCVQ.js`),__vite__mapDeps([184,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27,88,31,32,33,34,38,89,35,37,40,41])),"/docs/components/color/color-wheel":p(()=>import(`./color-wheel-DU_PCJci.js`),__vite__mapDeps([185,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107])),"/docs/components/color/color-swatch":p(()=>import(`./color-swatch-CBI0xHtH.js`),__vite__mapDeps([187,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,105,106,107])),"/docs/components/color/color-swatch-picker":p(()=>import(`./color-swatch-picker-BCaPvXzA.js`),__vite__mapDeps([188,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,189,105,106,107,26,27,190])),"/docs/components/color/color-slider":p(()=>import(`./color-slider-MoN-jhsb.js`),__vite__mapDeps([191,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,192,186,106,107,80])),"/docs/components/color/color-picker":p(()=>import(`./color-picker-Cdtp-nmf.js`),__vite__mapDeps([193,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107,194,31,32,33,34,113,112,35,190,37,38,192,80,189,105,26,27,22,24,25,29,30,36,16,40,41,42])),"/docs/components/color/color-field":p(()=>import(`./color-field-jafvBDRg.js`),__vite__mapDeps([195,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,194,31,32,33,34,113,112,35,107,190,37,38])),"/docs/components/color/color-area":p(()=>import(`./color-area-KOtsxXrr.js`),__vite__mapDeps([196,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,186,106,107])),"/docs/components/content/video":p(()=>import(`./video-04yu7v72.js`),__vite__mapDeps([197,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/content/typography":p(()=>import(`./typography-giOIOHSO.js`),__vite__mapDeps([198,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,119,78,24])),"/docs/components/content/text":p(()=>import(`./text-CytUVl_O.js`),__vite__mapDeps([199,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/content/separator":p(()=>import(`./separator-PoVikaXC.js`),__vite__mapDeps([200,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,24])),"/docs/components/content/markdown-content":p(()=>import(`./markdown-content-BNttHj-r.js`),__vite__mapDeps([201,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,99,100])),"/docs/components/content/kbd":p(()=>import(`./kbd-BvvJ1do2.js`),__vite__mapDeps([202,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,65])),"/docs/components/content/image-cropper":p(()=>import(`./image-cropper-BqLKG7Ta.js`),__vite__mapDeps([203,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,6,8,15,16,17,79,80])),"/docs/components/content/empty-state":p(()=>import(`./empty-state-5vOlO51b.js`),__vite__mapDeps([204,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,108,82,33])),"/docs/components/content/editable-text":p(()=>import(`./editable-text-BD-5kowN.js`),__vite__mapDeps([205,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,206,38,89,35,37,22,24,25,26,27])),"/docs/components/content/content":p(()=>import(`./content-B4gPr8oR.js`),__vite__mapDeps([207,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,150])),"/docs/components/content/card":p(()=>import(`./card-DfITAce4.js`),__vite__mapDeps([208,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,64,76,81,103])),"/docs/components/content/avatar":p(()=>import(`./avatar-DA2UAsem.js`),__vite__mapDeps([209,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,63])),"/docs/components/content/aspect-ratio":p(()=>import(`./aspect-ratio-CLmeJwiG.js`),__vite__mapDeps([210,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,115])),"/docs/components/collections/tree":p(()=>import(`./tree-bGMdeVXt.js`),__vite__mapDeps([211,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,212,25,87,49,213,110])),"/docs/components/collections/tag-group":p(()=>import(`./tag-group-B9Jd60Bu.js`),__vite__mapDeps([214,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,86,87,26,27,16,215])),"/docs/components/collections/table":p(()=>import(`./table-Cx6w1Aq5.js`),__vite__mapDeps([216,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,213,110,215])),"/docs/components/collections/menubar":p(()=>import(`./menubar-H8gxVcmA.js`),__vite__mapDeps([217,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,65,22,24,25,26,27,66,49,167])),"/docs/components/collections/menu":p(()=>import(`./menu-CTm1E2hU.js`),__vite__mapDeps([218,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49])),"/docs/components/collections/listbox":p(()=>import(`./listbox-O_Af4wiP.js`),__vite__mapDeps([219,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,22,24,25,26,27])),"/docs/components/collections/context-menu":p(()=>import(`./context-menu-wRfHPSXf.js`),__vite__mapDeps([220,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49])),"/docs/components/collections/command-menu":p(()=>import(`./command-menu-BYH3rM78.js`),__vite__mapDeps([221,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,66,22,24,25,26,27,49,30,31,32,33,34,35,36,16,37,38,8,40,41,15])),"/docs/components/buttons/toggle-button":p(()=>import(`./toggle-button-BVhJ43ZM.js`),__vite__mapDeps([222,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,102])),"/docs/components/buttons/toggle-button-group":p(()=>import(`./toggle-button-group-CFHplqoB.js`),__vite__mapDeps([223,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/buttons/segmented-control":p(()=>import(`./segmented-control-DdMTbXW0.js`),__vite__mapDeps([224,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,95])),"/docs/components/buttons/icon-button":p(()=>import(`./icon-button-CAtq9IG8.js`),__vite__mapDeps([225,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,81,82,226,93])),"/docs/components/buttons/copy-to-clipboard-button":p(()=>import(`./copy-to-clipboard-button-DEkDE9z4.js`),__vite__mapDeps([227,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9])),"/docs/components/buttons/button":p(()=>import(`./button-DOyQe58u.js`),__vite__mapDeps([228,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,97,226,115])),"/docs/components/buttons/button-group":p(()=>import(`./button-group-tTHu3Gta.js`),__vite__mapDeps([229,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,154,37])),"/docs/components/date-and-time/time-field":p(()=>import(`./time-field-C5e70i0L.js`),__vite__mapDeps([230,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,31,32,33,34,231,232,113,41,37,38])),"/docs/components/date-and-time/range-calendar":p(()=>import(`./range-calendar-CTJsFu8h.js`),__vite__mapDeps([233,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,234,235,232,73,49,17])),"/docs/components/date-and-time/date-range-picker":p(()=>import(`./date-range-picker-BEpUNG1U.js`),__vite__mapDeps([236,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,234,235,232,73,49,17,31,32,33,34,231,113,41,37,38,237])),"/docs/components/date-and-time/date-picker":p(()=>import(`./date-picker-Cc1-pC1K.js`),__vite__mapDeps([238,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,239,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42,235,232,73,49,240,231,113,237])),"/docs/components/date-and-time/date-field":p(()=>import(`./date-field-B4-6e4kz.js`),__vite__mapDeps([241,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,240,31,32,33,34,231,232,113,41,37,38])),"/docs/components/date-and-time/calendar":p(()=>import(`./calendar-CGAUf6Y4.js`),__vite__mapDeps([242,1,118,62,2,3,4,5,20,7,21,18,55,48,14,130,19,68,23,13,11,12,10,69,70,28,71,43,39,114,91,90,47,9,239,22,24,25,26,27,29,30,31,32,33,34,35,36,16,37,38,40,41,42,235,232,73,49]))},le={"/docs/introduction":(0,M.lazy)(()=>$[`/docs/introduction`]),"/docs/ai":(0,M.lazy)(()=>$[`/docs/ai`]),"/docs/showcase/todo-table":(0,M.lazy)(()=>$[`/docs/showcase/todo-table`]),"/docs/showcase/spotify":(0,M.lazy)(()=>$[`/docs/showcase/spotify`]),"/docs/showcase/music":(0,M.lazy)(()=>$[`/docs/showcase/music`]),"/docs/showcase/llm":(0,M.lazy)(()=>$[`/docs/showcase/llm`]),"/docs/showcase/invoice":(0,M.lazy)(()=>$[`/docs/showcase/invoice`]),"/docs/showcase/ecommerce":(0,M.lazy)(()=>$[`/docs/showcase/ecommerce`]),"/docs/showcase/canvas-editor":(0,M.lazy)(()=>$[`/docs/showcase/canvas-editor`]),"/docs/foundations/typography":(0,M.lazy)(()=>$[`/docs/foundations/typography`]),"/docs/foundations/theming":(0,M.lazy)(()=>$[`/docs/foundations/theming`]),"/docs/foundations/spacing":(0,M.lazy)(()=>$[`/docs/foundations/spacing`]),"/docs/foundations/shadow":(0,M.lazy)(()=>$[`/docs/foundations/shadow`]),"/docs/foundations/radius":(0,M.lazy)(()=>$[`/docs/foundations/radius`]),"/docs/foundations/colors":(0,M.lazy)(()=>$[`/docs/foundations/colors`]),"/docs/foundations/animations":(0,M.lazy)(()=>$[`/docs/foundations/animations`]),"/docs/components/status/toast":(0,M.lazy)(()=>$[`/docs/components/status/toast`]),"/docs/components/status/star-rating":(0,M.lazy)(()=>$[`/docs/components/status/star-rating`]),"/docs/components/status/skeleton":(0,M.lazy)(()=>$[`/docs/components/status/skeleton`]),"/docs/components/status/progress-circle":(0,M.lazy)(()=>$[`/docs/components/status/progress-circle`]),"/docs/components/status/progress-bar":(0,M.lazy)(()=>$[`/docs/components/status/progress-bar`]),"/docs/components/status/meter":(0,M.lazy)(()=>$[`/docs/components/status/meter`]),"/docs/components/status/badge":(0,M.lazy)(()=>$[`/docs/components/status/badge`]),"/docs/components/status/alert":(0,M.lazy)(()=>$[`/docs/components/status/alert`]),"/docs/components/overlays/tooltip":(0,M.lazy)(()=>$[`/docs/components/overlays/tooltip`]),"/docs/components/overlays/popover":(0,M.lazy)(()=>$[`/docs/components/overlays/popover`]),"/docs/components/overlays/lightbox":(0,M.lazy)(()=>$[`/docs/components/overlays/lightbox`]),"/docs/components/overlays/hover-card":(0,M.lazy)(()=>$[`/docs/components/overlays/hover-card`]),"/docs/components/overlays/drawer":(0,M.lazy)(()=>$[`/docs/components/overlays/drawer`]),"/docs/components/overlays/dialog":(0,M.lazy)(()=>$[`/docs/components/overlays/dialog`]),"/docs/components/overlays/alert-dialog":(0,M.lazy)(()=>$[`/docs/components/overlays/alert-dialog`]),"/docs/components/navigation/tabs":(0,M.lazy)(()=>$[`/docs/components/navigation/tabs`]),"/docs/components/navigation/table-of-contents":(0,M.lazy)(()=>$[`/docs/components/navigation/table-of-contents`]),"/docs/components/navigation/sidebar":(0,M.lazy)(()=>$[`/docs/components/navigation/sidebar`]),"/docs/components/navigation/sidebar-layout":(0,M.lazy)(()=>$[`/docs/components/navigation/sidebar-layout`]),"/docs/components/navigation/pagination":(0,M.lazy)(()=>$[`/docs/components/navigation/pagination`]),"/docs/components/navigation/navbar":(0,M.lazy)(()=>$[`/docs/components/navigation/navbar`]),"/docs/components/navigation/link":(0,M.lazy)(()=>$[`/docs/components/navigation/link`]),"/docs/components/navigation/header-layout":(0,M.lazy)(()=>$[`/docs/components/navigation/header-layout`]),"/docs/components/navigation/footer":(0,M.lazy)(()=>$[`/docs/components/navigation/footer`]),"/docs/components/navigation/disclosure":(0,M.lazy)(()=>$[`/docs/components/navigation/disclosure`]),"/docs/components/navigation/disclosure-group":(0,M.lazy)(()=>$[`/docs/components/navigation/disclosure-group`]),"/docs/components/navigation/breadcrumbs":(0,M.lazy)(()=>$[`/docs/components/navigation/breadcrumbs`]),"/docs/components/layout/window-splitter":(0,M.lazy)(()=>$[`/docs/components/layout/window-splitter`]),"/docs/components/layout/toolbar":(0,M.lazy)(()=>$[`/docs/components/layout/toolbar`]),"/docs/components/layout/page":(0,M.lazy)(()=>$[`/docs/components/layout/page`]),"/docs/components/layout/grid":(0,M.lazy)(()=>$[`/docs/components/layout/grid`]),"/docs/components/layout/flex":(0,M.lazy)(()=>$[`/docs/components/layout/flex`]),"/docs/components/form/text-field":(0,M.lazy)(()=>$[`/docs/components/form/text-field`]),"/docs/components/form/text-area":(0,M.lazy)(()=>$[`/docs/components/form/text-area`]),"/docs/components/form/switch":(0,M.lazy)(()=>$[`/docs/components/form/switch`]),"/docs/components/form/slider":(0,M.lazy)(()=>$[`/docs/components/form/slider`]),"/docs/components/form/select":(0,M.lazy)(()=>$[`/docs/components/form/select`]),"/docs/components/form/search-field":(0,M.lazy)(()=>$[`/docs/components/form/search-field`]),"/docs/components/form/radio":(0,M.lazy)(()=>$[`/docs/components/form/radio`]),"/docs/components/form/number-field":(0,M.lazy)(()=>$[`/docs/components/form/number-field`]),"/docs/components/form/label":(0,M.lazy)(()=>$[`/docs/components/form/label`]),"/docs/components/form/form":(0,M.lazy)(()=>$[`/docs/components/form/form`]),"/docs/components/form/file-drop-zone":(0,M.lazy)(()=>$[`/docs/components/form/file-drop-zone`]),"/docs/components/form/combobox":(0,M.lazy)(()=>$[`/docs/components/form/combobox`]),"/docs/components/form/checkbox":(0,M.lazy)(()=>$[`/docs/components/form/checkbox`]),"/docs/components/form/autocomplete":(0,M.lazy)(()=>$[`/docs/components/form/autocomplete`]),"/docs/components/color/color-wheel":(0,M.lazy)(()=>$[`/docs/components/color/color-wheel`]),"/docs/components/color/color-swatch":(0,M.lazy)(()=>$[`/docs/components/color/color-swatch`]),"/docs/components/color/color-swatch-picker":(0,M.lazy)(()=>$[`/docs/components/color/color-swatch-picker`]),"/docs/components/color/color-slider":(0,M.lazy)(()=>$[`/docs/components/color/color-slider`]),"/docs/components/color/color-picker":(0,M.lazy)(()=>$[`/docs/components/color/color-picker`]),"/docs/components/color/color-field":(0,M.lazy)(()=>$[`/docs/components/color/color-field`]),"/docs/components/color/color-area":(0,M.lazy)(()=>$[`/docs/components/color/color-area`]),"/docs/components/content/video":(0,M.lazy)(()=>$[`/docs/components/content/video`]),"/docs/components/content/typography":(0,M.lazy)(()=>$[`/docs/components/content/typography`]),"/docs/components/content/text":(0,M.lazy)(()=>$[`/docs/components/content/text`]),"/docs/components/content/separator":(0,M.lazy)(()=>$[`/docs/components/content/separator`]),"/docs/components/content/markdown-content":(0,M.lazy)(()=>$[`/docs/components/content/markdown-content`]),"/docs/components/content/kbd":(0,M.lazy)(()=>$[`/docs/components/content/kbd`]),"/docs/components/content/image-cropper":(0,M.lazy)(()=>$[`/docs/components/content/image-cropper`]),"/docs/components/content/empty-state":(0,M.lazy)(()=>$[`/docs/components/content/empty-state`]),"/docs/components/content/editable-text":(0,M.lazy)(()=>$[`/docs/components/content/editable-text`]),"/docs/components/content/content":(0,M.lazy)(()=>$[`/docs/components/content/content`]),"/docs/components/content/card":(0,M.lazy)(()=>$[`/docs/components/content/card`]),"/docs/components/content/avatar":(0,M.lazy)(()=>$[`/docs/components/content/avatar`]),"/docs/components/content/aspect-ratio":(0,M.lazy)(()=>$[`/docs/components/content/aspect-ratio`]),"/docs/components/collections/tree":(0,M.lazy)(()=>$[`/docs/components/collections/tree`]),"/docs/components/collections/tag-group":(0,M.lazy)(()=>$[`/docs/components/collections/tag-group`]),"/docs/components/collections/table":(0,M.lazy)(()=>$[`/docs/components/collections/table`]),"/docs/components/collections/menubar":(0,M.lazy)(()=>$[`/docs/components/collections/menubar`]),"/docs/components/collections/menu":(0,M.lazy)(()=>$[`/docs/components/collections/menu`]),"/docs/components/collections/listbox":(0,M.lazy)(()=>$[`/docs/components/collections/listbox`]),"/docs/components/collections/context-menu":(0,M.lazy)(()=>$[`/docs/components/collections/context-menu`]),"/docs/components/collections/command-menu":(0,M.lazy)(()=>$[`/docs/components/collections/command-menu`]),"/docs/components/buttons/toggle-button":(0,M.lazy)(()=>$[`/docs/components/buttons/toggle-button`]),"/docs/components/buttons/toggle-button-group":(0,M.lazy)(()=>$[`/docs/components/buttons/toggle-button-group`]),"/docs/components/buttons/segmented-control":(0,M.lazy)(()=>$[`/docs/components/buttons/segmented-control`]),"/docs/components/buttons/icon-button":(0,M.lazy)(()=>$[`/docs/components/buttons/icon-button`]),"/docs/components/buttons/copy-to-clipboard-button":(0,M.lazy)(()=>$[`/docs/components/buttons/copy-to-clipboard-button`]),"/docs/components/buttons/button":(0,M.lazy)(()=>$[`/docs/components/buttons/button`]),"/docs/components/buttons/button-group":(0,M.lazy)(()=>$[`/docs/components/buttons/button-group`]),"/docs/components/date-and-time/time-field":(0,M.lazy)(()=>$[`/docs/components/date-and-time/time-field`]),"/docs/components/date-and-time/range-calendar":(0,M.lazy)(()=>$[`/docs/components/date-and-time/range-calendar`]),"/docs/components/date-and-time/date-range-picker":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-range-picker`]),"/docs/components/date-and-time/date-picker":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-picker`]),"/docs/components/date-and-time/date-field":(0,M.lazy)(()=>$[`/docs/components/date-and-time/date-field`]),"/docs/components/date-and-time/calendar":(0,M.lazy)(()=>$[`/docs/components/date-and-time/calendar`])};export{se as a,J as c,re as d,k as f,ne as h,Q as i,q as l,D as m,le as n,Z as o,O as p,ce as r,X as s,$ as t,N as u};