@enigmax/primitives 0.21.0 → 0.23.0

package/dist/chunk-JCCL7XKC.js

@@ -1,465 +0,0 @@
-import { defaultQueue } from './chunk-QYMUIW5I.js';
-import { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-// src/react/toast-styles.ts
-var TOAST_STYLES = `
-[data-enigma-toaster] {
-    --enigma-toast-width: 356px;
-    --enigma-toast-edge: 24px;
-    --enigma-toast-gap: 14px;
-    --enigma-toast-peek: 14px;
-    --enigma-toast-scale-step: 0.06;
-    --enigma-toast-radius: 12px;
-    --enigma-toast-enter: 420ms;
-    --enigma-toast-exit: 350ms;
-
-    --enigma-toast-bg: #101010;
-    --enigma-toast-border: #2a2a2a;
-    --enigma-toast-text: #f5f5f5;
-    --enigma-toast-muted: #a3a3a3;
-    --enigma-toast-shadow: 0 6px 22px rgb(0 0 0 / 34%);
-
-    --enigma-toast-success: hsl(150 80% 72%);
-    --enigma-toast-success-bg: hsl(150 38% 9%);
-    --enigma-toast-success-border: hsl(147 55% 18%);
-    --enigma-toast-error: hsl(358 100% 82%);
-    --enigma-toast-error-bg: hsl(358 42% 12%);
-    --enigma-toast-error-border: hsl(357 55% 24%);
-    --enigma-toast-info: hsl(216 87% 74%);
-    --enigma-toast-info-bg: hsl(215 45% 11%);
-    --enigma-toast-info-border: hsl(223 50% 24%);
-    --enigma-toast-warning: hsl(46 87% 70%);
-    --enigma-toast-warning-bg: hsl(40 55% 9%);
-    --enigma-toast-warning-border: hsl(40 55% 20%);
-
-    position: fixed;
-    z-index: 999999;
-    width: var(--enigma-toast-width);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    outline: none;
-    font-family: inherit;
-    font-size: 13px;
-    /* The stack is a positioning context: every toast is absolute inside it, which is what
-       lets the ones behind be clipped to the front one's height. */
-    transition: transform 350ms ease;
-}
-
-@media (prefers-color-scheme: light) {
-    [data-enigma-toaster] {
-        --enigma-toast-bg: #ffffff;
-        --enigma-toast-border: #e5e5e5;
-        --enigma-toast-text: #171717;
-        --enigma-toast-muted: #737373;
-        --enigma-toast-shadow: 0 6px 22px rgb(0 0 0 / 12%);
-        --enigma-toast-success-bg: hsl(143 85% 96%);
-        --enigma-toast-success-border: hsl(145 92% 87%);
-        --enigma-toast-success: hsl(140 100% 27%);
-        --enigma-toast-error-bg: hsl(359 100% 97%);
-        --enigma-toast-error-border: hsl(359 100% 94%);
-        --enigma-toast-error: hsl(360 100% 45%);
-        --enigma-toast-info-bg: hsl(208 100% 97%);
-        --enigma-toast-info-border: hsl(221 91% 93%);
-        --enigma-toast-info: hsl(210 92% 45%);
-        --enigma-toast-warning-bg: hsl(49 100% 97%);
-        --enigma-toast-warning-border: hsl(49 91% 84%);
-        --enigma-toast-warning: hsl(31 92% 45%);
-    }
-}
-
-[data-enigma-toaster][data-position^="top"] { top: var(--enigma-toast-edge); }
-[data-enigma-toaster][data-position^="bottom"] { bottom: var(--enigma-toast-edge); }
-[data-enigma-toaster][data-position$="-right"] { right: var(--enigma-toast-edge); }
-[data-enigma-toaster][data-position$="-left"] { left: var(--enigma-toast-edge); }
-[data-enigma-toaster][data-position$="-center"] { left: 50%; transform: translateX(-50%); }
-/* The whole stack lifts a little when it fans out, so the front toast does not sit on the
-   exact pixel it did a moment ago. */
-[data-enigma-toaster][data-expanded][data-position^="bottom"] { transform: translateY(-6px); }
-[data-enigma-toaster][data-expanded][data-position^="top"] { transform: translateY(6px); }
-[data-enigma-toaster][data-expanded][data-position="bottom-center"] { transform: translateX(-50%) translateY(-6px); }
-[data-enigma-toaster][data-expanded][data-position="top-center"] { transform: translateX(-50%) translateY(6px); }
-
-[data-enigma-toast] {
-    position: absolute;
-    left: 0;
-    right: 0;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 15px 16px;
-    color: var(--enigma-toast-text);
-    background: var(--enigma-toast-bg);
-    border: 1px solid var(--enigma-toast-border);
-    border-radius: var(--enigma-toast-radius);
-    box-shadow: var(--enigma-toast-shadow);
-    overflow-wrap: anywhere;
-    touch-action: none;
-    outline: none;
-    z-index: var(--enigma-toast-z, 1);
-    transition:
-        transform var(--enigma-toast-enter) cubic-bezier(0.21, 1.02, 0.73, 1),
-        opacity var(--enigma-toast-exit),
-        height 350ms;
-}
-
-[data-enigma-toaster][data-position^="bottom"] [data-enigma-toast] { bottom: 0; transform-origin: bottom center; }
-[data-enigma-toaster][data-position^="top"] [data-enigma-toast] { top: 0; transform-origin: top center; }
-
-/* Enter from off screen, in the direction the stack is pinned to. */
-[data-enigma-toaster][data-position^="bottom"] [data-enigma-toast] { transform: translateY(110%); opacity: 0; }
-[data-enigma-toaster][data-position^="top"] [data-enigma-toast] { transform: translateY(-110%); opacity: 0; }
-/* Scoped to the toaster so it OUTRANKS the enter rules above, which are scoped the same
-   way: at equal specificity the later rule wins, and a mounted toast that lost this one sat
-   at its entry offset forever - visible, and 110% of its own height off the bottom. */
-[data-enigma-toaster] [data-enigma-toast][data-mounted] { opacity: 1; transform: translateY(0); }
-
-/* Collapsed: the ones behind are clipped to the FRONT toast's height and scaled back, so
-   the stack reads as depth rather than as a list. Their content is hidden but present -
-   removing it would make the box jump when the stack expands. */
-[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast][data-mounted]:not([data-front]) {
-    height: var(--enigma-toast-front-height);
-    transform: translateY(calc(var(--enigma-toast-before) * var(--enigma-toast-peek) * -1))
-        scale(calc(1 - var(--enigma-toast-before) * var(--enigma-toast-scale-step)));
-}
-[data-enigma-toaster][data-position^="top"]:not([data-expanded]) [data-enigma-toast][data-mounted]:not([data-front]) {
-    transform: translateY(calc(var(--enigma-toast-before) * var(--enigma-toast-peek)))
-        scale(calc(1 - var(--enigma-toast-before) * var(--enigma-toast-scale-step)));
-}
-[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast]:not([data-front]) > * { opacity: 0; }
-[data-enigma-toast] > * { transition: opacity 350ms; }
-
-/* Expanded: each toast is lifted by the summed height of the ones in front of it. */
-[data-enigma-toaster][data-expanded][data-position^="bottom"] [data-enigma-toast][data-mounted] {
-    transform: translateY(calc(var(--enigma-toast-offset) * -1));
-}
-[data-enigma-toaster][data-expanded][data-position^="top"] [data-enigma-toast][data-mounted] {
-    transform: translateY(var(--enigma-toast-offset));
-}
-
-/* Past the visible count it is still in the DOM, still counted, and not on screen. */
-[data-enigma-toast][data-hidden] { opacity: 0; pointer-events: none; }
-
-[data-enigma-toast][data-state="leaving"] { opacity: 0; }
-[data-enigma-toaster]:not([data-expanded]) [data-enigma-toast][data-state="leaving"] { transform: translateY(150%) scale(0.9); }
-[data-enigma-toaster][data-expanded][data-position^="bottom"] [data-enigma-toast][data-state="leaving"] {
-    transform: translateY(calc(var(--enigma-toast-offset) * -1 + 110%));
-}
-
-/* While a finger is down the toast tracks it exactly: a transition here would lag behind the
-   pointer, which reads as a broken gesture rather than a smooth one. */
-[data-enigma-toast][data-swiping] {
-    transition: opacity 200ms;
-    transform: translateX(var(--enigma-toast-swipe, 0px));
-}
-
-[data-enigma-toast]:focus-visible { box-shadow: var(--enigma-toast-shadow), 0 0 0 2px var(--enigma-toast-info); }
-
-[data-enigma-toast][data-tone="success"] {
-    color: var(--enigma-toast-success);
-    background: var(--enigma-toast-success-bg);
-    border-color: var(--enigma-toast-success-border);
-}
-[data-enigma-toast][data-tone="error"] {
-    color: var(--enigma-toast-error);
-    background: var(--enigma-toast-error-bg);
-    border-color: var(--enigma-toast-error-border);
-}
-[data-enigma-toast][data-tone="info"] {
-    color: var(--enigma-toast-info);
-    background: var(--enigma-toast-info-bg);
-    border-color: var(--enigma-toast-info-border);
-}
-[data-enigma-toast][data-tone="warning"] {
-    color: var(--enigma-toast-warning);
-    background: var(--enigma-toast-warning-bg);
-    border-color: var(--enigma-toast-warning-border);
-}
-
-[data-enigma-toast-icon] { display: flex; flex-shrink: 0; width: 20px; height: 20px; }
-[data-enigma-toast-icon] svg { width: 20px; height: 20px; display: block; }
-[data-enigma-toast-icon][data-tone="loading"] svg { animation: enigma-toast-spin 900ms linear infinite; }
-@keyframes enigma-toast-spin { to { transform: rotate(360deg); } }
-
-[data-enigma-toast-content] { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
-[data-enigma-toast-title] { margin: 0; font-weight: 600; line-height: 1.4; }
-[data-enigma-toast-body] { margin: 0; font-size: 12px; line-height: 1.45; opacity: 0.75; }
-
-[data-enigma-toast-action] {
-    flex-shrink: 0;
-    padding: 5px 10px;
-    font: inherit;
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--enigma-toast-bg);
-    background: currentColor;
-    border: 0;
-    border-radius: 6px;
-    cursor: pointer;
-}
-
-[data-enigma-toast-close] {
-    flex-shrink: 0;
-    display: grid;
-    place-items: center;
-    width: 20px;
-    height: 20px;
-    padding: 0;
-    color: inherit;
-    background: none;
-    border: 0;
-    border-radius: 5px;
-    cursor: pointer;
-    /* Shown on hover or focus, so it never covers the message while it is being read - but
-       always reachable by keyboard, which display:none would take away. */
-    opacity: 0;
-    transition: opacity 120ms ease-out;
-}
-[data-enigma-toast]:hover [data-enigma-toast-close],
-[data-enigma-toast-close]:focus-visible { opacity: 0.7; }
-[data-enigma-toast-close]:hover { opacity: 1; }
-
-@media (max-width: 600px) {
-    [data-enigma-toaster] { right: 14px; left: 14px; width: auto; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    /* The movement goes, the state change stays: a toast still appears and still leaves. */
-    [data-enigma-toast], [data-enigma-toast] > * { transition: opacity 200ms !important; }
-    [data-enigma-toast][data-mounted] { transform: none !important; }
-}
-`;
-var VISIBLE = 3;
-var injected = false;
-function injectStyles() {
-  if (injected || typeof document === "undefined") return;
-  injected = true;
-  if (document.querySelector("[data-enigma-toast-styles]")) return;
-  const element = document.createElement("style");
-  element.setAttribute("data-enigma-toast-styles", "");
-  element.textContent = TOAST_STYLES;
-  document.head.prepend(element);
-}
-var ICONS = {
-  success: /* @__PURE__ */ jsx("path", { d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.86-9.81a.75.75 0 00-1.22-.88l-3.48 4.79-1.88-1.88a.75.75 0 10-1.06 1.06l2.5 2.5a.75.75 0 001.14-.09l4-5.5z" }),
-  error: /* @__PURE__ */ jsx("path", { d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z" }),
-  warning: /* @__PURE__ */ jsx("path", { d: "M9.4 3a1.5 1.5 0 012.6 0l7.36 12.75A1.5 1.5 0 0118.06 18H3.94a1.5 1.5 0 01-1.3-2.25L10 3zm.85 4.5a.75.75 0 00-1.5 0v4a.75.75 0 001.5 0v-4zM10 15a.9.9 0 100-1.8.9.9 0 000 1.8z" }),
-  info: /* @__PURE__ */ jsx("path", { d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.25a.25.25 0 01.25.3l-.46 2.07A1.75 1.75 0 0010.75 15H11a.75.75 0 000-1.5h-.25a.25.25 0 01-.25-.3l.46-2.07A1.75 1.75 0 009.25 9H9z" })
-};
-function ToneIcon({ tone }) {
-  if (!tone || tone === "default") return null;
-  if (tone === "loading") {
-    return /* @__PURE__ */ jsx("span", { "data-enigma-toast-icon": "", "data-tone": "loading", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56", opacity: "0.85" }) }) });
-  }
-  const glyph = ICONS[tone];
-  if (!glyph) return null;
-  return /* @__PURE__ */ jsx("span", { "data-enigma-toast-icon": "", "data-tone": tone, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: glyph }) });
-}
-function swipeAxis(position) {
-  if (position.endsWith("-center")) return { axis: "y", sign: position.startsWith("top") ? -1 : 1 };
-  return { axis: "x", sign: position.endsWith("-left") ? -1 : 1 };
-}
-function Toaster({
-  queue = defaultQueue,
-  position = "bottom-right",
-  exitDuration = 350,
-  swipeThreshold = 60,
-  visibleCount = VISIBLE,
-  expand = false,
-  styles: withStyles = true,
-  children,
-  label = "Notifications",
-  className,
-  style
-}) {
-  const [rendered, setRendered] = useState(
-    () => queue.items.map((notification) => ({ notification, leaving: false }))
-  );
-  const timers = useRef(/* @__PURE__ */ new Map());
-  const [hovered, setHovered] = useState(false);
-  const [heights, setHeights] = useState({});
-  useLayoutEffect(() => {
-    if (withStyles) injectStyles();
-  }, [withStyles]);
-  useEffect(() => {
-    const sync = (items) => {
-      setRendered((current) => {
-        const live = new Map(items.map((item) => [item.id, item]));
-        const kept = current.map((entry) => {
-          const still = live.get(entry.notification.id);
-          if (still) return { notification: still, leaving: false };
-          if (entry.leaving) return entry;
-          const timer = setTimeout(() => {
-            timers.current.delete(entry.notification.id);
-            setRendered((later) => later.filter((row) => row.notification.id !== entry.notification.id));
-          }, exitDuration);
-          timers.current.set(entry.notification.id, timer);
-          return { ...entry, leaving: true };
-        });
-        const seen = new Set(kept.map((entry) => entry.notification.id));
-        const added = items.filter((item) => !seen.has(item.id)).map((item) => ({ notification: item, leaving: false }));
-        return [...kept, ...added];
-      });
-    };
-    sync(queue.items);
-    return queue.subscribe(sync);
-  }, [queue, exitDuration]);
-  useEffect(() => {
-    const pending = timers.current;
-    return () => {
-      for (const timer of pending.values()) clearTimeout(timer);
-      pending.clear();
-    };
-  }, []);
-  if (!rendered.length) return null;
-  const expanded = expand || hovered;
-  const stack = [...rendered].reverse();
-  const frontHeight = heights[stack[0]?.notification.id ?? ""] ?? 0;
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      "aria-label": label,
-      "data-enigma-toaster": "",
-      "data-position": position,
-      "data-expanded": expanded ? "" : void 0,
-      style: { ...style, "--enigma-toast-front-height": `${frontHeight}px` },
-      className,
-      onPointerEnter: () => {
-        queue.pause();
-        setHovered(true);
-      },
-      onPointerLeave: () => {
-        queue.resume();
-        setHovered(false);
-      },
-      onFocusCapture: () => {
-        queue.pause();
-        setHovered(true);
-      },
-      onBlurCapture: () => {
-        queue.resume();
-        setHovered(false);
-      },
-      children: stack.map((entry, index) => /* @__PURE__ */ jsx(
-        Toast,
-        {
-          entry,
-          index,
-          hidden: index >= visibleCount,
-          offset: stack.slice(0, index).reduce((total, row) => total + (heights[row.notification.id] ?? 0) + 14, 0),
-          onMeasure: (height) => setHeights((current) => current[entry.notification.id] === height ? current : { ...current, [entry.notification.id]: height }),
-          position,
-          swipeThreshold,
-          onDismiss: () => queue.dismiss(entry.notification.id),
-          render: children
-        },
-        entry.notification.id
-      ))
-    }
-  );
-}
-function Toast({ entry, index, hidden, offset: stackOffset, onMeasure, position, swipeThreshold, onDismiss, render }) {
-  const { notification, leaving } = entry;
-  const [offset, setOffset] = useState(0);
-  const [swiping, setSwiping] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const node = useRef(null);
-  const start = useRef(0);
-  const { axis, sign } = swipeAxis(position);
-  useLayoutEffect(() => {
-    const element = node.current;
-    if (!element) return;
-    const report = () => onMeasure(element.getBoundingClientRect().height);
-    report();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(report);
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [notification.title, notification.body]);
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => setMounted(true));
-    return () => cancelAnimationFrame(frame);
-  }, []);
-  const onPointerDown = useCallback((event) => {
-    if (event.target.closest("button")) return;
-    if (event.pointerType === "mouse" && event.button !== 0) return;
-    event.currentTarget.setPointerCapture(event.pointerId);
-    start.current = axis === "x" ? event.clientX : event.clientY;
-    setSwiping(true);
-  }, [axis]);
-  const onPointerMove = useCallback((event) => {
-    if (!swiping) return;
-    const delta = (axis === "x" ? event.clientX : event.clientY) - start.current;
-    setOffset(sign > 0 ? Math.max(0, delta) : Math.min(0, delta));
-  }, [swiping, axis, sign]);
-  const onPointerUp = useCallback(() => {
-    if (!swiping) return;
-    setSwiping(false);
-    if (Math.abs(offset) >= swipeThreshold) {
-      onDismiss();
-      return;
-    }
-    setOffset(0);
-  }, [swiping, offset, swipeThreshold, onDismiss]);
-  const controls = { dismiss: onDismiss };
-  return /* @__PURE__ */ jsx(
-    "article",
-    {
-      ref: (element) => {
-        node.current = element;
-      },
-      "data-enigma-toast": "",
-      "data-tone": notification.tone,
-      "data-state": leaving ? "leaving" : "open",
-      "data-index": index,
-      "data-front": index === 0 ? "" : void 0,
-      "data-mounted": mounted && !leaving ? "" : void 0,
-      "data-hidden": hidden ? "" : void 0,
-      "data-swiping": swiping ? "" : void 0,
-      role: notification.tone === "error" ? "alert" : "status",
-      "aria-live": notification.tone === "error" ? "assertive" : "polite",
-      tabIndex: 0,
-      onKeyDown: (event) => {
-        if (event.key === "Escape") onDismiss();
-      },
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onPointerCancel: onPointerUp,
-      style: {
-        // Read by the theme, so every transform stays the stylesheet's decision.
-        "--enigma-toast-swipe": `${offset}px`,
-        "--enigma-toast-index": index,
-        "--enigma-toast-before": index,
-        "--enigma-toast-offset": `${stackOffset}px`,
-        // The front toast is on top, and each one behind it a layer lower.
-        "--enigma-toast-z": 100 - index
-      },
-      children: render ? render(notification, controls) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ToneIcon, { tone: notification.tone }),
-        /* @__PURE__ */ jsxs("span", { "data-enigma-toast-content": "", children: [
-          /* @__PURE__ */ jsx("p", { "data-enigma-toast-title": "", children: notification.title }),
-          notification.body && /* @__PURE__ */ jsx("p", { "data-enigma-toast-body": "", children: notification.body })
-        ] }),
-        notification.action && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-enigma-toast-action": "",
-            onClick: () => {
-              notification.action?.onSelect();
-              if (notification.action?.dismiss !== false) onDismiss();
-            },
-            children: notification.action.label
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-toast-close": "", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
-      ] })
-    }
-  );
-}
-
-export { Toaster };