@skdx/react 0.26.0 → 0.28.0

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

@@ -1,5 +1,8 @@
+import type * as React from 'react';
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { Orientation } from '../utils/useRovingFocus.js';
+import type { SelectionChangeDetail } from '../utils/useSelection.js';
 /** 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;
 }

package/dist/toolbar/Toolbar.cjs

@@ -1 +1 @@
-"use strict";var lo=Object.create;var f=Object.defineProperty;var no=Object.getOwnPropertyDescriptor;var so=Object.getOwnPropertyNames;var io=Object.getPrototypeOf,mo=Object.prototype.hasOwnProperty;var po=(o,t)=>{for(var e in t)f(o,e,{get:t[e],enumerable:!0})},N=(o,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of so(t))!mo.call(o,r)&&r!==e&&f(o,r,{get:()=>t[r],enumerable:!(a=no(t,r))||a.enumerable});return o};var b=(o,t,e)=>(e=o!=null?lo(io(o)):{},N(t||!o||!o.__esModule?f(e,"default",{value:o,enumerable:!0}):e,o)),bo=o=>N(f({},"__esModule",{value:!0}),o);var To={};po(To,{Toolbar:()=>w,ToolbarButton:()=>C,ToolbarLink:()=>k,ToolbarProvider:()=>M,ToolbarSeparator:()=>S,ToolbarToggleGroup:()=>L,ToolbarToggleItem:()=>E,useToolbarContext:()=>v,useToolbarItem:()=>d});module.exports=bo(To);var s=b(require("react"),1),F=require("../utils/composeRefs.cjs"),H=require("../utils/createContext.cjs"),D=require("../utils/part.cjs"),g=require("../utils/primitive.cjs"),u=require("../utils/useRovingFocus.cjs"),y=require("react/jsx-runtime"),h="[data-skdx-toolbar-item]:not([disabled])",[M,v]=(0,H.createSafeContext)("Toolbar");function d(o=!1){let t=s.useId(),e=v("Toolbar item"),a=e.currentTabStopId===t,r=s.useCallback(()=>{e.setCurrentTabStopId(t)},[e,t]),l=(0,u.rovingTabIndex)(e.currentTabStopId!==null,a,o);return{id:t,tabIndex:l,handleFocus:r}}var w=s.forwardRef(({orientation:o="horizontal",loop:t=!0,...e},a)=>{let[r,l]=s.useState(null),n=s.useRef(null),i=(0,F.useComposedRefs)(a,n),I=(0,u.useRovingFocus)({orientation:o,loop:t,itemSelector:h});return(0,u.useRovingTabStop)(n,h,"data-skdx-toolbar-item",r,l),(0,y.jsx)(M,{orientation:o,currentTabStopId:r,setCurrentTabStopId:l,children:(0,y.jsx)(g.Primitive.div,{role:"toolbar","aria-orientation":o,"data-orientation":o,...e,...(0,D.skdxPart)("toolbar","root",e.className),ref:i,onKeyDown:(0,g.composeEventHandlers)(e.onKeyDown,I)})})});w.displayName="Toolbar";var B=b(require("react"),1),A=require("../utils/part.cjs"),x=require("../utils/primitive.cjs");var V=require("react/jsx-runtime"),C=B.forwardRef((o,t)=>{let e=d(o.disabled);return(0,V.jsx)(x.Primitive.button,{type:"button","data-skdx-toolbar-item":e.id,"data-disabled":o.disabled?"":void 0,tabIndex:e.tabIndex,disabled:o.disabled,...o,...(0,A.skdxPart)("toolbar","button",o.className),ref:t,onFocus:(0,x.composeEventHandlers)(o.onFocus,e.handleFocus)})});C.displayName="ToolbarButton";var z=b(require("react"),1),K=require("../utils/part.cjs"),P=require("../utils/primitive.cjs");var O=require("react/jsx-runtime"),k=z.forwardRef((o,t)=>{let e=d();return(0,O.jsx)(P.Primitive.a,{"data-skdx-toolbar-item":e.id,tabIndex:e.tabIndex,...o,...(0,K.skdxPart)("toolbar","link",o.className),ref:t,onFocus:(0,P.composeEventHandlers)(o.onFocus,e.handleFocus)})});k.displayName="ToolbarLink";var _=b(require("react"),1),q=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var Q=require("react/jsx-runtime"),S=_.forwardRef((o,t)=>{let e=v("ToolbarSeparator"),a=e.orientation==="horizontal"?"vertical":"horizontal";return(0,Q.jsx)(J.Primitive.div,{role:"separator","aria-orientation":a,"data-orientation":e.orientation,...o,...(0,q.skdxPart)("toolbar","separator",o.className),ref:t})});S.displayName="ToolbarSeparator";var p=b(require("react"),1),U=require("../utils/createContext.cjs"),W=require("../utils/part.cjs"),X=require("../utils/primitive.cjs"),Y=require("../utils/useControllableState.cjs"),G=require("react/jsx-runtime"),[uo,Z]=(0,U.createSafeContext)("ToolbarToggleGroup"),L=p.forwardRef((o,t)=>{let{type:e,value:a,defaultValue:r,onValueChange:l,disabled:n=!1,...i}=o,I=p.useMemo(()=>a===void 0?void 0:Array.isArray(a)?a:[a].filter(Boolean),[a]),[eo=[],c]=(0,Y.useControllableState)({prop:I,defaultProp:r===void 0?[]:Array.isArray(r)?r:[r],onChange:m=>{l?.(e==="single"?m[0]??"":m)}}),to=p.useCallback(m=>{c((R=[])=>e==="single"?[m]:[...R,m])},[c,e]),ro=p.useCallback(m=>{c((R=[])=>R.filter(ao=>ao!==m))},[c]);return(0,G.jsx)(uo,{type:e,value:eo,disabled:n,onItemActivate:to,onItemDeactivate:ro,children:(0,G.jsx)(X.Primitive.div,{role:"group","data-disabled":n?"":void 0,...i,...(0,W.skdxPart)("toolbar","toggle-group",i.className),ref:t})})});L.displayName="ToolbarToggleGroup";var $=b(require("react"),1),j=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var oo=require("react/jsx-runtime"),E=$.forwardRef(({value:o,disabled:t,...e},a)=>{let r=Z("ToolbarToggleItem"),l=r.value.includes(o),n=r.disabled||t||!1,i=d(n);return(0,oo.jsx)(T.Primitive.button,{type:"button","aria-pressed":l,"data-skdx-toolbar-item":i.id,"data-state":l?"on":"off","data-disabled":n?"":void 0,disabled:n,tabIndex:i.tabIndex,...e,...(0,j.skdxPart)("toolbar","toggle-item",e.className),ref:a,onFocus:(0,T.composeEventHandlers)(e.onFocus,i.handleFocus),onClick:(0,T.composeEventHandlers)(e.onClick,()=>{n||(l?r.type==="multiple"&&r.onItemDeactivate(o):r.onItemActivate(o))})})});E.displayName="ToolbarToggleItem";0&&(module.exports={Toolbar,ToolbarButton,ToolbarLink,ToolbarProvider,ToolbarSeparator,ToolbarToggleGroup,ToolbarToggleItem,useToolbarContext,useToolbarItem});
+"use strict";var ao=Object.create;var f=Object.defineProperty;var lo=Object.getOwnPropertyDescriptor;var no=Object.getOwnPropertyNames;var so=Object.getPrototypeOf,io=Object.prototype.hasOwnProperty;var mo=(o,r)=>{for(var e in r)f(o,e,{get:r[e],enumerable:!0})},L=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of no(r))!io.call(o,a)&&a!==e&&f(o,a,{get:()=>r[a],enumerable:!(t=lo(r,a))||t.enumerable});return o};var p=(o,r,e)=>(e=o!=null?ao(so(o)):{},L(r||!o||!o.__esModule?f(e,"default",{value:o,enumerable:!0}):e,o)),po=o=>L(f({},"__esModule",{value:!0}),o);var bo={};mo(bo,{Toolbar:()=>G,ToolbarButton:()=>x,ToolbarLink:()=>v,ToolbarProvider:()=>eo,ToolbarSeparator:()=>I,ToolbarToggleGroup:()=>P,ToolbarToggleGroupProvider:()=>Q,ToolbarToggleItem:()=>k,useToolbarContext:()=>R,useToolbarItem:()=>d,useToolbarToggleGroupContext:()=>E});module.exports=po(bo);var i=p(require("react"),1),$=require("../utils/composeRefs.cjs"),j=require("../utils/createContext.cjs"),oo=require("../utils/part.cjs"),S=require("../utils/primitive.cjs"),b=require("../utils/useRovingFocus.cjs");var N=p(require("react"),1),F=require("../utils/part.cjs"),g=require("../utils/primitive.cjs");var H=require("react/jsx-runtime"),x=N.forwardRef((o,r)=>{let e=d(o.disabled);return(0,H.jsx)(g.Primitive.button,{type:"button","data-skdx-toolbar-item":e.id,"data-disabled":o.disabled?"":void 0,tabIndex:e.tabIndex,disabled:o.disabled,...o,...(0,F.skdxPart)("toolbar","button",o.className),ref:r,onFocus:(0,g.composeEventHandlers)(o.onFocus,e.handleFocus)})});x.displayName="ToolbarButton";var w=p(require("react"),1),V=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var B=require("react/jsx-runtime"),v=w.forwardRef((o,r)=>{let e=d();return(0,B.jsx)(y.Primitive.a,{"data-skdx-toolbar-item":e.id,tabIndex:e.tabIndex,...o,...(0,V.skdxPart)("toolbar","link",o.className),ref:r,onFocus:(0,y.composeEventHandlers)(o.onFocus,e.handleFocus)})});v.displayName="ToolbarLink";var D=p(require("react"),1),M=require("../utils/part.cjs"),z=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),I=D.forwardRef((o,r)=>{let e=R("ToolbarSeparator"),t=e.orientation==="horizontal"?"vertical":"horizontal";return(0,A.jsx)(z.Primitive.div,{role:"separator","aria-orientation":t,"data-orientation":e.orientation,...o,...(0,M.skdxPart)("toolbar","separator",o.className),ref:r})});I.displayName="ToolbarSeparator";var K=p(require("react"),1),O=require("../utils/createContext.cjs"),_=require("../utils/part.cjs"),q=require("../utils/primitive.cjs"),J=require("../utils/useSelection.cjs"),h=require("react/jsx-runtime"),[Q,E]=(0,O.createSafeContext)("ToolbarToggleGroup"),P=K.forwardRef((o,r)=>{let{type:e,value:t,defaultValue:a,onValueChange:n,disabled:s=!1,...l}=o,{selectedValues:T,selectItem:c}=(0,J.useSelection)({value:t,defaultValue:a,onValueChange:n,multiple:e==="multiple",label:"ToolbarToggleGroup"});return(0,h.jsx)(Q,{type:e,value:T,disabled:s,onItemToggle:c,children:(0,h.jsx)(q.Primitive.div,{role:"group","data-disabled":s?"":void 0,...l,...(0,_.skdxPart)("toolbar","toggle-group",l.className),ref:r})})});P.displayName="ToolbarToggleGroup";var U=p(require("react"),1),W=require("../utils/part.cjs"),u=require("../utils/primitive.cjs");var X=require("react/jsx-runtime"),k=U.forwardRef(({value:o,disabled:r,...e},t)=>{let a=E("ToolbarToggleItem"),n=a.value.includes(o),s=a.disabled||r||!1,l=d(s);return(0,X.jsx)(u.Primitive.button,{type:"button","aria-pressed":n,"data-skdx-toolbar-item":l.id,"data-state":n?"on":"off","data-disabled":s?"":void 0,disabled:s,tabIndex:l.tabIndex,...e,...(0,W.skdxPart)("toolbar","toggle-item",e.className),ref:t,onFocus:(0,u.composeEventHandlers)(e.onFocus,l.handleFocus),onClick:(0,u.composeEventHandlers)(e.onClick,()=>{s||a.onItemToggle(o)})})});k.displayName="ToolbarToggleItem";var m=require("react/jsx-runtime"),Y=({items:o=[],renderItem:r})=>{let e=t=>r?r(t):"label"in t?t.label:null;return(0,m.jsx)(m.Fragment,{children:o.map((t,a)=>{let n=String(a);if(!("type"in t))return(0,m.jsx)(x,{disabled:t.disabled,onClick:t.onClick,children:e(t)},n);switch(t.type){case"link":return(0,m.jsx)(v,{href:t.href,"aria-disabled":t.disabled||void 0,children:e(t)},n);case"separator":return(0,m.jsx)(I,{},n);case"toggle-group":{let s=t.mode??"single";return(0,m.jsx)(P,{type:s,value:t.value,disabled:t.disabled,onValueChange:l=>t.onValueChange?.(s==="multiple"?l.value:l.selectedValue??""),children:t.items.map(l=>(0,m.jsx)(k,{value:l.value,disabled:l.disabled,children:e(l)},l.value))},n)}}})})};var C=require("react/jsx-runtime"),Z="[data-skdx-toolbar-item]:not([disabled])",[eo,R]=(0,j.createSafeContext)("Toolbar");function d(o=!1){let r=i.useId(),e=R("Toolbar item"),t=e.currentTabStopId===r,a=i.useCallback(()=>{e.setCurrentTabStopId(r)},[e,r]),n=(0,b.rovingTabIndex)(e.currentTabStopId!==null,t,o);return{id:r,tabIndex:n,handleFocus:a}}var G=i.forwardRef(({children:o,items:r,renderItem:e,orientation:t="horizontal",loop:a=!0,...n},s)=>{let[l,T]=i.useState(null),c=i.useRef(null),to=(0,$.useComposedRefs)(s,c),ro=(0,b.useRovingFocus)({orientation:t,loop:a,itemSelector:Z});return(0,b.useRovingTabStop)(c,Z,"data-skdx-toolbar-item",l,T),(0,C.jsx)(eo,{orientation:t,currentTabStopId:l,setCurrentTabStopId:T,children:(0,C.jsx)(S.Primitive.div,{role:"toolbar","aria-orientation":t,"data-orientation":t,...n,...(0,oo.skdxPart)("toolbar","root",n.className),ref:to,onKeyDown:(0,S.composeEventHandlers)(n.onKeyDown,ro),children:o??(0,C.jsx)(Y,{items:r,renderItem:e})})})});G.displayName="Toolbar";0&&(module.exports={Toolbar,ToolbarButton,ToolbarLink,ToolbarProvider,ToolbarSeparator,ToolbarToggleGroup,ToolbarToggleGroupProvider,ToolbarToggleItem,useToolbarContext,useToolbarItem,useToolbarToggleGroupContext});

package/dist/toolbar/Toolbar.d.cts

@@ -6,18 +6,17 @@ export declare const ToolbarProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useToolbarContext: (consumerName: string) => ToolbarContextValue;
-/** @internal Registers a toolbar descendant in the roving-tabindex group, returning its `id`, `tabIndex`, and a focus handler that claims the tab stop. */
+/** @internal Registers toolbar item; returns `id`, `tabIndex`, and focus handler. */
 export declare function useToolbarItem(disabled?: boolean): {
     readonly id: string;
     readonly tabIndex: 0 | -1;
     readonly handleFocus: () => void;
 };
 /**
- * Root of a toolbar: renders a `<div role="toolbar">` with a single
- * roving-tabindex group spanning every `ToolbarButton` / `ToolbarLink` /
- * `ToolbarToggleItem` descendant (marked `data-skdx-toolbar-item`) — one Tab
- * stop into the toolbar, arrow keys move between all items, matching a
- * native OS toolbar. Wraps by default.
+ * Roving-tabindex toolbar: one Tab stop, arrow keys move between items. Wraps by default.
+ * Requires `aria-label` / `aria-labelledby`; unnamed toolbar is indistinguishable.
+ * APG: Use only with 3+ controls; no nested arrow-key owners (Tabs, Slider, etc).
+ * Exception: `ToolbarToggleGroup` groups state without claiming keys.
  *
  * @example
  * ```tsx

package/dist/toolbar/Toolbar.d.ts

@@ -6,18 +6,17 @@ export declare const ToolbarProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useToolbarContext: (consumerName: string) => ToolbarContextValue;
-/** @internal Registers a toolbar descendant in the roving-tabindex group, returning its `id`, `tabIndex`, and a focus handler that claims the tab stop. */
+/** @internal Registers toolbar item; returns `id`, `tabIndex`, and focus handler. */
 export declare function useToolbarItem(disabled?: boolean): {
     readonly id: string;
     readonly tabIndex: 0 | -1;
     readonly handleFocus: () => void;
 };
 /**
- * Root of a toolbar: renders a `<div role="toolbar">` with a single
- * roving-tabindex group spanning every `ToolbarButton` / `ToolbarLink` /
- * `ToolbarToggleItem` descendant (marked `data-skdx-toolbar-item`) — one Tab
- * stop into the toolbar, arrow keys move between all items, matching a
- * native OS toolbar. Wraps by default.
+ * Roving-tabindex toolbar: one Tab stop, arrow keys move between items. Wraps by default.
+ * Requires `aria-label` / `aria-labelledby`; unnamed toolbar is indistinguishable.
+ * APG: Use only with 3+ controls; no nested arrow-key owners (Tabs, Slider, etc).
+ * Exception: `ToolbarToggleGroup` groups state without claiming keys.
  *
  * @example
  * ```tsx

package/dist/toolbar/Toolbar.js

@@ -1 +1 @@
-import*as s from"react";import{useComposedRefs as D}from"../utils/composeRefs.js";import{createSafeContext as M}from"../utils/createContext.js";import{skdxPart as w}from"../utils/part.js";import{composeEventHandlers as B,Primitive as A}from"../utils/primitive.js";import{rovingTabIndex as V,useRovingFocus as z,useRovingTabStop as K}from"../utils/useRovingFocus.js";import{jsx as g}from"react/jsx-runtime";var f="[data-skdx-toolbar-item]:not([disabled])",[O,c]=M("Toolbar");function p(e=!1){let t=s.useId(),o=c("Toolbar item"),a=o.currentTabStopId===t,r=s.useCallback(()=>{o.setCurrentTabStopId(t)},[o,t]),l=V(o.currentTabStopId!==null,a,e);return{id:t,tabIndex:l,handleFocus:r}}var _=s.forwardRef(({orientation:e="horizontal",loop:t=!0,...o},a)=>{let[r,l]=s.useState(null),n=s.useRef(null),i=D(a,n),u=z({orientation:e,loop:t,itemSelector:f});return K(n,f,"data-skdx-toolbar-item",r,l),g(O,{orientation:e,currentTabStopId:r,setCurrentTabStopId:l,children:g(A.div,{role:"toolbar","aria-orientation":e,"data-orientation":e,...o,...w("toolbar","root",o.className),ref:i,onKeyDown:B(o.onKeyDown,u)})})});_.displayName="Toolbar";import*as v from"react";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as J,Primitive as Q}from"../utils/primitive.js";import{jsx as U}from"react/jsx-runtime";var x=v.forwardRef((e,t)=>{let o=p(e.disabled);return U(Q.button,{type:"button","data-skdx-toolbar-item":o.id,"data-disabled":e.disabled?"":void 0,tabIndex:o.tabIndex,disabled:e.disabled,...e,...q("toolbar","button",e.className),ref:t,onFocus:J(e.onFocus,o.handleFocus)})});x.displayName="ToolbarButton";import*as P from"react";import{skdxPart as W}from"../utils/part.js";import{composeEventHandlers as X,Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var I=P.forwardRef((e,t)=>{let o=p();return Z(Y.a,{"data-skdx-toolbar-item":o.id,tabIndex:o.tabIndex,...e,...W("toolbar","link",e.className),ref:t,onFocus:X(e.onFocus,o.handleFocus)})});I.displayName="ToolbarLink";import*as R from"react";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{jsx as oo}from"react/jsx-runtime";var y=R.forwardRef((e,t)=>{let o=c("ToolbarSeparator"),a=o.orientation==="horizontal"?"vertical":"horizontal";return oo(j.div,{role:"separator","aria-orientation":a,"data-orientation":o.orientation,...e,...$("toolbar","separator",e.className),ref:t})});y.displayName="ToolbarSeparator";import*as d from"react";import{createSafeContext as eo}from"../utils/createContext.js";import{skdxPart as to}from"../utils/part.js";import{Primitive as ro}from"../utils/primitive.js";import{useControllableState as ao}from"../utils/useControllableState.js";import{jsx as C}from"react/jsx-runtime";var[lo,k]=eo("ToolbarToggleGroup"),S=d.forwardRef((e,t)=>{let{type:o,value:a,defaultValue:r,onValueChange:l,disabled:n=!1,...i}=e,u=d.useMemo(()=>a===void 0?void 0:Array.isArray(a)?a:[a].filter(Boolean),[a]),[N=[],b]=ao({prop:u,defaultProp:r===void 0?[]:Array.isArray(r)?r:[r],onChange:m=>{l?.(o==="single"?m[0]??"":m)}}),h=d.useCallback(m=>{b((T=[])=>o==="single"?[m]:[...T,m])},[b,o]),F=d.useCallback(m=>{b((T=[])=>T.filter(H=>H!==m))},[b]);return C(lo,{type:o,value:N,disabled:n,onItemActivate:h,onItemDeactivate:F,children:C(ro.div,{role:"group","data-disabled":n?"":void 0,...i,...to("toolbar","toggle-group",i.className),ref:t})})});S.displayName="ToolbarToggleGroup";import*as L from"react";import{skdxPart as no}from"../utils/part.js";import{composeEventHandlers as G,Primitive as so}from"../utils/primitive.js";import{jsx as io}from"react/jsx-runtime";var E=L.forwardRef(({value:e,disabled:t,...o},a)=>{let r=k("ToolbarToggleItem"),l=r.value.includes(e),n=r.disabled||t||!1,i=p(n);return io(so.button,{type:"button","aria-pressed":l,"data-skdx-toolbar-item":i.id,"data-state":l?"on":"off","data-disabled":n?"":void 0,disabled:n,tabIndex:i.tabIndex,...o,...no("toolbar","toggle-item",o.className),ref:a,onFocus:G(o.onFocus,i.handleFocus),onClick:G(o.onClick,()=>{n||(l?r.type==="multiple"&&r.onItemDeactivate(e):r.onItemActivate(e))})})});E.displayName="ToolbarToggleItem";export{_ as Toolbar,x as ToolbarButton,I as ToolbarLink,O as ToolbarProvider,y as ToolbarSeparator,S as ToolbarToggleGroup,E as ToolbarToggleItem,c as useToolbarContext,p as useToolbarItem};
+import*as i from"react";import{useComposedRefs as j}from"../utils/composeRefs.js";import{createSafeContext as oo}from"../utils/createContext.js";import{skdxPart as eo}from"../utils/part.js";import{composeEventHandlers as to,Primitive as ro}from"../utils/primitive.js";import{rovingTabIndex as ao,useRovingFocus as lo,useRovingTabStop as no}from"../utils/useRovingFocus.js";import*as v from"react";import{skdxPart as H}from"../utils/part.js";import{composeEventHandlers as w,Primitive as V}from"../utils/primitive.js";import{jsx as B}from"react/jsx-runtime";var u=v.forwardRef((t,r)=>{let e=m(t.disabled);return B(V.button,{type:"button","data-skdx-toolbar-item":e.id,"data-disabled":t.disabled?"":void 0,tabIndex:e.tabIndex,disabled:t.disabled,...t,...H("toolbar","button",t.className),ref:r,onFocus:w(t.onFocus,e.handleFocus)})});u.displayName="ToolbarButton";import*as I from"react";import{skdxPart as D}from"../utils/part.js";import{composeEventHandlers as M,Primitive as z}from"../utils/primitive.js";import{jsx as A}from"react/jsx-runtime";var T=I.forwardRef((t,r)=>{let e=m();return A(z.a,{"data-skdx-toolbar-item":e.id,tabIndex:e.tabIndex,...t,...D("toolbar","link",t.className),ref:r,onFocus:M(t.onFocus,e.handleFocus)})});T.displayName="ToolbarLink";import*as R from"react";import{skdxPart as K}from"../utils/part.js";import{Primitive as O}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var c=R.forwardRef((t,r)=>{let e=f("ToolbarSeparator"),o=e.orientation==="horizontal"?"vertical":"horizontal";return _(O.div,{role:"separator","aria-orientation":o,"data-orientation":e.orientation,...t,...K("toolbar","separator",t.className),ref:r})});c.displayName="ToolbarSeparator";import*as k from"react";import{createSafeContext as q}from"../utils/createContext.js";import{skdxPart as J}from"../utils/part.js";import{Primitive as Q}from"../utils/primitive.js";import{useSelection as U}from"../utils/useSelection.js";import{jsx as P}from"react/jsx-runtime";var[W,C]=q("ToolbarToggleGroup"),g=k.forwardRef((t,r)=>{let{type:e,value:o,defaultValue:s,onValueChange:l,disabled:n=!1,...a}=t,{selectedValues:p,selectItem:b}=U({value:o,defaultValue:s,onValueChange:l,multiple:e==="multiple",label:"ToolbarToggleGroup"});return P(W,{type:e,value:p,disabled:n,onItemToggle:b,children:P(Q.div,{role:"group","data-disabled":n?"":void 0,...a,...J("toolbar","toggle-group",a.className),ref:r})})});g.displayName="ToolbarToggleGroup";import*as h from"react";import{skdxPart as X}from"../utils/part.js";import{composeEventHandlers as S,Primitive as Y}from"../utils/primitive.js";import{jsx as Z}from"react/jsx-runtime";var x=h.forwardRef(({value:t,disabled:r,...e},o)=>{let s=C("ToolbarToggleItem"),l=s.value.includes(t),n=s.disabled||r||!1,a=m(n);return Z(Y.button,{type:"button","aria-pressed":l,"data-skdx-toolbar-item":a.id,"data-state":l?"on":"off","data-disabled":n?"":void 0,disabled:n,tabIndex:a.tabIndex,...e,...X("toolbar","toggle-item",e.className),ref:o,onFocus:S(e.onFocus,a.handleFocus),onClick:S(e.onClick,()=>{n||s.onItemToggle(t)})})});x.displayName="ToolbarToggleItem";import{Fragment as $,jsx as d}from"react/jsx-runtime";var E=({items:t=[],renderItem:r})=>{let e=o=>r?r(o):"label"in o?o.label:null;return d($,{children:t.map((o,s)=>{let l=String(s);if(!("type"in o))return d(u,{disabled:o.disabled,onClick:o.onClick,children:e(o)},l);switch(o.type){case"link":return d(T,{href:o.href,"aria-disabled":o.disabled||void 0,children:e(o)},l);case"separator":return d(c,{},l);case"toggle-group":{let n=o.mode??"single";return d(g,{type:n,value:o.value,disabled:o.disabled,onValueChange:a=>o.onValueChange?.(n==="multiple"?a.value:a.selectedValue??""),children:o.items.map(a=>d(x,{value:a.value,disabled:a.disabled,children:e(a)},a.value))},l)}}})})};import{jsx as y}from"react/jsx-runtime";var G="[data-skdx-toolbar-item]:not([disabled])",[so,f]=oo("Toolbar");function m(t=!1){let r=i.useId(),e=f("Toolbar item"),o=e.currentTabStopId===r,s=i.useCallback(()=>{e.setCurrentTabStopId(r)},[e,r]),l=ao(e.currentTabStopId!==null,o,t);return{id:r,tabIndex:l,handleFocus:s}}var L=i.forwardRef(({children:t,items:r,renderItem:e,orientation:o="horizontal",loop:s=!0,...l},n)=>{let[a,p]=i.useState(null),b=i.useRef(null),N=j(n,b),F=lo({orientation:o,loop:s,itemSelector:G});return no(b,G,"data-skdx-toolbar-item",a,p),y(so,{orientation:o,currentTabStopId:a,setCurrentTabStopId:p,children:y(ro.div,{role:"toolbar","aria-orientation":o,"data-orientation":o,...l,...eo("toolbar","root",l.className),ref:N,onKeyDown:to(l.onKeyDown,F),children:t??y(E,{items:r,renderItem:e})})})});L.displayName="Toolbar";export{L as Toolbar,u as ToolbarButton,T as ToolbarLink,so as ToolbarProvider,c as ToolbarSeparator,g as ToolbarToggleGroup,W as ToolbarToggleGroupProvider,x as ToolbarToggleItem,f as useToolbarContext,m as useToolbarItem,C as useToolbarToggleGroupContext};

package/dist/toolbar/ToolbarAnatomy.d.cts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { ToolbarItem } from './types.cjs';
+/**
+ * Default anatomy for {@link Toolbar}: renders buttons, links, separators, or toggle groups based on `items`.
+ *
+ * @internal
+ */
+export declare const ToolbarAnatomy: ({ items, renderItem, }: {
+    items?: ToolbarItem[];
+    renderItem?: (item: ToolbarItem) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/toolbar/ToolbarAnatomy.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { ToolbarItem } from './types.js';
+/**
+ * Default anatomy for {@link Toolbar}: renders buttons, links, separators, or toggle groups based on `items`.
+ *
+ * @internal
+ */
+export declare const ToolbarAnatomy: ({ items, renderItem, }: {
+    items?: ToolbarItem[];
+    renderItem?: (item: ToolbarItem) => React.ReactNode;
+}) => React.JSX.Element;

package/dist/toolbar/ToolbarButton.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { ToolbarButtonProps } from './types.cjs';
 /**
- * A plain action button in the toolbar: renders a `<button type="button">`
- * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group
- * (`tabIndex` of `0` only for the current stop, `-1` otherwise; focusing it
- * makes it the current stop).
+ * Action button in the toolbar with roving-tabindex: `tabIndex` is `0` only for the current stop, `-1` otherwise. Focusing it makes it the current stop.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarButton.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { ToolbarButtonProps } from './types.js';
 /**
- * A plain action button in the toolbar: renders a `<button type="button">`
- * marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group
- * (`tabIndex` of `0` only for the current stop, `-1` otherwise; focusing it
- * makes it the current stop).
+ * Action button in the toolbar with roving-tabindex: `tabIndex` is `0` only for the current stop, `-1` otherwise. Focusing it makes it the current stop.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarLink.d.cts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { ToolbarLinkProps } from './types.cjs';
 /**
- * A plain navigable link in the toolbar: renders an `<a>` marked
- * `data-skdx-toolbar-item` and joins the root's roving-tabindex group
- * (`tabIndex` of `0` only for the current stop, `-1` otherwise; focusing it
- * makes it the current stop).
+ * A navigable link in the toolbar. Renders an `<a>` marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarLink.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import type { ToolbarLinkProps } from './types.js';
 /**
- * A plain navigable link in the toolbar: renders an `<a>` marked
- * `data-skdx-toolbar-item` and joins the root's roving-tabindex group
- * (`tabIndex` of `0` only for the current stop, `-1` otherwise; focusing it
- * makes it the current stop).
+ * A navigable link in the toolbar. Renders an `<a>` marked `data-skdx-toolbar-item` and joins the root's roving-tabindex group.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarSeparator.d.cts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { ToolbarSeparatorProps } from './types.cjs';
 /**
- * Visual divider between toolbar controls: renders a
- * `<div role="separator">` whose `aria-orientation` is the opposite of the
- * toolbar's own orientation (a divider drawn across a horizontal toolbar is
- * itself vertical), and `data-orientation` matching the toolbar's.
+ * Visual divider between toolbar controls: renders a `<div role="separator">`
+ * whose `aria-orientation` is the opposite of the toolbar's, and
+ * `data-orientation` matching the toolbar's.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarSeparator.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { ToolbarSeparatorProps } from './types.js';
 /**
- * Visual divider between toolbar controls: renders a
- * `<div role="separator">` whose `aria-orientation` is the opposite of the
- * toolbar's own orientation (a divider drawn across a horizontal toolbar is
- * itself vertical), and `data-orientation` matching the toolbar's.
+ * Visual divider between toolbar controls: renders a `<div role="separator">`
+ * whose `aria-orientation` is the opposite of the toolbar's, and
+ * `data-orientation` matching the toolbar's.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarToggleGroup.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ToolbarToggleGroupContextValue } from './types.cjs';
+import type { ToolbarToggleGroupContextValue, ToolbarToggleGroupProps } from './types.cjs';
 export declare const ToolbarToggleGroupProvider: {
     (props: ToolbarToggleGroupContextValue & {
         children: React.ReactNode;
@@ -7,12 +7,8 @@ export declare const ToolbarToggleGroupProvider: {
     displayName: string;
 }, useToolbarToggleGroupContext: (consumerName: string) => ToolbarToggleGroupContextValue;
 /**
- * Groups a set of {@link ToolbarToggleItem}s and owns their pressed state:
- * renders a `<div role="group">` with `data-disabled` when `disabled`.
- * `type="single"` keeps at most one item pressed at a time (pressing one
- * unpresses any other); `type="multiple"` allows any number pressed at once.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Groups {@link ToolbarToggleItem}s with exclusive (`single`) or multi (`multiple`)
+ * selection. Works controlled or uncontrolled.
  *
  * @example
  * ```tsx
@@ -22,4 +18,4 @@ export declare const ToolbarToggleGroupProvider: {
  * </ToolbarToggleGroup>
  * ```
  */
-export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.cjs").ToolbarToggleGroupSingleProps, "ref"> | Omit<import("./types.cjs").ToolbarToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<Omit<ToolbarToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarToggleGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ToolbarToggleGroupContextValue } from './types.js';
+import type { ToolbarToggleGroupContextValue, ToolbarToggleGroupProps } from './types.js';
 export declare const ToolbarToggleGroupProvider: {
     (props: ToolbarToggleGroupContextValue & {
         children: React.ReactNode;
@@ -7,12 +7,8 @@ export declare const ToolbarToggleGroupProvider: {
     displayName: string;
 }, useToolbarToggleGroupContext: (consumerName: string) => ToolbarToggleGroupContextValue;
 /**
- * Groups a set of {@link ToolbarToggleItem}s and owns their pressed state:
- * renders a `<div role="group">` with `data-disabled` when `disabled`.
- * `type="single"` keeps at most one item pressed at a time (pressing one
- * unpresses any other); `type="multiple"` allows any number pressed at once.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Groups {@link ToolbarToggleItem}s with exclusive (`single`) or multi (`multiple`)
+ * selection. Works controlled or uncontrolled.
  *
  * @example
  * ```tsx
@@ -22,4 +18,4 @@ export declare const ToolbarToggleGroupProvider: {
  * </ToolbarToggleGroup>
  * ```
  */
-export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.js").ToolbarToggleGroupSingleProps, "ref"> | Omit<import("./types.js").ToolbarToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<Omit<ToolbarToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarToggleItem.d.cts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { ToolbarToggleItemProps } from './types.cjs';
 /**
- * A single pressable option within a `ToolbarToggleGroup`: renders a
- * `<button type="button">` marked `data-skdx-toolbar-item` (joining the
- * toolbar's roving-tabindex group) with `aria-pressed` and `data-state` of
- * `"on"` or `"off"`. Clicking it presses the item (and, in a `"single"`
- * group, unpresses any other); clicking a pressed item in a `"multiple"`
- * group unpresses it. Disabled when the group is `disabled` or its own
- * `disabled` prop is set.
+ * Pressable option in `ToolbarToggleGroup` — `<button>` with `aria-pressed` and `data-state`.
  *
  * @example
  * ```tsx

package/dist/toolbar/ToolbarToggleItem.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
 import type { ToolbarToggleItemProps } from './types.js';
 /**
- * A single pressable option within a `ToolbarToggleGroup`: renders a
- * `<button type="button">` marked `data-skdx-toolbar-item` (joining the
- * toolbar's roving-tabindex group) with `aria-pressed` and `data-state` of
- * `"on"` or `"off"`. Clicking it presses the item (and, in a `"single"`
- * group, unpresses any other); clicking a pressed item in a `"multiple"`
- * group unpresses it. Disabled when the group is `disabled` or its own
- * `disabled` prop is set.
+ * Pressable option in `ToolbarToggleGroup` — `<button>` with `aria-pressed` and `data-state`.
  *
  * @example
  * ```tsx

package/dist/toolbar/index.d.cts

@@ -1,7 +1,3 @@
-export * from './Toolbar.cjs';
-export { ToolbarButton } from './ToolbarButton.cjs';
-export { ToolbarLink } from './ToolbarLink.cjs';
-export { ToolbarSeparator } from './ToolbarSeparator.cjs';
-export { ToolbarToggleGroup } from './ToolbarToggleGroup.cjs';
-export { ToolbarToggleItem } from './ToolbarToggleItem.cjs';
-export type { ToolbarProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarSeparatorProps, ToolbarToggleGroupSingleProps, ToolbarToggleGroupMultipleProps, ToolbarToggleGroupProps, ToolbarToggleItemProps, } from './types.cjs';
+export { Toolbar } from './Toolbar.cjs';
+export type { ToolbarProps, ToolbarItem } from './types.cjs';
+export type { SelectionChangeDetail } from '../utils/useSelection.cjs';

package/dist/toolbar/index.d.ts

@@ -1,7 +1,3 @@
-export * from './Toolbar.js';
-export { ToolbarButton } from './ToolbarButton.js';
-export { ToolbarLink } from './ToolbarLink.js';
-export { ToolbarSeparator } from './ToolbarSeparator.js';
-export { ToolbarToggleGroup } from './ToolbarToggleGroup.js';
-export { ToolbarToggleItem } from './ToolbarToggleItem.js';
-export type { ToolbarProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarSeparatorProps, ToolbarToggleGroupSingleProps, ToolbarToggleGroupMultipleProps, ToolbarToggleGroupProps, ToolbarToggleItemProps, } from './types.js';
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarProps, ToolbarItem } from './types.js';
+export type { SelectionChangeDetail } from '../utils/useSelection.js';

package/dist/toolbar/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `Toolbar` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from '@skdx/react/primitives/toolbar';
+ *
+ * <Toolbar aria-label="Formatting">
+ *   <ToolbarToggleGroup type="multiple">
+ *     <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ *   </ToolbarToggleGroup>
+ *   <ToolbarSeparator />
+ *   <ToolbarLink href="/help">Help</ToolbarLink>
+ * </Toolbar>
+ * ```
+ */
+export { Toolbar } from './Toolbar.cjs';
+export { ToolbarButton } from './ToolbarButton.cjs';
+export { ToolbarLink } from './ToolbarLink.cjs';
+export { ToolbarSeparator } from './ToolbarSeparator.cjs';
+export { ToolbarToggleGroup } from './ToolbarToggleGroup.cjs';
+export { ToolbarToggleItem } from './ToolbarToggleItem.cjs';
+export type { ToolbarProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarSeparatorProps, ToolbarToggleGroupProps, ToolbarToggleItemProps, } from './types.cjs';

package/dist/toolbar/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `Toolbar` — the parts the recipe composes.
+ *
+ * @example
+ * ```tsx
+ * import { Toolbar, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem } from '@skdx/react/primitives/toolbar';
+ *
+ * <Toolbar aria-label="Formatting">
+ *   <ToolbarToggleGroup type="multiple">
+ *     <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ *   </ToolbarToggleGroup>
+ *   <ToolbarSeparator />
+ *   <ToolbarLink href="/help">Help</ToolbarLink>
+ * </Toolbar>
+ * ```
+ */
+export { Toolbar } from './Toolbar.js';
+export { ToolbarButton } from './ToolbarButton.js';
+export { ToolbarLink } from './ToolbarLink.js';
+export { ToolbarSeparator } from './ToolbarSeparator.js';
+export { ToolbarToggleGroup } from './ToolbarToggleGroup.js';
+export { ToolbarToggleItem } from './ToolbarToggleItem.js';
+export type { ToolbarProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarSeparatorProps, ToolbarToggleGroupProps, ToolbarToggleItemProps, } from './types.js';