{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"0n-pick-strip","type":"registry:block","title":"Pick Strip","description":"Horizontal multi-select toggle group. Editor toolbars, formatting controls, filter chips — anywhere people pick several options.","dependencies":["lucide-react"],"registryDependencies":["button"],"files":[{"path":"components/0n/pick-strip.tsx","type":"registry:block","target":"components/0n/pick-strip.tsx","content":"'use client'\n\n/**\n * 0n Pick Strip — horizontal multi-select toggle group. Items render as\n * icon buttons; pressing one flips its on/off state independently.\n *\n * Install:\n *   npx shadcn@latest add https://0nmcp.com/r/0n-pick-strip.json\n *\n * Use:\n *   <PickStrip\n *     items={[\n *       { id: 'bold',   icon: BoldIcon,   label: 'Bold' },\n *       { id: 'italic', icon: ItalicIcon, label: 'Italic' },\n *       { id: 'star',   icon: StarIcon,   label: 'Star' },\n *     ]}\n *     value={picks}\n *     onChange={setPicks}\n *   />\n */\n\nimport { useState, type ComponentType } from 'react'\nimport { Button } from '@/components/ui/button'\n\nexport interface PickStripItem {\n  id: string\n  icon?: ComponentType<{ className?: string }>\n  label?: string\n  /** Custom rendered glyph if icon isn't enough (e.g., a styled letter). */\n  glyph?: React.ReactNode\n}\n\nexport interface PickStripProps {\n  items: PickStripItem[]\n  value?: string[]\n  defaultValue?: string[]\n  onChange?: (next: string[]) => void\n}\n\nexport function PickStrip({ items, value, defaultValue = [], onChange }: PickStripProps) {\n  const [internal, setInternal] = useState<string[]>(defaultValue)\n  const picks = value ?? internal\n\n  const flip = (id: string) => {\n    const next = picks.includes(id) ? picks.filter((p) => p !== id) : [...picks, id]\n    if (value === undefined) setInternal(next)\n    onChange?.(next)\n  }\n\n  return (\n    <div className=\"inline-flex items-center gap-1 rounded-md bg-card/60 p-1\">\n      {items.map((it) => {\n        const isOn = picks.includes(it.id)\n        const Icon = it.icon\n        return (\n          <Button\n            key={it.id}\n            type=\"button\"\n            size=\"icon\"\n            variant={isOn ? 'default' : 'ghost'}\n            aria-pressed={isOn}\n            aria-label={it.label}\n            onClick={() => flip(it.id)}\n          >\n            {it.glyph ? it.glyph : Icon ? <Icon className=\"h-4 w-4\" /> : null}\n          </Button>\n        )\n      })}\n    </div>\n  )\n}\n"}]}