1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:Tb53,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Radio. * * Radix RadioGroup. A radio only means anything as one of a set, and Radix * makes that structural: `Radio` must sit inside a `RadioGroup`, which owns the * value and the roving tabindex. * * That roving tabindex is the reason this moved off native inputs. A group of * native radios is one tab stop and arrow keys move between them — but only * while they share a `name`, and only within a form. Miss the `name` (easy, it * is a string repeated on every option) and you get five tab stops and no arrow * keys, silently. Here the group holds the value, so there is no string to * mistype. */ export function RadioGroup({ className, ...props }: ComponentProps) { return ( ); } export type RadioProps = Omit< ComponentProps, "children" | "asChild" > & { label?: ReactNode; description?: ReactNode; labelClassName?: string; }; export function Radio({ label, description, className, labelClassName, id, disabled, ...props }: RadioProps) { const control = ( ); if (!label) return control; return ( {control} {label} {description && ( {description} )} ); } /** shadcn-compatible alias. */ export { Radio as RadioGroupItem }; 24:T5749,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Radio.
 *
 * Radix RadioGroup. A radio only means anything as one of a set, and Radix
 * makes that structural: `Radio` must sit inside a `RadioGroup`, which owns the
 * value and the roving tabindex.
 *
 * That roving tabindex is the reason this moved off native inputs. A group of
 * native radios is one tab stop and arrow keys move between them — but only
 * while they share a `name`, and only within a form. Miss the `name` (easy, it
 * is a string repeated on every option) and you get five tab stops and no arrow
 * keys, silently. Here the group holds the value, so there is no string to
 * mistype.
 */
export function RadioGroup({
  className,
  ...props
}: ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn("flex flex-col gap-4", className)}
      {...props}
    />
  );
}

export type RadioProps = Omit<
  ComponentProps<typeof RadioGroupPrimitive.Item>,
  "children" | "asChild"
> & {
  label?: ReactNode;
  description?: ReactNode;
  labelClassName?: string;
};

export function Radio({
  label,
  description,
  className,
  labelClassName,
  id,
  disabled,
  ...props
}: RadioProps) {
  const control = (
    <RadioGroupPrimitive.Item
      data-slot="radio"
      id={id}
      disabled={disabled}
      className={cn(
        "grid size-[19px] flex-none place-items-center rounded-full border-[1.5px]",
        "border-border-strong bg-surface-raised",
        "transition-[border-color] motion-instant",
        "data-[state=checked]:border-surface-accent",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--focus-ring)]",
        "disabled:cursor-not-allowed disabled:opacity-45",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="grid place-items-center">
        <span className="size-[9px] rounded-full bg-surface-accent" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  );

  if (!label) return control;

  return (
    <label
      htmlFor={id}
      className={cn(
        "flex gap-3 font-ui",
        description ? "items-start" : "items-center",
        disabled ? "cursor-not-allowed opacity-45" : "cursor-pointer",
        labelClassName,
      )}
    >
      <span className={description ? "mt-px" : undefined}>{control}</span>
      <span>
        <span className="block text-body text-text-primary">{label}</span>
        {description && (
          <span className="mt-0.5 block text-caption text-text-muted">{description}</span>
        )}
      </span>
    </label>
  );
}

/** shadcn-compatible alias. */
export { Radio as RadioGroupItem };

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"RadioGroup"}],["$","$L1f",null,{"children":"A group that owns the value and the roving tabindex."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"radio"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/radio","source":"$23","highlighted":"$24","npm":["@radix-ui/react-radio-group"],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]