mada-design-system 0.3.1 → 0.4.0

package/index.es44.js

@@ -1,287 +1,309 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import O from "./index.es3.js";
-import { Button as S } from "./index.es22.js";
-import { useState as V, useRef as $, useCallback as l, useReducer as M } from "react";
-import { strings as o } from "./index.es94.js";
-import { ShouldRender as F } from "./index.es14.js";
-import G from "./index.es139.js";
-import B from "./index.es140.js";
-import Z from "./index.es141.js";
-import q from "./index.es114.js";
-import { cn as m } from "./index.es82.js";
-const H = {
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import Q from "./index.es3.js";
+import { Button as E } from "./index.es22.js";
+import { useState as O, useRef as W, useEffect as X, useCallback as c } from "react";
+import { strings as s } from "./index.es96.js";
+import { ShouldRender as k } from "./index.es14.js";
+import Y from "./index.es133.js";
+import ee from "./index.es134.js";
+import te from "./index.es135.js";
+import re from "./index.es107.js";
+import { cn as m } from "./index.es84.js";
+const ae = {
   "image/png": [".png"],
   "image/jpeg": [".jpg", ".jpeg"],
   "application/pdf": [".pdf"]
 };
-function J(e, t) {
-  switch (t.type) {
-    case "ADD_FILES":
-      return [...e, ...t.payload];
-    case "UPDATE_PROGRESS":
-      return e.map(
-        (s) => s.id === t.payload.id ? {
-          ...s,
-          progress: t.payload.progress,
-          status: t.payload.progress >= 100 ? "success" : "uploading"
-        } : s
-      );
-    case "UPDATE_STATUS":
-      return e.map((s) => s.id === t.payload.id ? { ...s, status: t.payload.status, error: t.payload.error } : s);
-    case "REMOVE_FILE":
-      return e.filter((s) => s.id !== t.payload);
-    default:
-      return e;
-  }
-}
-function K() {
-  const [e, t] = M(J, []), s = l((n) => {
-    t({ type: "ADD_FILES", payload: n });
-  }, []), c = l((n, d) => {
-    t({ type: "UPDATE_PROGRESS", payload: { id: n, progress: d } });
-  }, []), i = l((n, d, f) => {
-    t({ type: "UPDATE_STATUS", payload: { id: n, status: d, error: f } });
-  }, []), g = l((n) => {
-    t({ type: "REMOVE_FILE", payload: n });
-  }, []);
-  return {
-    files: e,
-    addFiles: s,
-    updateProgress: c,
-    updateStatus: i,
-    removeFile: g
-  };
-}
-function Q({ file: e, onRemove: t }) {
-  return /* @__PURE__ */ u(
+function se({ file: r, onRemove: a }) {
+  return /* @__PURE__ */ f(
     "li",
     {
       className: m("flex flex-col rounded border border-border-neutral-primary bg-background-neutral-100", {
-        "border-border-error": e.status === "error"
+        "border-border-error": r.status === "error"
       }),
       children: [
-        /* @__PURE__ */ u("div", { className: "flex items-center justify-between truncate p-space-02", children: [
-          /* @__PURE__ */ u("div", { className: "flex gap-space-02", children: [
-            e.status === "uploading" && /* @__PURE__ */ r(O, {}),
-            e.status === "success" && /* @__PURE__ */ r(B, { className: "text-icon-success" }),
-            e.status === "error" && /* @__PURE__ */ r(Z, { className: "text-icon-error" }),
-            /* @__PURE__ */ r("span", { className: "text-body-01 font-medium text-text-default", children: e.file.name })
+        /* @__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(Q, {}),
+            r.status === "success" && /* @__PURE__ */ t(ee, { className: "text-icon-success" }),
+            r.status === "error" && /* @__PURE__ */ t(te, { className: "text-icon-error" }),
+            /* @__PURE__ */ t("span", { className: "text-body-01 font-medium text-text-default", children: r.file.name })
           ] }),
-          /* @__PURE__ */ r(
-            S,
+          /* @__PURE__ */ t(
+            E,
             {
               variant: "text",
               size: "icon-xs",
               rounded: "default",
               colors: "neutral",
-              onClick: () => t(e.id),
-              "aria-label": `remove file ${e.file.name}`,
+              onClick: () => a(r.id),
+              "aria-label": `remove file ${r.file.name}`,
               className: "mix-blend-multiply dark:mix-blend-normal",
-              children: /* @__PURE__ */ r(q, {})
+              children: /* @__PURE__ */ t(re, {})
             }
           )
         ] }),
-        e.status === "error" && /* @__PURE__ */ r("div", { className: "border-t border-border-primary p-space-02", children: /* @__PURE__ */ r("span", { className: "text-caption-01 text-text-error", children: e.error }) })
+        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 }) })
       ]
     }
   );
 }
-function W({ files: e, onRemove: t }) {
-  return /* @__PURE__ */ r("ul", { className: "space-y-space-01", children: e.map((s) => /* @__PURE__ */ r(Q, { file: s, onRemove: t }, s.id)) });
+function ie({ files: r, onRemove: a }) {
+  return /* @__PURE__ */ t("ul", { className: "space-y-space-01", children: r.map((o) => /* @__PURE__ */ t(se, { file: o, onRemove: a }, o.id)) });
 }
-function X({
-  isDragging: e,
-  disabled: t,
-  acceptedExtensions: s,
-  maxSize: c,
-  onDragEnter: i,
-  onDragLeave: g,
-  onDragOver: n,
-  onDrop: d,
-  onSelectFiles: f
+function le({
+  isDragging: r,
+  disabled: a,
+  acceptedExtensions: o,
+  maxSize: h,
+  onDragEnter: p,
+  onDragLeave: F,
+  onDragOver: g,
+  onDrop: b,
+  onSelectFiles: v,
+  browseLabel: j,
+  description: y
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "div",
     {
       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": e,
-          "pointer-events-none cursor-not-allowed border-border-disabled": t
+          "border-border-success bg-background-success-25": r,
+          "pointer-events-none cursor-not-allowed border-border-disabled": a
         }
       ),
-      onDragEnter: i,
-      onDragLeave: g,
-      onDragOver: n,
-      onDrop: d,
-      children: /* @__PURE__ */ u("label", { htmlFor: "fileInput", className: "flex cursor-pointer flex-col items-center gap-space-05", children: [
-        /* @__PURE__ */ r(G, { className: m("size-space-05 text-icon-default group-hover:text-icon-success", { "text-disabled": t }) }),
-        /* @__PURE__ */ r(
+      onDragEnter: p,
+      onDragLeave: F,
+      onDragOver: g,
+      onDrop: b,
+      children: /* @__PURE__ */ f("label", { htmlFor: "fileInput", className: "flex cursor-pointer flex-col items-center gap-space-05", children: [
+        /* @__PURE__ */ t(Y, { 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": t
+              "text-disabled-text-default-disabled": a
             }),
-            children: o.Attachments.dragFiles
+            children: s.Attachments.dragFiles
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ t(
           "span",
           {
             className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
-              "text-disabled-text-default-disabled": t
+              "text-disabled-text-default-disabled": a
             }),
-            children: [
-              o.formatString(o.Attachments.maxSize, c),
-              o.Shared.comma,
-              " ",
-              o.formatString(o.Attachments.allowedFormats, s.join(", "))
-            ]
+            children: y || `${s.formatString(s.Attachments.maxSize, h || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, o.join(", "))}`
           }
         ),
-        /* @__PURE__ */ r(
-          S,
+        /* @__PURE__ */ t(
+          E,
           {
             variant: "text",
             colors: "neutral",
             size: "sm",
             rounded: "default",
-            disabled: e || t,
-            onClick: f,
+            disabled: r || a,
+            onClick: v,
             "aria-label": "browse files",
-            children: o.Attachments.browseFile
+            children: j ?? s.Attachments.browseFile
           }
         )
       ] })
     }
   );
 }
-function pe({
-  acceptedFormats: e = H,
-  onFileSelect: t,
-  multiple: s,
-  disabled: c,
-  maxSize: i = 1,
-  maxFiles: g = 1 / 0,
-  customError: n
+function Fe({
+  acceptedFormats: r = ae,
+  onFileSelect: a,
+  multiple: o,
+  disabled: h,
+  maxSize: p = 1,
+  maxFiles: F = 1 / 0,
+  customError: g,
+  isInvalid: b,
+  isRequired: v,
+  label: j,
+  browseLabel: y,
+  description: L,
+  value: x = [],
+  onChange: N
 }) {
-  const { files: d, addFiles: f, removeFile: I, updateProgress: R, updateStatus: E } = K(), [P, D] = V(!1), x = $(null), b = d.length >= g, A = Object.values(e).flat(), k = A.join(","), N = l(
-    (a) => a.size > i * 1024 * 1024 || !e[a.type] ? {
+  const [i, D] = O({
+    validFiles: x,
+    invalidFiles: []
+  }), [U, z] = O(!1), A = W(null), $ = i.validFiles.length >= F, C = Object.values(r).flat(), T = C.join(",");
+  X(() => {
+    x.length && D((e) => ({
+      validFiles: x,
+      invalidFiles: e.invalidFiles
+    }));
+  }, [x]);
+  const P = c(
+    (e) => e.size > p * 1024 * 1024 || !r[e.type] ? {
       isValid: !1,
-      error: o.Attachments.error
+      error: s.Attachments.error
     } : { isValid: !0 },
-    [e, i]
-  ), v = l(
-    (a) => {
-      const h = a.map((p) => {
-        const y = p.name.replace(/[^a-zA-Z0-9\u0600-\u06FF ._-]/g, "_"), z = new File([p], y, { type: p.type });
-        return {
-          id: `${p.name}-${Date.now()}-${window.crypto.getRandomValues(new Uint32Array(1))[0].toString(36).substring(2, 9)}`,
-          file: z,
+    [r, p]
+  ), w = c(
+    (e) => {
+      const u = [], l = [];
+      e.forEach((n) => {
+        const I = n.name.replace(/[^a-zA-Z0-9\u0600-\u06FF ._-]/g, "_"), R = P(n);
+        if (!R.isValid) {
+          l.push({
+            id: `${n.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            file: new File([n], I, { type: n.type }),
+            progress: 0,
+            status: "error",
+            error: R.error
+          });
+          return;
+        }
+        u.push({
+          id: `${n.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          file: new File([n], I, { type: n.type }),
           progress: 0,
-          status: "uploading"
-        };
+          status: a ? "uploading" : "success"
+        });
       });
-      f(h), h.forEach((p) => {
-        const y = N(p.file);
-        y.isValid || E(p.id, "error", y.error);
-      });
-      const C = h.filter((p) => N(p.file).isValid);
-      t && t(C, R), x.current && (x.current.value = "");
+      const d = [...i.validFiles, ...u];
+      D({
+        validFiles: d,
+        invalidFiles: [...i.invalidFiles, ...l]
+      }), N(d), a && u.length && a(u, (n, I, R = "uploading", K) => {
+        const M = d.map((S) => S.id === n ? { ...S, progress: I, status: R, error: K } : S);
+        D((S) => ({
+          validFiles: M,
+          invalidFiles: S.invalidFiles
+        })), N(M);
+      }), A.current && (A.current.value = "");
+    },
+    [i.validFiles, i.invalidFiles, N, P, a]
+  ), _ = c((e) => {
+    e.preventDefault(), e.stopPropagation(), z(!0);
+  }, []), B = c((e) => {
+    e.preventDefault(), e.stopPropagation(), z(!1);
+  }, []), Z = c((e) => {
+    e.preventDefault(), e.stopPropagation();
+  }, []), q = c(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), z(!1), w(Array.from(e.dataTransfer.files));
     },
-    [f, t, R, E, N]
-  ), U = l((a) => {
-    a.preventDefault(), a.stopPropagation(), D(!0);
-  }, []), j = l((a) => {
-    a.preventDefault(), a.stopPropagation(), D(!1);
-  }, []), _ = l((a) => {
-    a.preventDefault(), a.stopPropagation();
-  }, []), L = l(
-    (a) => {
-      a.preventDefault(), a.stopPropagation(), D(!1), v(Array.from(a.dataTransfer.files));
+    [w]
+  ), G = c(
+    (e) => {
+      e.target.files && w(Array.from(e.target.files));
     },
-    [v]
-  ), T = l(
-    (a) => {
-      a.target.files && v(Array.from(a.target.files));
+    [w]
+  ), V = c(() => {
+    var e, u;
+    $ || ((e = A.current) == null || e.click(), (u = A.current) == null || u.focus());
+  }, [$]), H = c(
+    (e) => {
+      if (i.invalidFiles.some((l) => l.id === e))
+        D((l) => ({
+          validFiles: l.validFiles,
+          invalidFiles: l.invalidFiles.filter((d) => d.id !== e)
+        }));
+      else {
+        const l = i.validFiles.filter((d) => d.id !== e);
+        D((d) => ({
+          validFiles: l,
+          invalidFiles: d.invalidFiles
+        })), N(l);
+      }
     },
-    [v]
-  ), w = l(() => {
-    var a, h;
-    b || ((a = x.current) == null || a.click(), (h = x.current) == null || h.focus());
-  }, [b]);
-  return /* @__PURE__ */ u("div", { className: "mx-auto flex w-full flex-col gap-space-02", children: [
-    /* @__PURE__ */ r(F, { shouldRender: s, children: /* @__PURE__ */ r(
-      X,
+    [i.validFiles, i.invalidFiles, N]
+  ), J = [...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": b }), children: [
+    /* @__PURE__ */ t(k, { shouldRender: o, children: /* @__PURE__ */ t(
+      le,
       {
-        isDragging: P,
-        disabled: c || b,
-        acceptedExtensions: A,
-        onDragEnter: U,
-        onDragLeave: j,
-        onDragOver: _,
-        onDrop: L,
-        onSelectFiles: w,
-        maxSize: i
+        isDragging: U,
+        disabled: h || $,
+        acceptedExtensions: C,
+        onDragEnter: _,
+        onDragLeave: B,
+        onDragOver: Z,
+        onDrop: q,
+        onSelectFiles: V,
+        maxSize: p,
+        browseLabel: y,
+        description: L
       }
     ) }),
-    /* @__PURE__ */ r(F, { shouldRender: !s, children: /* @__PURE__ */ r(
-      Y,
+    /* @__PURE__ */ t(k, { shouldRender: !o, children: /* @__PURE__ */ t(
+      ne,
       {
-        disabled: c || b,
-        acceptedExtensions: A,
-        onSelectFiles: w,
-        isSelectedFile: !!d.length,
-        maxSize: i
+        disabled: h || $,
+        acceptedExtensions: C,
+        onSelectFiles: V,
+        isSelectedFile: !!x.length || !!i.invalidFiles.length,
+        maxSize: p,
+        isRequired: v,
+        label: j,
+        browseLabel: y,
+        description: L
       }
     ) }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "input",
       {
         type: "file",
-        accept: k,
-        ref: x,
-        onChange: T,
+        accept: T,
+        ref: A,
+        onChange: G,
         className: "hidden",
         id: "fileInput",
-        disabled: c || b,
+        disabled: h || $,
         "aria-describedby": "fileInputDescription"
       }
     ),
-    /* @__PURE__ */ r(W, { files: d, onRemove: I }),
-    /* @__PURE__ */ r(F, { shouldRender: !d.length && !!n, children: /* @__PURE__ */ r("div", { className: "text-caption-01 text-text-error", children: n }) })
+    /* @__PURE__ */ t(ie, { files: J, onRemove: H }),
+    /* @__PURE__ */ t(k, { shouldRender: !x.length && !!g, children: /* @__PURE__ */ t("div", { className: "text-caption-01 text-text-error", children: g }) })
   ] });
 }
-const Y = ({ disabled: e, acceptedExtensions: t, isSelectedFile: s, onSelectFiles: c, maxSize: i }) => /* @__PURE__ */ u("div", { className: "space-y-space-04", children: [
-  /* @__PURE__ */ u("div", { className: "space-y-space-02", children: [
-    /* @__PURE__ */ r(
-      "p",
+const ne = ({
+  disabled: r,
+  acceptedExtensions: a,
+  isSelectedFile: o,
+  onSelectFiles: h,
+  maxSize: p,
+  isRequired: F,
+  label: g,
+  browseLabel: b,
+  description: v
+}) => /* @__PURE__ */ f("div", { className: "space-y-space-04", children: [
+  /* @__PURE__ */ f("div", { className: "space-y-space-02", children: [
+    /* @__PURE__ */ f(
+      "div",
       {
         className: m("text-body-02 text-form-field-text-label", {
-          "text-disabled-text-default-disabled": e
+          "text-disabled-text-default-disabled": r
         }),
-        children: o.Attachments.uploadFiles
+        children: [
+          g ?? s.Attachments.uploadFiles,
+          /* @__PURE__ */ t(k, { shouldRender: F, children: /* @__PURE__ */ t("span", { className: "ms-space-01 text-error", children: "*" }) })
+        ]
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ t(
       "p",
       {
         className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
-          "text-disabled-text-default-disabled": e
+          "text-disabled-text-default-disabled": r
         }),
-        children: [
-          o.formatString(o.Attachments.maxSize, i),
-          o.Shared.comma,
-          " ",
-          o.formatString(o.Attachments.allowedFormats, t.join(", "))
-        ]
+        children: v || `${s.formatString(s.Attachments.maxSize, p || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, a.join(", "))}`
       }
     )
   ] }),
-  /* @__PURE__ */ r(F, { shouldRender: !s, children: /* @__PURE__ */ r(S, { onClick: c, colors: "neutral", rounded: "default", type: "button", size: "sm", disabled: e, children: o.Attachments.browseFile }) })
+  /* @__PURE__ */ t(k, { shouldRender: !o, children: /* @__PURE__ */ t(E, { onClick: h, colors: "neutral", rounded: "default", type: "button", size: "sm", disabled: r, children: b ?? s.Attachments.browseFile }) })
 ] });
 export {
-  pe as FileUpload
+  Fe as FileUpload
 };