@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/Toast/ToastProvider.js

@@ -0,0 +1,19 @@
+"use client";
+import { ToastStoreContext as s } from "./contexts/toast-store.context.js";
+import { createToastStore as i } from "./store/create-toast-store.js";
+import { useState as m } from "react";
+import { jsx as n } from "react/jsx-runtime";
+var p = ({ children: r, duration: t, limit: o, store: e }) => {
+  const [a] = m(() => e ?? i({
+    duration: t,
+    limit: o
+  }));
+  return /* @__PURE__ */ n(s.Provider, {
+    value: a,
+    children: r
+  });
+};
+p.displayName = "KonstructToastProvider";
+export {
+  p as ToastProvider
+};

package/dist/components/Toast/components/ToastCard/ToastCard.js

@@ -0,0 +1,103 @@
+import { t as r } from "../../../../utils-DnIJruo0.js";
+import { t as L } from "../../../../x-C8O1IsaM.js";
+import { Typography as h } from "../../../Typography/Typography.js";
+import { COLLAPSED_SCALE_STEP as P, DEFAULT_TOAST_DURATION as D, TOAST_ENTER_TRANSITION as j, TOAST_EXIT_TRANSITION as B, TOAST_ICONS as F, TOAST_TRANSITION as U } from "../../constants/index.js";
+import { useToastTimer as X } from "../../hooks/useToastTimer/useToastTimer.js";
+import { toastCloseButtonVariants as k, toastDescriptionVariants as K, toastFrameVariants as q, toastIconVariants as G, toastTitleVariants as J, toastVariants as M } from "../../Toast.variants.js";
+import { useEffect as Q, useRef as W } from "react";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { motion as A, usePresence as Y } from "motion/react";
+var Z = ({ autoWidth: x, closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, reducedMotion: S, restartOnLeave: v, resumeDelay: b, toast: _, total: w, visible: m, onDismiss: p, onExited: E, onHeightChange: d }) => {
+  const T = W(null), [C] = Y(), { description: o, duration: R = D, id: c, showCloseButton: V = !0, title: g, type: a = "info" } = _;
+  X({
+    duration: R,
+    paused: i,
+    restart: v,
+    resumeDelay: b,
+    onExpire: p
+  }), Q(() => {
+    const e = T.current;
+    if (!e) return;
+    const N = () => {
+      d(c, e.offsetHeight);
+    };
+    N();
+    const y = new ResizeObserver(N);
+    return y.observe(e), () => {
+      y.disconnect();
+    };
+  }, [c, d]);
+  const z = F[a], u = !i && n !== 0 && l !== 0, f = S ? { duration: 0 } : {
+    ...U,
+    x: j,
+    opacity: B
+  };
+  return /* @__PURE__ */ t(A.li, {
+    className: r("absolute right-0 bottom-0 origin-bottom will-change-transform", x ? "w-max max-w-[calc(100vw-3rem)]" : "max-w-full", q({ type: a })),
+    style: { zIndex: C ? w - n : 0 },
+    initial: {
+      x: "110%",
+      opacity: 1,
+      y: 0,
+      scale: 1
+    },
+    animate: {
+      x: 0,
+      opacity: m ? 1 : 0,
+      y: -O,
+      scale: i ? 1 : 1 - n * P,
+      height: u ? l : "auto"
+    },
+    exit: { opacity: 0 },
+    transition: f,
+    onAnimationComplete: (e) => {
+      e === "exit" && E(c);
+    },
+    "aria-hidden": !m,
+    children: /* @__PURE__ */ s("div", {
+      ref: T,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: M(),
+      children: [/* @__PURE__ */ s("div", {
+        className: "flex items-center gap-8",
+        children: [/* @__PURE__ */ s("div", {
+          className: "flex min-w-0 flex-1 items-center gap-2",
+          children: [/* @__PURE__ */ t(z, {
+            size: o ? 20 : 24,
+            className: r(G({ type: a }))
+          }), /* @__PURE__ */ t(h, {
+            variant: o ? "body2" : "body1",
+            className: r("min-w-0", J({ type: a })),
+            children: g
+          })]
+        }), V ? /* @__PURE__ */ s("button", {
+          type: "button",
+          className: r(k({ type: a })),
+          onClick: p,
+          children: [/* @__PURE__ */ t(L, {
+            className: "size-5",
+            "aria-hidden": !0
+          }), /* @__PURE__ */ t("span", {
+            className: "sr-only",
+            children: I
+          })]
+        }) : null]
+      }), o ? /* @__PURE__ */ t(A.div, {
+        className: "pl-7",
+        animate: { opacity: u ? 0 : 1 },
+        transition: f,
+        children: /* @__PURE__ */ t(h, {
+          variant: "body2",
+          className: r(K({ type: a })),
+          children: o
+        })
+      }) : null]
+    })
+  });
+};
+Z.displayName = "KonstructToastCard";
+export {
+  Z as ToastCard
+};

package/dist/components/Toast/components/index.js

@@ -0,0 +1,4 @@
+import { ToastCard as r } from "./ToastCard/ToastCard.js";
+export {
+  r as ToastCard
+};

package/dist/components/Toast/constants/index.js

@@ -0,0 +1,35 @@
+import { CheckCircleFilledIcon as r } from "../../../assets/icons/components/CheckCircleFilled.js";
+import { ErrorIcon as T } from "../../../assets/icons/components/Error.js";
+import { InformationFilledIcon as S } from "../../../assets/icons/components/InformationFilled.js";
+import { WarningTriangleIcon as A } from "../../../assets/icons/components/WarningTriangle.js";
+var n = 3e3, o = 5, e = 300, E = 3, O = 12, s = 0.05, m = 12, t = {
+  type: "spring",
+  stiffness: 320,
+  damping: 32,
+  mass: 0.9
+}, p = {
+  type: "spring",
+  stiffness: 260,
+  damping: 26
+}, v = {
+  duration: 0.15,
+  ease: "easeOut"
+}, f = {
+  success: r,
+  error: T,
+  warning: A,
+  info: S
+};
+export {
+  s as COLLAPSED_SCALE_STEP,
+  O as COLLAPSED_STEP_PX,
+  E as DEFAULT_MAX_VISIBLE_TOASTS,
+  n as DEFAULT_TOAST_DURATION,
+  o as DEFAULT_TOAST_LIMIT,
+  m as EXPANDED_GAP_PX,
+  e as TOAST_DISMISS_STAGGER_MS,
+  p as TOAST_ENTER_TRANSITION,
+  v as TOAST_EXIT_TRANSITION,
+  f as TOAST_ICONS,
+  t as TOAST_TRANSITION
+};

package/dist/components/Toast/contexts/index.js

@@ -0,0 +1,4 @@
+import { ToastStoreContext as t } from "./toast-store.context.js";
+export {
+  t as ToastStoreContext
+};

package/dist/components/Toast/contexts/toast-store.context.js

@@ -0,0 +1,5 @@
+import { createContext as t } from "react";
+var e = t(null);
+export {
+  e as ToastStoreContext
+};

package/dist/components/Toast/hooks/index.js

@@ -0,0 +1,15 @@
+import { useStackExpansion as r } from "./useStackExpansion/useStackExpansion.js";
+import { useToastStore as s, useToastStoreApi as e } from "./useToastStore/useToastStore.js";
+import { useToast as i } from "./useToast/useToast.js";
+import { useToastHeights as a } from "./useToastHeights/useToastHeights.js";
+import { useToastSource as T } from "./useToastSource/useToastSource.js";
+import { useToastTimer as S } from "./useToastTimer/useToastTimer.js";
+export {
+  r as useStackExpansion,
+  i as useToast,
+  a as useToastHeights,
+  T as useToastSource,
+  s as useToastStore,
+  e as useToastStoreApi,
+  S as useToastTimer
+};

package/dist/components/Toast/hooks/useStackExpansion/useStackExpansion.js

@@ -0,0 +1,29 @@
+import { useEffect as s, useState as a } from "react";
+var u = () => {
+  const [o, t] = a(!1), r = () => {
+    t(!0);
+  }, e = () => {
+    t(!1);
+  }, i = (n) => {
+    n.currentTarget.contains(n.relatedTarget) || e();
+  };
+  return s(() => {
+    const n = () => {
+      document.hidden && e();
+    };
+    return window.addEventListener("blur", e), document.addEventListener("visibilitychange", n), () => {
+      window.removeEventListener("blur", e), document.removeEventListener("visibilitychange", n);
+    };
+  }, []), {
+    expanded: o,
+    regionHandlers: {
+      onMouseEnter: r,
+      onMouseLeave: e,
+      onFocus: r,
+      onBlur: i
+    }
+  };
+};
+export {
+  u as useStackExpansion
+};

package/dist/components/Toast/hooks/useToast/useToast.js

@@ -0,0 +1,17 @@
+import { useToastStoreApi as o } from "../useToastStore/useToastStore.js";
+import { useMemo as r } from "react";
+var m = () => {
+  const t = o();
+  return r(() => ({
+    addToast: (e) => t.getState().add(e),
+    removeToast: (e) => {
+      t.getState().remove(e);
+    },
+    clearAllToasts: () => {
+      t.getState().clear();
+    }
+  }), [t]);
+};
+export {
+  m as useToast
+};

package/dist/components/Toast/hooks/useToastHeights/useToastHeights.js

@@ -0,0 +1,23 @@
+import { useCallback as n, useState as h } from "react";
+var o = () => {
+  const [a, s] = h({});
+  return {
+    heights: a,
+    setHeight: n((e, t) => {
+      s((r) => r[e] === t ? r : {
+        ...r,
+        [e]: t
+      });
+    }, []),
+    removeHeight: n((e) => {
+      s((t) => {
+        if (!(e in t)) return t;
+        const { [e]: r, ...g } = t;
+        return g;
+      });
+    }, [])
+  };
+};
+export {
+  o as useToastHeights
+};

package/dist/components/Toast/hooks/useToastSource/useToastSource.js

@@ -0,0 +1,15 @@
+import { useToastStoreApi as n } from "../useToastStore/useToastStore.js";
+import { useSyncExternalStore as u } from "react";
+var m = ({ toasts: o, onDismiss: r }) => {
+  const t = n(), e = () => t.getState().toasts, s = u(t.subscribe, e, e);
+  return {
+    toasts: o ?? s,
+    configure: t.configure,
+    dismiss: r ?? ((a) => {
+      t.getState().remove(a);
+    })
+  };
+};
+export {
+  m as useToastSource
+};

package/dist/components/Toast/hooks/useToastStore/useToastStore.js

@@ -0,0 +1,11 @@
+import { ToastStoreContext as e } from "../../contexts/toast-store.context.js";
+import { defaultToastStore as o } from "../../store/default-toast-store.js";
+import { useContext as s, useSyncExternalStore as a } from "react";
+var u = () => s(e) ?? o, i = (r) => {
+  const t = u();
+  return a(t.subscribe, () => r(t.getState()), () => r(t.getState()));
+};
+export {
+  i as useToastStore,
+  u as useToastStoreApi
+};

package/dist/components/Toast/hooks/useToastTimer/useToastTimer.js

@@ -0,0 +1,26 @@
+import { useEffect as a, useRef as e } from "react";
+var h = ({ duration: t, paused: u, restart: s, resumeDelay: r, onExpire: n }) => {
+  const c = e(t), o = e(!1), f = e(n), m = e(r);
+  a(() => {
+    f.current = n, m.current = r;
+  }, [n, r]), a(() => {
+    if (u) {
+      o.current = !0;
+      return;
+    }
+    if (t <= 0) return;
+    const i = o.current, R = s ? t + (i ? m.current : 0) : c.current, w = Date.now(), T = setTimeout(() => {
+      f.current();
+    }, R);
+    return () => {
+      clearTimeout(T), c.current = Math.max(0, c.current - (Date.now() - w));
+    };
+  }, [
+    u,
+    t,
+    s
+  ]);
+};
+export {
+  h as useToastTimer
+};

package/dist/components/Toast/store/create-toast-store.js

@@ -0,0 +1,46 @@
+import "../constants/index.js";
+var l = 0, c = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : (l += 1, `toast-${Date.now()}-${l}`), m = (d = {}) => {
+  const a = /* @__PURE__ */ new Set();
+  let n = d.duration ?? 3e3, r = d.limit ?? 5;
+  const s = (t) => {
+    const o = e;
+    e = {
+      ...e,
+      toasts: t
+    }, a.forEach((i) => {
+      i(e, o);
+    });
+  };
+  let e = {
+    toasts: [],
+    add: (t) => {
+      const o = {
+        ...t,
+        id: c(),
+        type: t.type ?? "info",
+        duration: t.duration ?? n,
+        showCloseButton: t.showCloseButton ?? !0
+      };
+      return s([...e.toasts, o].slice(-r)), o.id;
+    },
+    remove: (t) => {
+      const o = e.toasts.filter((i) => i.id !== t);
+      o.length !== e.toasts.length && s(o);
+    },
+    clear: () => {
+      e.toasts.length > 0 && s([]);
+    }
+  };
+  return {
+    configure: (t) => {
+      n = t.duration ?? n, r = t.limit ?? r, e.toasts.length > r && s(e.toasts.slice(-r));
+    },
+    getState: () => e,
+    subscribe: (t) => (a.add(t), () => {
+      a.delete(t);
+    })
+  };
+};
+export {
+  m as createToastStore
+};

package/dist/components/Toast/store/default-toast-store.js

@@ -0,0 +1,5 @@
+import { createToastStore as t } from "./create-toast-store.js";
+var r = t();
+export {
+  r as defaultToastStore
+};

package/dist/components/Toast/store/index.js

@@ -0,0 +1,6 @@
+import { createToastStore as t } from "./create-toast-store.js";
+import { defaultToastStore as e } from "./default-toast-store.js";
+export {
+  t as createToastStore,
+  e as defaultToastStore
+};

package/dist/components/Toast/utils/compute-stack-layout/compute-stack-layout.js

@@ -0,0 +1,24 @@
+import "../../constants/index.js";
+var P = ({ expanded: a, heights: o, maxVisible: c, toasts: t }) => {
+  const i = t[0], e = i ? o[i.id] ?? 0 : 0;
+  if (!a) {
+    const n = Math.min(t.length - 1, c - 1);
+    return {
+      offsets: t.map((f, m) => m * 12),
+      frontHeight: e,
+      regionHeight: Math.max(0, e + n * 12)
+    };
+  }
+  let r = 0;
+  return {
+    offsets: t.map((n) => {
+      const f = r;
+      return r += (o[n.id] ?? 0) + 12, f;
+    }),
+    frontHeight: e,
+    regionHeight: Math.max(0, r - 12)
+  };
+};
+export {
+  P as computeStackLayout
+};

package/dist/components/Toast/utils/index.js

@@ -0,0 +1,4 @@
+import { computeStackLayout as t } from "./compute-stack-layout/compute-stack-layout.js";
+export {
+  t as computeStackLayout
+};

package/dist/components/Tooltip/Tooltip.js

@@ -1,34 +1,34 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { S as i } from "../../index-DQH6odE9.js";
-import { forwardRef as v, useRef as N, useImperativeHandle as w, useMemo as h, isValidElement as x } from "react";
-import { cn as o } from "../../utils/index.js";
-import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";
-import { useTooltip as b } from "./hooks/useTooltip.js";
-const I = v(
-  ({ children: r, content: l, className: m, theme: n, position: a, wrapperClassName: c }, p) => {
-    const f = N(null), { isVisible: d, componentRef: s } = b();
-    w(p, () => s.current, [s]);
-    const u = h(
-      () => x(r) ? r : /* @__PURE__ */ e("p", { className: "p-2", children: r }),
-      [r]
-    );
-    return /* @__PURE__ */ e("div", { className: o("w-full", c), "data-theme": n, children: /* @__PURE__ */ t("div", { className: "relative w-max", children: [
-      /* @__PURE__ */ e(i, { ref: s, className: o("cursor-pointer ", m), children: u }),
-      /* @__PURE__ */ t(
-        "div",
-        {
-          ref: f,
-          className: o(V({ position: a })),
-          "data-visible": d,
-          children: [
-            /* @__PURE__ */ e("span", { className: o(R({ position: a })) }),
-            /* @__PURE__ */ e(i, { children: l })
-          ]
-        }
-      )
-    ] }) });
-  }
-);
+import { t } from "../../utils-DnIJruo0.js";
+import { a as w, i as C, n as b, o as j, r as O, t as P } from "../../dist-vUCyiTQy.js";
+import { useState as y } from "react";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+var k = ({ content: o, children: i, asOverlay: r = !1, disabled: a = !1, overlayClassName: n, overlayLabel: p, wrapperClassName: m, side: d = "top", sideOffset: c = 4, bgClassName: f = "bg-slate-700", arrowClassName: h = "fill-slate-700", textClassName: g = "text-white", className: T, delayDuration: u = 0 }) => {
+  const [x, v] = y(!1), N = r ? /* @__PURE__ */ e("span", {
+    role: "img",
+    "aria-label": p ?? (typeof o == "string" ? o : void 0),
+    hidden: a,
+    className: t("absolute cursor-help", n ?? "inset-0")
+  }) : /* @__PURE__ */ e("span", { children: i }), l = /* @__PURE__ */ e(w, {
+    delayDuration: u,
+    children: /* @__PURE__ */ s(P, {
+      open: !a && x,
+      onOpenChange: v,
+      children: [/* @__PURE__ */ e(j, {
+        asChild: !0,
+        children: N
+      }), /* @__PURE__ */ e(C, { children: /* @__PURE__ */ s(O, {
+        side: d,
+        sideOffset: c,
+        className: t("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", f, g, T),
+        children: [o, /* @__PURE__ */ e(b, { className: h })]
+      }) })]
+    })
+  });
+  return r ? /* @__PURE__ */ s("div", {
+    className: t("relative", m),
+    children: [i, l]
+  }) : l;
+};
 export {
-  I as Tooltip
+  k as Tooltip
 };

package/dist/components/Typography/Typography.js

@@ -1,28 +1,21 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { cn as n } from "../../utils/index.js";
-import { typographyVariants as c } from "./Typography.variants.js";
-const h = f(
-  ({ className: r, theme: p, children: m, variant: o, component: t, ...e }, a) => {
-    const s = t ?? (o?.includes("h") ? o : "p");
-    return /* @__PURE__ */ y(
-      s,
-      {
-        ref: a,
-        "data-theme": p,
-        className: n(
-          c({
-            className: r,
-            variant: o
-          })
-        ),
-        ...e,
-        children: m
-      }
-    );
-  }
-);
-h.displayName = "Typography";
+import { t as y } from "../../utils-DnIJruo0.js";
+import { typographyVariants as f } from "./Typography.variants.js";
+import { forwardRef as n } from "react";
+import { jsx as c } from "react/jsx-runtime";
+var h = n(({ className: r, theme: p, children: t, variant: o, component: m, ...a }, e) => {
+  const s = m ?? (o?.includes("h") ? o : "p");
+  return /* @__PURE__ */ c(s, {
+    ref: e,
+    "data-theme": p,
+    className: y(f({
+      className: r,
+      variant: o
+    })),
+    ...a,
+    children: t
+  });
+});
+h.displayName = "KonstructTypography";
 export {
   h as Typography
 };