sander-ui 0.1.18 → 0.1.20

package/dist/index.js

@@ -5,8 +5,8 @@ import { B as f } from "./Badge-D1SsfPgP.js";
 import { B as T } from "./Breadcrumbs-u6K5JP-p.js";
 import { B as b } from "./Button-CZyNozz2.js";
 import { C as i, a as C, b as B, c as w } from "./Card-sDTrEkr0.js";
-import { C as S } from "./Checkbox-D-5XA5nS.js";
-import { C as u, M as H, a as g, b as I, c as M } from "./ConfirmModal-CVz_ziw_.js";
+import { C as u } from "./Checkbox-D-5XA5nS.js";
+import { C as A, M as H, a as g, b as I, c as M } from "./ConfirmModal-CVz_ziw_.js";
 import { C as y } from "./Container-ahtH8Cdw.js";
 import { D as F, a as R, b as h, c as v } from "./Drawer-DQlmckRl.js";
 import { D as L, a as j, b as q, c as z, d as E } from "./Dropdown-GLV9Ia6O.js";
@@ -23,10 +23,10 @@ import { S as po } from "./Spinner-BBsu1HN3.js";
 import { S as xo } from "./Switch-D7LlrXzk.js";
 import { T as no, a as To } from "./Tabs-CEWSRAh7.js";
 import { T as bo, a as co, b as io, c as Co, d as Bo, e as wo } from "./Table-BUCUALeG.js";
-import { T as So } from "./Text-EMaNgj_L.js";
-import { T as uo } from "./Textarea-Btoxtbz0.js";
-import { T as go, a as Io } from "./ToastContainer-hY5tgI2e.js";
-import { T as Po } from "./Tooltip-DENWDJQ8.js";
+import { T as uo } from "./Text-EMaNgj_L.js";
+import { T as Ao } from "./Textarea-Btoxtbz0.js";
+import { T as go, a as Io, u as Mo } from "./useToast-BQudQhlt.js";
+import { T as yo } from "./Tooltip-DENWDJQ8.js";
 export {
   r as Accordion,
   e as AccordionItem,
@@ -40,8 +40,8 @@ export {
   C as CardBody,
   B as CardFooter,
   w as CardHeader,
-  S as Checkbox,
-  u as ConfirmModal,
+  u as Checkbox,
+  A as ConfirmModal,
   y as Container,
   F as Drawer,
   R as DrawerBody,
@@ -75,9 +75,10 @@ export {
   Bo as TableHeader,
   wo as TableRow,
   To as Tabs,
-  So as Text,
-  uo as Textarea,
+  uo as Text,
+  Ao as Textarea,
   go as Toast,
   Io as ToastContainer,
-  Po as Tooltip
+  yo as Tooltip,
+  Mo as useToast
 };

package/dist/toast.js

@@ -1,5 +1,6 @@
-import { T as s, a as t } from "./ToastContainer-hY5tgI2e.js";
+import { T as o, a as t, u as T } from "./useToast-BQudQhlt.js";
 export {
-  s as Toast,
-  t as ToastContainer
+  o as Toast,
+  t as ToastContainer,
+  T as useToast
 };

package/dist/types/components/ui/Toast/Toast.types.d.ts

@@ -28,3 +28,9 @@ export type ToastContainerProps = {
     /** Callback to remove a toast from the list after the animation completes. */
     onRemove: (id: string) => void;
 };
+export type UseToastOptions = {
+    /** Screen corner where toasts appear. @default "top-right" */
+    position?: ToastPosition;
+    /** Auto-dismiss duration in ms. @default 4000 */
+    duration?: number;
+};

package/dist/types/components/ui/Toast/index.d.ts

@@ -1,3 +1,5 @@
 export { Toast } from "./Toast";
 export { ToastContainer } from "./ToastContainer";
-export type { ToastProps, ToastContainerProps, ToastData, ToastVariant, ToastPosition } from "./Toast.types";
+export { useToast } from "./useToast";
+export type { ToastProps, ToastContainerProps, ToastData, ToastVariant, ToastPosition, UseToastOptions } from "./Toast.types";
+export type { ToastFn, UseToastReturn } from "./useToast";

package/dist/types/components/ui/Toast/useToast.d.ts

@@ -0,0 +1,28 @@
+import type { FC } from "react";
+import type { ToastVariant, ToastData, UseToastOptions } from "./Toast.types";
+type ToastOptions = {
+    variant?: ToastVariant;
+    duration?: number;
+};
+type ToastUpdate = {
+    message?: string;
+    variant?: ToastVariant;
+    duration?: number;
+};
+export type ToastFn = {
+    (message: string, options?: ToastOptions): string;
+    success: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    error: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    info: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    loading: (message: string, options?: Omit<ToastOptions, "variant">) => string;
+    update: (id: string, update: ToastUpdate) => void;
+};
+export type UseToastReturn = {
+    toasts: ToastData[];
+    toast: ToastFn;
+    dismiss: (id: string) => void;
+    Toasts: FC;
+};
+export declare function useToast(options?: UseToastOptions): UseToastReturn;
+export {};

package/dist/types/components/ui/index.d.ts

@@ -49,7 +49,8 @@ export { Text } from "./Text";
 export type { TextProps } from "./Text";
 export { Textarea } from "./Textarea";
 export type { TextareaProps } from "./Textarea";
-export { Toast, ToastContainer } from "./Toast";
-export type { ToastProps, ToastContainerProps, ToastData, ToastVariant, ToastPosition } from "./Toast";
+export { Toast, ToastContainer, useToast } from "./Toast";
+export type { ToastProps, ToastContainerProps, ToastData, ToastVariant, ToastPosition, UseToastOptions } from "./Toast";
+export type { ToastFn, UseToastReturn } from "./Toast";
 export { Tooltip } from "./Tooltip";
 export type { TooltipPlacement, TooltipProps } from "./Tooltip";

package/dist/useToast-BQudQhlt.js

@@ -0,0 +1,171 @@
+import { useRef as w, useEffect as A, useSyncExternalStore as T, useMemo as S, createElement as N } from "react";
+import { jsxs as C, jsx as f } from "react/jsx-runtime";
+import { c as h } from "./index-p1eeF8LQ.js";
+import { c as y } from "./createLucideIcon-CP-mMPfa.js";
+import { I as b, T as D, C as E, a as M } from "./triangle-alert-CvNSSzY6.js";
+import { X as x } from "./x-B9bYxG31.js";
+const R = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], k = y("loader-circle", R), z = "_container_d8npe_1", j = "_toast_d8npe_79", L = "_dismissing_d8npe_95", O = "_icon_d8npe_115", P = "_iconSpin_d8npe_119", U = "_spin_d8npe_1", $ = "_message_d8npe_123", B = "_dismiss_d8npe_95", V = "_success_d8npe_159", X = "_error_d8npe_165", q = "_warning_d8npe_171", F = "_info_d8npe_177", G = "_loading_d8npe_183", m = {
+  container: z,
+  "bottom-right": "_bottom-right_d8npe_25",
+  "bottom-left": "_bottom-left_d8npe_26",
+  "top-right": "_top-right_d8npe_30",
+  "top-left": "_top-left_d8npe_31",
+  toast: j,
+  "slide-in-bottom": "_slide-in-bottom_d8npe_1",
+  dismissing: L,
+  "slide-out-bottom": "_slide-out-bottom_d8npe_1",
+  "slide-in-top": "_slide-in-top_d8npe_1",
+  "slide-out-top": "_slide-out-top_d8npe_1",
+  icon: O,
+  iconSpin: P,
+  spin: U,
+  message: $,
+  dismiss: B,
+  default: "_default_d8npe_153",
+  success: V,
+  error: X,
+  warning: q,
+  info: F,
+  loading: G,
+  "slide-in-right": "_slide-in-right_d8npe_1",
+  "slide-out-right": "_slide-out-right_d8npe_1",
+  "slide-in-left": "_slide-in-left_d8npe_1",
+  "slide-out-left": "_slide-out-left_d8npe_1"
+}, H = {
+  default: b,
+  success: M,
+  error: E,
+  warning: D,
+  info: b,
+  loading: k
+}, J = ({ toast: n, onDismiss: o, onRemove: l }) => {
+  const d = n.variant === "error", s = H[n.variant];
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      role: d ? "alert" : "status",
+      "aria-atomic": "true",
+      className: h(
+        m.toast,
+        m[n.variant],
+        n.dismissing && m.dismissing
+      ),
+      onAnimationEnd: () => {
+        n.dismissing && l(n.id);
+      },
+      children: [
+        /* @__PURE__ */ f(
+          s,
+          {
+            size: 18,
+            className: h(
+              m.icon,
+              n.variant === "loading" && m.iconSpin
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ f("p", { className: m.message, children: n.message }),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            onClick: () => o(n.id),
+            "aria-label": "Dismiss notification",
+            className: m.dismiss,
+            children: /* @__PURE__ */ f(x, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}, K = ({
+  toasts: n,
+  position: o = "top-right",
+  onDismiss: l,
+  onRemove: d
+}) => {
+  const s = w(null), u = n.length > 0;
+  return A(() => {
+    const r = s.current;
+    r && (u && !r.matches(":popover-open") ? r.showPopover() : !u && r.matches(":popover-open") && r.hidePopover());
+  }, [u]), /* @__PURE__ */ f(
+    "div",
+    {
+      ref: s,
+      popover: "manual",
+      className: h(m.container, m[o]),
+      "aria-live": "polite",
+      "aria-relevant": "additions",
+      children: n.map((r) => /* @__PURE__ */ f(J, { toast: r, onDismiss: l, onRemove: d }, r.id))
+    }
+  );
+};
+let Q = 0;
+const W = () => `toast-${++Q}-${Date.now()}`, Y = 4e3, Z = {
+  default: !0,
+  success: !0,
+  info: !0,
+  warning: !0,
+  error: !1,
+  loading: !1
+};
+function ss(n) {
+  let o = [];
+  const l = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Map(), s = () => l.forEach((e) => e()), u = (e) => (l.add(e), () => {
+    l.delete(e);
+  }), r = () => o, g = (e) => {
+    const t = d.get(e);
+    t && (clearTimeout(t), d.delete(e));
+  }, v = (e) => {
+    g(e), o = o.map(
+      (t) => t.id === e ? { ...t, dismissing: !0 } : t
+    ), s();
+  }, a = (e) => {
+    o = o.filter((t) => t.id !== e), s();
+  }, i = (e, t, _) => {
+    if (!Z[t] && _ === void 0) return;
+    const I = setTimeout(() => v(e), _ ?? n);
+    d.set(e, I);
+  };
+  return { subscribe: u, getSnapshot: r, addToast: (e, t = {}) => {
+    const _ = W(), p = t.variant ?? "default";
+    return o = [...o, { id: _, message: e, variant: p }], s(), i(_, p, t.duration), _;
+  }, dismiss: v, remove: a, update: (e, t) => {
+    g(e), o = o.map((p) => p.id !== e ? p : {
+      ...p,
+      ...t.message !== void 0 && { message: t.message },
+      ...t.variant !== void 0 && { variant: t.variant },
+      dismissing: !1
+    }), s();
+    const _ = t.variant;
+    _ && i(e, _, t.duration);
+  } };
+}
+function ds(n = {}) {
+  const { position: o = "top-right", duration: l = Y } = n, d = w(null);
+  d.current || (d.current = ss(l));
+  const s = d.current, u = T(s.subscribe, s.getSnapshot), r = s.dismiss, g = S(() => {
+    const a = (i, c) => s.addToast(i, c);
+    return a.success = (i, c) => s.addToast(i, { ...c, variant: "success" }), a.error = (i, c) => s.addToast(i, { ...c, variant: "error" }), a.warning = (i, c) => s.addToast(i, { ...c, variant: "warning" }), a.info = (i, c) => s.addToast(i, { ...c, variant: "info" }), a.loading = (i, c) => s.addToast(i, { ...c, variant: "loading" }), a.update = s.update, a;
+  }, [s]), v = S(() => {
+    const a = () => {
+      const i = T(
+        s.subscribe,
+        s.getSnapshot
+      );
+      return N(K, {
+        toasts: i,
+        position: o,
+        onDismiss: s.dismiss,
+        onRemove: s.remove
+      });
+    };
+    return a.displayName = "Toasts", a;
+  }, [s, o]);
+  return { toasts: u, toast: g, dismiss: r, Toasts: v };
+}
+export {
+  J as T,
+  K as a,
+  ds as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sander-ui",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "type": "module",
   "description": "A modern React component library built with TypeScript and CSS Modules",
   "main": "./dist/index.js",

package/dist/ToastContainer-hY5tgI2e.js

@@ -1,103 +0,0 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { c as a } from "./index-p1eeF8LQ.js";
-import { useRef as p, useEffect as m } from "react";
-import { c as g } from "./createLucideIcon-CP-mMPfa.js";
-import { I as c, T as f, C as u, a as h } from "./triangle-alert-CvNSSzY6.js";
-import { X as v } from "./x-B9bYxG31.js";
-const b = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], C = g("loader-circle", b), N = "_container_d8npe_1", T = "_toast_d8npe_79", w = "_dismissing_d8npe_95", I = "_icon_d8npe_115", S = "_iconSpin_d8npe_119", k = "_spin_d8npe_1", x = "_message_d8npe_123", z = "_dismiss_d8npe_95", A = "_success_d8npe_159", E = "_error_d8npe_165", j = "_warning_d8npe_171", y = "_info_d8npe_177", L = "_loading_d8npe_183", n = {
-  container: N,
-  "bottom-right": "_bottom-right_d8npe_25",
-  "bottom-left": "_bottom-left_d8npe_26",
-  "top-right": "_top-right_d8npe_30",
-  "top-left": "_top-left_d8npe_31",
-  toast: T,
-  "slide-in-bottom": "_slide-in-bottom_d8npe_1",
-  dismissing: w,
-  "slide-out-bottom": "_slide-out-bottom_d8npe_1",
-  "slide-in-top": "_slide-in-top_d8npe_1",
-  "slide-out-top": "_slide-out-top_d8npe_1",
-  icon: I,
-  iconSpin: S,
-  spin: k,
-  message: x,
-  dismiss: z,
-  default: "_default_d8npe_153",
-  success: A,
-  error: E,
-  warning: j,
-  info: y,
-  loading: L,
-  "slide-in-right": "_slide-in-right_d8npe_1",
-  "slide-out-right": "_slide-out-right_d8npe_1",
-  "slide-in-left": "_slide-in-left_d8npe_1",
-  "slide-out-left": "_slide-out-left_d8npe_1"
-}, P = {
-  default: c,
-  success: h,
-  error: u,
-  warning: f,
-  info: c,
-  loading: C
-}, B = ({ toast: i, onDismiss: t, onRemove: r }) => {
-  const d = i.variant === "error", o = P[i.variant];
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      role: d ? "alert" : "status",
-      "aria-atomic": "true",
-      className: a(
-        n.toast,
-        n[i.variant],
-        i.dismissing && n.dismissing
-      ),
-      onAnimationEnd: () => {
-        i.dismissing && r(i.id);
-      },
-      children: [
-        /* @__PURE__ */ s(
-          o,
-          {
-            size: 18,
-            className: a(n.icon, i.variant === "loading" && n.iconSpin),
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ s("p", { className: n.message, children: i.message }),
-        /* @__PURE__ */ s(
-          "button",
-          {
-            onClick: () => t(i.id),
-            "aria-label": "Dismiss notification",
-            className: n.dismiss,
-            children: /* @__PURE__ */ s(v, { size: 16 })
-          }
-        )
-      ]
-    }
-  );
-}, G = ({
-  toasts: i,
-  position: t = "top-right",
-  onDismiss: r,
-  onRemove: d
-}) => {
-  const o = p(null), _ = i.length > 0;
-  return m(() => {
-    const e = o.current;
-    e && (_ && !e.matches(":popover-open") ? e.showPopover() : !_ && e.matches(":popover-open") && e.hidePopover());
-  }, [_]), /* @__PURE__ */ s(
-    "div",
-    {
-      ref: o,
-      popover: "manual",
-      className: a(n.container, n[t]),
-      "aria-live": "polite",
-      "aria-relevant": "additions",
-      children: i.map((e) => /* @__PURE__ */ s(B, { toast: e, onDismiss: r, onRemove: d }, e.id))
-    }
-  );
-};
-export {
-  B as T,
-  G as a
-};