@skdx/react 0.26.0

package/dist/qr-code/types.d.cts

@@ -0,0 +1,92 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { ErrorCorrectionLevel } from './encoder.cjs';
+/**
+ * Error-correction level, in ascending order of redundancy: `'L'` ≈ 7% of the
+ * symbol recoverable, `'M'` ≈ 15%, `'Q'` ≈ 25%, `'H'` ≈ 30%.
+ */
+export type QrCodeErrorCorrection = ErrorCorrectionLevel;
+/** @internal Encoded matrix distributed from {@link QrCode} to its parts via context. Not part of the public API. */
+export interface QrCodeContextValue {
+    /** The encoded symbol, indexed `[row][column]`; `true` is a dark module. */
+    matrix: boolean[][];
+    /** Modules along one edge — `4 × version + 17`, and the `viewBox` extent. */
+    size: number;
+    /** The encoded payload, so parts can label themselves without re-threading the prop. */
+    value: string;
+}
+/** Props for the {@link QrCode} root. */
+export interface QrCodeProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * The payload to encode — a URL, a phone number, a Wi-Fi credential string.
+     * Encoded as UTF-8 bytes, so any string is valid input; only its *length*
+     * can push the symbol past capacity.
+     */
+    value: string;
+    /**
+     * Error-correction level. Higher levels survive more damage, at the cost of
+     * a denser symbol for the same payload.
+     *
+     * **A logo overlay requires `'H'`, or the code stops scanning.** Anything
+     * painted over the centre destroys the modules underneath it, and only `'H'`
+     * carries enough redundancy (~30%) to reconstruct them. `QrCodeOverlay` does
+     * not raise the level for you — covering an `'M'` symbol produces a code that
+     * looks right and scans in your hand, then fails on a customer's older phone
+     * in poor light.
+     * @default 'M'
+     */
+    errorCorrection?: QrCodeErrorCorrection;
+    /**
+     * Force a symbol version (1–40), fixing the module count at `4 × version + 17`.
+     * Useful when a set of codes must all render at the same density.
+     *
+     * A version too small for `value` is an encode failure, not a silent upgrade —
+     * see `onEncodeError`.
+     * @default undefined — the smallest version whose capacity fits `value`.
+     */
+    version?: number;
+    /**
+     * Encoding mode. `'byte'` is the only value today; the prop exists so numeric,
+     * alphanumeric and Kanji modes can be added later without a breaking change.
+     * @default 'byte'
+     */
+    encoding?: 'byte';
+    /**
+     * Fires when `value` cannot be encoded — it exceeds the capacity of version 40
+     * at the chosen level, or of the `version` you pinned, or `version` is outside
+     * 1–40. The root renders nothing in that case rather than showing a broken
+     * symbol, so this callback is the only signal that anything went wrong.
+     * @default undefined — the failure is silent.
+     */
+    onEncodeError?: (error: Error) => void;
+    /**
+     * Render `value` as visually hidden text inside the root, so a screen-reader
+     * user reaches the destination without a camera. A QR code is otherwise a
+     * dead end to anyone who cannot point a phone at it.
+     *
+     * Set to `false` only when you already render the value (or an equivalent
+     * link) yourself — otherwise it is announced twice.
+     * @default true
+     */
+    hiddenLabel?: boolean;
+}
+/** Props for {@link QrCodeFrame}, the `<svg>` host. */
+export interface QrCodeFrameProps extends PrimitivePropsWithRef<'svg'> {
+}
+/** Props for {@link QrCodePattern}, the single `<path>` carrying every dark module. */
+export interface QrCodePatternProps extends React.ComponentPropsWithRef<'path'> {
+}
+/** Props for {@link QrCodeOverlay}, the centred slot for a logo. */
+export interface QrCodeOverlayProps extends React.ComponentPropsWithRef<'g'> {
+    /**
+     * Edge length of the overlay box, **in module units** — the same coordinate
+     * space as the `viewBox`, so `8` is eight modules wide however large the
+     * symbol renders. Children draw into a `size` × `size` box with its own
+     * origin at `(0, 0)`.
+     *
+     * Keep it under roughly a fifth of the symbol's edge: a larger patch damages
+     * more modules than even `'H'` error correction can reconstruct.
+     * @default 7 — the width of a finder pattern, which reads as deliberate at any version.
+     */
+    size?: number;
+}

package/dist/qr-code/types.d.ts

@@ -0,0 +1,92 @@
+import type * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { ErrorCorrectionLevel } from './encoder.js';
+/**
+ * Error-correction level, in ascending order of redundancy: `'L'` ≈ 7% of the
+ * symbol recoverable, `'M'` ≈ 15%, `'Q'` ≈ 25%, `'H'` ≈ 30%.
+ */
+export type QrCodeErrorCorrection = ErrorCorrectionLevel;
+/** @internal Encoded matrix distributed from {@link QrCode} to its parts via context. Not part of the public API. */
+export interface QrCodeContextValue {
+    /** The encoded symbol, indexed `[row][column]`; `true` is a dark module. */
+    matrix: boolean[][];
+    /** Modules along one edge — `4 × version + 17`, and the `viewBox` extent. */
+    size: number;
+    /** The encoded payload, so parts can label themselves without re-threading the prop. */
+    value: string;
+}
+/** Props for the {@link QrCode} root. */
+export interface QrCodeProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * The payload to encode — a URL, a phone number, a Wi-Fi credential string.
+     * Encoded as UTF-8 bytes, so any string is valid input; only its *length*
+     * can push the symbol past capacity.
+     */
+    value: string;
+    /**
+     * Error-correction level. Higher levels survive more damage, at the cost of
+     * a denser symbol for the same payload.
+     *
+     * **A logo overlay requires `'H'`, or the code stops scanning.** Anything
+     * painted over the centre destroys the modules underneath it, and only `'H'`
+     * carries enough redundancy (~30%) to reconstruct them. `QrCodeOverlay` does
+     * not raise the level for you — covering an `'M'` symbol produces a code that
+     * looks right and scans in your hand, then fails on a customer's older phone
+     * in poor light.
+     * @default 'M'
+     */
+    errorCorrection?: QrCodeErrorCorrection;
+    /**
+     * Force a symbol version (1–40), fixing the module count at `4 × version + 17`.
+     * Useful when a set of codes must all render at the same density.
+     *
+     * A version too small for `value` is an encode failure, not a silent upgrade —
+     * see `onEncodeError`.
+     * @default undefined — the smallest version whose capacity fits `value`.
+     */
+    version?: number;
+    /**
+     * Encoding mode. `'byte'` is the only value today; the prop exists so numeric,
+     * alphanumeric and Kanji modes can be added later without a breaking change.
+     * @default 'byte'
+     */
+    encoding?: 'byte';
+    /**
+     * Fires when `value` cannot be encoded — it exceeds the capacity of version 40
+     * at the chosen level, or of the `version` you pinned, or `version` is outside
+     * 1–40. The root renders nothing in that case rather than showing a broken
+     * symbol, so this callback is the only signal that anything went wrong.
+     * @default undefined — the failure is silent.
+     */
+    onEncodeError?: (error: Error) => void;
+    /**
+     * Render `value` as visually hidden text inside the root, so a screen-reader
+     * user reaches the destination without a camera. A QR code is otherwise a
+     * dead end to anyone who cannot point a phone at it.
+     *
+     * Set to `false` only when you already render the value (or an equivalent
+     * link) yourself — otherwise it is announced twice.
+     * @default true
+     */
+    hiddenLabel?: boolean;
+}
+/** Props for {@link QrCodeFrame}, the `<svg>` host. */
+export interface QrCodeFrameProps extends PrimitivePropsWithRef<'svg'> {
+}
+/** Props for {@link QrCodePattern}, the single `<path>` carrying every dark module. */
+export interface QrCodePatternProps extends React.ComponentPropsWithRef<'path'> {
+}
+/** Props for {@link QrCodeOverlay}, the centred slot for a logo. */
+export interface QrCodeOverlayProps extends React.ComponentPropsWithRef<'g'> {
+    /**
+     * Edge length of the overlay box, **in module units** — the same coordinate
+     * space as the `viewBox`, so `8` is eight modules wide however large the
+     * symbol renders. Children draw into a `size` × `size` box with its own
+     * origin at `(0, 0)`.
+     *
+     * Keep it under roughly a fifth of the symbol's edge: a larger patch damages
+     * more modules than even `'H'` error correction can reconstruct.
+     * @default 7 — the width of a finder pattern, which reads as deliberate at any version.
+     */
+    size?: number;
+}

package/dist/radio-card/RadioCard.cjs

@@ -0,0 +1 @@
+"use strict";var Y=Object.create;var f=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var ae=(a,o)=>{for(var e in o)f(a,e,{get:o[e],enumerable:!0})},I=(a,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of _(o))!ee.call(a,r)&&r!==e&&f(a,r,{get:()=>o[r],enumerable:!(t=Z(o,r))||t.enumerable});return a};var c=(a,o,e)=>(e=a!=null?Y(j(a)):{},I(o||!a||!a.__esModule?f(e,"default",{value:a,enumerable:!0}):e,a)),oe=a=>I(f({},"__esModule",{value:!0}),a);var re={};ae(re,{RadioCard:()=>E,RadioCardControl:()=>P,RadioCardDescription:()=>y,RadioCardIndicator:()=>x,RadioCardLabel:()=>h,RadioCardProvider:()=>S,useRadioCardContext:()=>i});module.exports=oe(re);var d=c(require("react"),1),D=require("../radio-group/RadioGroup.cjs"),H=require("../utils/createContext.cjs"),v=require("../utils/part.cjs"),s=require("../utils/primitive.cjs"),u=require("react/jsx-runtime"),[S,i]=(0,H.createSafeContext)("RadioCard"),E=d.forwardRef(({value:a,disabled:o=!1,...e},t)=>{let r=(0,D.useRadioGroupContext)("RadioCard"),n=r.value===a,p=r.disabled||o,J=n||r.value===void 0&&r.firstEnabledValue===a,L=d.useId(),[K,O]=d.useState(!1),[Q,U]=d.useState(!1),[W,k]=d.useState(!1),m=d.useRef(!1),X=d.useCallback(()=>{p||n||r.onValueChange(a)},[p,n,r,a]);return(0,u.jsx)(S,{value:a,checked:n,disabled:p,tabStop:J,required:r.required,name:r.name,labelId:`${L}-label`,descriptionId:`${L}-description`,hasLabel:K,hasDescription:Q,setHasLabel:O,setHasDescription:U,onSelect:X,children:(0,u.jsx)(s.Primitive.label,{"data-state":n?"checked":"unchecked","data-disabled":p?"":void 0,"data-focus-visible":W?"":void 0,...e,...(0,v.skdxPart)("radio-card","root",e.className),ref:t,onPointerDown:(0,s.composeEventHandlers)(e.onPointerDown,()=>{m.current=!0}),onFocus:(0,s.composeEventHandlers)(e.onFocus,()=>{k(!m.current),m.current=!1}),onBlur:(0,s.composeEventHandlers)(e.onBlur,()=>{k(!1),m.current=!1})})})});E.displayName="RadioCard";var N=c(require("react"),1),V=require("../utils/part.cjs"),l=require("../utils/primitive.cjs"),w=require("../utils/visuallyHidden.cjs");var b=require("react/jsx-runtime"),P=N.forwardRef((a,o)=>{let e=i("RadioCardControl");return(0,b.jsx)(w.VisuallyHidden,{asChild:!0,children:(0,b.jsx)(l.Primitive.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,...(0,V.skdxPart)("radio-card","control",a.className),ref:o,onChange:(0,l.composeEventHandlers)(a.onChange,e.onSelect),onFocus:(0,l.composeEventHandlers)(a.onFocus,e.onSelect)})})});P.displayName="RadioCardControl";var F=c(require("react"),1),M=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var g=require("react/jsx-runtime"),x=F.forwardRef((a,o)=>{let e=i("RadioCardIndicator");return(0,g.jsx)(T.Primitive.span,{"aria-hidden":!0,"data-state":e.checked?"checked":"unchecked","data-disabled":e.disabled?"":void 0,...a,...(0,M.skdxPart)("radio-card","indicator",a.className),ref:o})});x.displayName="RadioCardIndicator";var R=c(require("react"),1),q=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var $=require("react/jsx-runtime"),h=R.forwardRef((a,o)=>{let e=i("RadioCardLabel"),{setHasLabel:t}=e;return R.useEffect(()=>(t(!0),()=>t(!1)),[t]),(0,$.jsx)(B.Primitive.span,{id:e.labelId,"data-disabled":e.disabled?"":void 0,...a,...(0,q.skdxPart)("radio-card","label",a.className),ref:o})});h.displayName="RadioCardLabel";var C=c(require("react"),1),G=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),y=C.forwardRef((a,o)=>{let e=i("RadioCardDescription"),{setHasDescription:t}=e;return C.useEffect(()=>(t(!0),()=>t(!1)),[t]),(0,A.jsx)(z.Primitive.span,{id:e.descriptionId,"data-disabled":e.disabled?"":void 0,...a,...(0,G.skdxPart)("radio-card","description",a.className),ref:o})});y.displayName="RadioCardDescription";0&&(module.exports={RadioCard,RadioCardControl,RadioCardDescription,RadioCardIndicator,RadioCardLabel,RadioCardProvider,useRadioCardContext});

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { RadioCardContextValue, RadioCardProps } from './types.cjs';
+export declare const RadioCardProvider: {
+    (props: RadioCardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
+ *   <RadioCard value="pro">
+ *     <RadioCardControl />
+ *     <RadioCardIndicator />
+ *     <RadioCardLabel>Pro</RadioCardLabel>
+ *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ *   </RadioCard>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { RadioCardContextValue, RadioCardProps } from './types.js';
+export declare const RadioCardProvider: {
+    (props: RadioCardContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="plan" defaultValue="pro" aria-label="Plan">
+ *   <RadioCard value="pro">
+ *     <RadioCardControl />
+ *     <RadioCardIndicator />
+ *     <RadioCardLabel>Pro</RadioCardLabel>
+ *     <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ *   </RadioCard>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioCard: React.ForwardRefExoticComponent<Omit<RadioCardProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;

package/dist/radio-card/RadioCard.js

@@ -0,0 +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};

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { RadioCardControlProps } from './types.cjs';
+/**
+ * The real `<input type="radio">` behind a {@link RadioCard}. Rendered through
+ * {@link VisuallyHidden}, **not** `display: none` or `hidden` — a removed input
+ * is out of the accessibility tree and out of the tab order, which would leave
+ * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardControl: React.ForwardRefExoticComponent<Omit<RadioCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { RadioCardControlProps } from './types.js';
+/**
+ * The real `<input type="radio">` behind a {@link RadioCard}. Rendered through
+ * {@link VisuallyHidden}, **not** `display: none` or `hidden` — a removed input
+ * is out of the accessibility tree and out of the tab order, which would leave
+ * 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.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardControl: React.ForwardRefExoticComponent<Omit<RadioCardControlProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,21 @@
+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`.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ *   <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardDescription: React.ForwardRefExoticComponent<Omit<RadioCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,21 @@
+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`.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ *   <RadioCardDescription>$20 per seat, per month.</RadioCardDescription>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardDescription: React.ForwardRefExoticComponent<Omit<RadioCardDescriptionProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +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`.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardIndicator />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardIndicator: React.ForwardRefExoticComponent<Omit<RadioCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +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`.
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardIndicator />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardIndicator: React.ForwardRefExoticComponent<Omit<RadioCardIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,21 @@
+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`.
+ *
+ * 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).
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardLabel: React.ForwardRefExoticComponent<Omit<RadioCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,21 @@
+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`.
+ *
+ * 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).
+ *
+ * @example
+ * ```tsx
+ * <RadioCard value="pro">
+ *   <RadioCardControl />
+ *   <RadioCardLabel>Pro</RadioCardLabel>
+ * </RadioCard>
+ * ```
+ */
+export declare const RadioCardLabel: React.ForwardRefExoticComponent<Omit<RadioCardLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,6 @@
+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';

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

@@ -0,0 +1,6 @@
+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';

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

@@ -0,0 +1,43 @@
+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 {
+    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;
+    required: boolean;
+    name: string | undefined;
+    labelId: string;
+    descriptionId: string;
+    /** Whether a `RadioCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    hasLabel: boolean;
+    /** Whether a `RadioCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    hasDescription: boolean;
+    setHasLabel: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
+    onSelect: () => void;
+}
+/** Props for the {@link RadioCard} root, the `<label>` whose whole surface is the hit target. */
+export interface RadioCardProps 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.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for the {@link RadioCardControl}, the real (visually hidden, still focusable) radio input. */
+export interface RadioCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {
+}
+/** Props for the {@link RadioCardIndicator}, the decorative dot or ring drawn on the card. */
+export interface RadioCardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link RadioCardLabel}, the card's title line. */
+export interface RadioCardLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link RadioCardDescription}, the supporting copy under the title. */
+export interface RadioCardDescriptionProps extends PrimitivePropsWithRef<'span'> {
+}

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

@@ -0,0 +1,43 @@
+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. */
+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;
+    required: boolean;
+    name: string | undefined;
+    labelId: string;
+    descriptionId: string;
+    /** Whether a `RadioCardLabel` is mounted, so the control only points `aria-labelledby` at an id that exists. */
+    hasLabel: boolean;
+    /** Whether a `RadioCardDescription` is mounted, so the control only points `aria-describedby` at an id that exists. */
+    hasDescription: boolean;
+    setHasLabel: (present: boolean) => void;
+    setHasDescription: (present: boolean) => void;
+    onSelect: () => void;
+}
+/** Props for the {@link RadioCard} root, the `<label>` whose whole surface is the hit target. */
+export interface RadioCardProps 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.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for the {@link RadioCardControl}, the real (visually hidden, still focusable) radio input. */
+export interface RadioCardControlProps extends Omit<PrimitivePropsWithRef<'input'>, 'checked' | 'defaultChecked' | 'type' | 'value'> {
+}
+/** Props for the {@link RadioCardIndicator}, the decorative dot or ring drawn on the card. */
+export interface RadioCardIndicatorProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link RadioCardLabel}, the card's title line. */
+export interface RadioCardLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link RadioCardDescription}, the supporting copy under the title. */
+export interface RadioCardDescriptionProps extends PrimitivePropsWithRef<'span'> {
+}

package/dist/radio-group/RadioGroup.cjs

@@ -0,0 +1 @@
+"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});

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+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;
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="comfortable" name="density">
+ *   <RadioGroupItem value="compact">
+ *     <RadioGroupIndicator />
+ *   </RadioGroupItem>
+ *   <RadioGroupItem value="comfortable">
+ *     <RadioGroupIndicator />
+ *   </RadioGroupItem>
+ *   <RadioGroupItem value="spacious">
+ *     <RadioGroupIndicator />
+ *   </RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;