feat(v4): add combobox with checkbox example (#6862)

* feat(v4): add combobox with checkbox example

* fix: remove unused checkbox

* fix: rounded

apps/v4/components/app-sidebar.tsx

@@ -151,9 +151,14 @@ const data = {
       ],
     },
   ],
-  components: Object.values(Index).filter(
-    (item) => item.type === "registry:ui"
-  ),
+  components: Object.values(Index)
+    .filter((item) => item.type === "registry:ui")
+    .concat([
+      {
+        name: "combobox",
+      },
+    ])
+    .sort((a, b) => a.name.localeCompare(b.name)),
 }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

apps/v4/components/combobox-demo.tsx

@@ -119,6 +119,7 @@ export function ComboboxDemo() {
         timezones={[...timezones]}
         selectedTimezone={timezones[0].timezones[0]}
       />
+      <ComboboxWithCheckbox frameworks={[...frameworks]} />
     </div>
   )
 }
@@ -342,3 +343,63 @@ function TimezoneCombobox({
     </Popover>
   )
 }
+
+function ComboboxWithCheckbox({ frameworks }: { frameworks: Framework[] }) {
+  const [open, setOpen] = React.useState(false)
+  const [selectedFrameworks, setSelectedFrameworks] = React.useState<
+    Framework[]
+  >([])
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-fit min-w-[280px] justify-between"
+        >
+          {selectedFrameworks.length > 0
+            ? selectedFrameworks.map((framework) => framework.label).join(", ")
+            : "Select frameworks (multi-select)..."}
+          <ChevronsUpDown className="text-muted-foreground" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandGroup>
+              {frameworks.map((framework) => (
+                <CommandItem
+                  key={framework.value}
+                  value={framework.value}
+                  onSelect={(currentValue) => {
+                    setSelectedFrameworks(
+                      selectedFrameworks.some((f) => f.value === currentValue)
+                        ? selectedFrameworks.filter(
+                            (f) => f.value !== currentValue
+                          )
+                        : [...selectedFrameworks, framework]
+                    )
+                  }}
+                >
+                  <div
+                    className="border-input data-[selected=true]:border-primary data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground pointer-events-none size-4 shrink-0 rounded-[4px] border transition-all select-none *:[svg]:opacity-0 data-[selected=true]:*:[svg]:opacity-100"
+                    data-selected={selectedFrameworks.some(
+                      (f) => f.value === framework.value
+                    )}
+                  >
+                    <CheckIcon className="size-3.5 text-current" />
+                  </div>
+                  {framework.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}