mada-design-system 0.5.10 → 0.5.12

package/index.es46.js

@@ -1,223 +1,309 @@
-import { jsxs as a, jsx as e, Fragment as H } from "react/jsx-runtime";
-import L, { createContext as _, useState as z, useCallback as k, useMemo as M, useContext as D } from "react";
-import { useMediaQuery as B } from "./index.es103.js";
-import { strings as y } from "./index.es97.js";
-import "./index.es2.js";
-import { Collapsible as G, CollapsibleTrigger as A, CollapsibleContent as T } from "./index.es26.js";
-import { Button as N } from "./index.es22.js";
-import $ from "./index.es139.js";
-import { RadioGroup as I, RadioGroupItem as P } from "./index.es61.js";
-import { MultiSelect as Q } from "./index.es10.js";
-import { ComboboxControlNoForm as V } from "./index.es7.js";
-import q from "./index.es140.js";
-import { Command as v, CommandInput as J, CommandList as K, CommandEmpty as U, CommandItem as W } from "./index.es27.js";
-import { Sheet as X, SheetTrigger as Y, SheetContent as Z, SheetHeader as ee, SheetTitle as te, SheetBody as re, SheetFooter as se, SheetClose as oe } from "./index.es66.js";
-import ie from "./index.es141.js";
-import { Checkbox as ce } from "./index.es25.js";
-import { Label as le } from "./index.es39.js";
-import ae from "./index.es89.js";
-import { cn as E } from "./index.es85.js";
-const O = _(null), R = () => {
-  const r = D(O);
-  if (!r)
-    throw new Error("useFilterContext must be used within a FilterGroup");
-  return r;
-}, ne = (r) => r < 10 ? "0" + (r == null ? void 0 : r.toString()) : r == null ? void 0 : r.toString(), de = ({ label: r, value: s, isCkecked: l, onChange: o, name: h, multi: m }) => /* @__PURE__ */ a("div", { className: "flex w-full items-center  gap-space-02 ", children: [
-  m ? /* @__PURE__ */ e(
-    ce,
-    {
-      id: `${h}${s}`,
-      value: s,
-      size: "sm",
-      onCheckedChange: (x) => o == null ? void 0 : o(typeof x == "boolean" ? x : !1, s),
-      checked: l
-    }
-  ) : /* @__PURE__ */ e(P, { id: `${h}${s}`, value: s.toString() }),
-  /* @__PURE__ */ e(le, { htmlFor: r, className: "text-Body-01 flex grow gap-space-02", children: r })
-] }), j = ({ data: r, name: s, multi: l }) => {
-  var t, f;
-  const { value: o, upsert: h } = R(), [m, x] = z(""), i = 5, w = (c) => {
-    var b;
-    const g = typeof (o == null ? void 0 : o[s]) == "object" && !!((b = o == null ? void 0 : o[s]) != null && b.find((d) => d === c.value));
-    return /* @__PURE__ */ e(W, { className: "py-space-01", children: /* @__PURE__ */ e(
-      de,
-      {
-        multi: l,
-        name: s,
-        label: c.label,
-        value: c.value,
-        isCkecked: g,
-        onChange: (d) => {
-          const p = [...(o == null ? void 0 : o[s]) ?? []];
-          if (d && p.push(c.value), !d) {
-            const S = p.indexOf(c.value);
-            p.splice(S, 1);
-          }
-          h({ name: s, selectedValue: p });
-        }
-      }
-    ) }, c.label);
-  }, n = r.filter((c) => c.label.toLowerCase().includes(m.toLowerCase()));
-  return /* @__PURE__ */ a(v, { shouldFilter: !1, className: "pt-space-03", children: [
-    r.length > 9 && /* @__PURE__ */ e(J, { placeholder: y.Shared.Search, value: m, onValueChange: x }),
-    /* @__PURE__ */ a(K, { className: "h-full max-h-max", children: [
-      /* @__PURE__ */ e(U, { children: y.Shared.noResultsFound }),
-      (t = n == null ? void 0 : n.slice(0, i)) == null ? void 0 : t.map(w),
-      (n == null ? void 0 : n.length) > i && /* @__PURE__ */ a(G, { children: [
-        /* @__PURE__ */ e(T, { children: (f = n == null ? void 0 : n.slice(i)) == null ? void 0 : f.map(w) }),
-        /* @__PURE__ */ a(A, { className: "flex w-full items-center   gap-space-01 py-space-01 pe-space-02 ps-space-03  text-body-01 text-primary", children: [
-          /* @__PURE__ */ e("span", { className: "group-data-[state=closed]:hidden", children: y.Shared.showLess }),
-          /* @__PURE__ */ e("span", { className: "group-data-[state=open]:hidden", children: y.Shared.showMore }),
-          /* @__PURE__ */ e($, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
-        ] })
-      ] })
-    ] })
-  ] });
-}, pe = ({
-  resetFilters: r,
-  children: s,
-  onClickFilter: l,
-  label: o,
-  filterButtonProps: h,
-  filterIcon: m
-}) => /* @__PURE__ */ a(X, { children: [
-  /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ a(
-    N,
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import Q from "./index.es3.js";
+import { Button as E } from "./index.es23.js";
+import { useState as O, useRef as W, useEffect as X, useCallback as c } from "react";
+import { strings as s } from "./index.es98.js";
+import { ShouldRender as k } from "./index.es15.js";
+import Y from "./index.es136.js";
+import ee from "./index.es137.js";
+import te from "./index.es138.js";
+import re from "./index.es108.js";
+import { cn as m } from "./index.es86.js";
+const ae = {
+  "image/png": [".png"],
+  "image/jpeg": [".jpg", ".jpeg"],
+  "application/pdf": [".pdf"]
+};
+function se({ file: r, onRemove: a }) {
+  return /* @__PURE__ */ f(
+    "li",
     {
-      id: "mobileFilter",
-      colors: "neutral",
-      className: E({
-        "!px-space-02": !o
+      className: m("flex flex-col rounded border border-border-neutral-primary bg-background-neutral-100", {
+        "border-border-error": r.status === "error"
       }),
-      ...h,
       children: [
-        m || /* @__PURE__ */ e(ie, {}),
-        o && /* @__PURE__ */ e("span", { children: o })
+        /* @__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__ */ 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(re, {})
+            }
+          )
+        ] }),
+        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 }) })
       ]
     }
-  ) }),
-  /* @__PURE__ */ a(Z, { side: "bottom", children: [
-    /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(te, { children: y.Shared.sortBy }) }),
-    /* @__PURE__ */ e(re, { className: "px-space-00 py-space-02", children: s }),
-    /* @__PURE__ */ a(se, { className: "flex-row gap-space-02 p-space-04", children: [
-      /* @__PURE__ */ e(N, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: r, className: "grow", children: y.Shared.reset }),
-      /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(N, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: l, className: "grow", children: y.Shared.showResults }) })
-    ] })
-  ] })
-] }), me = L.memo(
-  ({ multi: r, data: s, placeholder: l, disabled: o, isLoading: h, rounded: m, size: x, name: i, defaultOpen: w, renderItem: n }) => {
-    var b, d;
-    const { value: t, upsert: f } = R(), c = B("(max-width: 767px)"), { dir: g } = ae();
-    return c ? /* @__PURE__ */ a(G, { dir: g, defaultOpen: w, className: "border-b border-border-primary px-space-03 py-space-02", children: [
-      /* @__PURE__ */ a(A, { id: "subcategoriesCollapsible", className: " flex w-full items-center  justify-between py-space-01 ps-space-02 ", children: [
-        /* @__PURE__ */ e("span", { className: "text-body-01 font-semibold", children: l }),
-        /* @__PURE__ */ a("div", { className: "flex items-center  gap-space-01", children: [
-          typeof (t == null ? void 0 : t[i]) == "object" && !!((b = t == null ? void 0 : t[i]) != null && b.length) && /* @__PURE__ */ e("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: ne(((d = t == null ? void 0 : t[i]) == null ? void 0 : d.length) || 0) }),
-          typeof (t == null ? void 0 : t[i]) == "string" && !!(t != null && t[i]) && /* @__PURE__ */ e("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-inverted text-caption-01 text-inverted-foreground", children: "01" }),
-          /* @__PURE__ */ e(N, { variant: "text", type: "button", size: "icon-sm", colors: "gray", children: /* @__PURE__ */ e($, { className: " transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ e(T, { children: r ? /* @__PURE__ */ e(j, { data: s, name: i, multi: r }) : /* @__PURE__ */ e(
-        I,
+  );
+}
+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 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__ */ 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",
         {
-          name: i,
-          size: "sm",
-          dir: g,
-          value: typeof (t == null ? void 0 : t[i]) == "string" ? t == null ? void 0 : t[i] : void 0,
-          onValueChange: (p) => f({ name: i, selectedValue: p }),
-          children: /* @__PURE__ */ e(j, { data: s, name: i, multi: r })
+          "border-border-success bg-background-success-25": r,
+          "pointer-events-none cursor-not-allowed border-border-disabled": a
         }
-      ) })
-    ] }) : r ? /* @__PURE__ */ e(
-      Q,
+      ),
+      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": 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: y || `${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: v,
+            "aria-label": "browse files",
+            children: j ?? s.Attachments.browseFile
+          }
+        )
+      ] })
+    }
+  );
+}
+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 [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: s.Attachments.error
+    } : { isValid: !0 },
+    [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: a ? "uploading" : "success"
+        });
+      });
+      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));
+    },
+    [w]
+  ), G = c(
+    (e) => {
+      e.target.files && w(Array.from(e.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);
+      }
+    },
+    [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,
       {
-        options: s || [],
-        onChange: (p) => f({ name: i, selectedValue: p }),
-        selectedValues: (t == null ? void 0 : t[i]) || [],
-        dataTestId: "muliSelect",
-        placeholder: l,
-        disabled: o,
-        rounded: m,
-        size: x,
-        className: "!w-max"
+        isDragging: U,
+        disabled: h || $,
+        acceptedExtensions: C,
+        onDragEnter: _,
+        onDragLeave: B,
+        onDragOver: Z,
+        onDrop: q,
+        onSelectFiles: V,
+        maxSize: p,
+        browseLabel: y,
+        description: L
       }
-    ) : /* @__PURE__ */ e(
-      V,
+    ) }),
+    /* @__PURE__ */ t(k, { shouldRender: !o, children: /* @__PURE__ */ t(
+      ne,
       {
-        className: "!w-max",
-        rounded: m,
-        options: s || [],
-        optionLabel: "label",
-        optionValue: "value",
-        renderItem: n,
-        placeholder: l,
-        onChange: (p) => f({ name: i, selectedValue: p }),
-        value: (t == null ? void 0 : t[i]) || "",
-        size: x,
-        disabled: o,
-        isLoading: h
+        disabled: h || $,
+        acceptedExtensions: C,
+        onSelectFiles: V,
+        isSelectedFile: !!x.length || !!i.invalidFiles.length,
+        maxSize: p,
+        isRequired: v,
+        label: j,
+        browseLabel: y,
+        description: L
       }
-    );
-  }
-);
-me.displayName = "FilterSelect";
-const he = L.forwardRef(
-  ({ children: r, onValueChange: s, onValueReset: l, label: o, resetButtonProps: h, filterButtonProps: m, filterIcon: x, resetButtonLabel: i, className: w, ...n }, t) => {
-    const f = B("(max-width: 767px)"), [c, g] = z(), b = k(
-      ({ name: u, selectedValue: C }) => {
-        const F = { ...c, [u]: C };
-        g(F), f || s == null || s(F);
-      },
-      [c, f, s]
-    ), d = k(() => {
-      const u = { ...c };
-      for (const C in u)
-        u[C] = "";
-      g(u), l == null || l();
-    }, [c, l]), p = M(
-      () => ({
-        value: c,
-        upsert: b,
-        reset: d
-      }),
-      [c, b, d]
-    ), S = M(
-      () => c && Object.values(c).some((u) => Array.isArray(u) ? u.length > 0 : !!u),
-      [c]
-    );
-    return /* @__PURE__ */ e("div", { ref: t, className: E("flex", w), ...n, children: /* @__PURE__ */ e(O.Provider, { value: p, children: f ? /* @__PURE__ */ e(
-      pe,
+    ) }),
+    /* @__PURE__ */ t(
+      "input",
       {
-        filterButtonProps: m,
-        resetFilters: d,
-        onClickFilter: () => s == null ? void 0 : s(c),
-        label: o,
-        filterIcon: x,
-        children: r
+        type: "file",
+        accept: T,
+        ref: A,
+        onChange: G,
+        className: "hidden",
+        id: "fileInput",
+        disabled: h || $,
+        "aria-describedby": "fileInputDescription"
       }
-    ) : /* @__PURE__ */ a(H, { children: [
-      r,
-      S && /* @__PURE__ */ a(
-        N,
-        {
-          colors: "neutral",
-          rounded: "default",
-          variant: "text",
-          size: "sm",
-          onClick: d,
-          className: "ms-auto",
-          ...h,
-          children: [
-            i || y.Shared.reset,
-            /* @__PURE__ */ e(q, { className: "ms-space-01" })
-          ]
-        }
-      )
-    ] }) }) });
-  }
-);
-he.displayName = "FilterGroup";
+    ),
+    /* @__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 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": r
+        }),
+        children: [
+          g ?? s.Attachments.uploadFiles,
+          /* @__PURE__ */ t(k, { shouldRender: F, children: /* @__PURE__ */ t("span", { className: "ms-space-01 text-error", children: "*" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "p",
+      {
+        className: m("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
+          "text-disabled-text-default-disabled": r
+        }),
+        children: v || `${s.formatString(s.Attachments.maxSize, p || 0)}${s.Shared.comma} ${s.formatString(s.Attachments.allowedFormats, a.join(", "))}`
+      }
+    )
+  ] }),
+  /* @__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 {
-  he as FilterGroup,
-  me as FilterSelect
+  Fe as FileUpload
 };