@skdx/react 0.27.0 → 0.29.0

package/dist/radio-card/types.d.ts

@@ -1,13 +1,21 @@
+import type * as React from 'react';
+import type { RadioGroupChangeReason } from '../radio-group/types.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link RadioCard} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link RadioCard} to its parts via context. */
 export interface RadioCardContextValue {
     value: string;
     checked: boolean;
     disabled: boolean;
     /** Roving tabindex: only the checked card — or the first enabled one when nothing is checked — is a tab stop. */
     tabStop: boolean;
+    /** Whether the group has settled which card holds the tab stop, resolved after initial render for server-rendered unselected groups. */
+    tabStopResolved: boolean;
     required: boolean;
+    /** The group's `readOnly`: the card keeps its tab stop and refuses the selection. */
+    readOnly: boolean;
     name: string | undefined;
+    /** The group's `form` id, forwarded to this card's hidden radio input. */
+    form: string | undefined;
     labelId: string;
     descriptionId: string;
     /** Whether a `RadioCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
@@ -16,18 +24,35 @@ export interface RadioCardContextValue {
     hasDescription: boolean;
     setHasLabel: (present: boolean) => void;
     setHasDescription: (present: boolean) => void;
-    onSelect: () => void;
+    onSelect: (reason: RadioGroupChangeReason) => void;
 }
-/** Props for the {@link RadioCard} root, the `<label>` whose whole surface is the hit target. */
-export interface RadioCardProps extends PrimitivePropsWithRef<'label'> {
+/** Props for the {@link RadioCardRoot}, the `<label>` whose whole surface is the hit target. */
+export interface RadioCardRootProps extends PrimitivePropsWithRef<'label'> {
     /** Unique identifier compared against the enclosing `RadioGroup`'s selected `value`. */
     value: string;
     /**
-     * Disables this card only. The enclosing `RadioGroup`'s own `disabled` still
-     * wins when set, so a group-level `disabled` cannot be re-enabled per card.
+     * Disables this card only; the enclosing `RadioGroup`'s own `disabled` still wins when set.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Size rung the skin scales the card by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+}
+/** Props for the {@link RadioCard} recipe, rendering a label with optional title and description wired to its value. */
+export interface RadioCardProps extends Omit<RadioCardRootProps, 'asChild'> {
+    /**
+     * The card's title line, rendered into a derived `RadioCardLabel` and ignored when `children` is given.
+     * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
+     */
+    label?: React.ReactNode | undefined;
+    /**
+     * Supporting copy under the title, rendered into a derived `RadioCardDescription` and ignored when `children` is given.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode | undefined;
 }
 /** Props for the {@link RadioCardControl}, the real (visually hidden, still focusable) radio input. */
 export interface RadioCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {

package/dist/radio-group/RadioGroup.cjs

@@ -1 +1,2 @@
-"use strict";var X=Object.create;var c=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty;var j=(e,r)=>{for(var t in r)c(e,t,{get:r[t],enumerable:!0})},P=(e,r,t,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Z(r))!$.call(e,o)&&o!==t&&c(e,o,{get:()=>r[o],enumerable:!(a=Y(r,o))||a.enumerable});return e};var v=(e,r,t)=>(t=e!=null?X(_(e)):{},P(r||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),ee=e=>P(c({},"__esModule",{value:!0}),e);var re={};j(re,{RadioGroup:()=>S,RadioGroupIndicator:()=>y,RadioGroupItem:()=>x,RadioGroupProvider:()=>H,useRadioGroupContext:()=>h});module.exports=ee(re);var n=v(require("react"),1),k=require("../utils/composeRefs.cjs"),C=require("../utils/createContext.cjs"),E=require("../utils/formControl.cjs"),V=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),T=require("../utils/useControllableState.cjs"),w=require("../utils/useRovingFocus.cjs"),I=require("react/jsx-runtime"),[H,h]=(0,C.createSafeContext)("RadioGroup"),S=n.forwardRef(({value:e,defaultValue:r,onValueChange:t,name:a,required:o=!1,disabled:d=!1,invalid:i=!1,orientation:p="both",loop:u=!0,...s},R)=>{let[b,g]=(0,T.useControllableState)({prop:e,defaultProp:r,onChange:t}),J=(0,w.useRovingFocus)({orientation:p,loop:u,itemSelector:'[role="radio"]'}),G=n.useRef(null),O=(0,k.useComposedRefs)(R,G),[Q,U]=n.useState(null);return(0,E.useFormReset)(G,()=>g(r)),n.useLayoutEffect(()=>{if(b!==void 0)return;let W=G.current?.querySelector('[role="radio"]:not([disabled])');U(W?.getAttribute("data-value")??null)},[b]),(0,I.jsx)(H,{name:a,value:b,required:o,disabled:d,onValueChange:g,firstEnabledValue:Q,children:(0,I.jsx)(f.Primitive.div,{role:"radiogroup","aria-required":o||void 0,"aria-invalid":i?!0:void 0,"data-disabled":d?"":void 0,"data-invalid":i?"":void 0,"data-orientation":p,...s,...(0,V.skdxPart)("radio-group","root",s.className),ref:O,onKeyDown:(0,f.composeEventHandlers)(s.onKeyDown,J)})})});S.displayName="RadioGroup";var D=v(require("react"),1),L=require("../utils/createContext.cjs"),M=require("../utils/hiddenInput.cjs"),N=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),F=require("../utils/useRovingFocus.cjs");var m=require("react/jsx-runtime"),[oe,K]=(0,L.createSafeContext)("RadioGroupItem"),x=D.forwardRef(({value:e,disabled:r,...t},a)=>{let o=h("RadioGroupItem"),d=o.value===e,i=o.disabled||r||!1,p=d||o.value===void 0&&o.firstEnabledValue===e;return(0,m.jsxs)(oe,{checked:d,disabled:i,children:[(0,m.jsx)(l.Primitive.button,{type:"button",role:"radio","aria-checked":d,"data-state":d?"checked":"unchecked","data-disabled":i?"":void 0,"data-value":e,disabled:i,tabIndex:(0,F.rovingTabIndex)(o.value!==void 0||o.firstEnabledValue!==null,p,i),...t,...(0,N.skdxPart)("radio-group","item",t.className),ref:a,onClick:(0,l.composeEventHandlers)(t.onClick,()=>{d||o.onValueChange(e)}),onFocus:(0,l.composeEventHandlers)(t.onFocus,u=>{let s=u.relatedTarget,R=s?.getAttribute("role")==="radio"&&s.closest('[role="radiogroup"]')===u.currentTarget.closest('[role="radiogroup"]');!d&&R&&o.onValueChange(e)}),onKeyDown:(0,l.composeEventHandlers)(t.onKeyDown,u=>{u.key==="Enter"&&u.preventDefault()})}),o.name&&(0,m.jsx)(M.HiddenInput,{type:"radio",name:o.name,value:e,checked:d,required:o.required,disabled:i})]})});x.displayName="RadioGroupItem";var q=v(require("react"),1),A=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),y=q.forwardRef(({forceMount:e,...r},t)=>{let a=K("RadioGroupIndicator");return e||a.checked?(0,z.jsx)(B.Primitive.span,{"data-state":a.checked?"checked":"unchecked","data-disabled":a.disabled?"":void 0,...r,...(0,A.skdxPart)("radio-group","indicator",r.className),ref:t}):null});y.displayName="RadioGroupIndicator";0&&(module.exports={RadioGroup,RadioGroupIndicator,RadioGroupItem,RadioGroupProvider,useRadioGroupContext});
+'use client';
+"use strict";var ae=Object.create;var G=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ue=Object.prototype.hasOwnProperty;var le=(e,o)=>{for(var a in o)G(e,a,{get:o[a],enumerable:!0})},S=(e,o,a,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of ie(o))!ue.call(e,r)&&r!==a&&G(e,r,{get:()=>o[r],enumerable:!(t=ne(o,r))||t.enumerable});return e};var T=(e,o,a)=>(a=e!=null?ae(de(e)):{},S(o||!e||!e.__esModule?G(a,"default",{value:e,enumerable:!0}):a,e)),se=e=>S(G({},"__esModule",{value:!0}),e);var fe={};le(fe,{RadioGroup:()=>k,RadioGroupIndicator:()=>v,RadioGroupItem:()=>g,RadioGroupProvider:()=>W,RadioItemProvider:()=>O,useRadioGroupContext:()=>b,useRadioItemContext:()=>x});module.exports=se(fe);var p=T(require("react"),1),U=require("../utils/createContext.cjs"),Y=require("../utils/declaredChildren.cjs"),C=require("../utils/formControl.cjs"),z=require("../utils/part.cjs"),h=require("../utils/primitive.cjs"),J=require("../utils/useControllableState.cjs"),Q=require("../utils/useRovingFocus.cjs");var q=require("../utils/part.cjs"),K=require("../utils/primitive.cjs");var F=T(require("react"),1),L=require("../utils/createContext.cjs"),w=require("../utils/hiddenInput.cjs"),M=require("../utils/part.cjs"),u=require("../utils/primitive.cjs"),A=require("../utils/useRovingFocus.cjs");var R=require("react/jsx-runtime"),[O,x]=(0,L.createSafeContext)("RadioGroupItem"),g=({value:e,disabled:o,ref:a,...t})=>{let r=b("RadioGroupItem"),n=r.value===e,d=r.disabled||o||!1,l=F.useRef(!1),y=n||r.value==null&&r.firstEnabledValue===e;return(0,R.jsxs)(O,{checked:n,disabled:d,children:[(0,R.jsx)(u.Primitive.button,{type:"button",role:"radio","aria-checked":n,"aria-disabled":d||void 0,"data-state":n?"checked":"unchecked","data-disabled":d?"":void 0,"data-value":e,disabled:d,tabIndex:(0,A.rovingTabIndex)(r.value!=null||r.firstEnabledValue!==null,y,d),...t,...(0,M.skdxPart)("radio-group","item",t.className),ref:a,onClick:(0,u.composeEventHandlers)(t.onClick,i=>{let m=i.detail===0?"keyboard":"pointer";!n&&!r.readOnly&&r.onValueChange(e,m)}),onPointerDown:(0,u.useComposedEventHandlers)(t.onPointerDown,()=>{l.current=!0}),onBlur:(0,u.useComposedEventHandlers)(t.onBlur,()=>{l.current=!1}),onFocus:(0,u.useComposedEventHandlers)(t.onFocus,i=>{if(n||r.readOnly)return;if(l.current){r.onValueChange(e,"pointer");return}let m=i.relatedTarget;m?.getAttribute("role")==="radio"&&m.closest('[role="radiogroup"]')===i.currentTarget.closest('[role="radiogroup"]')&&r.onValueChange(e,"keyboard")}),onKeyDown:(0,u.composeEventHandlers)(t.onKeyDown,i=>{i.key==="Enter"&&i.preventDefault()})}),r.name?(0,R.jsx)(w.HiddenInput,{type:"radio",name:r.name,value:e,form:r.form,checked:n,required:r.required,disabled:d}):null]})};g.displayName="RadioGroupItem";var _=require("react/jsx-runtime"),v=({forceMount:e,ref:o,...a})=>{let t=x("RadioGroupIndicator");return e||t.checked?(0,_.jsx)(K.Primitive.span,{"data-state":t.checked?"checked":"unchecked","data-disabled":t.disabled?"":void 0,...a,...(0,q.skdxPart)("radio-group","indicator",a.className),ref:o}):null};v.displayName="RadioGroupIndicator";var I=require("react/jsx-runtime");function B({options:e=[]}){return e.map(o=>(0,I.jsxs)(g,{value:o.value,disabled:o.disabled,children:[(0,I.jsx)(v,{}),o.label]},o.value))}var V=require("react/jsx-runtime"),pe='input[type="radio"]',me=new Set(["RadioGroupItem","RadioCard","RadioCardRoot"]);function ce(e){let o=null;return(0,Y.forEachDeclaredElement)(e,(a,t)=>{o!==null||!me.has(a??"")||t.disabled===!0||typeof t.value!="string"||(o=t.value)}),o}var[W,b]=(0,U.createSafeContext)("RadioGroup"),k=({value:e,defaultValue:o,onValueChange:a,name:t,form:r,required:n=!1,disabled:d=!1,readOnly:l=!1,invalid:y=!1,orientation:i="both",loop:m=!0,options:D,children:X,ref:Z,...E})=>{let H=X??B({options:D}),P=p.useRef({previousValue:null,reason:"programmatic"}),[c,N]=(0,J.useControllableState)({prop:e,defaultProp:o,onChange:s=>{s!=null&&a?.({value:s,...P.current})}}),$=(0,Q.useRovingFocus)({orientation:i,loop:m,itemSelector:'[role="radio"]'}),f=p.useRef(null),[j,ee]=p.useState(null),oe=j??ce(H);(0,C.useFormValidityHandle)(Z,f,{get current(){return f.current?.querySelector(pe)??null}});let re=(s,te)=>{(c??null)!==s&&(P.current={previousValue:c??null,reason:te},N(s))};return(0,C.useFormReset)(f,()=>{P.current={previousValue:c??null,reason:"programmatic"},N(o)},r),p.useLayoutEffect(()=>{if(c!=null)return;let s=f.current?.querySelector('[role="radio"]:not([disabled])');ee(s?.getAttribute("data-value")??null)},[c]),(0,V.jsx)(W,{name:t,form:r,value:c,required:n,disabled:d,readOnly:l,onValueChange:re,firstEnabledValue:oe,children:(0,V.jsx)(h.Primitive.div,{role:"radiogroup","aria-required":n||void 0,"aria-readonly":l||void 0,"aria-invalid":y?!0:void 0,"data-disabled":d?"":void 0,"data-readonly":l?"":void 0,"data-invalid":y?"":void 0,"data-orientation":i,...E,...(0,z.skdxPart)("radio-group","root",E.className),ref:f,onKeyDown:(0,h.composeEventHandlers)(E.onKeyDown,$),children:H})})};k.displayName="RadioGroup";0&&(module.exports={RadioGroup,RadioGroupIndicator,RadioGroupItem,RadioGroupProvider,RadioItemProvider,useRadioGroupContext,useRadioItemContext});

package/dist/radio-group/RadioGroup.d.cts

@@ -1,32 +1,29 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.cjs';
 import type { RadioGroupContextValue, RadioGroupProps } from './types.cjs';
-export declare const RadioGroupProvider: {
-    (props: RadioGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useRadioGroupContext: (consumerName: string) => RadioGroupContextValue;
+export declare const RadioGroupProvider: React.FC<RadioGroupContextValue & {
+    children: React.ReactNode;
+}>, useRadioGroupContext: (consumerName: string) => RadioGroupContextValue;
 /**
- * A single-selection group of radio buttons. Renders `role="radiogroup"`
- * with `aria-required`, `data-disabled`, `data-orientation`, and
- * `aria-invalid`/`data-invalid` when `invalid` is set. Manages roving
- * tabindex and arrow-key/Home/End navigation between child
- * `RadioGroupItem`s (per `orientation`/`loop`) — the currently checked item
- * (or the first enabled one, when none is checked) is the sole tab stop.
+ * A single-selection group of radio buttons with roving-tabindex arrow-key navigation.
  *
  * @example
  * ```tsx
- * <RadioGroup defaultValue="comfortable" name="density">
- *   <RadioGroupItem value="compact">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- *   <RadioGroupItem value="comfortable">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- *   <RadioGroupItem value="spacious">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- * </RadioGroup>
+ * <RadioGroup
+ *   defaultValue="comfortable"
+ *   name="density"
+ *   aria-label="Density"
+ *   options={[
+ *     { value: 'compact', label: 'Compact' },
+ *     { value: 'comfortable', label: 'Comfortable' },
+ *     { value: 'spacious', label: 'Spacious' },
+ *   ]}
+ * />
  * ```
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: {
+    ({ value: valueProp, defaultValue, onValueChange, name, form, required, disabled, readOnly, invalid, orientation, loop, options, children, ref: forwardedRef, ...props }: Omit<RadioGroupProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/RadioGroup.d.ts

@@ -1,32 +1,29 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.js';
 import type { RadioGroupContextValue, RadioGroupProps } from './types.js';
-export declare const RadioGroupProvider: {
-    (props: RadioGroupContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useRadioGroupContext: (consumerName: string) => RadioGroupContextValue;
+export declare const RadioGroupProvider: React.FC<RadioGroupContextValue & {
+    children: React.ReactNode;
+}>, useRadioGroupContext: (consumerName: string) => RadioGroupContextValue;
 /**
- * A single-selection group of radio buttons. Renders `role="radiogroup"`
- * with `aria-required`, `data-disabled`, `data-orientation`, and
- * `aria-invalid`/`data-invalid` when `invalid` is set. Manages roving
- * tabindex and arrow-key/Home/End navigation between child
- * `RadioGroupItem`s (per `orientation`/`loop`) — the currently checked item
- * (or the first enabled one, when none is checked) is the sole tab stop.
+ * A single-selection group of radio buttons with roving-tabindex arrow-key navigation.
  *
  * @example
  * ```tsx
- * <RadioGroup defaultValue="comfortable" name="density">
- *   <RadioGroupItem value="compact">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- *   <RadioGroupItem value="comfortable">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- *   <RadioGroupItem value="spacious">
- *     <RadioGroupIndicator />
- *   </RadioGroupItem>
- * </RadioGroup>
+ * <RadioGroup
+ *   defaultValue="comfortable"
+ *   name="density"
+ *   aria-label="Density"
+ *   options={[
+ *     { value: 'compact', label: 'Compact' },
+ *     { value: 'comfortable', label: 'Comfortable' },
+ *     { value: 'spacious', label: 'Spacious' },
+ *   ]}
+ * />
  * ```
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: {
+    ({ value: valueProp, defaultValue, onValueChange, name, form, required, disabled, readOnly, invalid, orientation, loop, options, children, ref: forwardedRef, ...props }: Omit<RadioGroupProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/RadioGroup.js

@@ -1 +1,2 @@
-import*as d from"react";import{useComposedRefs as T}from"../utils/composeRefs.js";import{createSafeContext as w}from"../utils/createContext.js";import{useFormReset as H}from"../utils/formControl.js";import{skdxPart as S}from"../utils/part.js";import{composeEventHandlers as D,Primitive as L}from"../utils/primitive.js";import{useControllableState as M}from"../utils/useControllableState.js";import{useRovingFocus as N}from"../utils/useRovingFocus.js";import{jsx as b}from"react/jsx-runtime";var[F,G]=w("RadioGroup"),K=d.forwardRef(({value:o,defaultValue:i,onValueChange:t,name:n,required:e=!1,disabled:r=!1,invalid:a=!1,orientation:l="both",loop:u=!0,...s},m)=>{let[p,R]=M({prop:o,defaultProp:i,onChange:t}),P=N({orientation:l,loop:u,itemSelector:'[role="radio"]'}),c=d.useRef(null),k=T(m,c),[C,E]=d.useState(null);return H(c,()=>R(i)),d.useLayoutEffect(()=>{if(p!==void 0)return;let V=c.current?.querySelector('[role="radio"]:not([disabled])');E(V?.getAttribute("data-value")??null)},[p]),b(F,{name:n,value:p,required:e,disabled:r,onValueChange:R,firstEnabledValue:C,children:b(L.div,{role:"radiogroup","aria-required":e||void 0,"aria-invalid":a?!0:void 0,"data-disabled":r?"":void 0,"data-invalid":a?"":void 0,"data-orientation":l,...s,...S("radio-group","root",s.className),ref:k,onKeyDown:D(s.onKeyDown,P)})})});K.displayName="RadioGroup";import*as I from"react";import{createSafeContext as q}from"../utils/createContext.js";import{HiddenInput as A}from"../utils/hiddenInput.js";import{skdxPart as B}from"../utils/part.js";import{composeEventHandlers as f,Primitive as z}from"../utils/primitive.js";import{rovingTabIndex as J}from"../utils/useRovingFocus.js";import{jsx as v,jsxs as Q}from"react/jsx-runtime";var[O,h]=q("RadioGroupItem"),x=I.forwardRef(({value:o,disabled:i,...t},n)=>{let e=G("RadioGroupItem"),r=e.value===o,a=e.disabled||i||!1,l=r||e.value===void 0&&e.firstEnabledValue===o;return Q(O,{checked:r,disabled:a,children:[v(z.button,{type:"button",role:"radio","aria-checked":r,"data-state":r?"checked":"unchecked","data-disabled":a?"":void 0,"data-value":o,disabled:a,tabIndex:J(e.value!==void 0||e.firstEnabledValue!==null,l,a),...t,...B("radio-group","item",t.className),ref:n,onClick:f(t.onClick,()=>{r||e.onValueChange(o)}),onFocus:f(t.onFocus,u=>{let s=u.relatedTarget,m=s?.getAttribute("role")==="radio"&&s.closest('[role="radiogroup"]')===u.currentTarget.closest('[role="radiogroup"]');!r&&m&&e.onValueChange(o)}),onKeyDown:f(t.onKeyDown,u=>{u.key==="Enter"&&u.preventDefault()})}),e.name&&v(A,{type:"radio",name:e.name,value:o,checked:r,required:e.required,disabled:a})]})});x.displayName="RadioGroupItem";import*as y from"react";import{skdxPart as U}from"../utils/part.js";import{Primitive as W}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var g=y.forwardRef(({forceMount:o,...i},t)=>{let n=h("RadioGroupIndicator");return o||n.checked?X(W.span,{"data-state":n.checked?"checked":"unchecked","data-disabled":n.disabled?"":void 0,...i,...U("radio-group","indicator",i.className),ref:t}):null});g.displayName="RadioGroupIndicator";export{K as RadioGroup,g as RadioGroupIndicator,x as RadioGroupItem,F as RadioGroupProvider,G as useRadioGroupContext};
+'use client';
+import*as s from"react";import{createSafeContext as Z}from"../utils/createContext.js";import{forEachDeclaredElement as $}from"../utils/declaredChildren.js";import{useFormReset as j,useFormValidityHandle as ee}from"../utils/formControl.js";import{skdxPart as oe}from"../utils/part.js";import{composeEventHandlers as re,Primitive as te}from"../utils/primitive.js";import{useControllableState as ae}from"../utils/useControllableState.js";import{useRovingFocus as ne}from"../utils/useRovingFocus.js";import{skdxPart as z}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import*as x from"react";import{createSafeContext as O}from"../utils/createContext.js";import{HiddenInput as q}from"../utils/hiddenInput.js";import{skdxPart as K}from"../utils/part.js";import{composeEventHandlers as E,Primitive as _,useComposedEventHandlers as G}from"../utils/primitive.js";import{rovingTabIndex as B}from"../utils/useRovingFocus.js";import{jsx as P,jsxs as Y}from"react/jsx-runtime";var[U,V]=O("RadioGroupItem"),g=({value:r,disabled:t,ref:d,...o})=>{let e=b("RadioGroupItem"),a=e.value===r,i=e.disabled||t||!1,u=x.useRef(!1),f=a||e.value==null&&e.firstEnabledValue===r;return Y(U,{checked:a,disabled:i,children:[P(_.button,{type:"button",role:"radio","aria-checked":a,"aria-disabled":i||void 0,"data-state":a?"checked":"unchecked","data-disabled":i?"":void 0,"data-value":r,disabled:i,tabIndex:B(e.value!=null||e.firstEnabledValue!==null,f,i),...o,...K("radio-group","item",o.className),ref:d,onClick:E(o.onClick,n=>{let p=n.detail===0?"keyboard":"pointer";!a&&!e.readOnly&&e.onValueChange(r,p)}),onPointerDown:G(o.onPointerDown,()=>{u.current=!0}),onBlur:G(o.onBlur,()=>{u.current=!1}),onFocus:G(o.onFocus,n=>{if(a||e.readOnly)return;if(u.current){e.onValueChange(r,"pointer");return}let p=n.relatedTarget;p?.getAttribute("role")==="radio"&&p.closest('[role="radiogroup"]')===n.currentTarget.closest('[role="radiogroup"]')&&e.onValueChange(r,"keyboard")}),onKeyDown:E(o.onKeyDown,n=>{n.key==="Enter"&&n.preventDefault()})}),e.name?P(q,{type:"radio",name:e.name,value:r,form:e.form,checked:a,required:e.required,disabled:i}):null]})};g.displayName="RadioGroupItem";import{jsx as Q}from"react/jsx-runtime";var v=({forceMount:r,ref:t,...d})=>{let o=V("RadioGroupIndicator");return r||o.checked?Q(J.span,{"data-state":o.checked?"checked":"unchecked","data-disabled":o.disabled?"":void 0,...d,...z("radio-group","indicator",d.className),ref:t}):null};v.displayName="RadioGroupIndicator";import{jsx as W,jsxs as X}from"react/jsx-runtime";function k({options:r=[]}){return r.map(t=>X(g,{value:t.value,disabled:t.disabled,children:[W(v,{}),t.label]},t.value))}import{jsx as D}from"react/jsx-runtime";var ie='input[type="radio"]',de=new Set(["RadioGroupItem","RadioCard","RadioCardRoot"]);function ue(r){let t=null;return $(r,(d,o)=>{t!==null||!de.has(d??"")||o.disabled===!0||typeof o.value!="string"||(t=o.value)}),t}var[le,b]=Z("RadioGroup"),H=({value:r,defaultValue:t,onValueChange:d,name:o,form:e,required:a=!1,disabled:i=!1,readOnly:u=!1,invalid:f=!1,orientation:n="both",loop:p=!0,options:I,children:N,ref:S,...R})=>{let C=N??k({options:I}),y=s.useRef({previousValue:null,reason:"programmatic"}),[m,h]=ae({prop:r,defaultProp:t,onChange:l=>{l!=null&&d?.({value:l,...y.current})}}),T=ne({orientation:n,loop:p,itemSelector:'[role="radio"]'}),c=s.useRef(null),[F,L]=s.useState(null),w=F??ue(C);ee(S,c,{get current(){return c.current?.querySelector(ie)??null}});let M=(l,A)=>{(m??null)!==l&&(y.current={previousValue:m??null,reason:A},h(l))};return j(c,()=>{y.current={previousValue:m??null,reason:"programmatic"},h(t)},e),s.useLayoutEffect(()=>{if(m!=null)return;let l=c.current?.querySelector('[role="radio"]:not([disabled])');L(l?.getAttribute("data-value")??null)},[m]),D(le,{name:o,form:e,value:m,required:a,disabled:i,readOnly:u,onValueChange:M,firstEnabledValue:w,children:D(te.div,{role:"radiogroup","aria-required":a||void 0,"aria-readonly":u||void 0,"aria-invalid":f?!0:void 0,"data-disabled":i?"":void 0,"data-readonly":u?"":void 0,"data-invalid":f?"":void 0,"data-orientation":n,...R,...oe("radio-group","root",R.className),ref:c,onKeyDown:re(R.onKeyDown,T),children:C})})};H.displayName="RadioGroup";export{H as RadioGroup,v as RadioGroupIndicator,g as RadioGroupItem,le as RadioGroupProvider,U as RadioItemProvider,b as useRadioGroupContext,V as useRadioItemContext};

package/dist/radio-group/RadioGroupAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { RadioGroupOption } from './types.cjs';
+/**
+ * The anatomy a {@link RadioGroup} draws from `options`: one `RadioGroupItem` per entry,
+ * holding its `RadioGroupIndicator` and its label text.
+ *
+ * @internal
+ */
+export declare function RadioGroupAnatomy({ options, }: {
+    options?: RadioGroupOption[] | undefined;
+}): React.ReactNode;

package/dist/radio-group/RadioGroupAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { RadioGroupOption } from './types.js';
+/**
+ * The anatomy a {@link RadioGroup} draws from `options`: one `RadioGroupItem` per entry,
+ * holding its `RadioGroupIndicator` and its label text.
+ *
+ * @internal
+ */
+export declare function RadioGroupAnatomy({ options, }: {
+    options?: RadioGroupOption[] | undefined;
+}): React.ReactNode;

package/dist/radio-group/RadioGroupIndicator.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { RadioGroupIndicatorProps } from './types.cjs';
 /**
- * The visual mark (e.g. a dot) shown inside a checked {@link RadioGroupItem}.
- * Renders `<span data-state data-disabled>` mirroring the parent item's
- * state. Unmounts when unchecked unless `forceMount` is set.
+ * Visual mark inside a checked {@link RadioGroupItem} that unmounts unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { RadioGroupIndicatorProps } from './types.cjs';
  * </RadioGroupItem>
  * ```
  */
-export declare const RadioGroupIndicator: React.ForwardRefExoticComponent<Omit<RadioGroupIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioGroupIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: RadioGroupIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/RadioGroupIndicator.d.ts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { RadioGroupIndicatorProps } from './types.js';
 /**
- * The visual mark (e.g. a dot) shown inside a checked {@link RadioGroupItem}.
- * Renders `<span data-state data-disabled>` mirroring the parent item's
- * state. Unmounts when unchecked unless `forceMount` is set.
+ * Visual mark inside a checked {@link RadioGroupItem} that unmounts unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -12,4 +10,7 @@ import type { RadioGroupIndicatorProps } from './types.js';
  * </RadioGroupItem>
  * ```
  */
-export declare const RadioGroupIndicator: React.ForwardRefExoticComponent<Omit<RadioGroupIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioGroupIndicator: {
+    ({ forceMount, ref: forwardedRef, ...props }: RadioGroupIndicatorProps): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/RadioGroupItem.d.cts

@@ -1,20 +1,10 @@
 import * as React from 'react';
 import type { RadioGroupItemProps, RadioItemContextValue } from './types.cjs';
-export declare const RadioItemProvider: {
-    (props: RadioItemContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useRadioItemContext: (consumerName: string) => RadioItemContextValue;
+export declare const RadioItemProvider: React.FC<RadioItemContextValue & {
+    children: React.ReactNode;
+}>, useRadioItemContext: (consumerName: string) => RadioItemContextValue;
 /**
- * A single radio button within a {@link RadioGroup}. Renders `role="radio"`
- * with `aria-checked`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled`, and `data-value`. Selects on click, and also selects on
- * focus (matching the WAI-ARIA radio group pattern where arrow-key
- * navigation selects as it moves). Only tabbable when checked, or when
- * nothing in the group is checked and it's the first enabled item. When the
- * group has a `name`, also renders a visually-hidden native
- * `<input type="radio">` for real form submission.
+ * A single radio button within a {@link RadioGroup}, selecting on click or arrow-key focus.
  *
  * @example
  * ```tsx
@@ -28,4 +18,7 @@ export declare const RadioItemProvider: {
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioGroupItem: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: RadioGroupItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/RadioGroupItem.d.ts

@@ -1,20 +1,10 @@
 import * as React from 'react';
 import type { RadioGroupItemProps, RadioItemContextValue } from './types.js';
-export declare const RadioItemProvider: {
-    (props: RadioItemContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useRadioItemContext: (consumerName: string) => RadioItemContextValue;
+export declare const RadioItemProvider: React.FC<RadioItemContextValue & {
+    children: React.ReactNode;
+}>, useRadioItemContext: (consumerName: string) => RadioItemContextValue;
 /**
- * A single radio button within a {@link RadioGroup}. Renders `role="radio"`
- * with `aria-checked`, `data-state` (`'checked'` / `'unchecked'`),
- * `data-disabled`, and `data-value`. Selects on click, and also selects on
- * focus (matching the WAI-ARIA radio group pattern where arrow-key
- * navigation selects as it moves). Only tabbable when checked, or when
- * nothing in the group is checked and it's the first enabled item. When the
- * group has a `name`, also renders a visually-hidden native
- * `<input type="radio">` for real form submission.
+ * A single radio button within a {@link RadioGroup}, selecting on click or arrow-key focus.
  *
  * @example
  * ```tsx
@@ -28,4 +18,7 @@ export declare const RadioItemProvider: {
  * </RadioGroup>
  * ```
  */
-export declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioGroupItem: {
+    ({ value, disabled: disabledProp, ref: forwardedRef, ...props }: RadioGroupItemProps): React.ReactNode;
+    displayName: string;
+};

package/dist/radio-group/index.d.cts

@@ -1,4 +1,2 @@
-export * from './RadioGroup.cjs';
-export { RadioGroupItem } from './RadioGroupItem.cjs';
-export { RadioGroupIndicator } from './RadioGroupIndicator.cjs';
-export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './types.cjs';
+export { RadioGroup, useRadioGroupContext, } from './RadioGroup.cjs';
+export type { RadioGroupProps, RadioGroupOption, RadioGroupHandle, RadioGroupChangeReason, RadioGroupValueChangeDetail, } from './types.cjs';

package/dist/radio-group/index.d.ts

@@ -1,4 +1,2 @@
-export * from './RadioGroup.js';
-export { RadioGroupItem } from './RadioGroupItem.js';
-export { RadioGroupIndicator } from './RadioGroupIndicator.js';
-export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './types.js';
+export { RadioGroup, useRadioGroupContext, } from './RadioGroup.js';
+export type { RadioGroupProps, RadioGroupOption, RadioGroupHandle, RadioGroupChangeReason, RadioGroupValueChangeDetail, } from './types.js';

package/dist/radio-group/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `RadioGroup` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from '@skdx/react/primitives/radio-group';
+ *
+ * <RadioGroup defaultValue="comfortable" name="density" aria-label="Density">
+ *   <RadioGroupItem value="compact">
+ *     <RadioGroupIndicator />
+ *     Compact
+ *   </RadioGroupItem>
+ *   <RadioGroupItem value="comfortable">
+ *     <RadioGroupIndicator />
+ *     Comfortable
+ *   </RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+export { RadioGroup } from './RadioGroup.cjs';
+export { RadioGroupItem } from './RadioGroupItem.cjs';
+export { RadioGroupIndicator } from './RadioGroupIndicator.cjs';
+export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './types.cjs';

package/dist/radio-group/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `RadioGroup` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { RadioGroup, RadioGroupIndicator, RadioGroupItem } from '@skdx/react/primitives/radio-group';
+ *
+ * <RadioGroup defaultValue="comfortable" name="density" aria-label="Density">
+ *   <RadioGroupItem value="compact">
+ *     <RadioGroupIndicator />
+ *     Compact
+ *   </RadioGroupItem>
+ *   <RadioGroupItem value="comfortable">
+ *     <RadioGroupIndicator />
+ *     Comfortable
+ *   </RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+export { RadioGroup } from './RadioGroup.js';
+export { RadioGroupItem } from './RadioGroupItem.js';
+export { RadioGroupIndicator } from './RadioGroupIndicator.js';
+export type { RadioGroupProps, RadioGroupItemProps, RadioGroupIndicatorProps } from './types.js';

package/dist/radio-group/types.d.cts

@@ -1,75 +1,140 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { Orientation } from '../utils/useRovingFocus.cjs';
-/** @internal Shared state distributed from {@link RadioGroup} to its {@link RadioGroupItem}s via context. Not part of the public API. */
+/**
+ * Why the selected item changed: keyboard arrow/Home/End, pointer click/tap,
+ * or programmatic value write.
+ */
+export type RadioGroupChangeReason = 'keyboard' | 'pointer' | 'programmatic';
+/**
+ * The payload passed to `onValueChange`, carrying the new value, prior value, and reason.
+ */
+export interface RadioGroupValueChangeDetail {
+    /** The item that is now selected. */
+    value: string;
+    /** The value selected before this change, or `null` when nothing was. */
+    previousValue: string | null;
+    /**
+     * What drove the change: `'pointer'` for a click, `'keyboard'` for the focus
+     * an arrow key/Home/End moved, `'programmatic'` for a form reset.
+     */
+    reason: RadioGroupChangeReason;
+}
+/**
+ * The forwarded ref's handle: the root `<div>` with constraint-validation
+ * methods assigned on, preserving all HTMLDivElement methods.
+ */
+export type RadioGroupHandle = HTMLDivElement & FormValidityHandle;
+/** @internal Shared state distributed from {@link RadioGroup} to its {@link RadioGroupItem}s via context. */
 export interface RadioGroupContextValue {
-    name?: string;
-    value?: string;
+    name?: string | undefined;
+    /** The group's `form` id, forwarded to every item's hidden radio input. */
+    form?: string | undefined;
+    /** `null` is the explicit empty selection; `undefined` only ever means "uncontrolled". */
+    value?: string | null | undefined;
     required: boolean;
     disabled: boolean;
-    onValueChange: (value: string) => void;
+    /** Frozen but not disabled: items keep their tab stop and refuse to change the value. */
+    readOnly: boolean;
+    /** Selects `value` and reports it, tagged with what drove the selection. */
+    onValueChange: (value: string, reason: RadioGroupChangeReason) => void;
     /** Fallback single tab stop when no item is checked yet. */
     firstEnabledValue: string | null;
 }
-/** Props for the {@link RadioGroup} root. */
-export interface RadioGroupProps extends PrimitivePropsWithRef<'div'> {
+/**
+ * Props for the {@link RadioGroup} root, with `defaultValue` redeclared to accept `null`.
+ */
+export interface RadioGroupProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue'> {
+    /**
+     * The radios rendered from data, one derived `RadioGroupItem` each; ignored when `children` is given.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: RadioGroupOption[] | undefined;
     /**
-     * Selected item's value, for controlled usage. Pair with `onValueChange`.
+     * Selected item's value for controlled usage; `null` is explicit empty selection, `undefined` is uncontrolled.
      * @default undefined — uncontrolled, tracks its own selected value internally.
      */
-    value?: string;
+    value?: string | null | undefined;
     /**
-     * Initially selected item's value, for uncontrolled usage.
+     * Initially selected item's value for uncontrolled usage; `null` and `undefined` both start unselected.
      * @default undefined — no item selected until the user picks one.
      */
-    defaultValue?: string;
+    defaultValue?: string | null | undefined;
     /**
-     * Fires with the new value whenever the selected item changes, controlled or not.
+     * Fires when the selected item changes, with the new value, prior value, and reason; re-selecting emits nothing.
      * @default undefined — no-op if omitted.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((detail: RadioGroupValueChangeDetail) => void) | undefined;
     /**
      * Name for native form participation via a hidden input rendered by each item.
      * @default undefined — no hidden input rendered.
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * Marks the group as required for native form validation.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
+    /**
+     * Id of the `<form>` that owns this group, for one rendered outside it (e.g. in a portal).
+     * @default undefined — the group belongs to its nearest ancestor `<form>`, if any.
+     */
+    form?: string | undefined;
     /**
      * Disables every item in the group.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+    /**
+     * Freezes the selection without freezing the group: focus and arrow keys still move, but `value` cannot change.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
     /**
      * Marks the group as invalid, exposed as `aria-invalid`/`data-invalid` on
      * the `role="radiogroup"` root.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
-     * Layout axis for arrow-key roving focus between items, exposed as
-     * `data-orientation`. `'both'` responds to all four arrow keys.
+     * Layout axis for arrow-key roving focus between items; `'both'` responds to all four arrow keys.
      * @default 'both'
      */
-    orientation?: Orientation;
+    orientation?: Orientation | undefined;
     /**
      * Whether arrow-key navigation wraps from the last item back to the first
      * (and vice versa).
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
 }
-/** @internal Shared state distributed from a {@link RadioGroupItem} to its {@link RadioGroupIndicator} via context. Not part of the public API. */
+/** @internal Shared state distributed from a {@link RadioGroupItem} to its {@link RadioGroupIndicator} via context. */
 export interface RadioItemContextValue {
     checked: boolean;
     disabled: boolean;
 }
+/** One entry of {@link RadioGroupProps.options} — a single radio. */
+export interface RadioGroupOption {
+    /** Unique identifier compared against the group's selected `value`. */
+    value: string;
+    /** Text rendered inside the derived `RadioGroupItem`, which is what names it. */
+    label: React.ReactNode;
+    /**
+     * Prevents this radio from being selected and removes it from the roving order.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+}
 /** Props for a single {@link RadioGroupItem}. */
 export interface RadioGroupItemProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier compared against the group's selected `value`. */
     value: string;
+    /**
+     * Prevents this radio from being selected; when set, ORs with group's `disabled`.
+     * @default false
+     */
+    disabled?: boolean | undefined;
 }
 /** Props for a {@link RadioGroupIndicator}, the visual mark shown when its item is checked. */
 export interface RadioGroupIndicatorProps extends PrimitivePropsWithRef<'span'> {
@@ -77,5 +142,5 @@ export interface RadioGroupIndicatorProps extends PrimitivePropsWithRef<'span'>
      * Keep mounted regardless of state (for exit animations).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }