premium-ds 0.1.0

package/dist/chunk-QFS52OK5.js

@@ -0,0 +1,690 @@
+'use client';import { UIMotion } from './chunk-37O2ZXD6.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion, useMotionValue, useDragControls, useTransform, animate } from 'motion/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ovSM = UIMotion;
+var {
+  useState: ovUseState,
+  useEffect: ovUseEffect,
+  useLayoutEffect: ovUseLayoutEffect,
+  useRef: ovUseRef
+} = React;
+function useControllable(controlled, initial, onChange) {
+  const [internal, setInternal] = ovUseState(initial);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = (next) => {
+    if (!isControlled) setInternal(next);
+    if (onChange) onChange(next);
+  };
+  return [value, setValue];
+}
+function ovReadPx(token) {
+  const root = document.documentElement;
+  const v = getComputedStyle(root).getPropertyValue(token).trim();
+  const n = parseFloat(v);
+  if (Number.isNaN(n)) return 0;
+  return v.endsWith("rem") ? n * parseFloat(getComputedStyle(root).fontSize) : n;
+}
+function ovResolveChildren(children, close) {
+  return typeof children === "function" ? children({ close }) : children;
+}
+function ovCloneTrigger(trigger, {
+  open,
+  onPress,
+  panelId,
+  haspopup,
+  triggerRef
+}) {
+  if (!trigger) return null;
+  const setRef = (node) => {
+    if (triggerRef) triggerRef.current = node;
+    const r = trigger.ref;
+    if (typeof r === "function") r(node);
+    else if (r) r.current = node;
+  };
+  return React.cloneElement(trigger, {
+    ref: setRef,
+    onClick: (e) => {
+      const oc = trigger.props.onClick;
+      if (oc) oc(e);
+      onPress();
+    },
+    "aria-haspopup": haspopup,
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : void 0
+  });
+}
+var ovStack = [];
+function ovOnDocKeyDown(e) {
+  if (e.key !== "Escape" || e.defaultPrevented || ovStack.length === 0) return;
+  const top = ovStack[ovStack.length - 1];
+  if (!top.isDismissible()) return;
+  e.preventDefault();
+  top.requestClose();
+}
+function ovIsTop(entry) {
+  return ovStack[ovStack.length - 1] === entry;
+}
+function ovInOverlayAbove(entry, target) {
+  const i = ovStack.indexOf(entry);
+  return i >= 0 && ovStack.slice(i + 1).some((e) => e.contains(target));
+}
+function useOverlayEntry({
+  nodeRef,
+  dismissible,
+  requestClose
+}) {
+  const ref = ovUseRef(null);
+  if (!ref.current) {
+    ref.current = {
+      contains: (t) => Boolean(nodeRef.current && nodeRef.current.contains(t)),
+      isDismissible: () => ref.current._dismissible,
+      requestClose: () => ref.current._close()
+    };
+  }
+  ref.current._dismissible = dismissible;
+  ref.current._close = requestClose;
+  ovUseLayoutEffect(() => {
+    const entry = ref.current;
+    if (ovStack.length === 0) document.addEventListener("keydown", ovOnDocKeyDown);
+    ovStack.push(entry);
+    if (nodeRef.current)
+      nodeRef.current.style.zIndex = "calc(var(--layer-overlay) + " + (ovStack.length - 1) + ")";
+    return () => {
+      const i = ovStack.indexOf(entry);
+      if (i >= 0) ovStack.splice(i, 1);
+      if (ovStack.length === 0) document.removeEventListener("keydown", ovOnDocKeyDown);
+    };
+  }, []);
+  return ref.current;
+}
+function useOutsidePress({
+  entry,
+  refs,
+  enabled,
+  onPress
+}) {
+  const latest = ovUseRef(null);
+  latest.current = { enabled, onPress };
+  ovUseEffect(() => {
+    const onDown = (e) => {
+      if (!latest.current.enabled) return;
+      const t = e.target;
+      if (refs.some((r) => r.current && r.current.contains(t))) return;
+      if (ovInOverlayAbove(entry, t)) return;
+      latest.current.onPress();
+    };
+    document.addEventListener("pointerdown", onDown, true);
+    return () => document.removeEventListener("pointerdown", onDown, true);
+  }, []);
+}
+function useReturnFocus(nodeRef) {
+  ovUseEffect(() => {
+    const prev = document.activeElement;
+    return () => {
+      const a = document.activeElement;
+      const orphaned = !a || a === document.body || nodeRef.current && nodeRef.current.contains(a);
+      if (orphaned && prev && prev.isConnected && typeof prev.focus === "function") {
+        queueMicrotask(() => {
+          if (prev.isConnected) prev.focus({ preventScroll: true });
+        });
+      }
+    };
+  }, []);
+}
+var OV_FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function useFocusTrap({
+  panelRef,
+  entry
+}) {
+  ovUseEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return void 0;
+    const focusables = () => Array.from(panel.querySelectorAll(OV_FOCUSABLE)).filter(
+      (el) => el.offsetParent !== null || el === document.activeElement
+    );
+    const seed = panel.querySelector("[autofocus], [data-autofocus]") || focusables()[0] || panel;
+    seed.focus({ preventScroll: true });
+    const onKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const f = focusables();
+      if (f.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const cur = document.activeElement;
+      if (e.shiftKey) {
+        if (cur === f[0] || cur === panel) {
+          e.preventDefault();
+          f[f.length - 1].focus();
+        }
+      } else if (cur === f[f.length - 1]) {
+        e.preventDefault();
+        f[0].focus();
+      }
+    };
+    const onFocusIn = (e) => {
+      if (panel.contains(e.target)) return;
+      if (!ovIsTop(entry) || ovInOverlayAbove(entry, e.target)) return;
+      (focusables()[0] || panel).focus({ preventScroll: true });
+    };
+    panel.addEventListener("keydown", onKeyDown);
+    document.addEventListener("focusin", onFocusIn);
+    return () => {
+      panel.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("focusin", onFocusIn);
+    };
+  }, []);
+}
+var ovLocks = 0;
+var ovSavedOverflow = "";
+var ovSavedPad = "";
+function useScrollLock() {
+  ovUseEffect(() => {
+    if (++ovLocks === 1) {
+      const body = document.body;
+      const gutter = window.innerWidth - document.documentElement.clientWidth;
+      ovSavedOverflow = body.style.overflow;
+      ovSavedPad = body.style.paddingRight;
+      body.style.overflow = "hidden";
+      if (gutter > 0)
+        body.style.paddingRight = (parseFloat(getComputedStyle(body).paddingRight) || 0) + gutter + "px";
+    }
+    return () => {
+      if (--ovLocks === 0) {
+        document.body.style.overflow = ovSavedOverflow;
+        document.body.style.paddingRight = ovSavedPad;
+      }
+    };
+  }, []);
+}
+var ovInertCount = 0;
+var ovInerted = /* @__PURE__ */ new Set();
+function useInertOutside() {
+  ovUseEffect(() => {
+    if (++ovInertCount === 1) {
+      for (const el of Array.from(document.body.children)) {
+        if (el.hasAttribute("data-overlay-root") || el.tagName === "SCRIPT" || el.tagName === "STYLE" || el.inert)
+          continue;
+        el.inert = true;
+        ovInerted.add(el);
+      }
+    }
+    return () => {
+      if (--ovInertCount === 0) {
+        ovInerted.forEach((el) => {
+          el.inert = false;
+        });
+        ovInerted.clear();
+      }
+    };
+  }, []);
+}
+function useAnchorPosition({
+  side,
+  align,
+  arrow,
+  triggerRef,
+  panelRef
+}) {
+  ovUseLayoutEffect(() => {
+    const place = () => {
+      const t = triggerRef.current;
+      const p = panelRef.current;
+      if (!t || !p) return;
+      const r = t.getBoundingClientRect();
+      const pw = p.offsetWidth, ph = p.offsetHeight;
+      const edge = ovReadPx("--space-2");
+      const gap = edge + (arrow ? 3 : 0);
+      const vw = window.innerWidth, vh = window.innerHeight;
+      const room = {
+        top: r.top,
+        bottom: vh - r.bottom,
+        left: r.left,
+        right: vw - r.right
+      };
+      const opposite = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left"
+      };
+      const vertical = side === "top" || side === "bottom";
+      let s = side;
+      if (room[s] < (vertical ? ph : pw) + gap && room[opposite[s]] > room[s]) s = opposite[s];
+      let x, y;
+      if (vertical) {
+        y = s === "top" ? r.top - ph - gap : r.bottom + gap;
+        x = align === "start" ? r.left : align === "end" ? r.right - pw : r.left + (r.width - pw) / 2;
+        x = Math.min(Math.max(x, edge), vw - pw - edge);
+        y = Math.max(
+          Math.min(y, vh - ph - edge),
+          edge
+        );
+      } else {
+        x = s === "left" ? r.left - pw - gap : r.right + gap;
+        y = align === "start" ? r.top : align === "end" ? r.bottom - ph : r.top + (r.height - ph) / 2;
+        y = Math.min(Math.max(y, edge), vh - ph - edge);
+        x = Math.max(Math.min(x, vw - pw - edge), edge);
+      }
+      p.style.left = Math.round(x) + "px";
+      p.style.top = Math.round(y) + "px";
+      p.setAttribute("data-side", s);
+      p.setAttribute("data-align", align);
+      if (arrow) {
+        if (vertical)
+          p.style.setProperty(
+            "--overlay-arrow-x",
+            Math.round(Math.min(Math.max(r.left + r.width / 2 - x, 12), pw - 12)) + "px"
+          );
+        else
+          p.style.setProperty(
+            "--overlay-arrow-y",
+            Math.round(Math.min(Math.max(r.top + r.height / 2 - y, 12), ph - 12)) + "px"
+          );
+      }
+    };
+    place();
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    const ro = new ResizeObserver(place);
+    ro.observe(panelRef.current);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+      ro.disconnect();
+    };
+  }, [side, align, arrow]);
+}
+function OverlayPortal({ children }) {
+  const hostRef = ovUseRef(null);
+  if (typeof document !== "undefined" && !hostRef.current) {
+    hostRef.current = document.createElement("div");
+    hostRef.current.setAttribute("data-overlay-root", "");
+  }
+  ovUseLayoutEffect(() => {
+    const el = hostRef.current;
+    if (!el) return;
+    document.body.appendChild(el);
+    return () => el.remove();
+  }, []);
+  if (!hostRef.current) return null;
+  return createPortal(children, hostRef.current);
+}
+var ovScrimVariants = {
+  closed: { opacity: 0, transition: { duration: ovSM.dur.base, ease: ovSM.ease.standard } },
+  open: { opacity: 1, transition: { duration: ovSM.dur.slow, ease: ovSM.ease.entrance } }
+};
+function OverlayScrim({
+  dismissible,
+  onPress,
+  opacity = null
+}) {
+  const down = ovUseRef(false);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: "overlay-scrim",
+      "aria-hidden": "true",
+      ...opacity ? { style: { opacity } } : { variants: ovScrimVariants },
+      onPointerDown: (e) => {
+        down.current = e.target === e.currentTarget;
+      },
+      onClick: (e) => {
+        if (dismissible && down.current && e.target === e.currentTarget) onPress();
+      }
+    }
+  );
+}
+function ovPanelElement({
+  asChild,
+  children,
+  prepend = null,
+  nodeRef,
+  className,
+  motionProps
+}) {
+  if (asChild) {
+    const child = React.Children.only(children);
+    if (typeof child.type === "string") {
+      const Tag = motion[child.type];
+      const composedRef = (node) => {
+        nodeRef.current = node;
+        const r = child.ref;
+        if (typeof r === "function") r(node);
+        else if (r) r.current = node;
+      };
+      return /* @__PURE__ */ jsxs(
+        Tag,
+        {
+          ...child.props,
+          ...motionProps,
+          ref: composedRef,
+          className: child.props.className ? className + " " + child.props.className : className,
+          style: { ...motionProps.style, ...child.props.style },
+          children: [
+            prepend,
+            child.props.children
+          ]
+        }
+      );
+    }
+    console.warn("[Overlay] asChild requires a DOM-element child - falling back to a wrapper");
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ...motionProps,
+      ref: nodeRef,
+      className,
+      children: [
+        prepend,
+        children
+      ]
+    }
+  );
+}
+function ModalShell({
+  layerClass,
+  slotClass,
+  slotVariants,
+  panelId,
+  dismissible,
+  requestClose,
+  asChild = false,
+  slotRef: externalSlotRef = null,
+  slotProps = {},
+  scrimOpacity = null,
+  children
+}) {
+  const layerRef = ovUseRef(null);
+  const internalSlotRef = ovUseRef(null);
+  const slotRef = externalSlotRef || internalSlotRef;
+  const entry = useOverlayEntry({ nodeRef: layerRef, dismissible, requestClose });
+  useScrollLock();
+  useInertOutside();
+  useReturnFocus(layerRef);
+  useFocusTrap({ panelRef: slotRef, entry });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: layerRef,
+      className: "overlay-layer " + layerClass,
+      initial: "closed",
+      animate: "open",
+      exit: "closed",
+      children: [
+        /* @__PURE__ */ jsx(OverlayScrim, { dismissible, onPress: requestClose, opacity: scrimOpacity }),
+        ovPanelElement({
+          asChild,
+          children,
+          nodeRef: slotRef,
+          className: "overlay-slot " + slotClass,
+          motionProps: { id: panelId, tabIndex: -1, variants: slotVariants, ...slotProps }
+        })
+      ]
+    }
+  );
+}
+var sdSM = UIMotion;
+var { useEffect: sdUseEffect, useRef: sdUseRef } = React;
+var DISMISS_RATIO = 0.4;
+var DISMISS_VELOCITY = 500;
+var INTENT_PX = 4;
+var STRETCH_MAX = 0.06;
+function findScrollable(node, stop) {
+  let el = node instanceof Element ? node : null;
+  while (el && el !== stop) {
+    const s = getComputedStyle(el);
+    if (/(auto|scroll)/.test(s.overflowY + s.overflowX) && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth))
+      return el;
+    el = el.parentElement;
+  }
+  return null;
+}
+function useSheetDrag({
+  side,
+  slotRef,
+  enabled,
+  requestClose
+}) {
+  const axis = side === "bottom" ? "y" : "x";
+  const travel = useMotionValue("100%");
+  const stretch = useMotionValue(1);
+  const controls = useDragControls();
+  const savedUserSelect = sdUseRef(null);
+  function suspendSelection() {
+    const sel = window.getSelection();
+    if (sel) sel.removeAllRanges();
+    savedUserSelect.current = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+  }
+  function restoreSelection() {
+    if (savedUserSelect.current === null) return;
+    document.body.style.userSelect = savedUserSelect.current;
+    savedUserSelect.current = null;
+  }
+  sdUseEffect(() => restoreSelection, []);
+  const progress = useTransform(travel, (v) => {
+    if (typeof v === "string") return Math.min(Math.max(parseFloat(v) / 100 || 0, 0), 1);
+    const el = slotRef.current;
+    const size = el ? axis === "y" ? el.offsetHeight : el.offsetWidth : Infinity;
+    return Math.min(Math.max(v / size, 0), 1);
+  });
+  const scrimOpacity = useTransform(progress, (p) => 1 - p);
+  function onPointerDown(e) {
+    if (e.button !== 0) return;
+    const startX = e.clientX, startY = e.clientY;
+    const scrollable = findScrollable(e.target, slotRef.current);
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY;
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < INTENT_PX) return;
+      cleanup();
+      const along = axis === "y" ? dy : dx;
+      const cross = axis === "y" ? dx : dy;
+      if (Math.abs(along) <= Math.abs(cross)) return;
+      if (scrollable) {
+        if (along < 0) return;
+        if (axis === "y" ? scrollable.scrollTop > 0 : scrollable.scrollLeft > 0) return;
+      }
+      suspendSelection();
+      window.addEventListener("pointerup", restoreSelection, { once: true });
+      window.addEventListener("pointercancel", restoreSelection, { once: true });
+      controls.start(ev);
+    };
+    const cleanup = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", cleanup);
+      window.removeEventListener("pointercancel", cleanup);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", cleanup);
+    window.addEventListener("pointercancel", cleanup);
+  }
+  function onDrag(_ev, info) {
+    const el = slotRef.current;
+    if (!el) return;
+    const size = axis === "y" ? el.offsetHeight : el.offsetWidth;
+    const o = info.offset[axis];
+    stretch.set(o < 0 ? 1 + Math.min(-o / size, 1) * STRETCH_MAX : 1);
+  }
+  function onDragEnd(_ev, info) {
+    restoreSelection();
+    animate(stretch, 1, sdSM.t.settle);
+    const el = slotRef.current;
+    if (!el) return;
+    const size = axis === "y" ? el.offsetHeight : el.offsetWidth;
+    if (info.offset[axis] > size * DISMISS_RATIO || info.velocity[axis] > DISMISS_VELOCITY)
+      requestClose();
+  }
+  const stretchStyle = axis === "y" ? { scaleY: stretch, originY: 1 } : { scaleX: stretch, originX: 1 };
+  const slotProps = enabled ? {
+    drag: axis,
+    dragControls: controls,
+    dragListener: false,
+    dragMomentum: false,
+    dragConstraints: { top: 0, bottom: 0, left: 0, right: 0 },
+    /* away from the edge: hard clamp (stretch covers it); toward: free */
+    dragElastic: axis === "y" ? { top: 0, bottom: 1 } : { left: 0, right: 1 },
+    onPointerDown,
+    onDrag,
+    onDragEnd,
+    style: { [axis]: travel, ...stretchStyle }
+  } : { style: { [axis]: travel } };
+  return { slotProps, scrimOpacity };
+}
+var { useRef, useId } = React;
+var popoverVariants = {
+  closed: { opacity: 0, scale: 0.96, transition: ovSM.t.exit },
+  open: { opacity: 1, scale: 1, transition: ovSM.t.enter }
+};
+var dialogVariants = {
+  closed: {
+    opacity: 0,
+    y: 6,
+    scale: 0.98,
+    transition: { duration: ovSM.dur.base, ease: ovSM.ease.standard }
+  },
+  open: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: { duration: ovSM.dur.slow, ease: ovSM.ease.entrance }
+  }
+};
+function sheetVariants(side) {
+  const axis = side === "bottom" ? "y" : "x";
+  return {
+    closed: { [axis]: "100%", transition: { duration: ovSM.dur.base, ease: ovSM.ease.exit } },
+    open: { [axis]: 0, transition: { duration: ovSM.dur.slow, ease: ovSM.ease.entrance } }
+  };
+}
+function PopoverPanel({
+  panelId,
+  side,
+  align,
+  arrow,
+  dismissible,
+  asChild,
+  requestClose,
+  triggerRef,
+  children
+}) {
+  const panelRef = useRef(null);
+  const entry = useOverlayEntry({ nodeRef: panelRef, dismissible, requestClose });
+  useReturnFocus(panelRef);
+  useAnchorPosition({ side, align, arrow, triggerRef, panelRef });
+  useOutsidePress({
+    entry,
+    refs: [triggerRef, panelRef],
+    enabled: dismissible,
+    onPress: requestClose
+  });
+  return ovPanelElement({
+    asChild,
+    children,
+    prepend: arrow ? /* @__PURE__ */ jsx("span", { className: "overlay-popover__arrow", "aria-hidden": "true" }, "arrow") : null,
+    nodeRef: panelRef,
+    className: "overlay-popover",
+    motionProps: {
+      id: panelId,
+      variants: popoverVariants,
+      initial: "closed",
+      animate: "open",
+      exit: "closed"
+    }
+  });
+}
+function SheetShell({
+  side,
+  panelId,
+  dismissible,
+  asChild,
+  requestClose,
+  children
+}) {
+  const slotRef = useRef(null);
+  const { slotProps, scrimOpacity } = useSheetDrag({
+    side,
+    slotRef,
+    enabled: dismissible,
+    requestClose
+  });
+  return /* @__PURE__ */ jsx(
+    ModalShell,
+    {
+      layerClass: "overlay-layer--sheet-" + side,
+      slotClass: "overlay-slot--sheet-" + side,
+      slotVariants: sheetVariants(side),
+      panelId,
+      dismissible,
+      requestClose,
+      asChild,
+      slotRef,
+      slotProps,
+      scrimOpacity,
+      children
+    }
+  );
+}
+function Overlay({
+  mode = "popover",
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  side,
+  align = "start",
+  arrow = false,
+  dismissible = true,
+  asChild = false,
+  id,
+  children
+}) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef(null);
+  const panelId = id || "overlay-" + useId();
+  const close = () => setOpen(false);
+  const modal = mode !== "popover";
+  const s = side || (mode === "sheet" ? "right" : "bottom");
+  const content = ovResolveChildren(children, close);
+  const shared = { panelId, dismissible, asChild, requestClose: close };
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    ovCloneTrigger(trigger, {
+      open,
+      onPress: () => setOpen(modal ? true : !open),
+      panelId,
+      haspopup: modal ? "dialog" : "true",
+      triggerRef
+    }),
+    /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(AnimatePresence, { children: open && (mode === "popover" ? /* @__PURE__ */ jsx(
+      PopoverPanel,
+      {
+        ...shared,
+        side: s,
+        align,
+        arrow,
+        triggerRef,
+        children: content
+      },
+      "panel"
+    ) : mode === "sheet" ? /* @__PURE__ */ jsx(SheetShell, { ...shared, side: s, children: content }, "shell") : /* @__PURE__ */ jsx(
+      ModalShell,
+      {
+        ...shared,
+        layerClass: "overlay-layer--dialog",
+        slotClass: "overlay-slot--dialog",
+        slotVariants: dialogVariants,
+        children: content
+      },
+      "shell"
+    )) }) })
+  ] });
+}
+
+export { Overlay };
+//# sourceMappingURL=chunk-QFS52OK5.js.map
+//# sourceMappingURL=chunk-QFS52OK5.js.map