@stevederico/skateboard-ui 3.12.0 → 4.0.0

package/dist/ui/use-dismiss.js

@@ -0,0 +1,51 @@
+"use client";
+import * as React from "react";
+// Shared stack of open dismissable layers (most-recently-opened last). Escape
+// only closes the topmost layer, so a popover opened inside a dialog doesn't
+// close both at once.
+const escapeStack = [];
+/**
+ * Close an open layer on Escape or on a pointer press outside all of the given
+ * elements (e.g. the popup and its trigger). The listeners are only attached
+ * while `open`, and because the effect runs after the click that opened the
+ * layer, that same click never re-closes it. Escape is stacked: only the
+ * top layer closes, and the keydown is prevented/stopped so a native `<dialog>`
+ * ancestor's Escape-to-close doesn't also fire.
+ */
+export function useDismiss(open, onDismiss, refs) {
+    const onDismissRef = React.useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const token = () => onDismissRef.current();
+        escapeStack.push(token);
+        const onKeyDown = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (escapeStack[escapeStack.length - 1] !== token)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            onDismissRef.current();
+        };
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (!target)
+                return;
+            if (refs.some((r) => r.current && r.current.contains(target)))
+                return;
+            onDismissRef.current();
+        };
+        document.addEventListener("keydown", onKeyDown, true);
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => {
+            const i = escapeStack.indexOf(token);
+            if (i !== -1)
+                escapeStack.splice(i, 1);
+            document.removeEventListener("keydown", onKeyDown, true);
+            document.removeEventListener("pointerdown", onPointerDown, true);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export interface FloatingOptions {
+    side?: Side;
+    align?: Align;
+    sideOffset?: number;
+    alignOffset?: number;
+}
+export interface FloatingResult {
+    x: number;
+    y: number;
+    side: Side;
+    align: Align;
+    transformOrigin: string;
+}
+/**
+ * Pure positioning math: place a floating box relative to an anchor on the given
+ * side/alignment, flipping to the opposite side when it would overflow and
+ * shifting along the cross axis to stay within the viewport. A focused subset of
+ * what a full floating-ui pipeline does — enough for popovers, menus, tooltips.
+ */
+export declare function computePosition(anchor: DOMRect, floating: {
+    width: number;
+    height: number;
+}, opts: Required<FloatingOptions>, viewport: {
+    width: number;
+    height: number;
+}): FloatingResult;
+/**
+ * Position a floating element against an anchor, recomputing on scroll, resize,
+ * and content resize while `open`. Attach `floatingRef` to the popup.
+ */
+export declare function useFloating(anchorRef: React.RefObject<HTMLElement | null>, open: boolean, options?: FloatingOptions): {
+    floatingRef: React.RefObject<HTMLDivElement | null>;
+    pos: FloatingResult | null;
+    update: () => void;
+};

package/dist/ui/use-floating.js

@@ -0,0 +1,128 @@
+"use client";
+import * as React from "react";
+const PAD = 8;
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+/**
+ * Pure positioning math: place a floating box relative to an anchor on the given
+ * side/alignment, flipping to the opposite side when it would overflow and
+ * shifting along the cross axis to stay within the viewport. A focused subset of
+ * what a full floating-ui pipeline does — enough for popovers, menus, tooltips.
+ */
+export function computePosition(anchor, floating, opts, viewport) {
+    let { side } = opts;
+    const { align, sideOffset, alignOffset } = opts;
+    const space = {
+        top: anchor.top,
+        bottom: viewport.height - anchor.bottom,
+        left: anchor.left,
+        right: viewport.width - anchor.right,
+    };
+    const isVertical = side === "top" || side === "bottom";
+    const need = (isVertical ? floating.height : floating.width) + sideOffset;
+    if (space[side] < need && space[OPPOSITE[side]] > space[side]) {
+        side = OPPOSITE[side];
+    }
+    const vertical = side === "top" || side === "bottom";
+    let x = 0;
+    let y = 0;
+    if (side === "bottom")
+        y = anchor.bottom + sideOffset;
+    else if (side === "top")
+        y = anchor.top - floating.height - sideOffset;
+    else if (side === "right")
+        x = anchor.right + sideOffset;
+    else
+        x = anchor.left - floating.width - sideOffset;
+    if (vertical) {
+        if (align === "start")
+            x = anchor.left + alignOffset;
+        else if (align === "end")
+            x = anchor.right - floating.width - alignOffset;
+        else
+            x = anchor.left + anchor.width / 2 - floating.width / 2 + alignOffset;
+    }
+    else {
+        if (align === "start")
+            y = anchor.top + alignOffset;
+        else if (align === "end")
+            y = anchor.bottom - floating.height - alignOffset;
+        else
+            y = anchor.top + anchor.height / 2 - floating.height / 2 + alignOffset;
+    }
+    x = Math.max(PAD, Math.min(x, viewport.width - floating.width - PAD));
+    y = Math.max(PAD, Math.min(y, viewport.height - floating.height - PAD));
+    const originX = vertical
+        ? align === "start"
+            ? "left"
+            : align === "end"
+                ? "right"
+                : "center"
+        : side === "right"
+            ? "left"
+            : "right";
+    const originY = vertical
+        ? side === "bottom"
+            ? "top"
+            : "bottom"
+        : align === "start"
+            ? "top"
+            : align === "end"
+                ? "bottom"
+                : "center";
+    return { x, y, side, align, transformOrigin: `${originX} ${originY}` };
+}
+/**
+ * Position a floating element against an anchor, recomputing on scroll, resize,
+ * and content resize while `open`. Attach `floatingRef` to the popup.
+ */
+export function useFloating(anchorRef, open, options = {}) {
+    const floatingRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    const side = options.side ?? "bottom";
+    const align = options.align ?? "center";
+    const sideOffset = options.sideOffset ?? 0;
+    const alignOffset = options.alignOffset ?? 0;
+    const update = React.useCallback(() => {
+        const a = anchorRef.current;
+        const f = floatingRef.current;
+        if (!a || !f)
+            return;
+        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)
+            return;
+        const ro = new ResizeObserver(update);
+        window.addEventListener("scroll", update, true);
+        window.addEventListener("resize", update);
+        // The floating node is portaled and may attach a frame late (the Portal
+        // defers rendering until its own effect runs). Retry each frame until the
+        // ref is set, then measure + observe — otherwise the first update() runs
+        // against a null ref, `pos` stays null, and the popup is stuck
+        // `visibility:hidden`.
+        let raf = 0;
+        const attach = () => {
+            if (!floatingRef.current) {
+                raf = requestAnimationFrame(attach);
+                return;
+            }
+            update();
+            ro.observe(floatingRef.current);
+            if (anchorRef.current)
+                ro.observe(anchorRef.current);
+        };
+        attach();
+        return () => {
+            cancelAnimationFrame(raf);
+            window.removeEventListener("scroll", update, true);
+            window.removeEventListener("resize", update);
+            ro.disconnect();
+        };
+    }, [open, update, anchorRef]);
+    return { floatingRef, pos, update };
+}

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "3.12.0",
+  "version": "4.0.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 };