@blurrow/ui 0.2.0 → 0.2.1

package/dist/Timeline.js

@@ -0,0 +1,76 @@
+// ../../components/ui/Timeline.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var lamp = {
+  default: "var(--lamp-default)",
+  success: "var(--lamp-success)",
+  warning: "var(--lamp-warning)",
+  accent: "var(--lamp-accent)"
+};
+var iconText = {
+  default: "text-ink-body",
+  success: "text-success-soft",
+  warning: "text-warning",
+  accent: "text-accent-soft"
+};
+function Timeline({ items, className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["rounded-[18px] p-1.5", className].filter(Boolean).join(" "),
+      style: { background: "var(--panel-bezel)", boxShadow: "var(--panel-shadow)" },
+      children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          className: "bg-panel-face rounded-[13px] px-5 py-5 flex flex-col",
+          style: { boxShadow: "var(--panel-face-shadow)" },
+          children: items.map((item, index) => {
+            const variant = item.variant ?? "default";
+            const isLast = index === items.length - 1;
+            return /* @__PURE__ */ jsxs("li", { className: ["relative flex gap-4", isLast ? "" : "pb-6"].join(" "), children: [
+              !isLast && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "absolute left-[11px] top-[30px] bottom-[6px] w-[2px] rounded-full",
+                  style: { background: "var(--well)", boxShadow: "var(--well-shadow)" }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: [
+                    "relative w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                    iconText[variant]
+                  ].join(" "),
+                  style: { background: "var(--face)", boxShadow: "var(--tile-shadow)" },
+                  children: item.icon ?? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-2 h-2 rounded-full",
+                      style: {
+                        background: lamp[variant],
+                        boxShadow: `0 0 6px color-mix(in srgb, ${lamp[variant]} 40%, transparent), var(--lamp-lip)`
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[13.5px] font-medium text-ink leading-6 tracking-[-0.005em]", children: item.title }),
+                  item.date && /* @__PURE__ */ jsx("time", { className: "text-[12px] text-ink-faint tabular-nums shrink-0", children: item.date })
+                ] }),
+                item.description && /* @__PURE__ */ jsx("p", { className: "text-[13px] text-ink-muted leading-relaxed mt-0.5", children: item.description })
+              ] })
+            ] }, item.key);
+          })
+        }
+      )
+    }
+  );
+}
+export {
+  Timeline
+};
+//# sourceMappingURL=Timeline.js.map

package/dist/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Timeline.tsx"],"sourcesContent":["import React from \"react\";\n\ntype TimelineVariant = \"default\" | \"success\" | \"warning\" | \"accent\";\n\ninterface TimelineItem {\n  key: string;\n  title: string;\n  description?: string;\n  date?: string;\n  icon?: React.ReactNode;\n  variant?: TimelineVariant;\n}\n\ninterface TimelineProps {\n  items: TimelineItem[];\n  className?: string;\n}\n\n/* Each event is a small raised node with a lit dot, like an indicator\n   lamp; the variant only changes the lamp's colour. Nodes are joined by\n   one continuous groove, and titles sit on the node's centre line.     */\nconst lamp: Record<TimelineVariant, string> = {\n  default: \"var(--lamp-default)\",\n  success: \"var(--lamp-success)\",\n  warning: \"var(--lamp-warning)\",\n  accent: \"var(--lamp-accent)\",\n};\n\nconst iconText: Record<TimelineVariant, string> = {\n  default: \"text-ink-body\",\n  success: \"text-success-soft\",\n  warning: \"text-warning\",\n  accent: \"text-accent-soft\",\n};\n\nexport function Timeline({ items, className = \"\" }: TimelineProps) {\n  return (\n    <div\n      className={[\"rounded-[18px] p-1.5\", className].filter(Boolean).join(\" \")}\n      style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--panel-shadow)\" }}\n    >\n      <ol\n        className=\"bg-panel-face rounded-[13px] px-5 py-5 flex flex-col\"\n        style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n      >\n        {items.map((item, index) => {\n          const variant = item.variant ?? \"default\";\n          const isLast = index === items.length - 1;\n\n          return (\n            <li key={item.key} className={[\"relative flex gap-4\", isLast ? \"\" : \"pb-6\"].join(\" \")}>\n              {!isLast && (\n                <span\n                  aria-hidden\n                  className=\"absolute left-[11px] top-[30px] bottom-[6px] w-[2px] rounded-full\"\n                  style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n                />\n              )}\n\n              <span\n                aria-hidden\n                className={[\n                  \"relative w-6 h-6 rounded-full flex items-center justify-center shrink-0\",\n                  iconText[variant],\n                ].join(\" \")}\n                style={{ background: \"var(--face)\", boxShadow: \"var(--tile-shadow)\" }}\n              >\n                {item.icon ?? (\n                  <span\n                    className=\"w-2 h-2 rounded-full\"\n                    style={{\n                      background: lamp[variant],\n                      boxShadow: `0 0 6px color-mix(in srgb, ${lamp[variant]} 40%, transparent), var(--lamp-lip)`,\n                    }}\n                  />\n                )}\n              </span>\n\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex items-baseline justify-between gap-3\">\n                  <p className=\"text-[13.5px] font-medium text-ink leading-6 tracking-[-0.005em]\">\n                    {item.title}\n                  </p>\n                  {item.date && (\n                    <time className=\"text-[12px] text-ink-faint tabular-nums shrink-0\">\n                      {item.date}\n                    </time>\n                  )}\n                </div>\n                {item.description && (\n                  <p className=\"text-[13px] text-ink-muted leading-relaxed mt-0.5\">\n                    {item.description}\n                  </p>\n                )}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </div>\n  );\n}\n"],"mappings":";AAoDgB,cA2BA,YA3BA;AA/BhB,IAAM,OAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEA,IAAM,WAA4C;AAAA,EAChD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAEO,SAAS,SAAS,EAAE,OAAO,YAAY,GAAG,GAAkB;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,CAAC,wBAAwB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACvE,OAAO,EAAE,YAAY,sBAAsB,WAAW,sBAAsB;AAAA,MAE5E;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,2BAA2B;AAAA,UAE9C,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,UAAU,KAAK,WAAW;AAChC,kBAAM,SAAS,UAAU,MAAM,SAAS;AAExC,mBACE,qBAAC,QAAkB,WAAW,CAAC,uBAAuB,SAAS,KAAK,MAAM,EAAE,KAAK,GAAG,GACjF;AAAA,eAAC,UACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAAA;AAAA,cACtE;AAAA,cAGF;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW;AAAA,kBACX,WAAW;AAAA,oBACT;AAAA,oBACA,SAAS,OAAO;AAAA,kBAClB,EAAE,KAAK,GAAG;AAAA,kBACV,OAAO,EAAE,YAAY,eAAe,WAAW,qBAAqB;AAAA,kBAEnE,eAAK,QACJ;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,YAAY,KAAK,OAAO;AAAA,wBACxB,WAAW,8BAA8B,KAAK,OAAO,CAAC;AAAA,sBACxD;AAAA;AAAA,kBACF;AAAA;AAAA,cAEJ;AAAA,cAEA,qBAAC,SAAI,WAAU,kBACb;AAAA,qCAAC,SAAI,WAAU,6CACb;AAAA,sCAAC,OAAE,WAAU,oEACV,eAAK,OACR;AAAA,kBACC,KAAK,QACJ,oBAAC,UAAK,WAAU,oDACb,eAAK,MACR;AAAA,mBAEJ;AAAA,gBACC,KAAK,eACJ,oBAAC,OAAE,WAAU,qDACV,eAAK,aACR;AAAA,iBAEJ;AAAA,iBA5CO,KAAK,GA6Cd;AAAA,UAEJ,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/Toast.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type ToastVariant = "default" | "success" | "warning" | "error";
+interface ToastContextValue {
+    toast: (opts: {
+        title: string;
+        description?: string;
+        variant?: ToastVariant;
+        duration?: number;
+    }) => void;
+}
+declare function useToast(): ToastContextValue;
+declare function ToastProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { ToastProvider, useToast };

package/dist/Toast.js

@@ -0,0 +1,318 @@
+"use client";
+
+// ../../components/ui/Toast.tsx
+import {
+  useState,
+  useEffect,
+  useCallback,
+  createContext,
+  useContext,
+  useRef,
+  useLayoutEffect
+} from "react";
+import { CloseButton } from "./CloseButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastContext = createContext({ toast: () => {
+} });
+function useToast() {
+  return useContext(ToastContext);
+}
+var variantConfig = {
+  default: {
+    tile: "var(--face-inverse)",
+    icon: /* @__PURE__ */ jsxs("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 8v4m0 4h.01" })
+    ] })
+  },
+  success: {
+    tile: "var(--tile-success)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+  },
+  warning: {
+    tile: "var(--tile-warning)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }) })
+  },
+  error: {
+    tile: "var(--tile-error)",
+    icon: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.75", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+  }
+};
+var TOAST_WIDTH = "min(360px, calc(100vw - 24px))";
+var VISIBLE_STACK = 3;
+var STACK_OFFSET = 10;
+var STACK_SCALE_STEP = 0.05;
+var GAP = 10;
+var ENTER_MS = 320;
+var EXIT_MS = 220;
+var SHIFT_MS = 420;
+function ToastCard({
+  item,
+  index,
+  total,
+  expanded,
+  expandedOffset,
+  exiting,
+  entering,
+  paused,
+  onDismiss,
+  onMeasure
+}) {
+  const ref = useRef(null);
+  const innerRef = useRef(null);
+  const remainingRef = useRef(item.duration);
+  const startRef = useRef(null);
+  const timerRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!innerRef.current) return;
+    const ro = new ResizeObserver(() => {
+      if (innerRef.current) onMeasure(item.id, innerRef.current.offsetHeight);
+    });
+    ro.observe(innerRef.current);
+    onMeasure(item.id, innerRef.current.offsetHeight);
+    return () => ro.disconnect();
+  }, [item.id, onMeasure]);
+  useEffect(() => {
+    if (exiting) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      return;
+    }
+    if (paused) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+        if (startRef.current !== null) {
+          remainingRef.current = Math.max(
+            0,
+            remainingRef.current - (Date.now() - startRef.current)
+          );
+        }
+      }
+      return;
+    }
+    startRef.current = Date.now();
+    timerRef.current = setTimeout(() => {
+      onDismiss(item.id);
+    }, remainingRef.current);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [paused, exiting, item.id, onDismiss]);
+  const { tile, icon } = variantConfig[item.variant];
+  const hidden = !expanded && index >= VISIBLE_STACK;
+  const collapsedTransform = `translateX(-50%) translateY(${index * STACK_OFFSET}px) scale(${1 - index * STACK_SCALE_STEP})`;
+  const expandedTransform = `translateX(-50%) translateY(${expandedOffset}px) scale(1)`;
+  let transform = expanded ? expandedTransform : collapsedTransform;
+  let opacity = hidden ? 0 : 1;
+  if (entering) {
+    transform = `translateX(-50%) translateY(-14px) scale(0.96)`;
+    opacity = 0;
+  }
+  if (exiting) {
+    transform = expanded ? `translateX(-50%) translateY(${expandedOffset - 12}px) scale(0.96)` : `translateX(-50%) translateY(${index * STACK_OFFSET - 12}px) scale(${1 - index * STACK_SCALE_STEP - 0.02})`;
+    opacity = 0;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "absolute top-0 left-1/2 pointer-events-auto",
+      style: {
+        width: TOAST_WIDTH,
+        transform,
+        opacity,
+        zIndex: total - index,
+        transformOrigin: "top center",
+        transition: `transform ${SHIFT_MS}ms cubic-bezier(0.32,0.72,0,1), opacity ${exiting ? EXIT_MS : ENTER_MS}ms ease`
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: innerRef,
+          className: "rounded-[18px] p-1.5",
+          style: { background: "var(--panel-bezel)", boxShadow: "var(--overlay-shadow)" },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3",
+              style: { boxShadow: "var(--panel-face-shadow)" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: [
+                      "shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center",
+                      // the default tile is the inverse face; status tiles stay white-on-colour
+                      tile === "var(--face-inverse)" ? "text-ink-inverse" : "text-white"
+                    ].join(" "),
+                    style: {
+                      background: tile,
+                      boxShadow: "var(--tile-status-shadow)"
+                    },
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 pt-[5px]", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]", children: item.title }),
+                  item.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-ink-muted mt-1 leading-relaxed", children: item.description })
+                ] }),
+                /* @__PURE__ */ jsx(CloseButton, { size: "sm", label: "Dismiss notification", onClick: () => onDismiss(item.id) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const [expanded, setExpanded] = useState(false);
+  const [heights, setHeights] = useState({});
+  const [exiting, setExiting] = useState(/* @__PURE__ */ new Set());
+  const [entering, setEntering] = useState(/* @__PURE__ */ new Set());
+  const counter = useRef(0);
+  const reportHeight = useCallback((id, h) => {
+    setHeights((prev) => prev[id] === h ? prev : { ...prev, [id]: h });
+  }, []);
+  const dismiss = useCallback((id) => {
+    setExiting((prev) => {
+      if (prev.has(id)) return prev;
+      const next = new Set(prev);
+      next.add(id);
+      return next;
+    });
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+      setExiting((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      setHeights((prev) => {
+        const next = { ...prev };
+        delete next[id];
+        return next;
+      });
+    }, EXIT_MS);
+  }, []);
+  const toast = useCallback(
+    (opts) => {
+      const id = `toast-${++counter.current}`;
+      const item = {
+        id,
+        title: opts.title,
+        description: opts.description,
+        variant: opts.variant ?? "default",
+        duration: opts.duration ?? 4e3
+      };
+      setToasts((prev) => [...prev, item]);
+      setEntering((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setEntering((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+        });
+      });
+    },
+    []
+  );
+  const list = [...toasts].reverse();
+  const expandedOffsets = [];
+  let cum = 0;
+  for (let i = 0; i < list.length; i++) {
+    expandedOffsets.push(cum);
+    cum += (heights[list[i].id] ?? 72) + GAP;
+  }
+  const expandedHeight = Math.max(0, cum - GAP);
+  const topH = heights[list[0]?.id] ?? 72;
+  const visibleCount = Math.min(list.length, VISIBLE_STACK);
+  const collapsedHeight = list.length === 0 ? 0 : topH + Math.max(0, visibleCount - 1) * STACK_OFFSET;
+  const containerHeight = expanded ? expandedHeight : collapsedHeight;
+  const showCount = list.length - VISIBLE_STACK;
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      "section",
+      {
+        "aria-label": "Notifications",
+        "aria-live": "polite",
+        className: "fixed top-[72px] left-1/2 z-[95] pointer-events-none",
+        style: {
+          width: TOAST_WIDTH,
+          transform: "translateX(-50%)"
+        },
+        onMouseEnter: () => setExpanded(true),
+        onMouseLeave: () => setExpanded(false),
+        onFocus: () => setExpanded(true),
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setExpanded(false);
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: list.length > 0 ? "relative pointer-events-auto" : "relative",
+            style: {
+              width: TOAST_WIDTH,
+              height: containerHeight,
+              transition: `height ${SHIFT_MS}ms cubic-bezier(0.32,0.72,0,1)`
+            },
+            children: [
+              list.map((t, i) => /* @__PURE__ */ jsx(
+                ToastCard,
+                {
+                  item: t,
+                  index: i,
+                  total: list.length,
+                  expanded,
+                  expandedOffset: expandedOffsets[i],
+                  exiting: exiting.has(t.id),
+                  entering: entering.has(t.id),
+                  paused: expanded,
+                  onDismiss: dismiss,
+                  onMeasure: reportHeight
+                },
+                t.id
+              )),
+              !expanded && showCount > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute left-1/2 -translate-x-1/2 pointer-events-none",
+                  style: {
+                    top: collapsedHeight + 6,
+                    transition: `opacity ${ENTER_MS}ms ease`
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "text-[10.5px] font-medium text-ink-muted px-2 py-0.5 rounded-full",
+                      style: { background: "var(--face)", boxShadow: "var(--face-shadow)" },
+                      children: [
+                        "+",
+                        showCount,
+                        " more"
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  ToastProvider,
+  useToast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  useState,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n  useRef,\n  useLayoutEffect,\n} from \"react\";\nimport { CloseButton } from \"./CloseButton\";\n\ntype ToastVariant = \"default\" | \"success\" | \"warning\" | \"error\";\n\ninterface ToastItem {\n  id: string;\n  title: string;\n  description?: string;\n  variant: ToastVariant;\n  duration: number;\n}\n\ninterface ToastContextValue {\n  toast: (opts: {\n    title: string;\n    description?: string;\n    variant?: ToastVariant;\n    duration?: number;\n  }) => void;\n}\n\nconst ToastContext = createContext<ToastContextValue>({ toast: () => {} });\n\nexport function useToast() {\n  return useContext(ToastContext);\n}\n\nconst variantConfig: Record<\n  ToastVariant,\n  { tile: string; icon: React.ReactNode }\n> = {\n  default: {\n    tile: \"var(--face-inverse)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n        <path strokeLinecap=\"round\" d=\"M12 8v4m0 4h.01\" />\n      </svg>\n    ),\n  },\n  success: {\n    tile: \"var(--tile-success)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n    ),\n  },\n  warning: {\n    tile: \"var(--tile-warning)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\" />\n      </svg>\n    ),\n  },\n  error: {\n    tile: \"var(--tile-error)\",\n    icon: (\n      <svg width=\"13\" height=\"13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.75\" viewBox=\"0 0 24 24\">\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n      </svg>\n    ),\n  },\n};\n\nconst TOAST_WIDTH = \"min(360px, calc(100vw - 24px))\";\nconst VISIBLE_STACK = 3;\nconst STACK_OFFSET = 10;\nconst STACK_SCALE_STEP = 0.05;\nconst GAP = 10;\nconst ENTER_MS = 320;\nconst EXIT_MS = 220;\nconst SHIFT_MS = 420;\n\ninterface ToastCardProps {\n  item: ToastItem;\n  index: number;\n  total: number;\n  expanded: boolean;\n  expandedOffset: number;\n  exiting: boolean;\n  entering: boolean;\n  paused: boolean;\n  onDismiss: (id: string) => void;\n  onMeasure: (id: string, height: number) => void;\n}\n\nfunction ToastCard({\n  item,\n  index,\n  total,\n  expanded,\n  expandedOffset,\n  exiting,\n  entering,\n  paused,\n  onDismiss,\n  onMeasure,\n}: ToastCardProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const innerRef = useRef<HTMLDivElement>(null);\n  const remainingRef = useRef(item.duration);\n  const startRef = useRef<number | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useLayoutEffect(() => {\n    if (!innerRef.current) return;\n    const ro = new ResizeObserver(() => {\n      if (innerRef.current) onMeasure(item.id, innerRef.current.offsetHeight);\n    });\n    ro.observe(innerRef.current);\n    onMeasure(item.id, innerRef.current.offsetHeight);\n    return () => ro.disconnect();\n  }, [item.id, onMeasure]);\n\n  useEffect(() => {\n    if (exiting) {\n      if (timerRef.current) clearTimeout(timerRef.current);\n      return;\n    }\n    if (paused) {\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n        if (startRef.current !== null) {\n          remainingRef.current = Math.max(\n            0,\n            remainingRef.current - (Date.now() - startRef.current),\n          );\n        }\n      }\n      return;\n    }\n    startRef.current = Date.now();\n    timerRef.current = setTimeout(() => {\n      onDismiss(item.id);\n    }, remainingRef.current);\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, [paused, exiting, item.id, onDismiss]);\n\n  const { tile, icon } = variantConfig[item.variant];\n\n  const hidden = !expanded && index >= VISIBLE_STACK;\n\n  const collapsedTransform = `translateX(-50%) translateY(${\n    index * STACK_OFFSET\n  }px) scale(${1 - index * STACK_SCALE_STEP})`;\n\n  const expandedTransform = `translateX(-50%) translateY(${expandedOffset}px) scale(1)`;\n\n  let transform = expanded ? expandedTransform : collapsedTransform;\n  let opacity = hidden ? 0 : 1;\n\n  if (entering) {\n    transform = `translateX(-50%) translateY(-14px) scale(0.96)`;\n    opacity = 0;\n  }\n  if (exiting) {\n    transform = expanded\n      ? `translateX(-50%) translateY(${expandedOffset - 12}px) scale(0.96)`\n      : `translateX(-50%) translateY(${\n          index * STACK_OFFSET - 12\n        }px) scale(${1 - index * STACK_SCALE_STEP - 0.02})`;\n    opacity = 0;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className=\"absolute top-0 left-1/2 pointer-events-auto\"\n      style={{\n        width: TOAST_WIDTH,\n        transform,\n        opacity,\n        zIndex: total - index,\n        transformOrigin: \"top center\",\n        transition: `transform ${SHIFT_MS}ms cubic-bezier(0.32,0.72,0,1), opacity ${\n          exiting ? EXIT_MS : ENTER_MS\n        }ms ease`,\n      }}\n    >\n      <div\n        ref={innerRef}\n        className=\"rounded-[18px] p-1.5\"\n        style={{ background: \"var(--panel-bezel)\", boxShadow: \"var(--overlay-shadow)\" }}\n      >\n        <div\n          className=\"bg-panel-face rounded-[13px] pl-3 pr-2 py-3 flex items-start gap-3\"\n          style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n        >\n          <div\n            aria-hidden\n            className={[\n              \"shrink-0 w-7 h-7 rounded-[8px] flex items-center justify-center\",\n              // the default tile is the inverse face; status tiles stay white-on-colour\n              tile === \"var(--face-inverse)\" ? \"text-ink-inverse\" : \"text-white\",\n            ].join(\" \")}\n            style={{\n              background: tile,\n              boxShadow: \"var(--tile-status-shadow)\",\n            }}\n          >\n            {icon}\n          </div>\n          <div className=\"flex-1 min-w-0 pt-[5px]\">\n            <p className=\"text-[13px] font-semibold text-ink leading-tight tracking-[-0.01em]\">\n              {item.title}\n            </p>\n            {item.description && (\n              <p className=\"text-[12.5px] text-ink-muted mt-1 leading-relaxed\">\n                {item.description}\n              </p>\n            )}\n          </div>\n          <CloseButton size=\"sm\" label=\"Dismiss notification\" onClick={() => onDismiss(item.id)} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function ToastProvider({ children }: { children: React.ReactNode }) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n  const [expanded, setExpanded] = useState(false);\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const [exiting, setExiting] = useState<Set<string>>(new Set());\n  const [entering, setEntering] = useState<Set<string>>(new Set());\n  const counter = useRef(0);\n\n  const reportHeight = useCallback((id: string, h: number) => {\n    setHeights((prev) => (prev[id] === h ? prev : { ...prev, [id]: h }));\n  }, []);\n\n  const dismiss = useCallback((id: string) => {\n    setExiting((prev) => {\n      if (prev.has(id)) return prev;\n      const next = new Set(prev);\n      next.add(id);\n      return next;\n    });\n    setTimeout(() => {\n      setToasts((prev) => prev.filter((t) => t.id !== id));\n      setExiting((prev) => {\n        const next = new Set(prev);\n        next.delete(id);\n        return next;\n      });\n      setHeights((prev) => {\n        const next = { ...prev };\n        delete next[id];\n        return next;\n      });\n    }, EXIT_MS);\n  }, []);\n\n  const toast = useCallback(\n    (opts: {\n      title: string;\n      description?: string;\n      variant?: ToastVariant;\n      duration?: number;\n    }) => {\n      const id = `toast-${++counter.current}`;\n      const item: ToastItem = {\n        id,\n        title: opts.title,\n        description: opts.description,\n        variant: opts.variant ?? \"default\",\n        duration: opts.duration ?? 4000,\n      };\n      setToasts((prev) => [...prev, item]);\n      setEntering((prev) => {\n        const next = new Set(prev);\n        next.add(id);\n        return next;\n      });\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setEntering((prev) => {\n            const next = new Set(prev);\n            next.delete(id);\n            return next;\n          });\n        });\n      });\n    },\n    [],\n  );\n\n  const list = [...toasts].reverse();\n\n  const expandedOffsets: number[] = [];\n  let cum = 0;\n  for (let i = 0; i < list.length; i++) {\n    expandedOffsets.push(cum);\n    cum += (heights[list[i].id] ?? 72) + GAP;\n  }\n  const expandedHeight = Math.max(0, cum - GAP);\n\n  const topH = heights[list[0]?.id] ?? 72;\n  const visibleCount = Math.min(list.length, VISIBLE_STACK);\n  const collapsedHeight =\n    list.length === 0\n      ? 0\n      : topH + Math.max(0, visibleCount - 1) * STACK_OFFSET;\n\n  const containerHeight = expanded ? expandedHeight : collapsedHeight;\n\n  const showCount = list.length - VISIBLE_STACK;\n\n  return (\n    <ToastContext.Provider value={{ toast }}>\n      {children}\n      {/* Hover or keyboard focus fans the stack out and pauses the timers */}\n      <section\n        aria-label=\"Notifications\"\n        aria-live=\"polite\"\n        className=\"fixed top-[72px] left-1/2 z-[95] pointer-events-none\"\n        style={{\n          width: TOAST_WIDTH,\n          transform: \"translateX(-50%)\",\n        }}\n        onMouseEnter={() => setExpanded(true)}\n        onMouseLeave={() => setExpanded(false)}\n        onFocus={() => setExpanded(true)}\n        onBlur={(e) => {\n          if (!e.currentTarget.contains(e.relatedTarget as Node)) setExpanded(false);\n        }}\n      >\n        <div\n          className={list.length > 0 ? \"relative pointer-events-auto\" : \"relative\"}\n          style={{\n            width: TOAST_WIDTH,\n            height: containerHeight,\n            transition: `height ${SHIFT_MS}ms cubic-bezier(0.32,0.72,0,1)`,\n          }}\n        >\n          {list.map((t, i) => (\n            <ToastCard\n              key={t.id}\n              item={t}\n              index={i}\n              total={list.length}\n              expanded={expanded}\n              expandedOffset={expandedOffsets[i]}\n              exiting={exiting.has(t.id)}\n              entering={entering.has(t.id)}\n              paused={expanded}\n              onDismiss={dismiss}\n              onMeasure={reportHeight}\n            />\n          ))}\n\n          {!expanded && showCount > 0 && (\n            <div\n              className=\"absolute left-1/2 -translate-x-1/2 pointer-events-none\"\n              style={{\n                top: collapsedHeight + 6,\n                transition: `opacity ${ENTER_MS}ms ease`,\n              }}\n            >\n              <span\n                className=\"text-[10.5px] font-medium text-ink-muted px-2 py-0.5 rounded-full\"\n                style={{ background: \"var(--face)\", boxShadow: \"var(--face-shadow)\" }}\n              >\n                +{showCount} more\n              </span>\n            </div>\n          )}\n        </div>\n      </section>\n    </ToastContext.Provider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Toggle.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+}
+declare function Toggle({ checked, defaultChecked, onChange, label, description, disabled, }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+export { Toggle };

package/dist/Toggle.js

@@ -0,0 +1,84 @@
+"use client";
+
+// ../../components/ui/Toggle.tsx
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Toggle({
+  checked,
+  defaultChecked = false,
+  onChange,
+  label,
+  description,
+  disabled = false
+}) {
+  const [internal, setInternal] = useState(defaultChecked);
+  const [pressed, setPressed] = useState(false);
+  const uid = useId();
+  const isOn = checked !== void 0 ? checked : internal;
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isOn;
+    setInternal(next);
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        "flex items-center justify-between gap-4 select-none",
+        disabled ? "opacity-35 pointer-events-none" : "cursor-pointer"
+      ].join(" "),
+      onClick: toggle,
+      children: [
+        (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+          label && /* @__PURE__ */ jsx("span", { id: `${uid}-label`, className: "text-[13px] font-medium text-ink leading-snug", children: label }),
+          description && /* @__PURE__ */ jsx("span", { id: `${uid}-desc`, className: "text-[12px] text-ink-muted leading-relaxed", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": isOn,
+            "aria-labelledby": label ? `${uid}-label` : void 0,
+            "aria-describedby": description ? `${uid}-desc` : void 0,
+            disabled,
+            onPointerDown: () => setPressed(true),
+            onPointerUp: () => setPressed(false),
+            onPointerLeave: () => setPressed(false),
+            className: [
+              "relative shrink-0 w-[46px] h-[26px] rounded-[13px] cursor-pointer",
+              "transition-[background-color,box-shadow] duration-200 ease-out",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink",
+              isOn ? "bg-track-on" : "bg-track"
+            ].join(" "),
+            style: {
+              /* The track is a recessed channel; the knob is a raised face inside it */
+              boxShadow: isOn ? "var(--track-on-shadow)" : "var(--track-shadow)"
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "absolute top-1/2 h-5 rounded-[10px]",
+                style: {
+                  left: 3,
+                  /* The knob stretches while held, like a finger dragging it */
+                  width: pressed ? 24 : 20,
+                  background: "var(--face)",
+                  boxShadow: "var(--knob-shadow)",
+                  transform: `translateX(${isOn ? pressed ? 16 : 20 : 0}px) translateY(-50%)`,
+                  transition: "transform 260ms var(--ease-spring), width 200ms var(--ease-out-soft)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Toggle
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useState } from \"react\";\n\ninterface ToggleProps {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onChange?: (checked: boolean) => void;\n  label?: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport function Toggle({\n  checked,\n  defaultChecked = false,\n  onChange,\n  label,\n  description,\n  disabled = false,\n}: ToggleProps) {\n  const [internal, setInternal] = useState(defaultChecked);\n  const [pressed, setPressed] = useState(false);\n  const uid = useId();\n  const isOn = checked !== undefined ? checked : internal;\n\n  const toggle = () => {\n    if (disabled) return;\n    const next = !isOn;\n    setInternal(next);\n    onChange?.(next);\n  };\n\n  return (\n    <div\n      className={[\n        \"flex items-center justify-between gap-4 select-none\",\n        disabled ? \"opacity-35 pointer-events-none\" : \"cursor-pointer\",\n      ].join(\" \")}\n      onClick={toggle}\n    >\n      {(label || description) && (\n        <div className=\"flex flex-col gap-0.5 min-w-0\">\n          {label && (\n            <span id={`${uid}-label`} className=\"text-[13px] font-medium text-ink leading-snug\">\n              {label}\n            </span>\n          )}\n          {description && (\n            <span id={`${uid}-desc`} className=\"text-[12px] text-ink-muted leading-relaxed\">\n              {description}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Clicks bubble to the row, so the switch itself has no onClick */}\n      <button\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isOn}\n        aria-labelledby={label ? `${uid}-label` : undefined}\n        aria-describedby={description ? `${uid}-desc` : undefined}\n        disabled={disabled}\n        onPointerDown={() => setPressed(true)}\n        onPointerUp={() => setPressed(false)}\n        onPointerLeave={() => setPressed(false)}\n        className={[\n          \"relative shrink-0 w-[46px] h-[26px] rounded-[13px] cursor-pointer\",\n          \"transition-[background-color,box-shadow] duration-200 ease-out\",\n          \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ink\",\n          isOn ? \"bg-track-on\" : \"bg-track\",\n        ].join(\" \")}\n        style={{\n          /* The track is a recessed channel; the knob is a raised face inside it */\n          boxShadow: isOn ? \"var(--track-on-shadow)\" : \"var(--track-shadow)\",\n        }}\n      >\n        <span\n          aria-hidden\n          className=\"absolute top-1/2 h-5 rounded-[10px]\"\n          style={{\n            left: 3,\n            /* The knob stretches while held, like a finger dragging it */\n            width: pressed ? 24 : 20,\n            background: \"var(--face)\",\n            boxShadow: \"var(--knob-shadow)\",\n            transform: `translateX(${isOn ? (pressed ? 16 : 20) : 0}px) translateY(-50%)`,\n            transition:\n              \"transform 260ms var(--ease-spring), width 200ms var(--ease-out-soft)\",\n          }}\n        />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,OAAO,gBAAgB;AAwC/B,SAEI,KAFJ;AA7BD,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAgB;AACd,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,cAAc;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,MAAM,MAAM;AAClB,QAAM,OAAO,YAAY,SAAY,UAAU;AAE/C,QAAM,SAAS,MAAM;AACnB,QAAI,SAAU;AACd,UAAM,OAAO,CAAC;AACd,gBAAY,IAAI;AAChB,eAAW,IAAI;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,WAAW,mCAAmC;AAAA,MAChD,EAAE,KAAK,GAAG;AAAA,MACV,SAAS;AAAA,MAEP;AAAA,kBAAS,gBACT,qBAAC,SAAI,WAAU,iCACZ;AAAA,mBACC,oBAAC,UAAK,IAAI,GAAG,GAAG,UAAU,WAAU,iDACjC,iBACH;AAAA,UAED,eACC,oBAAC,UAAK,IAAI,GAAG,GAAG,SAAS,WAAU,8CAChC,uBACH;AAAA,WAEJ;AAAA,QAIF;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,mBAAiB,QAAQ,GAAG,GAAG,WAAW;AAAA,YAC1C,oBAAkB,cAAc,GAAG,GAAG,UAAU;AAAA,YAChD;AAAA,YACA,eAAe,MAAM,WAAW,IAAI;AAAA,YACpC,aAAa,MAAM,WAAW,KAAK;AAAA,YACnC,gBAAgB,MAAM,WAAW,KAAK;AAAA,YACtC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO,gBAAgB;AAAA,YACzB,EAAE,KAAK,GAAG;AAAA,YACV,OAAO;AAAA;AAAA,cAEL,WAAW,OAAO,2BAA2B;AAAA,YAC/C;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,MAAM;AAAA;AAAA,kBAEN,OAAO,UAAU,KAAK;AAAA,kBACtB,YAAY;AAAA,kBACZ,WAAW;AAAA,kBACX,WAAW,cAAc,OAAQ,UAAU,KAAK,KAAM,CAAC;AAAA,kBACvD,YACE;AAAA,gBACJ;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+interface TooltipProps {
+    content: string;
+    position?: TooltipPosition;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function Tooltip({ content, position, children, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+export { Tooltip };