51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2c43,"use client"; import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"; import { CircleIcon } from "lucide-react"; import * as React from "react"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import type { ExtractOption, ExtractOptionValue } from "@/lib/typed-utils"; // ============================================================================= // Internal Indicator Component (matches shadcn/ui style) // ============================================================================= function RadioGroupIndicator( props: React.ComponentProps, ) { return ( ); } // ============================================================================= // Types // ============================================================================= /** * Supported value types for TypedRadioGroup. * Values are serialized to strings internally but typed correctly externally. */ export type RadioValueType = string | number | boolean; /** * Default option type with value and label. * Use this as a reference for your custom option types. */ export type RadioOption = { value: T; label: string; disabled?: boolean; }; // ============================================================================= // Render Props Types // ============================================================================= /** * Props passed to renderItem function. * @template TOption - The full option type including custom properties */ export type RadioItemRenderProps = { /** The option data */ option: TOption; /** Whether this option is currently selected */ isSelected: boolean; /** Whether this option is disabled */ isDisabled: boolean; /** Props to spread on RadioGroupItem */ itemProps: { value: string; id: string; disabled?: boolean; }; /** Default item component */ Item: typeof RadioGroupItem; /** Default indicator component */ Indicator: typeof RadioGroupIndicator; }; /** * Props passed to renderGroup function. * Used to customize the layout wrapper around radio items. */ export type RadioGroupRenderProps = { /** Rendered items to be placed inside your custom wrapper */ children: React.ReactNode; }; /** * Core props for TypedRadioGroup (for documentation). * The actual component also accepts all RadioGroup props (className, disabled, etc.) */ export interface TypedRadioGroupBaseProps< TOptions extends readonly Record[], TValueKey extends string = "value", TLabelKey extends string = "label", > { /** Array of radio options */ options: TOptions; /** The key to use for the option value (default: "value") */ valueKey?: TValueKey; /** The key to use for the option label (default: "label") */ labelKey?: TLabelKey; /** Controlled value */ value?: ExtractOptionValue; /** Default value for uncontrolled usage */ defaultValue?: ExtractOptionValue; /** Callback when value changes - receives the typed value */ onValueChange?: (value: ExtractOptionValue) => void; /** Custom render for each item */ renderItem?: ( props: RadioItemRenderProps>, ) => React.ReactNode; /** * Custom render for wrapping the items inside RadioGroup. * Use this for adding custom elements between items (e.g., dividers). * For simple layout changes, prefer using the `className` prop directly. */ renderGroup?: (props: RadioGroupRenderProps) => React.ReactNode; /** CSS class name for the RadioGroup container */ className?: string; /** Whether the entire radio group is disabled */ disabled?: boolean; /** The name of the group (for form submission) */ name?: string; /** Whether selection is required */ required?: boolean; /** The orientation of the radio group */ orientation?: "horizontal" | "vertical"; /** When true, keyboard navigation will loop */ loop?: boolean; } /** * Props for the TypedRadioGroup component. * @template TOptions - The options array type * @template TValueKey - The key used for the value property (default: "value") * @template TLabelKey - The key used for the label property (default: "label") */ export interface TypedRadioGroupProps< TOptions extends readonly Record[], TValueKey extends string = "value", TLabelKey extends string = "label", > extends Omit< React.ComponentProps, "value" | "defaultValue" | "onValueChange" | "children" | "onValueChange" >, TypedRadioGroupBaseProps {} // ============================================================================= // Helpers // ============================================================================= /** * Serialize a value to string for internal use with Radix RadioGroup */ function serializeValue(value: T): string { if (typeof value === "boolean") { return value ? "__boolean_true__" : "__boolean_false__"; } if (typeof value === "number") { return `__number_${value}__`; } return String(value); } /** * Deserialize a string value back to its original type */ function deserializeValue>( serialized: string, options: readonly TOption[], valueKey: keyof TOption, ): TOption[keyof TOption] { const found = options.find( (opt) => serializeValue(opt[valueKey] as RadioValueType) === serialized, ); return found?.[valueKey] as TOption[keyof TOption]; } /** * Generate a unique ID for a radio item */ function generateItemId(index: number, groupId: string): string { return `${groupId}-item-${index}`; } // ============================================================================= // Default Render Functions // ============================================================================= function createDefaultRenderItem< TOption extends Record, TLabelKey extends keyof TOption, >(labelKey: TLabelKey) { return function defaultRenderItem({ option, itemProps, Item, Indicator, }: RadioItemRenderProps): React.ReactNode { const label = option[labelKey]; return ( {String(label ?? "")} ); }; } function defaultRenderGroup({ children, }: RadioGroupRenderProps): React.ReactNode { return children; } // ============================================================================= // Component // ============================================================================= /** * A headless, type-safe radio group component with full TypeScript inference * and customizable rendering via render props. * * @example * ```tsx * // Default usage with value/label keys * ( * * * * *

* {option.label} * {option.description &&

{option.description}

} *

* * )} * onValueChange={(value) => { * // value: "apple" | "banana" * }} * /> * * // Custom keys usage with id/name * { * // value: 1 | 2 * }} * /> * ``` */ function TypedRadioGroup< TOptions extends readonly Record[], TValueKey extends string = "value", TLabelKey extends string = "label", >({ options, valueKey = "value" as TValueKey, labelKey = "label" as TLabelKey, value, defaultValue, onValueChange, renderItem, renderGroup = defaultRenderGroup, ...props }: TypedRadioGroupProps) { // Extract the actual option type for internal use type TOption = ExtractOption & Record; type TValue = ExtractOptionValue; // Generate a stable ID for this radio group instance const groupId = React.useId(); // Track internal value for uncontrolled mode const [internalValue, setInternalValue] = React.useState( defaultValue, ); // Use controlled value if provided, otherwise use internal state const currentValue = value !== undefined ? value : internalValue; const handleValueChange = (serialized: string) => { const deserialized = deserializeValue( serialized, options as unknown as readonly TOption[], valueKey as keyof TOption, ); // Update internal state for uncontrolled mode if (value === undefined) { setInternalValue(deserialized as TValue); } if (onValueChange) { onValueChange(deserialized as TValue); } }; const serializedValue = currentValue !== undefined ? serializeValue(currentValue as RadioValueType) : undefined; const serializedDefaultValue = defaultValue !== undefined ? serializeValue(defaultValue as RadioValueType) : undefined; // Use provided renderItem or create default with labelKey const actualRenderItem = renderItem ?? createDefaultRenderItem(labelKey as keyof TOption); // Render all items const renderItems = () => { return (options as unknown as readonly TOption[]).map((option, index) => { const optionValue = option[valueKey as keyof TOption] as RadioValueType; const serialized = serializeValue(optionValue); const isSelected = serializedValue === serialized; const itemId = generateItemId(index, groupId); const isDisabled = (option as { disabled?: boolean }).disabled ?? false; return ( {actualRenderItem({ option, isSelected, isDisabled, itemProps: { value: serialized, id: itemId, disabled: isDisabled, }, Item: RadioGroupItem, Indicator: RadioGroupIndicator, })} ); }); }; // Render the group content (items wrapped by renderGroup) const groupContent = renderGroup({ children: renderItems(), }); return ( {groupContent} ); } export { TypedRadioGroup }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@typedora-ui","registryDependencies":["radio-group","https://typedora-ui.netlify.app/r/typed-utils.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/typed-radio-group/typed-radio-group.tsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]