mada-design-system 0.9.0 → 1.0.0

package/index.es51.js

@@ -1,210 +1,309 @@
-import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
-import * as g from "react";
-import * as C from "recharts";
-import { cn as i } from "./index.es89.js";
-const I = { light: "", dark: ".dark" }, j = g.createContext(null);
-function $() {
-  const s = g.useContext(j);
-  if (!s)
-    throw new Error("useChart must be used within a <ChartContainer />");
-  return s;
-}
-const S = g.forwardRef(({ id: s, className: r, children: n, config: t, ...a }, f) => {
-  const l = g.useId(), c = `chart-${s || l.replace(/:/g, "")}`;
-  return /* @__PURE__ */ o(j.Provider, { value: { config: t }, children: /* @__PURE__ */ v(
-    "div",
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import W from "./index.es3.js";
+import { Button as E } from "./index.es27.js";
+import { useState as O, useId as X, useRef as Y, useEffect as ee, useCallback as c } from "react";
+import { strings as s } from "./index.es95.js";
+import { ShouldRender as I } from "./index.es19.js";
+import te from "./index.es154.js";
+import re from "./index.es155.js";
+import ae from "./index.es156.js";
+import se from "./index.es121.js";
+import { cn as m } from "./index.es94.js";
+const ie = {
+  "image/png": [".png"],
+  "image/jpeg": [".jpg", ".jpeg"],
+  "application/pdf": [".pdf"]
+};
+function le({ file: r, onRemove: a }) {
+  return /* @__PURE__ */ f(
+    "li",
     {
-      "data-chart": c,
-      ref: f,
-      className: i(
-        "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-        r
-      ),
-      ...a,
+      className: m("flex flex-col rounded border border-border-neutral-primary bg-background-neutral-100", {
+        "border-border-error": r.status === "error"
+      }),
       children: [
-        /* @__PURE__ */ o(E, { id: c, config: t }),
-        /* @__PURE__ */ o(C.ResponsiveContainer, { children: n })
+        /* @__PURE__ */ f("div", { className: "flex items-center justify-between truncate p-space-02", children: [
+          /* @__PURE__ */ f("div", { className: "flex gap-space-02", children: [
+            r.status === "uploading" && /* @__PURE__ */ t(W, {}),
+            r.status === "success" && /* @__PURE__ */ t(re, { className: "text-icon-success" }),
+            r.status === "error" && /* @__PURE__ */ t(ae, { className: "text-icon-error" }),
+            /* @__PURE__ */ t("span", { className: "text-body-01 font-medium text-text-default", children: r.file.name })
+          ] }),
+          /* @__PURE__ */ t(
+            E,
+            {
+              variant: "text",
+              size: "icon-xs",
+              rounded: "default",
+              colors: "neutral",
+              onClick: () => a(r.id),
+              "aria-label": `remove file ${r.file.name}`,
+              className: "mix-blend-multiply dark:mix-blend-normal",
+              children: /* @__PURE__ */ t(se, {})
+            }
+          )
+        ] }),
+        r.status === "error" && /* @__PURE__ */ t("div", { className: "border-t border-border-primary p-space-02", children: /* @__PURE__ */ t("span", { className: "text-caption-01 text-text-error", children: r.error }) })
       ]
     }
-  ) });
-});
-S.displayName = "Chart";
-const E = ({ id: s, config: r }) => {
-  const n = Object.entries(r).filter(
-    ([, t]) => t.theme || t.color
   );
-  return n.length ? /* @__PURE__ */ o(
-    "style",
+}
+function ne({ files: r, onRemove: a }) {
+  return /* @__PURE__ */ t("ul", { className: "space-y-space-01", children: r.map((o) => /* @__PURE__ */ t(le, { file: o, onRemove: a }, o.id)) });
+}
+function oe({
+  isDragging: r,
+  disabled: a,
+  acceptedExtensions: o,
+  maxSize: h,
+  onDragEnter: p,
+  onDragLeave: x,
+  onDragOver: g,
+  onDrop: F,
+  onSelectFiles: b,
+  browseLabel: j,
+  description: S
+}) {
+  return /* @__PURE__ */ t(
+    "div",
     {
-      dangerouslySetInnerHTML: {
-        __html: Object.entries(I).map(
-          ([t, a]) => `
-${a} [data-chart=${s}] {
-${n.map(([f, l]) => {
-            var h;
-            const c = ((h = l.theme) == null ? void 0 : h[t]) || l.color;
-            return c ? `  --color-${f}: ${c};` : null;
-          }).join(`
-`)}
+      role: "button",
+      className: m(
+        "group rounded border border-dashed bg-background-neutral-100 p-space-05 text-center hover:border-border-success hover:bg-background-success-25",
+        {
+          "border-border-success bg-background-success-25": r,
+          "pointer-events-none cursor-not-allowed border-border-disabled": a
+        }
+      ),
+      onDragEnter: p,
+      onDragLeave: x,
+      onDragOver: g,
+      onDrop: F,
+      children: /* @__PURE__ */ f("label", { htmlFor: "fileInput", className: "flex cursor-pointer flex-col items-center gap-space-05", children: [
+        /* @__PURE__ */ t(te, { className: m("size-space-05 text-icon-default group-hover:text-icon-success", { "text-disabled": a }) }),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            id: "dragDropLabel",
+            className: m("text-body-02 font-medium text-text-display group-hover:text-text-success", {
+              "text-disabled-text-default-disabled": a
+            }),
+            children: s.Attachments.dragFiles
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
+              "text-disabled-text-default-disabled": a
+            }),
+            children: S || `${s.formatString(s.Attachments.maxSize, h || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, o.join(", "))}`
+          }
+        ),
+        /* @__PURE__ */ t(
+          E,
+          {
+            variant: "text",
+            colors: "neutral",
+            size: "sm",
+            rounded: "default",
+            disabled: r || a,
+            onClick: b,
+            "aria-label": "browse files",
+            children: j ?? s.Attachments.browseFile
+          }
+        )
+      ] })
+    }
+  );
 }
-`
-        ).join(`
-`)
+function ye({
+  acceptedFormats: r = ie,
+  onFileSelect: a,
+  multiple: o,
+  disabled: h,
+  maxSize: p = 1,
+  maxFiles: x = 1 / 0,
+  customError: g,
+  isInvalid: F,
+  isRequired: b,
+  label: j,
+  browseLabel: S,
+  description: L,
+  value: v = [],
+  onChange: y
+}) {
+  const [i, N] = O({
+    validFiles: v,
+    invalidFiles: []
+  }), U = X(), [T, z] = O(!1), D = Y(null), A = i.validFiles.length >= x, C = Object.values(r).flat(), _ = C.join(",");
+  ee(() => {
+    v.length && N((e) => ({
+      validFiles: v,
+      invalidFiles: e.invalidFiles
+    }));
+  }, [v]);
+  const P = c(
+    (e) => e.size > p * 1024 * 1024 || !r[e.type] ? {
+      isValid: !1,
+      error: s.Attachments.error
+    } : { isValid: !0 },
+    [r, p]
+  ), k = c(
+    (e) => {
+      const u = [], l = [];
+      e.forEach((n) => {
+        const w = n.name.replaceAll(/[^a-zA-Z0-9\u0600-\u06FF ._-]/g, "_"), R = P(n);
+        if (!R.isValid) {
+          l.push({
+            id: `${n.name}-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+            file: new File([n], w, { type: n.type }),
+            progress: 0,
+            status: "error",
+            error: R.error
+          });
+          return;
+        }
+        u.push({
+          id: `${n.name}-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+          file: new File([n], w, { type: n.type }),
+          progress: 0,
+          status: a ? "uploading" : "success"
+        });
+      });
+      const d = [...i.validFiles, ...u];
+      N({
+        validFiles: d,
+        invalidFiles: [...i.invalidFiles, ...l]
+      }), y(d), a && u.length && a(u, (n, w, R = "uploading", Q) => {
+        const M = d.map(($) => $.id === n ? { ...$, progress: w, status: R, error: Q } : $);
+        N(($) => ({
+          validFiles: M,
+          invalidFiles: $.invalidFiles
+        })), y(M);
+      }), D.current && (D.current.value = "");
+    },
+    [i.validFiles, i.invalidFiles, y, P, a]
+  ), B = c((e) => {
+    e.preventDefault(), e.stopPropagation(), z(!0);
+  }, []), Z = c((e) => {
+    e.preventDefault(), e.stopPropagation(), z(!1);
+  }, []), q = c((e) => {
+    e.preventDefault(), e.stopPropagation();
+  }, []), G = c(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), z(!1), k(Array.from(e.dataTransfer.files));
+    },
+    [k]
+  ), H = c(
+    (e) => {
+      e.target.files && k(Array.from(e.target.files));
+    },
+    [k]
+  ), V = c(() => {
+    var e, u;
+    A || ((e = D.current) == null || e.click(), (u = D.current) == null || u.focus());
+  }, [A]), J = c(
+    (e) => {
+      if (i.invalidFiles.some((l) => l.id === e))
+        N((l) => ({
+          validFiles: l.validFiles,
+          invalidFiles: l.invalidFiles.filter((d) => d.id !== e)
+        }));
+      else {
+        const l = i.validFiles.filter((d) => d.id !== e);
+        N((d) => ({
+          validFiles: l,
+          invalidFiles: d.invalidFiles
+        })), y(l);
       }
-    }
-  ) : null;
-}, q = C.Tooltip, K = g.forwardRef(
-  ({
-    active: s,
-    payload: r,
-    className: n,
-    indicator: t = "dot",
-    hideLabel: a = !1,
-    hideIndicator: f = !1,
-    label: l,
-    labelFormatter: c,
-    labelClassName: h,
-    formatter: u,
-    color: L,
-    nameKey: R,
-    labelKey: _
-  }, T) => {
-    const { config: p } = $(), N = g.useMemo(() => {
-      var x;
-      if (a || !(r != null && r.length))
-        return null;
-      const [e] = r, w = `${_ || (e == null ? void 0 : e.dataKey) || (e == null ? void 0 : e.name) || "value"}`, m = k(p, e, w), d = !_ && typeof l == "string" ? ((x = p[l]) == null ? void 0 : x.label) || l : m == null ? void 0 : m.label;
-      return c ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: c(d, r) }) : d ? /* @__PURE__ */ o("div", { className: i("font-medium", h), children: d }) : null;
-    }, [
-      l,
-      c,
-      r,
-      a,
-      h,
-      p,
-      _
-    ]);
-    if (!s || !(r != null && r.length))
-      return null;
-    const b = r.length === 1 && t !== "dot";
-    return /* @__PURE__ */ v(
+    },
+    [i.validFiles, i.invalidFiles, y]
+  ), K = [...i.validFiles, ...i.invalidFiles];
+  return /* @__PURE__ */ f("div", { className: m("mx-auto flex w-full flex-col gap-space-02", { "rounded-1 border border-error p-space-02": F }), children: [
+    /* @__PURE__ */ t(I, { shouldRender: o, children: /* @__PURE__ */ t(
+      oe,
+      {
+        isDragging: T,
+        disabled: h || A,
+        acceptedExtensions: C,
+        onDragEnter: B,
+        onDragLeave: Z,
+        onDragOver: q,
+        onDrop: G,
+        onSelectFiles: V,
+        maxSize: p,
+        browseLabel: S,
+        description: L
+      }
+    ) }),
+    /* @__PURE__ */ t(I, { shouldRender: !o, children: /* @__PURE__ */ t(
+      de,
+      {
+        disabled: h || A,
+        acceptedExtensions: C,
+        onSelectFiles: V,
+        isSelectedFile: !!v.length || !!i.invalidFiles.length,
+        maxSize: p,
+        isRequired: b,
+        label: j,
+        browseLabel: S,
+        description: L
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "file",
+        accept: _,
+        ref: D,
+        onChange: H,
+        className: "hidden",
+        id: `fileInput-${U}`,
+        disabled: h || A,
+        "aria-describedby": "fileInputDescription"
+      }
+    ),
+    /* @__PURE__ */ t(ne, { files: K, onRemove: J }),
+    /* @__PURE__ */ t(I, { shouldRender: !v.length && !!g, children: /* @__PURE__ */ t("div", { className: "text-caption-01 text-text-error", children: g }) })
+  ] });
+}
+const de = ({
+  disabled: r,
+  acceptedExtensions: a,
+  isSelectedFile: o,
+  onSelectFiles: h,
+  maxSize: p,
+  isRequired: x,
+  label: g,
+  browseLabel: F,
+  description: b
+}) => /* @__PURE__ */ f("div", { className: "space-y-space-04", children: [
+  /* @__PURE__ */ f("div", { className: "space-y-space-02", children: [
+    /* @__PURE__ */ f(
       "div",
       {
-        ref: T,
-        className: i(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          n
-        ),
+        className: m("text-body-02 text-form-field-text-label", {
+          "text-disabled-text-default-disabled": r
+        }),
         children: [
-          b ? null : N,
-          /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: r.map((e, w) => {
-            const m = `${R || e.name || e.dataKey || "value"}`, d = k(p, e, m), x = L || e.payload.fill || e.color;
-            return /* @__PURE__ */ o(
-              "div",
-              {
-                className: i(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  t === "dot" && "items-center"
-                ),
-                children: u && (e == null ? void 0 : e.value) !== void 0 && e.name ? u(e.value, e.name, e, w, e.payload) : /* @__PURE__ */ v(P, { children: [
-                  d != null && d.icon ? /* @__PURE__ */ o(d.icon, {}) : !f && /* @__PURE__ */ o(
-                    "div",
-                    {
-                      className: i(
-                        "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                        {
-                          "h-2.5 w-2.5": t === "dot",
-                          "w-1": t === "line",
-                          "w-0 border-[1.5px] border-dashed bg-transparent": t === "dashed",
-                          "my-0.5": b && t === "dashed"
-                        }
-                      ),
-                      style: {
-                        "--color-bg": x,
-                        "--color-border": x
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ v(
-                    "div",
-                    {
-                      className: i(
-                        "flex flex-1 justify-between leading-none",
-                        b ? "items-end" : "items-center"
-                      ),
-                      children: [
-                        /* @__PURE__ */ v("div", { className: "grid gap-1.5", children: [
-                          b ? N : null,
-                          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: (d == null ? void 0 : d.label) || e.name })
-                        ] }),
-                        e.value && /* @__PURE__ */ o("span", { className: "font-mono font-medium tabular-nums text-foreground", children: e.value.toLocaleString() })
-                      ]
-                    }
-                  )
-                ] })
-              },
-              e.dataKey
-            );
-          }) })
+          g ?? s.Attachments.uploadFiles,
+          /* @__PURE__ */ t(I, { shouldRender: x, children: /* @__PURE__ */ t("span", { className: "ms-space-01 text-error", children: "*" }) })
         ]
       }
-    );
-  }
-);
-K.displayName = "ChartTooltip";
-const y = C.Legend, M = g.forwardRef(
-  ({ className: s, hideIcon: r = !1, payload: n, verticalAlign: t = "bottom", nameKey: a }, f) => {
-    const { config: l } = $();
-    return n != null && n.length ? /* @__PURE__ */ o(
-      "div",
+    ),
+    /* @__PURE__ */ t(
+      "p",
       {
-        ref: f,
-        className: i(
-          "flex items-center justify-center gap-4",
-          t === "top" ? "pb-3" : "pt-3",
-          s
-        ),
-        children: n.map((c) => {
-          const h = `${a || c.dataKey || "value"}`, u = k(l, c, h);
-          return /* @__PURE__ */ v(
-            "div",
-            {
-              className: i(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              ),
-              children: [
-                u != null && u.icon && !r ? /* @__PURE__ */ o(u.icon, {}) : /* @__PURE__ */ o(
-                  "div",
-                  {
-                    className: "h-2 w-2 shrink-0 rounded-[2px]",
-                    style: {
-                      backgroundColor: c.color
-                    }
-                  }
-                ),
-                u == null ? void 0 : u.label
-              ]
-            },
-            c.value
-          );
-        })
+        className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
+          "text-disabled-text-default-disabled": r
+        }),
+        children: b || `${s.formatString(s.Attachments.maxSize, p || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, a.join(", "))}`
       }
-    ) : null;
-  }
-);
-M.displayName = "ChartLegend";
-function k(s, r, n) {
-  if (typeof r != "object" || r === null)
-    return;
-  const t = "payload" in r && typeof r.payload == "object" && r.payload !== null ? r.payload : void 0;
-  let a = n;
-  return n in r && typeof r[n] == "string" ? a = r[n] : t && n in t && typeof t[n] == "string" && (a = t[n]), a in s ? s[a] : s[n];
-}
+    )
+  ] }),
+  /* @__PURE__ */ t(I, { shouldRender: !o, children: /* @__PURE__ */ t(E, { onClick: h, colors: "neutral", rounded: "default", type: "button", size: "sm", disabled: r, children: F ?? s.Attachments.browseFile }) })
+] });
 export {
-  S as ChartContainer,
-  y as ChartLegend,
-  M as ChartLegendContent,
-  E as ChartStyle,
-  q as ChartTooltip,
-  K as ChartTooltipContent
+  ye as FileUpload
 };