@stevederico/skateboard-ui 4.1.0 → 4.3.0

package/dist/ui/slider.d.ts

@@ -8,11 +8,12 @@ export interface SliderProps extends Omit<React.ComponentProps<"div">, "defaultV
     step?: number;
     orientation?: "horizontal" | "vertical";
     disabled?: boolean;
+    name?: string;
 }
 /**
  * Self-contained slider with pointer drag and keyboard control. Supports one or
  * more thumbs (the nearest thumb to the pointer is the one that moves). Track,
  * range, and thumbs mirror the shadcn structure/classes.
  */
-declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, ...props }: SliderProps): React.JSX.Element;
+declare function Slider({ className, value, defaultValue, onValueChange, min, max, step, orientation, disabled, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: SliderProps): React.JSX.Element;
 export { Slider };

package/dist/ui/slider.js

@@ -9,7 +9,10 @@ const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
  * more thumbs (the nearest thumb to the pointer is the one that moves). Track,
  * range, and thumbs mirror the shadcn structure/classes.
  */
-function Slider({ className, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, ...props }) {
+function Slider({ className, value, defaultValue, onValueChange, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, name, 
+// Pull the accessible-name props off so they don't land on the outer wrapper
+// div; the thumb (role="slider") is the element that needs them.
+"aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
     const [values, setValues] = useControllableState({
         value,
         defaultValue: defaultValue ?? [min],
@@ -85,10 +88,12 @@ function Slider({ className, value, defaultValue, onValueChange, min = 0, max =
     };
     const rangeStart = values.length > 1 ? Math.min(...values.map(percent)) : 0;
     const rangeEnd = Math.max(...values.map(percent));
-    return (_jsx("div", { "data-slot": "slider", "data-orientation": orientation, "data-disabled": disabled ? "" : undefined, className: cn("data-horizontal:w-full data-vertical:h-full", className), ...props, children: _jsxs("div", { "data-orientation": orientation, onPointerDown: onPointerDown, className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx("div", { ref: trackRef, "data-slot": "slider-track", "data-orientation": orientation, className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5", children: _jsx("div", { "data-slot": "slider-range", "data-orientation": orientation, className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full", style: vertical
-                            ? { bottom: `${rangeStart}%`, height: `${rangeEnd - rangeStart}%` }
-                            : { left: `${rangeStart}%`, width: `${rangeEnd - rangeStart}%` } }) }), values.map((v, index) => (_jsx("span", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": v, "aria-orientation": orientation, "aria-disabled": disabled || undefined, "data-slot": "slider-thumb", onKeyDown: onThumbKeyDown(index), className: "absolute block size-4 shrink-0 -translate-x-1/2 cursor-pointer rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-vertical:translate-x-0 data-vertical:-translate-y-1/2", "data-orientation": orientation, style: vertical
-                        ? { bottom: `${percent(v)}%` }
-                        : { left: `${percent(v)}%` } }, index)))] }) }));
+    return (_jsxs("div", { "data-slot": "slider", "data-orientation": orientation, "data-disabled": disabled ? "" : undefined, className: cn("data-horizontal:w-full data-vertical:h-full", className), ...props, children: [_jsxs("div", { "data-orientation": orientation, onPointerDown: onPointerDown, className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx("div", { ref: trackRef, "data-slot": "slider-track", "data-orientation": orientation, className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5", children: _jsx("div", { "data-slot": "slider-range", "data-orientation": orientation, className: "absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full", style: vertical
+                                ? { bottom: `${rangeStart}%`, height: `${rangeEnd - rangeStart}%` }
+                                : { left: `${rangeStart}%`, width: `${rangeEnd - rangeStart}%` } }) }), values.map((v, index) => (_jsx("span", { role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": v, "aria-orientation": orientation, "aria-disabled": disabled || undefined, "data-slot": "slider-thumb", "data-disabled": disabled ? "" : undefined, onKeyDown: onThumbKeyDown(index), className: "absolute block size-4 shrink-0 -translate-x-1/2 cursor-pointer rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 data-vertical:translate-x-0 data-vertical:-translate-y-1/2", "data-orientation": orientation, style: vertical
+                            ? { bottom: `${percent(v)}%` }
+                            : { left: `${percent(v)}%` } }, index)))] }), name
+                ? values.map((v, i) => (_jsx("input", { type: "hidden", name: name, value: v }, i)))
+                : null] }));
 }
 export { Slider };

package/dist/ui/tooltip.js

@@ -68,7 +68,7 @@ function TooltipTrigger({ asChild = false, render, nativeButton: _nativeButton,
         }, ...props, children: slotChild }));
 }
 function TooltipContent({ className, style, ref, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
-    const { open, contentId, triggerRef } = useTooltip();
+    const { open, contentId, triggerRef, hide } = useTooltip();
     const [mounted, presenceRef] = usePresence(open);
     const { floatingRef, pos } = useFloating(triggerRef, mounted, {
         side,
@@ -76,6 +76,32 @@ function TooltipContent({ className, style, ref, side = "top", sideOffset = 4, a
         sideOffset,
         alignOffset,
     });
+    // Touch dismissal: on touch devices a tooltip can open via tap/long-press
+    // (which focuses the trigger) with no pointer-leave/blur to close it again.
+    // While open, close it when the user points outside both the trigger and the
+    // content, and on scroll — so it can never get stuck on screen. Capture phase
+    // ensures we observe the pointerdown even if inner handlers stop propagation.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (!(target instanceof Node))
+                return;
+            const trigger = triggerRef.current;
+            const content = presenceRef.current;
+            if (trigger?.contains(target) || content?.contains(target))
+                return;
+            hide();
+        };
+        const onScroll = () => hide();
+        document.addEventListener("pointerdown", onPointerDown, true);
+        window.addEventListener("scroll", onScroll, true);
+        return () => {
+            document.removeEventListener("pointerdown", onPointerDown, true);
+            window.removeEventListener("scroll", onScroll, true);
+        };
+    }, [open, hide, triggerRef, presenceRef]);
     if (!mounted)
         return null;
     return (_jsx(Portal, { children: _jsx("div", { ref: mergeRefs(floatingRef, presenceRef, ref), id: contentId, role: "tooltip", "data-slot": "tooltip-content", "data-state": open ? "open" : "closed", "data-open": open ? "" : undefined, "data-closed": open ? undefined : "", "data-side": pos?.side ?? side, style: {

package/dist/ui/use-labelling.d.ts

@@ -0,0 +1,21 @@
+export interface DialogLabelling {
+    titleId: string;
+    descriptionId: string;
+    /** Call from the title element's effect; returns the unregister cleanup. */
+    registerTitle: () => () => void;
+    /** Call from the description element's effect; returns the unregister cleanup. */
+    registerDescription: () => () => void;
+    /** `aria-labelledby` value — undefined when no title is rendered, so the
+     * attribute is omitted instead of pointing at a missing element. */
+    labelledBy: string | undefined;
+    /** `aria-describedby` value — undefined when no description is rendered. */
+    describedBy: string | undefined;
+}
+/**
+ * Tracks whether a title/description part is actually rendered inside an overlay
+ * so the container can wire `aria-labelledby`/`aria-describedby` only when the
+ * referenced element exists. An unconditional IDREF to an absent node is an
+ * accessibility defect (dangling reference) that assistive tech may announce as
+ * an empty or broken label. Reference-counted so it is robust to remounting.
+ */
+export declare function useDialogLabelling(): DialogLabelling;

package/dist/ui/use-labelling.js

@@ -0,0 +1,43 @@
+"use client";
+import * as React from "react";
+/**
+ * Tracks whether a title/description part is actually rendered inside an overlay
+ * so the container can wire `aria-labelledby`/`aria-describedby` only when the
+ * referenced element exists. An unconditional IDREF to an absent node is an
+ * accessibility defect (dangling reference) that assistive tech may announce as
+ * an empty or broken label. Reference-counted so it is robust to remounting.
+ */
+export function useDialogLabelling() {
+    const titleId = React.useId();
+    const descriptionId = React.useId();
+    const titleCount = React.useRef(0);
+    const descriptionCount = React.useRef(0);
+    const [hasTitle, setHasTitle] = React.useState(false);
+    const [hasDescription, setHasDescription] = React.useState(false);
+    const registerTitle = React.useCallback(() => {
+        titleCount.current += 1;
+        setHasTitle(true);
+        return () => {
+            titleCount.current -= 1;
+            if (titleCount.current === 0)
+                setHasTitle(false);
+        };
+    }, []);
+    const registerDescription = React.useCallback(() => {
+        descriptionCount.current += 1;
+        setHasDescription(true);
+        return () => {
+            descriptionCount.current -= 1;
+            if (descriptionCount.current === 0)
+                setHasDescription(false);
+        };
+    }, []);
+    return {
+        titleId,
+        descriptionId,
+        registerTitle,
+        registerDescription,
+        labelledBy: hasTitle ? titleId : undefined,
+        describedBy: hasDescription ? descriptionId : undefined,
+    };
+}

package/dist/ui/use-pointer-moved.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Guard against synthetic `pointermove` events that fire when content scrolls
+ * under a stationary pointer (e.g. keyboard arrow navigation scrolls the focused
+ * item into view). Those events report the SAME client coordinates as the last,
+ * so pointer-driven focus would otherwise yank focus off the keyboard target.
+ *
+ * Returns a predicate that is true only when the pointer's client position
+ * actually changed since the previous call — wire it at the top of a menu's
+ * `onPointerMove` and bail when it returns false.
+ */
+export declare function usePointerMoved(): (event: React.PointerEvent) => boolean;

package/dist/ui/use-pointer-moved.js

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+/**
+ * Guard against synthetic `pointermove` events that fire when content scrolls
+ * under a stationary pointer (e.g. keyboard arrow navigation scrolls the focused
+ * item into view). Those events report the SAME client coordinates as the last,
+ * so pointer-driven focus would otherwise yank focus off the keyboard target.
+ *
+ * Returns a predicate that is true only when the pointer's client position
+ * actually changed since the previous call — wire it at the top of a menu's
+ * `onPointerMove` and bail when it returns false.
+ */
+export function usePointerMoved() {
+    const last = React.useRef(null);
+    return React.useCallback((event) => {
+        const prev = last.current;
+        const moved = !prev || prev.x !== event.clientX || prev.y !== event.clientY;
+        last.current = { x: event.clientX, y: event.clientY };
+        return moved;
+    }, []);
+}

package/dist/ui/use-scroll-lock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lock background scroll while `active` is true, reentrant across any number of
+ * simultaneously-open overlays. The original `body` overflow is captured on the
+ * first lock and restored only when the last lock releases.
+ */
+export declare function useScrollLock(active: boolean): void;

package/dist/ui/use-scroll-lock.js

@@ -0,0 +1,29 @@
+"use client";
+import * as React from "react";
+// Module-level reference count so stacked overlays share one lock: the first to
+// open saves and replaces `body` overflow, and only the last to close restores
+// it. Without this, an inner overlay's cleanup would unlock scroll while an
+// outer overlay is still open (or vice-versa).
+let lockCount = 0;
+let previousOverflow = "";
+/**
+ * Lock background scroll while `active` is true, reentrant across any number of
+ * simultaneously-open overlays. The original `body` overflow is captured on the
+ * first lock and restored only when the last lock releases.
+ */
+export function useScrollLock(active) {
+    React.useEffect(() => {
+        if (!active)
+            return;
+        if (lockCount === 0) {
+            previousOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+        }
+        lockCount++;
+        return () => {
+            lockCount--;
+            if (lockCount === 0)
+                document.body.style.overflow = previousOverflow;
+        };
+    }, [active]);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "4.1.0",
+  "version": "4.3.0",
   "type": "module",
   "exports": {
     ".": {