@skdx/react 0.26.0

package/dist/slider/SliderThumb.d.cts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { SliderThumbProps } from './types.cjs';
+/**
+ * A single draggable handle on a {@link Slider}, positioned by `index` (or,
+ * if omitted, by its render order among sibling thumbs). Renders
+ * `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
+ * `aria-orientation`, `aria-disabled`, `data-orientation`, and
+ * `data-disabled`. Focusable and keyboard-operable: Arrow keys step by
+ * `step`, PageUp/PageDown step by a larger increment (1/10th of the range),
+ * Home/End jump to `min`/`max`. When the slider has a `name`, also renders a
+ * visually-hidden native `<input type="number">` (indexed as `name[i]` for
+ * multi-thumb sliders) for form submission.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[25, 75]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderThumb.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { SliderThumbProps } from './types.js';
+/**
+ * A single draggable handle on a {@link Slider}, positioned by `index` (or,
+ * if omitted, by its render order among sibling thumbs). Renders
+ * `role="slider"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,
+ * `aria-orientation`, `aria-disabled`, `data-orientation`, and
+ * `data-disabled`. Focusable and keyboard-operable: Arrow keys step by
+ * `step`, PageUp/PageDown step by a larger increment (1/10th of the range),
+ * Home/End jump to `min`/`max`. When the slider has a `name`, also renders a
+ * visually-hidden native `<input type="number">` (indexed as `name[i]` for
+ * multi-thumb sliders) for form submission.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[25, 75]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb index={0} aria-label="Minimum" />
+ *   <SliderThumb index={1} aria-label="Maximum" />
+ * </Slider>
+ * ```
+ */
+export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderTrack.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SliderTrackProps } from './types.cjs';
+/**
+ * The full-length background bar of a {@link Slider}. Renders
+ * `<span data-orientation data-disabled>`; purely presentational, so pointer
+ * interaction is handled by the `Slider` root itself.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[50]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb />
+ * </Slider>
+ * ```
+ */
+export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/SliderTrack.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { SliderTrackProps } from './types.js';
+/**
+ * The full-length background bar of a {@link Slider}. Renders
+ * `<span data-orientation data-disabled>`; purely presentational, so pointer
+ * interaction is handled by the `Slider` root itself.
+ *
+ * @example
+ * ```tsx
+ * <Slider defaultValue={[50]}>
+ *   <SliderTrack>
+ *     <SliderRange />
+ *   </SliderTrack>
+ *   <SliderThumb />
+ * </Slider>
+ * ```
+ */
+export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/slider/index.d.cts

@@ -0,0 +1,5 @@
+export * from './Slider.cjs';
+export { SliderTrack } from './SliderTrack.cjs';
+export { SliderRange } from './SliderRange.cjs';
+export { SliderThumb } from './SliderThumb.cjs';
+export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './types.cjs';

package/dist/slider/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Slider.js';
+export { SliderTrack } from './SliderTrack.js';
+export { SliderRange } from './SliderRange.js';
+export { SliderThumb } from './SliderThumb.js';
+export type { SliderProps, SliderTrackProps, SliderRangeProps, SliderThumbProps } from './types.js';

package/dist/slider/types.d.cts

@@ -0,0 +1,90 @@
+import type * as React from 'react';
+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. */
+export interface SliderContextValue {
+    values: number[];
+    min: number;
+    max: number;
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+    thumbIndexRef: React.RefObject<number>;
+    rootNode: HTMLSpanElement | null;
+    updateValue: (index: number, value: number) => void;
+    step: number;
+    name?: string;
+}
+/** Props for the {@link Slider} root. */
+export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Selected values, one per thumb, for controlled usage. Pair with `onValueChange`.
+     * @default undefined
+     */
+    value?: number[];
+    /**
+     * 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[];
+    /**
+     * Fires with the new values array on every change during a drag or key press.
+     * @default undefined
+     */
+    onValueChange?: (value: number[]) => void;
+    /**
+     * Fires once with the final values array when a drag ends (pointer up).
+     * @default undefined
+     */
+    onValueCommit?: (value: number[]) => void;
+    /**
+     * Minimum value of the range the slider can select.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the range the slider can select.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Increment values are rounded to, for both pointer and keyboard interaction.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Disables pointer and keyboard interaction on all thumbs.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to map pointer
+     * position and Arrow keys to a value.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Name for native form participation; each thumb renders its own hidden input.
+     * @default undefined
+     */
+    name?: string;
+}
+/** Props for the {@link SliderTrack}, the full-length background bar. */
+export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link SliderRange}, the filled portion between the min and selected value(s). */
+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, ...).
+     * @default undefined
+     */
+    index?: number;
+    /**
+     * Accessible name for this thumb, since it has no visible text content.
+     * @default undefined
+     */
+    'aria-label'?: string;
+}

package/dist/slider/types.d.ts

@@ -0,0 +1,90 @@
+import type * as React from 'react';
+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. */
+export interface SliderContextValue {
+    values: number[];
+    min: number;
+    max: number;
+    disabled: boolean;
+    orientation: 'horizontal' | 'vertical';
+    thumbIndexRef: React.RefObject<number>;
+    rootNode: HTMLSpanElement | null;
+    updateValue: (index: number, value: number) => void;
+    step: number;
+    name?: string;
+}
+/** Props for the {@link Slider} root. */
+export interface SliderProps extends Omit<PrimitivePropsWithRef<'span'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Selected values, one per thumb, for controlled usage. Pair with `onValueChange`.
+     * @default undefined
+     */
+    value?: number[];
+    /**
+     * 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[];
+    /**
+     * Fires with the new values array on every change during a drag or key press.
+     * @default undefined
+     */
+    onValueChange?: (value: number[]) => void;
+    /**
+     * Fires once with the final values array when a drag ends (pointer up).
+     * @default undefined
+     */
+    onValueCommit?: (value: number[]) => void;
+    /**
+     * Minimum value of the range the slider can select.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the range the slider can select.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Increment values are rounded to, for both pointer and keyboard interaction.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Disables pointer and keyboard interaction on all thumbs.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Layout axis, exposed as `data-orientation` and used to map pointer
+     * position and Arrow keys to a value.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Name for native form participation; each thumb renders its own hidden input.
+     * @default undefined
+     */
+    name?: string;
+}
+/** Props for the {@link SliderTrack}, the full-length background bar. */
+export interface SliderTrackProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for the {@link SliderRange}, the filled portion between the min and selected value(s). */
+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, ...).
+     * @default undefined
+     */
+    index?: number;
+    /**
+     * Accessible name for this thumb, since it has no visible text content.
+     * @default undefined
+     */
+    'aria-label'?: string;
+}

package/dist/speed-dial/SpeedDial.cjs

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

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

@@ -0,0 +1,54 @@
+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.
+ */
+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;
+/**
+ * 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`).
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial direction="up">
+ *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
+ *   <SpeedDialPortal>
+ *     <SpeedDialContent>
+ *       <SpeedDialItem onSelect={share}>
+ *         <ShareIcon aria-hidden />
+ *         <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *       </SpeedDialItem>
+ *     </SpeedDialContent>
+ *   </SpeedDialPortal>
+ * </SpeedDial>
+ * ```
+ */
+export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare namespace SpeedDial {
+    var displayName: string;
+}

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

@@ -0,0 +1,54 @@
+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.
+ */
+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;
+/**
+ * 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`).
+ *
+ * @example
+ * ```tsx
+ * <SpeedDial direction="up">
+ *   <SpeedDialTrigger aria-label="Actions">+</SpeedDialTrigger>
+ *   <SpeedDialPortal>
+ *     <SpeedDialContent>
+ *       <SpeedDialItem onSelect={share}>
+ *         <ShareIcon aria-hidden />
+ *         <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *       </SpeedDialItem>
+ *     </SpeedDialContent>
+ *   </SpeedDialPortal>
+ * </SpeedDial>
+ * ```
+ */
+export declare function SpeedDial({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, direction, openOnHover, hoverCloseDelay, disabled, }: SpeedDialProps): React.JSX.Element;
+export declare namespace SpeedDial {
+    var displayName: string;
+}

package/dist/speed-dial/SpeedDial.js

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

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { SpeedDialContentProps } from './types.cjs';
+/**
+ * The fanned-out actions: `role="menu"` with `aria-orientation` matching the
+ * fan's axis, `data-state` (`open`/`closed`) and `data-direction`, positioned
+ * by the shared popper layer against the trigger on the side the root's
+ * `direction` dictates. `align` (defaults to `'center'`), `sideOffset`
+ * (defaults to `8`), `alignOffset`, `avoidCollisions` and `collisionPadding`
+ * are yours; `side` is not, because it *is* the direction. Also exposes
+ * `data-side`/`data-align` reflecting the resolved placement, which can differ
+ * from the requested one after a collision flip.
+ *
+ * Holds one tab stop for the whole fan: arrow keys along the axis move between
+ * actions in DOM order (wrapping unless `loop` is `false`), Home/End jump to
+ * the ends, and typing letters jumps to the action whose label starts with
+ * them. Under `dir="rtl"` the horizontal arrows swap. Focus moves to the first
+ * action on open, and Escape, Tab, or selecting an action returns it to the
+ * trigger.
+ *
+ * Closes on Escape, on Tab (per the WAI-ARIA menu pattern), or on an outside
+ * interaction: pointer-down outside or focus moving outside, each reported to
+ * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
+ * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
+ * calling `event.preventDefault()` keeps it open.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDialPortal>
+ *   <SpeedDialContent sideOffset={12}>
+ *     <SpeedDialItem onSelect={share}>
+ *       <ShareIcon aria-hidden />
+ *       <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *     </SpeedDialItem>
+ *   </SpeedDialContent>
+ * </SpeedDialPortal>
+ * ```
+ */
+export declare const SpeedDialContent: React.ForwardRefExoticComponent<Omit<SpeedDialContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import type { SpeedDialContentProps } from './types.js';
+/**
+ * The fanned-out actions: `role="menu"` with `aria-orientation` matching the
+ * fan's axis, `data-state` (`open`/`closed`) and `data-direction`, positioned
+ * by the shared popper layer against the trigger on the side the root's
+ * `direction` dictates. `align` (defaults to `'center'`), `sideOffset`
+ * (defaults to `8`), `alignOffset`, `avoidCollisions` and `collisionPadding`
+ * are yours; `side` is not, because it *is* the direction. Also exposes
+ * `data-side`/`data-align` reflecting the resolved placement, which can differ
+ * from the requested one after a collision flip.
+ *
+ * Holds one tab stop for the whole fan: arrow keys along the axis move between
+ * actions in DOM order (wrapping unless `loop` is `false`), Home/End jump to
+ * the ends, and typing letters jumps to the action whose label starts with
+ * them. Under `dir="rtl"` the horizontal arrows swap. Focus moves to the first
+ * action on open, and Escape, Tab, or selecting an action returns it to the
+ * trigger.
+ *
+ * Closes on Escape, on Tab (per the WAI-ARIA menu pattern), or on an outside
+ * interaction: pointer-down outside or focus moving outside, each reported to
+ * `onPointerDownOutside`/`onFocusOutside` and, just before them and with the
+ * same event, to `onInteractOutside`. Any of those (or `onEscapeKeyDown`)
+ * calling `event.preventDefault()` keeps it open.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDialPortal>
+ *   <SpeedDialContent sideOffset={12}>
+ *     <SpeedDialItem onSelect={share}>
+ *       <ShareIcon aria-hidden />
+ *       <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ *     </SpeedDialItem>
+ *   </SpeedDialContent>
+ * </SpeedDialPortal>
+ * ```
+ */
+export declare const SpeedDialContent: React.ForwardRefExoticComponent<Omit<SpeedDialContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { SpeedDialItemContextValue, SpeedDialItemProps } from './types.cjs';
+export declare const SpeedDialItemProvider: {
+    (props: SpeedDialItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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:
+ *
+ * ```css
+ * .my-speed-dial-item {
+ *   transition: transform 160ms;
+ *   transition-delay: calc(var(--skdx-speed-dial-index) * 40ms);
+ * }
+ * [data-direction='up'] .my-speed-dial-item {
+ *   transform: translateY(calc(var(--skdx-speed-dial-offset) * -3.5rem));
+ * }
+ * ```
+ *
+ * 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()}>
+ *   <ShareIcon aria-hidden />
+ *   <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ * </SpeedDialItem>
+ * ```
+ */
+export declare const SpeedDialItem: React.ForwardRefExoticComponent<Omit<SpeedDialItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { SpeedDialItemContextValue, SpeedDialItemProps } from './types.js';
+export declare const SpeedDialItemProvider: {
+    (props: SpeedDialItemContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    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:
+ *
+ * ```css
+ * .my-speed-dial-item {
+ *   transition: transform 160ms;
+ *   transition-delay: calc(var(--skdx-speed-dial-index) * 40ms);
+ * }
+ * [data-direction='up'] .my-speed-dial-item {
+ *   transform: translateY(calc(var(--skdx-speed-dial-offset) * -3.5rem));
+ * }
+ * ```
+ *
+ * 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()}>
+ *   <ShareIcon aria-hidden />
+ *   <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ * </SpeedDialItem>
+ * ```
+ */
+export declare const SpeedDialItem: React.ForwardRefExoticComponent<Omit<SpeedDialItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { SpeedDialItemLabelProps } from './types.cjs';
+/**
+ * The visible text naming its `SpeedDialItem` — the little caption that sits
+ * beside an icon-only action. It registers its `id` with the item, which
+ * 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`.
+ *
+ * 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
+ * permanently needs no override:
+ *
+ * ```css
+ * .my-speed-dial-label {
+ *   opacity: 0;
+ *   transition: opacity 120ms;
+ * }
+ * .my-speed-dial-item:hover .my-speed-dial-label,
+ * .my-speed-dial-item:focus-within .my-speed-dial-label {
+ *   opacity: 1;
+ * }
+ * ```
+ *
+ * Keep it visible to assistive technology even while it is visually hidden —
+ * `opacity: 0` and `visibility: hidden` differ here, and `display: none`
+ * would drop the accessible name along with the text.
+ *
+ * @example
+ * ```tsx
+ * <SpeedDialItem onSelect={share}>
+ *   <ShareIcon aria-hidden />
+ *   <SpeedDialItemLabel>Share</SpeedDialItemLabel>
+ * </SpeedDialItem>
+ * ```
+ */
+export declare const SpeedDialItemLabel: React.ForwardRefExoticComponent<Omit<SpeedDialItemLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;