{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"choicebox","type":"registry:ui","title":"choicebox","description":"Choiceboxes are a great way to show radio or checkbox options with a card style.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["lucide-react","radix-ui"],"devDependencies":[],"registryDependencies":["field"],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@repo/shadcn-ui/components/ui/radio-group\";\nimport { cn } from \"@repo/shadcn-ui/lib/utils\";\nimport {\n  type ComponentProps,\n  createContext,\n  type HTMLAttributes,\n  useContext,\n} from \"react\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\";\n\nexport type ChoiceboxProps = ComponentProps<typeof RadioGroup>;\n\nexport const Choicebox = ({ className, ...props }: ChoiceboxProps) => (\n  <RadioGroup className={cn(\"w-full\", className)} {...props} />\n);\n\ntype ChoiceboxItemContextValue = {\n  value: ChoiceboxItemProps[\"value\"];\n  id?: ChoiceboxItemProps[\"id\"];\n};\n\nconst ChoiceboxItemContext = createContext<ChoiceboxItemContextValue | null>(\n  null\n);\n\nconst useChoiceboxItemContext = () => {\n  const context = useContext(ChoiceboxItemContext);\n\n  if (!context) {\n    throw new Error(\n      \"useChoiceboxItemContext must be used within a ChoiceboxItem\"\n    );\n  }\n\n  return context;\n};\n\nexport type ChoiceboxItemProps = ComponentProps<typeof RadioGroupItem>;\n\nexport const ChoiceboxItem = ({\n  className,\n  children,\n  value,\n  id,\n}: ChoiceboxItemProps) => (\n  <ChoiceboxItemContext.Provider value={{ value, id }}>\n    <FieldLabel htmlFor={id}>\n      <Field className={className} orientation=\"horizontal\">\n        {children}\n      </Field>\n    </FieldLabel>\n  </ChoiceboxItemContext.Provider>\n);\n\nexport type ChoiceboxItemHeaderProps = ComponentProps<typeof FieldContent>;\n\nexport const ChoiceboxItemHeader = ({\n  className,\n  ...props\n}: ChoiceboxItemHeaderProps) => (\n  <FieldContent className={className} {...props} />\n);\n\nexport type ChoiceboxItemTitleProps = ComponentProps<typeof FieldTitle>;\n\nexport const ChoiceboxItemTitle = ({\n  className,\n  ...props\n}: ChoiceboxItemTitleProps) => <FieldTitle className={className} {...props} />;\n\nexport type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;\n\nexport const ChoiceboxItemSubtitle = ({\n  className,\n  ...props\n}: ChoiceboxItemSubtitleProps) => (\n  <span\n    className={cn(\"font-normal text-muted-foreground text-xs\", className)}\n    {...props}\n  />\n);\n\nexport type ChoiceboxItemDescriptionProps = ComponentProps<\n  typeof FieldDescription\n>;\n\nexport const ChoiceboxItemDescription = ({\n  className,\n  ...props\n}: ChoiceboxItemDescriptionProps) => (\n  <FieldDescription className={className} {...props} />\n);\n\nexport type ChoiceboxIndicatorProps = Partial<\n  ComponentProps<typeof RadioGroupItem>\n>;\n\nexport const ChoiceboxIndicator = (props: ChoiceboxIndicatorProps) => {\n  const context = useChoiceboxItemContext();\n\n  return <RadioGroupItem {...props} value={context.value} />;\n};\n","target":"components/kibo-ui/choicebox/index.tsx"}],"css":{}}