feat(components): add multi-select

Summary

Adds a new Multi-select component built from existing shadcn primitives (Popover, Command, Checkbox, Badge, Button) for selecting multiple options from a searchable list.

Closes #8889.
Closes #66.

Video Demo

Component API

• MultiSelect
  • Controlled root: value: string[], onValueChange: (value: string[]) => void, children.
  • Manages open state for the popover internally.
• MultiSelectTrigger
  • Wraps Button + PopoverTrigger.
  • Adds role="combobox" and aria-expanded={open}.
• MultiSelectValue
  • Props: options: { value: string; label: React.ReactNode }[], placeholder?: React.ReactNode, maxBadges?: number, className?, children?.
  • Renders badges for selected options and +N more when truncated.
• MultiSelectContent
  • Wraps PopoverContent and Command.
  • Props: all PopoverContent props plus searchPlaceholder?: string.
• MultiSelectGroup, MultiSelectLabel
  • Thin wrappers around CommandGroup and a div label for grouping options.
• MultiSelectItem
  • Props: value: string, label?: React.ReactNode, children?, className?, disabled?, showCheckbox?: boolean.
  • Toggles membership in value (supports clearing via "__none__" convention).

Implementation details

• UI component
  • Added apps/v4/registry/new-york-v4/ui/multi-select.tsx.
  • Uses Popover, Command, Checkbox, Badge, Button from @/registry/new-york-v4/ui/*.
• Registry
  • Registered in apps/v4/registry/new-york-v4/ui/_registry.ts as multi-select with:
    • type: "registry:ui".
    • files: [{ path: "ui/multi-select.tsx", type: "registry:ui" }].
    • registryDependencies: ["badge", "button", "checkbox", "command", "popover"].
• Examples
  • New example: apps/v4/registry/new-york-v4/examples/multi-select-demo.tsx.
  • Registered in apps/v4/registry/new-york-v4/examples/_registry.ts as multi-select-demo.
  • Kitchen sink demo: apps/v4/app/(internal)/sink/components/multi-select-demo.tsx (marked "use client").
  • Sink registry entry: apps/v4/app/(internal)/sink/component-registry.ts under key "multi-select" pointing to /sink/multi-select.
• Docs
  • New page: apps/v4/content/docs/components/multi-select.mdx with:
    • Frontmatter: title, description, component: true.
    • Installation section:
      • CLI: npx shadcn@latest add multi-select.
      • Manual: <ComponentSource name="multi-select" title="components/ui/multi-select.tsx" />.
    • Usage example demonstrating controlled state and badges.
    • Accessibility section describing combobox role, aria-expanded, keyboard support via Command, and selection feedback via Checkbox + badges.
  • Marked as “New” in sidebar:
    • Added "/docs/components/multi-select" to PAGES_NEW in apps/v4/lib/docs.ts.
• Registry artifacts (for CLI)
  • Ran pnpm registry:build to update:
    • apps/v4/public/r/styles/new-york-v4/registry.json.
    • apps/v4/public/r/styles/new-york-v4/multi-select.json.
    • apps/v4/public/r/styles/new-york-v4/multi-select-demo.json.

Accessibility

• Trigger uses role="combobox" and aria-expanded to expose open state.
• Options rendered inside Command for keyboard navigation (arrow keys, typeahead, Enter).
• Each item uses Checkbox and a trailing CheckIcon to clearly indicate selected state.
• MultiSelectValue uses badges to summarize the current selection in a compact, screen‑reader friendly way (labels come from the options map).