Add combo box

package.json

@@ -97,6 +97,7 @@
     "zod": "^3.25.x"
   },
   "dependencies": {
+    "@base-ui/react": "^1.2.0",
     "@douglasneuroinformatics/libjs": "^3.0.2",
     "@douglasneuroinformatics/libui-form-types": "^0.11.0",
     "@radix-ui/react-accordion": "^1.2.3",

src/components/ComboBox/ComboBox.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ComboBox } from './ComboBox.tsx';
+
+type Story = StoryObj<typeof ComboBox>;
+
+const frameworks: string[] = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];
+
+export default {
+  args: {
+    children: (
+      <ComboBox items={frameworks}>
+        <ComboBox.Input placeholder="Select a framework" />
+        <ComboBox.Content>
+          <ComboBox.Empty>No items found.</ComboBox.Empty>
+          <ComboBox.List>
+            {(item: string) => (
+              <ComboBox.Item key={item} value={item}>
+                {item}
+              </ComboBox.Item>
+            )}
+          </ComboBox.List>
+        </ComboBox.Content>
+      </ComboBox>
+    )
+  },
+  component: ComboBox,
+  tags: ['autodocs']
+} as Meta<typeof ComboBox>;
+
+export const Default: Story = {};

src/components/ComboBox/ComboBox.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { ComboboxChip, ComboboxChips, ComboboxChipsInput } from './ComboBoxChips.tsx';
+import { ComboboxClear } from './ComboBoxClear.tsx';
+import { ComboboxCollection } from './ComboBoxCollection.tsx';
+import { ComboboxContent } from './ComboBoxContent.tsx';
+import { ComboboxEmpty } from './ComboBoxEmpty.tsx';
+import { ComboboxGroup } from './ComboBoxGroup.tsx';
+import { ComboboxInput } from './ComboBoxInput.tsx';
+import { ComboboxItem } from './ComboBoxItem.tsx';
+import { ComboboxLabel } from './ComboBoxLabel.tsx';
+import { ComboboxList } from './ComboBoxList.tsx';
+import { ComboboxSeparator } from './ComboBoxSeparator.tsx';
+import { ComboboxTrigger } from './ComboBoxTrigger.tsx';
+import { ComboboxValue } from './ComboBoxValue.tsx';
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export { useComboboxAnchor };
+
+export const ComboBox = Object.assign(ComboboxPrimitive.Root.bind(null), {
+  Chip: ComboboxChip,
+  Chips: ComboboxChips,
+  ChipsInput: ComboboxChipsInput,
+  Clear: ComboboxClear,
+  Collection: ComboboxCollection,
+  Content: ComboboxContent,
+  Empty: ComboboxEmpty,
+  Group: ComboboxGroup,
+  Input: ComboboxInput,
+  Item: ComboboxItem,
+  Label: ComboboxLabel,
+  List: ComboboxList,
+  Separator: ComboboxSeparator,
+  Trigger: ComboboxTrigger,
+  Value: ComboboxValue
+});

src/components/ComboBox/ComboBoxChips.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '#utils';
+
+import { Button } from '../Button/Button.tsx';
+
+const ComboboxChips = ({
+  className,
+  ...props
+}: ComboboxPrimitive.Chips.Props & React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>) => {
+  return (
+    <ComboboxPrimitive.Chips
+      className={cn(
+        'dark:bg-input/30 border-input 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 dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
+        className
+      )}
+      data-slot="combobox-chips"
+      {...props}
+    />
+  );
+};
+
+const ComboboxChip = ({
+  children,
+  className,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean;
+}) => {
+  return (
+    <ComboboxPrimitive.Chip
+      className={cn(
+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
+        className
+      )}
+      data-slot="combobox-chip"
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+          render={
+            <Button size="sm" variant="ghost">
+              <XIcon className="pointer-events-none" />
+            </Button>
+          }
+        />
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+};
+
+const ComboboxChipsInput = ({ className, ...props }: ComboboxPrimitive.Input.Props) => {
+  return (
+    <ComboboxPrimitive.Input
+      className={cn('min-w-16 flex-1 outline-none', className)}
+      data-slot="combobox-chip-input"
+      {...props}
+    />
+  );
+};
+
+export { ComboboxChip, ComboboxChips, ComboboxChipsInput };