@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/select-x.tsx

@@ -1,1127 +0,0 @@
-/**
-
-
-const SelectNativeDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select default</Label>
-      <SelectNative id={id}>
-        <option value='1'>Male</option>
-        <option value='2'>Female</option>
-        <option value='3'>Other</option>
-      </SelectNative>
-    </div>
-  )
-}
-
-const SelectNativePlaceholderDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select with placeholder</Label>
-      <SelectNative id={id} defaultValue=''>
-        <option value='' disabled>
-          Please select a gender
-        </option>
-        <option value='1'>Male</option>
-        <option value='2'>Female</option>
-        <option value='3'>Other</option>
-      </SelectNative>
-    </div>
-  )
-}
-
-const NativeSelectWithIconDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select with icon</Label>
-      <div className='group relative'>
-        <SelectNative id={id} className='pl-9' defaultValue=''>
-          <option value='' disabled>
-            Pick your favorite movie
-          </option>
-          <option value='1'>Godfather</option>
-          <option value='2'>A Working Man</option>
-          <option value='3'>The Dark Knight</option>
-          <option value='4'>Inception</option>
-        </SelectNative>
-        <div className='text-muted-foreground/80 pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 group-has-[select[disabled]]:opacity-50'>
-          <FilmIcon size={16} aria-hidden='true' />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const NativeSelectWithHelperTextDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select with helper text</Label>
-      <SelectNative id={id}>
-        <option value='1'>Florida</option>
-        <option value='2'>California</option>
-        <option value='3'>San Francisco</option>
-        <option value='4'>Alabama</option>
-      </SelectNative>
-      <p className='text-muted-foreground mt-2 text-xs' role='region' aria-live='polite'>
-        Could you share which city you&apos;re based in?
-      </p>
-    </div>
-  )
-}
-
-const NativeSelectWithErrorDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select with error</Label>
-      <SelectNative id={id} aria-invalid>
-        <option value='1'>IST (Indian Standard Time)</option>
-        <option value='2'>EST (Eastern Standard Time)</option>
-        <option value='3'>PST (Pacific Standard Time)</option>
-        <option value='4'>GMT (Greenwich Mean Time)</option>
-      </SelectNative>
-      <p className='text-destructive mt-2 text-xs' role='alert' aria-live='polite'>
-        Selected option is invalid
-      </p>
-    </div>
-  )
-}
-
-const NativeSelectRequiredDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id} className='gap-1'>
-        Required native select <span className='text-destructive'>*</span>
-      </Label>
-      <SelectNative id={id} required>
-        <option value='1'>Action</option>
-        <option value='2'>Comedy</option>
-        <option value='3'>Romance</option>
-        <option value='4'>Thriller</option>
-      </SelectNative>
-    </div>
-  )
-}
-
-const NativeSelectWithOptionGroupsDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native select with option groups</Label>
-      <SelectNative id={id}>
-        <optgroup label='Frontend Technologies'>
-          <option value='1'>HTML</option>
-          <option value='2'>CSS</option>
-          <option value='3'>JavaScript</option>
-        </optgroup>
-        <optgroup label='Backend Technologies'>
-          <option value='4'>Node.js</option>
-          <option value='5'>Python</option>
-          <option value='6'>Java</option>
-        </optgroup>
-      </SelectNative>
-    </div>
-  )
-}
-
-const NativeSelectWithOverlappingLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='group relative w-full max-w-xs'>
-      <label
-        htmlFor={id}
-        className='bg-background text-foreground absolute top-0 left-2 z-10 block -translate-y-1/2 px-1 text-xs font-medium group-has-[select:disabled]:opacity-50'
-      >
-        Native select with overlapping label
-      </label>
-      <SelectNative id={id}>
-        <option value='1'>Developer</option>
-        <option value='2'>Designer</option>
-        <option value='3'>Manager</option>
-        <option value='4'>QA Engineer</option>
-      </SelectNative>
-    </div>
-  )
-}
-
-const NativeSelectWithInsetLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='border-input bg-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive relative w-full max-w-xs rounded-md border shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-[select:disabled]:cursor-not-allowed has-[select:disabled]:opacity-50 has-[select:is(:disabled)_*]:pointer-events-none'>
-      <label htmlFor={id} className='text-foreground block px-3 pt-1 text-xs font-medium'>
-        Native select with inset label
-      </label>
-      <SelectNative
-        id={id}
-        defaultValue=''
-        className='border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
-      >
-        <option value='' disabled>
-          Pick your favorite movie
-        </option>
-        <option value='1'>Interstellar</option>
-        <option value='2'>Dune</option>
-        <option value='3'>The Matrix</option>
-        <option value='4'>Catch Me If You Can</option>
-      </SelectNative>
-    </div>
-  )
-}
-
-const SelectDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Default select</Label>
-      <Select defaultValue='apple'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectPlaceholderDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with placeholder</Label>
-      <Select>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithIconDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with icon</Label>
-      <Select defaultValue='god of wars'>
-        <SelectTrigger id={id} className='relative w-full pl-9'>
-          <div className='text-muted-foreground/80 pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 group-has-[select[disabled]]:opacity-50'>
-            <FilmIcon size={16} aria-hidden='true' />
-          </div>
-          <SelectValue placeholder='Select time' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='god of wars'>God of Wars</SelectItem>
-          <SelectItem value='ghost rider'>Ghost Rider</SelectItem>
-          <SelectItem value='the cloth'>The Cloth</SelectItem>
-          <SelectItem value='the possession'>The Possession</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithHelperTextDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with helper text</Label>
-      <Select defaultValue='3'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>Florida</SelectItem>
-          <SelectItem value='2'>New York</SelectItem>
-          <SelectItem value='3'>California</SelectItem>
-          <SelectItem value='4'>Texas</SelectItem>
-        </SelectContent>
-      </Select>
-      <p className='text-muted-foreground mt-2 text-xs' role='region' aria-live='polite'>
-        Could you share which city you&apos;re based in?
-      </p>
-    </div>
-  )
-}
-
-const SelectInvalidState = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with error</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger id={id} aria-invalid className='w-full'>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>Tesla</SelectItem>
-          <SelectItem value='2'>BMW</SelectItem>
-          <SelectItem value='3'>Audi</SelectItem>
-          <SelectItem value='4'>Mercedes-Benz</SelectItem>
-        </SelectContent>
-      </Select>
-      <p className='text-destructive mt-2 text-xs' role='alert' aria-live='polite'>
-        Selected option is invalid
-      </p>
-    </div>
-  )
-}
-
-const SelectSizesDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Select>
-        <SelectTrigger size='sm' className='w-full'>
-          <SelectValue placeholder='Small select' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger className='w-full'>
-          <SelectValue placeholder='Default select' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <Select>
-        <SelectTrigger className='!h-10 w-full'>
-          <SelectValue placeholder='Large select' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithColorBorderAndRingDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with colored border and ring</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger
-          id={id}
-          className='w-full focus-visible:border-indigo-500 focus-visible:ring-indigo-500/20 dark:focus-visible:ring-indigo-500/40'
-        >
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>Electronics</SelectItem>
-          <SelectItem value='2'>Clothing</SelectItem>
-          <SelectItem value='3'>Home Appliances</SelectItem>
-          <SelectItem value='4'>Books</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectBackgroundColorDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with background color</Label>
-      <Select defaultValue='hindi'>
-        <SelectTrigger className='w-full border-sky-600 bg-sky-600/10 text-sky-600 shadow-none focus-visible:border-sky-600 focus-visible:ring-sky-600/20 dark:bg-sky-400/10 dark:text-sky-400 dark:hover:bg-sky-400/10 dark:focus-visible:ring-sky-400/40 [&_svg]:!text-sky-600 dark:[&_svg]:!text-sky-400'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup className='[&_div:focus]:bg-sky-600/20 [&_div:focus]:text-sky-600 dark:[&_div:focus]:bg-sky-400/20 dark:[&_div:focus]:text-sky-400'>
-            <SelectLabel>Languages</SelectLabel>
-            <SelectItem value='hindi' className='focus:[&_svg]:!text-sky-600 dark:focus:[&_svg]:!text-sky-400'>
-              Hindi
-            </SelectItem>
-            <SelectItem value='english' className='focus:[&_svg]:!text-sky-600 dark:focus:[&_svg]:!text-sky-400'>
-              English
-            </SelectItem>
-            <SelectItem value='spanish' className='focus:[&_svg]:!text-sky-600 dark:focus:[&_svg]:!text-sky-400'>
-              Spanish
-            </SelectItem>
-            <SelectItem value='mandarin' className='focus:[&_svg]:!text-sky-600 dark:focus:[&_svg]:!text-sky-400'>
-              Mandarin
-            </SelectItem>
-            <SelectItem value='french' className='focus:[&_svg]:!text-sky-600 dark:focus:[&_svg]:!text-sky-400'>
-              French
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectGhostDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Ghost Select</Label>
-      <Select defaultValue='apple'>
-        <SelectTrigger className='hover:bg-accent w-full border-none shadow-none dark:bg-transparent'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectDisabledDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Disabled select</Label>
-      <Select defaultValue='apple' disabled>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectDisabledOptionDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Disabled options select</Label>
-      <Select defaultValue='apple'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana' disabled>
-              Banana
-            </SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes' disabled>
-              Grapes
-            </SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectRequiredDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id} className='gap-1'>
-        Required select <span className='text-destructive'>*</span>
-      </Label>
-      <Select defaultValue='2' required>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>United States</SelectItem>
-          <SelectItem value='2'>Japan</SelectItem>
-          <SelectItem value='3'>Australia</SelectItem>
-          <SelectItem value='4'>Brazil</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithOptionsGroupsDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with options groups</Label>
-      <Select defaultValue='7'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>North America</SelectLabel>
-            <SelectItem value='1'>United States</SelectItem>
-            <SelectItem value='2'>Canada</SelectItem>
-            <SelectItem value='3'>Mexico</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Europe</SelectLabel>
-            <SelectItem value='4'>United Kingdom</SelectItem>
-            <SelectItem value='5'>Germany</SelectItem>
-            <SelectItem value='6'>France</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Asia</SelectLabel>
-            <SelectItem value='7'>India</SelectItem>
-            <SelectItem value='8'>Japan</SelectItem>
-            <SelectItem value='9'>China</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithSeparatorDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with separator</Label>
-      <Select defaultValue='7'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>North America</SelectLabel>
-            <SelectItem value='1'>United States</SelectItem>
-            <SelectItem value='2'>Canada</SelectItem>
-            <SelectItem value='3'>Mexico</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Europe</SelectLabel>
-            <SelectItem value='4'>United Kingdom</SelectItem>
-            <SelectItem value='5'>Germany</SelectItem>
-            <SelectItem value='6'>France</SelectItem>
-          </SelectGroup>
-          <SelectSeparator />
-          <SelectGroup>
-            <SelectLabel>Asia</SelectLabel>
-            <SelectItem value='7'>India</SelectItem>
-            <SelectItem value='8'>Japan</SelectItem>
-            <SelectItem value='9'>China</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithOverlappingLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='group relative w-full max-w-xs'>
-      <label
-        htmlFor={id}
-        className='bg-background text-foreground absolute top-0 left-2 z-10 block -translate-y-1/2 px-1 text-xs font-medium group-has-disabled:opacity-50'
-      >
-        Select with overlapping label
-      </label>
-      <Select>
-        <SelectTrigger id={id} className='dark:!bg-background w-full'>
-          <SelectValue placeholder='Select city' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>New York</SelectItem>
-          <SelectItem value='2'>London</SelectItem>
-          <SelectItem value='3'>Tokyo</SelectItem>
-          <SelectItem value='4'>Paris</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithInsetLabelDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='border-input group bg-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive relative w-full max-w-xs rounded-md border shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[input:is(:disabled)]:*:pointer-events-none'>
-      <label
-        htmlFor={id}
-        className='text-foreground dark:bg-input/30 dark:group-hover:bg-input/50 block px-3 pt-1 text-xs font-medium'
-      >
-        Select with inset label
-      </label>
-      <Select>
-        <SelectTrigger
-          id={id}
-          className='dark:group-hover:bg-input/50 w-full rounded-t-none border-none bg-transparent shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
-        >
-          <SelectValue placeholder='Select payment method' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>Credit Card</SelectItem>
-          <SelectItem value='2'>Google Pay</SelectItem>
-          <SelectItem value='3'>PayPal</SelectItem>
-          <SelectItem value='4'>Bitcoin</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectTimeZoneDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Timezone Select</Label>
-      <Select>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a timezone' />
-        </SelectTrigger>
-        <SelectContent className='max-h-100'>
-          <SelectGroup>
-            <SelectLabel>North America</SelectLabel>
-            <SelectItem value='est'>Eastern Standard Time (EST)</SelectItem>
-            <SelectItem value='cst'>Central Standard Time (CST)</SelectItem>
-            <SelectItem value='mst'>Mountain Standard Time (MST)</SelectItem>
-            <SelectItem value='pst'>Pacific Standard Time (PST)</SelectItem>
-            <SelectItem value='akst'>Alaska Standard Time (AKST)</SelectItem>
-            <SelectItem value='hst'>Hawaii Standard Time (HST)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Europe & Africa</SelectLabel>
-            <SelectItem value='gmt'>Greenwich Mean Time (GMT)</SelectItem>
-            <SelectItem value='cet'>Central European Time (CET)</SelectItem>
-            <SelectItem value='eet'>Eastern European Time (EET)</SelectItem>
-            <SelectItem value='west'>Western European Summer Time (WEST)</SelectItem>
-            <SelectItem value='cat'>Central Africa Time (CAT)</SelectItem>
-            <SelectItem value='eat'>East Africa Time (EAT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Asia</SelectLabel>
-            <SelectItem value='msk'>Moscow Time (MSK)</SelectItem>
-            <SelectItem value='ist'>India Standard Time (IST)</SelectItem>
-            <SelectItem value='cst_china'>China Standard Time (CST)</SelectItem>
-            <SelectItem value='jst'>Japan Standard Time (JST)</SelectItem>
-            <SelectItem value='kst'>Korea Standard Time (KST)</SelectItem>
-            <SelectItem value='ist_indonesia'>Indonesia Central Standard Time (WITA)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>Australia & Pacific</SelectLabel>
-            <SelectItem value='awst'>Australian Western Standard Time (AWST)</SelectItem>
-            <SelectItem value='acst'>Australian Central Standard Time (ACST)</SelectItem>
-            <SelectItem value='aest'>Australian Eastern Standard Time (AEST)</SelectItem>
-            <SelectItem value='nzst'>New Zealand Standard Time (NZST)</SelectItem>
-            <SelectItem value='fjt'>Fiji Time (FJT)</SelectItem>
-          </SelectGroup>
-          <SelectGroup>
-            <SelectLabel>South America</SelectLabel>
-            <SelectItem value='art'>Argentina Time (ART)</SelectItem>
-            <SelectItem value='bot'>Bolivia Time (BOT)</SelectItem>
-            <SelectItem value='brt'>Brasilia Time (BRT)</SelectItem>
-            <SelectItem value='clt'>Chile Standard Time (CLT)</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select option with icon</Label>
-      <Select defaultValue='rock'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a music genre' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Music Genres</SelectLabel>
-            <SelectItem value='rock'>
-              <GuitarIcon />
-              Rock
-            </SelectItem>
-            <SelectItem value='electronic'>
-              <HeadphonesIcon />
-              Electronic
-            </SelectItem>
-            <SelectItem value='pop'>
-              <MicVocalIcon />
-              Pop
-            </SelectItem>
-            <SelectItem value='jazz'>
-              <MusicIcon />
-              Jazz
-            </SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithLeadingTextDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select with leading text</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger id={id} className='w-full'>
-          <span>
-            Favorite Movie: <SelectValue placeholder='Select a movie' />
-          </span>
-        </SelectTrigger>
-        <SelectContent>
-          <SelectItem value='1'>Inception</SelectItem>
-          <SelectItem value='2'>Interstellar</SelectItem>
-          <SelectItem value='3'>The Dark Knight</SelectItem>
-          <SelectItem value='4'>Pulp Fiction</SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectStatusDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Status select</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger
-          id={id}
-          className='w-full [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0'
-        >
-          <SelectValue placeholder='Select status' />
-        </SelectTrigger>
-        <SelectContent className='[&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]]:pr-8 [&_*[role=option]]:pl-2 [&_*[role=option]>span]:right-2 [&_*[role=option]>span]:left-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0'>
-          <SelectItem value='1'>
-            <span className='flex items-center gap-2'>
-              <CircleIcon className='size-2 fill-violet-500 text-violet-500' />
-              <span className='truncate'>In Progress</span>
-            </span>
-          </SelectItem>
-          <SelectItem value='2'>
-            <span className='flex items-center gap-2'>
-              <CircleIcon className='size-2 fill-amber-500 text-amber-500' />
-              <span className='truncate'>Pending</span>
-            </span>
-          </SelectItem>
-          <SelectItem value='3'>
-            <span className='flex items-center gap-2'>
-              <CircleIcon className='size-2 fill-emerald-600 text-emerald-600' />
-              <span className='truncate'>Completed</span>
-            </span>
-          </SelectItem>
-          <SelectItem value='4'>
-            <span className='flex items-center gap-2'>
-              <CircleIcon className='size-2 fill-gray-500 text-gray-500' />
-              <span className='truncate'>Cancelled</span>
-            </span>
-          </SelectItem>
-          <SelectItem value='5'>
-            <span className='flex items-center gap-2'>
-              <CircleIcon className='size-2 fill-red-500 text-red-500' />
-              <span className='truncate'>Rejected</span>
-            </span>
-          </SelectItem>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithFlagsDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Options with flag</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger
-          id={id}
-          className='[&>span_svg]:text-muted-foreground/80 w-full [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0'
-        >
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent className='[&_*[role=option]>span>svg]:text-muted-foreground/80 max-h-100 [&_*[role=option]]:pr-8 [&_*[role=option]]:pl-2 [&_*[role=option]>span]:right-2 [&_*[role=option]>span]:left-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]>span>svg]:shrink-0'>
-          {countries.map(country => (
-            <SelectItem key={country.value} value={country.value}>
-              <img src={country.flag} alt={`${country.label} flag`} className='h-4 w-5' />{' '}
-              <span className='truncate'>{country.label}</span>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectWithAvatarsDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Options with avatar</Label>
-      <Select defaultValue='1'>
-        <SelectTrigger
-          id={id}
-          className='w-full pl-2 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_img]:shrink-0'
-        >
-          <SelectValue placeholder='Select framework' />
-        </SelectTrigger>
-        <SelectContent className='[&_*[role=option]]:pr-8 [&_*[role=option]]:pl-2 [&_*[role=option]>span]:right-2 [&_*[role=option]>span]:left-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2'>
-          <SelectGroup>
-            <SelectLabel className='pl-2'>Impersonate user</SelectLabel>
-            {users.map(item => (
-              <SelectItem key={item.id} value={item.id}>
-                <Avatar className='size-5'>
-                  <AvatarImage src={item.src} alt={item.name} className='rounded-full' />
-                  <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
-                </Avatar>
-                <span className='truncate'>{item.name}</span>
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const MultipleSelectDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label>Multiselect</Label>
-      <MultipleSelector
-        commandProps={{
-          label: 'Select categories'
-        }}
-        value={categories.slice(0, 2)}
-        defaultOptions={categories}
-        placeholder='Select categories'
-        hideClearAllButton
-        hidePlaceholderWhenSelected
-        emptyIndicator={<p className='text-center text-sm'>No results found</p>}
-        className='w-full'
-      />
-      <p className='text-muted-foreground text-xs' role='region' aria-live='polite'>
-        Inspired by{' '}
-        <a
-          href='https://shadcnui-expansions.typeart.cc/docs/multiple-selector'
-          className='hover:text-primary underline'
-          target='_blank'
-        >
-          shadcn/ui expressions
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const MultipleSelectWithPlaceholderDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label>Multiselect with placeholder and clear</Label>
-      <MultipleSelector
-        commandProps={{
-          label: 'Select categories'
-        }}
-        defaultOptions={categories}
-        placeholder='Select categories'
-        emptyIndicator={<p className='text-center text-sm'>No results found</p>}
-        className='w-full'
-      />
-      <p className='text-muted-foreground text-xs' role='region' aria-live='polite'>
-        Inspired by{' '}
-        <a
-          href='https://shadcnui-expansions.typeart.cc/docs/multiple-selector'
-          className='hover:text-primary underline'
-          target='_blank'
-        >
-          shadcn/ui expressions
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const SelectNativeMultipleDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Native multiple select</Label>
-      <div className='border-input overflow-hidden rounded-md border'>
-        <SelectNative id={id} multiple className='rounded-none border-none'>
-          <option value='1'>Vegetarian</option>
-          <option value='2'>Vegan</option>
-          <option value='3'>Gluten-Free</option>
-          <option value='4'>Halal</option>
-          <option value='5'>Kosher</option>
-          <option value='6'>Dairy-Free</option>
-        </SelectNative>
-      </div>
-    </div>
-  )
-}
-
-const ListboxSingleOptionDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label>Listbox with single option selectable</Label>
-      <div className='border-input overflow-hidden rounded-md border'>
-        <ListBox
-          className='bg-background space-y-1 p-1 text-sm shadow-xs transition-[color,box-shadow]'
-          aria-label='Select framework'
-          selectionMode='single'
-          defaultSelectedKeys={['svelte']}
-        >
-          {listitems.map(item => (
-            <ListBoxItem
-              key={item.id}
-              className='data-[disabled]:text-muted-foreground data-[selected]:bg-accent data-[selected]:text-accent-foreground flex items-center justify-between rounded-sm px-2 py-1.5'
-              textValue={item.label}
-              isDisabled={item.isDisabled}
-            >
-              {item.label}
-            </ListBoxItem>
-          ))}
-        </ListBox>
-      </div>
-      <p className='text-muted-foreground text-xs' role='region' aria-live='polite'>
-        Built using{' '}
-        <a
-          href='https://react-spectrum.adobe.com/react-aria/ListBox.html'
-          className='hover:text-primary underline'
-          target='_blank'
-        >
-          React Aria
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const ListBoxWithOptionGroupsDemo = () => {
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label>Listbox with option groups</Label>
-      <div className='border-input overflow-hidden rounded-md border'>
-        <ListBox
-          className='bg-background max-h-65 min-h-20 space-y-2 overflow-auto p-1 text-sm shadow-xs transition-[color,box-shadow]'
-          aria-label='Select some foods'
-          selectionMode='multiple'
-          defaultSelectedKeys={['english', 'tuna']}
-        >
-          <ListBoxSection className='space-y-1'>
-            <Header className='text-muted-foreground px-2 py-1.5 text-xs font-medium'>European Languages</Header>
-            <ListBoxItem
-              id='english'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              English
-            </ListBoxItem>
-            <ListBoxItem
-              id='french'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              French
-            </ListBoxItem>
-            <ListBoxItem
-              id='spanish'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Spanish
-            </ListBoxItem>
-          </ListBoxSection>
-          <Separator className='bg-border -mx-1 my-2 h-px' />
-          <ListBoxSection className='space-y-1'>
-            <Header className='text-muted-foreground px-2 py-1.5 text-xs font-medium'>Asian Languages</Header>
-            <ListBoxItem
-              id='hindi'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Hindi
-            </ListBoxItem>
-            <ListBoxItem
-              id='japanese'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Japanese
-            </ListBoxItem>
-            <ListBoxItem
-              id='mandarin'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Mandarin
-            </ListBoxItem>
-          </ListBoxSection>
-          <Separator className='bg-border -mx-1 my-2 h-px' />
-          <ListBoxSection className='space-y-1'>
-            <Header className='text-muted-foreground px-2 py-1.5 text-xs font-medium'>Other Languages</Header>
-            <ListBoxItem
-              id='swahili'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Swahili
-            </ListBoxItem>
-            <ListBoxItem
-              id='arabic'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Arabic
-            </ListBoxItem>
-            <ListBoxItem
-              id='russian'
-              className='data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 relative rounded px-2 py-1.5 outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:ring-[3px]'
-            >
-              Russian
-            </ListBoxItem>
-          </ListBoxSection>
-        </ListBox>
-      </div>
-      <p className='text-muted-foreground text-xs' role='region' aria-live='polite'>
-        Built using{' '}
-        <a
-          href='https://react-spectrum.adobe.com/react-aria/ListBox.html'
-          className='hover:text-primary underline'
-          target='_blank'
-        >
-          React Aria
-        </a>
-      </p>
-    </div>
-  )
-}
-
-const SelectMenuSlideInDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select menu slide-in from bottom</Label>
-      <Select defaultValue='apple'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent className='data-[state=open]:slide-in-from-bottom-8 data-[state=open]:zoom-in-100 duration-400'>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-}
-
-const SelectMenuZoomInDemo = () => {
-  const id = useId()
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Select menu zoom-in</Label>
-      <Select defaultValue='apple'>
-        <SelectTrigger id={id} className='w-full'>
-          <SelectValue placeholder='Select a fruit' />
-        </SelectTrigger>
-        <SelectContent className='data-[state=open]:!zoom-in-0 origin-center duration-400'>
-          <SelectGroup>
-            <SelectLabel>Fruits</SelectLabel>
-            <SelectItem value='apple'>Apple</SelectItem>
-            <SelectItem value='banana'>Banana</SelectItem>
-            <SelectItem value='blueberry'>Blueberry</SelectItem>
-            <SelectItem value='grapes'>Grapes</SelectItem>
-            <SelectItem value='pineapple'>Pineapple</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </div>
-  )
-} */