{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-selector",
  "type": "registry:component",
  "title": "Label Selector",
  "description": "A text label selector component for sizes, variants, and other text-based options.",
  "dependencies": ["@radix-ui/react-radio-group", "class-variance-authority"],
  "files": [
    {
      "path": "registry/abui/ui/label-selector.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction LabelSelectorRoot({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"label-selector-root\"\n      className={cn(\n        \"flex items-center justify-between gap-4 py-3 bg-muted dark:bg-muted/60 p-3 pl-5 rounded-full\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface LabelSelectorLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string\n}\n\nfunction LabelSelectorLabel({ className, value, ...props }: LabelSelectorLabelProps) {\n  return (\n    <div data-slot=\"label-selector-label\" className={cn(\"text-base font-normal leading-none\", className)} {...props}>\n      {value}\n    </div>\n  )\n}\n\nfunction LabelSelectorContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div data-slot=\"label-selector-content\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n}\n\nconst labelSelectorItemVariants = cva(\n  \"group relative shrink-0 cursor-pointer outline-none transition-all flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-2 border-muted-foreground/20 bg-background hover:border-muted-foreground/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n        outline:\n          \"border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-foreground\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground\",\n        solid:\n          \"bg-muted text-muted-foreground hover:bg-muted/80 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      },\n      size: {\n        sm: \"min-w-[2rem] h-8 px-3 text-xs\",\n        default: \"min-w-[2.5rem] h-10 px-4 text-sm\",\n        lg: \"min-w-[3rem] h-12 px-5 text-base\",\n      },\n      rounded: {\n        none: \"rounded-none\",\n        sm: \"rounded-sm\",\n        md: \"rounded-md\",\n        lg: \"rounded-lg\",\n        full: \"rounded-full\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      rounded: \"lg\",\n    },\n  },\n)\n\ninterface LabelSelectorItemProps\n  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n    VariantProps<typeof labelSelectorItemVariants> {\n  value: string\n  label?: string\n}\n\nfunction LabelSelectorItem({ className, value, label, variant, size, rounded, ...props }: LabelSelectorItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"label-selector-item\"\n      value={value}\n      className={cn(labelSelectorItemVariants({ variant, size, rounded, className }))}\n      {...props}\n    >\n      <span className=\"font-medium\">{label || value}</span>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport const LabelSelector = {\n  Root: LabelSelectorRoot,\n  Label: LabelSelectorLabel,\n  Content: LabelSelectorContent,\n  Item: LabelSelectorItem,\n}\n\nexport { labelSelectorItemVariants }\n",
      "type": "registry:ui"
    }
  ]
}