@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,911 +0,0 @@
-/**
-
-
-
-
-
-
-export function ComboboxX({ combobox = 'default', children, ...props }: any) {
-    switch (combobox) {
-        case 'Closable':
-            break
-        default:
-            break;
-    }
-}
-
-const ComboboxDemo = () => {
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant='outline'
-          role='combobox'
-          aria-expanded={open}
-          className='w-full max-w-xs justify-between'
-          aria-label='Framework combobox'
-        >
-          {value ? frameworks.find(framework => framework.value === value)?.label : 'Select framework...'}
-          <ChevronsUpDownIcon className='opacity-50' />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className='p-0'>
-        <Command>
-          <CommandInput placeholder='Search framework...' className='h-9' />
-          <CommandList>
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandGroup>
-              {frameworks.map(framework => (
-                <CommandItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={currentValue => {
-                    setValue(currentValue === value ? '' : currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  {framework.label}
-                  <CheckIcon className={cn('ml-auto', value === framework.value ? 'opacity-100' : 'opacity-0')} />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-const ComboboxOptionGroupDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState<boolean>(false)
-  const [value, setValue] = useState<string>('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox option group</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
-          >
-            {value ? (
-              <span className='flex min-w-0 items-center gap-2'>
-                <span className='truncate'>{value}</span>
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select item</span>
-            )}
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
-          <Command>
-            <CommandInput placeholder='Search item...' />
-            <CommandList>
-              <CommandEmpty>No item found.</CommandEmpty>
-              {items.map(group => (
-                <Fragment key={group.continent}>
-                  <CommandGroup heading={group.continent}>
-                    {group.items.map(item => (
-                      <CommandItem
-                        key={item.value}
-                        value={item.value}
-                        onSelect={currentValue => {
-                          setValue(currentValue)
-                          setOpen(false)
-                        }}
-                      >
-                        {item.value}
-                        {value === item.value && <CheckIcon size={16} className='ml-auto' />}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </Fragment>
-              ))}
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxOptionDisabledDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState<boolean>(false)
-  const [value, setValue] = useState<string>('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox disabled option </Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
-          >
-            {value ? (
-              <span className='flex min-w-0 items-center gap-2'>
-                <span className='truncate'>{value}</span>
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select item</span>
-            )}
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
-          <Command>
-            <CommandInput placeholder='Search item...' />
-            <CommandList>
-              <CommandEmpty>No item found.</CommandEmpty>
-              {items.map(group => (
-                <Fragment key={group.category}>
-                  <CommandGroup heading={group.category}>
-                    {group.items.map(item => (
-                      <CommandItem
-                        key={item.value}
-                        value={item.value}
-                        onSelect={currentValue => {
-                          setValue(currentValue)
-                          setOpen(false)
-                        }}
-                        className={cn(item.disabled && 'cursor-not-allowed opacity-50')}
-                        disabled={item.disabled}
-                      >
-                        {item.value}
-                        {value === item.value && <CheckIcon size={16} className='ml-auto' />}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </Fragment>
-              ))}
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxOptionWithIIconDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState<boolean>(false)
-  const [value, setValue] = useState<string>('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox option with icon</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
-          >
-            {value ? (
-              <span className='flex min-w-0 items-center gap-2'>
-                {(() => {
-                  const selectedItem = industries.find(industry => industry.value === value)
-
-                  if (selectedItem) {
-                    const Icon = selectedItem.icon
-
-                    return <Icon className='text-muted-foreground' />
-                  }
-
-                  return null
-                })()}
-                <span className='truncate'>{industries.find(industry => industry.value === value)?.label}</span>
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select industry category</span>
-            )}
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
-          <Command>
-            <CommandInput placeholder='Search industries...' />
-            <CommandList>
-              <CommandEmpty>No industry found.</CommandEmpty>
-              <CommandGroup>
-                {industries.map(industry => (
-                  <CommandItem
-                    key={industry.value}
-                    value={industry.value}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                    className='flex items-center justify-between'
-                  >
-                    <div className='flex items-center gap-2'>
-                      <industry.icon className='text-muted-foreground size-4' />
-                      {industry.label}
-                    </div>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxCustomCheckIconDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox with custom check icon</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='w-full max-w-xs justify-between'
-          >
-            {value ? (
-              frameworks.find(framework => framework.value === value)?.label
-            ) : (
-              <span className='text-muted-foreground'>Select industry category</span>
-            )}
-            <ChevronsUpDownIcon className='opacity-50' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='p-0'>
-          <Command>
-            <CommandInput placeholder='Search framework...' className='h-9' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    {framework.label}
-                    <CircleCheckIcon
-                      className={cn(
-                        'ml-auto fill-blue-500 stroke-white',
-                        value === framework.value ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxWithSearchAndButtonDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState<boolean>(false)
-  const [value, setValue] = useState<string>('harvard')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox with search and add button</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
-          >
-            <span className={cn('truncate', !value && 'text-muted-foreground')}>
-              {value ? (
-                universities.find(university => university.value === value)?.label
-              ) : (
-                <span className='text-muted-foreground'>Select university</span>
-              )}
-            </span>
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
-          <Command>
-            <CommandInput placeholder='Find university' />
-            <CommandList>
-              <CommandEmpty>No university found.</CommandEmpty>
-              <CommandGroup>
-                {universities.map(university => (
-                  <CommandItem
-                    key={university.value}
-                    value={university.value}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    {university.label}
-                    {value === university.value && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-              <CommandSeparator />
-              <CommandGroup>
-                <Button variant='ghost' className='w-full justify-start font-normal'>
-                  <PlusIcon className='-ms-2 opacity-60' aria-hidden='true' />
-                  New university
-                </Button>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxTimezoneDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState<string>('Indian/Cocos')
-
-  // Fetch supported timezones
-  const timezones = Intl.supportedValuesOf('timeZone')
-
-  const formattedTimezones = useMemo(() => {
-    return timezones
-      .map(timezone => {
-        const formatter = new Intl.DateTimeFormat('en', {
-          timeZone: timezone,
-          timeZoneName: 'shortOffset'
-        })
-
-        const parts = formatter.formatToParts(new Date())
-        const offset = parts.find(part => part.type === 'timeZoneName')?.value || ''
-        const formattedOffset = offset === 'GMT' ? 'GMT+0' : offset
-
-        return {
-          value: timezone,
-          label: `(${formattedOffset}) ${timezone.replace(/_/g, ' ')}`,
-          numericOffset: parseInt(formattedOffset.replace('GMT', '').replace('+', '') || '0')
-        }
-      })
-      .sort((a, b) => a.numericOffset - b.numericOffset) // Sort by numeric offset
-  }, [timezones])
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Timezone combobox</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button id={id} variant='outline' role='combobox' aria-expanded={open} className='w-full justify-between'>
-            <span className={cn('truncate')}>
-              {value ? (
-                formattedTimezones.find(timezone => timezone.value === value)?.label
-              ) : (
-                <span className='text-muted-foreground'>Select timezone</span>
-              )}
-            </span>
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-(--radix-popper-anchor-width) p-0'>
-          <Command>
-            <CommandInput placeholder='Search timezone' />
-            <CommandList>
-              <CommandEmpty>No timezone found.</CommandEmpty>
-              <CommandGroup>
-                {formattedTimezones.map(({ value: itemValue, label }) => (
-                  <CommandItem
-                    key={itemValue}
-                    value={itemValue}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    <span className='truncate'>{label}</span>
-                    {value === itemValue && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxUserDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-
-  const selectedUser = users.find(user => user.name === value)
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>User combobox</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button id={id} variant='outline' role='combobox' aria-expanded={open} className='w-full justify-between'>
-            {selectedUser ? (
-              <span className='flex gap-2'>
-                <Avatar className='size-6'>
-                  <AvatarImage src={selectedUser.avatar} alt={selectedUser.name} />
-                  <AvatarFallback>{selectedUser.name[0]}</AvatarFallback>
-                </Avatar>
-                <span className='font-medium'>{selectedUser.name}</span>
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select user</span>
-            )}
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-[300px] p-0'>
-          <Command>
-            <CommandInput placeholder='Search user...' />
-            <CommandList>
-              <CommandEmpty>No users found.</CommandEmpty>
-              <CommandGroup>
-                {users.map(user => (
-                  <CommandItem
-                    key={user.name}
-                    value={user.name}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    <span className='flex items-center gap-2'>
-                      <Avatar className='size-7'>
-                        <AvatarImage src={user.avatar} alt={user.name} />
-                        <AvatarFallback>{user.name[0]}</AvatarFallback>
-                      </Avatar>
-                      <span className='flex flex-col'>
-                        <span className='font-medium'>{user.name}</span>
-                        <span className='text-muted-foreground text-sm'>{user.email}</span>
-                      </span>
-                    </span>
-                    {value === user.name && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxCountryFlagDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState<boolean>(false)
-  const [value, setValue] = useState<string>('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Options with flag and search</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]'
-          >
-            {value ? (
-              <span className='flex min-w-0 items-center gap-2'>
-                <img src={countries.find(item => item.label === value)?.flag} alt={value} className='h-4 w-5' />
-                <span className='truncate'>{value}</span>
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select country</span>
-            )}
-            <ChevronDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='border-input w-full min-w-[var(--radix-popper-anchor-width)] p-0' align='start'>
-          <Command>
-            <CommandInput placeholder='Search country...' />
-            <CommandList>
-              <CommandEmpty>No country found.</CommandEmpty>
-              {countries.map(country => (
-                <CommandItem
-                  key={country.value}
-                  value={country.label}
-                  onSelect={currentValue => {
-                    setValue(currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  <img src={country.flag} alt={`${country.label} flag`} className='h-4 w-5' />
-                  {country.label}
-                  {value === country.value && <CheckIcon size={16} className='ml-auto' />}
-                </CommandItem>
-              ))}
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxMultipleDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [selectedValues, setSelectedValues] = useState<string[]>(['london', 'react'])
-
-  const toggleSelection = (value: string) => {
-    setSelectedValues(prev => (prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]))
-  }
-
-  const removeSelection = (value: string) => {
-    setSelectedValues(prev => prev.filter(v => v !== value))
-  }
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Multiple combobox</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='h-auto min-h-8 w-full justify-between hover:bg-transparent'
-          >
-            <div className='flex flex-wrap items-center gap-1 pr-2.5'>
-              {selectedValues.length > 0 ? (
-                selectedValues.map(val => {
-                  const framework = frameworks.find(c => c.value === val)
-
-                  return framework ? (
-                    <Badge key={val} variant='outline' className='rounded-sm'>
-                      {framework.label}
-                      <Button
-                        variant='ghost'
-                        size='icon'
-                        className='size-4'
-                        onClick={e => {
-                          e.stopPropagation()
-                          removeSelection(val)
-                        }}
-                        asChild
-                      >
-                        <span>
-                          <XIcon className='size-3' />
-                        </span>
-                      </Button>
-                    </Badge>
-                  ) : null
-                })
-              ) : (
-                <span className='text-muted-foreground'>Select framework</span>
-              )}
-            </div>
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-(--radix-popper-anchor-width) p-0'>
-          <Command>
-            <CommandInput placeholder='Search framework...' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={() => toggleSelection(framework.value)}
-                  >
-                    <span className='truncate'>{framework.label}</span>
-                    {selectedValues.includes(framework.value) && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxMultipleExpandableDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [expanded, setExpanded] = useState(false)
-
-  const [selectedValues, setSelectedValues] = useState<string[]>(['react', 'qwik', 'solidjs', 'angular', 'astro'])
-
-  const toggleSelection = (value: string) => {
-    setSelectedValues(prev => (prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]))
-  }
-
-  const removeSelection = (value: string) => {
-    setSelectedValues(prev => prev.filter(v => v !== value))
-  }
-
-  // Define maxShownItems before using visibleItems
-  const maxShownItems = 2
-  const visibleItems = expanded ? selectedValues : selectedValues.slice(0, maxShownItems)
-  const hiddenCount = selectedValues.length - visibleItems.length
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Multiple combobox expandable</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='h-auto min-h-8 w-full justify-between hover:bg-transparent'
-          >
-            <div className='flex flex-wrap items-center gap-1 pr-2.5'>
-              {selectedValues.length > 0 ? (
-                <>
-                  {visibleItems.map(val => {
-                    const framework = frameworks.find(c => c.value === val)
-
-                    return framework ? (
-                      <Badge key={val} variant='outline' className='rounded-sm'>
-                        {framework.label}
-                        <Button
-                          variant='ghost'
-                          size='icon'
-                          className='size-4'
-                          onClick={e => {
-                            e.stopPropagation()
-                            removeSelection(val)
-                          }}
-                          asChild
-                        >
-                          <span>
-                            <XIcon className='size-3' />
-                          </span>
-                        </Button>
-                      </Badge>
-                    ) : null
-                  })}
-                  {hiddenCount > 0 || expanded ? (
-                    <Badge
-                      variant='outline'
-                      onClick={e => {
-                        e.stopPropagation()
-                        setExpanded(prev => !prev)
-                      }}
-                      className='rounded-sm'
-                    >
-                      {expanded ? 'Show Less' : `+${hiddenCount} more`}
-                    </Badge>
-                  ) : null}
-                </>
-              ) : (
-                <span className='text-muted-foreground'>Select framework</span>
-              )}
-            </div>
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-(--radix-popper-anchor-width) p-0'>
-          <Command>
-            <CommandInput placeholder='Search framework...' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={() => toggleSelection(framework.value)}
-                  >
-                    <span className='truncate'>{framework.label}</span>
-                    {selectedValues.includes(framework.value) && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxMultipleCountBadgeDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-
-  const [selectedValues, setSelectedValues] = useState<string[]>([
-    'react',
-    'nextjs',
-    'angular',
-    'vue',
-    'django',
-    'astro'
-  ])
-
-  const toggleSelection = (value: string) => {
-    setSelectedValues(prev => (prev.includes(value) ? prev.filter(v => v !== value) : [...prev, value]))
-  }
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Multiple Count badge</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='h-auto min-h-8 w-full justify-between hover:bg-transparent'
-          >
-            {selectedValues.length > 0 ? (
-              <span>
-                <Badge variant='outline' className='rounded-sm'>
-                  {selectedValues.length}
-                </Badge>{' '}
-                frameworks selected
-              </span>
-            ) : (
-              <span className='text-muted-foreground'>Select framework</span>
-            )}
-            <ChevronsUpDownIcon className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-(--radix-popper-anchor-width) p-0'>
-          <Command>
-            <CommandInput placeholder='Search framework...' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={() => toggleSelection(framework.value)}
-                  >
-                    <span className='truncate'>{framework.label}</span>
-                    {selectedValues.includes(framework.value) && <CheckIcon size={16} className='ml-auto' />}
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxSlideInDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox menu slide-in from bottom</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='w-full max-w-xs justify-between'
-          >
-            {value ? frameworks.find(framework => framework.value === value)?.label : 'Select framework...'}
-            <ChevronsUpDownIcon className='opacity-50' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-bottom-10 p-0 duration-400'>
-          <Command>
-            <CommandInput placeholder='Search framework...' className='h-9' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    {framework.label}
-                    <CheckIcon className={cn('ml-auto', value === framework.value ? 'opacity-100' : 'opacity-0')} />
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-const ComboboxSlideInDemo = () => {
-  const id = useId()
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-
-  return (
-    <div className='w-full max-w-xs space-y-2'>
-      <Label htmlFor={id}>Combobox menu zoom-in</Label>
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger asChild>
-          <Button
-            id={id}
-            variant='outline'
-            role='combobox'
-            aria-expanded={open}
-            className='w-full max-w-xs justify-between'
-          >
-            {value ? frameworks.find(framework => framework.value === value)?.label : 'Select framework...'}
-            <ChevronsUpDownIcon className='opacity-50' />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className='data-[state=open]:!zoom-in-0 origin-center p-0 duration-500'>
-          <Command>
-            <CommandInput placeholder='Search framework...' className='h-9' />
-            <CommandList>
-              <CommandEmpty>No framework found.</CommandEmpty>
-              <CommandGroup>
-                {frameworks.map(framework => (
-                  <CommandItem
-                    key={framework.value}
-                    value={framework.value}
-                    onSelect={currentValue => {
-                      setValue(currentValue === value ? '' : currentValue)
-                      setOpen(false)
-                    }}
-                  >
-                    {framework.label}
-                    <CheckIcon className={cn('ml-auto', value === framework.value ? 'opacity-100' : 'opacity-0')} />
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-} */