@skdx/react 0.26.0 → 0.28.0

package/dist/slider/types.d.ts

@@ -1,5 +1,22 @@
 import type * as React from 'react';
+import type { Direction } from '../utils/direction.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/**
+ * Payload of `onValueChange`. `reason` discriminates four change sources
+ * (track press, drag, keyboard, or programmatic). `previousValue` is included
+ * because consumers usually need both ends; `null` only when there was no prior value.
+ */
+export interface SliderValueChangeDetail {
+    /** The values the slider settled on, one per thumb. */
+    value: number[];
+    /** The values held before this change, or `null` when there were none. */
+    previousValue: number[] | null;
+    /**
+     * What drove the change. `'pointer'` covers both a track press and a drag
+     * frame — which of the two it was is readable off the originating event.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
 /** @internal Shared state distributed from {@link Slider} to its parts via context. Not part of the public API. */
 export interface SliderContextValue {
     values: number[];
@@ -7,11 +24,23 @@ export interface SliderContextValue {
     max: number;
     disabled: boolean;
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Resolved once on root so all parts agree on track start. Used to map pointer
+     * and position thumbs.
+     */
+    direction: Direction;
     thumbIndexRef: React.RefObject<number>;
+    /** Index of the thumb a pointer gesture is currently moving, or `null` between gestures. */
+    draggingIndex: number | null;
     rootNode: HTMLSpanElement | null;
-    updateValue: (index: number, value: number) => void;
+    /** `reason` travels with the write, so the emitted detail names the interaction that caused it. */
+    updateValue: (index: number, value: number, reason: SliderValueChangeDetail['reason']) => void;
     step: number;
+    /** Already resolved: the `largeStep` prop, or the derived tenth-of-range fallback. */
+    largeStep: number;
     name?: string;
+    form?: string;
+    thumbLabels?: readonly string[];
 }
 /** Props for the {@link Slider} root. */
 export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
@@ -27,12 +56,15 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      */
     defaultValue?: number[];
     /**
-     * Fires with the new values array on every change during a drag or key press.
+     * Fires on every change during a drag or key press, with the new values, the
+     * values held before them, and the reason the change happened. A change that
+     * resolves to the values already held emits nothing.
      * @default undefined
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: (detail: SliderValueChangeDetail) => void;
     /**
-     * Fires once with the final values array when a drag ends (pointer up).
+     * Fires once with final values when drag ends, suppressed if values unchanged
+     * (bare click already in place).
      * @default undefined
      */
     onValueCommit?: (value: number[]) => void;
@@ -62,11 +94,61 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by.
+     * Defaults to a tenth of the range, floored at one step — the increment
+     * those keys already moved before this prop existed.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep. At `0` two
+     * thumbs may be dragged onto the same value; at `1` the neighbour is pushed
+     * one step away, so a range can never collapse to nothing.
+     * @default 0
+     */
+    minStepsBetweenValues?: number;
     /**
      * Name for native form participation; each thumb renders its own hidden input.
      * @default undefined
      */
     name?: string;
+    /**
+     * Id of the `<form>` the slider submits into, forwarded to every thumb's
+     * hidden input, so a slider can live outside the form it belongs to.
+     * @default undefined
+     */
+    form?: string;
+    /**
+     * Ticks rendered along the track, one derived `SliderMark` part each.
+     * Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly SliderMarkData[];
+    /**
+     * Shows the focused/dragged thumb's current value in a derived
+     * `skdx-slider__tooltip` element beside the thumb, positioned by the skin.
+     * Ignored when `children` is given.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Accessible names for derived thumbs, one per value (e.g. `["Minimum", "Maximum"]`).
+     * Multi-thumb sliders need these so each thumb announces distinctly; `role="slider"`
+     * takes no name from content. Ignored when `children` is given with its own `aria-label`.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[];
+}
+/**
+ * Entry of {@link SliderProps.marks} — a tick with optional label. Named `Data`
+ * to avoid collision with the `SliderMark` part component.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string;
 }
 /** Props for the {@link SliderTrack}, the full-length background bar. */
 export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
@@ -82,9 +164,23 @@ export interface SliderThumbProps extends PrimitivePropsWithRef<'span'> {
      * @default undefined
      */
     index?: number;
+    /**
+     * Announcement for this thumb's value, written to `aria-valuetext`. Supply when
+     * the raw number doesn't match what the user chose (e.g. `"£20"` for price).
+     * @default undefined
+     */
+    valueText?: string;
     /**
      * Accessible name for this thumb, since it has no visible text content.
      * @default undefined
      */
     'aria-label'?: string;
 }
+/** Props for a {@link SliderMark} tick. */
+export interface SliderMarkProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * The value on the track this mark sits at. Positioned with the same
+     * logical inline offset the thumb uses, so it mirrors under `dir="rtl"`.
+     */
+    value: number;
+}

package/dist/speed-dial/SpeedDial.cjs

@@ -1 +1 @@
-"use strict";var ce=Object.create;var I=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Se=Object.prototype.hasOwnProperty;var Pe=(t,n)=>{for(var e in n)I(t,e,{get:n[e],enumerable:!0})},_=(t,n,e,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of ue(n))!Se.call(t,r)&&r!==e&&I(t,r,{get:()=>n[r],enumerable:!(a=fe(n,r))||a.enumerable});return t};var g=(t,n,e)=>(e=t!=null?ce(De(t)):{},_(n||!t||!t.__esModule?I(e,"default",{value:t,enumerable:!0}):e,t)),Re=t=>_(I({},"__esModule",{value:!0}),t);var Te={};Pe(Te,{SpeedDial:()=>w,SpeedDialContent:()=>O,SpeedDialItem:()=>A,SpeedDialItemLabel:()=>H,SpeedDialPortal:()=>v,SpeedDialTrigger:()=>h});module.exports=Re(Te);var l=g(require("react"),1),K=require("../utils/createContext.cjs"),F=require("../utils/popper.cjs"),V=require("../utils/presence.cjs"),q=require("../utils/useControllableState.cjs"),Y=require("../utils/useOpenChangeComplete.cjs"),x=require("react/jsx-runtime"),z='[role="menuitem"]',L='[role="menuitem"]:not([data-disabled])',B={up:"top",down:"bottom",left:"left",right:"right"},[ge,s]=(0,K.createSafeContext)("SpeedDial");function w({children:t,open:n,defaultOpen:e=!1,onOpenChange:a,onOpenChangeComplete:r,direction:p="up",openOnHover:R=!1,hoverCloseDelay:f=300,disabled:d=!1}){let T=l.useRef(null),o=l.useRef(null),m=l.useRef(0),[u=!1,D]=(0,q.useControllableState)({prop:n,defaultProp:e,onChange:a}),C=(0,V.usePresence)(u,o);(0,Y.useOpenChangeComplete)(u,o,r),l.useEffect(()=>()=>window.clearTimeout(m.current),[]);let i=l.useCallback(k=>{window.clearTimeout(m.current),!(k&&d)&&D(k)},[d,D]),M=l.useCallback(()=>{window.clearTimeout(m.current)},[]),me=l.useCallback(()=>{window.clearTimeout(m.current),m.current=window.setTimeout(()=>D(!1),f)},[f,D]);return(0,x.jsx)(F.PopperRoot,{children:(0,x.jsx)(ge,{triggerRef:T,contentRef:o,contentId:l.useId(),open:u,mounted:C,direction:p,disabled:d,openOnHover:R,onOpenChange:i,onPointerEnter:M,onPointerLeave:me,children:t})})}w.displayName="SpeedDial";var U=g(require("react"),1),G=require("../utils/composeRefs.cjs"),J=require("../utils/part.cjs"),Q=require("../utils/popper.cjs"),c=require("../utils/primitive.cjs");var b=require("react/jsx-runtime"),Ce={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},h=U.forwardRef((t,n)=>{let e=s("SpeedDialTrigger"),a=(0,G.useComposedRefs)(n,e.triggerRef),r=e.disabled||t.disabled;return(0,b.jsx)(Q.PopperAnchor,{asChild:!0,children:(0,b.jsx)(c.Primitive.button,{type:"button","aria-haspopup":"menu","aria-expanded":e.open,"aria-controls":e.contentId,"data-state":e.open?"open":"closed","data-direction":e.direction,...t,disabled:r,"data-disabled":r?"":void 0,...(0,J.skdxPart)("speed-dial","trigger",t.className),ref:a,onClick:(0,c.composeEventHandlers)(t.onClick,()=>{e.onOpenChange(!e.open)}),onKeyDown:(0,c.composeEventHandlers)(t.onKeyDown,p=>{Ce[e.direction].includes(p.key)&&(p.preventDefault(),e.onOpenChange(!0))}),onPointerEnter:(0,c.composeEventHandlers)(t.onPointerEnter,p=>{!e.openOnHover||p.pointerType==="touch"||(e.onPointerEnter(),e.onOpenChange(!0))}),onPointerLeave:(0,c.composeEventHandlers)(t.onPointerLeave,p=>{!e.openOnHover||p.pointerType==="touch"||e.onPointerLeave()})})})});h.displayName="SpeedDialTrigger";var W=require("../utils/portal.cjs");var X=require("react/jsx-runtime"),v=({forceMount:t,children:n,...e})=>{let a=s("SpeedDialPortal");return t||a.mounted?(0,X.jsx)(W.Portal,{...e,children:n}):null};v.displayName="SpeedDialPortal";var S=g(require("react"),1),Z=require("../utils/composeRefs.cjs"),$=require("../utils/part.cjs"),j=require("../utils/popper.cjs"),E=require("../utils/primitive.cjs"),ee=require("../utils/useDismiss.cjs"),te=require("../utils/useRovingFocus.cjs");var oe=require("react/jsx-runtime");function Ie(t){S.useLayoutEffect(()=>{t.current?.querySelectorAll(z)?.forEach((e,a)=>{e.style.setProperty("--skdx-speed-dial-index",String(a)),e.style.setProperty("--skdx-speed-dial-offset",String(a+1))})})}var Ee={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},O=S.forwardRef(({forceMount:t,loop:n=!0,onEscapeKeyDown:e,onPointerDownOutside:a,onFocusOutside:r,onInteractOutside:p,align:R="center",sideOffset:f=8,...d},T)=>{let o=s("SpeedDialContent"),m=(0,Z.useComposedRefs)(T,o.contentRef),u=Ee[o.direction],D=(0,te.useRovingFocus)({orientation:u,loop:n,itemSelector:L,typeahead:!0});Ie(o.contentRef);let C=()=>{o.onOpenChange(!1),o.triggerRef.current?.focus()};return(0,ee.useDismiss)({enabled:o.open,onEscapeKeyDown:i=>{e?.(i),i.defaultPrevented||C()},onInteractOutside:p,onPointerDownOutside:i=>{a?.(i),i.defaultPrevented||o.onOpenChange(!1)},onFocusOutside:i=>{r?.(i),i.defaultPrevented||o.onOpenChange(!1)}},[o.contentRef,o.triggerRef]),S.useEffect(()=>{if(!o.open)return;let i=requestAnimationFrame(()=>{(o.contentRef.current?.querySelector(L)??o.contentRef.current)?.focus()});return()=>cancelAnimationFrame(i)},[o.open,o.contentRef]),t||o.mounted?(0,oe.jsx)(j.PopperContent,{component:"speed-dial",role:"menu","aria-orientation":u,id:o.contentId,"data-state":o.open?"open":"closed","data-direction":o.direction,tabIndex:-1,side:B[o.direction],align:R,sideOffset:f,...d,...(0,$.skdxPart)("speed-dial","content",d.className),ref:m,onKeyDown:(0,E.composeEventHandlers)(d.onKeyDown,i=>{D(i),i.key==="Tab"&&(i.preventDefault(),C())}),onPointerEnter:(0,E.composeEventHandlers)(d.onPointerEnter,i=>{o.openOnHover&&i.pointerType!=="touch"&&o.onPointerEnter()}),onPointerLeave:(0,E.composeEventHandlers)(d.onPointerLeave,i=>{o.openOnHover&&i.pointerType!=="touch"&&o.onPointerLeave()})}):null});O.displayName="SpeedDialContent";var y=g(require("react"),1),ne=require("../utils/createContext.cjs"),re=require("../utils/part.cjs"),ie=require("../utils/primitive.cjs"),ae=require("../utils/useMenuItem.cjs");var N=require("react/jsx-runtime"),[ye,pe]=(0,ne.createSafeContext)("SpeedDialItem"),A=y.forwardRef(({disabled:t,onSelect:n,...e},a)=>{let r=s("SpeedDialItem"),[p,R]=y.useState(void 0),f=(0,ae.useMenuItem)({disabled:t,onSelect:n,onSelected:()=>{r.onOpenChange(!1),r.triggerRef.current?.focus()},contentRef:r.contentRef,props:e});return(0,N.jsx)(ye,{labelId:p,setLabelId:R,children:(0,N.jsx)(ie.Primitive.div,{role:"menuitem","aria-labelledby":p,...e,...f,...(0,re.skdxPart)("speed-dial","item",e.className),ref:a})})});A.displayName="SpeedDialItem";var P=g(require("react"),1),le=require("../utils/part.cjs"),de=require("../utils/primitive.cjs");var se=require("react/jsx-runtime"),H=P.forwardRef((t,n)=>{let e=pe("SpeedDialItemLabel"),a=P.useId(),r=t.id??a,{setLabelId:p}=e;return P.useLayoutEffect(()=>(p(r),()=>p(void 0)),[r,p]),(0,se.jsx)(de.Primitive.span,{...t,id:r,...(0,le.skdxPart)("speed-dial","item-label",t.className),ref:n})});H.displayName="SpeedDialItemLabel";0&&(module.exports={SpeedDial,SpeedDialContent,SpeedDialItem,SpeedDialItemLabel,SpeedDialPortal,SpeedDialTrigger});
+"use strict";var Ee=Object.create;var E=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var Oe=Object.getOwnPropertyNames;var be=Object.getPrototypeOf,Le=Object.prototype.hasOwnProperty;var Ae=(t,r)=>{for(var e in r)E(t,e,{get:r[e],enumerable:!0})},U=(t,r,e,p)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of Oe(r))!Le.call(t,n)&&n!==e&&E(t,n,{get:()=>r[n],enumerable:!(p=xe(r,n))||p.enumerable});return t};var y=(t,r,e)=>(e=t!=null?Ee(be(t)):{},U(r||!t||!t.__esModule?E(e,"default",{value:t,enumerable:!0}):e,t)),He=t=>U(E({},"__esModule",{value:!0}),t);var _e={};Ae(_e,{ANY_ITEM_SELECTOR:()=>K,DIRECTION_SIDE:()=>F,ITEM_SELECTOR:()=>O,SpeedDial:()=>B,SpeedDialContent:()=>b,SpeedDialItem:()=>A,SpeedDialItemLabel:()=>H,SpeedDialItemProvider:()=>oe,SpeedDialOverlay:()=>N,SpeedDialPortal:()=>k,SpeedDialProvider:()=>Ce,SpeedDialRoot:()=>z,SpeedDialTrigger:()=>M,useSpeedDialContext:()=>c,useSpeedDialItemContext:()=>q});module.exports=He(_e);var l=y(require("react"),1),Re=require("../utils/createContext.cjs"),Pe=require("../utils/popper.cjs"),ge=require("../utils/presence.cjs"),ye=require("../utils/useControllableState.cjs"),ve=require("../utils/useOpenChangeComplete.cjs");var v=y(require("react"),1),W=require("../utils/composeRefs.cjs"),G=require("../utils/part.cjs"),J=require("../utils/popper.cjs"),x=require("../utils/primitive.cjs"),Q=require("../utils/useDismiss.cjs"),X=require("../utils/useRovingFocus.cjs");var Z=require("react/jsx-runtime");function Ne(t){v.useLayoutEffect(()=>{t.current?.querySelectorAll(K)?.forEach((e,p)=>{e.style.setProperty("--skdx-speed-dial-index",String(p)),e.style.setProperty("--skdx-speed-dial-offset",String(p+1))})})}var ke={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},b=v.forwardRef(({forceMount:t,loop:r=!0,onEscapeKeyDown:e,onPointerDownOutside:p,onFocusOutside:n,onInteractOutside:i,align:f="center",sideOffset:R=8,...d},u)=>{let o=c("SpeedDialContent"),S=(0,W.useComposedRefs)(u,o.contentRef),s=ke[o.direction],D=(0,X.useRovingFocus)({orientation:s,loop:r,itemSelector:O,typeahead:!0});Ne(o.contentRef);let I=()=>{o.onOpenChange(!1),o.triggerRef.current?.focus()};return(0,Q.useDismiss)({enabled:o.open,onEscapeKeyDown:a=>{e?.(a),a.defaultPrevented||I()},onInteractOutside:i,onPointerDownOutside:a=>{p?.(a),a.defaultPrevented||o.onOpenChange(!1)},onFocusOutside:a=>{n?.(a),a.defaultPrevented||o.onOpenChange(!1)}},[o.contentRef,o.triggerRef]),v.useEffect(()=>{if(!o.open||o.openReason.current==="hover")return;let a=requestAnimationFrame(()=>{(o.contentRef.current?.querySelector(O)??o.contentRef.current)?.focus({preventScroll:!0})});return()=>cancelAnimationFrame(a)},[o.open,o.contentRef,o.openReason]),t||o.mounted?(0,Z.jsx)(J.PopperContent,{component:"speed-dial",role:"menu","aria-orientation":s,"aria-labelledby":o.triggerId,id:o.contentId,"data-state":o.open?"open":"closed","data-direction":o.direction,tabIndex:-1,side:F[o.direction],align:f,sideOffset:R,...d,...(0,G.skdxPart)("speed-dial","content",d.className),ref:S,onKeyDown:(0,x.composeEventHandlers)(d.onKeyDown,a=>{D(a),a.key==="Tab"&&(a.preventDefault(),I())}),onPointerEnter:(0,x.composeEventHandlers)(d.onPointerEnter,a=>{o.openOnHover&&a.pointerType!=="touch"&&o.onPointerEnter()}),onPointerLeave:(0,x.composeEventHandlers)(d.onPointerLeave,a=>{o.openOnHover&&a.pointerType!=="touch"&&o.onPointerLeave()})}):null});b.displayName="SpeedDialContent";var L=y(require("react"),1),$=require("../utils/createContext.cjs"),j=require("../utils/part.cjs"),ee=require("../utils/primitive.cjs"),te=require("../utils/useMenuItem.cjs");var V=require("react/jsx-runtime"),[oe,q]=(0,$.createSafeContext)("SpeedDialItem"),A=L.forwardRef(({disabled:t,onSelect:r,...e},p)=>{let n=c("SpeedDialItem"),[i,f]=L.useState(void 0),R=(0,te.useMenuItem)({disabled:t,onSelect:r,onSelected:()=>{n.onOpenChange(!1),n.triggerRef.current?.focus()},contentRef:n.contentRef,props:e});return(0,V.jsx)(oe,{labelId:i,setLabelId:f,children:(0,V.jsx)(ee.Primitive.div,{role:"menuitem","aria-labelledby":i,...e,...R,...(0,j.skdxPart)("speed-dial","item",e.className),ref:p})})});A.displayName="SpeedDialItem";var C=y(require("react"),1),re=require("../utils/part.cjs"),ne=require("../utils/primitive.cjs");var ie=require("react/jsx-runtime"),H=C.forwardRef((t,r)=>{let e=q("SpeedDialItemLabel"),p=C.useId(),n=t.id??p,{setLabelId:i}=e;return C.useLayoutEffect(()=>(i(n),()=>i(void 0)),[n,i]),(0,ie.jsx)(ne.Primitive.span,{...t,id:n,...(0,re.skdxPart)("speed-dial","item-label",t.className),ref:r})});H.displayName="SpeedDialItemLabel";var ae=y(require("react"),1),pe=require("../utils/part.cjs"),le=require("../utils/primitive.cjs");var de=require("react/jsx-runtime"),N=ae.forwardRef((t,r)=>{let e=c("SpeedDialOverlay");return e.mounted?(0,de.jsx)(le.Primitive.div,{"data-state":e.open?"open":"closed",...t,...(0,pe.skdxPart)("speed-dial","overlay",t.className),ref:r}):null});N.displayName="SpeedDialOverlay";var se=require("../utils/portal.cjs");var ce=require("react/jsx-runtime"),k=({forceMount:t,children:r,...e})=>{let p=c("SpeedDialPortal");return t||p.mounted?(0,ce.jsx)(se.Portal,{...e,children:r}):null};k.displayName="SpeedDialPortal";var me=y(require("react"),1),fe=require("../utils/composeRefs.cjs"),ue=require("../utils/part.cjs"),Se=require("../utils/popper.cjs"),g=require("../utils/primitive.cjs");var Y=require("react/jsx-runtime"),Me={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},M=me.forwardRef((t,r)=>{let e=c("SpeedDialTrigger"),p=(0,fe.useComposedRefs)(r,e.triggerRef),n=e.disabled||t.disabled;return(0,Y.jsx)(Se.PopperAnchor,{asChild:!0,children:(0,Y.jsx)(g.Primitive.button,{type:"button",id:e.triggerId,"aria-haspopup":"menu","aria-expanded":e.open,"aria-controls":e.contentId,"data-state":e.open?"open":"closed","data-direction":e.direction,...t,disabled:n,"data-disabled":n?"":void 0,...(0,ue.skdxPart)("speed-dial","trigger",t.className),ref:p,onClick:(0,g.composeEventHandlers)(t.onClick,()=>{e.onOpenChange(!e.open,"pointer")}),onKeyDown:(0,g.composeEventHandlers)(t.onKeyDown,i=>{Me[e.direction].includes(i.key)&&(i.preventDefault(),e.onOpenChange(!0,"keyboard"))}),onPointerEnter:(0,g.composeEventHandlers)(t.onPointerEnter,i=>{!e.openOnHover||i.pointerType==="touch"||e.onHoverOpen()}),onPointerLeave:(0,g.composeEventHandlers)(t.onPointerLeave,i=>{!e.openOnHover||i.pointerType==="touch"||e.onPointerLeave()})})})});M.displayName="SpeedDialTrigger";var m=require("react/jsx-runtime"),De=({trigger:t,actions:r=[],onSelect:e,overlay:p,passThrough:n})=>(0,m.jsxs)(m.Fragment,{children:[t?(0,m.jsx)(M,{asChild:!0,...n?.id?{"aria-controls":n.id}:{},children:t}):null,(0,m.jsxs)(k,{children:[p?(0,m.jsx)(N,{}):null,(0,m.jsx)(b,{...n,children:r.map((i,f)=>(0,m.jsxs)(A,{disabled:i.disabled,onSelect:()=>{i.onSelect?.(),e?.(i,f)},children:[i.icon,(0,m.jsx)(H,{children:i.label})]},f))})]})]});var h=require("react/jsx-runtime"),K='[role="menuitem"]',O='[role="menuitem"]:not([data-disabled])',F={up:"top",down:"bottom",left:"left",right:"right"},[Ce,c]=(0,Re.createSafeContext)("SpeedDial");function z({children:t,open:r,defaultOpen:e=!1,onOpenChange:p,onOpenChangeComplete:n,direction:i="up",openOnHover:f=!1,hoverCloseDelay:R=300,hoverOpenDelay:d=0,disabled:u=!1}){let o=l.useRef(null),S=l.useRef(null),s=l.useRef(0),D=l.useRef(0),I=l.useRef("programmatic"),[a=!1,P]=(0,ye.useControllableState)({prop:r,defaultProp:e,onChange:p}),Ie=(0,ge.usePresence)(a,S);(0,ve.useOpenChangeComplete)(a,S,n),l.useEffect(()=>()=>{window.clearTimeout(s.current),window.clearTimeout(D.current)},[]);let w=l.useCallback((T,_="programmatic")=>{window.clearTimeout(s.current),window.clearTimeout(D.current),!(T&&u)&&(I.current=_,P(T))},[u,P]);l.useEffect(()=>{if(!u||!a)return;let T=S.current?.ownerDocument.activeElement??null,_=!!T&&S.current?.contains(T)===!0;P(!1),_&&o.current?.focus()},[u,a,P]);let Te=l.useCallback(()=>{window.clearTimeout(s.current)},[]),he=l.useCallback(()=>{if(window.clearTimeout(s.current),window.clearTimeout(D.current),d<=0){w(!0,"hover");return}D.current=window.setTimeout(()=>w(!0,"hover"),d)},[w,d]),we=l.useCallback(()=>{window.clearTimeout(s.current),window.clearTimeout(D.current),s.current=window.setTimeout(()=>P(!1),R)},[R,P]);return(0,h.jsx)(Pe.PopperRoot,{children:(0,h.jsx)(Ce,{triggerRef:o,contentRef:S,contentId:l.useId(),triggerId:l.useId(),open:a,mounted:Ie,direction:i,disabled:u,openOnHover:f,openReason:I,onOpenChange:w,onPointerEnter:Te,onHoverOpen:he,onPointerLeave:we,children:t})})}z.displayName="SpeedDialRoot";function B({trigger:t,actions:r,onSelect:e,overlay:p=!1,open:n,defaultOpen:i,onOpenChange:f,onOpenChangeComplete:R,direction:d,openOnHover:u,hoverCloseDelay:o,hoverOpenDelay:S,disabled:s,...D}){return(0,h.jsx)(z,{open:n,defaultOpen:i,onOpenChange:f,onOpenChangeComplete:R,direction:d,openOnHover:u,hoverCloseDelay:o,hoverOpenDelay:S,disabled:s,children:(0,h.jsx)(De,{trigger:t,actions:r,onSelect:e,overlay:p,passThrough:D})})}B.displayName="SpeedDial";0&&(module.exports={ANY_ITEM_SELECTOR,DIRECTION_SIDE,ITEM_SELECTOR,SpeedDial,SpeedDialContent,SpeedDialItem,SpeedDialItemLabel,SpeedDialItemProvider,SpeedDialOverlay,SpeedDialPortal,SpeedDialProvider,SpeedDialRoot,SpeedDialTrigger,useSpeedDialContext,useSpeedDialItemContext});

package/dist/speed-dial/SpeedDial.d.cts

@@ -17,25 +17,26 @@ export declare const SpeedDialProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useSpeedDialContext: (consumerName: string) => SpeedDialContextValue;
+/** Props for {@link SpeedDialRoot}: {@link SpeedDialProps} minus the derived-anatomy-only props, plus the parts as `children`. */
+export type SpeedDialRootProps = Omit<SpeedDialProps, 'trigger' | 'actions' | 'onSelect' | 'overlay'> & {
+    /**
+     * Trigger and portal; fan DOM rendered by SpeedDialPortal elsewhere.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+};
 /**
- * Root of a speed dial — a floating action button that fans out into a short
- * list of actions. Owns open state and hands it down to `SpeedDialTrigger` /
- * `SpeedDialPortal` / `SpeedDialContent` / `SpeedDialItem` via context. Wraps
- * children in the shared popper positioning root. Renders no DOM element
- * itself.
+ * SpeedDial's state/context primitive; owns open state passed to children via context.
+ * Renders no DOM itself; wraps children in popper positioning root.
  *
- * It is a **menu**, not a new pattern: the trigger sets
- * `aria-haspopup="menu"`, the content is `role="menu"`, each action is
- * `role="menuitem"`, and the whole fan is one tab stop with arrow-key
- * navigation and typeahead inside it. What makes it its own family is the
- * geometry — `direction` decides which way the actions travel, and each item
- * publishes its position so the stagger is pure CSS.
+ * A WAI-ARIA menu: trigger has aria-haspopup=menu, content is role=menu, items are role=menuitem.
+ * One tab stop with arrow/typeahead navigation. Direction controls fan geometry; stagger is CSS.
  *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * Supports controlled (open + onOpenChange) or uncontrolled (defaultOpen).
  *
  * @example
  * ```tsx
- * <SpeedDial direction="up">
+ * <SpeedDialRoot direction="up">
  *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
  *   <SpeedDialPortal>
  *     <SpeedDialContent>
@@ -45,10 +46,47 @@ export declare const SpeedDialProvider: {
  *       </SpeedDialItem>
  *     </SpeedDialContent>
  *   </SpeedDialPortal>
- * </SpeedDial>
+ * </SpeedDialRoot>
  * ```
  */
-export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare function SpeedDialRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, }: SpeedDialRootProps): React.JSX.Element;
+export declare namespace SpeedDialRoot {
+    var displayName: string;
+}
+/**
+ * Floating action button that fans actions out along one axis as a WAI-ARIA menu.
+ *
+ * Derives anatomy from trigger and actions: button, portal, optional scrim, and fan.
+ * No children; use SpeedDialRoot directly for full manual composition.
+ *
+ * Supports controlled (open + onOpenChange) or uncontrolled (defaultOpen).
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial
+ *   trigger={<Button aria-label="Quick actions">+</Button>}
+ *   actions={[
+ *     { label: 'Share', onSelect: share },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Full manual composition via SpeedDialRoot (primitives/speed-dial).
+ * ```tsx
+ * <SpeedDialRoot>
+ *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
+ *   <SpeedDialPortal>
+ *     <SpeedDialContent>
+ *       <SpeedDialItem onSelect={share}>
+ *         <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *       </SpeedDialItem>
+ *     </SpeedDialContent>
+ *   </SpeedDialPortal>
+ * </SpeedDialRoot>
+ * ```
+ */
+export declare function SpeedDial({ trigger, actions, onSelect, overlay, open, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, ...rest }: SpeedDialProps): React.JSX.Element;
 export declare namespace SpeedDial {
     var displayName: string;
 }

package/dist/speed-dial/SpeedDial.d.ts

@@ -17,25 +17,26 @@ export declare const SpeedDialProvider: {
     }): React.JSX.Element;
     displayName: string;
 }, useSpeedDialContext: (consumerName: string) => SpeedDialContextValue;
+/** Props for {@link SpeedDialRoot}: {@link SpeedDialProps} minus the derived-anatomy-only props, plus the parts as `children`. */
+export type SpeedDialRootProps = Omit<SpeedDialProps, 'trigger' | 'actions' | 'onSelect' | 'overlay'> & {
+    /**
+     * Trigger and portal; fan DOM rendered by SpeedDialPortal elsewhere.
+     * @default undefined
+     */
+    children?: React.ReactNode;
+};
 /**
- * Root of a speed dial — a floating action button that fans out into a short
- * list of actions. Owns open state and hands it down to `SpeedDialTrigger` /
- * `SpeedDialPortal` / `SpeedDialContent` / `SpeedDialItem` via context. Wraps
- * children in the shared popper positioning root. Renders no DOM element
- * itself.
+ * SpeedDial's state/context primitive; owns open state passed to children via context.
+ * Renders no DOM itself; wraps children in popper positioning root.
  *
- * It is a **menu**, not a new pattern: the trigger sets
- * `aria-haspopup="menu"`, the content is `role="menu"`, each action is
- * `role="menuitem"`, and the whole fan is one tab stop with arrow-key
- * navigation and typeahead inside it. What makes it its own family is the
- * geometry — `direction` decides which way the actions travel, and each item
- * publishes its position so the stagger is pure CSS.
+ * A WAI-ARIA menu: trigger has aria-haspopup=menu, content is role=menu, items are role=menuitem.
+ * One tab stop with arrow/typeahead navigation. Direction controls fan geometry; stagger is CSS.
  *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * Supports controlled (open + onOpenChange) or uncontrolled (defaultOpen).
  *
  * @example
  * ```tsx
- * <SpeedDial direction="up">
+ * <SpeedDialRoot direction="up">
  *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
  *   <SpeedDialPortal>
  *     <SpeedDialContent>
@@ -45,10 +46,47 @@ export declare const SpeedDialProvider: {
  *       </SpeedDialItem>
  *     </SpeedDialContent>
  *   </SpeedDialPortal>
- * </SpeedDial>
+ * </SpeedDialRoot>
  * ```
  */
-export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare function SpeedDialRoot({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, }: SpeedDialRootProps): React.JSX.Element;
+export declare namespace SpeedDialRoot {
+    var displayName: string;
+}
+/**
+ * Floating action button that fans actions out along one axis as a WAI-ARIA menu.
+ *
+ * Derives anatomy from trigger and actions: button, portal, optional scrim, and fan.
+ * No children; use SpeedDialRoot directly for full manual composition.
+ *
+ * Supports controlled (open + onOpenChange) or uncontrolled (defaultOpen).
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial
+ *   trigger={<Button aria-label="Quick actions">+</Button>}
+ *   actions={[
+ *     { label: 'Share', onSelect: share },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Full manual composition via SpeedDialRoot (primitives/speed-dial).
+ * ```tsx
+ * <SpeedDialRoot>
+ *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
+ *   <SpeedDialPortal>
+ *     <SpeedDialContent>
+ *       <SpeedDialItem onSelect={share}>
+ *         <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *       </SpeedDialItem>
+ *     </SpeedDialContent>
+ *   </SpeedDialPortal>
+ * </SpeedDialRoot>
+ * ```
+ */
+export declare function SpeedDial({ trigger, actions, onSelect, overlay, open, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, ...rest }: SpeedDialProps): React.JSX.Element;
 export declare namespace SpeedDial {
     var displayName: string;
 }

package/dist/speed-dial/SpeedDial.js

@@ -1 +1 @@
-import*as l from"react";import{createSafeContext as V}from"../utils/createContext.js";import{PopperRoot as q}from"../utils/popper.js";import{usePresence as Y}from"../utils/presence.js";import{useControllableState as z}from"../utils/useControllableState.js";import{useOpenChangeComplete as B}from"../utils/useOpenChangeComplete.js";import{jsx as L}from"react/jsx-runtime";var w='[role="menuitem"]',E='[role="menuitem"]:not([data-disabled])',b={up:"top",down:"bottom",left:"left",right:"right"},[U,s]=V("SpeedDial");function h({children:o,open:p,defaultOpen:e=!1,onOpenChange:i,onOpenChangeComplete:a,direction:r="up",openOnHover:P=!1,hoverCloseDelay:c=300,disabled:d=!1}){let I=l.useRef(null),t=l.useRef(null),m=l.useRef(0),[f=!1,u]=z({prop:p,defaultProp:e,onChange:i}),R=Y(f,t);B(f,t,a),l.useEffect(()=>()=>window.clearTimeout(m.current),[]);let n=l.useCallback(x=>{window.clearTimeout(m.current),!(x&&d)&&u(x)},[d,u]),T=l.useCallback(()=>{window.clearTimeout(m.current)},[]),F=l.useCallback(()=>{window.clearTimeout(m.current),m.current=window.setTimeout(()=>u(!1),c)},[c,u]);return L(q,{children:L(U,{triggerRef:I,contentRef:t,contentId:l.useId(),open:f,mounted:R,direction:r,disabled:d,openOnHover:P,onOpenChange:n,onPointerEnter:T,onPointerLeave:F,children:o})})}h.displayName="SpeedDial";import*as O from"react";import{useComposedRefs as G}from"../utils/composeRefs.js";import{skdxPart as J}from"../utils/part.js";import{PopperAnchor as Q}from"../utils/popper.js";import{composeEventHandlers as g,Primitive as W}from"../utils/primitive.js";import{jsx as v}from"react/jsx-runtime";var X={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},N=O.forwardRef((o,p)=>{let e=s("SpeedDialTrigger"),i=G(p,e.triggerRef),a=e.disabled||o.disabled;return v(Q,{asChild:!0,children:v(W.button,{type:"button","aria-haspopup":"menu","aria-expanded":e.open,"aria-controls":e.contentId,"data-state":e.open?"open":"closed","data-direction":e.direction,...o,disabled:a,"data-disabled":a?"":void 0,...J("speed-dial","trigger",o.className),ref:i,onClick:g(o.onClick,()=>{e.onOpenChange(!e.open)}),onKeyDown:g(o.onKeyDown,r=>{X[e.direction].includes(r.key)&&(r.preventDefault(),e.onOpenChange(!0))}),onPointerEnter:g(o.onPointerEnter,r=>{!e.openOnHover||r.pointerType==="touch"||(e.onPointerEnter(),e.onOpenChange(!0))}),onPointerLeave:g(o.onPointerLeave,r=>{!e.openOnHover||r.pointerType==="touch"||e.onPointerLeave()})})})});N.displayName="SpeedDialTrigger";import{Portal as Z}from"../utils/portal.js";import{jsx as $}from"react/jsx-runtime";var A=({forceMount:o,children:p,...e})=>{let i=s("SpeedDialPortal");return o||i.mounted?$(Z,{...e,children:p}):null};A.displayName="SpeedDialPortal";import*as D from"react";import{useComposedRefs as j}from"../utils/composeRefs.js";import{skdxPart as ee}from"../utils/part.js";import{PopperContent as te}from"../utils/popper.js";import{composeEventHandlers as y}from"../utils/primitive.js";import{useDismiss as oe}from"../utils/useDismiss.js";import{useRovingFocus as ne}from"../utils/useRovingFocus.js";import{jsx as ae}from"react/jsx-runtime";function re(o){D.useLayoutEffect(()=>{o.current?.querySelectorAll(w)?.forEach((e,i)=>{e.style.setProperty("--skdx-speed-dial-index",String(i)),e.style.setProperty("--skdx-speed-dial-offset",String(i+1))})})}var ie={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},H=D.forwardRef(({forceMount:o,loop:p=!0,onEscapeKeyDown:e,onPointerDownOutside:i,onFocusOutside:a,onInteractOutside:r,align:P="center",sideOffset:c=8,...d},I)=>{let t=s("SpeedDialContent"),m=j(I,t.contentRef),f=ie[t.direction],u=ne({orientation:f,loop:p,itemSelector:E,typeahead:!0});re(t.contentRef);let R=()=>{t.onOpenChange(!1),t.triggerRef.current?.focus()};return oe({enabled:t.open,onEscapeKeyDown:n=>{e?.(n),n.defaultPrevented||R()},onInteractOutside:r,onPointerDownOutside:n=>{i?.(n),n.defaultPrevented||t.onOpenChange(!1)},onFocusOutside:n=>{a?.(n),n.defaultPrevented||t.onOpenChange(!1)}},[t.contentRef,t.triggerRef]),D.useEffect(()=>{if(!t.open)return;let n=requestAnimationFrame(()=>{(t.contentRef.current?.querySelector(E)??t.contentRef.current)?.focus()});return()=>cancelAnimationFrame(n)},[t.open,t.contentRef]),o||t.mounted?ae(te,{component:"speed-dial",role:"menu","aria-orientation":f,id:t.contentId,"data-state":t.open?"open":"closed","data-direction":t.direction,tabIndex:-1,side:b[t.direction],align:P,sideOffset:c,...d,...ee("speed-dial","content",d.className),ref:m,onKeyDown:y(d.onKeyDown,n=>{u(n),n.key==="Tab"&&(n.preventDefault(),R())}),onPointerEnter:y(d.onPointerEnter,n=>{t.openOnHover&&n.pointerType!=="touch"&&t.onPointerEnter()}),onPointerLeave:y(d.onPointerLeave,n=>{t.openOnHover&&n.pointerType!=="touch"&&t.onPointerLeave()})}):null});H.displayName="SpeedDialContent";import*as C from"react";import{createSafeContext as pe}from"../utils/createContext.js";import{skdxPart as le}from"../utils/part.js";import{Primitive as de}from"../utils/primitive.js";import{useMenuItem as se}from"../utils/useMenuItem.js";import{jsx as M}from"react/jsx-runtime";var[me,k]=pe("SpeedDialItem"),_=C.forwardRef(({disabled:o,onSelect:p,...e},i)=>{let a=s("SpeedDialItem"),[r,P]=C.useState(void 0),c=se({disabled:o,onSelect:p,onSelected:()=>{a.onOpenChange(!1),a.triggerRef.current?.focus()},contentRef:a.contentRef,props:e});return M(me,{labelId:r,setLabelId:P,children:M(de.div,{role:"menuitem","aria-labelledby":r,...e,...c,...le("speed-dial","item",e.className),ref:i})})});_.displayName="SpeedDialItem";import*as S from"react";import{skdxPart as ce}from"../utils/part.js";import{Primitive as fe}from"../utils/primitive.js";import{jsx as ue}from"react/jsx-runtime";var K=S.forwardRef((o,p)=>{let e=k("SpeedDialItemLabel"),i=S.useId(),a=o.id??i,{setLabelId:r}=e;return S.useLayoutEffect(()=>(r(a),()=>r(void 0)),[a,r]),ue(fe.span,{...o,id:a,...ce("speed-dial","item-label",o.className),ref:p})});K.displayName="SpeedDialItemLabel";export{h as SpeedDial,H as SpeedDialContent,_ as SpeedDialItem,K as SpeedDialItemLabel,A as SpeedDialPortal,N as SpeedDialTrigger};
+import*as l from"react";import{createSafeContext as Te}from"../utils/createContext.js";import{PopperRoot as he}from"../utils/popper.js";import{usePresence as we}from"../utils/presence.js";import{useControllableState as Ee}from"../utils/useControllableState.js";import{useOpenChangeComplete as xe}from"../utils/useOpenChangeComplete.js";import*as P from"react";import{useComposedRefs as Z}from"../utils/composeRefs.js";import{skdxPart as $}from"../utils/part.js";import{PopperContent as j}from"../utils/popper.js";import{composeEventHandlers as x}from"../utils/primitive.js";import{useDismiss as ee}from"../utils/useDismiss.js";import{useRovingFocus as te}from"../utils/useRovingFocus.js";import{jsx as ne}from"react/jsx-runtime";function oe(o){P.useLayoutEffect(()=>{o.current?.querySelectorAll(_)?.forEach((e,p)=>{e.style.setProperty("--skdx-speed-dial-index",String(p)),e.style.setProperty("--skdx-speed-dial-offset",String(p+1))})})}var re={up:"vertical",down:"vertical",left:"horizontal",right:"horizontal"},b=P.forwardRef(({forceMount:o,loop:a=!0,onEscapeKeyDown:e,onPointerDownOutside:p,onFocusOutside:i,onInteractOutside:r,align:c="center",sideOffset:D=8,...d},f)=>{let t=m("SpeedDialContent"),u=Z(f,t.contentRef),s=re[t.direction],S=te({orientation:s,loop:a,itemSelector:O,typeahead:!0});oe(t.contentRef);let y=()=>{t.onOpenChange(!1),t.triggerRef.current?.focus()};return ee({enabled:t.open,onEscapeKeyDown:n=>{e?.(n),n.defaultPrevented||y()},onInteractOutside:r,onPointerDownOutside:n=>{p?.(n),n.defaultPrevented||t.onOpenChange(!1)},onFocusOutside:n=>{i?.(n),n.defaultPrevented||t.onOpenChange(!1)}},[t.contentRef,t.triggerRef]),P.useEffect(()=>{if(!t.open||t.openReason.current==="hover")return;let n=requestAnimationFrame(()=>{(t.contentRef.current?.querySelector(O)??t.contentRef.current)?.focus({preventScroll:!0})});return()=>cancelAnimationFrame(n)},[t.open,t.contentRef,t.openReason]),o||t.mounted?ne(j,{component:"speed-dial",role:"menu","aria-orientation":s,"aria-labelledby":t.triggerId,id:t.contentId,"data-state":t.open?"open":"closed","data-direction":t.direction,tabIndex:-1,side:K[t.direction],align:c,sideOffset:D,...d,...$("speed-dial","content",d.className),ref:u,onKeyDown:x(d.onKeyDown,n=>{S(n),n.key==="Tab"&&(n.preventDefault(),y())}),onPointerEnter:x(d.onPointerEnter,n=>{t.openOnHover&&n.pointerType!=="touch"&&t.onPointerEnter()}),onPointerLeave:x(d.onPointerLeave,n=>{t.openOnHover&&n.pointerType!=="touch"&&t.onPointerLeave()})}):null});b.displayName="SpeedDialContent";import*as I from"react";import{createSafeContext as ie}from"../utils/createContext.js";import{skdxPart as ae}from"../utils/part.js";import{Primitive as pe}from"../utils/primitive.js";import{useMenuItem as le}from"../utils/useMenuItem.js";import{jsx as F}from"react/jsx-runtime";var[de,V]=ie("SpeedDialItem"),L=I.forwardRef(({disabled:o,onSelect:a,...e},p)=>{let i=m("SpeedDialItem"),[r,c]=I.useState(void 0),D=le({disabled:o,onSelect:a,onSelected:()=>{i.onOpenChange(!1),i.triggerRef.current?.focus()},contentRef:i.contentRef,props:e});return F(de,{labelId:r,setLabelId:c,children:F(pe.div,{role:"menuitem","aria-labelledby":r,...e,...D,...ae("speed-dial","item",e.className),ref:p})})});L.displayName="SpeedDialItem";import*as g from"react";import{skdxPart as se}from"../utils/part.js";import{Primitive as ce}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var A=g.forwardRef((o,a)=>{let e=V("SpeedDialItemLabel"),p=g.useId(),i=o.id??p,{setLabelId:r}=e;return g.useLayoutEffect(()=>(r(i),()=>r(void 0)),[i,r]),me(ce.span,{...o,id:i,...se("speed-dial","item-label",o.className),ref:a})});A.displayName="SpeedDialItemLabel";import*as q from"react";import{skdxPart as fe}from"../utils/part.js";import{Primitive as ue}from"../utils/primitive.js";import{jsx as Se}from"react/jsx-runtime";var H=q.forwardRef((o,a)=>{let e=m("SpeedDialOverlay");return e.mounted?Se(ue.div,{"data-state":e.open?"open":"closed",...o,...fe("speed-dial","overlay",o.className),ref:a}):null});H.displayName="SpeedDialOverlay";import{Portal as De}from"../utils/portal.js";import{jsx as Re}from"react/jsx-runtime";var N=({forceMount:o,children:a,...e})=>{let p=m("SpeedDialPortal");return o||p.mounted?Re(De,{...e,children:a}):null};N.displayName="SpeedDialPortal";import*as z from"react";import{useComposedRefs as Pe}from"../utils/composeRefs.js";import{skdxPart as ge}from"../utils/part.js";import{PopperAnchor as ye}from"../utils/popper.js";import{composeEventHandlers as T,Primitive as ve}from"../utils/primitive.js";import{jsx as Y}from"react/jsx-runtime";var Ce={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},k=z.forwardRef((o,a)=>{let e=m("SpeedDialTrigger"),p=Pe(a,e.triggerRef),i=e.disabled||o.disabled;return Y(ye,{asChild:!0,children:Y(ve.button,{type:"button",id:e.triggerId,"aria-haspopup":"menu","aria-expanded":e.open,"aria-controls":e.contentId,"data-state":e.open?"open":"closed","data-direction":e.direction,...o,disabled:i,"data-disabled":i?"":void 0,...ge("speed-dial","trigger",o.className),ref:p,onClick:T(o.onClick,()=>{e.onOpenChange(!e.open,"pointer")}),onKeyDown:T(o.onKeyDown,r=>{Ce[e.direction].includes(r.key)&&(r.preventDefault(),e.onOpenChange(!0,"keyboard"))}),onPointerEnter:T(o.onPointerEnter,r=>{!e.openOnHover||r.pointerType==="touch"||e.onHoverOpen()}),onPointerLeave:T(o.onPointerLeave,r=>{!e.openOnHover||r.pointerType==="touch"||e.onPointerLeave()})})})});k.displayName="SpeedDialTrigger";import{Fragment as Ie,jsx as h,jsxs as M}from"react/jsx-runtime";var B=({trigger:o,actions:a=[],onSelect:e,overlay:p,passThrough:i})=>M(Ie,{children:[o?h(k,{asChild:!0,...i?.id?{"aria-controls":i.id}:{},children:o}):null,M(N,{children:[p?h(H,{}):null,h(b,{...i,children:a.map((r,c)=>M(L,{disabled:r.disabled,onSelect:()=>{r.onSelect?.(),e?.(r,c)},children:[r.icon,h(A,{children:r.label})]},c))})]})]});import{jsx as w}from"react/jsx-runtime";var _='[role="menuitem"]',O='[role="menuitem"]:not([data-disabled])',K={up:"top",down:"bottom",left:"left",right:"right"},[Oe,m]=Te("SpeedDial");function U({children:o,open:a,defaultOpen:e=!1,onOpenChange:p,onOpenChangeComplete:i,direction:r="up",openOnHover:c=!1,hoverCloseDelay:D=300,hoverOpenDelay:d=0,disabled:f=!1}){let t=l.useRef(null),u=l.useRef(null),s=l.useRef(0),S=l.useRef(0),y=l.useRef("programmatic"),[n=!1,R]=Ee({prop:a,defaultProp:e,onChange:p}),G=we(n,u);xe(n,u,i),l.useEffect(()=>()=>{window.clearTimeout(s.current),window.clearTimeout(S.current)},[]);let C=l.useCallback((v,E="programmatic")=>{window.clearTimeout(s.current),window.clearTimeout(S.current),!(v&&f)&&(y.current=E,R(v))},[f,R]);l.useEffect(()=>{if(!f||!n)return;let v=u.current?.ownerDocument.activeElement??null,E=!!v&&u.current?.contains(v)===!0;R(!1),E&&t.current?.focus()},[f,n,R]);let J=l.useCallback(()=>{window.clearTimeout(s.current)},[]),Q=l.useCallback(()=>{if(window.clearTimeout(s.current),window.clearTimeout(S.current),d<=0){C(!0,"hover");return}S.current=window.setTimeout(()=>C(!0,"hover"),d)},[C,d]),X=l.useCallback(()=>{window.clearTimeout(s.current),window.clearTimeout(S.current),s.current=window.setTimeout(()=>R(!1),D)},[D,R]);return w(he,{children:w(Oe,{triggerRef:t,contentRef:u,contentId:l.useId(),triggerId:l.useId(),open:n,mounted:G,direction:r,disabled:f,openOnHover:c,openReason:y,onOpenChange:C,onPointerEnter:J,onHoverOpen:Q,onPointerLeave:X,children:o})})}U.displayName="SpeedDialRoot";function W({trigger:o,actions:a,onSelect:e,overlay:p=!1,open:i,defaultOpen:r,onOpenChange:c,onOpenChangeComplete:D,direction:d,openOnHover:f,hoverCloseDelay:t,hoverOpenDelay:u,disabled:s,...S}){return w(U,{open:i,defaultOpen:r,onOpenChange:c,onOpenChangeComplete:D,direction:d,openOnHover:f,hoverCloseDelay:t,hoverOpenDelay:u,disabled:s,children:w(B,{trigger:o,actions:a,onSelect:e,overlay:p,passThrough:S})})}W.displayName="SpeedDial";export{_ as ANY_ITEM_SELECTOR,K as DIRECTION_SIDE,O as ITEM_SELECTOR,W as SpeedDial,b as SpeedDialContent,L as SpeedDialItem,A as SpeedDialItemLabel,de as SpeedDialItemProvider,H as SpeedDialOverlay,N as SpeedDialPortal,Oe as SpeedDialProvider,U as SpeedDialRoot,k as SpeedDialTrigger,m as useSpeedDialContext,V as useSpeedDialItemContext};

package/dist/speed-dial/SpeedDialAnatomy.d.cts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.cjs';
+import type { SpeedDialAction } from './types.cjs';
+/**
+ * The anatomy a {@link SpeedDial} draws from `trigger` and `actions`: the
+ * floating action button (merged onto `trigger` via `asChild`), the portal,
+ * the optional scrim, and the fan holding one `SpeedDialItem` per entry wrapping an
+ * `SpeedDialItemLabel`.
+ *
+ * Every entry gets an Item, disabled ones included — the positional custom
+ * properties count them, so skipping one would make the fan jump.
+ *
+ * @internal
+ */
+export declare const SpeedDialAnatomy: ({ trigger, actions, onSelect, overlay, passThrough, }: {
+    trigger?: React.ReactElement;
+    actions?: ReadonlyArray<SpeedDialAction>;
+    onSelect?: (action: SpeedDialAction, index: number) => void;
+    overlay: boolean;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/speed-dial/SpeedDialAnatomy.d.ts

@@ -0,0 +1,21 @@
+import type * as React from 'react';
+import type { PassThroughProps } from '../utils/passThrough.js';
+import type { SpeedDialAction } from './types.js';
+/**
+ * The anatomy a {@link SpeedDial} draws from `trigger` and `actions`: the
+ * floating action button (merged onto `trigger` via `asChild`), the portal,
+ * the optional scrim, and the fan holding one `SpeedDialItem` per entry wrapping an
+ * `SpeedDialItemLabel`.
+ *
+ * Every entry gets an Item, disabled ones included — the positional custom
+ * properties count them, so skipping one would make the fan jump.
+ *
+ * @internal
+ */
+export declare const SpeedDialAnatomy: ({ trigger, actions, onSelect, overlay, passThrough, }: {
+    trigger?: React.ReactElement;
+    actions?: ReadonlyArray<SpeedDialAction>;
+    onSelect?: (action: SpeedDialAction, index: number) => void;
+    overlay: boolean;
+    passThrough?: PassThroughProps;
+}) => React.JSX.Element;

package/dist/speed-dial/SpeedDialItem.d.cts

@@ -7,15 +7,9 @@ export declare const SpeedDialItemProvider: {
     displayName: string;
 }, useSpeedDialItemContext: (consumerName: string) => SpeedDialItemContextValue;
 /**
- * One action in the fan: `role="menuitem"`, part of the content's single tab
- * stop, activated by click, Enter, or Space. Activating it fires `onSelect`
- * and closes the dial, returning focus to the trigger, unless `onSelect`
- * calls `event.preventDefault()`. Set `disabled` to exclude it from
- * navigation and selection while keeping its slot in the fan.
- *
- * Carries `--skdx-speed-dial-index` (0-based) and `--skdx-speed-dial-offset`
- * (the same position counted from 1), written by `SpeedDialContent`, so the
- * travel distance and the stagger are both CSS:
+ * Action in the fan, activated by click, Enter, or Space. Fires `onSelect`,
+ * closes the dial, and returns focus to trigger (unless `preventDefault()` called).
+ * Carries `--skdx-speed-dial-index` and `-offset` for CSS positioning/stagger.
  *
  * ```css
  * .my-speed-dial-item {
@@ -27,10 +21,6 @@ export declare const SpeedDialItemProvider: {
  * }
  * ```
  *
- * Its accessible name comes from a `SpeedDialItemLabel` child via
- * `aria-labelledby`, so an icon-only action is still named — see that part
- * for why a `title` attribute is not an acceptable substitute.
- *
  * @example
  * ```tsx
  * <SpeedDialItem onSelect={() => share()}>

package/dist/speed-dial/SpeedDialItem.d.ts

@@ -7,15 +7,9 @@ export declare const SpeedDialItemProvider: {
     displayName: string;
 }, useSpeedDialItemContext: (consumerName: string) => SpeedDialItemContextValue;
 /**
- * One action in the fan: `role="menuitem"`, part of the content's single tab
- * stop, activated by click, Enter, or Space. Activating it fires `onSelect`
- * and closes the dial, returning focus to the trigger, unless `onSelect`
- * calls `event.preventDefault()`. Set `disabled` to exclude it from
- * navigation and selection while keeping its slot in the fan.
- *
- * Carries `--skdx-speed-dial-index` (0-based) and `--skdx-speed-dial-offset`
- * (the same position counted from 1), written by `SpeedDialContent`, so the
- * travel distance and the stagger are both CSS:
+ * Action in the fan, activated by click, Enter, or Space. Fires `onSelect`,
+ * closes the dial, and returns focus to trigger (unless `preventDefault()` called).
+ * Carries `--skdx-speed-dial-index` and `-offset` for CSS positioning/stagger.
  *
  * ```css
  * .my-speed-dial-item {
@@ -27,10 +21,6 @@ export declare const SpeedDialItemProvider: {
  * }
  * ```
  *
- * Its accessible name comes from a `SpeedDialItemLabel` child via
- * `aria-labelledby`, so an icon-only action is still named — see that part
- * for why a `title` attribute is not an acceptable substitute.
- *
  * @example
  * ```tsx
  * <SpeedDialItem onSelect={() => share()}>

package/dist/speed-dial/SpeedDialItemLabel.d.cts

@@ -6,12 +6,8 @@ import type { SpeedDialItemLabelProps } from './types.cjs';
  * points `aria-labelledby` at it, so the action is named by the very element
  * the sighted user reads.
  *
- * This exists as a real element on purpose. The obvious shortcut — a `title`
- * attribute on the item — produces a tooltip that never appears for keyboard
- * focus, cannot be styled or animated, is announced inconsistently across
- * screen readers, and is invisible on touch entirely. A label you can see is
- * a label you can also position, fade in on hover, and hand to
- * `aria-labelledby`.
+ * A real element, not a `title` attribute: it's visible, stylable, announced
+ * consistently across screen readers, and works on touch.
  *
  * Reveal it however you like; the item's own `:hover`/`:focus-within` is the
  * usual hook, and nothing here hides it, so a dial that shows every label

package/dist/speed-dial/SpeedDialItemLabel.d.ts

@@ -6,12 +6,8 @@ import type { SpeedDialItemLabelProps } from './types.js';
  * points `aria-labelledby` at it, so the action is named by the very element
  * the sighted user reads.
  *
- * This exists as a real element on purpose. The obvious shortcut — a `title`
- * attribute on the item — produces a tooltip that never appears for keyboard
- * focus, cannot be styled or animated, is announced inconsistently across
- * screen readers, and is invisible on touch entirely. A label you can see is
- * a label you can also position, fade in on hover, and hand to
- * `aria-labelledby`.
+ * A real element, not a `title` attribute: it's visible, stylable, announced
+ * consistently across screen readers, and works on touch.
  *
  * Reveal it however you like; the item's own `:hover`/`:focus-within` is the
  * usual hook, and nothing here hides it, so a dial that shows every label

package/dist/speed-dial/SpeedDialOverlay.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SpeedDialOverlayProps } from './types.cjs';
+/**
+ * Optional scrim behind `SpeedDialContent`. Opt-in by composition (render
+ * inside portal for scrim, omit for none). Not modal; pointer-down closes fan.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDialPortal>
+ *   <SpeedDialOverlay className="scrim" />
+ *   <SpeedDialContent>…</SpeedDialContent>
+ * </SpeedDialPortal>
+ * ```
+ */
+export declare const SpeedDialOverlay: React.ForwardRefExoticComponent<Omit<SpeedDialOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/speed-dial/SpeedDialOverlay.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { SpeedDialOverlayProps } from './types.js';
+/**
+ * Optional scrim behind `SpeedDialContent`. Opt-in by composition (render
+ * inside portal for scrim, omit for none). Not modal; pointer-down closes fan.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDialPortal>
+ *   <SpeedDialOverlay className="scrim" />
+ *   <SpeedDialContent>…</SpeedDialContent>
+ * </SpeedDialPortal>
+ * ```
+ */
+export declare const SpeedDialOverlay: React.ForwardRefExoticComponent<Omit<SpeedDialOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/speed-dial/SpeedDialPortal.d.cts

@@ -1,12 +1,7 @@
 import type { SpeedDialPortalProps } from './types.cjs';
 /**
- * Teleports `SpeedDialContent` to `document.body` (or a custom `container`),
- * so the fan escapes any clipping/`overflow` ancestors — which a dial pinned
- * to a corner of a scrolling pane will otherwise hit immediately.
- *
- * Unmounts once the content's exit animation has finished, not the moment the
- * dial closes, so `forceMount` is only needed to keep the actions in the DOM
- * permanently.
+ * Teleports content to `document.body` (or custom `container`) so the fan
+ * escapes `overflow` ancestors. Remains mounted during exit animations.
  *
  * @example
  * ```tsx