Radio Group

const RadioGroupAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-RadioGroup__root",
    ]),
    item: cva([
        "UI-RadioGroup__item",
        "block aspect-square rounded-full border text-brand ring-offset-1 ring-offset-[--background]",
        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[--ring] focus-visible:ring-offset-2",
        "disabled:cursor-not-allowed data-[disabled=true]:opacity-50 data-[readonly=true]:cursor-not-allowed",
        "data-[state=unchecked]:bg-white dark:data-[state=unchecked]:bg-gray-700", // Unchecked
        "data-[state=unchecked]:hover:bg-gray-100 dark:data-[state=unchecked]:hover:bg-gray-600", // Unchecked hover
        "data-[state=checked]:bg-brand data-[state=checked]:border-transparent", // Checked
        "data-[error=true]:border-red-500 data-[error=true]:dark:border-red-500 data-[error=true]:data-[state=checked]:border-red-500 data-[error=true]:dark:data-[state=checked]:border-red-500", // Error
    ], {
        variants: {
            size: {
                md: "h-5 w-5",
                lg: "h-6 w-6",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    itemIndicator: cva([
        "UI-RadioGroup__itemIndicator",
        "flex items-center justify-center",
    ]),
    itemLabel: cva([
        "UI-Checkbox_itemLabel",
        "font-normal block",
        "data-[disabled=true]:opacity-50",
    ], {
        variants: {
            size: {
                md: "text-md",
                lg: "text-lg",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    itemContainer: cva([
        "UI-RadioGroup__itemContainer",
        "flex gap-2 items-center relative",
    ]),
    itemCheckIcon: cva([
        "UI-RadioGroup__itemCheckIcon",
        "text-white",
    ], {
        variants: {
            size: {
                md: "h-4 w-4",
                lg: "h-5 w-5",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
})