Radio Tabs

1"use client"
2 
3import * as React from "react"
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5import { cva, type VariantProps } from "class-variance-authority"
6 
7import { cn } from "@/lib/utils"
8 
9type StackAtBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl"
10 
11interface RadioTabsProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
12  stackAtBreakpoint?: StackAtBreakpoint
13  containerClassName?: string
14}
15 
16function RadioTabs({ className, stackAtBreakpoint, containerClassName, ...props }: RadioTabsProps) {
17  // Detect if any children contain descriptions to adjust container height
18  const hasDescriptions = React.Children.toArray(props.children).some(child => {
19    if (React.isValidElement(child) && child.props && typeof child.props === "object" && "children" in child.props) {
20      const itemChildren = React.Children.toArray(child.props.children as React.ReactNode)
21      return itemChildren.some(itemChild => {
22        return React.isValidElement(itemChild) && itemChild.type === RadioTabsItemDescription
23      })
24    }
25    return false
26  })
27 
28  const containerStyles = cn(
29    "flex gap-x-[2px] rounded-[6px] p-[2px]",
30    !hasDescriptions && "h-[38px]",
31    "bg-white dark:bg-zinc-900",
32    "border",
33    stackAtBreakpoint && getClassNamesForBreakpoint(stackAtBreakpoint),
34    containerClassName,
35  )
36 
37  return (
38    <RadioGroupPrimitive.Root data-slot="radio-tabs" className={cn("w-full", className)} {...props}>
39      <div className={containerStyles}>{props.children}</div>
40    </RadioGroupPrimitive.Root>
41  )
42}
43 
44const radioTabsItemVariants = cva(
45  [
46    "group flex-1 overflow-hidden cursor-pointer",
47    "px-[7px] py-[4px]",
48    "select-none outline-none rounded-[4px]",
49    "transition-colors",
50    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
51    "disabled:cursor-not-allowed disabled:opacity-50",
52  ],
53  {
54    variants: {
55      variant: {
56        default: [
57          "data-[state=checked]:bg-foreground dark:data-[state=checked]:bg-foreground",
58          "data-[state=checked]:border data-[state=checked]:border-foreground",
59          "hover:bg-muted/50",
60        ],
61        outline: [
62          "border border-muted-foreground/20",
63          "data-[state=checked]:border-foreground data-[state=checked]:bg-foreground/5",
64          "hover:border-muted-foreground/30",
65        ],
66        outline_highlight: [
67          "data-[state=checked]:bg-blue-500/5 dark:data-[state=checked]:bg-blue-500/10",
68// … truncated