mada-design-system 0.2.7 → 0.3.0

package/index.es44.js

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