feat: combobox has been initially completed.

Author: Ohh-889

packages/ui/src/components/combobox/Combobox.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable unocss/order */
+import { CommandEmpty, CommandInput, CommandList, CommandOption, CommandRoot } from '../command';
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from '../popover';
+
+import type { ComboboxProps } from './types';
+
+const Combobox = (props: ComboboxProps) => {
+  const {
+    className,
+    classNames,
+    empty = 'No results.',
+    inputProps,
+    items,
+    mode = 'modern',
+    size,
+    trigger,
+    ...rest
+  } = props;
+
+  return (
+    <PopoverRoot>
+      {mode === 'modern' && <PopoverTrigger asChild>{trigger}</PopoverTrigger>}
+      <PopoverPortal>
+        <PopoverContent className="w-(--radix-popover-trigger-width)">
+          <CommandRoot
+            {...rest}
+            className={className || classNames?.root}
+          >
+            <CommandList
+              className={classNames?.list}
+              size={size}
+            >
+              <CommandEmpty
+                className={classNames?.empty}
+                size={size}
+              >
+                {empty}
+              </CommandEmpty>
+
+              {items.map((item, index) => (
+                <CommandOption
+                  classNames={classNames}
+                  item={item}
+                  key={String(index)}
+                  size={size}
+                />
+              ))}
+            </CommandList>
+          </CommandRoot>
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+  );
+};
+
+export default Combobox;

packages/ui/src/components/combobox/index.ts

@@ -0,0 +1,3 @@
+export { default as Combobox } from './Combobox';
+
+export * from './types';

packages/ui/src/components/combobox/types.ts

@@ -0,0 +1,7 @@
+import type { CommandProps } from '../command';
+import type { PopoverProps } from '../popover';
+
+export type ComboboxProps = CommandProps &
+  PopoverProps & {
+    mode?: 'modern' | 'traditional';
+  };

packages/ui/src/components/popover/index.ts

@@ -1,3 +1,7 @@
+export { Popover as PopoverRoot, PopoverPortal, PopoverTrigger } from '@radix-ui/react-popover';
+
+export { default as PopoverAnchor } from './PopoverAnchor';
+
 export { default as PopoverArrow } from './PopoverArrow';
 
 export { default as PopoverContent } from './PopoverContent';

playground/src/app/(demo)/combobox/page.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import { Button, Card, Combobox } from 'soybean-react-ui';
+
+const frameworks = [
+  { label: 'Vue', value: '0' },
+  { label: 'React', value: '1' },
+  { label: 'Next.js', value: '2' },
+  { label: 'SvelteKit', value: '3' },
+  { label: 'Nuxt', value: '4' },
+  { label: 'Remix', value: '5' },
+  { label: 'Astro', value: '6' }
+];
+
+const ComboboxDemo = () => {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState('');
+
+  return (
+    <Card
+      split
+      title="Combobox Size"
+    >
+      <Combobox
+        items={frameworks}
+        trigger={
+          <Button
+            aria-expanded={open}
+            className="w-full justify-between md:max-w-[200px]"
+            role="combobox"
+            variant="pure"
+          >
+            {value ? frameworks.find(framework => framework.value === value)?.label : 'Select framework...'}
+            <ChevronsUpDown className="text-muted-foreground" />
+          </Button>
+        }
+      />
+    </Card>
+  );
+};
+
+export default ComboboxDemo;