feat: update combobox demo

Author: Ohh-889

packages/ui/package.json

@@ -11,9 +11,7 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",

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

@@ -3,6 +3,7 @@ import { Close, Portal, Root, Trigger } from '@radix-ui/react-popover';
 import type { ComponentRef } from 'react';
 import { forwardRef } from 'react';
 
+import PopoverAnchor from './PopoverAnchor';
 import PopoverArrow from './PopoverArrow';
 import PopoverContent from './PopoverContent';
 import type { PopoverProps } from './types';
@@ -34,7 +35,9 @@ const PopoverUI = forwardRef<ComponentRef<typeof Content>, PopoverProps>((props,
       open={open}
       onOpenChange={onOpenChange}
     >
-      <Trigger asChild>{trigger}</Trigger>
+      <PopoverAnchor>
+        <Trigger asChild>{trigger}</Trigger>
+      </PopoverAnchor>
 
       <Portal
         container={container}

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

@@ -24,8 +24,6 @@ export * from './components/chip';
 
 export * from './components/collapsible';
 
-export * from './components/combobox';
-
 export * from './components/command';
 
 export * from './components/config-provider';

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import { Button, Card, Command, Popover, cn } from 'soybean-react-ui';
+
+const ComboboxDemo = () => {
+  const [value, setValue] = useState('');
+
+  const frameworks = [
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>Vue</span>
+          <Check className={cn('ml-auto', value === 'vue' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'vue'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>React</span>
+          <Check className={cn('ml-auto', value === 'react' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'react'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>Next.js</span>
+          <Check className={cn('ml-auto', value === 'nextjs' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'nextjs'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>SvelteKit</span>
+          <Check className={cn('ml-auto', value === 'sveltekit' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'sveltekit'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>Nuxt</span>
+          <Check className={cn('ml-auto', value === 'nuxt' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'nuxt'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>Remix</span>
+          <Check className={cn('ml-auto', value === 'remix' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'remix'
+    },
+    {
+      label: (
+        <div className="flex items-center gap-2">
+          <span>Astro</span>
+          <Check className={cn('ml-auto', value === 'astro' ? 'opacity-100' : 'opacity-0')} />
+        </div>
+      ),
+      value: 'astro'
+    }
+  ];
+
+  return (
+    <Card
+      split
+      classNames={{ content: 'w-60' }}
+      title="Combobox Size"
+    >
+      <Popover
+        classNames={{ content: 'p-0' }}
+        trigger={
+          <Button
+            className="w-full justify-between md:max-w-[200px]"
+            role="combobox"
+            variant="pure"
+          >
+            {value ? frameworks.find(item => item.value === value)?.label : 'Select framework...'}
+            <ChevronsUpDown className="text-muted-foreground" />
+          </Button>
+        }
+      >
+        <Command
+          items={frameworks}
+          inputProps={{
+            onValueChange(search) {
+              setValue(search);
+            }
+          }}
+        />
+      </Popover>
+    </Card>
+  );
+};
+
+export default ComboboxDemo;

packages/ui/src/components/popover/PopoverUI.tsx

@@ -1,44 +1,11 @@
-'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('');
+import ComboboxDemo from './modules/ComboboxDemo';
 
+const ComboboxPage = () => {
   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>
+    <div className="flex-c gap-4">
+      <ComboboxDemo />
+    </div>
   );
 };
 
-export default ComboboxDemo;
+export default ComboboxPage;