@evinvest/uikit 0.19.0 → 0.20.0

package/dist/components/sonner.js

@@ -0,0 +1,319 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import {
+  TOAST_BASE,
+  TOAST_CLOSE,
+  TOAST_CONTENT,
+  TOAST_TITLE,
+  TOASTER_BASE,
+  positionClasses,
+  toastVariantClasses
+} from "../generated/sonner.js";
+const DEFAULT_DURATION = 4e3;
+const SWIPE_THRESHOLD = 45;
+const SWIPE_VELOCITY = 0.11;
+const SWIPE_FLING_MS = 200;
+const store = /* @__PURE__ */ (() => {
+  let toasts = [];
+  let id = 0;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => {
+    for (const listener of listeners) listener(toasts);
+  };
+  const add = (message, opts = {}) => {
+    const next = {
+      id: ++id,
+      message,
+      description: opts.description,
+      duration: opts.duration ?? DEFAULT_DURATION,
+      variant: opts.variant ?? "neutral",
+      state: "open"
+    };
+    toasts = [...toasts, next];
+    emit();
+    return next.id;
+  };
+  const dismiss = (toastId) => {
+    toasts = toasts.map(
+      (t) => t.id === toastId ? { ...t, state: "closing" } : t
+    );
+    emit();
+  };
+  const remove = (toastId) => {
+    toasts = toasts.filter((t) => t.id !== toastId);
+    emit();
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    listener(toasts);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  return { add, dismiss, remove, subscribe };
+})();
+const toast = Object.assign(
+  (message, opts) => store.add(message, opts),
+  {
+    positive: (message, opts) => store.add(message, { ...opts, variant: "positive" }),
+    error: (message, opts) => store.add(message, { ...opts, variant: "error" }),
+    info: (message, opts) => store.add(message, { ...opts, variant: "info" }),
+    warn: (message, opts) => store.add(message, { ...opts, variant: "warn" }),
+    dismiss: (id) => store.dismiss(id)
+  }
+);
+const VISIBLE_TOASTS = 3;
+const GAP = 14;
+function ToastItem({
+  toast: t,
+  index,
+  total,
+  offset,
+  paused,
+  reportHeight,
+  removeHeight
+}) {
+  const ref = React.useRef(null);
+  const [height, setHeight] = React.useState(0);
+  const remainingRef = React.useRef(t.duration);
+  const startedRef = React.useRef(0);
+  const flingRef = React.useRef(
+    void 0
+  );
+  const dragRef = React.useRef(
+    null
+  );
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const h = el.getBoundingClientRect().height;
+    el.style.height = "";
+    if (h) {
+      setHeight(h);
+      reportHeight(t.id, h);
+    }
+  }, [t.id, t.message, t.description, reportHeight]);
+  React.useEffect(() => () => removeHeight(t.id), [t.id, removeHeight]);
+  const mountedClosing = React.useRef(t.state === "closing");
+  React.useEffect(() => {
+    if (mountedClosing.current) store.remove(t.id);
+  }, [t.id]);
+  React.useEffect(() => {
+    if (t.duration === Infinity || t.state === "closing" || paused) return;
+    startedRef.current = Date.now();
+    const id = setTimeout(() => store.dismiss(t.id), remainingRef.current);
+    return () => {
+      clearTimeout(id);
+      remainingRef.current = Math.max(
+        0,
+        remainingRef.current - (Date.now() - startedRef.current)
+      );
+    };
+  }, [paused, t.id, t.duration, t.state]);
+  React.useEffect(
+    () => () => {
+      if (flingRef.current) clearTimeout(flingRef.current);
+    },
+    []
+  );
+  const onTransitionEnd = (e) => {
+    if (t.state === "closing" && e.propertyName === "transform") {
+      store.remove(t.id);
+    }
+  };
+  const onPointerDown = (e) => {
+    const el = ref.current;
+    if (!el || e.button > 0 || t.state === "closing") return;
+    if (e.target.closest('[data-slot="toast-close"]')) return;
+    dragRef.current = { x: e.clientX, time: e.timeStamp, dx: 0 };
+    el.setAttribute("data-swiping", "true");
+    try {
+      el.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const drag = dragRef.current;
+    const el = ref.current;
+    if (!drag || !el) return;
+    const dx = e.clientX - drag.x;
+    drag.dx = dx;
+    const dist = el.offsetWidth || 256;
+    el.style.setProperty("--swipe-x", `${dx}px`);
+    el.style.opacity = `${Math.max(0, 1 - Math.abs(dx) / dist)}`;
+  };
+  const onPointerEnd = (e) => {
+    const drag = dragRef.current;
+    const el = ref.current;
+    if (!drag || !el) return;
+    dragRef.current = null;
+    el.removeAttribute("data-swiping");
+    const dt = e.timeStamp - drag.time;
+    const velocity = dt > 0 ? Math.abs(drag.dx) / dt : 0;
+    if (drag.dx !== 0 && (Math.abs(drag.dx) >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)) {
+      el.style.setProperty("--swipe-x", `${drag.dx > 0 ? 150 : -150}%`);
+      el.style.opacity = "0";
+      const remove = () => store.remove(t.id);
+      el.addEventListener("transitionend", remove, { once: true });
+      flingRef.current = setTimeout(remove, SWIPE_FLING_MS + 50);
+    } else {
+      el.style.setProperty("--swipe-x", "0px");
+      el.style.opacity = "1";
+      el.addEventListener(
+        "transitionend",
+        () => {
+          el.style.removeProperty("--swipe-x");
+          el.style.opacity = "";
+        },
+        { once: true }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      "data-slot": "toast",
+      "data-variant": t.variant,
+      "data-state": t.state === "closing" ? "closed" : "open",
+      "data-front": index === 0,
+      "data-visible": index < VISIBLE_TOASTS,
+      onTransitionEnd,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      style: {
+        "--index": index,
+        "--z-index": total - index,
+        "--offset": `${offset}px`,
+        "--initial-height": `${height}px`
+      },
+      className: cn(
+        TOAST_BASE,
+        "touch-pan-y select-none",
+        toastVariantClasses[t.variant]
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: TOAST_CONTENT, children: [
+          /* @__PURE__ */ jsx("div", { className: TOAST_TITLE, children: t.message }),
+          t.description ? /* @__PURE__ */ jsx("div", { className: "text-ink-soft text-sm", children: t.description }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close",
+            "data-slot": "toast-close",
+            onClick: () => store.dismiss(t.id),
+            className: TOAST_CLOSE,
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function Toaster({
+  position = "bottom-right",
+  className,
+  ...props
+}) {
+  const [toasts, setToasts] = React.useState([]);
+  const [heights, setHeights] = React.useState(/* @__PURE__ */ new Map());
+  const [paused, setPaused] = React.useState(false);
+  React.useEffect(() => store.subscribe(setToasts), []);
+  const onEnter = () => setPaused(true);
+  const onLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setPaused(false);
+    }
+  };
+  const reportHeight = React.useCallback((id, h) => {
+    setHeights((prev) => {
+      if (prev.get(id) === h) return prev;
+      const next = new Map(prev);
+      next.set(id, h);
+      return next;
+    });
+  }, []);
+  const removeHeight = React.useCallback((id) => {
+    setHeights((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const yPosition = position.startsWith("top") ? "top" : "bottom";
+  const ordered = [...toasts].reverse();
+  const known = [...heights.values()];
+  const frontHeight = ordered[0] ? heights.get(ordered[0].id) ?? (known.length ? Math.max(...known) : 0) : 0;
+  let sum = 0;
+  const offsets = ordered.map((t, i) => {
+    const o = sum + i * GAP;
+    sum += heights.get(t.id) ?? 0;
+    return o;
+  });
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "toaster",
+      "data-position": position,
+      "data-y-position": yPosition,
+      "data-stack": "",
+      style: {
+        "--front-height": `${frontHeight}px`,
+        "--gap": `${GAP}px`
+      },
+      className: cn(
+        TOASTER_BASE,
+        positionClasses[position],
+        className
+      ),
+      ...props,
+      onPointerOver: onEnter,
+      onPointerOut: onLeave,
+      onFocus: onEnter,
+      onBlur: onLeave,
+      children: ordered.map((t, i) => /* @__PURE__ */ jsx(
+        ToastItem,
+        {
+          toast: t,
+          index: i,
+          total: ordered.length,
+          offset: offsets[i],
+          paused,
+          reportHeight,
+          removeHeight
+        },
+        t.id
+      ))
+    }
+  );
+}
+export {
+  Toaster,
+  toast
+};
+//# sourceMappingURL=sonner.js.map

package/dist/components/sonner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sonner.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  TOAST_BASE,\n  TOAST_CLOSE,\n  TOAST_CONTENT,\n  TOAST_TITLE,\n  TOASTER_BASE,\n  positionClasses,\n  toastVariantClasses,\n  type ToastPosition,\n  type ToastVariant,\n} from \"../generated/sonner\";\n\nexport type { ToastPosition, ToastVariant };\n\n/**\n * Lifecycle phase of a toast. It is added `\"open\"` (plays the enter keyframe);\n * {@link ToastFn.dismiss} flips it to `\"closing\"` (slides it out) and the live\n * node is dropped once the exit `transitionend` fires. Mirrors Rust's\n * `ToastState` enum and the `data-state` the shared `tokens.css` keys on.\n */\nexport type ToastState = \"open\" | \"closing\";\n\nexport interface ToastOptions {\n  description?: React.ReactNode;\n  /**\n   * Auto-dismiss delay in ms (default 4000). Pass `Infinity` for a **persistent**\n   * toast that never times out — it stays until the close button, a swipe, or\n   * `toast.dismiss(id)` removes it. Hovering the stack also pauses the countdown.\n   */\n  duration?: number;\n  variant?: ToastVariant;\n}\n\nexport interface Toast {\n  id: number;\n  message: React.ReactNode;\n  description?: React.ReactNode;\n  duration: number;\n  variant: ToastVariant;\n  state: ToastState;\n}\n\nconst DEFAULT_DURATION = 4000;\n\n// Swipe-to-dismiss tuning (pointer physics, TS-only — Rust stays render-only).\n// Values from Sonner: a horizontal drag past 45px, or a flick faster than\n// 0.11px/ms, flings the toast off; anything short snaps back.\nconst SWIPE_THRESHOLD = 45;\nconst SWIPE_VELOCITY = 0.11;\nconst SWIPE_FLING_MS = 200;\n\n/**\n * Module-level toast store: a plain observable holding the live toast array.\n * `toast(...)` mutates it and notifies subscribers; the {@link Toaster}\n * component is the sole subscriber. This is the JS-native global the Rust\n * mirror cannot have — Dioxus has no clean cross-component mutable singleton,\n * so it uses a `ToasterProvider` + `use_toaster()` hook instead.\n */\nconst store = (() => {\n  let toasts: Toast[] = [];\n  let id = 0;\n  const listeners = new Set<(toasts: Toast[]) => void>();\n\n  const emit = () => {\n    for (const listener of listeners) listener(toasts);\n  };\n\n  const add = (message: React.ReactNode, opts: ToastOptions = {}): number => {\n    const next: Toast = {\n      id: ++id,\n      message,\n      description: opts.description,\n      duration: opts.duration ?? DEFAULT_DURATION,\n      variant: opts.variant ?? \"neutral\",\n      state: \"open\",\n    };\n    toasts = [...toasts, next];\n    emit();\n    return next.id;\n  };\n\n  // Begins the exit animation: flip the toast to `closing` (`data-state=closed`)\n  // and keep it mounted so the exit keyframe can play. The live node is dropped\n  // by `remove`, wired to the exit `transitionend` — no timer matched to the CSS.\n  // A toast dismissed before it has ever painted mounts closed and so never\n  // transitions; `ToastItem` drops that one on mount instead.\n  const dismiss = (toastId: number) => {\n    toasts = toasts.map((t) =>\n      t.id === toastId ? { ...t, state: \"closing\" as const } : t,\n    );\n    emit();\n  };\n\n  // Drops a toast outright. Wired to the exit `transitionend`; the guard that it\n  // is actually `closing` (a restack transition fires too) lives at the call\n  // site in {@link ToastItem}, alongside the mount-closed path.\n  const remove = (toastId: number) => {\n    toasts = toasts.filter((t) => t.id !== toastId);\n    emit();\n  };\n\n  const subscribe = (listener: (toasts: Toast[]) => void): (() => void) => {\n    listeners.add(listener);\n    listener(toasts);\n    return () => {\n      listeners.delete(listener);\n    };\n  };\n\n  return { add, dismiss, remove, subscribe };\n})();\n\nexport interface ToastFn {\n  (message: React.ReactNode, opts?: ToastOptions): number;\n  positive: (message: React.ReactNode, opts?: ToastOptions) => number;\n  error: (message: React.ReactNode, opts?: ToastOptions) => number;\n  info: (message: React.ReactNode, opts?: ToastOptions) => number;\n  warn: (message: React.ReactNode, opts?: ToastOptions) => number;\n  dismiss: (id: number) => void;\n}\n\n/**\n * Global toast handle. `toast(msg)` enqueues a neutral toast; the `.positive`,\n * `.error`, `.info` and `.warn` helpers pin the variant; `toast.dismiss(id)`\n * removes one early. Mirrors Rust's `use_toaster()` handle methods.\n */\nexport const toast: ToastFn = Object.assign(\n  (message: React.ReactNode, opts?: ToastOptions) => store.add(message, opts),\n  {\n    positive: (message: React.ReactNode, opts?: ToastOptions) =>\n      store.add(message, { ...opts, variant: \"positive\" }),\n    error: (message: React.ReactNode, opts?: ToastOptions) =>\n      store.add(message, { ...opts, variant: \"error\" }),\n    info: (message: React.ReactNode, opts?: ToastOptions) =>\n      store.add(message, { ...opts, variant: \"info\" }),\n    warn: (message: React.ReactNode, opts?: ToastOptions) =>\n      store.add(message, { ...opts, variant: \"warn\" }),\n    dismiss: (id: number) => store.dismiss(id),\n  },\n);\n\n// Sonner-style stacking: only the front VISIBLE_TOASTS show collapsed; GAP is\n// the px between them once expanded.\nconst VISIBLE_TOASTS = 3;\nconst GAP = 14;\n\ninterface ToastItemProps {\n  toast: Toast;\n  index: number; // 0 = front / newest\n  total: number;\n  offset: number; // px from the pinned edge to this toast's expanded slot\n  paused: boolean; // the stack is hovered/focused — hold the auto-dismiss\n  reportHeight: (id: number, height: number) => void;\n  removeHeight: (id: number) => void;\n}\n\nfunction ToastItem({\n  toast: t,\n  index,\n  total,\n  offset,\n  paused,\n  reportHeight,\n  removeHeight,\n}: ToastItemProps) {\n  const ref = React.useRef<HTMLLIElement>(null);\n  const [height, setHeight] = React.useState(0);\n  // remaining auto-dismiss budget (banked across hover pauses), the last start\n  // timestamp, and the swipe-fling fallback timer.\n  const remainingRef = React.useRef(t.duration);\n  const startedRef = React.useRef(0);\n  const flingRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(\n    undefined,\n  );\n  const dragRef = React.useRef<{ x: number; time: number; dx: number } | null>(\n    null,\n  );\n\n  // measure the *natural* height for the stack maths; re-measure on content\n  // change. Back toasts are clamped to --front-height by the CSS, so unset the\n  // height for the read (Sonner does the same) then hand it back to the CSS.\n  React.useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    const h = el.getBoundingClientRect().height;\n    el.style.height = \"\";\n    if (h) {\n      setHeight(h);\n      reportHeight(t.id, h);\n    }\n  }, [t.id, t.message, t.description, reportHeight]);\n\n  React.useEffect(() => () => removeHeight(t.id), [t.id, removeHeight]);\n\n  // Dismissed before its first paint (added and dismissed in one batch), so it\n  // mounts already `closing`: its computed style never changes, no transition\n  // runs, and `onTransitionEnd` below would never fire — stranding it in the\n  // store forever. Nothing was painted, so there is nothing to animate: drop it\n  // once mounted. Mirrors the Dioxus port's mount effect.\n  const mountedClosing = React.useRef(t.state === \"closing\");\n  React.useEffect(() => {\n    if (mountedClosing.current) store.remove(t.id);\n  }, [t.id]);\n\n  // Auto-dismiss, pausable on hover. While `paused` (or closing, or a persistent\n  // `duration: Infinity`) no timer runs; the cleanup banks the elapsed time so a\n  // resume continues from the remaining budget rather than restarting.\n  React.useEffect(() => {\n    if (t.duration === Infinity || t.state === \"closing\" || paused) return;\n    startedRef.current = Date.now();\n    const id = setTimeout(() => store.dismiss(t.id), remainingRef.current);\n    return () => {\n      clearTimeout(id);\n      remainingRef.current = Math.max(\n        0,\n        remainingRef.current - (Date.now() - startedRef.current),\n      );\n    };\n  }, [paused, t.id, t.duration, t.state]);\n\n  // cancel the swipe-fling fallback if the toast unmounts first\n  React.useEffect(\n    () => () => {\n      if (flingRef.current) clearTimeout(flingRef.current);\n    },\n    [],\n  );\n\n  // exit rides the transition: a closing toast slides back off and is dropped on\n  // the transform's `transitionend` (guarded so stack repositioning never fires\n  // it). No host timer — keeps parity with the Dioxus port.\n  const onTransitionEnd = (e: React.TransitionEvent<HTMLLIElement>) => {\n    if (t.state === \"closing\" && e.propertyName === \"transform\") {\n      store.remove(t.id);\n    }\n  };\n\n  // ── swipe-to-dismiss (horizontal pointer drag) ──────────────────────────\n  // Tracked through the `--swipe-x` var so it *composes* with the stack\n  // transform (`var(--y) translateX(var(--swipe-x))`) instead of overriding it.\n  const onPointerDown = (e: React.PointerEvent<HTMLLIElement>) => {\n    const el = ref.current;\n    if (!el || e.button > 0 || t.state === \"closing\") return;\n    if ((e.target as HTMLElement).closest('[data-slot=\"toast-close\"]')) return;\n    // auto-dismiss is already paused (a swipe means the pointer is over the stack)\n    dragRef.current = { x: e.clientX, time: e.timeStamp, dx: 0 };\n    el.setAttribute(\"data-swiping\", \"true\"); // CSS drops the transition for 1:1 tracking\n    try {\n      el.setPointerCapture?.(e.pointerId);\n    } catch {\n      // jsdom / unsupported — capture is a nice-to-have, the drag works without it\n    }\n  };\n\n  const onPointerMove = (e: React.PointerEvent<HTMLLIElement>) => {\n    const drag = dragRef.current;\n    const el = ref.current;\n    if (!drag || !el) return;\n    const dx = e.clientX - drag.x;\n    drag.dx = dx;\n    const dist = el.offsetWidth || 256;\n    el.style.setProperty(\"--swipe-x\", `${dx}px`);\n    el.style.opacity = `${Math.max(0, 1 - Math.abs(dx) / dist)}`;\n  };\n\n  const onPointerEnd = (e: React.PointerEvent<HTMLLIElement>) => {\n    const drag = dragRef.current;\n    const el = ref.current;\n    if (!drag || !el) return;\n    dragRef.current = null;\n    el.removeAttribute(\"data-swiping\"); // CSS restores the transition\n    const dt = e.timeStamp - drag.time;\n    const velocity = dt > 0 ? Math.abs(drag.dx) / dt : 0;\n    if (\n      drag.dx !== 0 &&\n      (Math.abs(drag.dx) >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)\n    ) {\n      el.style.setProperty(\"--swipe-x\", `${drag.dx > 0 ? 150 : -150}%`);\n      el.style.opacity = \"0\";\n      const remove = () => store.remove(t.id);\n      el.addEventListener(\"transitionend\", remove, { once: true });\n      flingRef.current = setTimeout(remove, SWIPE_FLING_MS + 50); // fallback if transitionend is missed\n    } else {\n      // snap back: clear the swipe offset (the transition carries it home), then\n      // hand styling back to the CSS. Auto-dismiss stays paused while hovered and\n      // re-arms from the remaining budget once the pointer leaves.\n      el.style.setProperty(\"--swipe-x\", \"0px\");\n      el.style.opacity = \"1\";\n      el.addEventListener(\n        \"transitionend\",\n        () => {\n          el.style.removeProperty(\"--swipe-x\");\n          el.style.opacity = \"\";\n        },\n        { once: true },\n      );\n    }\n  };\n\n  return (\n    <li\n      ref={ref}\n      role=\"status\"\n      aria-live=\"polite\"\n      data-slot=\"toast\"\n      data-variant={t.variant}\n      data-state={t.state === \"closing\" ? \"closed\" : \"open\"}\n      data-front={index === 0}\n      data-visible={index < VISIBLE_TOASTS}\n      onTransitionEnd={onTransitionEnd}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerEnd}\n      onPointerCancel={onPointerEnd}\n      style={\n        {\n          \"--index\": index,\n          \"--z-index\": total - index,\n          \"--offset\": `${offset}px`,\n          \"--initial-height\": `${height}px`,\n        } as React.CSSProperties\n      }\n      className={cn(\n        TOAST_BASE,\n        \"touch-pan-y select-none\",\n        toastVariantClasses[t.variant],\n      )}\n    >\n      <div className={TOAST_CONTENT}>\n        <div className={TOAST_TITLE}>{t.message}</div>\n        {t.description ? (\n          <div className=\"text-ink-soft text-sm\">{t.description}</div>\n        ) : null}\n      </div>\n      <button\n        type=\"button\"\n        aria-label=\"Close\"\n        data-slot=\"toast-close\"\n        onClick={() => store.dismiss(t.id)}\n        className={TOAST_CLOSE}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18M6 6l12 12\" />\n        </svg>\n      </button>\n    </li>\n  );\n}\n\nexport interface ToasterProps extends React.ComponentProps<\"ol\"> {\n  position?: ToastPosition;\n}\n\n/**\n * Renders the live toast stack from the module store. Fixed-positioned per\n * `position` (default `bottom-right`).\n *\n * Stacking mirrors Sonner: toasts pile up collapsed (the front three peeking,\n * each scaled + lifted by depth and clamped to the front toast's height) and\n * spread into a list on hover / keyboard focus — driven by the measured\n * `--front-height`/`--offset` vars and the `data-stack` CSS in `tokens.css`.\n * Each toast auto-dismisses after its `duration` (default 4000ms) via the same\n * animated `dismiss` as the close button (`data-state=\"closed\"` → slide out →\n * unmount on `transitionend`), and is swipe-to-dismiss (horizontal drag, TS-only\n * pointer physics). Single dark palette — no theme switching.\n */\nexport function Toaster({\n  position = \"bottom-right\",\n  className,\n  ...props\n}: ToasterProps) {\n  const [toasts, setToasts] = React.useState<Toast[]>([]);\n  const [heights, setHeights] = React.useState<Map<number, number>>(new Map());\n  const [paused, setPaused] = React.useState(false);\n\n  React.useEffect(() => store.subscribe(setToasts), []);\n\n  // Pause auto-dismiss while the stack is hovered or keyboard-focused (Sonner\n  // does the same). pointerover/out + focusin/out bubble from the toasts, so they\n  // fire even though the <ol> itself is pointer-events:none; the contains() guard\n  // keeps it paused while moving *within* the stack.\n  const onEnter = () => setPaused(true);\n  const onLeave = (e: React.PointerEvent | React.FocusEvent) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n      setPaused(false);\n    }\n  };\n\n  const reportHeight = React.useCallback((id: number, h: number) => {\n    setHeights((prev) => {\n      if (prev.get(id) === h) return prev;\n      const next = new Map(prev);\n      next.set(id, h);\n      return next;\n    });\n  }, []);\n  const removeHeight = React.useCallback((id: number) => {\n    setHeights((prev) => {\n      if (!prev.has(id)) return prev;\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const yPosition = position.startsWith(\"top\") ? \"top\" : \"bottom\";\n  const ordered = [...toasts].reverse(); // newest first → front of the stack\n  // front toast's height; until it's measured fall back to the tallest known one\n  // so the back toasts don't clamp to 0 for a frame when a new toast arrives\n  const known = [...heights.values()];\n  const frontHeight = ordered[0]\n    ? (heights.get(ordered[0].id) ?? (known.length ? Math.max(...known) : 0))\n    : 0;\n\n  // cumulative offset: heights of the toasts in front of this one + index * GAP\n  let sum = 0;\n  const offsets = ordered.map((t, i) => {\n    const o = sum + i * GAP;\n    sum += heights.get(t.id) ?? 0;\n    return o;\n  });\n\n  return (\n    <ol\n      data-slot=\"toaster\"\n      data-position={position}\n      data-y-position={yPosition}\n      data-stack=\"\"\n      style={\n        {\n          \"--front-height\": `${frontHeight}px`,\n          \"--gap\": `${GAP}px`,\n        } as React.CSSProperties\n      }\n      className={cn(\n        TOASTER_BASE,\n        positionClasses[position],\n        className,\n      )}\n      {...props}\n      onPointerOver={onEnter}\n      onPointerOut={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {ordered.map((t, i) => (\n        <ToastItem\n          key={t.id}\n          toast={t}\n          index={i}\n          total={ordered.length}\n          offset={offsets[i]!}\n          paused={paused}\n          reportHeight={reportHeight}\n          removeHeight={removeHeight}\n        />\n      ))}\n    </ol>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/spinner.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+function Spinner({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn("size-4 animate-spin", className),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=spinner.js.map

package/dist/components/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/spinner.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport function Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <svg\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={cn(\"size-4 animate-spin\", className)}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      {...props}\n    >\n      <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n    </svg>\n  );\n}\n"],"mappings":"AAeM;AAfN,YAAY,WAAW;AACvB,SAAS,UAAU;AAEZ,SAAS,QAAQ,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,uBAAuB,SAAS;AAAA,MAC9C,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACZ,GAAG;AAAA,MAEJ,8BAAC,UAAK,GAAE,+BAA8B;AAAA;AAAA,EACxC;AAEJ;","names":[]}

package/dist/components/status-screen.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { accentTextClasses } from "../generated/accent.js";
+import { buttonVariants } from "./button.js";
+import { Logo } from "./logo.js";
+function statusCtaClass(accent, variant) {
+  return cn(
+    buttonVariants({ variant, size: "lg", accent }),
+    "font-mono text-xs uppercase tracking-widest"
+  );
+}
+function ArrowLeftIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m12 19-7-7 7-7" }),
+        /* @__PURE__ */ jsx("path", { d: "M19 12H5" })
+      ]
+    }
+  );
+}
+function StatusScreen({
+  accent,
+  eyebrow,
+  code,
+  headlineLead,
+  headlineAccent,
+  headlineTail = ".",
+  subtext,
+  links,
+  children,
+  linkComponent
+}) {
+  const L = linkComponent ?? "a";
+  const accentText = accentTextClasses[accent];
+  return /* @__PURE__ */ jsxs("section", { className: "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-background px-6 py-32 text-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "pointer-events-none absolute inset-0 opacity-[0.07] [background:radial-gradient(55%_45%_at_50%_30%,currentColor,transparent_70%)]",
+          accentText
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full max-w-2xl flex-col items-center", children: [
+      /* @__PURE__ */ jsx(Logo, { className: cn("mb-7 h-10 w-auto", accentText) }),
+      /* @__PURE__ */ jsx("p", { className: cn("mb-6 font-mono text-[11px] uppercase tracking-[0.34em]", accentText), children: eyebrow }),
+      /* @__PURE__ */ jsx("p", { className: cn("font-serif text-[110px] font-medium leading-[0.9] sm:text-[180px]", accentText), children: code }),
+      /* @__PURE__ */ jsxs("h1", { className: "mt-4 font-serif text-3xl font-light leading-tight text-ink sm:text-5xl", children: [
+        headlineLead,
+        /* @__PURE__ */ jsx("span", { className: cn("font-serif italic", accentText), children: headlineAccent }),
+        headlineTail
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mx-auto mt-5 max-w-md text-sm leading-relaxed text-ink/60 sm:text-base", children: subtext }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-9 flex flex-col items-center gap-3 sm:flex-row", children: [
+        children,
+        links?.map((link) => /* @__PURE__ */ jsxs(L, { href: link.href, className: statusCtaClass(accent, link.variant ?? "primary"), children: [
+          link.leadingArrow ? /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "mr-2 h-4 w-4" }) : null,
+          link.label
+        ] }, link.label))
+      ] })
+    ] })
+  ] });
+}
+function NotFound({ linkComponent = "a", homeHref = "/", contactHref = "/contact" }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "debug",
+      eyebrow: "Page not found",
+      code: "404",
+      headlineLead: "You've reached ",
+      headlineAccent: "open water",
+      subtext: "The page you're looking for has drifted off our coastline \u2014 moved, renamed, or never charted. Let's get you back to shore.",
+      linkComponent,
+      links: [
+        { label: "Back to home", href: homeHref, leadingArrow: true },
+        { label: "Contact the team", href: contactHref, variant: "outline" }
+      ]
+    }
+  );
+}
+function Forbidden({ linkComponent = "a", homeHref = "/", contactHref = "/contact" }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "warn",
+      eyebrow: "Access forbidden",
+      code: "403",
+      headlineLead: "This harbour is ",
+      headlineAccent: "private",
+      subtext: "You don't have the credentials to view this page. If you believe you should, our team can open the right doors.",
+      linkComponent,
+      links: [
+        { label: "Back to home", href: homeHref, leadingArrow: true },
+        { label: "Request access", href: contactHref, variant: "outline" }
+      ]
+    }
+  );
+}
+function ServerError({ linkComponent = "a", homeHref = "/", reset }) {
+  return /* @__PURE__ */ jsx(
+    StatusScreen,
+    {
+      accent: "error",
+      eyebrow: "Server error",
+      code: "500",
+      headlineLead: "Our systems are ",
+      headlineAccent: "recalibrating",
+      subtext: "Something broke on our end \u2014 not yours. We've been alerted and are restoring service. Please try again in a moment.",
+      linkComponent,
+      links: [{ label: "Back to home", href: homeHref, variant: "outline", leadingArrow: true }],
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: statusCtaClass("error", "primary"),
+          onClick: () => reset ? reset() : window.location.reload(),
+          children: "Try again"
+        }
+      )
+    }
+  );
+}
+export {
+  Forbidden,
+  NotFound,
+  ServerError,
+  StatusScreen,
+  statusCtaClass
+};
+//# sourceMappingURL=status-screen.js.map

package/dist/components/status-screen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/status-screen.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { accentTextClasses, type Accent } from \"../generated/accent\";\nimport { buttonVariants, type ButtonVariant } from \"./button\";\nimport { Logo } from \"./logo\";\n\n/**\n * The shared 404 / 403 / 500 status surface.\n *\n * `StatusScreen` is the generic shell; `NotFound` / `Forbidden` / `ServerError`\n * are the ready-made pages with their copy baked in — a host renders those with\n * its own hrefs. The mark is `Logo`'s, i.e. the consumer's. Links default to a\n * plain `<a>` (a full document load, which is what you want off an error page);\n * pass `linkComponent` (e.g. `next/link`) for soft navigation from a client\n * boundary.\n */\nexport type { Accent };\n\n/**\n * A status CTA is a Button at the page's accent: the canonical button string for\n * that variant and rung, then the mono/uppercase treatment the error pages wear.\n *\n * Exported because a host that renders its own action into `StatusScreen`'s\n * slot — a retry button wired to Next's `reset`, say — has to be able to match\n * the CTAs beside it.\n */\nexport function statusCtaClass(accent: Accent, variant: ButtonVariant) {\n  return cn(\n    buttonVariants({ variant, size: \"lg\", accent }),\n    \"font-mono text-xs uppercase tracking-widest\",\n  );\n}\n\n// lucide `arrow-left`, inlined so the kit keeps its zero-icon-dep footprint.\nfunction ArrowLeftIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n    >\n      <path d=\"m12 19-7-7 7-7\" />\n      <path d=\"M19 12H5\" />\n    </svg>\n  );\n}\n\nexport interface StatusLinkData {\n  label: string;\n  href: string;\n  variant?: ButtonVariant;\n  leadingArrow?: boolean;\n}\n\nexport interface StatusScreenProps {\n  accent: Accent;\n  eyebrow: string;\n  code: string;\n  headlineLead: string;\n  headlineAccent: string;\n  headlineTail?: string;\n  subtext: string;\n  links?: StatusLinkData[];\n  /** Leading action slot, rendered before `links` (e.g. the 500 client retry). */\n  children?: React.ReactNode;\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n}\n\n/**\n * Shared skeleton for the 404 / 403 / 500 status pages: a centred hero with the\n * logo mark, a mono eyebrow, a giant Playfair code, a headline whose final clause\n * is an italic accent, supporting copy, and the CTAs. The accent threads through\n * all four marks. Actions render inline (from `links` data, plus an optional\n * `children` slot) — never passed as a JSX prop through a server boundary.\n */\nexport function StatusScreen({\n  accent,\n  eyebrow,\n  code,\n  headlineLead,\n  headlineAccent,\n  headlineTail = \".\",\n  subtext,\n  links,\n  children,\n  linkComponent,\n}: StatusScreenProps) {\n  const L = linkComponent ?? \"a\";\n  const accentText = accentTextClasses[accent];\n  return (\n    <section className=\"relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-background px-6 py-32 text-center\">\n      <div\n        aria-hidden\n        className={cn(\n          \"pointer-events-none absolute inset-0 opacity-[0.07] [background:radial-gradient(55%_45%_at_50%_30%,currentColor,transparent_70%)]\",\n          accentText,\n        )}\n      />\n      <div className=\"relative z-10 flex w-full max-w-2xl flex-col items-center\">\n        <Logo className={cn(\"mb-7 h-10 w-auto\", accentText)} />\n        <p className={cn(\"mb-6 font-mono text-[11px] uppercase tracking-[0.34em]\", accentText)}>{eyebrow}</p>\n        <p className={cn(\"font-serif text-[110px] font-medium leading-[0.9] sm:text-[180px]\", accentText)}>{code}</p>\n        <h1 className=\"mt-4 font-serif text-3xl font-light leading-tight text-ink sm:text-5xl\">\n          {headlineLead}\n          <span className={cn(\"font-serif italic\", accentText)}>{headlineAccent}</span>\n          {headlineTail}\n        </h1>\n        <p className=\"mx-auto mt-5 max-w-md text-sm leading-relaxed text-ink/60 sm:text-base\">{subtext}</p>\n        <div className=\"mt-9 flex flex-col items-center gap-3 sm:flex-row\">\n          {children}\n          {links?.map((link) => (\n            <L key={link.label} href={link.href} className={statusCtaClass(accent, link.variant ?? \"primary\")}>\n              {link.leadingArrow ? <ArrowLeftIcon className=\"mr-2 h-4 w-4\" /> : null}\n              {link.label}\n            </L>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nexport interface StatusPageProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** \"Back to home\" target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Secondary CTA target (contact / request access). */\n  contactHref?: string;\n}\n\n/** 404 — page not found. */\nexport function NotFound({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"debug\"\n      eyebrow=\"Page not found\"\n      code=\"404\"\n      headlineLead=\"You've reached \"\n      headlineAccent=\"open water\"\n      subtext=\"The page you're looking for has drifted off our coastline — moved, renamed, or never charted. Let's get you back to shore.\"\n      linkComponent={linkComponent}\n      links={[\n        { label: \"Back to home\", href: homeHref, leadingArrow: true },\n        { label: \"Contact the team\", href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\n/** 403 — access forbidden. */\nexport function Forbidden({ linkComponent = \"a\", homeHref = \"/\", contactHref = \"/contact\" }: StatusPageProps) {\n  return (\n    <StatusScreen\n      accent=\"warn\"\n      eyebrow=\"Access forbidden\"\n      code=\"403\"\n      headlineLead=\"This harbour is \"\n      headlineAccent=\"private\"\n      subtext=\"You don't have the credentials to view this page. If you believe you should, our team can open the right doors.\"\n      linkComponent={linkComponent}\n      links={[\n        { label: \"Back to home\", href: homeHref, leadingArrow: true },\n        { label: \"Request access\", href: contactHref, variant: \"outline\" },\n      ]}\n    />\n  );\n}\n\nexport interface ServerErrorProps {\n  /** CTA element — `next/link` for soft nav; defaults to `<a>` (full load). */\n  linkComponent?: React.ElementType;\n  /** \"Back to home\" target — `/` for the landing, `/cabinet` for the cabinet. */\n  homeHref?: string;\n  /** Retry handler (e.g. Next's error-boundary `reset`); falls back to a reload. */\n  reset?: () => void;\n}\n\n/** 500 — server error. The \"Try again\" button runs `reset` or reloads the page. */\nexport function ServerError({ linkComponent = \"a\", homeHref = \"/\", reset }: ServerErrorProps) {\n  return (\n    <StatusScreen\n      accent=\"error\"\n      eyebrow=\"Server error\"\n      code=\"500\"\n      headlineLead=\"Our systems are \"\n      headlineAccent=\"recalibrating\"\n      subtext=\"Something broke on our end — not yours. We've been alerted and are restoring service. Please try again in a moment.\"\n      linkComponent={linkComponent}\n      links={[{ label: \"Back to home\", href: homeHref, variant: \"outline\", leadingArrow: true }]}\n    >\n      <button\n        type=\"button\"\n        className={statusCtaClass(\"error\", \"primary\")}\n        onClick={() => (reset ? reset() : window.location.reload())}\n      >\n        Try again\n      </button>\n    </StatusScreen>\n  );\n}\n"],"mappings":";AAsCI,SAUE,KAVF;AApCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,yBAAsC;AAC/C,SAAS,sBAA0C;AACnD,SAAS,YAAY;AAsBd,SAAS,eAAe,QAAgB,SAAwB;AACrE,SAAO;AAAA,IACL,eAAe,EAAE,SAAS,MAAM,MAAM,OAAO,CAAC;AAAA,IAC9C;AAAA,EACF;AACF;AAGA,SAAS,cAAc,EAAE,UAAU,GAA2B;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,eAAW;AAAA,MAEX;AAAA,4BAAC,UAAK,GAAE,kBAAiB;AAAA,QACzB,oBAAC,UAAK,GAAE,YAAW;AAAA;AAAA;AAAA,EACrB;AAEJ;AA+BO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,IAAI,iBAAiB;AAC3B,QAAM,aAAa,kBAAkB,MAAM;AAC3C,SACE,qBAAC,aAAQ,WAAU,wHACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAI,WAAU,6DACb;AAAA,0BAAC,QAAK,WAAW,GAAG,oBAAoB,UAAU,GAAG;AAAA,MACrD,oBAAC,OAAE,WAAW,GAAG,0DAA0D,UAAU,GAAI,mBAAQ;AAAA,MACjG,oBAAC,OAAE,WAAW,GAAG,qEAAqE,UAAU,GAAI,gBAAK;AAAA,MACzG,qBAAC,QAAG,WAAU,0EACX;AAAA;AAAA,QACD,oBAAC,UAAK,WAAW,GAAG,qBAAqB,UAAU,GAAI,0BAAe;AAAA,QACrE;AAAA,SACH;AAAA,MACA,oBAAC,OAAE,WAAU,0EAA0E,mBAAQ;AAAA,MAC/F,qBAAC,SAAI,WAAU,qDACZ;AAAA;AAAA,QACA,OAAO,IAAI,CAAC,SACX,qBAAC,KAAmB,MAAM,KAAK,MAAM,WAAW,eAAe,QAAQ,KAAK,WAAW,SAAS,GAC7F;AAAA,eAAK,eAAe,oBAAC,iBAAc,WAAU,gBAAe,IAAK;AAAA,UACjE,KAAK;AAAA,aAFA,KAAK,KAGb,CACD;AAAA,SACH;AAAA,OACF;AAAA,KACF;AAEJ;AAYO,SAAS,SAAS,EAAE,gBAAgB,KAAK,WAAW,KAAK,cAAc,WAAW,GAAoB;AAC3G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,EAAE,OAAO,gBAAgB,MAAM,UAAU,cAAc,KAAK;AAAA,QAC5D,EAAE,OAAO,oBAAoB,MAAM,aAAa,SAAS,UAAU;AAAA,MACrE;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,UAAU,EAAE,gBAAgB,KAAK,WAAW,KAAK,cAAc,WAAW,GAAoB;AAC5G,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,QACL,EAAE,OAAO,gBAAgB,MAAM,UAAU,cAAc,KAAK;AAAA,QAC5D,EAAE,OAAO,kBAAkB,MAAM,aAAa,SAAS,UAAU;AAAA,MACnE;AAAA;AAAA,EACF;AAEJ;AAYO,SAAS,YAAY,EAAE,gBAAgB,KAAK,WAAW,KAAK,MAAM,GAAqB;AAC5F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAQ;AAAA,MACR;AAAA,MACA,OAAO,CAAC,EAAE,OAAO,gBAAgB,MAAM,UAAU,SAAS,WAAW,cAAc,KAAK,CAAC;AAAA,MAEzF;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAW,eAAe,SAAS,SAAS;AAAA,UAC5C,SAAS,MAAO,QAAQ,MAAM,IAAI,OAAO,SAAS,OAAO;AAAA,UAC1D;AAAA;AAAA,MAED;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/switch.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { SWITCH_BASE, SWITCH_THUMB } from "../generated/switch.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { useFieldControlId } from "./field-context.js";
+function Switch({
+  className,
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  onClick,
+  disabled,
+  id,
+  ...props
+}) {
+  const [on, setOn] = useControllableState({
+    ...checked !== void 0 ? { value: checked } : {},
+    defaultValue: defaultChecked,
+    ...onCheckedChange ? { onChange: onCheckedChange } : {}
+  });
+  const state = on ? "checked" : "unchecked";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "data-slot": "switch",
+      "data-state": state,
+      "aria-checked": on,
+      disabled,
+      id: useFieldControlId(id),
+      className: cn(SWITCH_BASE, className),
+      onClick: (e) => {
+        onClick?.(e);
+        setOn(!on);
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "switch-thumb",
+          "data-state": state,
+          className: SWITCH_THUMB
+        }
+      )
+    }
+  );
+}
+export {
+  Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SWITCH_BASE, SWITCH_THUMB } from \"../generated/switch\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { useFieldControlId } from \"./field-context\";\n\nexport interface SwitchProps\n  extends Omit<React.ComponentProps<\"button\">, \"onChange\"> {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nexport function Switch({\n  className,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  onClick,\n  disabled,\n  id,\n  ...props\n}: SwitchProps) {\n  const [on, setOn] = useControllableState<boolean>({\n    ...(checked !== undefined ? { value: checked } : {}),\n    defaultValue: defaultChecked,\n    ...(onCheckedChange ? { onChange: onCheckedChange } : {}),\n  });\n  const state = on ? \"checked\" : \"unchecked\";\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"switch\"\n      data-state={state}\n      aria-checked={on}\n      disabled={disabled}\n      id={useFieldControlId(id)}\n      className={cn(SWITCH_BASE, className)}\n      onClick={(e) => {\n        onClick?.(e);\n        setOn(!on);\n      }}\n      {...props}\n    >\n      <span\n        data-slot=\"switch-thumb\"\n        data-state={state}\n        className={SWITCH_THUMB}\n      />\n    </button>\n  );\n}\n"],"mappings":";AA+CM;AA7CN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa,oBAAoB;AAC1C,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAS3B,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,CAAC,IAAI,KAAK,IAAI,qBAA8B;AAAA,IAChD,GAAI,YAAY,SAAY,EAAE,OAAO,QAAQ,IAAI,CAAC;AAAA,IAClD,cAAc;AAAA,IACd,GAAI,kBAAkB,EAAE,UAAU,gBAAgB,IAAI,CAAC;AAAA,EACzD,CAAC;AACD,QAAM,QAAQ,KAAK,YAAY;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd;AAAA,MACA,IAAI,kBAAkB,EAAE;AAAA,MACxB,WAAW,GAAG,aAAa,SAAS;AAAA,MACpC,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,cAAM,CAAC,EAAE;AAAA,MACX;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,cAAY;AAAA,UACZ,WAAW;AAAA;AAAA,MACb;AAAA;AAAA,EACF;AAEJ;","names":[]}