{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-rows",
  "type": "registry:component",
  "title": "Radio Rows",
  "description": "A radio rows component.",
  "dependencies": ["@radix-ui/react-radio-group", "class-variance-authority"],
  "files": [
    {
      "path": "registry/abui/ui/radio-rows.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\ninterface RadioRowsProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {\n  containerClassName?: string\n}\n\nfunction RadioRows({ className, containerClassName, ...props }: RadioRowsProps) {\n  const containerStyles = cn(\"flex flex-col gap-y-1\", \"h-auto items-start\", containerClassName)\n\n  return (\n    <RadioGroupPrimitive.Root data-slot=\"radio-rows\" className={cn(\"w-full\", className)} {...props}>\n      <div className={containerStyles}>{props.children}</div>\n    </RadioGroupPrimitive.Root>\n  )\n}\n\nconst radioRowsItemVariants = cva(\n  [\n    \"group w-full\",\n    \"p-3 pr-4 rounded-md relative flex items-center gap-x-3 justify-between\",\n    \"transition-all duration-300 font-medium\",\n    \"cursor-pointer select-none outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: [\n          \"border-2 border-muted-foreground/20\",\n          \"bg-muted/5\",\n          \"data-[state=checked]:bg-foreground data-[state=checked]:text-background data-[state=checked]:border-muted-foreground/20\",\n          \"hover:border-muted-foreground/30\",\n        ],\n        outline: [\n          \"border-2 border-muted-foreground/20\",\n          \"bg-transparent\",\n          \"data-[state=checked]:border-foreground data-[state=checked]:bg-foreground/5 data-[state=checked]:text-foreground\",\n          \"hover:border-muted-foreground/30\",\n        ],\n        primary: [\n          \"border-2 border-muted-foreground/20\",\n          \"bg-transparent\",\n          \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:text-foreground\",\n          \"hover:border-muted-foreground/30\",\n        ],\n        secondary: [\n          \"border border-muted-foreground/10\",\n          \"bg-muted/5\",\n          \"data-[state=checked]:bg-muted data-[state=checked]:border-muted-foreground/20 data-[state=checked]:text-foreground\",\n          \"hover:bg-muted/10\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\ninterface RadioRowsItemProps\n  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n    VariantProps<typeof radioRowsItemVariants> {\n  children: React.ReactNode\n}\n\nfunction RadioRowsItem({ className, variant = \"default\", children, ...props }: RadioRowsItemProps) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-rows-item\"\n      className={cn(radioRowsItemVariants({ variant }), className)}\n      {...props}\n    >\n      {/* Custom Radio Indicator */}\n      <div\n        className={cn(\n          \"w-[19px] h-[19px] rounded-xl shrink-0 grow-0\",\n          \"border-[3px]\",\n          \"flex justify-center items-center\",\n          \"transition-all duration-300\",\n          variant === \"default\" && [\"border-muted-foreground/40\", \"group-data-[state=checked]:border-background\"],\n          variant === \"outline\" && [\"border-muted-foreground/30\", \"group-data-[state=checked]:border-foreground\"],\n          variant === \"primary\" && [\"border-muted-foreground/30\", \"group-data-[state=checked]:border-primary\"],\n          variant === \"secondary\" && [\"border-muted-foreground/30\", \"group-data-[state=checked]:border-foreground\"],\n        )}\n      >\n        <div\n          className={cn(\n            \"w-[9px] h-[9px] rounded-full\",\n            \"transition-all duration-300\",\n            \"opacity-0 scale-0\",\n            \"group-data-[state=checked]:opacity-100 group-data-[state=checked]:scale-100\",\n            variant === \"default\" && \"group-data-[state=checked]:bg-background\",\n            variant === \"outline\" && \"bg-foreground\",\n            variant === \"primary\" && \"bg-primary\",\n            variant === \"secondary\" && \"bg-foreground\",\n          )}\n        />\n      </div>\n\n      {/* Content */}\n      <div className=\"flex flex-col items-start gap-y-1 w-full\">{children}</div>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\ninterface RadioRowsItemTitleProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n}\n\nfunction RadioRowsItemTitle({ className, children, ...props }: RadioRowsItemTitleProps) {\n  return (\n    <p\n      data-slot=\"radio-rows-item-title\"\n      className={cn(\"font-bold text-base tracking-normal leading-none\", \"transition-colors duration-300\", className)}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\ninterface RadioRowsItemDescriptionProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n}\n\nfunction RadioRowsItemDescription({ className, children, ...props }: RadioRowsItemDescriptionProps) {\n  return (\n    <p\n      data-slot=\"radio-rows-item-description\"\n      className={cn(\n        \"text-sm font-medium leading-none\",\n        \"text-muted-foreground\",\n        \"transition-colors duration-300\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  )\n}\n\nexport { RadioRows, RadioRowsItem, RadioRowsItemTitle, RadioRowsItemDescription, radioRowsItemVariants }\n",
      "type": "registry:ui"
    }
  ]
}