@skdx/react 0.26.0 → 0.28.0

package/dist/split-button/types.d.ts

@@ -1,10 +1,77 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Props for the {@link SplitButton} root. */
-export interface SplitButtonProps extends PrimitivePropsWithRef<'div'> {
+/**
+ * Props for the split button root. Pass `aria-label` or `aria-labelledby` —
+ * `role="group"` is not name-from-content, so an unnamed group announces as a bare
+ * "group" to screen readers.
+ */
+export interface SplitButtonProps extends Omit<PrimitivePropsWithRef<'div'>, 'onSelect'> {
+    /**
+     * Text of the derived primary `SplitButtonAction` button.
+     * @default undefined — no action is derived.
+     */
+    label?: React.ReactNode;
+    /**
+     * The menu entries behind the derived `SplitButtonTrigger`, rendered into a
+     * `DropdownMenu`. Ignored when `children` is given, which switches to full
+     * manual composition.
+     * @default undefined — no menu is derived.
+     */
+    items?: SplitButtonItem[];
+    /**
+     * Fires when the derived primary `SplitButtonAction` is pressed.
+     * @default undefined — no-op if omitted.
+     */
+    onActionClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Fires with the menu entry that was activated.
+     * @default undefined — no-op if omitted.
+     */
+    onSelect?: (item: SplitButtonItem) => void;
+    /**
+     * Accessible name of the derived `SplitButtonTrigger`. It is a bare chevron with no
+     * text of its own, so without a name it announces as an unnamed "button, has
+     * popup menu" beside a named sibling.
+     * @default 'More options'
+     */
+    menuLabel?: string;
 }
-/** Props for {@link SplitButtonAction}, the primary action button. */
+/** One entry of {@link SplitButtonProps.items} — a single menu action. */
+export interface SplitButtonItem {
+    /** Unique identifier for this entry, reported back through `onSelect`. */
+    value: string;
+    /** Text rendered inside the derived menu item. */
+    label: string;
+    /**
+     * Marks the entry `aria-disabled` and blocks selection, leaving it focusable.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for the split button's primary action button.
+ */
 export interface SplitButtonActionProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Disables the primary action independently of the trigger half. To disable
+     * the whole control, wrap it in a `<fieldset disabled>` or bind one boolean
+     * to both halves — SplitButton renders neither button and so cannot own a
+     * root-level `disabled`.
+     * @default false
+     */
+    disabled?: boolean;
 }
 /** Props for {@link SplitButtonTrigger}, the small button that opens an attached menu. */
 export interface SplitButtonTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Disables opening the menu independently of the action half.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible name for the trigger, a bare chevron with no text of its own. Without
+     * one it announces as an unnamed "button, has popup menu" beside a named sibling.
+     * @default undefined
+     */
+    'aria-label'?: string;
 }

package/dist/steps/Steps.cjs

@@ -1 +1 @@
-"use strict";var _=Object.create;var x=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var tt=Object.getPrototypeOf,et=Object.prototype.hasOwnProperty;var st=(t,e)=>{for(var s in e)x(t,s,{get:e[s],enumerable:!0})},A=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of j(e))!et.call(t,r)&&r!==s&&x(t,r,{get:()=>e[r],enumerable:!(a=$(e,r))||a.enumerable});return t};var v=(t,e,s)=>(s=t!=null?_(tt(t)):{},A(e||!t||!t.__esModule?x(s,"default",{value:t,enumerable:!0}):s,t)),rt=t=>A(x({},"__esModule",{value:!0}),t);var at={};st(at,{Steps:()=>z,StepsItem:()=>k,StepsProvider:()=>D,StepsTrigger:()=>N,canActivateStep:()=>O,stepStatus:()=>S,useStepsContext:()=>f});module.exports=rt(at);var p=v(require("react"),1),M=require("../utils/createContext.cjs"),V=require("../utils/part.cjs"),h=require("../utils/primitive.cjs"),w=require("../utils/useControllableState.cjs"),y=require("react/jsx-runtime"),[D,f]=(0,M.createSafeContext)("Steps");function S(t,e){return e?"current":t.completed?"completed":t.disabled?"disabled":"incomplete"}function O(t,e,s,a){if(t.length===0)return a==="non-linear"||e===s;let r=t.find(i=>i.value===e);return!r||r.disabled?!1:a==="non-linear"||r.completed||r.value===s?!0:t.find(i=>!i.completed)?.value===e}var z=p.forwardRef(({value:t,defaultValue:e,onValueChange:s,orientation:a="horizontal",navigationMode:r="linear",completedLabel:i="Completed",currentLabel:c="Current step",incompleteLabel:n="Not completed",disabledLabel:m="Disabled",...l},Q)=>{let[P,T]=(0,w.useControllableState)({prop:t,defaultProp:e,onChange:s}),[C,E]=p.useState([]),U=p.useCallback(o=>{E(d=>{let u=d.findIndex(Z=>Z.value===o.value);if(u===-1)return[...d,o];let H=d[u];if(H.completed===o.completed&&H.disabled===o.disabled)return d;let L=d.slice();return L[u]=o,L})},[]),W=p.useCallback(o=>{E(d=>d.filter(u=>u.value!==o))},[]),R=p.useCallback(o=>O(C,o,P,r),[C,P,r]),X=p.useCallback(o=>{R(o)&&T(o)},[R,T]),Y=p.useCallback(o=>o==="completed"?i:o==="current"?c:o==="disabled"?m:n,[i,c,m,n]);return(0,y.jsx)(D,{value:P,orientation:a,navigationMode:r,statusLabel:Y,items:C,registerItem:U,unregisterItem:W,canActivate:R,activate:X,children:(0,y.jsx)(h.Primitive.ol,{"data-orientation":a,...l,...(0,V.skdxPart)("steps","root",l.className),ref:Q})})});z.displayName="Steps";var g=v(require("react"),1),B=require("../utils/part.cjs"),q=require("../utils/primitive.cjs"),F=require("../utils/visuallyHidden.cjs");var I=require("react/jsx-runtime"),k=g.forwardRef(({value:t,completed:e=!1,disabled:s=!1,children:a,...r},i)=>{let c=f("StepsItem"),n=S({completed:e,disabled:s},c.value===t),{registerItem:m,unregisterItem:l}=c;return g.useLayoutEffect(()=>{m({value:t,completed:e,disabled:s})},[m,t,e,s]),g.useLayoutEffect(()=>()=>l(t),[l,t]),(0,I.jsxs)(q.Primitive.li,{"data-status":n,"data-orientation":c.orientation,"data-disabled":s?"":void 0,"data-value":t,"aria-current":n==="current"?"step":void 0,...r,...(0,B.skdxPart)("steps","item",r.className),ref:i,children:[a,(0,I.jsx)(F.VisuallyHidden,{"data-status-text":n,children:c.statusLabel(n)})]})});k.displayName="StepsItem";var G=v(require("react"),1),J=require("../utils/part.cjs"),b=require("../utils/primitive.cjs");var K=require("react/jsx-runtime"),N=G.forwardRef(({value:t,...e},s)=>{let a=f("StepsTrigger"),r=a.items.find(m=>m.value===t),i=r?.disabled??!1,c=S({completed:r?.completed??!1,disabled:i},a.value===t),n=!i&&!a.canActivate(t);return(0,K.jsx)(b.Primitive.button,{type:"button","data-status":c,"data-orientation":a.orientation,"data-disabled":i?"":void 0,"data-value":t,disabled:i,"aria-disabled":n||void 0,...e,...(0,J.skdxPart)("steps","trigger",e.className),ref:s,onClick:(0,b.composeEventHandlers)(e.onClick,m=>{if(n){m.preventDefault();return}a.activate(t)})})});N.displayName="StepsTrigger";0&&(module.exports={Steps,StepsItem,StepsProvider,StepsTrigger,canActivateStep,stepStatus,useStepsContext});
+"use strict";var it=Object.create;var R=Object.defineProperty;var pt=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var mt=Object.getPrototypeOf,dt=Object.prototype.hasOwnProperty;var ct=(t,e)=>{for(var s in e)R(t,s,{get:e[s],enumerable:!0})},D=(t,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of lt(e))!dt.call(t,r)&&r!==s&&R(t,r,{get:()=>e[r],enumerable:!(a=pt(e,r))||a.enumerable});return t};var A=(t,e,s)=>(s=t!=null?it(mt(t)):{},D(e||!t||!t.__esModule?R(s,"default",{value:t,enumerable:!0}):s,t)),ut=t=>D(R({},"__esModule",{value:!0}),t);var St={};ct(St,{Steps:()=>_,StepsItem:()=>v,StepsProvider:()=>Z,StepsTrigger:()=>P,canActivateStep:()=>$,stepStatus:()=>b,useStepsContext:()=>g});module.exports=ut(St);var i=A(require("react"),1),J=require("../utils/composeRefs.cjs"),K=require("../utils/createContext.cjs"),Q=require("../utils/is-dev-mode.cjs"),U=require("../utils/part.cjs"),X=require("../utils/primitive.cjs"),Y=require("../utils/useControllableState.cjs");var S=A(require("react"),1),O=require("../utils/part.cjs"),G=require("../utils/primitive.cjs"),z=require("../utils/visuallyHidden.cjs");var y=require("react/jsx-runtime"),v=S.forwardRef(({value:t,completed:e=!1,disabled:s=!1,error:a=!1,children:r,...n},c)=>{let m=g("StepsItem"),p=b({completed:e,disabled:s,error:a},m.value===t),{registerItem:u,unregisterItem:x}=m;return S.useLayoutEffect(()=>{u({value:t,completed:e,disabled:s})},[u,t,e,s]),S.useLayoutEffect(()=>()=>x(t),[x,t]),(0,y.jsxs)(G.Primitive.li,{"data-state":p,"data-orientation":m.orientation,"data-disabled":s?"":void 0,"data-value":t,"aria-current":p==="current"?"step":void 0,...n,...(0,O.skdxPart)("steps","item",n.className),ref:c,children:[r,(0,y.jsx)(z.VisuallyHidden,{"data-state-text":p,children:m.statusLabel(p)})]})});v.displayName="StepsItem";var B=A(require("react"),1),W=require("../utils/part.cjs"),I=require("../utils/primitive.cjs");var q=require("react/jsx-runtime"),P=B.forwardRef(({value:t,...e},s)=>{let a=g("StepsTrigger"),r=a.items.find(p=>p.value===t),n=r?.disabled??!1,c=b({completed:r?.completed??!1,disabled:n},a.value===t),m=!n&&!a.canActivate(t);return(0,q.jsx)(I.Primitive.button,{type:"button","data-state":c,"data-orientation":a.orientation,"data-disabled":n?"":void 0,"data-value":t,disabled:n,"aria-disabled":m||void 0,...e,...(0,W.skdxPart)("steps","trigger",e.className),ref:s,onClick:(0,I.composeEventHandlers)(e.onClick,p=>{if(m){p.preventDefault();return}a.activate(t)})})});P.displayName="StepsTrigger";var l=require("react/jsx-runtime"),F=({steps:t=[],current:e})=>(0,l.jsx)(l.Fragment,{children:t.map((s,a)=>{let r=String(a);return(0,l.jsxs)(v,{value:r,completed:e!==void 0&&a<e,children:[(0,l.jsxs)(P,{value:r,children:[(0,l.jsx)("span",{className:"skdx-steps__indicator","aria-hidden":"true",children:a+1}),(0,l.jsx)("span",{className:"skdx-steps__title",children:s.label})]}),s.description===void 0?null:(0,l.jsx)("span",{className:"skdx-steps__description",children:s.description}),a===t.length-1?null:(0,l.jsx)("span",{className:"skdx-steps__separator","aria-hidden":"true"})]},r)})});var C=require("react/jsx-runtime"),[Z,g]=(0,K.createSafeContext)("Steps"),ft="[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label or an aria-labelledby pointing at a visible heading.";function b(t,e){return e?"current":t.error?"error":t.completed?"completed":t.disabled?"disabled":"incomplete"}function $(t,e,s,a){if(t.length===0)return a==="non-linear"||e===s;let r=t.find(n=>n.value===e);return!r||r.disabled?!1:a==="non-linear"||r.completed||r.value===s?!0:t.find(n=>!n.completed)?.value===e}var _=i.forwardRef(({value:t,defaultValue:e,onValueChange:s,orientation:a="horizontal",navigationMode:r="linear",completedLabel:n="Completed",currentLabel:c="Current step",incompleteLabel:m="Not completed",disabledLabel:p="Disabled",errorLabel:u="Error",items:x,current:k,children:j,...h},tt)=>{let[N,H]=(0,Y.useControllableState)({prop:t??(k===void 0?void 0:String(k)),defaultProp:e,onChange:s}),[T,L]=i.useState([]),M=i.useRef(null),et=(0,J.useComposedRefs)(tt,M);i.useEffect(()=>{let o=M.current;o&&!o.getAttribute("aria-label")&&!o.getAttribute("aria-labelledby")&&(0,Q.isDevMode)()&&console.warn(ft)},[]);let st=i.useCallback(o=>{L(d=>{let f=d.findIndex(nt=>nt.value===o.value);if(f===-1)return[...d,o];let w=d[f];if(w.completed===o.completed&&w.disabled===o.disabled)return d;let V=d.slice();return V[f]=o,V})},[]),rt=i.useCallback(o=>{L(d=>d.filter(f=>f.value!==o))},[]),E=i.useCallback(o=>$(T,o,N,r),[T,N,r]),at=i.useCallback(o=>{E(o)&&H(o)},[E,H]),ot=i.useCallback(o=>({completed:n,current:c,error:u,disabled:p,incomplete:m})[o],[n,c,u,p,m]);return(0,C.jsx)(Z,{value:N,orientation:a,navigationMode:r,statusLabel:ot,items:T,registerItem:st,unregisterItem:rt,canActivate:E,activate:at,children:(0,C.jsx)(X.Primitive.ol,{role:"list","data-orientation":a,...h,...(0,U.skdxPart)("steps","root",h.className),ref:et,children:j??(0,C.jsx)(F,{steps:x,current:k})})})});_.displayName="Steps";0&&(module.exports={Steps,StepsItem,StepsProvider,StepsTrigger,canActivateStep,stepStatus,useStepsContext});

package/dist/steps/Steps.d.cts

@@ -7,39 +7,36 @@ export declare const StepsProvider: {
     displayName: string;
 }, useStepsContext: (consumerName: string) => StepsContextValue;
 /**
- * @internal The one place a step's four-way status is derived, so every part
- * agrees. Precedence is `current` → `completed` → `disabled` → `incomplete`:
- * a completed-but-disabled step still announces "Completed", because being
- * unreachable is already conveyed by the trigger's disabled state.
+ * @internal Derives step status once, so every part agrees.
+ * Precedence: `current` > `error` > `completed` > `disabled` > `incomplete`.
  */
-export declare function stepStatus(item: Pick<StepsItemState, 'completed' | 'disabled'>, current: boolean): StepStatus;
+export declare function stepStatus(item: {
+    completed?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}, current: boolean): StepStatus;
 /**
- * @internal The whole of linear-mode enforcement. A step is reachable when it
- * is already completed, is the current step, or is the *frontier* — the first
- * step that is not yet completed. A disabled step never activates, but it is
- * not a wall either: it does not shift the frontier past itself.
+ * @internal Linear-mode enforcement. Step is reachable if completed, current, or frontier (first incomplete).
+ * Disabled steps never activate but do not block the frontier.
  */
 export declare function canActivateStep(items: StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;
 /**
- * Root of a step sequence: renders an `<ol>` and owns which step is current,
- * handing it down to `StepsItem` / `StepsTrigger` via context. The current
- * step is marked `aria-current="step"`, and every step exposes its status as
- * visually-hidden text so it is never conveyed by colour or position alone.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * A Wizard is a *pattern* built from `Steps` + `Form` + `Dialog`, not a
- * component — see the Wizard pattern page.
+ * Step sequence root: renders `<ol>` and owns current step, handing it via context.
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Without `children`, derives anatomy from `items` (one `StepsItem` per entry).
  *
  * @example
  * ```tsx
- * <Steps aria-label="Checkout progress" defaultValue="cart">
- *   <StepsItem value="cart" completed>
- *     <StepsTrigger value="cart">Cart</StepsTrigger>
- *   </StepsItem>
- *   <StepsItem value="shipping">
- *     <StepsTrigger value="shipping">Shipping</StepsTrigger>
- *   </StepsItem>
- * </Steps>
+ * <Steps
+ *   aria-label="Checkout progress"
+ *   current={1}
+ *   onValueChange={(next) => setCurrent(Number(next))}
+ *   items={[
+ *     { label: 'Cart' },
+ *     { label: 'Shipping', description: 'Where it goes.' },
+ *     { label: 'Payment' },
+ *   ]}
+ * />
  * ```
  */
 export declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/steps/Steps.d.ts

@@ -7,39 +7,36 @@ export declare const StepsProvider: {
     displayName: string;
 }, useStepsContext: (consumerName: string) => StepsContextValue;
 /**
- * @internal The one place a step's four-way status is derived, so every part
- * agrees. Precedence is `current` → `completed` → `disabled` → `incomplete`:
- * a completed-but-disabled step still announces "Completed", because being
- * unreachable is already conveyed by the trigger's disabled state.
+ * @internal Derives step status once, so every part agrees.
+ * Precedence: `current` > `error` > `completed` > `disabled` > `incomplete`.
  */
-export declare function stepStatus(item: Pick<StepsItemState, 'completed' | 'disabled'>, current: boolean): StepStatus;
+export declare function stepStatus(item: {
+    completed?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}, current: boolean): StepStatus;
 /**
- * @internal The whole of linear-mode enforcement. A step is reachable when it
- * is already completed, is the current step, or is the *frontier* — the first
- * step that is not yet completed. A disabled step never activates, but it is
- * not a wall either: it does not shift the frontier past itself.
+ * @internal Linear-mode enforcement. Step is reachable if completed, current, or frontier (first incomplete).
+ * Disabled steps never activate but do not block the frontier.
  */
 export declare function canActivateStep(items: StepsItemState[], value: string, currentValue: string | undefined, navigationMode: StepsNavigationMode): boolean;
 /**
- * Root of a step sequence: renders an `<ol>` and owns which step is current,
- * handing it down to `StepsItem` / `StepsTrigger` via context. The current
- * step is marked `aria-current="step"`, and every step exposes its status as
- * visually-hidden text so it is never conveyed by colour or position alone.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- * A Wizard is a *pattern* built from `Steps` + `Form` + `Dialog`, not a
- * component — see the Wizard pattern page.
+ * Step sequence root: renders `<ol>` and owns current step, handing it via context.
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Without `children`, derives anatomy from `items` (one `StepsItem` per entry).
  *
  * @example
  * ```tsx
- * <Steps aria-label="Checkout progress" defaultValue="cart">
- *   <StepsItem value="cart" completed>
- *     <StepsTrigger value="cart">Cart</StepsTrigger>
- *   </StepsItem>
- *   <StepsItem value="shipping">
- *     <StepsTrigger value="shipping">Shipping</StepsTrigger>
- *   </StepsItem>
- * </Steps>
+ * <Steps
+ *   aria-label="Checkout progress"
+ *   current={1}
+ *   onValueChange={(next) => setCurrent(Number(next))}
+ *   items={[
+ *     { label: 'Cart' },
+ *     { label: 'Shipping', description: 'Where it goes.' },
+ *     { label: 'Payment' },
+ *   ]}
+ * />
  * ```
  */
 export declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLOListElement>>;

package/dist/steps/Steps.js

@@ -1 +1 @@
-import*as p from"react";import{createSafeContext as h}from"../utils/createContext.js";import{skdxPart as w}from"../utils/part.js";import{Primitive as D}from"../utils/primitive.js";import{useControllableState as O}from"../utils/useControllableState.js";import{jsx as y}from"react/jsx-runtime";var[z,S]=h("Steps");function g(t,s){return s?"current":t.completed?"completed":t.disabled?"disabled":"incomplete"}function B(t,s,i,a){if(t.length===0)return a==="non-linear"||s===i;let r=t.find(o=>o.value===s);return!r||r.disabled?!1:a==="non-linear"||r.completed||r.value===i?!0:t.find(o=>!o.completed)?.value===s}var q=p.forwardRef(({value:t,defaultValue:s,onValueChange:i,orientation:a="horizontal",navigationMode:r="linear",completedLabel:o="Completed",currentLabel:c="Current step",incompleteLabel:n="Not completed",disabledLabel:m="Disabled",...l},E)=>{let[x,P]=O({prop:t,defaultProp:s,onChange:i}),[I,C]=p.useState([]),H=p.useCallback(e=>{C(d=>{let u=d.findIndex(V=>V.value===e.value);if(u===-1)return[...d,e];let R=d[u];if(R.completed===e.completed&&R.disabled===e.disabled)return d;let v=d.slice();return v[u]=e,v})},[]),L=p.useCallback(e=>{C(d=>d.filter(u=>u.value!==e))},[]),b=p.useCallback(e=>B(I,e,x,r),[I,x,r]),A=p.useCallback(e=>{b(e)&&P(e)},[b,P]),M=p.useCallback(e=>e==="completed"?o:e==="current"?c:e==="disabled"?m:n,[o,c,m,n]);return y(z,{value:x,orientation:a,navigationMode:r,statusLabel:M,items:I,registerItem:H,unregisterItem:L,canActivate:b,activate:A,children:y(D.ol,{"data-orientation":a,...l,...w("steps","root",l.className),ref:E})})});q.displayName="Steps";import*as f from"react";import{skdxPart as F}from"../utils/part.js";import{Primitive as G}from"../utils/primitive.js";import{VisuallyHidden as J}from"../utils/visuallyHidden.js";import{jsx as K,jsxs as Q}from"react/jsx-runtime";var k=f.forwardRef(({value:t,completed:s=!1,disabled:i=!1,children:a,...r},o)=>{let c=S("StepsItem"),n=g({completed:s,disabled:i},c.value===t),{registerItem:m,unregisterItem:l}=c;return f.useLayoutEffect(()=>{m({value:t,completed:s,disabled:i})},[m,t,s,i]),f.useLayoutEffect(()=>()=>l(t),[l,t]),Q(G.li,{"data-status":n,"data-orientation":c.orientation,"data-disabled":i?"":void 0,"data-value":t,"aria-current":n==="current"?"step":void 0,...r,...F("steps","item",r.className),ref:o,children:[a,K(J,{"data-status-text":n,children:c.statusLabel(n)})]})});k.displayName="StepsItem";import*as N from"react";import{skdxPart as U}from"../utils/part.js";import{composeEventHandlers as W,Primitive as X}from"../utils/primitive.js";import{jsx as Y}from"react/jsx-runtime";var T=N.forwardRef(({value:t,...s},i)=>{let a=S("StepsTrigger"),r=a.items.find(m=>m.value===t),o=r?.disabled??!1,c=g({completed:r?.completed??!1,disabled:o},a.value===t),n=!o&&!a.canActivate(t);return Y(X.button,{type:"button","data-status":c,"data-orientation":a.orientation,"data-disabled":o?"":void 0,"data-value":t,disabled:o,"aria-disabled":n||void 0,...s,...U("steps","trigger",s.className),ref:i,onClick:W(s.onClick,m=>{if(n){m.preventDefault();return}a.activate(t)})})});T.displayName="StepsTrigger";export{q as Steps,k as StepsItem,z as StepsProvider,T as StepsTrigger,B as canActivateStep,g as stepStatus,S as useStepsContext};
+import*as i from"react";import{useComposedRefs as tt}from"../utils/composeRefs.js";import{createSafeContext as et}from"../utils/createContext.js";import{isDevMode as st}from"../utils/is-dev-mode.js";import{skdxPart as rt}from"../utils/part.js";import{Primitive as at}from"../utils/primitive.js";import{useControllableState as ot}from"../utils/useControllableState.js";import*as f from"react";import{skdxPart as F}from"../utils/part.js";import{Primitive as J}from"../utils/primitive.js";import{VisuallyHidden as K}from"../utils/visuallyHidden.js";import{jsx as Q,jsxs as U}from"react/jsx-runtime";var P=f.forwardRef(({value:t,completed:e=!1,disabled:o=!1,error:s=!1,children:a,...n},d)=>{let l=b("StepsItem"),p=x({completed:e,disabled:o,error:s},l.value===t),{registerItem:c,unregisterItem:g}=l;return f.useLayoutEffect(()=>{c({value:t,completed:e,disabled:o})},[c,t,e,o]),f.useLayoutEffect(()=>()=>g(t),[g,t]),U(J.li,{"data-state":p,"data-orientation":l.orientation,"data-disabled":o?"":void 0,"data-value":t,"aria-current":p==="current"?"step":void 0,...n,...F("steps","item",n.className),ref:d,children:[a,Q(K,{"data-state-text":p,children:l.statusLabel(p)})]})});P.displayName="StepsItem";import*as H from"react";import{skdxPart as X}from"../utils/part.js";import{composeEventHandlers as Y,Primitive as Z}from"../utils/primitive.js";import{jsx as $}from"react/jsx-runtime";var C=H.forwardRef(({value:t,...e},o)=>{let s=b("StepsTrigger"),a=s.items.find(p=>p.value===t),n=a?.disabled??!1,d=x({completed:a?.completed??!1,disabled:n},s.value===t),l=!n&&!s.canActivate(t);return $(Z.button,{type:"button","data-state":d,"data-orientation":s.orientation,"data-disabled":n?"":void 0,"data-value":t,disabled:n,"aria-disabled":l||void 0,...e,...X("steps","trigger",e.className),ref:o,onClick:Y(e.onClick,p=>{if(l){p.preventDefault();return}s.activate(t)})})});C.displayName="StepsTrigger";import{Fragment as j,jsx as S,jsxs as L}from"react/jsx-runtime";var M=({steps:t=[],current:e})=>S(j,{children:t.map((o,s)=>{let a=String(s);return L(P,{value:a,completed:e!==void 0&&s<e,children:[L(C,{value:a,children:[S("span",{className:"skdx-steps__indicator","aria-hidden":"true",children:s+1}),S("span",{className:"skdx-steps__title",children:o.label})]}),o.description===void 0?null:S("span",{className:"skdx-steps__description",children:o.description}),s===t.length-1?null:S("span",{className:"skdx-steps__separator","aria-hidden":"true"})]},a)})});import{jsx as k}from"react/jsx-runtime";var[nt,b]=et("Steps"),it="[skdx] Steps: the root <ol> has no accessible name. Give it an aria-label or an aria-labelledby pointing at a visible heading.";function x(t,e){return e?"current":t.error?"error":t.completed?"completed":t.disabled?"disabled":"incomplete"}function pt(t,e,o,s){if(t.length===0)return s==="non-linear"||e===o;let a=t.find(n=>n.value===e);return!a||a.disabled?!1:s==="non-linear"||a.completed||a.value===o?!0:t.find(n=>!n.completed)?.value===e}var w=i.forwardRef(({value:t,defaultValue:e,onValueChange:o,orientation:s="horizontal",navigationMode:a="linear",completedLabel:n="Completed",currentLabel:d="Current step",incompleteLabel:l="Not completed",disabledLabel:p="Disabled",errorLabel:c="Error",items:g,current:R,children:V,...N},D)=>{let[v,T]=ot({prop:t??(R===void 0?void 0:String(R)),defaultProp:e,onChange:o}),[y,E]=i.useState([]),A=i.useRef(null),O=tt(D,A);i.useEffect(()=>{let r=A.current;r&&!r.getAttribute("aria-label")&&!r.getAttribute("aria-labelledby")&&st()&&console.warn(it)},[]);let G=i.useCallback(r=>{E(m=>{let u=m.findIndex(q=>q.value===r.value);if(u===-1)return[...m,r];let _=m[u];if(_.completed===r.completed&&_.disabled===r.disabled)return m;let h=m.slice();return h[u]=r,h})},[]),z=i.useCallback(r=>{E(m=>m.filter(u=>u.value!==r))},[]),I=i.useCallback(r=>pt(y,r,v,a),[y,v,a]),B=i.useCallback(r=>{I(r)&&T(r)},[I,T]),W=i.useCallback(r=>({completed:n,current:d,error:c,disabled:p,incomplete:l})[r],[n,d,c,p,l]);return k(nt,{value:v,orientation:s,navigationMode:a,statusLabel:W,items:y,registerItem:G,unregisterItem:z,canActivate:I,activate:B,children:k(at.ol,{role:"list","data-orientation":s,...N,...rt("steps","root",N.className),ref:O,children:V??k(M,{steps:g,current:R})})})});w.displayName="Steps";export{w as Steps,P as StepsItem,nt as StepsProvider,C as StepsTrigger,pt as canActivateStep,x as stepStatus,b as useStepsContext};

package/dist/steps/StepsAnatomy.d.cts

@@ -0,0 +1,13 @@
+import type { StepsStep } from './types.cjs';
+/**
+ * The anatomy a {@link Steps} draws from `items`: one `StepsItem` per entry
+ * with its `StepsTrigger`, marking everything before `current` as completed.
+ * Step value is its index as a string. The separator is inside the item to
+ * remain a valid `<ol>` child.
+ *
+ * @internal
+ */
+export declare const StepsAnatomy: ({ steps, current, }: {
+    steps?: StepsStep[];
+    current?: number;
+}) => import("react").JSX.Element;

package/dist/steps/StepsAnatomy.d.ts

@@ -0,0 +1,13 @@
+import type { StepsStep } from './types.js';
+/**
+ * The anatomy a {@link Steps} draws from `items`: one `StepsItem` per entry
+ * with its `StepsTrigger`, marking everything before `current` as completed.
+ * Step value is its index as a string. The separator is inside the item to
+ * remain a valid `<ol>` child.
+ *
+ * @internal
+ */
+export declare const StepsAnatomy: ({ steps, current, }: {
+    steps?: StepsStep[];
+    current?: number;
+}) => import("react").JSX.Element;

package/dist/steps/StepsItem.d.cts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { StepsItemProps } from './types.cjs';
 /**
- * A single `<li>` step. Carries `data-status`
- * (`completed` | `current` | `incomplete` | `disabled`), `aria-current="step"`
- * while it is the current step, and a visually-hidden status element so the
- * status reaches assistive tech as text rather than only as colour or
- * position.
+ * A single `<li>` step with `data-state` (`completed` | `current` | `error` |
+ * `incomplete` | `disabled`) and `aria-current="step"` when current. Includes a
+ * visually-hidden status element for screen readers.
  *
  * @example
  * ```tsx

package/dist/steps/StepsItem.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { StepsItemProps } from './types.js';
 /**
- * A single `<li>` step. Carries `data-status`
- * (`completed` | `current` | `incomplete` | `disabled`), `aria-current="step"`
- * while it is the current step, and a visually-hidden status element so the
- * status reaches assistive tech as text rather than only as colour or
- * position.
+ * A single `<li>` step with `data-state` (`completed` | `current` | `error` |
+ * `incomplete` | `disabled`) and `aria-current="step"` when current. Includes a
+ * visually-hidden status element for screen readers.
  *
  * @example
  * ```tsx

package/dist/steps/StepsTrigger.d.cts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { StepsTriggerProps } from './types.cjs';
 /**
- * The optional interactive control that makes a step navigable. Renders a
- * plain `<button>` — an ordinary tab stop, not part of a roving-focus
- * composite, because a step list is a set of independent controls.
- *
- * A step the navigation mode blocks stays focusable and readable but reports
- * `aria-disabled="true"` and refuses activation; a step whose `StepsItem` is
- * `disabled` is natively `disabled` and leaves the tab order entirely.
+ * Interactive control making a step navigable. Reports `aria-disabled` when blocked by navigation mode.
  *
  * @example
  * ```tsx

package/dist/steps/StepsTrigger.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { StepsTriggerProps } from './types.js';
 /**
- * The optional interactive control that makes a step navigable. Renders a
- * plain `<button>` — an ordinary tab stop, not part of a roving-focus
- * composite, because a step list is a set of independent controls.
- *
- * A step the navigation mode blocks stays focusable and readable but reports
- * `aria-disabled="true"` and refuses activation; a step whose `StepsItem` is
- * `disabled` is natively `disabled` and leaves the tab order entirely.
+ * Interactive control making a step navigable. Reports `aria-disabled` when blocked by navigation mode.
  *
  * @example
  * ```tsx

package/dist/steps/index.d.cts

@@ -1,4 +1,2 @@
-export * from './Steps.cjs';
-export { StepsItem } from './StepsItem.cjs';
-export { StepsTrigger } from './StepsTrigger.cjs';
-export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsProps, StepsItemProps, StepsTriggerProps, } from './types.cjs';
+export { Steps } from './Steps.cjs';
+export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsProps, StepsStep, } from './types.cjs';

package/dist/steps/index.d.ts

@@ -1,4 +1,2 @@
-export * from './Steps.js';
-export { StepsItem } from './StepsItem.js';
-export { StepsTrigger } from './StepsTrigger.js';
-export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsProps, StepsItemProps, StepsTriggerProps, } from './types.js';
+export { Steps } from './Steps.js';
+export type { StepStatus, StepsOrientation, StepsNavigationMode, StepsProps, StepsStep, } from './types.js';

package/dist/steps/primitives.d.cts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `Steps` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Steps, StepsItem, StepsTrigger } from '@skdx/react/primitives/steps';
+ *
+ * <Steps aria-label="Checkout progress" defaultValue="cart">
+ *   <StepsItem value="cart" completed>
+ *     <StepsTrigger value="cart">Cart</StepsTrigger>
+ *   </StepsItem>
+ *   <StepsItem value="payment" error>
+ *     <StepsTrigger value="payment">Payment</StepsTrigger>
+ *   </StepsItem>
+ * </Steps>
+ * ```
+ */
+export { Steps, stepStatus, canActivateStep } from './Steps.cjs';
+export { StepsItem } from './StepsItem.cjs';
+export { StepsTrigger } from './StepsTrigger.cjs';
+export type { StepsProps, StepsItemProps, StepsTriggerProps, StepStatus } from './types.cjs';

package/dist/steps/primitives.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Advanced primitives for `Steps` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { Steps, StepsItem, StepsTrigger } from '@skdx/react/primitives/steps';
+ *
+ * <Steps aria-label="Checkout progress" defaultValue="cart">
+ *   <StepsItem value="cart" completed>
+ *     <StepsTrigger value="cart">Cart</StepsTrigger>
+ *   </StepsItem>
+ *   <StepsItem value="payment" error>
+ *     <StepsTrigger value="payment">Payment</StepsTrigger>
+ *   </StepsItem>
+ * </Steps>
+ * ```
+ */
+export { Steps, stepStatus, canActivateStep } from './Steps.js';
+export { StepsItem } from './StepsItem.js';
+export { StepsTrigger } from './StepsTrigger.js';
+export type { StepsProps, StepsItemProps, StepsTriggerProps, StepStatus } from './types.js';

package/dist/steps/types.d.cts

@@ -1,21 +1,22 @@
+import type * as React from 'react';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** The four mutually exclusive statuses a single step can be in. */
-export type StepStatus = 'completed' | 'current' | 'incomplete' | 'disabled';
+/**
+ * Step status: completed, current, incomplete, error (announces form failures separately), or disabled.
+ */
+export type StepStatus = 'completed' | 'current' | 'error' | 'incomplete' | 'disabled';
 /** Layout axis of a {@link Steps} list. */
 export type StepsOrientation = 'horizontal' | 'vertical';
 /**
- * How far a `StepsTrigger` may jump. `'linear'` allows completed steps, the
- * current step, and the first not-yet-completed step (the frontier);
- * `'non-linear'` allows any step that is not itself disabled.
+ * Navigation mode: `'linear'` restricts to completed, current, and next incomplete steps; `'non-linear'` allows any non-disabled step.
  */
 export type StepsNavigationMode = 'linear' | 'non-linear';
-/** @internal One registered step, as {@link Steps} tracks it for navigation-mode decisions. Not part of the public API. */
+/** @internal One registered step tracked for navigation-mode decisions. */
 export interface StepsItemState {
     value: string;
     completed: boolean;
     disabled: boolean;
 }
-/** @internal Shared state distributed from {@link Steps} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from Steps to its parts via context. */
 export interface StepsContextValue {
     value?: string;
     orientation: StepsOrientation;
@@ -31,8 +32,32 @@ export interface StepsContextValue {
     /** Activates `value` if {@link StepsContextValue.canActivate} allows it; a no-op otherwise. */
     activate: (value: string) => void;
 }
+/** One entry of {@link StepsProps.items} — a single step. */
+export interface StepsStep {
+    /** Rendered in the trigger; names the step. */
+    label: React.ReactNode;
+    /**
+     * Supporting copy rendered under the step trigger.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode;
+}
 /** Props for the {@link Steps} root. */
 export interface StepsProps extends PrimitivePropsWithRef<'ol'> {
+    /**
+     * Steps to render as derived `StepsItem`/`StepsTrigger` pairs. Step value is its
+     * positional index (string), used by `current` and `onValueChange`. Ignored if
+     * `children` is given for manual composition.
+     * @default undefined — nothing is derived; compose the steps as `children`.
+     */
+    items?: StepsStep[];
+    /**
+     * Index of the current step in `items`. Earlier steps derive as `completed`,
+     * enabling backward but not forward navigation in linear mode. Controlled prop:
+     * pair it with `onValueChange`.
+     * @default undefined — no step is current, and only the first is reachable.
+     */
+    current?: number;
     /**
      * Current step's value, for controlled usage. Pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own current step internally.
@@ -44,23 +69,20 @@ export interface StepsProps extends PrimitivePropsWithRef<'ol'> {
      */
     defaultValue?: string;
     /**
-     * Fires with the new value whenever the current step changes, controlled or
-     * not. Never fires for an activation the navigation mode or a disabled step
-     * blocked.
+     * Fires when the current step changes. Never fires for activations blocked by
+     * navigation mode or disabled steps.
      * @default undefined — no-op.
      */
     onValueChange?: (value: string) => void;
     /**
-     * Layout axis, exposed as `data-orientation`. Purely a styling hook — each
-     * trigger is an ordinary tab stop, so there is no ARIA orientation and no
-     * arrow-key handling.
+     * Layout axis, exposed as `data-orientation`. Purely a styling hook; no ARIA
+     * orientation or arrow-key handling.
      * @default 'horizontal'
      */
     orientation?: StepsOrientation;
     /**
-     * `'linear'` restricts triggers to completed steps, the current step, and
-     * the first not-yet-completed step. `'non-linear'` lets a trigger activate
-     * any step that is not itself disabled. Neither mode restricts programmatic
+     * `'linear'` restricts to completed, current, and next incomplete steps;
+     * `'non-linear'` allows any non-disabled step. Neither restricts programmatic
      * changes to `value`.
      * @default 'linear'
      */
@@ -85,30 +107,41 @@ export interface StepsProps extends PrimitivePropsWithRef<'ol'> {
      * @default 'Disabled'
      */
     disabledLabel?: string;
+    /**
+     * Visually-hidden status text for a step in an error state.
+     * @default 'Error'
+     */
+    errorLabel?: string;
 }
 /**
  * Props for a single {@link StepsItem}.
  *
- * `asChild` is deliberately unavailable: `StepsItem` injects its own
- * visually-hidden status element as a second child, which `Slot` (single
- * element child only) cannot merge onto a consumer's element.
+ * `asChild` is unavailable: `StepsItem` injects a visually-hidden status element
+ * as a second child, which `Slot` cannot merge.
  */
 export interface StepsItemProps extends Omit<PrimitivePropsWithRef<'li'>, 'asChild'> {
     /** Unique identifier matched against the root's `value` and a `StepsTrigger`'s `value`. */
     value: string;
     /**
-     * Whether this step has been completed. Drives `data-status` and, in linear
-     * mode, which steps a trigger may activate.
+     * Whether this step is completed. Drives `data-state` and, in linear mode,
+     * which steps a trigger may activate.
      * @default false
      */
     completed?: boolean;
     /**
-     * Whether this step can be activated at all. A disabled step's trigger
-     * leaves the tab order and refuses activation, but the step does not move
-     * the linear frontier.
+     * Whether this step can be activated. A disabled step's trigger leaves the tab
+     * order and refuses activation, without moving the linear frontier.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Whether this step is in an error state (form validation or upload failure).
+     * Drives `data-state="error"` and the `errorLabel` status text, announcing the
+     * failure separately. Ranks below `current`: the current step announces as
+     * current even while failing.
+     * @default false
+     */
+    error?: boolean;
 }
 /** Props for a single {@link StepsTrigger} button. */
 export interface StepsTriggerProps extends PrimitivePropsWithRef<'button'> {