@catalystsoftware/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,1127 @@
+/**
+
+
+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>
+  )
+} */