{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radio-group",
  "type": "registry:block",
  "title": "Radio Group",
  "description": "A sharp radio group for single-choice decisions.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "framer-motion",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/radio-group.tsx",
      "type": "registry:component",
      "target": "@components/wensity/radio-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  LayoutGroup,\n  motion,\n  MotionConfig,\n  useReducedMotion,\n} from \"framer-motion\";\nimport { RadioGroup as BaseRadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio as BaseRadio } from \"@base-ui/react/radio\";\nimport { cn } from \"@/lib/utils\";\n\nconst wensityCardSurfaceClass = cn(\n  \"relative isolate overflow-hidden rounded-[var(--primitive-radius-surface)]\",\n  \"border border-[var(--border)] bg-[var(--primitive-surface-elevated)]\",\n  \"[box-shadow:var(--primitive-shadow-raised)]\",\n);\n\n/**\n * CSS rules for RadioGroup animation slots. Re-keyed to Base UI\n * `data-checked` / `data-unchecked` attributes.\n *\n * Exported so the parent app can paste this into `apps/main-site/src/lib/primitive-tokens.ts`\n * (the runtime `<style>` injection has been removed from this file).\n */\n/* RADIO_PRIMITIVE_ANIMATION_CSS lives in apps/main-site/src/lib/primitive-tokens.ts (PRIMITIVE_ANIMATION_CSS) */\n\nexport type RadioGroupSize = \"sm\" | \"md\" | \"lg\";\nexport type RadioGroupVariant = \"orb\" | \"command\" | \"segment\" | \"tile\";\nexport type RadioGroupOrientation = \"vertical\" | \"horizontal\";\n\nexport type RadioGroupChangeHandler = (\n  value: string,\n  eventDetails?: unknown,\n) => void;\n\nexport interface RadioGroupProps\n  extends Omit<\n    React.HTMLAttributes<HTMLFieldSetElement>,\n    \"defaultValue\" | \"onChange\"\n  > {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: RadioGroupChangeHandler;\n  name?: string;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  radioSize?: RadioGroupSize;\n  variant?: RadioGroupVariant;\n  orientation?: RadioGroupOrientation;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface RadioOptionProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseRadio.Root>,\n    \"className\" | \"render\" | \"value\" | \"children\"\n  > {\n  value: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  leading?: React.ReactNode;\n  trailing?: React.ReactNode;\n  radioSize?: RadioGroupSize;\n  variant?: RadioGroupVariant;\n  fullWidth?: boolean;\n  className?: string;\n  containerClassName?: string;\n  controlClassName?: string;\n  labelClassName?: string;\n  descriptionClassName?: string;\n}\n\nexport interface RadioCardProps extends RadioOptionProps {\n  eyebrow?: React.ReactNode;\n}\n\ntype RadioGroupContextValue = {\n  value?: string;\n  radioSize: RadioGroupSize;\n  variant: RadioGroupVariant;\n  disabled?: boolean;\n  error?: React.ReactNode;\n  orbIndicatorLayoutId?: string;\n};\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(\n  null,\n);\n\nconst controlSizes: Record<RadioGroupSize, string> = {\n  sm: \"size-4\",\n  md: \"size-[18px]\",\n  lg: \"size-5\",\n};\n\nconst segmentSizes: Record<RadioGroupSize, string> = {\n  sm: \"min-h-8 px-3 text-[12px]\",\n  md: \"min-h-9 px-3.5 text-[13px]\",\n  lg: \"min-h-10 px-4 text-sm\",\n};\n\nconst labelSizes: Record<RadioGroupSize, string> = {\n  sm: \"text-[13px]\",\n  md: \"text-sm\",\n  lg: \"text-[15px]\",\n};\n\nconst rowGap: Record<RadioGroupSize, string> = {\n  sm: \"gap-2.5\",\n  md: \"gap-3\",\n  lg: \"gap-3.5\",\n};\n\nconst controlOffset: Record<RadioGroupSize, string> = {\n  sm: \"mt-px\",\n  md: \"mt-0.5\",\n  lg: \"mt-0.5\",\n};\n\nconst focusRing = cn(\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n  \"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n);\n\n/** ≥44px touch target for small variant via pseudo overlay (PRIM-A11Y-004). */\nconst smTouchTarget =\n  \"before:absolute before:inset-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:h-11 before:w-11 before:content-['']\";\n\nconst smoothSurface =\n  \"transition-[background-color,border-color,box-shadow,color,opacity] duration-[240ms] ease-[var(--primitive-ease,cubic-bezier(0.16,1,0.3,1))] motion-reduce:transition-none\";\n\nconst radioIndicatorTransition = {\n  type: \"spring\",\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n} as const;\n\nfunction getOptionValue(child: React.ReactNode): string | undefined {\n  if (!React.isValidElement(child)) return undefined;\n  const props = child.props as { value?: string };\n  return typeof props.value === \"string\" ? props.value : undefined;\n}\n\nfunction getSegmentIndex(children: React.ReactNode, selectedValue?: string) {\n  const values = React.Children.toArray(children)\n    .map(getOptionValue)\n    .filter((value): value is string => value !== undefined);\n\n  const selectedIndex = values.findIndex((value) => value === selectedValue);\n  return {\n    count: values.length,\n    index: selectedIndex >= 0 ? selectedIndex : 0,\n  };\n}\n\nfunction RadioOrbMark({\n  checked,\n  radioSize,\n  orbIndicatorLayoutId,\n}: {\n  checked: boolean;\n  radioSize: RadioGroupSize;\n  orbIndicatorLayoutId?: string;\n}) {\n  const reduceMotion = useReducedMotion();\n\n  return (\n    <BaseRadio.Indicator\n      keepMounted\n      data-slot=\"radio-orb-shell\"\n      className={cn(\n        \"relative inline-flex shrink-0 items-center justify-center rounded-full border\",\n        \"border-[var(--border-strong)] bg-[var(--background)]\",\n        focusRing,\n        \"data-checked:border-[var(--primitive-control-solid)]\",\n        \"data-checked:bg-[color-mix(in_srgb,var(--primitive-control-solid)_8%,transparent)]\",\n        controlSizes[radioSize],\n        radioSize === \"sm\" && smTouchTarget,\n      )}\n    >\n      {checked && orbIndicatorLayoutId ? (\n        <motion.span\n          layoutId={orbIndicatorLayoutId}\n          transition={reduceMotion ? { duration: 0 } : radioIndicatorTransition}\n          className=\"absolute inset-[5px] rounded-full bg-[var(--primitive-control-solid)]\"\n        />\n      ) : null}\n    </BaseRadio.Indicator>\n  );\n}\n\nfunction RadioCommandMark({ radioSize }: { radioSize: RadioGroupSize }) {\n  return (\n    <BaseRadio.Indicator\n      keepMounted\n      data-radio-mark=\"\"\n      data-slot=\"radio-command-shell\"\n      className={cn(\n        \"grid rounded-full border\",\n        \"border-[var(--border-strong)] bg-[var(--background)]\",\n        focusRing,\n        \"data-checked:border-[var(--primitive-control-solid)]\",\n        \"data-checked:bg-[var(--primitive-control-solid)]\",\n        \"data-checked:text-[var(--primitive-control-solid-foreground)]\",\n        controlSizes[radioSize],\n        radioSize === \"sm\" && smTouchTarget,\n      )}\n    >\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        data-slot=\"radio-command-check\"\n        className=\"m-auto size-3 transform-gpu text-current\"\n      >\n        <path\n          data-slot=\"radio-command-check-path\"\n          d=\"M3.4 8.2 6.45 11.25 12.6 4.75\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          pathLength={1}\n        />\n      </svg>\n    </BaseRadio.Indicator>\n  );\n}\n\nfunction useRadioGroupContext(component: string) {\n  const context = React.useContext(RadioGroupContext);\n  if (!context) {\n    throw new Error(`${component} must be used inside RadioGroup.`);\n  }\n  return context;\n}\n\n/**\n * Base UI–backed RadioGroup. Wraps children in `BaseRadioGroup` for keyboard\n * roving/focus while exposing Wensity variant/size/error via context.\n */\nexport function RadioGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  name,\n  label,\n  description,\n  error,\n  radioSize = \"md\",\n  variant = \"orb\",\n  orientation = \"vertical\",\n  disabled,\n  children,\n  className,\n  ...props\n}: RadioGroupProps) {\n  const reactId = React.useId();\n  const orbIndicatorLayoutId = React.useId();\n  const groupName = name ?? `radio-group-${reactId}`;\n  const descriptionId = description ? `${groupName}-description` : undefined;\n  const errorId = error ? `${groupName}-error` : undefined;\n  const isControlled = value !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);\n  const selectedValue = isControlled ? value : uncontrolledValue;\n\n  const reduceMotion = useReducedMotion();\n\n  const handleValueChange = React.useCallback(\n    (nextValue: unknown, eventDetails: unknown) => {\n      const next = typeof nextValue === \"string\" ? nextValue : \"\";\n      if (!isControlled) setUncontrolledValue(next);\n      onValueChange?.(next, eventDetails);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const context = React.useMemo<RadioGroupContextValue>(\n    () => ({\n      value: selectedValue,\n      radioSize,\n      variant,\n      disabled,\n      error,\n      orbIndicatorLayoutId: variant === \"orb\" ? orbIndicatorLayoutId : undefined,\n    }),\n    [disabled, error, orbIndicatorLayoutId, radioSize, selectedValue, variant],\n  );\n\n  const segmentLayout =\n    variant === \"segment\" ? getSegmentIndex(children, selectedValue) : null;\n\n  const list = (\n    <BaseRadioGroup data-wensity-primitive=\"\"\n      name={groupName}\n      {...(isControlled ? { value } : { defaultValue })}\n      onValueChange={handleValueChange}\n      disabled={disabled}\n      aria-invalid={error ? true : undefined}\n      data-slot=\"radio-group-list\"\n      data-orientation={orientation}\n      className={cn(\n        orientation === \"horizontal\"\n          ? \"flex flex-wrap items-stretch gap-2.5\"\n          : \"space-y-2\",\n        variant === \"segment\" &&\n          cn(\n            wensityCardSurfaceClass,\n            \"relative rounded-[var(--primitive-radius-surface)] p-1\",\n            orientation === \"horizontal\"\n              ? \"flex w-full gap-1\"\n              : \"flex flex-col gap-1\",\n          ),\n      )}\n      style={\n        variant === \"segment\" && segmentLayout\n          ? ({\n              \"--radio-segment-count\": segmentLayout.count,\n              \"--radio-segment-index\": segmentLayout.index,\n            } as React.CSSProperties)\n          : undefined\n      }\n    >\n      {variant === \"segment\" && segmentLayout && segmentLayout.count > 0 ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"radio-segment-indicator\"\n          data-orientation={orientation}\n          className={cn(\n            \"pointer-events-none absolute rounded-[var(--primitive-radius-item)]\",\n            \"bg-[var(--primitive-surface-selected)]\",\n            \"shadow-[0_1px_2px_rgba(0,0,0,0.07),0_0_0_1px_color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n            \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.36),0_0_0_1px_color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n            orientation === \"horizontal\"\n              ? \"top-1 bottom-1 left-1\"\n              : \"left-1 right-1 top-1\",\n          )}\n          style={\n            orientation === \"horizontal\"\n              ? {\n                  width:\n                    \"calc((100% - 0.5rem - (var(--radio-segment-count) - 1) * 0.25rem) / var(--radio-segment-count))\",\n                  transform:\n                    \"translate3d(calc(var(--radio-segment-index) * (100% + 0.25rem)), 0, 0)\",\n                }\n              : {\n                  height:\n                    \"calc((100% - 0.5rem - (var(--radio-segment-count) - 1) * 0.25rem) / var(--radio-segment-count))\",\n                  transform:\n                    \"translate3d(0, calc(var(--radio-segment-index) * (100% + 0.25rem)), 0)\",\n                }\n          }\n        />\n      ) : null}\n      {children}\n    </BaseRadioGroup>\n  );\n\n  return (\n    <RadioGroupContext.Provider value={context}>\n      <fieldset\n        aria-describedby={[descriptionId, errorId].filter(Boolean).join(\" \") || undefined}\n        aria-invalid={error ? true : undefined}\n        disabled={disabled}\n        className={cn(\"space-y-3.5\", className)}\n        {...props}\n      >\n        {label || description ? (\n          <div className=\"space-y-1\">\n            {label ? (\n              <legend className=\"text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]\">\n                {label}\n              </legend>\n            ) : null}\n            {description ? (\n              <p\n                id={descriptionId}\n                className=\"text-[12px] leading-[1.45] text-[var(--muted-foreground)]\"\n              >\n                {description}\n              </p>\n            ) : null}\n          </div>\n        ) : null}\n        {variant === \"orb\" ? (\n          <MotionConfig\n            transition={reduceMotion ? { duration: 0 } : radioIndicatorTransition}\n          >\n            <LayoutGroup id={`radio-orb-group-${reactId}`}>{list}</LayoutGroup>\n          </MotionConfig>\n        ) : (\n          list\n        )}\n        {error ? (\n          <p\n            id={errorId}\n            className=\"text-[12px] leading-[1.45] font-medium text-[var(--primitive-destructive)]\"\n          >\n            {error}\n          </p>\n        ) : null}\n      </fieldset>\n    </RadioGroupContext.Provider>\n  );\n}\n\nexport const RadioOption = React.forwardRef<HTMLButtonElement, RadioOptionProps>(\n  (\n    {\n      value,\n      label,\n      description,\n      leading,\n      trailing,\n      radioSize,\n      variant,\n      fullWidth = true,\n      disabled,\n      className,\n      containerClassName,\n      controlClassName,\n      labelClassName,\n      descriptionClassName,\n      inputRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useRadioGroupContext(\"RadioOption\");\n    const optionSize = radioSize ?? context.radioSize;\n    const optionVariant = variant ?? context.variant;\n    const optionDisabled = disabled || context.disabled;\n    const checked = context.value === value;\n    const optionId = React.useId();\n    const descriptionId = description\n      ? `radio-option-${optionId}-description`\n      : undefined;\n\n    if (optionVariant === \"segment\") {\n      return (\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={optionDisabled}\n          inputRef={inputRef}\n          aria-describedby={descriptionId}\n          aria-invalid={context.error ? true : undefined}\n          data-slot=\"radio-option\"\n          className={cn(\n            \"group/radio relative z-[1] inline-flex cursor-pointer select-none items-center justify-center rounded-[var(--primitive-radius-item)]\",\n            \"font-medium leading-none tracking-[-0.01em]\",\n            \"text-[var(--muted-foreground)]\",\n            \"hover:text-[var(--foreground)]\",\n            focusRing,\n            \"data-checked:text-[var(--foreground)]\",\n            optionDisabled && \"cursor-not-allowed opacity-45\",\n            fullWidth && \"flex-1\",\n            segmentSizes[optionSize],\n            containerClassName,\n            className,\n          )}\n          {...props}\n        >\n          <span data-slot=\"radio-segment-label\" className=\"truncate\">\n            {label}\n          </span>\n        </BaseRadio.Root>\n      );\n    }\n\n    if (optionVariant === \"command\") {\n      return (\n        <label\n          data-slot=\"radio-option\"\n          data-radio-card\n          className={cn(\n            \"group/radio flex cursor-pointer select-none items-start p-3.5\",\n            wensityCardSurfaceClass,\n            smoothSurface,\n            \"has-[[data-checked]]:border-[color-mix(in_srgb,var(--foreground)_22%,transparent)]\",\n            \"has-[[data-checked]]:[box-shadow:0_0_0_1px_color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n            \"dark:has-[[data-checked]]:[box-shadow:0_0_0_1px_color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n            !optionDisabled &&\n              \"hover:border-[color-mix(in_srgb,var(--foreground)_16%,transparent)]\",\n            optionDisabled && \"cursor-not-allowed opacity-45\",\n            fullWidth ? \"w-full\" : \"w-fit\",\n            rowGap[optionSize],\n            containerClassName,\n            className,\n          )}\n        >\n          {leading ? (\n            <span className=\"mt-0.5 grid size-8 shrink-0 place-items-center rounded-[var(--primitive-radius-control-sm)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--foreground)_3%,var(--background))] text-[var(--muted-foreground)] [&_svg]:size-4\">\n              {leading}\n            </span>\n          ) : null}\n          <span className=\"min-w-0 flex-1\">\n            <span\n              className={cn(\n                \"block font-medium leading-snug tracking-[-0.015em] text-[var(--foreground)]\",\n                labelSizes[optionSize],\n                labelClassName,\n              )}\n            >\n              {label}\n            </span>\n            {description ? (\n              <span\n                id={descriptionId}\n                className={cn(\n                  \"mt-1 block text-[12px] leading-[1.45] text-[var(--muted-foreground)]\",\n                  descriptionClassName,\n                )}\n              >\n                {description}\n              </span>\n            ) : null}\n          </span>\n          {trailing ? (\n            <span className=\"shrink-0 pt-0.5 text-[12px] font-medium text-[var(--muted-foreground)]\">\n              {trailing}\n            </span>\n          ) : null}\n          <span\n            className={cn(\"shrink-0\", controlOffset[optionSize], controlClassName)}\n          >\n            <BaseRadio.Root\n              ref={ref}\n              value={value}\n              disabled={optionDisabled}\n              inputRef={inputRef}\n              aria-describedby={descriptionId}\n              aria-invalid={context.error ? true : undefined}\n              className=\"inline-flex\"\n              {...props}\n            >\n              <RadioCommandMark radioSize={optionSize} />\n            </BaseRadio.Root>\n          </span>\n        </label>\n      );\n    }\n\n    return (\n      <label\n        data-slot=\"radio-option\"\n        className={cn(\n          \"group/radio relative flex cursor-pointer select-none items-start\",\n          rowGap[optionSize],\n          fullWidth ? \"w-full\" : \"w-fit\",\n          optionDisabled && \"cursor-not-allowed opacity-45\",\n          containerClassName,\n          className,\n        )}\n      >\n        <span className={cn(\"shrink-0\", controlOffset[optionSize], controlClassName)}>\n          <BaseRadio.Root\n            ref={ref}\n            value={value}\n            disabled={optionDisabled}\n            inputRef={inputRef}\n            aria-describedby={descriptionId}\n            aria-invalid={context.error ? true : undefined}\n            className=\"inline-flex\"\n            {...props}\n          >\n            <RadioOrbMark\n              checked={checked}\n              radioSize={optionSize}\n              orbIndicatorLayoutId={context.orbIndicatorLayoutId}\n            />\n          </BaseRadio.Root>\n        </span>\n        <span className=\"min-w-0 flex-1 pt-px\">\n          <span\n            className={cn(\n              \"block font-medium leading-snug tracking-[-0.015em] text-[var(--foreground)]\",\n              labelSizes[optionSize],\n              labelClassName,\n            )}\n          >\n            {label}\n          </span>\n          {description ? (\n            <span\n              id={descriptionId}\n              className={cn(\n                \"mt-1 block text-[12px] leading-[1.45] text-[var(--muted-foreground)]\",\n                descriptionClassName,\n              )}\n            >\n              {description}\n            </span>\n          ) : null}\n        </span>\n        {trailing ? (\n          <span className=\"shrink-0 pt-0.5 text-[12px] font-medium text-[var(--muted-foreground)]\">\n            {trailing}\n          </span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nRadioOption.displayName = \"RadioOption\";\n\nexport const RadioCard = React.forwardRef<HTMLButtonElement, RadioCardProps>(\n  (\n    {\n      eyebrow,\n      leading,\n      trailing,\n      value,\n      label,\n      description,\n      disabled,\n      radioSize = \"md\",\n      variant: _variant,\n      fullWidth = true,\n      containerClassName,\n      controlClassName: _controlClassName,\n      className,\n      labelClassName,\n      descriptionClassName,\n      inputRef,\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useRadioGroupContext(\"RadioCard\");\n    const checked = context.value === value;\n    const optionDisabled = disabled || context.disabled;\n    const optionId = React.useId();\n    const descriptionId = description\n      ? `radio-card-${optionId}-description`\n      : undefined;\n\n    return (\n      <label\n        data-radio-card\n        data-checked={checked ? \"\" : undefined}\n        data-unchecked={!checked ? \"\" : undefined}\n        data-slot=\"radio-card-shell\"\n        className={cn(\n          \"group/radio-card relative block cursor-pointer select-none p-4\",\n          wensityCardSurfaceClass,\n          smoothSurface,\n          \"data-checked:border-[color-mix(in_srgb,var(--foreground)_28%,transparent)]\",\n          \"data-checked:[box-shadow:0_0_0_1px_color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n          \"dark:data-checked:[box-shadow:0_0_0_1px_color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n          !optionDisabled &&\n            \"hover:border-[color-mix(in_srgb,var(--foreground)_18%,transparent)]\",\n          optionDisabled && \"cursor-not-allowed opacity-45\",\n          fullWidth ? \"w-full\" : \"w-fit\",\n          containerClassName,\n          className,\n        )}\n      >\n        <BaseRadio.Root\n          ref={ref}\n          value={value}\n          disabled={optionDisabled}\n          inputRef={inputRef}\n          aria-describedby={descriptionId}\n          aria-invalid={context.error ? true : undefined}\n          className=\"sr-only\"\n          {...props}\n        />\n        <div\n          className={cn(\n            \"pointer-events-none absolute right-3 top-3 grid size-5 place-items-center rounded-full\",\n            \"border border-[var(--border-strong)] bg-[var(--background)]\",\n            checked &&\n              \"border-[var(--primitive-control-solid)] bg-[var(--primitive-control-solid)] text-[var(--primitive-control-solid-foreground)]\",\n          )}\n          data-slot=\"radio-card-check-shell\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 16 16\"\n            data-slot=\"radio-card-check\"\n            className=\"size-3 transform-gpu\"\n            fill=\"none\"\n          >\n            <path\n              data-slot=\"radio-card-check-path\"\n              d=\"M3.4 8.2 6.45 11.25 12.6 4.75\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={1}\n            />\n          </svg>\n        </div>\n        {eyebrow ? (\n          <p className=\"mb-2 text-[11px] font-semibold uppercase tracking-[0.07em] text-[var(--muted-foreground)]\">\n            {eyebrow}\n          </p>\n        ) : null}\n        {leading ? (\n          <div className=\"mb-3 grid size-9 place-items-center rounded-[var(--primitive-radius-control-sm)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--foreground)_3.5%,var(--background))] text-[var(--foreground)] [&_svg]:size-[18px]\">\n            {leading}\n          </div>\n        ) : null}\n        <span className=\"block min-w-0 pr-7\">\n          <span\n            className={cn(\n              \"block font-medium leading-snug tracking-[-0.015em] text-[var(--foreground)]\",\n              labelSizes[radioSize],\n              labelClassName,\n            )}\n          >\n            {label}\n          </span>\n          {description ? (\n            <span\n              id={descriptionId}\n              className={cn(\n                \"mt-1.5 block text-[12px] leading-[1.45] text-[var(--muted-foreground)]\",\n                descriptionClassName,\n              )}\n            >\n              {description}\n            </span>\n          ) : null}\n          {trailing ? (\n            <span className=\"mt-3 inline-flex items-center rounded-[var(--primitive-radius-control-sm)] border border-[var(--border)] bg-[color-mix(in_srgb,var(--foreground)_3%,var(--background))] px-2 py-0.5 text-[11px] font-medium tracking-[0.01em] text-[var(--muted-foreground)]\">\n              {trailing}\n            </span>\n          ) : null}\n        </span>\n      </label>\n    );\n  },\n);\n\nRadioCard.displayName = \"RadioCard\";\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/radio-group.tsx. For Pro components and updates, use pnpm dlx wensity@latest add radio-group.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "radio-group",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/radio-group",
      "shadcnUrl": "https://ui.wensity.com/r/radio-group",
      "cliInstall": "pnpm dlx wensity@latest add radio-group"
    }
  }
}