@stevederico/skateboard-ui 3.12.0 → 4.1.0

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * Keep an element mounted through its CSS exit animation. When `open` flips to
+ * false the element stays rendered (so `data-closed:animate-out` can play) until
+ * its animations finish, then unmounts. Falls back to a timeout if there are
+ * none. Returns `[mounted, ref]` — attach `ref` to the animated element.
+ */
+export declare function usePresence<T extends HTMLElement = HTMLElement>(open: boolean): [boolean, React.RefObject<T | null>];

package/dist/ui/use-presence.js

@@ -0,0 +1,48 @@
+"use client";
+import * as React from "react";
+/**
+ * Keep an element mounted through its CSS exit animation. When `open` flips to
+ * false the element stays rendered (so `data-closed:animate-out` can play) until
+ * its animations finish, then unmounts. Falls back to a timeout if there are
+ * none. Returns `[mounted, ref]` — attach `ref` to the animated element.
+ */
+export function usePresence(open) {
+    const ref = React.useRef(null);
+    const [mounted, setMounted] = React.useState(open);
+    React.useEffect(() => {
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        const node = ref.current;
+        if (!node) {
+            setMounted(false);
+            return;
+        }
+        let cancelled = false;
+        let fallback = 0;
+        const finish = () => {
+            if (!cancelled)
+                setMounted(false);
+        };
+        // Let the data-closed classes apply and animations register, then wait for
+        // the actual animations to finish (no short timeout racing them — that would
+        // cut off any exit animation longer than the timeout). A generous backstop
+        // only guards against animations that never settle.
+        const raf = requestAnimationFrame(() => {
+            const anims = node.getAnimations?.() ?? [];
+            if (anims.length === 0) {
+                finish();
+                return;
+            }
+            Promise.allSettled(anims.map((a) => a.finished)).then(finish);
+            fallback = window.setTimeout(finish, 2000);
+        });
+        return () => {
+            cancelled = true;
+            window.clearTimeout(fallback);
+            cancelAnimationFrame(raf);
+        };
+    }, [open]);
+    return [mounted, ref];
+}

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": "3.12.0",
+  "version": "4.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -148,6 +148,11 @@
       "import": "./dist/shadcn/ui/*.js",
       "default": "./dist/shadcn/ui/*.js"
     },
+    "./ui/*": {
+      "types": "./dist/ui/*.d.ts",
+      "import": "./dist/ui/*.js",
+      "default": "./dist/ui/*.js"
+    },
     "./shadcn/lib/utils": {
       "types": "./dist/shadcn/lib/utils.d.ts",
       "import": "./dist/shadcn/lib/utils.js",

package/dist/shadcn/lib/base-ui/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2019 Material-UI SAS
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/shadcn/lib/base-ui/_chunk-000kmre8.js

@@ -1,150 +0,0 @@
-// node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
-function hasWindow() {
-  return typeof window !== "undefined";
-}
-function getNodeName(node) {
-  if (isNode(node)) {
-    return (node.nodeName || "").toLowerCase();
-  }
-  return "#document";
-}
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? undefined : _node$ownerDocument.defaultView) || window;
-}
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? undefined : _ref.documentElement;
-}
-function isNode(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Node || value instanceof getWindow(value).Node;
-}
-function isElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-function isHTMLElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
-}
-function isShadowRoot(value) {
-  if (!hasWindow() || typeof ShadowRoot === "undefined") {
-    return false;
-  }
-  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
-}
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
-}
-function isTableElement(element) {
-  return /^(table|td|th)$/.test(getNodeName(element));
-}
-function isTopLayer(element) {
-  try {
-    if (element.matches(":popover-open")) {
-      return true;
-    }
-  } catch (_e) {}
-  try {
-    return element.matches(":modal");
-  } catch (_e) {
-    return false;
-  }
-}
-var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
-var containRe = /paint|layout|strict|content/;
-var isNotNone = (value) => !!value && value !== "none";
-var isWebKitValue;
-function isContainingBlock(elementOrCss) {
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
-  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
-}
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else if (isTopLayer(currentNode)) {
-      return null;
-    }
-    currentNode = getParentNode(currentNode);
-  }
-  return null;
-}
-function isWebKit() {
-  if (isWebKitValue == null) {
-    isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
-  }
-  return isWebKitValue;
-}
-function isLastTraversableNode(node) {
-  return /^(html|body|#document)$/.test(getNodeName(node));
-}
-function getComputedStyle(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-function getNodeScroll(element) {
-  if (isElement(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.scrollX,
-    scrollTop: element.scrollY
-  };
-}
-function getParentNode(node) {
-  if (getNodeName(node) === "html") {
-    return node;
-  }
-  const result = node.assignedSlot || node.parentNode || isShadowRoot(node) && node.host || getDocumentElement(node);
-  return isShadowRoot(result) ? result.host : result;
-}
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-function getOverflowAncestors(node, list, traverseIframes) {
-  var _node$ownerDocument2;
-  if (list === undefined) {
-    list = [];
-  }
-  if (traverseIframes === undefined) {
-    traverseIframes = true;
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? undefined : _node$ownerDocument2.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    const frameElement = getFrameElement(win);
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-  } else {
-    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-  }
-}
-function getFrameElement(win) {
-  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
-}
-
-export { getNodeName, getWindow, getDocumentElement, isNode, isElement, isHTMLElement, isShadowRoot, isOverflowElement, isTableElement, isTopLayer, isContainingBlock, getContainingBlock, isWebKit, isLastTraversableNode, getComputedStyle, getNodeScroll, getParentNode, getOverflowAncestors, getFrameElement };

package/dist/shadcn/lib/base-ui/_chunk-1vw45v38.js

@@ -1,64 +0,0 @@
-import {
-  __commonJS
-} from "./_chunk-svxv97ph.js";
-
-// node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
-import * as React from "react";
-var require_use_sync_external_store_shim_development = __commonJS((exports) => {
-  (function() {
-    function is(x, y) {
-      return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y;
-    }
-    function useSyncExternalStore$2(subscribe, getSnapshot) {
-      didWarnOld18Alpha || React.startTransition === undefined || (didWarnOld18Alpha = true, console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));
-      var value = getSnapshot();
-      if (!didWarnUncachedGetSnapshot) {
-        var cachedValue = getSnapshot();
-        objectIs(value, cachedValue) || (console.error("The result of getSnapshot should be cached to avoid an infinite loop"), didWarnUncachedGetSnapshot = true);
-      }
-      cachedValue = useState2({
-        inst: { value, getSnapshot }
-      });
-      var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-      useLayoutEffect2(function() {
-        inst.value = value;
-        inst.getSnapshot = getSnapshot;
-        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-      }, [subscribe, value, getSnapshot]);
-      useEffect2(function() {
-        checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-        return subscribe(function() {
-          checkIfSnapshotChanged(inst) && forceUpdate({ inst });
-        });
-      }, [subscribe]);
-      useDebugValue2(value);
-      return value;
-    }
-    function checkIfSnapshotChanged(inst) {
-      var latestGetSnapshot = inst.getSnapshot;
-      inst = inst.value;
-      try {
-        var nextValue = latestGetSnapshot();
-        return !objectIs(inst, nextValue);
-      } catch (error) {
-        return true;
-      }
-    }
-    function useSyncExternalStore$1(subscribe, getSnapshot) {
-      return getSnapshot();
-    }
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var objectIs = typeof Object.is === "function" ? Object.is : is, useState2 = React.useState, useEffect2 = React.useEffect, useLayoutEffect2 = React.useLayoutEffect, useDebugValue2 = React.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = typeof window === "undefined" || typeof window.document === "undefined" || typeof window.document.createElement === "undefined" ? useSyncExternalStore$1 : useSyncExternalStore$2;
-    exports.useSyncExternalStore = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== "undefined" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop === "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  })();
-});
-
-// node_modules/use-sync-external-store/shim/index.js
-var require_shim = __commonJS((exports, module) => {
-  if (false) {} else {
-    module.exports = require_use_sync_external_store_shim_development();
-  }
-});
-
-export { require_shim };

package/dist/shadcn/lib/base-ui/_chunk-23rx7haq.js

@@ -1,81 +0,0 @@
-import {
-  useLabelableContext
-} from "./_chunk-8ctgmf06.js";
-import {
-  useBaseUiId
-} from "./_chunk-wdqynnjf.js";
-import {
-  isElement
-} from "./_chunk-000kmre8.js";
-import {
-  useStableCallback
-} from "./_chunk-cwvtvwc7.js";
-import {
-  useIsoLayoutEffect
-} from "./_chunk-5tze5c8q.js";
-import {
-  NOOP,
-  useRefWithInit
-} from "./_chunk-x8xehj6d.js";
-
-// node_modules/@base-ui/react/esm/internals/labelable-provider/useLabelableId.js
-import * as React from "react";
-"use client";
-function useLabelableId(params = {}) {
-  const {
-    id,
-    implicit = false,
-    controlRef
-  } = params;
-  const {
-    controlId,
-    registerControlId
-  } = useLabelableContext();
-  const defaultId = useBaseUiId(id);
-  const controlIdForEffect = implicit ? controlId : undefined;
-  const controlSourceRef = useRefWithInit(() => Symbol("labelable-control"));
-  const hasRegisteredRef = React.useRef(false);
-  const hadExplicitIdRef = React.useRef(id != null);
-  const unregisterControlId = useStableCallback(() => {
-    if (!hasRegisteredRef.current || registerControlId === NOOP) {
-      return;
-    }
-    hasRegisteredRef.current = false;
-    registerControlId(controlSourceRef.current, undefined);
-  });
-  useIsoLayoutEffect(() => {
-    if (registerControlId === NOOP) {
-      return;
-    }
-    let nextId;
-    if (implicit) {
-      const elem = controlRef?.current;
-      if (isElement(elem) && elem.closest("label") != null) {
-        nextId = id ?? null;
-      } else {
-        nextId = controlIdForEffect ?? defaultId;
-      }
-    } else if (id != null) {
-      hadExplicitIdRef.current = true;
-      nextId = id;
-    } else if (hadExplicitIdRef.current) {
-      nextId = defaultId;
-    } else {
-      unregisterControlId();
-      return;
-    }
-    if (nextId === undefined) {
-      unregisterControlId();
-      return;
-    }
-    hasRegisteredRef.current = true;
-    registerControlId(controlSourceRef.current, nextId);
-    return;
-  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
-  React.useEffect(() => {
-    return unregisterControlId;
-  }, [unregisterControlId]);
-  return controlId ?? defaultId;
-}
-
-export { useLabelableId };