@stevederico/skateboard-ui 4.0.0 → 4.3.0

package/dist/ui/tabs.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "../shadcn/lib/cva.js";
 import { cn } from "../shadcn/lib/utils.js";
+import { mergeRefs } from "./slot.js";
 import { useControllableState } from "./use-controllable-state.js";
 const TabsContext = React.createContext(null);
 function useTabs() {
@@ -65,10 +66,23 @@ function TabsList({ className, variant = "default", onKeyDown, ...props }) {
             }
         }, ...props }));
 }
-function TabsTrigger({ className, value, onClick, ...props }) {
+function TabsTrigger({ className, value, onClick, ref, ...props }) {
     const { value: active, setValue, idBase } = useTabs();
     const selected = active === value;
-    return (_jsx("button", { type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: selected ? 0 : -1, "data-slot": "tabs-trigger", "data-active": selected ? "" : undefined, className: cn("cursor-pointer relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), onClick: (e) => {
+    const btnRef = React.useRef(null);
+    // Roving tab index: the selected tab is tabbable. When nothing is selected the
+    // first enabled tab must still be reachable so the tablist stays in Tab order
+    // (WAI-ARIA: a tablist always has exactly one tab stop).
+    const [isFirstEnabled, setIsFirstEnabled] = React.useState(false);
+    React.useLayoutEffect(() => {
+        if (active !== undefined)
+            return;
+        const el = btnRef.current;
+        const first = el?.parentElement?.querySelector('[role="tab"]:not([disabled]):not([data-disabled])');
+        setIsFirstEnabled(first === el);
+    });
+    const tabbable = selected || (active === undefined && isFirstEnabled);
+    return (_jsx("button", { ref: mergeRefs(btnRef, ref), type: "button", role: "tab", id: `${idBase}-tab-${idify(value)}`, "aria-selected": selected, "aria-controls": `${idBase}-panel-${idify(value)}`, tabIndex: tabbable ? 0 : -1, "data-slot": "tabs-trigger", "data-active": selected ? "" : undefined, className: cn("cursor-pointer relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", className), onClick: (e) => {
             onClick?.(e);
             if (!e.defaultPrevented)
                 setValue(value);

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-floating.d.ts

@@ -13,6 +13,10 @@ export interface FloatingResult {
     side: Side;
     align: Align;
     transformOrigin: string;
+    /** Usable height (px) between the anchor and the viewport edge on the chosen
+     * side, less offsets/padding. Exposed as `--available-height` so scrollable
+     * popups (menus, selects) can clamp with `max-h-(--available-height)`. */
+    availableHeight: number;
 }
 /**
  * Pure positioning math: place a floating box relative to an anchor on the given

package/dist/ui/use-floating.js

@@ -74,7 +74,11 @@ export function computePosition(anchor, floating, opts, viewport) {
             : align === "end"
                 ? "bottom"
                 : "center";
-    return { x, y, side, align, transformOrigin: `${originX} ${originY}` };
+    // Space left for the popup on its final side, so it can clamp + scroll
+    // instead of overflowing the viewport. For left/right placements the popup
+    // spans the cross axis, so the usable height is the full viewport less padding.
+    const availableHeight = Math.max(0, (vertical ? space[side] - sideOffset : viewport.height) - PAD);
+    return { x, y, side, align, transformOrigin: `${originX} ${originY}`, availableHeight };
 }
 /**
  * Position a floating element against an anchor, recomputing on scroll, resize,
@@ -95,8 +99,12 @@ export function useFloating(anchorRef, open, options = {}) {
         setPos(computePosition(a.getBoundingClientRect(), { width: f.offsetWidth, height: f.offsetHeight }, { side, align, sideOffset, alignOffset }, { width: window.innerWidth, height: window.innerHeight }));
     }, [anchorRef, side, align, sideOffset, alignOffset]);
     React.useLayoutEffect(() => {
-        if (!open)
+        // Drop the last position on close so a reopen stays visibility:hidden until
+        // it is re-measured, rather than flashing one frame at stale coordinates.
+        if (!open) {
+            setPos(null);
             return;
+        }
         const ro = new ResizeObserver(update);
         window.addEventListener("scroll", update, true);
         window.addEventListener("resize", update);

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/dist/ui/use-typeahead.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * WAI-ARIA typeahead for listbox/menu widgets. Collects printable keystrokes
+ * into a buffer that resets after a short pause, then resolves the item whose
+ * label matches the buffer (prefix match). Repeating a single character cycles
+ * through the items starting with it. The caller owns the items and decides how
+ * to focus/activate the returned match.
+ *
+ * Usage inside a keydown handler, after handling Arrow/Home/End/Enter/Escape/Tab:
+ *   const match = onTypeaheadKeyDown(e, items, currentIndex)
+ *   if (match) { e.preventDefault(); match.focus() }
+ *
+ * @returns `onTypeaheadKeyDown(event, items, activeIndex)` → matched element or null.
+ *   `items` must be the enabled item elements in DOM order; `activeIndex` is the
+ *   index of the currently focused item within `items` (-1 if none).
+ */
+export declare function useTypeahead(): {
+    onTypeaheadKeyDown: (event: React.KeyboardEvent, items: HTMLElement[], activeIndex: number) => HTMLElement | null;
+};

package/dist/ui/use-typeahead.js

@@ -0,0 +1,64 @@
+"use client";
+import * as React from "react";
+// How long a typeahead buffer survives between keystrokes before resetting, per
+// the WAI-ARIA typeahead pattern (a short pause starts a fresh search).
+const RESET_MS = 500;
+/** The visible, trimmed, lower-cased label of an item, used for prefix matching. */
+function labelOf(el) {
+    return (el.textContent ?? "").trim().toLowerCase();
+}
+/**
+ * WAI-ARIA typeahead for listbox/menu widgets. Collects printable keystrokes
+ * into a buffer that resets after a short pause, then resolves the item whose
+ * label matches the buffer (prefix match). Repeating a single character cycles
+ * through the items starting with it. The caller owns the items and decides how
+ * to focus/activate the returned match.
+ *
+ * Usage inside a keydown handler, after handling Arrow/Home/End/Enter/Escape/Tab:
+ *   const match = onTypeaheadKeyDown(e, items, currentIndex)
+ *   if (match) { e.preventDefault(); match.focus() }
+ *
+ * @returns `onTypeaheadKeyDown(event, items, activeIndex)` → matched element or null.
+ *   `items` must be the enabled item elements in DOM order; `activeIndex` is the
+ *   index of the currently focused item within `items` (-1 if none).
+ */
+export function useTypeahead() {
+    const bufferRef = React.useRef("");
+    const timerRef = React.useRef(0);
+    React.useEffect(() => () => window.clearTimeout(timerRef.current), []);
+    const onTypeaheadKeyDown = React.useCallback((event, items, activeIndex) => {
+        const key = event.key;
+        // Single printable char only. Space is reserved for activation, and any
+        // modifier combo (Ctrl/Meta/Alt) is a command, not text.
+        if (key.length !== 1 ||
+            key === " " ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey)
+            return null;
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            bufferRef.current = "";
+        }, RESET_MS);
+        const prev = bufferRef.current;
+        bufferRef.current += key.toLowerCase();
+        const buffer = bufferRef.current;
+        // A repeated single character cycles through items starting with it rather
+        // than searching for the literal repetition (e.g. "aa" → next "a…" item).
+        const allSame = buffer.length > 1 && [...buffer].every((c) => c === buffer[0]);
+        const query = allSame ? buffer[0] : buffer;
+        const n = items.length;
+        if (n === 0)
+            return null;
+        // Extending an in-progress match keeps resolving from the current item;
+        // a fresh search or a cycle advances past it.
+        const start = allSame || prev === "" ? Math.max(0, activeIndex) + 1 : Math.max(0, activeIndex);
+        for (let i = 0; i < n; i++) {
+            const item = items[(start + i) % n];
+            if (labelOf(item).startsWith(query))
+                return item;
+        }
+        return null;
+    }, []);
+    return { onTypeaheadKeyDown };
+}

package/package.json

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