feat: publish popover and command

.github/workflows/ci.yml

@@ -66,6 +66,9 @@ jobs:
           grep -q 'from "@/components/ui/button"' components/ui/dialog.tsx
           bunx shadcn@latest add http://localhost:8099/r/select.json http://localhost:8099/r/table.json -y -o
           ! grep -q 'text-sm' components/ui/select.tsx components/ui/table.tsx
+          bunx shadcn@latest add http://localhost:8099/r/popover.json http://localhost:8099/r/command.json -y -o
+          grep -q 'rounded-menu' components/ui/popover.tsx
+          grep -q 'cmdk' package.json
           bun run build
       - if: always()
         run: docker compose logs

README.md

@@ -49,6 +49,8 @@ npx shadcn@latest add @winlab/button
 | `alert-dialog` | `registry:ui` | Confirmation with Cancel and an action |
 | `select` | `registry:ui` | Single-choice dropdown, same height as `input` |
 | `table` | `registry:ui` | Data table with muted headers; add `tabular-nums` and `text-right` to number columns |
+| `popover` | `registry:ui` | Frosted menu surface anchored to a trigger; `w-(--anchor-width)` matches the trigger |
+| `command` | `registry:ui` | Searchable list for a combobox inside a `popover` |
 | `badge` | `registry:ui` | Status label; variants `default`, `muted`, `outline`, `destructive`, `success`, `warning` |
 
 Text falls back in that order: `font-sans` is Inter, then Noto Sans JP, then Noto Sans TC. `font-mono` puts JetBrains Mono in front of the same CJK fonts. Use Inter's `tabular-nums` for amounts and table figures, not `font-mono`.

app/_components/combobox-demo.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/registry/winlab/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/registry/winlab/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/registry/winlab/ui/popover"
+
+const members = ["Alice Chen", "Bob Lin", "Carol Wu", "Dave Huang", "Eve Tsai"]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState<string | null>(null)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={<Button variant="outline" className="w-full justify-between" />}
+      >
+        <span className={value ? "" : "text-muted-foreground"}>
+          {value ?? "Choose an attendee"}
+        </span>
+        <ChevronDownIcon className="text-muted-foreground" />
+      </PopoverTrigger>
+      <PopoverContent className="w-(--anchor-width)">
+        <Command>
+          <CommandInput placeholder="Search members" />
+          <CommandList>
+            <CommandEmpty>No member found.</CommandEmpty>
+            <CommandGroup>
+              {members.map((member) => (
+                <CommandItem
+                  key={member}
+                  value={member}
+                  data-checked={value === member}
+                  onSelect={() => {
+                    setValue(member)
+                    setOpen(false)
+                  }}
+                >
+                  {member}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

app/page.tsx

@@ -1,5 +1,7 @@
 import { PlusIcon } from "lucide-react"
 
+import { ComboboxDemo } from "@/app/_components/combobox-demo"
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -144,6 +146,10 @@ export default function Page() {
               </SelectContent>
             </Select>
           </div>
+          <div className="flex flex-col gap-2">
+            <Label>Attendee</Label>
+            <ComboboxDemo />
+          </div>
           <div className="flex flex-col gap-2">
             <Label htmlFor="note">Note</Label>
             <Textarea

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
     "cn": "^0.4.0",
     "lucide-react": "^1.52.0",
     "next": "16.3.6",

registry.json

@@ -327,6 +327,39 @@
           "type": "registry:ui"
         }
       ]
+    },
+    {
+      "name": "popover",
+      "type": "registry:ui",
+      "title": "Popover",
+      "description": "Frosted menu surface anchored to a trigger.",
+      "dependencies": [
+        "@base-ui/react",
+        "cn"
+      ],
+      "files": [
+        {
+          "path": "registry/winlab/ui/popover.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "command",
+      "type": "registry:ui",
+      "title": "Command",
+      "description": "Searchable list for a combobox inside a popover.",
+      "dependencies": [
+        "cmdk",
+        "cn",
+        "lucide-react"
+      ],
+      "files": [
+        {
+          "path": "registry/winlab/ui/command.tsx",
+          "type": "registry:ui"
+        }
+      ]
     }
   ]
 }