@skdx/react 0.27.0 → 0.29.0

package/dist/slider/types.d.cts

@@ -1,17 +1,42 @@
 import type * as React from 'react';
+import type { Direction } from '../utils/direction.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** @internal Shared state distributed from {@link Slider} to its parts via context. Not part of the public API. */
+/**
+ * Payload of `onValueChange`: the new values, previous values, and what drove the change.
+ */
+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.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/** @internal Shared state distributed from {@link Slider} to its parts via context. */
 export interface SliderContextValue {
     values: number[];
     min: number;
     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;
-    name?: string;
+    /** Already resolved: the `largeStep` prop, or the derived tenth-of-range fallback. */
+    largeStep: number;
+    name?: string | undefined;
+    form?: string | undefined;
+    thumbLabels?: readonly string[] | undefined;
 }
 /** Props for the {@link Slider} root. */
 export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
@@ -19,54 +44,101 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      * Selected values, one per thumb, for controlled usage. Pair with `onValueChange`.
      * @default undefined
      */
-    value?: number[];
+    value?: number[] | undefined;
     /**
      * Initial values, one per thumb, for uncontrolled usage. A single-element
      * array renders a simple slider; two elements render a range slider.
      * @default [0]
      */
-    defaultValue?: number[];
+    defaultValue?: number[] | undefined;
     /**
-     * Fires with the new values array on every change during a drag or key press.
+     * Fires on every change with the new values, previous values, and reason; a no-op change emits nothing.
      * @default undefined
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: ((detail: SliderValueChangeDetail) => void) | undefined;
     /**
-     * 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;
+    onValueCommit?: ((value: number[]) => void) | undefined;
     /**
      * Minimum value of the range the slider can select.
      * @default 0
      */
-    min?: number;
+    min?: number | undefined;
     /**
      * Maximum value of the range the slider can select.
      * @default 100
      */
-    max?: number;
+    max?: number | undefined;
     /**
      * Increment values are rounded to, for both pointer and keyboard interaction.
      * @default 1
      */
-    step?: number;
+    step?: number | undefined;
     /**
      * Disables pointer and keyboard interaction on all thumbs.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Layout axis, exposed as `data-orientation` and used to map pointer
      * position and Arrow keys to a value.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by; defaults to a tenth of the range, floored at one step.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number | undefined;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep; at `0` two thumbs may share a value.
+     * @default 0
+     */
+    minStepsBetweenValues?: number | undefined;
     /**
      * Name for native form participation; each thumb renders its own hidden input.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Ticks rendered along the track, one derived `SliderMark` part each.
+     * Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly SliderMarkData[] | undefined;
+    /**
+     * Shows the focused/dragged thumb's current value in a derived tooltip, positioned by the skin; ignored when `children` is given.
+     * @default false
+     */
+    showTooltip?: boolean | undefined;
+    /**
+     * Accessible names for derived thumbs, one per value; needed since `role="slider"` takes no name from content.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[] | undefined;
+    /**
+     * Size rung the skin scales the track and thumbs by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+}
+/**
+ * Entry of {@link SliderProps.marks} — a tick with optional label.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string | undefined;
 }
 /** Props for the {@link SliderTrack}, the full-length background bar. */
 export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
@@ -77,14 +149,25 @@ export interface SliderRangeProps extends PrimitivePropsWithRef<'span'> {
 /** Props for a {@link SliderThumb} handle. */
 export interface SliderThumbProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Which value in the array this thumb controls. Defaults to its render
-     * order among sibling `SliderThumb`s (0 for the first, 1 for the second, ...).
+     * Which value in the array this thumb controls; defaults to its render order among siblings.
+     * @default undefined
+     */
+    index?: number | undefined;
+    /**
+     * Announcement for this thumb's value, written to `aria-valuetext`, when the raw number doesn't match.
      * @default undefined
      */
-    index?: number;
+    valueText?: string | undefined;
     /**
      * Accessible name for this thumb, since it has no visible text content.
      * @default undefined
      */
-    'aria-label'?: string;
+    'aria-label'?: string | undefined;
+}
+/** 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 offset the thumb uses.
+     */
+    value: number;
 }

package/dist/slider/types.d.ts

@@ -1,17 +1,42 @@
 import type * as React from 'react';
+import type { Direction } from '../utils/direction.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link Slider} to its parts via context. Not part of the public API. */
+/**
+ * Payload of `onValueChange`: the new values, previous values, and what drove the change.
+ */
+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.
+     */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+}
+/** @internal Shared state distributed from {@link Slider} to its parts via context. */
 export interface SliderContextValue {
     values: number[];
     min: number;
     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;
-    name?: string;
+    /** Already resolved: the `largeStep` prop, or the derived tenth-of-range fallback. */
+    largeStep: number;
+    name?: string | undefined;
+    form?: string | undefined;
+    thumbLabels?: readonly string[] | undefined;
 }
 /** Props for the {@link Slider} root. */
 export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
@@ -19,54 +44,101 @@ export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaul
      * Selected values, one per thumb, for controlled usage. Pair with `onValueChange`.
      * @default undefined
      */
-    value?: number[];
+    value?: number[] | undefined;
     /**
      * Initial values, one per thumb, for uncontrolled usage. A single-element
      * array renders a simple slider; two elements render a range slider.
      * @default [0]
      */
-    defaultValue?: number[];
+    defaultValue?: number[] | undefined;
     /**
-     * Fires with the new values array on every change during a drag or key press.
+     * Fires on every change with the new values, previous values, and reason; a no-op change emits nothing.
      * @default undefined
      */
-    onValueChange?: (value: number[]) => void;
+    onValueChange?: ((detail: SliderValueChangeDetail) => void) | undefined;
     /**
-     * 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;
+    onValueCommit?: ((value: number[]) => void) | undefined;
     /**
      * Minimum value of the range the slider can select.
      * @default 0
      */
-    min?: number;
+    min?: number | undefined;
     /**
      * Maximum value of the range the slider can select.
      * @default 100
      */
-    max?: number;
+    max?: number | undefined;
     /**
      * Increment values are rounded to, for both pointer and keyboard interaction.
      * @default 1
      */
-    step?: number;
+    step?: number | undefined;
     /**
      * Disables pointer and keyboard interaction on all thumbs.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Layout axis, exposed as `data-orientation` and used to map pointer
      * position and Arrow keys to a value.
      * @default 'horizontal'
      */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Increment PageUp/PageDown and Shift+Arrow move the focused thumb by; defaults to a tenth of the range, floored at one step.
+     * @default Math.max((max - min) / 10, step)
+     */
+    largeStep?: number | undefined;
+    /**
+     * Minimum gap, counted in steps, that adjacent values must keep; at `0` two thumbs may share a value.
+     * @default 0
+     */
+    minStepsBetweenValues?: number | undefined;
     /**
      * Name for native form participation; each thumb renders its own hidden input.
      * @default undefined
      */
-    name?: string;
+    name?: string | undefined;
+    /**
+     * 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 | undefined;
+    /**
+     * Ticks rendered along the track, one derived `SliderMark` part each.
+     * Ignored when `children` is given.
+     * @default undefined — no marks are rendered.
+     */
+    marks?: readonly SliderMarkData[] | undefined;
+    /**
+     * Shows the focused/dragged thumb's current value in a derived tooltip, positioned by the skin; ignored when `children` is given.
+     * @default false
+     */
+    showTooltip?: boolean | undefined;
+    /**
+     * Accessible names for derived thumbs, one per value; needed since `role="slider"` takes no name from content.
+     * @default undefined
+     */
+    thumbLabels?: readonly string[] | undefined;
+    /**
+     * Size rung the skin scales the track and thumbs by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+}
+/**
+ * Entry of {@link SliderProps.marks} — a tick with optional label.
+ */
+export interface SliderMarkData {
+    /** The value on the track this mark sits at. */
+    value: number;
+    /** Text rendered inside the derived mark. */
+    label?: string | undefined;
 }
 /** Props for the {@link SliderTrack}, the full-length background bar. */
 export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
@@ -77,14 +149,25 @@ export interface SliderRangeProps extends PrimitivePropsWithRef<'span'> {
 /** Props for a {@link SliderThumb} handle. */
 export interface SliderThumbProps extends PrimitivePropsWithRef<'span'> {
     /**
-     * Which value in the array this thumb controls. Defaults to its render
-     * order among sibling `SliderThumb`s (0 for the first, 1 for the second, ...).
+     * Which value in the array this thumb controls; defaults to its render order among siblings.
+     * @default undefined
+     */
+    index?: number | undefined;
+    /**
+     * Announcement for this thumb's value, written to `aria-valuetext`, when the raw number doesn't match.
      * @default undefined
      */
-    index?: number;
+    valueText?: string | undefined;
     /**
      * Accessible name for this thumb, since it has no visible text content.
      * @default undefined
      */
-    'aria-label'?: string;
+    'aria-label'?: string | undefined;
+}
+/** 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 offset the thumb uses.
+     */
+    value: number;
 }

package/dist/speed-dial/SpeedDial.cjs

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

@@ -1,41 +1,29 @@
 import * as React from 'react';
 import { type Side } from '../utils/popper.cjs';
 import type { SpeedDialContextValue, SpeedDialDirection, SpeedDialProps } from './types.cjs';
-/**
- * @internal Every action slot, disabled ones included. Used for the
- * positional custom properties: a disabled action still occupies its place in
- * the fan, so numbering around it would make the remaining actions jump.
- */
+/** @internal Every action slot, including disabled ones, so positional numbering doesn't shift. */
 export declare const ANY_ITEM_SELECTOR = "[role=\"menuitem\"]";
 /** @internal Focusable, non-disabled actions — the set arrow keys and typeahead move between. */
 export declare const ITEM_SELECTOR = "[role=\"menuitem\"]:not([data-disabled])";
 /** @internal The popper side each fan direction positions its content on. */
 export declare const DIRECTION_SIDE: Record<SpeedDialDirection, Side>;
-export declare const SpeedDialProvider: {
-    (props: SpeedDialContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useSpeedDialContext: (consumerName: string) => SpeedDialContextValue;
+export declare const SpeedDialProvider: React.FC<SpeedDialContextValue & {
+    children: React.ReactNode;
+}>, 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 | undefined;
+};
 /**
- * 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.
- *
- * 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.
- *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * SpeedDial's state and context primitive; renders no DOM and positions children via a popper root.
  *
  * @example
  * ```tsx
- * <SpeedDial direction="up">
+ * <SpeedDialRoot direction="up">
  *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
  *   <SpeedDialPortal>
  *     <SpeedDialContent>
@@ -45,10 +33,28 @@ export declare const SpeedDialProvider: {
  *       </SpeedDialItem>
  *     </SpeedDialContent>
  *   </SpeedDialPortal>
- * </SpeedDial>
+ * </SpeedDialRoot>
+ * ```
+ */
+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.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial
+ *   trigger={<Button aria-label="Quick actions">+</Button>}
+ *   actions={[
+ *     { label: 'Share', onSelect: share },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
  * ```
  */
-export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare function SpeedDial({ trigger, actions, onSelect, overlay, open, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, size, ...rest }: SpeedDialProps): React.JSX.Element;
 export declare namespace SpeedDial {
     var displayName: string;
 }

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

@@ -1,41 +1,29 @@
 import * as React from 'react';
 import { type Side } from '../utils/popper.js';
 import type { SpeedDialContextValue, SpeedDialDirection, SpeedDialProps } from './types.js';
-/**
- * @internal Every action slot, disabled ones included. Used for the
- * positional custom properties: a disabled action still occupies its place in
- * the fan, so numbering around it would make the remaining actions jump.
- */
+/** @internal Every action slot, including disabled ones, so positional numbering doesn't shift. */
 export declare const ANY_ITEM_SELECTOR = "[role=\"menuitem\"]";
 /** @internal Focusable, non-disabled actions — the set arrow keys and typeahead move between. */
 export declare const ITEM_SELECTOR = "[role=\"menuitem\"]:not([data-disabled])";
 /** @internal The popper side each fan direction positions its content on. */
 export declare const DIRECTION_SIDE: Record<SpeedDialDirection, Side>;
-export declare const SpeedDialProvider: {
-    (props: SpeedDialContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useSpeedDialContext: (consumerName: string) => SpeedDialContextValue;
+export declare const SpeedDialProvider: React.FC<SpeedDialContextValue & {
+    children: React.ReactNode;
+}>, 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 | undefined;
+};
 /**
- * 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.
- *
- * 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.
- *
- * Works controlled (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ * SpeedDial's state and context primitive; renders no DOM and positions children via a popper root.
  *
  * @example
  * ```tsx
- * <SpeedDial direction="up">
+ * <SpeedDialRoot direction="up">
  *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
  *   <SpeedDialPortal>
  *     <SpeedDialContent>
@@ -45,10 +33,28 @@ export declare const SpeedDialProvider: {
  *       </SpeedDialItem>
  *     </SpeedDialContent>
  *   </SpeedDialPortal>
- * </SpeedDial>
+ * </SpeedDialRoot>
+ * ```
+ */
+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.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial
+ *   trigger={<Button aria-label="Quick actions">+</Button>}
+ *   actions={[
+ *     { label: 'Share', onSelect: share },
+ *     { label: 'Delete', onSelect: remove, disabled: !canDelete },
+ *   ]}
+ * />
  * ```
  */
-export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare function SpeedDial({ trigger, actions, onSelect, overlay, open, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, hoverOpenDelay, disabled, size, ...rest }: SpeedDialProps): React.JSX.Element;
 export declare namespace SpeedDial {
     var displayName: string;
 }

package/dist/speed-dial/SpeedDial.js

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