@devalok/shilp-sutra 0.33.2 → 0.34.1

package/dist/ui/file-upload.js

@@ -1,269 +1,245 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import * as r from "react";
-import { IconPaperclip as Z, IconCheck as q, IconUpload as G } from "@tabler/icons-react";
-import { cn as h } from "./lib/utils.js";
-import { springs as w, tweens as N } from "./lib/motion.js";
-import { Spinner as B } from "./spinner.js";
-import { Icon as I } from "./icon.js";
-import { m as c, A as M } from "../_chunks/framer.js";
-const H = 10 * 1024 * 1024;
-function J(a, l) {
-  return l.split(",").map((s) => s.trim()).some((s) => s.startsWith(".") ? a.name.toLowerCase().endsWith(s.toLowerCase()) : s.endsWith("/*") ? a.type.startsWith(s.slice(0, s.indexOf("/") + 1)) : a.type === s);
+import { a as e, c as t } from "../_chunks/framer.js";
+import { springs as n, tweens as r } from "./lib/motion.js";
+import { cn as i } from "./lib/utils.js";
+import { Spinner as a } from "./spinner.js";
+import { Icon as o } from "./icon.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { IconCheck as u, IconPaperclip as d, IconUpload as f } from "@tabler/icons-react";
+//#region src/ui/file-upload.tsx
+var p = 10 * 1024 * 1024;
+function m(e, t) {
+	return t.split(",").map((e) => e.trim()).some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t.toLowerCase()) : t.endsWith("/*") ? e.type.startsWith(t.slice(0, t.indexOf("/") + 1)) : e.type === t);
 }
-function U(a) {
-  return a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : `${(a / (1024 * 1024)).toFixed(1)} MB`;
+function h(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-const Q = r.forwardRef(
-  ({
-    accept: a,
-    maxSize: l = H,
-    multiple: s = !1,
-    uploading: o = !1,
-    progress: x = 0,
-    onFiles: A,
-    error: F,
-    compact: W = !1,
-    disabled: n = !1,
-    className: E,
-    label: v,
-    sublabel: j,
-    ...L
-  }, R) => {
-    const y = r.useRef(null), [b, f] = r.useState(!1), [K, d] = r.useState(
-      null
-    ), g = r.useRef(!1), k = r.useRef(!1), u = F || K, C = r.useCallback(() => {
-      n || o || y.current?.click();
-    }, [n, o]), m = r.useCallback(
-      (e) => {
-        d(null);
-        for (const i of e) {
-          if (i.size > l) {
-            d(
-              `File "${i.name}" exceeds the maximum size of ${U(l)}`
-            );
-            return;
-          }
-          if (a && !J(i, a)) {
-            d(
-              `File "${i.name}" is not an accepted file type`
-            );
-            return;
-          }
-        }
-        A(e);
-      },
-      [l, a, A]
-    ), $ = r.useCallback(
-      (e) => {
-        k.current = !0;
-        const i = e.target.files;
-        !i || i.length === 0 || (m(Array.from(i)), e.target.value = "");
-      },
-      [m]
-    ), P = r.useCallback(() => {
-      g.current = !0, k.current = !1;
-    }, []), z = r.useCallback(() => {
-      g.current && !k.current && a && d("File type is not accepted"), g.current = !1;
-    }, [a]), S = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), !n && !o && f(!0);
-      },
-      [n, o]
-    ), T = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), !n && !o && f(!0);
-      },
-      [n, o]
-    ), _ = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), f(!1);
-      },
-      []
-    ), V = r.useCallback(
-      (e) => {
-        if (e.preventDefault(), e.stopPropagation(), f(!1), n || o) return;
-        const i = e.dataTransfer.files;
-        !i || i.length === 0 || m(Array.from(i));
-      },
-      [n, o, m]
-    ), O = v ?? "Drop files here or click to browse", X = j ?? `Max file size: ${U(l)}`, D = r.useId();
-    return W ? /* @__PURE__ */ p("div", { ref: R, className: h("inline-flex flex-col", E), ...L, children: [
-      /* @__PURE__ */ p(
-        "button",
-        {
-          type: "button",
-          onClick: C,
-          disabled: n,
-          className: h(
-            "inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02",
-            "text-ds-sm font-medium",
-            "border border-surface-border-strong",
-            "bg-surface-raised-hover text-surface-fg-muted",
-            "hover:bg-accent-2",
-            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-            "transition-colors"
-          ),
-          children: [
-            o ? /* @__PURE__ */ t(B, { size: "sm" }) : /* @__PURE__ */ t(I, { icon: Z, size: "sm" }),
-            v ?? "Attach files"
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: y,
-          id: D,
-          type: "file",
-          className: "sr-only",
-          style: { visibility: "hidden" },
-          "aria-hidden": "true",
-          "aria-label": v ?? "Attach files",
-          accept: a,
-          multiple: s,
-          disabled: n,
-          onChange: $,
-          onClick: P,
-          onFocus: z,
-          tabIndex: -1
-        }
-      ),
-      u && /* @__PURE__ */ t(
-        "p",
-        {
-          role: "alert",
-          "aria-live": "polite",
-          className: "mt-ds-02 text-ds-xs text-error-11",
-          children: u
-        }
-      )
-    ] }) : /* @__PURE__ */ p(
-      "div",
-      {
-        ref: R,
-        ...L,
-        role: "presentation",
-        className: h("flex flex-col", E),
-        "data-drag-active": b ? "true" : void 0,
-        onDragEnter: S,
-        onDragOver: T,
-        onDragLeave: _,
-        onDrop: V,
-        children: [
-          /* @__PURE__ */ p(
-            c.div,
-            {
-              role: "button",
-              tabIndex: 0,
-              "aria-disabled": n || void 0,
-              onClick: n ? void 0 : C,
-              onKeyDown: (e) => {
-                !n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C());
-              },
-              className: h(
-                "flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg",
-                "border-2 border-dashed p-ds-08",
-                "cursor-pointer",
-                "border-surface-border-strong bg-surface-raised-hover",
-                b && "border-accent-7 bg-accent-2",
-                n && "opacity-action-disabled cursor-not-allowed"
-              ),
-              animate: {
-                scale: b ? 1.02 : 1
-              },
-              transition: w.snappy,
-              children: [
-                /* @__PURE__ */ t(M, { mode: "wait", children: o ? /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: { opacity: 1, scale: 1 },
-                    exit: { opacity: 0, scale: 0.5 },
-                    transition: N.fade,
-                    children: /* @__PURE__ */ t(B, { size: "md" })
-                  },
-                  "spinner"
-                ) : x === 100 && !F ? /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: { opacity: 1, scale: 1 },
-                    exit: { opacity: 0, scale: 0.5 },
-                    transition: w.bouncy,
-                    children: /* @__PURE__ */ t(I, { icon: q, size: "2xl", className: "text-success-11" })
-                  },
-                  "complete"
-                ) : /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0 },
-                    animate: { opacity: 1 },
-                    exit: { opacity: 0 },
-                    transition: N.fade,
-                    children: /* @__PURE__ */ t(I, { icon: G, size: "2xl", className: "text-surface-fg-subtle" })
-                  },
-                  "upload"
-                ) }),
-                /* @__PURE__ */ t("span", { id: D + "-label", className: "text-ds-sm text-surface-fg-muted", children: O }),
-                o ? /* @__PURE__ */ t("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ t(
-                  "div",
-                  {
-                    role: "progressbar",
-                    "aria-valuenow": x,
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 100,
-                    className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
-                    children: /* @__PURE__ */ t(
-                      c.div,
-                      {
-                        className: "h-full rounded-ds-full bg-accent-9",
-                        animate: { width: `${x}%` },
-                        transition: w.smooth
-                      }
-                    )
-                  }
-                ) }) : /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: X })
-              ]
-            }
-          ),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              ref: y,
-              id: D,
-              type: "file",
-              className: "sr-only",
-              style: { visibility: "hidden" },
-              "aria-hidden": "true",
-              "aria-label": O,
-              accept: a,
-              multiple: s,
-              disabled: n,
-              onChange: $,
-              onClick: P,
-              onFocus: z,
-              tabIndex: -1
-            }
-          ),
-          /* @__PURE__ */ t(M, { children: u && /* @__PURE__ */ t(
-            c.p,
-            {
-              role: "alert",
-              className: "mt-ds-02 text-ds-xs text-error-11",
-              initial: { opacity: 0, x: 0 },
-              animate: { opacity: 1, x: [0, -4, 4, -4, 4, 0] },
-              exit: { opacity: 0 },
-              transition: { opacity: N.fade, x: { type: "tween", duration: 0.4, ease: "easeOut" } },
-              children: u
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Q.displayName = "FileUpload";
-export {
-  Q as FileUpload
-};
+var g = s.forwardRef(({ accept: g, maxSize: _ = p, multiple: v = !1, uploading: y = !1, progress: b = 0, onFiles: x, error: S, compact: C = !1, disabled: w = !1, className: T, label: E, sublabel: D, ...O }, k) => {
+	let A = s.useRef(null), [j, M] = s.useState(!1), [N, P] = s.useState(null), F = s.useRef(!1), I = s.useRef(!1), L = S || N, R = s.useCallback(() => {
+		w || y || A.current?.click();
+	}, [w, y]), z = s.useCallback((e) => {
+		P(null);
+		for (let t of e) {
+			if (t.size > _) {
+				P(`File "${t.name}" exceeds the maximum size of ${h(_)}`);
+				return;
+			}
+			if (g && !m(t, g)) {
+				P(`File "${t.name}" is not an accepted file type`);
+				return;
+			}
+		}
+		x(e);
+	}, [
+		_,
+		g,
+		x
+	]), B = s.useCallback((e) => {
+		I.current = !0;
+		let t = e.target.files;
+		!t || t.length === 0 || (z(Array.from(t)), e.target.value = "");
+	}, [z]), V = s.useCallback(() => {
+		F.current = !0, I.current = !1;
+	}, []), H = s.useCallback(() => {
+		F.current && !I.current && g && P("File type is not accepted"), F.current = !1;
+	}, [g]), U = s.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), !w && !y && M(!0);
+	}, [w, y]), W = s.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), !w && !y && M(!0);
+	}, [w, y]), G = s.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), M(!1);
+	}, []), K = s.useCallback((e) => {
+		if (e.preventDefault(), e.stopPropagation(), M(!1), w || y) return;
+		let t = e.dataTransfer.files;
+		!t || t.length === 0 || z(Array.from(t));
+	}, [
+		w,
+		y,
+		z
+	]), q = E ?? "Drop files here or click to browse", J = D ?? `Max file size: ${h(_)}`, Y = s.useId();
+	return C ? /* @__PURE__ */ l("div", {
+		ref: k,
+		className: i("inline-flex flex-col", T),
+		...O,
+		children: [
+			/* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: R,
+				disabled: w,
+				className: i("inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+				children: [y ? /* @__PURE__ */ c(a, { size: "sm" }) : /* @__PURE__ */ c(o, {
+					icon: d,
+					size: "sm"
+				}), E ?? "Attach files"]
+			}),
+			/* @__PURE__ */ c("input", {
+				ref: A,
+				id: Y,
+				type: "file",
+				className: "sr-only",
+				style: { visibility: "hidden" },
+				"aria-hidden": "true",
+				"aria-label": E ?? "Attach files",
+				accept: g,
+				multiple: v,
+				disabled: w,
+				onChange: B,
+				onClick: V,
+				onFocus: H,
+				tabIndex: -1
+			}),
+			L && /* @__PURE__ */ c("p", {
+				role: "alert",
+				"aria-live": "polite",
+				className: "mt-ds-02 text-ds-xs text-error-11",
+				children: L
+			})
+		]
+	}) : /* @__PURE__ */ l("div", {
+		ref: k,
+		...O,
+		role: "presentation",
+		className: i("flex flex-col", T),
+		"data-drag-active": j ? "true" : void 0,
+		onDragEnter: U,
+		onDragOver: W,
+		onDragLeave: G,
+		onDrop: K,
+		children: [
+			/* @__PURE__ */ l(e.div, {
+				role: "button",
+				tabIndex: 0,
+				"aria-disabled": w || void 0,
+				onClick: w ? void 0 : R,
+				onKeyDown: (e) => {
+					!w && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), R());
+				},
+				className: i("flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", j && "border-accent-7 bg-accent-2", w && "opacity-action-disabled cursor-not-allowed"),
+				animate: { scale: j ? 1.02 : 1 },
+				transition: n.snappy,
+				children: [
+					/* @__PURE__ */ c(t, {
+						mode: "wait",
+						children: y ? /* @__PURE__ */ c(e.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							transition: r.fade,
+							children: /* @__PURE__ */ c(a, { size: "md" })
+						}, "spinner") : b === 100 && !S ? /* @__PURE__ */ c(e.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							transition: n.bouncy,
+							children: /* @__PURE__ */ c(o, {
+								icon: u,
+								size: "2xl",
+								className: "text-success-11"
+							})
+						}, "complete") : /* @__PURE__ */ c(e.div, {
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							exit: { opacity: 0 },
+							transition: r.fade,
+							children: /* @__PURE__ */ c(o, {
+								icon: f,
+								size: "2xl",
+								className: "text-surface-fg-subtle"
+							})
+						}, "upload")
+					}),
+					/* @__PURE__ */ c("span", {
+						id: Y + "-label",
+						className: "text-ds-sm text-surface-fg-muted",
+						children: q
+					}),
+					y ? /* @__PURE__ */ c("div", {
+						className: "w-full max-w-xs",
+						children: /* @__PURE__ */ c("div", {
+							role: "progressbar",
+							"aria-valuenow": b,
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
+							children: /* @__PURE__ */ c(e.div, {
+								className: "h-full rounded-ds-full bg-accent-9",
+								animate: { width: `${b}%` },
+								transition: n.smooth
+							})
+						})
+					}) : /* @__PURE__ */ c("span", {
+						className: "text-ds-xs text-surface-fg-subtle",
+						children: J
+					})
+				]
+			}),
+			/* @__PURE__ */ c("input", {
+				ref: A,
+				id: Y,
+				type: "file",
+				className: "sr-only",
+				style: { visibility: "hidden" },
+				"aria-hidden": "true",
+				"aria-label": q,
+				accept: g,
+				multiple: v,
+				disabled: w,
+				onChange: B,
+				onClick: V,
+				onFocus: H,
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ c(t, { children: L && /* @__PURE__ */ c(e.p, {
+				role: "alert",
+				className: "mt-ds-02 text-ds-xs text-error-11",
+				initial: {
+					opacity: 0,
+					x: 0
+				},
+				animate: {
+					opacity: 1,
+					x: [
+						0,
+						-4,
+						4,
+						-4,
+						4,
+						0
+					]
+				},
+				exit: { opacity: 0 },
+				transition: {
+					opacity: r.fade,
+					x: {
+						type: "tween",
+						duration: .4,
+						ease: "easeOut"
+					}
+				},
+				children: L
+			}) })
+		]
+	});
+});
+g.displayName = "FileUpload";
+//#endregion
+export { g as FileUpload };

package/dist/ui/form.js

@@ -1,58 +1,62 @@
 "use client";
-import { jsx as c } from "react/jsx-runtime";
-import * as e from "react";
-import { tweens as f, motionProps as u } from "./lib/motion.js";
-import { cn as d } from "./lib/utils.js";
-import { m as F } from "../_chunks/framer.js";
-const m = e.createContext({}), h = e.forwardRef(
-  ({ className: a, helperTextId: n, state: t = "helper", required: o, children: i, ...r }, s) => {
-    const l = e.useId(), p = n || `${l}-helper`, x = e.useMemo(
-      () => ({ state: t, helperTextId: p, required: o }),
-      [t, p, o]
-    );
-    return /* @__PURE__ */ c(m.Provider, { value: x, children: /* @__PURE__ */ c(
-      "div",
-      {
-        ref: s,
-        className: d("flex flex-col gap-ds-02", a),
-        ...r,
-        children: i
-      }
-    ) });
-  }
-);
-h.displayName = "FormField";
-const y = {
-  helper: "text-surface-fg-subtle",
-  error: "text-error-11",
-  warning: "text-warning-11",
-  success: "text-success-11"
-}, v = e.forwardRef(
-  ({ className: a, id: n, state: t, ...o }, i) => {
-    const r = e.useContext(m), s = t ?? r.state ?? "helper", l = n ?? r.helperTextId;
-    return /* @__PURE__ */ c(
-      F.p,
-      {
-        ref: i,
-        id: l,
-        role: s === "error" ? "alert" : void 0,
-        className: d("text-ds-sm", y[s], a),
-        initial: { opacity: 0, y: -4 },
-        animate: { opacity: 1, y: 0 },
-        exit: { opacity: 0, y: -4 },
-        transition: f.fade,
-        ...u(o)
-      }
-    );
-  }
-);
-v.displayName = "FormHelperText";
-function N() {
-  return e.useContext(m);
+import { a as e } from "../_chunks/framer.js";
+import { motionProps as t, tweens as n } from "./lib/motion.js";
+import { cn as r } from "./lib/utils.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/ui/form.tsx
+var o = i.createContext({}), s = i.forwardRef(({ className: e, helperTextId: t, state: n = "helper", required: s, children: c, ...l }, u) => {
+	let d = i.useId(), f = t || `${d}-helper`, p = i.useMemo(() => ({
+		state: n,
+		helperTextId: f,
+		required: s
+	}), [
+		n,
+		f,
+		s
+	]);
+	return /* @__PURE__ */ a(o.Provider, {
+		value: p,
+		children: /* @__PURE__ */ a("div", {
+			ref: u,
+			className: r("flex flex-col gap-ds-02", e),
+			...l,
+			children: c
+		})
+	});
+});
+s.displayName = "FormField";
+var c = {
+	helper: "text-surface-fg-subtle",
+	error: "text-error-11",
+	warning: "text-warning-11",
+	success: "text-success-11"
+}, l = i.forwardRef(({ className: s, id: l, state: u, ...d }, f) => {
+	let p = i.useContext(o), m = u ?? p.state ?? "helper", h = l ?? p.helperTextId;
+	return /* @__PURE__ */ a(e.p, {
+		ref: f,
+		id: h,
+		role: m === "error" ? "alert" : void 0,
+		className: r("text-ds-sm", c[m], s),
+		initial: {
+			opacity: 0,
+			y: -4
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -4
+		},
+		transition: n.fade,
+		...t(d)
+	});
+});
+l.displayName = "FormHelperText";
+function u() {
+	return i.useContext(o);
 }
-export {
-  h as FormField,
-  m as FormFieldContext,
-  v as FormHelperText,
-  N as useFormField
-};
+//#endregion
+export { s as FormField, o as FormFieldContext, l as FormHelperText, u as useFormField };