@skdx/react 0.26.0 → 0.28.0

package/dist/toggle/Toggle.js

@@ -1 +1 @@
-import*as t from"react";import{skdxPart as f}from"../utils/part.js";import{composeEventHandlers as i,Primitive as m}from"../utils/primitive.js";import{useControllableState as n}from"../utils/useControllableState.js";import{jsx as g}from"react/jsx-runtime";var p=t.forwardRef(({pressed:r,defaultPressed:a=!1,onPressedChange:s,...e},l)=>{let[o=!1,d]=n({prop:r,defaultProp:a,onChange:s});return g(m.button,{type:"button","aria-pressed":o,"data-state":o?"on":"off","data-disabled":e.disabled?"":void 0,...e,...f("toggle","root",e.className),ref:l,onClick:i(e.onClick,()=>{e.disabled||d(!o)})})});p.displayName="Toggle";export{p as Toggle};
+import*as o from"react";import{skdxPart as f}from"../utils/part.js";import{composeEventHandlers as m,Primitive as p}from"../utils/primitive.js";import{useControllableState as g}from"../utils/useControllableState.js";import{jsx as c}from"react/jsx-runtime";var u=o.forwardRef(({pressed:r,defaultPressed:a=!1,onPressedChange:d,...e},s)=>{let[t=!1,l]=g({prop:r,defaultProp:a,onChange:d}),i=e.asChild===!0;return c(p.button,{type:"button","aria-pressed":t,"aria-disabled":i&&e.disabled?!0:void 0,"data-state":t?"on":"off","data-disabled":e.disabled?"":void 0,...e,...f("toggle","root",e.className),ref:s,onClick:m(e.onClick,n=>{if(e.disabled){n.preventDefault();return}l(!t)})})});u.displayName="Toggle";export{u as Toggle};

package/dist/toggle/types.d.cts

@@ -2,8 +2,8 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 /** Props for the {@link Toggle} button. */
 export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
     /**
-     * Pressed state, for controlled usage. Pair with `onPressedChange`.
-     * @default undefined — uncontrolled, tracks its own pressed state internally.
+     * Pressed state for controlled usage. Pair with `onPressedChange`.
+     * @default undefined
      */
     pressed?: boolean;
     /**
@@ -12,8 +12,13 @@ export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
      */
     defaultPressed?: boolean;
     /**
-     * Fires with the new pressed state whenever it changes, controlled or not.
-     * @default undefined — no-op.
+     * Fires with the new pressed state whenever it changes.
+     * @default undefined
      */
     onPressedChange?: (pressed: boolean) => void;
+    /**
+     * Disables the toggle and excludes it from the tab order.
+     * @default false
+     */
+    disabled?: boolean;
 }

package/dist/toggle/types.d.ts

@@ -2,8 +2,8 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 /** Props for the {@link Toggle} button. */
 export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
     /**
-     * Pressed state, for controlled usage. Pair with `onPressedChange`.
-     * @default undefined — uncontrolled, tracks its own pressed state internally.
+     * Pressed state for controlled usage. Pair with `onPressedChange`.
+     * @default undefined
      */
     pressed?: boolean;
     /**
@@ -12,8 +12,13 @@ export interface ToggleProps extends PrimitivePropsWithRef<'button'> {
      */
     defaultPressed?: boolean;
     /**
-     * Fires with the new pressed state whenever it changes, controlled or not.
-     * @default undefined — no-op.
+     * Fires with the new pressed state whenever it changes.
+     * @default undefined
      */
     onPressedChange?: (pressed: boolean) => void;
+    /**
+     * Disables the toggle and excludes it from the tab order.
+     * @default false
+     */
+    disabled?: boolean;
 }

package/dist/toggle-group/ToggleGroup.cjs

@@ -1 +1 @@
-"use strict";var z=Object.create;var g=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(e,r)=>{for(var t in r)g(e,t,{get:r[t],enumerable:!0})},P=(e,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of J(r))!U.call(e,o)&&o!==t&&g(e,o,{get:()=>r[o],enumerable:!(l=q(r,o))||l.enumerable});return e};var x=(e,r,t)=>(t=e!=null?z(Q(e)):{},P(r||!e||!e.__esModule?g(t,"default",{value:e,enumerable:!0}):t,e)),X=e=>P(g({},"__esModule",{value:!0}),e);var $={};W($,{ToggleGroup:()=>V,ToggleGroupItem:()=>R,ToggleGroupProvider:()=>S,useToggleGroupContext:()=>G});module.exports=X($);var a=x(require("react"),1),I=require("../utils/composeRefs.cjs"),C=require("../utils/createContext.cjs"),h=require("../utils/part.cjs"),m=require("../utils/primitive.cjs"),k=require("../utils/useControllableState.cjs"),p=require("../utils/useRovingFocus.cjs"),y=require("react/jsx-runtime"),Y="[data-skdx-toggle-group-item]:not([disabled])",Z='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[S,G]=(0,C.createSafeContext)("ToggleGroup"),V=a.forwardRef((e,r)=>{let{type:t,value:l,defaultValue:o,onValueChange:n,disabled:s=!1,orientation:d="horizontal",loop:L=!0,...c}=e,H=a.useMemo(()=>l===void 0?void 0:Array.isArray(l)?l:[l].filter(Boolean),[l]),[N=[],u]=(0,k.useControllableState)({prop:H,defaultProp:o===void 0?[]:Array.isArray(o)?o:[o],onChange:i=>{n?.(t==="single"?i[0]??"":i)}}),K=(0,p.useRovingFocus)({orientation:d,loop:L,itemSelector:"[data-skdx-toggle-group-item]"}),T=a.useRef(null),O=(0,I.useComposedRefs)(r,T),[v,E]=a.useState(null);(0,p.useRovingTabStop)(T,Z,"data-value",v,E),(0,p.useRovingTabStop)(T,Y,"data-value",v,E);let _=a.useCallback(i=>{u((b=[])=>t==="single"?[i]:[...b,i])},[u,t]),B=a.useCallback(i=>{u((b=[])=>b.filter(F=>F!==i))},[u]);return(0,y.jsx)(S,{type:t,value:N,disabled:s,onItemActivate:_,onItemDeactivate:B,firstEnabledValue:v,children:(0,y.jsx)(m.Primitive.div,{role:"group","data-orientation":d,"data-disabled":s?"":void 0,...c,...(0,h.skdxPart)("toggle-group","root",c.className),ref:O,onKeyDown:(0,m.composeEventHandlers)(c.onKeyDown,K)})})});V.displayName="ToggleGroup";var D=x(require("react"),1),w=require("../utils/part.cjs"),f=require("../utils/primitive.cjs"),A=require("../utils/useRovingFocus.cjs");var M=require("react/jsx-runtime"),R=D.forwardRef(({value:e,disabled:r,...t},l)=>{let o=G("ToggleGroupItem"),n=o.value.includes(e),s=o.disabled||r||!1,d=o.firstEnabledValue===null?n&&!s&&o.value[0]===e:o.firstEnabledValue===e;return(0,M.jsx)(f.Primitive.button,{type:"button","aria-pressed":n,"data-skdx-toggle-group-item":"","data-state":n?"on":"off","data-disabled":s?"":void 0,"data-value":e,disabled:s,tabIndex:(0,A.rovingTabIndex)(o.firstEnabledValue!==null||o.value.length>0,d,s),...t,...(0,w.skdxPart)("toggle-group","item",t.className),ref:l,onClick:(0,f.composeEventHandlers)(t.onClick,()=>{n?o.type==="multiple"&&o.onItemDeactivate(e):o.onItemActivate(e)})})});R.displayName="ToggleGroupItem";0&&(module.exports={ToggleGroup,ToggleGroupItem,ToggleGroupProvider,useToggleGroupContext});
+"use strict";var J=Object.create;var m=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,o)=>{for(var r in o)m(e,r,{get:o[r],enumerable:!0})},P=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of U(o))!Y.call(e,t)&&t!==r&&m(e,t,{get:()=>o[t],enumerable:!(n=Q(o,t))||n.enumerable});return e};var V=(e,o,r)=>(r=e!=null?J(X(e)):{},P(o||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),j=e=>P(m({},"__esModule",{value:!0}),e);var te={};Z(te,{ToggleGroup:()=>G,ToggleGroupItem:()=>f,ToggleGroupProvider:()=>N,useToggleGroupContext:()=>h});module.exports=j(te);var a=V(require("react"),1),M=require("../utils/createContext.cjs"),D=require("../utils/formControl.cjs"),F=require("../utils/hiddenInput.cjs"),L=require("../utils/part.cjs"),T=require("../utils/primitive.cjs"),g=require("../utils/useRovingFocus.cjs"),O=require("../utils/useSelection.cjs");var C=V(require("react"),1),S=require("../utils/part.cjs"),c=require("../utils/primitive.cjs"),k=require("../utils/useRovingFocus.cjs");var w=require("react/jsx-runtime"),f=C.forwardRef(({value:e,disabled:o,...r},n)=>{let t=h("ToggleGroupItem"),i=t.value.includes(e),l=t.disabled||o||!1,b=t.firstEnabledValue===null?i&&!l&&t.value[0]===e:t.firstEnabledValue===e,u=(0,S.skdxPart)("toggle-group","item",r.className);return(0,w.jsx)(c.Primitive.button,{type:"button","aria-pressed":i,"data-skdx-toggle-group-item":"","data-state":i?"on":"off","data-disabled":l?"":void 0,"data-value":e,disabled:l,tabIndex:(0,k.rovingTabIndex)(t.rovingFocus&&(t.firstEnabledValue!==null||t.value.length>0),b,l),...r,...u,className:`skdx-toggle ${u.className}`,ref:n,onClick:(0,c.composeEventHandlers)(r.onClick,()=>t.onItemToggle(e))})});f.displayName="ToggleGroupItem";var p=require("react/jsx-runtime"),H=({options:e=[]})=>(0,p.jsx)(p.Fragment,{children:e.map(o=>(0,p.jsx)(f,{value:o.value,disabled:o.disabled,children:o.label},o.value))});var s=require("react/jsx-runtime"),ee="[data-skdx-toggle-group-item]:not([disabled])",oe='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[N,h]=(0,M.createSafeContext)("ToggleGroup"),G=a.forwardRef((e,o)=>{let{type:r,value:n,defaultValue:t,onValueChange:i,disabled:l=!1,orientation:b="horizontal",loop:u=!0,deselectable:A=!0,rovingFocus:x=!0,name:K,required:_=!1,form:q,options:z,children:B,...v}=e,{selectedValues:E,selectItem:W}=(0,O.useSelection)({value:n,defaultValue:t,onValueChange:i,multiple:r==="multiple",deselectable:A,label:"ToggleGroup"}),$=(0,g.useRovingFocus)({orientation:"both",loop:u,itemSelector:"[data-skdx-toggle-group-item]"}),d=a.useRef(null),R=a.useRef(null);(0,D.useFormValidityHandle)(o,d,R);let[y,I]=a.useState(null);return(0,g.useRovingTabStop)(d,oe,"data-value",y,I),(0,g.useRovingTabStop)(d,ee,"data-value",y,I),(0,s.jsxs)(N,{type:r,value:E,disabled:l,rovingFocus:x,onItemToggle:W,firstEnabledValue:y,children:[(0,s.jsx)(T.Primitive.div,{role:"group","data-orientation":b,"data-disabled":l?"":void 0,...v,...(0,L.skdxPart)("toggle-group","root",v.className),ref:d,onKeyDown:(0,T.composeEventHandlers)(v.onKeyDown,x?$:void 0),children:B??(0,s.jsx)(H,{options:z})}),(0,s.jsx)(F.MirroredValues,{name:K,values:E,required:_,disabled:l,form:q,controlRef:R})]})});G.displayName="ToggleGroup";0&&(module.exports={ToggleGroup,ToggleGroupItem,ToggleGroupProvider,useToggleGroupContext});

package/dist/toggle-group/ToggleGroup.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ToggleGroupContextValue } from './types.cjs';
+import type { ToggleGroupContextValue, ToggleGroupProps } from './types.cjs';
 export declare const ToggleGroupProvider: {
     (props: ToggleGroupContextValue & {
         children: React.ReactNode;
@@ -7,21 +7,40 @@ export declare const ToggleGroupProvider: {
     displayName: string;
 }, useToggleGroupContext: (consumerName: string) => ToggleGroupContextValue;
 /**
- * A group of `ToggleGroupItem`s with either single (radio-like) or multiple
- * (checkbox-like) selection, chosen via `type`. Renders `role="group"` with
- * `data-orientation` and `data-disabled`. Manages roving tabindex and
- * arrow-key/Home/End navigation between items (per `orientation`/`loop`) —
- * in `'single'` mode the pressed item is the sole tab stop (or the first
- * enabled item, when none is pressed); in `'multiple'` mode the first pressed
- * item is.
+ * Single or multiple selection toggle group: `role="group"` with roving tabindex
+ * and arrow-key/Home/End navigation. Single: only pressed item is tab-stop.
+ * Multiple: first pressed item is.
+ *
+ * Renders derived anatomy from `options` (one item per entry) or manual `children`.
+ * With `name`, participates in form submission (one hidden input per pressed value);
+ * forwarded ref carries `checkValidity()` / `reportValidity()`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup
+ *   type="single"
+ *   defaultValue="left"
+ *   aria-label="Text alignment"
+ *   options={[
+ *     { value: 'left', label: 'Left' },
+ *     { value: 'center', label: 'Center' },
+ *     { value: 'right', label: 'Right' },
+ *   ]}
+ * />
+ * ```
  *
  * @example
  * ```tsx
- * <ToggleGroup type="single" defaultValue="left" aria-label="Text alignment">
- *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
- *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
- *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
- * </ToggleGroup>
+ * <ToggleGroup
+ *   type="multiple"
+ *   name="format"
+ *   required
+ *   aria-label="Formatting"
+ *   options={[
+ *     { value: 'bold', label: 'B' },
+ *     { value: 'italic', label: 'I' },
+ *   ]}
+ * />
  * ```
  */
-export declare const ToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.cjs").ToggleGroupSingleProps, "ref"> | Omit<import("./types.cjs").ToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toggle-group/ToggleGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ToggleGroupContextValue } from './types.js';
+import type { ToggleGroupContextValue, ToggleGroupProps } from './types.js';
 export declare const ToggleGroupProvider: {
     (props: ToggleGroupContextValue & {
         children: React.ReactNode;
@@ -7,21 +7,40 @@ export declare const ToggleGroupProvider: {
     displayName: string;
 }, useToggleGroupContext: (consumerName: string) => ToggleGroupContextValue;
 /**
- * A group of `ToggleGroupItem`s with either single (radio-like) or multiple
- * (checkbox-like) selection, chosen via `type`. Renders `role="group"` with
- * `data-orientation` and `data-disabled`. Manages roving tabindex and
- * arrow-key/Home/End navigation between items (per `orientation`/`loop`) —
- * in `'single'` mode the pressed item is the sole tab stop (or the first
- * enabled item, when none is pressed); in `'multiple'` mode the first pressed
- * item is.
+ * Single or multiple selection toggle group: `role="group"` with roving tabindex
+ * and arrow-key/Home/End navigation. Single: only pressed item is tab-stop.
+ * Multiple: first pressed item is.
+ *
+ * Renders derived anatomy from `options` (one item per entry) or manual `children`.
+ * With `name`, participates in form submission (one hidden input per pressed value);
+ * forwarded ref carries `checkValidity()` / `reportValidity()`.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup
+ *   type="single"
+ *   defaultValue="left"
+ *   aria-label="Text alignment"
+ *   options={[
+ *     { value: 'left', label: 'Left' },
+ *     { value: 'center', label: 'Center' },
+ *     { value: 'right', label: 'Right' },
+ *   ]}
+ * />
+ * ```
  *
  * @example
  * ```tsx
- * <ToggleGroup type="single" defaultValue="left" aria-label="Text alignment">
- *   <ToggleGroupItem value="left">Left</ToggleGroupItem>
- *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
- *   <ToggleGroupItem value="right">Right</ToggleGroupItem>
- * </ToggleGroup>
+ * <ToggleGroup
+ *   type="multiple"
+ *   name="format"
+ *   required
+ *   aria-label="Formatting"
+ *   options={[
+ *     { value: 'bold', label: 'B' },
+ *     { value: 'italic', label: 'I' },
+ *   ]}
+ * />
  * ```
  */
-export declare const ToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.js").ToggleGroupSingleProps, "ref"> | Omit<import("./types.js").ToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toggle-group/ToggleGroup.js

@@ -1 +1 @@
-import*as o from"react";import{useComposedRefs as S}from"../utils/composeRefs.js";import{createSafeContext as V}from"../utils/createContext.js";import{skdxPart as D}from"../utils/part.js";import{composeEventHandlers as w,Primitive as A}from"../utils/primitive.js";import{useControllableState as M}from"../utils/useControllableState.js";import{useRovingFocus as L,useRovingTabStop as T}from"../utils/useRovingFocus.js";import{jsx as v}from"react/jsx-runtime";var H="[data-skdx-toggle-group-item]:not([disabled])",N='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[K,b]=V("ToggleGroup"),O=o.forwardRef((t,d)=>{let{type:r,value:a,defaultValue:e,onValueChange:l,disabled:n=!1,orientation:i="horizontal",loop:R=!0,...u}=t,E=o.useMemo(()=>a===void 0?void 0:Array.isArray(a)?a:[a].filter(Boolean),[a]),[P=[],p]=M({prop:E,defaultProp:e===void 0?[]:Array.isArray(e)?e:[e],onChange:s=>{l?.(r==="single"?s[0]??"":s)}}),x=L({orientation:i,loop:R,itemSelector:"[data-skdx-toggle-group-item]"}),g=o.useRef(null),I=S(d,g),[m,c]=o.useState(null);T(g,N,"data-value",m,c),T(g,H,"data-value",m,c);let C=o.useCallback(s=>{p((f=[])=>r==="single"?[s]:[...f,s])},[p,r]),h=o.useCallback(s=>{p((f=[])=>f.filter(k=>k!==s))},[p]);return v(K,{type:r,value:P,disabled:n,onItemActivate:C,onItemDeactivate:h,firstEnabledValue:m,children:v(A.div,{role:"group","data-orientation":i,"data-disabled":n?"":void 0,...u,...D("toggle-group","root",u.className),ref:I,onKeyDown:w(u.onKeyDown,x)})})});O.displayName="ToggleGroup";import*as y from"react";import{skdxPart as _}from"../utils/part.js";import{composeEventHandlers as B,Primitive as F}from"../utils/primitive.js";import{rovingTabIndex as z}from"../utils/useRovingFocus.js";import{jsx as q}from"react/jsx-runtime";var G=y.forwardRef(({value:t,disabled:d,...r},a)=>{let e=b("ToggleGroupItem"),l=e.value.includes(t),n=e.disabled||d||!1,i=e.firstEnabledValue===null?l&&!n&&e.value[0]===t:e.firstEnabledValue===t;return q(F.button,{type:"button","aria-pressed":l,"data-skdx-toggle-group-item":"","data-state":l?"on":"off","data-disabled":n?"":void 0,"data-value":t,disabled:n,tabIndex:z(e.firstEnabledValue!==null||e.value.length>0,i,n),...r,..._("toggle-group","item",r.className),ref:a,onClick:B(r.onClick,()=>{l?e.type==="multiple"&&e.onItemDeactivate(t):e.onItemActivate(t)})})});G.displayName="ToggleGroupItem";export{O as ToggleGroup,G as ToggleGroupItem,K as ToggleGroupProvider,b as useToggleGroupContext};
+import*as l from"react";import{createSafeContext as A}from"../utils/createContext.js";import{useFormValidityHandle as K}from"../utils/formControl.js";import{MirroredValues as _}from"../utils/hiddenInput.js";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as z,Primitive as B}from"../utils/primitive.js";import{useRovingFocus as W,useRovingTabStop as E}from"../utils/useRovingFocus.js";import{useSelection as $}from"../utils/useSelection.js";import*as y from"react";import{skdxPart as M}from"../utils/part.js";import{composeEventHandlers as D,Primitive as F}from"../utils/primitive.js";import{rovingTabIndex as L}from"../utils/useRovingFocus.js";import{jsx as O}from"react/jsx-runtime";var m=y.forwardRef(({value:o,disabled:t,...a},p)=>{let e=h("ToggleGroupItem"),n=e.value.includes(o),r=e.disabled||t||!1,g=e.firstEnabledValue===null?n&&!r&&e.value[0]===o:e.firstEnabledValue===o,s=M("toggle-group","item",a.className);return O(F.button,{type:"button","aria-pressed":n,"data-skdx-toggle-group-item":"","data-state":n?"on":"off","data-disabled":r?"":void 0,"data-value":o,disabled:r,tabIndex:L(e.rovingFocus&&(e.firstEnabledValue!==null||e.value.length>0),g,r),...a,...s,className:`skdx-toggle ${s.className}`,ref:p,onClick:D(a.onClick,()=>e.onItemToggle(o))})});m.displayName="ToggleGroupItem";import{Fragment as N,jsx as G}from"react/jsx-runtime";var x=({options:o=[]})=>G(N,{children:o.map(t=>G(m,{value:t.value,disabled:t.disabled,children:t.label},t.value))});import{jsx as c,jsxs as X}from"react/jsx-runtime";var J="[data-skdx-toggle-group-item]:not([disabled])",Q='[data-skdx-toggle-group-item][data-state="on"]:not([disabled])',[U,h]=A("ToggleGroup"),R=l.forwardRef((o,t)=>{let{type:a,value:p,defaultValue:e,onValueChange:n,disabled:r=!1,orientation:g="horizontal",loop:s=!0,deselectable:I=!0,rovingFocus:f=!0,name:P,required:V=!1,form:C,options:S,children:k,...u}=o,{selectedValues:T,selectItem:w}=$({value:p,defaultValue:e,onValueChange:n,multiple:a==="multiple",deselectable:I,label:"ToggleGroup"}),H=W({orientation:"both",loop:s,itemSelector:"[data-skdx-toggle-group-item]"}),i=l.useRef(null),b=l.useRef(null);K(t,i,b);let[d,v]=l.useState(null);return E(i,Q,"data-value",d,v),E(i,J,"data-value",d,v),X(U,{type:a,value:T,disabled:r,rovingFocus:f,onItemToggle:w,firstEnabledValue:d,children:[c(B.div,{role:"group","data-orientation":g,"data-disabled":r?"":void 0,...u,...q("toggle-group","root",u.className),ref:i,onKeyDown:z(u.onKeyDown,f?H:void 0),children:k??c(x,{options:S})}),c(_,{name:P,values:T,required:V,disabled:r,form:C,controlRef:b})]})});R.displayName="ToggleGroup";export{R as ToggleGroup,m as ToggleGroupItem,U as ToggleGroupProvider,h as useToggleGroupContext};

package/dist/toggle-group/ToggleGroupAnatomy.d.cts

@@ -0,0 +1,9 @@
+import type { ToggleGroupOption } from './types.cjs';
+/**
+ * The anatomy a {@link ToggleGroup} draws from `options`: one `ToggleGroupItem` per entry.
+ *
+ * @internal
+ */
+export declare const ToggleGroupAnatomy: ({ options }: {
+    options?: ToggleGroupOption[];
+}) => import("react").JSX.Element;

package/dist/toggle-group/ToggleGroupAnatomy.d.ts

@@ -0,0 +1,9 @@
+import type { ToggleGroupOption } from './types.js';
+/**
+ * The anatomy a {@link ToggleGroup} draws from `options`: one `ToggleGroupItem` per entry.
+ *
+ * @internal
+ */
+export declare const ToggleGroupAnatomy: ({ options }: {
+    options?: ToggleGroupOption[];
+}) => import("react").JSX.Element;

package/dist/toggle-group/ToggleGroupItem.d.cts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import type { ToggleGroupItemProps } from './types.cjs';
 /**
  * A single button within a {@link ToggleGroup}. Renders `<button aria-pressed
- * data-state data-disabled data-value>`. Clicking activates it; in
- * `'multiple'` mode clicking an already-pressed item deactivates it, while in
- * `'single'` mode the active item stays active (like a radio) and pressing a
- * different item switches selection.
+ * data-state data-disabled data-value>`. Clicking activates it. Clicking an
+ * already-pressed item deactivates it in `'multiple'` mode, and in `'single'`
+ * mode too unless the group sets `deselectable={false}` — pressing a
+ * *different* item always switches the selection.
  *
  * @example
  * ```tsx

package/dist/toggle-group/ToggleGroupItem.d.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import type { ToggleGroupItemProps } from './types.js';
 /**
  * A single button within a {@link ToggleGroup}. Renders `<button aria-pressed
- * data-state data-disabled data-value>`. Clicking activates it; in
- * `'multiple'` mode clicking an already-pressed item deactivates it, while in
- * `'single'` mode the active item stays active (like a radio) and pressing a
- * different item switches selection.
+ * data-state data-disabled data-value>`. Clicking activates it. Clicking an
+ * already-pressed item deactivates it in `'multiple'` mode, and in `'single'`
+ * mode too unless the group sets `deselectable={false}` — pressing a
+ * *different* item always switches the selection.
  *
  * @example
  * ```tsx

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

@@ -1,3 +1,3 @@
-export * from './ToggleGroup.cjs';
-export { ToggleGroupItem } from './ToggleGroupItem.cjs';
-export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps, } from './types.cjs';
+export { ToggleGroup } from './ToggleGroup.cjs';
+export type { ToggleGroupProps, ToggleGroupOption, ToggleGroupHandle } from './types.cjs';
+export type { SelectionChangeDetail } from '../utils/useSelection.cjs';

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

@@ -1,3 +1,3 @@
-export * from './ToggleGroup.js';
-export { ToggleGroupItem } from './ToggleGroupItem.js';
-export type { ToggleGroupProps, ToggleGroupSingleProps, ToggleGroupMultipleProps, ToggleGroupItemProps, } from './types.js';
+export { ToggleGroup } from './ToggleGroup.js';
+export type { ToggleGroupProps, ToggleGroupOption, ToggleGroupHandle } from './types.js';
+export type { SelectionChangeDetail } from '../utils/useSelection.js';

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

@@ -0,0 +1,20 @@
+/**
+ * Advanced primitives for `ToggleGroup` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@skdx/react/primitives/toggle-group';
+ *
+ * <ToggleGroup type="single" aria-label="Text alignment">
+ *   <ToggleGroupItem value="left">
+ *     <AlignLeftIcon />
+ *     Left
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export { ToggleGroup } from './ToggleGroup.cjs';
+export { ToggleGroupItem } from './ToggleGroupItem.cjs';
+export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType } from './types.cjs';

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

@@ -0,0 +1,20 @@
+/**
+ * Advanced primitives for `ToggleGroup` — the parts the recipe composes. Use
+ * for full manual composition.
+ *
+ * @example
+ * ```tsx
+ * import { ToggleGroup, ToggleGroupItem } from '@skdx/react/primitives/toggle-group';
+ *
+ * <ToggleGroup type="single" aria-label="Text alignment">
+ *   <ToggleGroupItem value="left">
+ *     <AlignLeftIcon />
+ *     Left
+ *   </ToggleGroupItem>
+ *   <ToggleGroupItem value="center">Center</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export { ToggleGroup } from './ToggleGroup.js';
+export { ToggleGroupItem } from './ToggleGroupItem.js';
+export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType } from './types.js';

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

@@ -1,5 +1,8 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 import type { Orientation } from '../utils/useRovingFocus.cjs';
+import type { SelectionChangeDetail } from '../utils/useSelection.cjs';
 /** Whether a {@link ToggleGroup} allows one pressed item at a time, or several. */
 export type ToggleGroupType = 'single' | 'multiple';
 /** @internal Shared state distributed from {@link ToggleGroup} to its {@link ToggleGroupItem}s via context. Not part of the public API. */
@@ -7,8 +10,15 @@ export interface ToggleGroupContextValue {
     type: ToggleGroupType;
     value: string[];
     disabled: boolean;
-    onItemActivate: (value: string) => void;
-    onItemDeactivate: (value: string) => void;
+    /** Whether the group manages one tab stop; `false` makes every enabled item its own. */
+    rovingFocus: boolean;
+    /**
+     * Commits one item: presses it, or unpresses it when the group's own
+     * cardinality and `deselectable` allow. The item never branches on either —
+     * both live on the root, which is the only place that can see the whole
+     * selection.
+     */
+    onItemToggle: (value: string) => void;
     /**
      * The group's single tab stop, resolved against the DOM by `ToggleGroup`: a
      * pressed item while one is mounted and enabled, else the first enabled item.
@@ -16,8 +26,55 @@ export interface ToggleGroupContextValue {
      */
     firstEnabledValue: string | null;
 }
-/** Shared props for the {@link ToggleGroup} root, regardless of `type`. */
-export interface ToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
+/** One entry of {@link ToggleGroupProps.options} — a single toggle button. */
+export interface ToggleGroupOption {
+    /** Unique identifier matched against the group's pressed value(s). */
+    value: string;
+    /** Text rendered inside the derived `ToggleGroupItem`. */
+    label: React.ReactNode;
+    /**
+     * Prevents this item from being pressed, and takes it out of the roving
+     * order.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for the {@link ToggleGroup} root; `type` picks single- or multiple-item selection. */
+export interface ToggleGroupProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * The buttons the group renders, one derived `ToggleGroupItem` each. Ignored when
+     * `children` is given, which switches to full manual composition.
+     * @default undefined — nothing is derived; compose the items as `children`.
+     */
+    options?: ToggleGroupOption[];
+    /**
+     * Whether at most one item may be pressed at a time (`'single'`) or any
+     * number (`'multiple'`). Determines whether `value` takes a bare `string`
+     * or `string[]`, and the shape of `onValueChange` payloads.
+     */
+    type: ToggleGroupType;
+    /**
+     * Pressed item's value(s), for controlled usage — a bare `string` or a
+     * `string[]`, whichever reads better at the call site; both are accepted
+     * regardless of cardinality. A `'single'` group given more than one value is
+     * a programming error and throws in a development build. Pair with
+     * `onValueChange`.
+     * @default undefined — uncontrolled, tracks its own pressed items internally.
+     */
+    value?: string | string[];
+    /**
+     * Initially pressed item's value(s), for uncontrolled usage — the same bare
+     * `string` or `string[]` shapes `value` accepts, under either cardinality.
+     * @default undefined — starts with no item pressed.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Fires whenever the pressed items change, controlled or not, carrying the
+     * whole selection as a `string[]` alongside `selectedValue` — the same detail
+     * shape in `'single'` and `'multiple'` alike.
+     * @default undefined — no-op if omitted.
+     */
+    onValueChange?: (detail: SelectionChangeDetail) => void;
     /**
      * Disables every item in the group.
      * @default false
@@ -35,31 +92,55 @@ export interface ToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
      * @default true
      */
     loop?: boolean;
+    /**
+     * Whether a `'single'` group may clear all selections by re-pressing the current item.
+     * Ignored when `type` is `'multiple'`, where items toggle individually.
+     * @default true
+     */
+    deselectable?: boolean;
+    /**
+     * Whether the group manages one tab stop with arrow-key navigation (`true`)
+     * or every item is its own tab stop with no arrow handling (`false`).
+     * @default true
+     */
+    rovingFocus?: boolean;
+    /**
+     * Form field name. The pressed value(s) are submitted under it through
+     * visually-hidden native inputs the group renders alongside itself — one per
+     * pressed value, so a `'multiple'` group produces the repeated `name=value`
+     * pairs a set of same-named checkboxes produces and `formData.getAll(name)`
+     * returns them all.
+     * @default undefined — the group renders no inputs and submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the group required: `valueMissing` until an item is pressed,
+     * reported through `checkValidity()`/`reportValidity()` on the forwarded ref.
+     * Only meaningful with `name`, which is what renders the control the
+     * constraint lives on.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Id of the `<form>` this group submits into, forwarded to every mirrored
+     * hidden input — one per pressed value — so the group can live outside the
+     * form it belongs to. Needs `name` to mean anything.
+     * @default undefined — the group submits into its nearest ancestor form.
+     */
+    form?: string;
 }
-/** Props for a {@link ToggleGroup} that allows only one pressed item, like a radio group. */
-export interface ToggleGroupSingleProps extends ToggleGroupBaseProps {
-    type: 'single';
-    /** Pressed item's value, for controlled usage. Pair with `onValueChange`. */
-    value?: string;
-    /** Initially pressed item's value, for uncontrolled usage. */
-    defaultValue?: string;
-    /** Fires with the new value whenever the pressed item changes, controlled or not. */
-    onValueChange?: (value: string) => void;
-}
-/** Props for a {@link ToggleGroup} that allows several simultaneously-pressed items. */
-export interface ToggleGroupMultipleProps extends ToggleGroupBaseProps {
-    type: 'multiple';
-    /** Pressed items' values, for controlled usage. Pair with `onValueChange`. */
-    value?: string[];
-    /** Initially pressed items' values, for uncontrolled usage. */
-    defaultValue?: string[];
-    /** Fires with the new values array whenever pressed items change, controlled or not. */
-    onValueChange?: (value: string[]) => void;
-}
-/** Props for the {@link ToggleGroup} root; `type` discriminates between single and multiple selection. */
-export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;
+/**
+ * The forwarded ref's handle: the root `<div>` with constraint-validation
+ * methods for checking and reporting the pressed item(s).
+ */
+export type ToggleGroupHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link ToggleGroupItem}. */
 export interface ToggleGroupItemProps extends PrimitivePropsWithRef<'button'> {
     /** Unique identifier compared against the group's pressed value(s). */
     value: string;
+    /**
+     * Disables this item and excludes it from the roving focus order.
+     * @default false
+     */
+    disabled?: boolean;
 }