@skdx/react 0.26.0

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

@@ -0,0 +1,18 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="multiple" defaultValue={['bold']}>
+ *   <ToggleGroupItem value="bold">B</ToggleGroupItem>
+ *   <ToggleGroupItem value="italic">I</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,18 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToggleGroup type="multiple" defaultValue={['bold']}>
+ *   <ToggleGroupItem value="bold">B</ToggleGroupItem>
+ *   <ToggleGroupItem value="italic">I</ToggleGroupItem>
+ * </ToggleGroup>
+ * ```
+ */
+export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

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

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

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

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

@@ -0,0 +1,65 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { Orientation } from '../utils/useRovingFocus.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. */
+export interface ToggleGroupContextValue {
+    type: ToggleGroupType;
+    value: string[];
+    disabled: boolean;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (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.
+     * `null` only before that has been resolved, or when every item is disabled.
+     */
+    firstEnabledValue: string | null;
+}
+/** Shared props for the {@link ToggleGroup} root, regardless of `type`. */
+export interface ToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables every item in the group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis for arrow-key roving focus between items, exposed as
+     * `data-orientation`.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/** 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;
+/** Props for a single {@link ToggleGroupItem}. */
+export interface ToggleGroupItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier compared against the group's pressed value(s). */
+    value: string;
+}

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

@@ -0,0 +1,65 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { Orientation } from '../utils/useRovingFocus.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. */
+export interface ToggleGroupContextValue {
+    type: ToggleGroupType;
+    value: string[];
+    disabled: boolean;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (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.
+     * `null` only before that has been resolved, or when every item is disabled.
+     */
+    firstEnabledValue: string | null;
+}
+/** Shared props for the {@link ToggleGroup} root, regardless of `type`. */
+export interface ToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables every item in the group.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis for arrow-key roving focus between items, exposed as
+     * `data-orientation`.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/** 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;
+/** Props for a single {@link ToggleGroupItem}. */
+export interface ToggleGroupItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier compared against the group's pressed value(s). */
+    value: string;
+}

package/dist/toolbar/Toolbar.cjs

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

package/dist/toolbar/Toolbar.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { ToolbarContextValue, ToolbarProps } from './types.cjs';
+export declare const ToolbarProvider: {
+    (props: ToolbarContextValue & {
+        children: React.ReactNode;
+    }): 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. */
+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.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <ToolbarToggleGroup type="multiple" value={marks} onValueChange={setMarks}>
+ *     <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ *     <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
+ *   </ToolbarToggleGroup>
+ *   <ToolbarSeparator />
+ *   <ToolbarButton onClick={print}>Print</ToolbarButton>
+ *   <ToolbarLink href="/help">Help</ToolbarLink>
+ * </Toolbar>
+ * ```
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/Toolbar.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { ToolbarContextValue, ToolbarProps } from './types.js';
+export declare const ToolbarProvider: {
+    (props: ToolbarContextValue & {
+        children: React.ReactNode;
+    }): 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. */
+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.
+ *
+ * @example
+ * ```tsx
+ * <Toolbar aria-label="Text formatting">
+ *   <ToolbarToggleGroup type="multiple" value={marks} onValueChange={setMarks}>
+ *     <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ *     <ToolbarToggleItem value="italic">Italic</ToolbarToggleItem>
+ *   </ToolbarToggleGroup>
+ *   <ToolbarSeparator />
+ *   <ToolbarButton onClick={print}>Print</ToolbarButton>
+ *   <ToolbarLink href="/help">Help</ToolbarLink>
+ * </Toolbar>
+ * ```
+ */
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/Toolbar.js

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

package/dist/toolbar/ToolbarButton.d.cts

@@ -0,0 +1,14 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarButton onClick={print}>Print</ToolbarButton>
+ * ```
+ */
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,14 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarButton onClick={print}>Print</ToolbarButton>
+ * ```
+ */
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolbar/ToolbarLink.d.cts

@@ -0,0 +1,14 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarLink href="/help">Help</ToolbarLink>
+ * ```
+ */
+export declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/toolbar/ToolbarLink.d.ts

@@ -0,0 +1,14 @@
+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).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarLink href="/help">Help</ToolbarLink>
+ * ```
+ */
+export declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/toolbar/ToolbarSeparator.d.cts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarButton onClick={bold}>Bold</ToolbarButton>
+ * <ToolbarSeparator />
+ * <ToolbarButton onClick={italic}>Italic</ToolbarButton>
+ * ```
+ */
+export declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarSeparator.d.ts

@@ -0,0 +1,16 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarButton onClick={bold}>Bold</ToolbarButton>
+ * <ToolbarSeparator />
+ * <ToolbarButton onClick={italic}>Italic</ToolbarButton>
+ * ```
+ */
+export declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarToggleGroup.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ToolbarToggleGroupContextValue } from './types.cjs';
+export declare const ToolbarToggleGroupProvider: {
+    (props: ToolbarToggleGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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`).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarToggleGroup type="single" value={align} onValueChange={setAlign}>
+ *   <ToolbarToggleItem value="left">Left</ToolbarToggleItem>
+ *   <ToolbarToggleItem value="center">Center</ToolbarToggleItem>
+ * </ToolbarToggleGroup>
+ * ```
+ */
+export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.cjs").ToolbarToggleGroupSingleProps, "ref"> | Omit<import("./types.cjs").ToolbarToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarToggleGroup.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { ToolbarToggleGroupContextValue } from './types.js';
+export declare const ToolbarToggleGroupProvider: {
+    (props: ToolbarToggleGroupContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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`).
+ *
+ * @example
+ * ```tsx
+ * <ToolbarToggleGroup type="single" value={align} onValueChange={setAlign}>
+ *   <ToolbarToggleItem value="left">Left</ToolbarToggleItem>
+ *   <ToolbarToggleItem value="center">Center</ToolbarToggleItem>
+ * </ToolbarToggleGroup>
+ * ```
+ */
+export declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<import("./types.js").ToolbarToggleGroupSingleProps, "ref"> | Omit<import("./types.js").ToolbarToggleGroupMultipleProps, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/dist/toolbar/ToolbarToggleItem.d.cts

@@ -0,0 +1,17 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ * ```
+ */
+export declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<ToolbarToggleItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolbar/ToolbarToggleItem.d.ts

@@ -0,0 +1,17 @@
+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.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarToggleItem value="bold">Bold</ToolbarToggleItem>
+ * ```
+ */
+export declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<ToolbarToggleItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/toolbar/index.d.cts

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

package/dist/toolbar/index.d.ts

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

package/dist/toolbar/types.d.cts

@@ -0,0 +1,80 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Layout axis of a {@link Toolbar}, driving `aria-orientation` and the arrow keys used for roving-tabindex navigation. */
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+/** @internal Shared state distributed from {@link Toolbar} to its parts via context. Not part of the public API. */
+export interface ToolbarContextValue {
+    orientation: ToolbarOrientation;
+    currentTabStopId: string | null;
+    setCurrentTabStopId: (id: string) => void;
+}
+/** Props for the {@link Toolbar} root. */
+export interface ToolbarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Layout axis, exposed as `aria-orientation`/`data-orientation` and used to
+     * pick Arrow Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
+     * @default 'horizontal'
+     */
+    orientation?: ToolbarOrientation;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/** Props for {@link ToolbarButton}, a plain action button in the toolbar. */
+export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link ToolbarLink}, a plain navigable link in the toolbar. */
+export interface ToolbarLinkProps extends PrimitivePropsWithRef<'a'> {
+}
+/** Props for {@link ToolbarSeparator}, a visual divider between toolbar controls. */
+export interface ToolbarSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Whether a {@link ToolbarToggleGroup} allows one pressed item (`'single'`) or several (`'multiple'`). */
+export type ToolbarToggleGroupType = 'single' | 'multiple';
+/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. Not part of the public API. */
+export interface ToolbarToggleGroupContextValue {
+    type: ToolbarToggleGroupType;
+    value: string[];
+    disabled: boolean;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (value: string) => void;
+}
+/** Props shared by both {@link ToolbarToggleGroupSingleProps} and {@link ToolbarToggleGroupMultipleProps}. */
+export interface ToolbarToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables every `ToolbarToggleItem` in the group.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for a {@link ToolbarToggleGroup} where at most one item can be pressed at a time. */
+export interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {
+    /** Restricts the group to at most one pressed item. */
+    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 ToolbarToggleGroup} where any number of items can be pressed at once. */
+export interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {
+    /** Allows any number of items to be pressed at once. */
+    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 whenever the pressed set changes, controlled or not. */
+    onValueChange?: (value: string[]) => void;
+}
+/** Props for the {@link ToolbarToggleGroup} root — discriminated on `type` between single and multiple selection. */
+export type ToolbarToggleGroupProps = ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps;
+/** Props for a single {@link ToolbarToggleItem} within a `ToolbarToggleGroup`. */
+export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier tracked in the group's pressed value(s). */
+    value: string;
+}