@skdx/react 0.26.0 → 0.28.0

package/dist/radio-card/RadioCard.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RadioCardContextValue, RadioCardProps } from './types.cjs';
+import type { RadioCardContextValue, RadioCardProps, RadioCardRootProps } from './types.cjs';
 export declare const RadioCardProvider: {
     (props: RadioCardContextValue & {
         children: React.ReactNode;
@@ -7,35 +7,45 @@ export declare const RadioCardProvider: {
     displayName: string;
 }, useRadioCardContext: (consumerName: string) => RadioCardContextValue;
 /**
- * One card in a single-select group: a `<label>` wrapping a real, visually
- * hidden `<input type="radio">` ({@link RadioCardControl}), so the **entire
- * card surface** is the hit target through native label activation — no click
- * handler, no `role` and no key handling of its own.
- *
- * Selection state is **not** re-implemented here. The card reads the enclosing
- * {@link RadioGroup}'s context for the selected value, `name`, `required`,
- * group-level `disabled` and the roving tab stop, so a `RadioCard` and a plain
- * `RadioGroupItem` are interchangeable inside the same group and answer to the
- * same `value`/`onValueChange`. It must therefore be rendered inside a
- * `RadioGroup`; used alone it throws.
- *
- * Emits `data-state="checked" | "unchecked"`, `data-disabled` and
- * `data-focus-visible` on the root, which is the whole styling contract.
- *
- * **Nothing interactive may be nested inside the card.** The root is a
- * `<label>`, so a link or button in there is both an HTML content-model
- * violation and a real usability bug — clicking the inner control would also
- * select the card. Put actions beside the card, never inside it.
+ * Card in single-select group: `<label>` wrapping hidden radio. Entire surface
+ * is hit target. Reuses RadioGroup state (interchangeable with RadioGroupItem).
+ * Emits `data-state`/`data-disabled`/`data-focus-visible`. No `invalid` prop
+ * (lives on group). Nothing interactive may be nested inside.
  *
  * @example
  * ```tsx
+ * import { RadioCardControl, RadioCardDescription, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
  * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
- *   <RadioCard value="pro">
+ *   <RadioCardRoot value="pro">
  *     <RadioCardControl />
  *     <RadioCardIndicator />
  *     <RadioCardLabel>Pro</RadioCardLabel>
  *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
- *   </RadioCard>
+ *   </RadioCardRoot>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioCardRoot: React.ForwardRefExoticComponent<Omit<RadioCardRootProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * One card in a single-select group: the whole surface is the hit target.
+ *
+ * Given no `children` it draws the derived anatomy — the visually-hidden
+ * `RadioCardControl`, the `RadioCardIndicator`, the `RadioCardLabel` from `label`, the `RadioCardDescription` from
+ * `description`. Given children, they are rendered verbatim for full manual
+ * composition and nothing is derived; only presence is inspected, never what
+ * the children are. The card has no `Content` part, so children are the parts
+ * themselves — reach for `@skdx/react/primitives/radio-card`.
+ *
+ * Everything {@link RadioCardRoot} owns still applies: the selection is the
+ * enclosing `RadioGroup`'s, as are `name`, `required` and the roving tab stop,
+ * and the `data-state`/`data-disabled`/`data-focus-visible` hooks are unchanged.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
+ *   <RadioCard value="pro" label="Pro" description="$20 per seat, per month." />
+ *   <RadioCard value="team" label="Team" description="$50 per seat, per month." />
  * </RadioGroup>
  * ```
  */

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RadioCardContextValue, RadioCardProps } from './types.js';
+import type { RadioCardContextValue, RadioCardProps, RadioCardRootProps } from './types.js';
 export declare const RadioCardProvider: {
     (props: RadioCardContextValue & {
         children: React.ReactNode;
@@ -7,35 +7,45 @@ export declare const RadioCardProvider: {
     displayName: string;
 }, useRadioCardContext: (consumerName: string) => RadioCardContextValue;
 /**
- * One card in a single-select group: a `<label>` wrapping a real, visually
- * hidden `<input type="radio">` ({@link RadioCardControl}), so the **entire
- * card surface** is the hit target through native label activation — no click
- * handler, no `role` and no key handling of its own.
- *
- * Selection state is **not** re-implemented here. The card reads the enclosing
- * {@link RadioGroup}'s context for the selected value, `name`, `required`,
- * group-level `disabled` and the roving tab stop, so a `RadioCard` and a plain
- * `RadioGroupItem` are interchangeable inside the same group and answer to the
- * same `value`/`onValueChange`. It must therefore be rendered inside a
- * `RadioGroup`; used alone it throws.
- *
- * Emits `data-state="checked" | "unchecked"`, `data-disabled` and
- * `data-focus-visible` on the root, which is the whole styling contract.
- *
- * **Nothing interactive may be nested inside the card.** The root is a
- * `<label>`, so a link or button in there is both an HTML content-model
- * violation and a real usability bug — clicking the inner control would also
- * select the card. Put actions beside the card, never inside it.
+ * Card in single-select group: `<label>` wrapping hidden radio. Entire surface
+ * is hit target. Reuses RadioGroup state (interchangeable with RadioGroupItem).
+ * Emits `data-state`/`data-disabled`/`data-focus-visible`. No `invalid` prop
+ * (lives on group). Nothing interactive may be nested inside.
  *
  * @example
  * ```tsx
+ * import { RadioCardControl, RadioCardDescription, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
  * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
- *   <RadioCard value="pro">
+ *   <RadioCardRoot value="pro">
  *     <RadioCardControl />
  *     <RadioCardIndicator />
  *     <RadioCardLabel>Pro</RadioCardLabel>
  *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
- *   </RadioCard>
+ *   </RadioCardRoot>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioCardRoot: React.ForwardRefExoticComponent<Omit<RadioCardRootProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * One card in a single-select group: the whole surface is the hit target.
+ *
+ * Given no `children` it draws the derived anatomy — the visually-hidden
+ * `RadioCardControl`, the `RadioCardIndicator`, the `RadioCardLabel` from `label`, the `RadioCardDescription` from
+ * `description`. Given children, they are rendered verbatim for full manual
+ * composition and nothing is derived; only presence is inspected, never what
+ * the children are. The card has no `Content` part, so children are the parts
+ * themselves — reach for `@skdx/react/primitives/radio-card`.
+ *
+ * Everything {@link RadioCardRoot} owns still applies: the selection is the
+ * enclosing `RadioGroup`'s, as are `name`, `required` and the roving tab stop,
+ * and the `data-state`/`data-disabled`/`data-focus-visible` hooks are unchanged.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
+ *   <RadioCard value="pro" label="Pro" description="$20 per seat, per month." />
+ *   <RadioCard value="team" label="Team" description="$50 per seat, per month." />
  * </RadioGroup>
  * ```
  */

package/dist/radio-card/RadioCard.js

@@ -1 +1 @@
-import*as o from"react";import{useRadioGroupContext as V}from"../radio-group/RadioGroup.js";import{createSafeContext as w}from"../utils/createContext.js";import{skdxPart as F}from"../utils/part.js";import{composeEventHandlers as m,Primitive as M}from"../utils/primitive.js";import{jsx as C}from"react/jsx-runtime";var[T,i]=w("RadioCard"),g=o.forwardRef(({value:a,disabled:r=!1,...e},t)=>{let d=V("RadioCard"),s=d.value===a,n=d.disabled||r,I=s||d.value===void 0&&d.firstEnabledValue===a,f=o.useId(),[D,H]=o.useState(!1),[v,S]=o.useState(!1),[E,R]=o.useState(!1),c=o.useRef(!1),N=o.useCallback(()=>{n||s||d.onValueChange(a)},[n,s,d,a]);return C(T,{value:a,checked:s,disabled:n,tabStop:I,required:d.required,name:d.name,labelId:`${f}-label`,descriptionId:`${f}-description`,hasLabel:D,hasDescription:v,setHasLabel:H,setHasDescription:S,onSelect:N,children:C(M.label,{"data-state":s?"checked":"unchecked","data-disabled":n?"":void 0,"data-focus-visible":E?"":void 0,...e,...F("radio-card","root",e.className),ref:t,onPointerDown:m(e.onPointerDown,()=>{c.current=!0}),onFocus:m(e.onFocus,()=>{R(!c.current),c.current=!1}),onBlur:m(e.onBlur,()=>{R(!1),c.current=!1})})})});g.displayName="RadioCard";import*as P from"react";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as u,Primitive as B}from"../utils/primitive.js";import{VisuallyHidden as $}from"../utils/visuallyHidden.js";import{jsx as b}from"react/jsx-runtime";var x=P.forwardRef((a,r)=>{let e=i("RadioCardControl");return b($,{asChild:!0,children:b(B.input,{type:"radio",role:"radio",name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,tabIndex:e.tabStop?0:-1,"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-value":e.value,"data-state":e.checked?"checked":"unchecked",...a,...q("radio-card","control",a.className),ref:r,onChange:u(a.onChange,e.onSelect),onFocus:u(a.onFocus,e.onSelect)})})});x.displayName="RadioCardControl";import*as h from"react";import{skdxPart as G}from"../utils/part.js";import{Primitive as z}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var y=h.forwardRef((a,r)=>{let e=i("RadioCardIndicator");return A(z.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...a,...G("radio-card","indicator",a.className),ref:r})});y.displayName="RadioCardIndicator";import*as l from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{jsx as O}from"react/jsx-runtime";var L=l.forwardRef((a,r)=>{let e=i("RadioCardLabel"),{setHasLabel:t}=e;return l.useEffect(()=>(t(!0),()=>t(!1)),[t]),O(K.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...a,...J("radio-card","label",a.className),ref:r})});L.displayName="RadioCardLabel";import*as p from"react";import{skdxPart as Q}from"../utils/part.js";import{Primitive as U}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var k=p.forwardRef((a,r)=>{let e=i("RadioCardDescription"),{setHasDescription:t}=e;return p.useEffect(()=>(t(!0),()=>t(!1)),[t]),W(U.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...a,...Q("radio-card","description",a.className),ref:r})});k.displayName="RadioCardDescription";export{g as RadioCard,x as RadioCardControl,k as RadioCardDescription,y as RadioCardIndicator,L as RadioCardLabel,T as RadioCardProvider,i as useRadioCardContext};
+import*as d from"react";import{useRadioGroupContext as re}from"../radio-group/RadioGroup.js";import{useCardNestingWarning as te}from"../utils/cardNesting.js";import{useComposedRefs as de}from"../utils/composeRefs.js";import{createSafeContext as ie}from"../utils/createContext.js";import{hasDeclaredChild as D}from"../utils/declaredChildren.js";import{skdxPart as ne}from"../utils/part.js";import{composeEventHandlers as b,Primitive as se}from"../utils/primitive.js";import*as k from"react";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as L,Primitive as W}from"../utils/primitive.js";import{rovingTabIndex as z}from"../utils/useRovingFocus.js";import{VisuallyHidden as J}from"../utils/visuallyHidden.js";import{jsx as g}from"react/jsx-runtime";var f=k.forwardRef((o,r)=>{let e=i("RadioCardControl");return g(J,{asChild:!0,children:g(W.input,{type:"radio",role:"radio",name:e.name,value:e.value,form:e.form,checked:e.checked,required:e.required,disabled:e.disabled,tabIndex:z(e.tabStopResolved,e.tabStop,e.disabled),"aria-labelledby":e.hasLabel?e.labelId:void 0,"aria-describedby":e.hasDescription?e.descriptionId:void 0,"data-value":e.value,"data-state":e.checked?"checked":"unchecked",...o,...$("radio-card","control",o.className),ref:r,onChange:L(o.onChange,()=>e.onSelect("pointer")),onFocus:L(o.onFocus,t=>{let a=t.relatedTarget;a?.getAttribute("role")==="radio"&&a.closest('[role="radiogroup"]')===t.currentTarget.closest('[role="radiogroup"]')&&e.onSelect("keyboard")})})})});f.displayName="RadioCardControl";import*as c from"react";import{skdxPart as K}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var R=c.forwardRef((o,r)=>{let e=i("RadioCardDescription"),{setHasDescription:t}=e;return c.useEffect(()=>(t(!0),()=>t(!1)),[t]),U(Q.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...o,...K("radio-card","description",o.className),ref:r})});R.displayName="RadioCardDescription";import*as S from"react";import{skdxPart as X}from"../utils/part.js";import{Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var u=S.forwardRef((o,r)=>{let e=i("RadioCardIndicator");return Z(Y.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...o,...X("radio-card","indicator",o.className),ref:r})});u.displayName="RadioCardIndicator";import*as m from"react";import{skdxPart as _}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var C=m.forwardRef((o,r)=>{let e=i("RadioCardLabel"),{setHasLabel:t}=e;return m.useEffect(()=>(t(!0),()=>t(!1)),[t]),ee(j.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...o,..._("radio-card","label",o.className),ref:r})});C.displayName="RadioCardLabel";import{Fragment as oe,jsx as p,jsxs as ae}from"react/jsx-runtime";var v=({label:o,description:r})=>ae(oe,{children:[p(f,{}),p(u,{}),o===void 0?null:p(C,{children:o}),r===void 0?null:p(R,{children:r})]});import{jsx as y}from"react/jsx-runtime";var[le,i]=ie("RadioCard"),H=d.forwardRef(({value:o,disabled:r=!1,...e},t)=>{let a=re("RadioCard"),n=a.value===o,s=a.disabled||r,N=n||a.value==null&&a.firstEnabledValue===o,E=a.value!=null||a.firstEnabledValue!==null,h=d.useId(),[T,V]=d.useState(!1),[w,M]=d.useState(!1),F=T||D(e.children,"RadioCardLabel"),q=w||D(e.children,"RadioCardDescription"),[A,x]=d.useState(!1),l=d.useRef(!1),G=d.useCallback(B=>{s||n||a.readOnly||a.onValueChange(o,B)},[s,n,a,o]),P=d.useRef(null),O=de(t,P);return te("RadioCard",P),y(le,{value:o,checked:n,disabled:s,readOnly:a.readOnly,tabStop:N,tabStopResolved:E,required:a.required,name:a.name,form:a.form,labelId:`${h}-label`,descriptionId:`${h}-description`,hasLabel:F,hasDescription:q,setHasLabel:V,setHasDescription:M,onSelect:G,children:y(se.label,{"data-state":n?"checked":"unchecked","data-disabled":s?"":void 0,"data-focus-visible":A?"":void 0,...e,...ne("radio-card","root",e.className),ref:O,onPointerDown:b(e.onPointerDown,()=>{l.current=!0}),onFocus:b(e.onFocus,()=>{x(!l.current),l.current=!1}),onBlur:b(e.onBlur,()=>{x(!1),l.current=!1})})})});H.displayName="RadioCardRoot";var I=d.forwardRef(({label:o,description:r,children:e,...t},a)=>y(H,{...t,ref:a,children:e??v({label:o,description:r})}));I.displayName="RadioCard";export{I as RadioCard,f as RadioCardControl,R as RadioCardDescription,u as RadioCardIndicator,C as RadioCardLabel,le as RadioCardProvider,H as RadioCardRoot,i as useRadioCardContext};

package/dist/radio-card/RadioCardAnatomy.d.cts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link RadioCard} draws from `label`/`description`: the
+ * visually-hidden `RadioCardControl`, the `RadioCardIndicator`, the title line, then the
+ * supporting copy.
+ *
+ * @internal
+ */
+export declare const RadioCardAnatomy: ({ label, description, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+/**
+ * The anatomy a {@link RadioCard} draws from `label`/`description`: the
+ * visually-hidden `RadioCardControl`, the `RadioCardIndicator`, the title line, then the
+ * supporting copy.
+ *
+ * @internal
+ */
+export declare const RadioCardAnatomy: ({ label, description, }: {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+}) => React.JSX.Element;

package/dist/radio-card/RadioCardControl.d.cts

@@ -7,22 +7,22 @@ import type { RadioCardControlProps } from './types.cjs';
  * the card unusable by keyboard and silent to a screen reader. Clipped to 1×1
  * it stays focusable, announceable and submittable.
  *
- * Selects on focus, matching the WAI-ARIA radio group pattern (and
- * `RadioGroupItem`) where arrow-key navigation selects as it moves.
+ * Selects on focus only when focus arrived from a sibling radio in the same
+ * group — which is what arrow-key navigation looks like, and is where the
+ * WAI-ARIA radio group pattern puts selection. A Tab arriving from outside the
+ * group moves focus and selects nothing, exactly as `RadioGroupItem` behaves.
  *
- * Carries an explicit `role="radio"` and `data-value` even though a native
- * radio input already *has* that role: `RadioGroup` discovers its items with a
- * literal `[role="radio"]` selector — for arrow-key roving focus and for
- * picking the initial tab stop — and an implicit role does not answer a CSS
- * attribute selector. The redundancy is what lets a card and a plain
- * `RadioGroupItem` sit in the same group.
+ * Carries explicit `role="radio"` (CSS selector needs it, implicit role
+ * won't match). Lets a card and `RadioGroupItem` sit in same group.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardControl: React.ForwardRefExoticComponent<Omit<RadioCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -7,22 +7,22 @@ import type { RadioCardControlProps } from './types.js';
  * the card unusable by keyboard and silent to a screen reader. Clipped to 1×1
  * it stays focusable, announceable and submittable.
  *
- * Selects on focus, matching the WAI-ARIA radio group pattern (and
- * `RadioGroupItem`) where arrow-key navigation selects as it moves.
+ * Selects on focus only when focus arrived from a sibling radio in the same
+ * group — which is what arrow-key navigation looks like, and is where the
+ * WAI-ARIA radio group pattern puts selection. A Tab arriving from outside the
+ * group moves focus and selects nothing, exactly as `RadioGroupItem` behaves.
  *
- * Carries an explicit `role="radio"` and `data-value` even though a native
- * radio input already *has* that role: `RadioGroup` discovers its items with a
- * literal `[role="radio"]` selector — for arrow-key roving focus and for
- * picking the initial tab stop — and an implicit role does not answer a CSS
- * attribute selector. The redundancy is what lets a card and a plain
- * `RadioGroupItem` sit in the same group.
+ * Carries explicit `role="radio"` (CSS selector needs it, implicit role
+ * won't match). Lets a card and `RadioGroupItem` sit in same group.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardControl: React.ForwardRefExoticComponent<Omit<RadioCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/radio-card/RadioCardDescription.d.cts

@@ -2,20 +2,17 @@ import * as React from 'react';
 import type { RadioCardDescriptionProps } from './types.cjs';
 /**
  * Supporting copy under a {@link RadioCardLabel} — price, quota, caveat.
- * Registers itself with the card root on mount, which is what wires the
- * control's `aria-describedby` here, so the description is announced after the
- * name instead of being swallowed into it.
- *
- * Purely additive: leave it out and the control simply has no
- * `aria-describedby`.
+ * Registers with the card to wire `aria-describedby`. Optional.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardDescription, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
  *   <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardDescription: React.ForwardRefExoticComponent<Omit<RadioCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -2,20 +2,17 @@ import * as React from 'react';
 import type { RadioCardDescriptionProps } from './types.js';
 /**
  * Supporting copy under a {@link RadioCardLabel} — price, quota, caveat.
- * Registers itself with the card root on mount, which is what wires the
- * control's `aria-describedby` here, so the description is announced after the
- * name instead of being swallowed into it.
- *
- * Purely additive: leave it out and the control simply has no
- * `aria-describedby`.
+ * Registers with the card to wire `aria-describedby`. Optional.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardDescription, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
  *   <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardDescription: React.ForwardRefExoticComponent<Omit<RadioCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/radio-card/RadioCardIndicator.d.cts

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import type { RadioCardIndicatorProps } from './types.cjs';
 /**
- * The decorative dot (or empty ring) drawn on a {@link RadioCard}. Mirrors the
- * card's `data-state` and `data-disabled`.
+ * The indicator ring for a {@link RadioCard}. Mirrors the card's `data-state`
+ * and `data-disabled`.
  *
- * Unlike `RadioGroupIndicator` this stays mounted when unchecked, because on a
- * card the indicator is the *ring*, not just the dot — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make
- * a screen reader say it twice.
+ * Stays mounted when unchecked (unlike RadioGroupIndicator) because the ring
+ * is the indicator, not the dot—unmounting would collapse the layout. Hidden
+ * from screen readers since the input already announces state.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardIndicator />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardIndicator: React.ForwardRefExoticComponent<Omit<RadioCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,22 +1,22 @@
 import * as React from 'react';
 import type { RadioCardIndicatorProps } from './types.js';
 /**
- * The decorative dot (or empty ring) drawn on a {@link RadioCard}. Mirrors the
- * card's `data-state` and `data-disabled`.
+ * The indicator ring for a {@link RadioCard}. Mirrors the card's `data-state`
+ * and `data-disabled`.
  *
- * Unlike `RadioGroupIndicator` this stays mounted when unchecked, because on a
- * card the indicator is the *ring*, not just the dot — unmounting it would
- * collapse the card's layout on every deselect. It is `aria-hidden`: the real
- * `<input>` already announces the checked state, and a second copy would make
- * a screen reader say it twice.
+ * Stays mounted when unchecked (unlike RadioGroupIndicator) because the ring
+ * is the indicator, not the dot—unmounting would collapse the layout. Hidden
+ * from screen readers since the input already announces state.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardIndicator />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardIndicator: React.ForwardRefExoticComponent<Omit<RadioCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/radio-card/RadioCardLabel.d.cts

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import type { RadioCardLabelProps } from './types.cjs';
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
+ * The card's title line and the control's `aria-labelledby` target.
  *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * Renders `<span>` (not `<label>`—root is already the label). Registers on
+ * mount so the control's `aria-labelledby` points here; omit it and the control
+ * falls back to implicit labeling from the card's text.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardLabel: React.ForwardRefExoticComponent<Omit<RadioCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,21 +1,20 @@
 import * as React from 'react';
 import type { RadioCardLabelProps } from './types.js';
 /**
- * The card's title line, and the control's accessible name via
- * `aria-labelledby`.
+ * The card's title line and the control's `aria-labelledby` target.
  *
- * Renders a `<span>`, not a `<label>`: the card root is already the label, and
- * nesting a second one is invalid HTML. It registers itself with the root on
- * mount so the control only points `aria-labelledby` here while this part
- * exists — omit it and the control falls back to the native implicit label,
- * naming itself from the card's whole text content (description included).
+ * Renders `<span>` (not `<label>`—root is already the label). Registers on
+ * mount so the control's `aria-labelledby` points here; omit it and the control
+ * falls back to implicit labeling from the card's text.
  *
  * @example
  * ```tsx
- * <RadioCard value="pro">
+ * import { RadioCardControl, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioCardRoot value="pro">
  *   <RadioCardControl />
  *   <RadioCardLabel>Pro</RadioCardLabel>
- * </RadioCard>
+ * </RadioCardRoot>
  * ```
  */
 export declare const RadioCardLabel: React.ForwardRefExoticComponent<Omit<RadioCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,6 +1,2 @@
-export * from './RadioCard.cjs';
-export { RadioCardControl } from './RadioCardControl.cjs';
-export { RadioCardIndicator } from './RadioCardIndicator.cjs';
-export { RadioCardLabel } from './RadioCardLabel.cjs';
-export { RadioCardDescription } from './RadioCardDescription.cjs';
-export type { RadioCardProps, RadioCardControlProps, RadioCardIndicatorProps, RadioCardLabelProps, RadioCardDescriptionProps, } from './types.cjs';
+export { RadioCard } from './RadioCard.cjs';
+export type { RadioCardProps } from './types.cjs';

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

@@ -1,6 +1,2 @@
-export * from './RadioCard.js';
-export { RadioCardControl } from './RadioCardControl.js';
-export { RadioCardIndicator } from './RadioCardIndicator.js';
-export { RadioCardLabel } from './RadioCardLabel.js';
-export { RadioCardDescription } from './RadioCardDescription.js';
-export type { RadioCardProps, RadioCardControlProps, RadioCardIndicatorProps, RadioCardLabelProps, RadioCardDescriptionProps, } from './types.js';
+export { RadioCard } from './RadioCard.js';
+export type { RadioCardProps } from './types.js';

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

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `RadioCard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { RadioCardControl, RadioCardDescription, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioGroup name="plan" aria-label="Plan">
+ *   <RadioCardRoot value="pro">
+ *     <RadioCardControl />
+ *     <img src="/pro.svg" alt="" />
+ *     <RadioCardIndicator />
+ *     <RadioCardLabel>Pro</RadioCardLabel>
+ *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ *   </RadioCardRoot>
+ * </RadioGroup>
+ * ```
+ */
+export { RadioCardRoot } from './RadioCard.cjs';
+export { RadioCardControl } from './RadioCardControl.cjs';
+export { RadioCardIndicator } from './RadioCardIndicator.cjs';
+export { RadioCardLabel } from './RadioCardLabel.cjs';
+export { RadioCardDescription } from './RadioCardDescription.cjs';
+export type { RadioCardRootProps, RadioCardControlProps, RadioCardIndicatorProps, RadioCardLabelProps, RadioCardDescriptionProps, } from './types.cjs';

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

@@ -0,0 +1,24 @@
+/**
+ * Advanced primitives for `RadioCard` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { RadioCardControl, RadioCardDescription, RadioCardIndicator, RadioCardLabel, RadioCardRoot } from '@skdx/react/primitives/radio-card';
+ *
+ * <RadioGroup name="plan" aria-label="Plan">
+ *   <RadioCardRoot value="pro">
+ *     <RadioCardControl />
+ *     <img src="/pro.svg" alt="" />
+ *     <RadioCardIndicator />
+ *     <RadioCardLabel>Pro</RadioCardLabel>
+ *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ *   </RadioCardRoot>
+ * </RadioGroup>
+ * ```
+ */
+export { RadioCardRoot } from './RadioCard.js';
+export { RadioCardControl } from './RadioCardControl.js';
+export { RadioCardIndicator } from './RadioCardIndicator.js';
+export { RadioCardLabel } from './RadioCardLabel.js';
+export { RadioCardDescription } from './RadioCardDescription.js';
+export type { RadioCardRootProps, RadioCardControlProps, RadioCardIndicatorProps, RadioCardLabelProps, RadioCardDescriptionProps, } from './types.js';

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

@@ -1,3 +1,5 @@
+import type * as React from 'react';
+import type { RadioGroupChangeReason } from '../radio-group/types.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** @internal Shared state distributed from {@link RadioCard} to its parts via context. Not part of the public API. */
 export interface RadioCardContextValue {
@@ -6,8 +8,17 @@ export interface RadioCardContextValue {
     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,10 +27,10 @@ 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;
     /**
@@ -29,6 +40,26 @@ export interface RadioCardProps extends PrimitivePropsWithRef<'label'> {
      */
     disabled?: boolean;
 }
+/**
+ * Props for the {@link RadioCard} recipe. Renders a label with optional title
+ * and description, with a radio control wired to its value.
+ */
+export interface RadioCardProps extends Omit<RadioCardRootProps, 'asChild'> {
+    /**
+     * The card's title line, rendered into a derived `RadioCardLabel` the control names
+     * itself from with `aria-labelledby`. Ignored when `children` is given,
+     * which switches to full manual composition.
+     * @default undefined — no label is rendered, and the control falls back to the card's whole text content.
+     */
+    label?: React.ReactNode;
+    /**
+     * Supporting copy under the title, rendered into a derived `RadioCardDescription`
+     * joined to the control's `aria-describedby`. Ignored when `children` is
+     * given, which switches to full manual composition.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode;
+}
 /** Props for the {@link RadioCardControl}, the real (visually hidden, still focusable) radio input. */
 export interface RadioCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {
 }