sander-ui 0.1.18 → 0.1.19

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-BX2dQTGH.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-BX2dQTGH.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-BX2dQTGH.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sander-ui",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "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
-};