var Component=(()=>{var C=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var B=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),A=(n,l)=>{for(var c in l)s(n,c,{get:l[c],enumerable:!0})},p=(n,l,c,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of f(l))!E.call(n,t)&&t!==c&&s(n,t,{get:()=>l[t],enumerable:!(o=m(l,t))||o.enumerable});return n};var x=(n,l,c)=>(c=n!=null?C(u(n)):{},p(l||!n||!n.__esModule?s(c,"default",{value:n,enumerable:!0}):c,n)),g=n=>p(s({},"__esModule",{value:!0}),n);var y=B((k,h)=>{h.exports=_jsx_runtime});var v={};A(v,{default:()=>I,frontmatter:()=>D});var e=x(y()),D={title:"Select",description:"A select displays a collapsible list of options and allows a user to select one of them.",isComponent:!0};function S(n){let l=Object.assign({figure:"figure",figcaption:"figcaption",pre:"pre",code:"code",span:"span",p:"p",strong:"strong"},n.components),{Heading:c,Tabs:o,TabList:t,Tab:a,TabPanel:i,ComponentSource:d,ComponentExample:F}=l;return F||r("ComponentExample",!0),d||r("ComponentSource",!0),c||r("Heading",!0),a||r("Tab",!0),t||r("TabList",!0),i||r("TabPanel",!0),o||r("Tabs",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(c,{lvl:"2",slug:"installation",children:"Installation"}),` `,(0,e.jsxs)(o,{children:[(0,e.jsxs)(t,{"aria-label":"Preview and Code Tabs",children:[(0,e.jsx)(a,{id:"cli-install",children:"CLI"}),(0,e.jsx)(a,{id:"manual-install",children:"Copy & Paste"})]}),(0,e.jsx)(i,{id:"cli-install",className:"px-0 [&_pre]:my-0 [&_figure]:my-0",children:(0,e.jsxs)(l.figure,{"data-rehype-pretty-code-figure":"",__rawString__:`npx @sly-cli/sly add draft-ui select `,__npmCommand__:`npx @sly-cli/sly add draft-ui select `,__yarnCommand__:`npx @sly-cli/sly add draft-ui select `,__pnpmCommand__:`pnpm dlx @sly-cli/sly add draft-ui select `,__niCommand__:`nlx @sly-cli/sly add draft-ui select `,children:[(0,e.jsx)(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"bash","data-theme":"dracula",children:"bash"}),(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"bash","data-theme":"dracula",children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"dracula",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#50FA7B"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" @sly-cli/sly"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" draft-ui"}),(0,e.jsx)(l.span,{style:{color:"#F1FA8C"},children:" select"})]})})})]})}),(0,e.jsx)(i,{id:"manual-install",className:"px-0",children:(0,e.jsx)(d,{src:"../../packages/ui/src/select.tsx",children:(0,e.jsx)(l.figure,{__src__:"../../packages/ui/src/select.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Check } from 'lucide-react' import * as ReactAria from 'react-aria-components' import { cx } from '../lib/cva.config' import { Button, type ButtonProps } from './button' export const Select = ({ className, ...props }: ReactAria.SelectProps) => { return } export interface SelectContentProps extends Omit, Omit, 'style'> { className?: string popoverClassName?: string } export const SelectContent = ({ className, popoverClassName, ...props }: SelectContentProps) => { return ( ) } export const SelectItem = ({ className, children, ...props }: ReactAria.ListBoxItemProps) => { return ( <> ) } export const SelectValue = ( props: ReactAria.SelectValueProps, ) => { return } export const SelectButton = ({ className, ...props }: ButtonProps) => { return (

Select

Installation

Examples

Default

Disabled