Combobox

Create a Combobox component for an AI-generated interface using shadcn-style composition. Use shadcn/ui command + popover as the implementation base. The component should support default, muted, error, disabled variants and default, hover, focus-visible, disabled, error, filled states. Include clear anatomy for Root, Input, Group, Item, Shortcut, Empty state. Keep the visual language black, white, and gray with subtle borders, practical spacing, accessible focus states, and no decorative noise.

Do not invent a custom component API when shadcn/ui command + popover already covers the base behavior. Avoid random gradients, oversized radii, unclear disabled states, missing labels, icon-only controls without accessible names, and variants that change layout unexpectedly.

Base: shadcn/ui command + popover
Primitive: cmdk + Radix Popover
Tailwind: Use shadcn tokens for background, border, ring, muted text, radius, and state variants. Keep component-specific classes local and copyable.
Dependency: Use cmdk + Radix Popover through the matching shadcn component when possible.

{
  "id": "combobox",
  "category": "components",
  "trigger": "user interaction",
  "target": "combobox",
  "feeling": [
    "polished",
    "practical",
    "precise"
  ],
  "palette": [
    "black",
    "white",
    "gray"
  ],
  "radius": "8px or less",
  "border": "1px solid rgba(237, 237, 236, 0.14)",
  "background": "neutral surface with subtle contrast",
  "foreground": "high-contrast text",
  "mutedForeground": "secondary text at 68-74% contrast",
  "focusRing": "2px neutral ring with offset",
  "shadow": "soft elevation only when interaction needs tactility",
  "motionDuration": "120ms-220ms"
}