{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"0n-drop-pick","type":"registry:block","title":"Drop Pick","description":"Controlled or uncontrolled select dropdown with built-in label, placeholder, and options array. Replaces 6 lines of Select boilerplate with one component.","dependencies":[],"registryDependencies":["select","label"],"files":[{"path":"components/0n/drop-pick.tsx","type":"registry:block","target":"components/0n/drop-pick.tsx","content":"'use client'\n\n/**\n * 0n Drop Pick — controlled select dropdown with built-in label and\n * placeholder. Wraps shadcn Select with the boilerplate (Trigger / Value /\n * Content / Items) collapsed into a single options array.\n *\n * Install:\n *   npx shadcn@latest add https://0nmcp.com/r/0n-drop-pick.json\n *\n * Use:\n *   <DropPick\n *     label=\"Plan\"\n *     value={plan}\n *     onChange={setPlan}\n *     options={[\n *       { value: 'supporter', label: 'Supporter' },\n *       { value: 'builder',   label: 'Builder'   },\n *       { value: 'enterprise', label: 'Enterprise' },\n *     ]}\n *   />\n */\n\nimport { useState } from 'react'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\nimport { Label } from '@/components/ui/label'\n\nexport interface DropPickOption {\n  value: string\n  label: string\n}\n\nexport interface DropPickProps {\n  options: DropPickOption[]\n  value?: string\n  defaultValue?: string\n  onChange?: (next: string) => void\n  label?: string\n  placeholder?: string\n  id?: string\n  className?: string\n}\n\nexport function DropPick({\n  options,\n  value,\n  defaultValue,\n  onChange,\n  label,\n  placeholder = 'Choose…',\n  id,\n  className,\n}: DropPickProps) {\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const current = value !== undefined ? value : internal\n\n  const set = (next: string) => {\n    if (value === undefined) setInternal(next)\n    onChange?.(next)\n  }\n\n  return (\n    <div className={className}>\n      {label ? (\n        <Label htmlFor={id} className=\"mb-2 block text-xs font-mono uppercase tracking-wider text-muted-foreground\">\n          {label}\n        </Label>\n      ) : null}\n      <Select value={current || undefined} onValueChange={set}>\n        <SelectTrigger id={id} className=\"w-full\">\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((opt) => (\n            <SelectItem key={opt.value} value={opt.value}>\n              {opt.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </div>\n  )\n}\n"}]}