From cb1125f4012e54ff2e6f149c755accd48c07917b Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Thu, 16 Jan 2025 21:33:56 +0800
Subject: [PATCH] feat(ui): add Combobox component with demo and documentation

---
 .changeset/cool-birds-vanish.md               |   5 +
 apps/docs/src/app/ui/components/combobox.mdx  |  48 +++++++
 .../components/demos/combobox/combobox.tsx    |  93 ++++++++++++
 apps/docs/src/config/links.ts                 |   4 +
 packages/ui/src/combobox.tsx                  | 136 ++++++++++++++++++
 packages/ui/src/index.ts                      |   1 +
 6 files changed, 287 insertions(+)
 create mode 100644 .changeset/cool-birds-vanish.md
 create mode 100644 apps/docs/src/app/ui/components/combobox.mdx
 create mode 100644 apps/docs/src/components/demos/combobox/combobox.tsx
 create mode 100644 packages/ui/src/combobox.tsx

diff --git a/.changeset/cool-birds-vanish.md b/.changeset/cool-birds-vanish.md
new file mode 100644
index 00000000..84bd1fc6
--- /dev/null
+++ b/.changeset/cool-birds-vanish.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add Combobox component
diff --git a/apps/docs/src/app/ui/components/combobox.mdx b/apps/docs/src/app/ui/components/combobox.mdx
new file mode 100644
index 00000000..4d280a21
--- /dev/null
+++ b/apps/docs/src/app/ui/components/combobox.mdx
@@ -0,0 +1,48 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+---
+
+<ComponentPreview name='combobox/combobox' />
+
+## Usage
+
+```tsx
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxTrigger
+} from '@tszhong0411/ui'
+```
+
+```tsx
+<Combobox items={['React', 'Vue']}>
+  <ComboboxLabel>Framework</ComboboxLabel>
+  <ComboboxControl>
+    <ComboboxInput placeholder='Select a framework' />
+    <ComboboxTrigger>
+      <ChevronsUpDownIcon />
+    </ComboboxTrigger>
+  </ComboboxControl>
+  <ComboboxContent>
+    <ComboboxItemGroup>
+      <ComboboxItemGroupLabel>Frameworks</ComboboxItemGroupLabel>
+      {['React', 'Vue'].map((item) => (
+        <ComboboxItem key={item} item={item}>
+          <ComboboxItemText>{item}</ComboboxItemText>
+          <ComboboxItemIndicator>
+            <CheckIcon />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      ))}
+    </ComboboxItemGroup>
+  </ComboboxContent>
+</Combobox>
+```
diff --git a/apps/docs/src/components/demos/combobox/combobox.tsx b/apps/docs/src/components/demos/combobox/combobox.tsx
new file mode 100644
index 00000000..a3fef291
--- /dev/null
+++ b/apps/docs/src/components/demos/combobox/combobox.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import {
+  type ComboboxInputValueChangeDetails,
+  ComboboxLabel,
+  createListCollection
+} from '@tszhong0411/ui'
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxTrigger
+} from '@tszhong0411/ui'
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
+import { useState } from 'react'
+
+const frameworks = [
+  {
+    value: 'next.js',
+    label: 'Next.js'
+  },
+  {
+    value: 'sveltekit',
+    label: 'SvelteKit',
+    disabled: true
+  },
+  {
+    value: 'nuxt.js',
+    label: 'Nuxt.js'
+  },
+  {
+    value: 'remix',
+    label: 'Remix'
+  },
+  {
+    value: 'astro',
+    label: 'Astro'
+  }
+]
+
+const initialCollection = createListCollection({ items: frameworks })
+
+const ComboboxDemo = () => {
+  const [collection, setCollection] = useState(initialCollection)
+  const handleInputChange = (details: ComboboxInputValueChangeDetails) => {
+    const filtered = frameworks.filter((item) =>
+      item.label.toLowerCase().includes(details.inputValue.toLowerCase())
+    )
+    if (filtered.length > 0) setCollection(createListCollection({ items: filtered }))
+  }
+
+  const handleOpenChange = () => {
+    setCollection(initialCollection)
+  }
+
+  return (
+    <Combobox
+      className='w-64'
+      collection={collection}
+      onInputValueChange={handleInputChange}
+      onOpenChange={handleOpenChange}
+    >
+      <ComboboxLabel>Framework</ComboboxLabel>
+      <ComboboxControl className='relative'>
+        <ComboboxInput placeholder='Select a framework' className='pr-6' />
+        <ComboboxTrigger className='absolute right-2 top-0 h-full'>
+          <ChevronsUpDownIcon className='size-4 shrink-0 opacity-50' />
+        </ComboboxTrigger>
+      </ComboboxControl>
+      <ComboboxContent>
+        <ComboboxItemGroup>
+          <ComboboxItemGroupLabel>Frameworks</ComboboxItemGroupLabel>
+          {collection.items.map((item) => (
+            <ComboboxItem key={item.value} item={item}>
+              <ComboboxItemText>{item.label}</ComboboxItemText>
+              <ComboboxItemIndicator className='ml-auto'>
+                <CheckIcon className='size-4' />
+              </ComboboxItemIndicator>
+            </ComboboxItem>
+          ))}
+        </ComboboxItemGroup>
+      </ComboboxContent>
+    </Combobox>
+  )
+}
+
+export default ComboboxDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index b742ef5b..0829d9d3 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -74,6 +74,10 @@ const COMPONENT_LINKS = [
     href: '/ui/components/collapsible',
     text: 'Collapsible'
   },
+  {
+    href: '/ui/components/combobox',
+    text: 'Combobox'
+  },
   {
     href: '/ui/components/command',
     text: 'Command'
diff --git a/packages/ui/src/combobox.tsx b/packages/ui/src/combobox.tsx
new file mode 100644
index 00000000..85b387ae
--- /dev/null
+++ b/packages/ui/src/combobox.tsx
@@ -0,0 +1,136 @@
+'use client'
+
+import { Portal } from '@ark-ui/react'
+import { Combobox as ComboboxPrimitive } from '@ark-ui/react/combobox'
+import { cn } from '@tszhong0411/utils'
+
+const ComboboxContext = ComboboxPrimitive.Context
+const ComboboxItemContext = ComboboxPrimitive.ItemContext
+const ComboboxControl = ComboboxPrimitive.Control
+const ComboboxItemText = ComboboxPrimitive.ItemText
+const ComboboxItemIndicator = ComboboxPrimitive.ItemIndicator
+const ComboboxTrigger = ComboboxPrimitive.Trigger
+const ComboboxClearTrigger = ComboboxPrimitive.ClearTrigger
+const ComboboxList = ComboboxPrimitive.List
+const ComboboxItemGroup = ComboboxPrimitive.ItemGroup
+
+type ComboboxProps = React.ComponentProps<typeof ComboboxPrimitive.Root>
+
+const Combobox = (props: ComboboxProps) => {
+  const { openOnClick = true, ...rest } = props
+
+  return <ComboboxPrimitive.Root openOnClick={openOnClick} {...rest} />
+}
+
+type ComboboxInputProps = React.ComponentProps<typeof ComboboxPrimitive.Input>
+
+const ComboboxInput = (props: ComboboxInputProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ComboboxPrimitive.Input
+      className={cn(
+        'border-input bg-background ring-offset-background flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-sm',
+        'placeholder:text-muted-foreground',
+        'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type ComboboxLabelProps = React.ComponentProps<typeof ComboboxPrimitive.Label>
+
+const ComboboxLabel = (props: ComboboxLabelProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ComboboxPrimitive.Label
+      className={cn('text-sm font-medium leading-none', className)}
+      {...rest}
+    />
+  )
+}
+
+type ComboboxContentProps = React.ComponentProps<typeof ComboboxPrimitive.Content>
+
+const ComboboxContent = (props: ComboboxContentProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <Portal>
+      <ComboboxPrimitive.Positioner>
+        <ComboboxPrimitive.Content
+          className={cn(
+            'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-lg',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            className
+          )}
+          {...rest}
+        />
+      </ComboboxPrimitive.Positioner>
+    </Portal>
+  )
+}
+
+type ComboboxItemGroupLabelProps = React.ComponentProps<typeof ComboboxPrimitive.ItemGroupLabel>
+
+const ComboboxItemGroupLabel = (props: ComboboxItemGroupLabelProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ComboboxPrimitive.ItemGroupLabel
+      className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+      {...rest}
+    />
+  )
+}
+
+type ComboboxItemProps = React.ComponentProps<typeof ComboboxPrimitive.Item>
+
+const ComboboxItem = (props: ComboboxItemProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ComboboxPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors',
+        'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+export {
+  Combobox,
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxContext,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemContext,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxTrigger
+}
+
+export type {
+  CollectionItem,
+  ComboboxHighlightChangeDetails,
+  ComboboxInputValueChangeDetails,
+  ComboboxOpenChangeDetails,
+  ComboboxValueChangeDetails,
+  ListCollection
+} from '@ark-ui/react/combobox'
+export { createListCollection } from '@ark-ui/react/combobox'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 84d2528b..bedda43e 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -13,6 +13,7 @@ export * from './carousel'
 export * from './checkbox'
 export * from './code-block'
 export * from './collapsible'
+export * from './combobox'
 export * from './command'
 export * from './context-menu'
 export * from './data-table'