@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/toast.js

@@ -1,99 +1,545 @@
 "use client";
-import { jsx as a } from "react/jsx-runtime";
-import * as o from "react";
-import { aJ as i, aK as d, aL as n, aM as l, aN as c, aO as m, aP as p } from "../_chunks/primitives.js";
-import { e as u } from "../_chunks/vendor-utils.js";
-import { IconX as x } from "@tabler/icons-react";
-import { c as r } from "../_chunks/utils.js";
-const A = p, b = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
-  i,
-  {
-    ref: s,
-    className: r(
-      "fixed top-0 z-toast flex max-h-screen w-full flex-col-reverse p-ds-05 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      e
-    ),
-    ...t
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import * as g from "react";
+import { t as f } from "../_chunks/vendor-client.js";
+import { IconInfoCircle as D, IconAlertTriangle as M, IconCircleX as O, IconCircleCheck as P, IconCheck as B, IconAlertCircle as U, IconPhoto as j, IconFile as L, IconRefresh as _, IconX as z, IconUpload as G } from "@tabler/icons-react";
+import { c as b } from "../_chunks/utils.js";
+import { s as p, t as y } from "../_chunks/motion2.js";
+import { S as E } from "../_chunks/spinner.js";
+import { Progress as X } from "./progress.js";
+import { m as o, A as T } from "../_chunks/motion.js";
+const k = 5e3, H = 8e3, $ = 3e3, F = {
+  message: {
+    accentClass: "",
+    iconClass: "",
+    icon: null,
+    timerBarClass: "bg-surface-border"
+  },
+  success: {
+    accentClass: "bg-success-9",
+    iconClass: "text-success-11",
+    icon: P,
+    timerBarClass: "bg-success-9"
+  },
+  error: {
+    accentClass: "bg-error-9",
+    iconClass: "text-error-11",
+    icon: O,
+    timerBarClass: "bg-error-9"
+  },
+  warning: {
+    accentClass: "bg-warning-9",
+    iconClass: "text-warning-11",
+    icon: M,
+    timerBarClass: "bg-warning-9"
+  },
+  info: {
+    accentClass: "bg-info-9",
+    iconClass: "text-info-11",
+    icon: D,
+    timerBarClass: "bg-info-9"
+  },
+  loading: {
+    accentClass: "bg-accent-9",
+    iconClass: "text-accent-11",
+    icon: null,
+    timerBarClass: "bg-accent-9"
   }
-));
-b.displayName = i.displayName;
-const v = u(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-ds-03 overflow-hidden rounded-ds-md border p-ds-05 pr-ds-06 shadow-03 transition-all duration-moderate-02 data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      color: {
-        neutral: "border-border bg-layer-01 text-text-primary",
-        success: "border-success-border bg-success-surface text-success-text",
-        warning: "border-warning-border bg-warning-surface text-warning-text",
-        error: "destructive group border-border-error bg-error-surface text-error-text",
-        info: "border-info-border bg-info-surface text-info-text"
+};
+function S({
+  duration: e,
+  type: t,
+  paused: a
+}) {
+  const r = F[t];
+  return /* @__PURE__ */ s("div", { className: "absolute bottom-0 left-0 right-0 h-[2px] overflow-hidden", children: /* @__PURE__ */ s(
+    "div",
+    {
+      className: b(
+        "h-full w-full origin-left opacity-30",
+        r.timerBarClass,
+        "motion-safe:animate-timer-bar"
+      ),
+      style: {
+        animationDuration: `${e}ms`,
+        animationPlayState: a ? "paused" : "running"
       }
-    },
-    defaultVariants: {
-      color: "neutral"
     }
+  ) });
+}
+function I({
+  type: e,
+  title: t,
+  description: a,
+  action: r,
+  cancel: n,
+  duration: i = k,
+  showTimerBar: w = !0,
+  selfDismissId: l
+}) {
+  const [u, v] = g.useState(!1), h = F[e], C = h.icon, N = g.useRef(i), c = g.useRef(0);
+  return g.useEffect(() => {
+    if (l == null || i === 1 / 0) return;
+    if (u) {
+      const A = Date.now() - c.current;
+      N.current = Math.max(0, N.current - A);
+      return;
+    }
+    c.current = Date.now();
+    const R = setTimeout(() => {
+      f.dismiss(l);
+    }, N.current);
+    return () => clearTimeout(R);
+  }, [l, i, u]), /* @__PURE__ */ d(
+    o.div,
+    {
+      layout: "position",
+      role: "status",
+      "aria-live": "polite",
+      className: "group relative flex w-full overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02",
+      onMouseEnter: () => v(!0),
+      onMouseLeave: () => v(!1),
+      transition: p.smooth,
+      children: [
+        h.accentClass && /* @__PURE__ */ s(
+          "div",
+          {
+            className: b("w-1 shrink-0 rounded-l-ds-md", h.accentClass)
+          }
+        ),
+        /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-1 items-start gap-ds-03 p-ds-04", children: [
+          /* @__PURE__ */ s(T, { mode: "wait", children: e === "loading" ? /* @__PURE__ */ s(
+            o.div,
+            {
+              initial: { opacity: 0, scale: 0.5 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.5 },
+              transition: y.fade,
+              className: "mt-0.5 shrink-0",
+              children: /* @__PURE__ */ s(E, { size: "sm", className: "h-4 w-4" })
+            },
+            "loading"
+          ) : C ? /* @__PURE__ */ s(
+            o.div,
+            {
+              initial: { opacity: 0, scale: 0.5 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.5 },
+              transition: p.bouncy,
+              className: "mt-0.5 shrink-0",
+              children: /* @__PURE__ */ s(C, { className: b("h-4 w-4", h.iconClass) })
+            },
+            e
+          ) : null }),
+          /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
+            t && /* @__PURE__ */ s("p", { className: "text-ds-md font-semibold text-surface-fg", children: t }),
+            a && /* @__PURE__ */ s(
+              "p",
+              {
+                className: b(
+                  "text-ds-sm text-surface-fg-muted",
+                  t && "mt-0.5"
+                ),
+                children: a
+              }
+            ),
+            (r || n) && /* @__PURE__ */ d("div", { className: "mt-ds-03 flex items-center gap-ds-03", children: [
+              r && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: r.onClick,
+                  className: "text-ds-sm font-medium text-accent-11 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-ds-sm",
+                  children: r.label
+                }
+              ),
+              n && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: n.onClick,
+                  className: "text-ds-sm text-surface-fg-muted hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-ds-sm",
+                  children: n.label
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        w && e !== "loading" && /* @__PURE__ */ s(S, { duration: i, type: e, paused: u })
+      ]
+    }
+  );
+}
+const Y = /* @__PURE__ */ new Set([
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
+  "svg",
+  "bmp",
+  "ico",
+  "avif"
+]);
+function K(e) {
+  var a;
+  if (e.previewUrl) return !0;
+  const t = ((a = e.name.split(".").pop()) == null ? void 0 : a.toLowerCase()) ?? "";
+  return Y.has(t);
+}
+function V(e) {
+  switch (e) {
+    case "complete":
+      return "success";
+    case "error":
+      return "error";
+    default:
+      return "default";
   }
-), w = o.forwardRef(({ className: e, color: t, ...s }, f) => /* @__PURE__ */ a(
-  d,
-  {
-    ref: f,
-    role: "status",
-    "aria-live": "polite",
-    className: r(v({ color: t }), e),
-    ...s
+}
+function W(e) {
+  switch (e.status) {
+    case "pending":
+      return 0;
+    case "uploading":
+      return e.progress ?? 0;
+    case "processing":
+      return;
+    case "complete":
+      return 100;
+    case "error":
+      return e.progress ?? 0;
   }
-));
-w.displayName = d.displayName;
-const y = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
-  n,
-  {
-    ref: s,
-    className: r(
-      "inline-flex h-ds-sm shrink-0 items-center justify-center rounded-ds-md border border-border bg-transparent px-ds-04 text-ds-md font-medium transition-colors hover:bg-layer-02 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38] group-[.destructive]:border-border-error group-[.destructive]:hover:bg-error-surface",
-      e
+}
+function q(e) {
+  return !e || e < 0 || !Number.isFinite(e) ? "0 B" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : e < 1024 * 1024 * 1024 ? `${(e / (1024 * 1024)).toFixed(1)} MB` : `${(e / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+function J({
+  file: e,
+  onRetry: t,
+  onRemove: a
+}) {
+  const r = e.status === "complete" || e.status === "error", n = e.status === "uploading" || e.status === "processing";
+  return /* @__PURE__ */ d(
+    o.div,
+    {
+      layout: !0,
+      className: "flex items-center gap-ds-02 py-1",
+      initial: !1,
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, x: -20, height: 0 },
+      transition: p.snappy,
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: /* @__PURE__ */ s(T, { mode: "wait", children: e.status === "complete" ? /* @__PURE__ */ s(
+          o.div,
+          {
+            initial: { opacity: 0, scale: 0.5 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.5 },
+            transition: p.bouncy,
+            children: /* @__PURE__ */ s(B, { className: "h-3.5 w-3.5 text-success-11" })
+          },
+          "complete"
+        ) : e.status === "error" ? /* @__PURE__ */ s(
+          o.div,
+          {
+            initial: { opacity: 0, scale: 0.5 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.5 },
+            transition: y.fade,
+            children: /* @__PURE__ */ s(U, { className: "h-3.5 w-3.5 text-error-11" })
+          },
+          "error"
+        ) : e.status === "processing" ? /* @__PURE__ */ s(
+          o.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: y.fade,
+            children: /* @__PURE__ */ s(E, { size: "sm", className: "h-3.5 w-3.5" })
+          },
+          "processing"
+        ) : K(e) ? /* @__PURE__ */ s(
+          o.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: y.fade,
+            children: /* @__PURE__ */ s(j, { className: "h-3.5 w-3.5 text-surface-fg-muted" })
+          },
+          "image"
+        ) : /* @__PURE__ */ s(
+          o.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: y.fade,
+            children: /* @__PURE__ */ s(L, { className: "h-3.5 w-3.5 text-surface-fg-muted" })
+          },
+          "file"
+        ) }) }),
+        /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate text-ds-xs text-surface-fg", children: e.name }),
+        n ? /* @__PURE__ */ d("div", { className: "flex w-16 items-center gap-1", children: [
+          /* @__PURE__ */ s(
+            X,
+            {
+              size: "sm",
+              color: V(e.status),
+              value: W(e),
+              className: "flex-1"
+            }
+          ),
+          e.progress !== void 0 && /* @__PURE__ */ d("span", { className: "shrink-0 text-[10px] tabular-nums text-surface-fg-muted", children: [
+            e.progress,
+            "%"
+          ] })
+        ] }) : e.status === "complete" ? /* @__PURE__ */ s("span", { className: "text-[10px] text-success-11", children: "Done" }) : e.status === "error" ? /* @__PURE__ */ s("span", { className: "max-w-[60px] truncate text-[10px] text-error-11", children: e.error || "Failed" }) : /* @__PURE__ */ s("span", { className: "text-[10px] text-surface-fg-muted", children: q(e.size) }),
+        e.status === "error" && t && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => t(e.id),
+            className: "flex h-4 w-4 items-center justify-center rounded-ds-sm text-surface-fg-muted hover:text-surface-fg",
+            "aria-label": `Retry ${e.name}`,
+            children: /* @__PURE__ */ s(_, { className: "h-3 w-3" })
+          }
+        ),
+        !r && a && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => a(e.id),
+            className: "flex h-4 w-4 items-center justify-center rounded-ds-sm text-surface-fg-muted hover:text-surface-fg",
+            "aria-label": `Cancel ${e.name}`,
+            children: /* @__PURE__ */ s(z, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+function Q({
+  files: e,
+  onRetry: t,
+  onRemove: a,
+  selfDismissId: r
+}) {
+  const [n, i] = g.useState(!1), w = e.filter((c) => c.status === "complete").length, l = e.filter((c) => c.status === "error").length, u = e.every(
+    (c) => c.status === "complete" || c.status === "error"
+  ), v = g.useRef($), h = g.useRef(0);
+  g.useEffect(() => {
+    if (r == null || !u) return;
+    if (n) {
+      const R = Date.now() - h.current;
+      v.current = Math.max(0, v.current - R);
+      return;
+    }
+    h.current = Date.now();
+    const c = setTimeout(() => {
+      f.dismiss(r);
+    }, v.current);
+    return () => clearTimeout(c);
+  }, [r, u, n]);
+  const C = u ? l > 0 ? "bg-error-7" : "bg-success-7" : "bg-accent-9", N = u ? l > 0 ? "error" : "success" : "loading";
+  return /* @__PURE__ */ d(
+    o.div,
+    {
+      layout: !0,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": "File uploads",
+      className: "group relative flex w-full overflow-hidden rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02",
+      onMouseEnter: () => i(!0),
+      onMouseLeave: () => i(!1),
+      transition: p.smooth,
+      children: [
+        /* @__PURE__ */ s("div", { className: b("w-1 shrink-0 rounded-l-ds-md", C) }),
+        /* @__PURE__ */ d("div", { className: "min-w-0 flex-1 p-ds-04", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center gap-ds-02", children: [
+            /* @__PURE__ */ s(T, { mode: "wait", children: u ? l > 0 ? /* @__PURE__ */ s(
+              o.div,
+              {
+                initial: { opacity: 0, scale: 0.5 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.5 },
+                transition: p.bouncy,
+                children: /* @__PURE__ */ s(U, { className: "h-4 w-4 shrink-0 text-error-11" })
+              },
+              "error-icon"
+            ) : /* @__PURE__ */ s(
+              o.div,
+              {
+                initial: { opacity: 0, scale: 0.5 },
+                animate: { opacity: 1, scale: 1 },
+                exit: { opacity: 0, scale: 0.5 },
+                transition: p.bouncy,
+                children: /* @__PURE__ */ s(B, { className: "h-4 w-4 shrink-0 text-success-11" })
+              },
+              "success-icon"
+            ) : /* @__PURE__ */ s(
+              o.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: y.fade,
+                children: /* @__PURE__ */ s(G, { className: "h-4 w-4 shrink-0 text-surface-fg-muted" })
+              },
+              "upload-icon"
+            ) }),
+            /* @__PURE__ */ s("p", { className: "text-ds-md font-semibold text-surface-fg", children: u ? l > 0 ? `${w} of ${e.length} uploaded` : `${e.length} file${e.length > 1 ? "s" : ""} uploaded` : `Uploading ${e.length} file${e.length > 1 ? "s" : ""}` })
+          ] }),
+          !u && /* @__PURE__ */ d("p", { className: "mt-0.5 text-ds-xs text-surface-fg-muted", children: [
+            w,
+            " of ",
+            e.length,
+            " complete",
+            l > 0 && ` · ${l} failed`
+          ] }),
+          /* @__PURE__ */ s("div", { className: "mt-ds-02 max-h-[140px] overflow-y-auto", children: /* @__PURE__ */ s(T, { children: e.map((c) => /* @__PURE__ */ s(
+            J,
+            {
+              file: c,
+              onRetry: t,
+              onRemove: a
+            },
+            c.id
+          )) }) }),
+          /* @__PURE__ */ d("div", { className: "sr-only", "aria-live": "polite", children: [
+            w,
+            " of ",
+            e.length,
+            " files uploaded",
+            l > 0 && `, ${l} failed`
+          ] })
+        ] }),
+        u && /* @__PURE__ */ s(
+          S,
+          {
+            duration: $,
+            type: N,
+            paused: !1
+          }
+        )
+      ]
+    }
+  );
+}
+function Z(e, t) {
+  return {
+    id: e == null ? void 0 : e.id,
+    duration: (e == null ? void 0 : e.duration) ?? t ?? k,
+    unstyled: !0,
+    classNames: { toast: "w-full" }
+  };
+}
+function x(e, t, a) {
+  const r = (a == null ? void 0 : a.duration) ?? k;
+  return f.custom(
+    () => /* @__PURE__ */ s(
+      I,
+      {
+        type: e,
+        title: t,
+        description: a == null ? void 0 : a.description,
+        action: a == null ? void 0 : a.action,
+        cancel: a == null ? void 0 : a.cancel,
+        duration: r
+      }
     ),
-    ...t
-  }
-));
-y.displayName = n.displayName;
-const g = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
-  l,
-  {
-    ref: s,
-    className: r(
-      "absolute right-ds-02 top-ds-02 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-md p-ds-02 text-text-secondary opacity-70 transition-opacity hover:text-text-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
-      e
+    Z(a, r)
+  );
+}
+function m(e, t) {
+  return x("message", e, t);
+}
+m.message = (e, t) => x("message", e, t);
+m.success = (e, t) => x("success", e, t);
+m.error = (e, t) => x("error", e, t);
+m.warning = (e, t) => x("warning", e, t);
+m.info = (e, t) => x("info", e, t);
+m.loading = (e, t) => x("loading", e, {
+  ...t,
+  duration: (t == null ? void 0 : t.duration) ?? 1 / 0
+});
+m.promise = (e, t) => {
+  const a = f.custom(
+    () => /* @__PURE__ */ s(I, { type: "loading", title: t.loading, showTimerBar: !1 }),
+    { duration: 1 / 0, unstyled: !0, classNames: { toast: "w-full" } }
+  ), r = (n, i) => {
+    f.custom(
+      () => /* @__PURE__ */ s(
+        I,
+        {
+          type: n,
+          title: i,
+          duration: k,
+          selfDismissId: a
+        }
+      ),
+      { id: a, duration: 1 / 0, unstyled: !0, classNames: { toast: "w-full" } }
+    );
+  };
+  return e.then((n) => {
+    const i = typeof t.success == "function" ? t.success(n) : t.success;
+    r("success", i);
+  }).catch((n) => {
+    const i = typeof t.error == "function" ? t.error(n) : t.error;
+    r("error", i);
+  }), a;
+};
+m.undo = (e, t) => {
+  const a = t.duration ?? H;
+  return f.custom(
+    () => /* @__PURE__ */ s(
+      I,
+      {
+        type: "message",
+        title: e,
+        description: t.description,
+        action: { label: "Undo", onClick: t.onUndo },
+        duration: a
+      }
     ),
-    "toast-close": "",
-    ...t,
-    children: /* @__PURE__ */ a(x, { className: "h-ico-sm w-ico-sm" })
-  }
-));
-g.displayName = l.displayName;
-const N = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
-  c,
-  {
-    ref: s,
-    className: r("text-ds-md font-semibold [&+div]:text-ds-sm", e),
-    ...t
-  }
-));
-N.displayName = c.displayName;
-const h = o.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ a(
-  m,
-  {
-    ref: s,
-    className: r("text-ds-md opacity-[0.9]", e),
-    ...t
-  }
-));
-h.displayName = m.displayName;
+    { duration: a, unstyled: !0, classNames: { toast: "w-full" } }
+  );
+};
+m.upload = (e) => {
+  const t = e.id ?? String(Date.now());
+  return f.custom(
+    () => /* @__PURE__ */ s(
+      Q,
+      {
+        files: e.files,
+        onRetry: e.onRetry,
+        onRemove: e.onRemove,
+        selfDismissId: t
+      }
+    ),
+    {
+      id: t,
+      duration: 1 / 0,
+      unstyled: !0,
+      classNames: { toast: "w-full" }
+    }
+  ), t;
+};
+m.custom = (e, t) => f.custom(e, {
+  ...t,
+  unstyled: !0,
+  classNames: { toast: "w-full", ...t == null ? void 0 : t.classNames }
+});
+m.dismiss = (e) => {
+  e !== void 0 ? f.dismiss(e) : f.dismiss();
+};
 export {
-  w as Toast,
-  y as ToastAction,
-  g as ToastClose,
-  h as ToastDescription,
-  A as ToastProvider,
-  N as ToastTitle,
-  b as ToastViewport
+  S as TimerBar,
+  I as ToastContent,
+  J as UploadFileRow,
+  Q as UploadToastContent,
+  q as formatFileSize,
+  m as toast
 };