@konstructio/ui 0.1.2-alpha.11 → 0.1.2-alpha.110

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

@@ -0,0 +1,103 @@
+import { t as e } from "../../../../utils-DnIJruo0.js";
+import { t as z } from "../../../../x-C8O1IsaM.js";
+import { n as L, t as h } from "../../../../react-DpRKGbW_.js";
+import { Typography as A } 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 a, jsxs as o } from "react/jsx-runtime";
+var Y = ({ closeLabel: I, expanded: i, frontHeight: l, index: n, offset: O, reducedMotion: S, restartOnLeave: b, resumeDelay: v, toast: x, total: _, visible: m, onDismiss: p, onExited: E, onHeightChange: d }) => {
+  const T = W(null), [C] = L(), { description: s, duration: R = D, id: c, showCloseButton: w = !0, title: V, type: t = "info" } = x;
+  X({
+    duration: R,
+    paused: i,
+    restart: b,
+    resumeDelay: v,
+    onExpire: p
+  }), Q(() => {
+    const r = T.current;
+    if (!r) return;
+    const N = () => {
+      d(c, r.offsetHeight);
+    };
+    N();
+    const y = new ResizeObserver(N);
+    return y.observe(r), () => {
+      y.disconnect();
+    };
+  }, [c, d]);
+  const g = F[t], u = !i && n !== 0 && l !== 0, f = S ? { duration: 0 } : {
+    ...U,
+    x: j,
+    opacity: B
+  };
+  return /* @__PURE__ */ a(h.li, {
+    className: e("absolute right-0 bottom-0 max-w-full origin-bottom will-change-transform", q({ type: t })),
+    style: { zIndex: C ? _ - 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: (r) => {
+      r === "exit" && E(c);
+    },
+    "aria-hidden": !m,
+    children: /* @__PURE__ */ o("div", {
+      ref: T,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: e(M({ type: t })),
+      children: [/* @__PURE__ */ o("div", {
+        className: "flex items-center gap-8",
+        children: [/* @__PURE__ */ o("div", {
+          className: "flex min-w-0 flex-1 items-center gap-2",
+          children: [/* @__PURE__ */ a(g, {
+            size: s ? 20 : 24,
+            className: e(G({ type: t }))
+          }), /* @__PURE__ */ a(A, {
+            variant: s ? "body2" : "body1",
+            className: e("min-w-0", J({ type: t })),
+            children: V
+          })]
+        }), w ? /* @__PURE__ */ o("button", {
+          type: "button",
+          className: e(k({ type: t })),
+          onClick: p,
+          children: [/* @__PURE__ */ a(z, {
+            className: "size-5",
+            "aria-hidden": !0
+          }), /* @__PURE__ */ a("span", {
+            className: "sr-only",
+            children: I
+          })]
+        }) : null]
+      }), s ? /* @__PURE__ */ a(h.div, {
+        className: "pl-7",
+        animate: { opacity: u ? 0 : 1 },
+        transition: f,
+        children: /* @__PURE__ */ a(A, {
+          variant: "body2",
+          className: e(K({ type: t })),
+          children: s
+        })
+      }) : null]
+    })
+  });
+};
+Y.displayName = "KonstructToastCard";
+export {
+  Y 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 { InformationOutlineIcon as S } from "../../../assets/icons/components/InformationOutline.js";
+import { WarningTriangleIcon as A } from "../../../assets/icons/components/WarningTriangle.js";
+var i = 3e3, o = 5, e = 300, O = 3, E = 12, s = 0.05, t = 12, m = {
+  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,
+  E as COLLAPSED_STEP_PX,
+  O as DEFAULT_MAX_VISIBLE_TOASTS,
+  i as DEFAULT_TOAST_DURATION,
+  o as DEFAULT_TOAST_LIMIT,
+  t as EXPANDED_GAP_PX,
+  e as TOAST_DISMISS_STAGGER_MS,
+  p as TOAST_ENTER_TRANSITION,
+  v as TOAST_EXIT_TRANSITION,
+  f as TOAST_ICONS,
+  m 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,18 @@
-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 as p } from "../../utils-DnIJruo0.js";
+import { a as c, i as h, n as x, o as f, r as g, t as w } from "../../dist-D5Q2IYuC.js";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+var C = ({ content: t, children: e, side: s = "top", sideOffset: o = 4, bgClassName: i = "bg-slate-700", arrowClassName: l = "fill-slate-700", textClassName: n = "text-white", className: d, delayDuration: m = 0 }) => /* @__PURE__ */ r(h, {
+  delayDuration: m,
+  children: /* @__PURE__ */ a(c, { children: [/* @__PURE__ */ r(f, {
+    asChild: !0,
+    children: /* @__PURE__ */ r("span", { children: e })
+  }), /* @__PURE__ */ r(g, { children: /* @__PURE__ */ a(x, {
+    side: s,
+    sideOffset: o,
+    className: p("rounded px-2 py-1 text-xs shadow-md", "animate-in fade-in-0", i, n, d),
+    children: [t, /* @__PURE__ */ r(w, { className: l })]
+  }) })] })
+});
 export {
-  I as Tooltip
+  C 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
 };

package/dist/components/Typography/Typography.variants.js

@@ -1,57 +1,75 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
-      h2: ["text-[45px]", "leading-[52px]"],
-      h3: ["text-[36px]", "leading-[44px]"],
-      h4: ["text-[32px]", "leading-[40px]"],
-      h5: ["text-[28px]", "leading-[36px]"],
-      h6: ["text-[24px]", "font-medium", "leading-[32px]", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-[28px]"],
-      subtitle2: [
-        "text-[16px]",
-        "font-medium",
-        "leading-[24px]",
-        "tracking-[0.15px]"
-      ],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-[20px]",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-[20px]",
-        "tracking-[0.25px]"
-      ],
-      body1: ["text-[16px]", "leading-[24px]", "tracking-[0.5px]"],
-      body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
-      body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
-      tooltip: ["text-[14px]", "leading-[22px]"]
-    }
-  },
-  defaultVariants: {
-    variant: "body1"
-  }
+import { t } from "../../dist-B9GE4SXf.js";
+var a = t(["text-slate-800", "dark:text-metal-50"], {
+  variants: { variant: {
+    h1: ["text-[57px]", "leading-16"],
+    h2: ["text-[45px]", "leading-13"],
+    h3: ["text-4xl", "leading-11"],
+    h4: ["text-[32px]", "leading-10"],
+    h5: ["text-[28px]", "leading-9"],
+    h6: [
+      "text-2xl",
+      "font-medium",
+      "leading-8",
+      "tracking-[0.15px]"
+    ],
+    subtitle1: ["text-[22px]", "leading-7"],
+    subtitle2: [
+      "text-[16px]",
+      "font-medium",
+      "leading-6",
+      "tracking-[0.15px]"
+    ],
+    subtitle3: [
+      "text-[14px]",
+      "font-medium",
+      "leading-5",
+      "tracking-[0.1px]"
+    ],
+    labelLarge: [
+      "text-sm",
+      "font-medium",
+      "text-slate-500",
+      "dark:text-metal-50"
+    ],
+    labelMedium: [
+      "text-[12px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    labelSmall: [
+      "text-[11px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    buttonSmall: [
+      "text-[14px]",
+      "font-semibold",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body1: [
+      "text-base",
+      "leading-6",
+      "tracking-[0.5px]"
+    ],
+    body2: [
+      "text-sm",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body3: [
+      "text-xs",
+      "leading-4",
+      "tracking-[0.4px]"
+    ],
+    tooltip: ["text-sm", "leading-5.5"]
+  } },
+  defaultVariants: { variant: "body1" }
 });
 export {
-  e as typographyVariants
+  a as typographyVariants
 };