feat(Combobox): add create to combobox

src/components/Combobox/index.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
 import { Combobox } from './index'
 
 const meta: Meta<typeof Combobox> = {
@@ -195,3 +196,33 @@ export const SearchableGroupedList: Story = {
     searchPlaceholder: 'Search groups and items...',
   },
 }
+
+// Create new item example - demonstrates dynamic options
+export const WithCreateOption: Story = {
+  render: () => {
+    const [options, setOptions] = useState(generateList(10))
+    const [value, setValue] = useState<string | undefined>()
+
+    return (
+      <Combobox
+        options={options}
+        value={value!}
+        onValueChange={setValue}
+        placeholder="Search or create..."
+        searchPlaceholder="Type to search or create..."
+        createOptions={{
+          handleCreate: (query) => {
+            const newValue = query.toLowerCase().replace(/\s+/g, '-')
+            setOptions([...options, { value: newValue, label: query }])
+            setValue(newValue)
+          },
+          renderCreatePrompt: (query) => (
+            <span>
+              Create <strong>{query}</strong>
+            </span>
+          ),
+        }}
+      />
+    )
+  },
+}

src/components/Combobox/index.tsx

@@ -52,6 +52,10 @@ interface ComboboxBaseProps<T extends string = string> {
   emptyText?: string
   searchPlaceholder?: string
   iconOnly?: boolean
+  createOptions?: {
+    handleCreate: (search: string) => void
+    renderCreatePrompt?: (search: string) => JSX.Element
+  }
 }
 
 export type ComboboxProps<T extends string = string> = ComboboxBaseProps<T> &
@@ -72,7 +76,9 @@ export function Combobox<T extends string = string>({
   placeholder = 'Select option...',
   emptyText = 'No option found.',
   searchPlaceholder = 'Search...',
+
   iconOnly = false,
+  createOptions,
 }: ComboboxProps<T>) {
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState('')
@@ -185,6 +191,19 @@ export function Combobox<T extends string = string>({
                 )}
               />
             )}
+            {(() => {
+              if (!createOptions || search.length === 0) return null
+              const { renderCreatePrompt, handleCreate } = createOptions
+              return (
+                <CommandGroup>
+                  <CommandItem onSelect={() => handleCreate(search)}>
+                    {renderCreatePrompt
+                      ? renderCreatePrompt(search)
+                      : `Create ${search}`}
+                  </CommandItem>
+                </CommandGroup>
+              )
+            })()}
           </CommandList>
         </Command>
       </PopoverContent>