{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-tabs",
  "type": "registry:component",
  "title": "Radio Tabs",
  "description": "A radio tabs component.",
  "dependencies": ["@radix-ui/react-radio-group", "class-variance-authority"],
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "registry/abui/ui/radio-tabs.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\ntype StackAtBreakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"\n\ninterface RadioTabsProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {\n  stackAtBreakpoint?: StackAtBreakpoint\n  containerClassName?: string\n}\n\nfunction RadioTabs({ className, stackAtBreakpoint, containerClassName, ...props }: RadioTabsProps) {\n  // Detect if any children contain descriptions to adjust container height\n  const hasDescriptions = React.Children.toArray(props.children).some(child => {\n    if (React.isValidElement(child) && child.props && typeof child.props === \"object\" && \"children\" in child.props) {\n      const itemChildren = React.Children.toArray(child.props.children as React.ReactNode)\n      return itemChildren.some(itemChild => {\n        return React.isValidElement(itemChild) && itemChild.type === RadioTabsItemDescription\n      })\n    }\n    return false\n  })\n\n  const containerStyles = cn(\n    \"flex gap-x-[2px] rounded-[6px] p-[2px]\",\n    !hasDescriptions && \"h-[38px]\",\n    \"bg-white dark:bg-zinc-900\",\n    \"border\",\n    stackAtBreakpoint && getClassNamesForBreakpoint(stackAtBreakpoint),\n    containerClassName,\n  )\n\n  return (\n    <RadioGroupPrimitive.Root data-slot=\"radio-tabs\" className={cn(\"w-full\", className)} {...props}>\n      <div className={containerStyles}>{props.children}</div>\n    </RadioGroupPrimitive.Root>\n  )\n}\n\nconst radioTabsItemVariants = cva(\n  [\n    \"group flex-1 overflow-hidden cursor-pointer\",\n    \"px-[7px] py-[4px]\",\n    \"select-none outline-none rounded-[4px]\",\n    \"transition-colors\",\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          \"data-[state=checked]:bg-foreground dark:data-[state=checked]:bg-foreground\",\n          \"data-[state=checked]:border data-[state=checked]:border-foreground\",\n          \"hover:bg-muted/50\",\n        ],\n        outline: [\n          \"border border-muted-foreground/20\",\n          \"data-[state=checked]:border-foreground data-[state=checked]:bg-foreground/5\",\n          \"hover:border-muted-foreground/30\",\n        ],\n        outline_highlight: [\n          \"data-[state=checked]:bg-blue-500/5 dark:data-[state=checked]:bg-blue-500/10\",\n          \"data-[state=checked]:border data-[state=checked]:border-blue-500\",\n          \"hover:bg-muted/50\",\n        ],\n        primary: [\n          \"data-[state=checked]:bg-foreground\",\n          \"data-[state=checked]:border data-[state=checked]:border-primary\",\n          \"hover:bg-muted/50\",\n        ],\n        highlight: [\n          \"data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-500\",\n          \"data-[state=checked]:!text-white/100\",\n          // \"data-[state=checked]:border data-[state=checked]:border-blue-500\",\n          \"border-none\",\n          \"hover:bg-muted/50\",\n        ],\n        secondary: [\n          \"data-[state=checked]:bg-muted\",\n          \"data-[state=checked]:border data-[state=checked]:border-muted-foreground/20\",\n          \"hover:bg-muted/50\",\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\ninterface RadioTabsItemProps\n  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,\n    VariantProps<typeof radioTabsItemVariants> {\n  children: React.ReactNode\n}\n\nfunction RadioTabsItem({ className, variant = \"default\", children, ...props }: RadioTabsItemProps) {\n  // Check if children contain only text/simple content or structured components\n  const hasStructuredChildren = React.Children.toArray(children).some(child => {\n    return React.isValidElement(child) && (child.type === RadioTabsItemLabel || child.type === RadioTabsItemDescription)\n  })\n\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-tabs-item\"\n      className={cn(\n        radioTabsItemVariants({ variant }),\n        hasStructuredChildren\n          ? \"flex flex-col justify-center items-center text-center\"\n          : \"flex justify-center items-center\",\n        hasStructuredChildren && \"px-10\",\n        className,\n      )}\n      {...props}\n    >\n      {hasStructuredChildren ? (\n        children\n      ) : (\n        <span\n          className={cn(\n            \"font-medium text-sm\",\n            \"overflow-hidden whitespace-nowrap text-ellipsis\",\n            // \"text-muted-foreground\",\n            variant === \"default\" && \"group-data-[state=checked]:text-background\",\n            variant === \"outline\" && \"group-data-[state=checked]:text-foreground\",\n            variant === \"primary\" && \"group-data-[state=checked]:text-primary\",\n            variant === \"secondary\" && \"group-data-[state=checked]:text-foreground\",\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </RadioGroupPrimitive.Item>\n  )\n}\n\ninterface RadioTabsItemLabelProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n}\n\nfunction RadioTabsItemLabel({ className, children, ...props }: RadioTabsItemLabelProps) {\n  return (\n    <span\n      data-slot=\"radio-tabs-item-label\"\n      className={cn(\n        \"font-semibold text-base\",\n        \"overflow-hidden whitespace-nowrap text-ellipsis\",\n        \"w-full\",\n        \"text-muted-foreground\",\n        \"transition-colors duration-300\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\ninterface RadioTabsItemDescriptionProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n}\n\nfunction RadioTabsItemDescription({ className, children, ...props }: RadioTabsItemDescriptionProps) {\n  return (\n    <span\n      data-slot=\"radio-tabs-item-description\"\n      className={cn(\n        \"text-sm\",\n        \"text-muted-foreground opacity-50\",\n        \"group-data-[state=checked]:opacity-100\",\n        \"transition-colors duration-300\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { RadioTabs, RadioTabsItem, RadioTabsItemLabel, RadioTabsItemDescription, radioTabsItemVariants }\n\nconst getClassNamesForBreakpoint = (breakpoint: StackAtBreakpoint): string => {\n  const breakpointClasses: Record<StackAtBreakpoint, string> = {\n    sm: \"flex-col gap-y-[2px] h-auto sm:flex-row sm:gap-x-[2px]\",\n    md: \"flex-col gap-y-[2px] h-auto md:flex-row md:gap-x-[2px]\",\n    lg: \"flex-col gap-y-[2px] h-auto lg:flex-row lg:gap-x-[2px]\",\n    xl: \"flex-col gap-y-[2px] h-auto xl:flex-row xl:gap-x-[2px]\",\n    \"2xl\": \"flex-col gap-y-[2px] h-auto 2xl:flex-row 2xl:gap-x-[2px]\",\n  }\n  return breakpointClasses[breakpoint]\n}\n",
      "type": "registry:ui"
    }
  ]
}