mada-design-system 0.0.9 → 0.0.11

package/index.es43.js

@@ -1,25 +1,281 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
-import * as s from "react";
-import { cn as n } from "./index.es69.js";
-const f = o.Root, c = o.Trigger, v = o.Arrow, g = o.Close, m = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  o.Content,
-  {
-    ref: i,
-    align: a,
-    sideOffset: r,
-    className: n(
-      "z-50 rounded-2 border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      e
-    ),
-    ...d
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import C from "./index.es3.js";
+import { Button as N } from "./index.es22.js";
+import { useState as O, useRef as V, useCallback as l, useReducer as M } from "react";
+import { strings as o } from "./index.es88.js";
+import { ShouldRender as S } from "./index.es14.js";
+import $ from "./index.es131.js";
+import G from "./index.es132.js";
+import B from "./index.es133.js";
+import Z from "./index.es105.js";
+import { cn as u } from "./index.es76.js";
+const q = {
+  "image/png": [".png"],
+  "image/jpeg": [".jpg", ".jpeg"],
+  "application/pdf": [".pdf"]
+};
+function H(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;
   }
-) }));
-m.displayName = o.Content.displayName;
+}
+function J() {
+  const [e, t] = M(H, []), s = l((n) => {
+    t({ type: "ADD_FILES", payload: n });
+  }, []), i = l((n, p) => {
+    t({ type: "UPDATE_PROGRESS", payload: { id: n, progress: p } });
+  }, []), m = l((n, p, v) => {
+    t({ type: "UPDATE_STATUS", payload: { id: n, status: p, error: v } });
+  }, []), h = l((n) => {
+    t({ type: "REMOVE_FILE", payload: n });
+  }, []);
+  return {
+    files: e,
+    addFiles: s,
+    updateProgress: i,
+    updateStatus: m,
+    removeFile: h
+  };
+}
+function K({ file: e, onRemove: t }) {
+  return /* @__PURE__ */ c(
+    "li",
+    {
+      className: u("flex flex-col rounded border border-border-neutral-primary bg-background-neutral-100", {
+        "border-border-error": e.status === "error"
+      }),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-space-02", children: [
+          /* @__PURE__ */ c("div", { className: "flex gap-space-02", children: [
+            e.status === "uploading" && /* @__PURE__ */ a(C, {}),
+            e.status === "success" && /* @__PURE__ */ a(G, { className: "text-icon-success" }),
+            e.status === "error" && /* @__PURE__ */ a(B, { className: "text-icon-error" }),
+            /* @__PURE__ */ a("span", { className: "truncate text-body-01 font-medium text-text-default", children: e.file.name })
+          ] }),
+          /* @__PURE__ */ a(
+            N,
+            {
+              variant: "text",
+              size: "icon-xs",
+              rounded: "default",
+              colors: "neutral",
+              onClick: () => t(e.id),
+              "aria-label": `remove file ${e.file.name}`,
+              className: "mix-blend-multiply",
+              children: /* @__PURE__ */ a(Z, {})
+            }
+          )
+        ] }),
+        e.status === "error" && /* @__PURE__ */ a("div", { className: "border-t border-border-primary p-space-02", children: /* @__PURE__ */ a("span", { className: "text-caption-01 text-text-error", children: e.error }) })
+      ]
+    }
+  );
+}
+function Q({ files: e, onRemove: t }) {
+  return /* @__PURE__ */ a("ul", { className: "space-y-space-01", children: e.map((s) => /* @__PURE__ */ a(K, { file: s, onRemove: t }, s.id)) });
+}
+function W({
+  isDragging: e,
+  disabled: t,
+  acceptedExtensions: s,
+  onDragEnter: i,
+  onDragLeave: m,
+  onDragOver: h,
+  onDrop: n,
+  onSelectFiles: p
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: u(
+        "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
+        }
+      ),
+      onDragEnter: i,
+      onDragLeave: m,
+      onDragOver: h,
+      onDrop: n,
+      children: /* @__PURE__ */ c("label", { htmlFor: "fileInput", className: "flex cursor-pointer flex-col items-center gap-space-05", children: [
+        /* @__PURE__ */ a($, { className: u("size-space-05 text-icon-default group-hover:text-icon-success", { "text-disabled": t }) }),
+        /* @__PURE__ */ a(
+          "span",
+          {
+            id: "dragDropLabel",
+            className: u("text-body-02 font-medium text-text-display group-hover:text-text-success", {
+              "text-disabled-text-default-disabled": t
+            }),
+            children: o.Attachments.dragFiles
+          }
+        ),
+        /* @__PURE__ */ c(
+          "span",
+          {
+            className: u("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
+              "text-disabled-text-default-disabled": t
+            }),
+            children: [
+              o.formatString(o.Attachments.maxSize, 5),
+              o.Shared.comma,
+              " ",
+              o.formatString(o.Attachments.allowedFormats, s.join(", "))
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          N,
+          {
+            variant: "text",
+            colors: "neutral",
+            size: "sm",
+            rounded: "default",
+            disabled: e || t,
+            onClick: p,
+            "aria-label": "browse files",
+            children: o.Attachments.browseFile
+          }
+        )
+      ] })
+    }
+  );
+}
+function ce({
+  acceptedFormats: e = q,
+  onFileSelect: t,
+  multiple: s,
+  disabled: i,
+  maxSize: m = 1,
+  maxFiles: h = 1 / 0
+}) {
+  const { files: n, addFiles: p, removeFile: v, updateProgress: E, updateStatus: R } = J(), [w, F] = O(!1), g = V(null), x = n.length >= h, D = Object.values(e).flat(), P = D.join(","), A = l(
+    (r) => r.size > m * 1024 * 1024 || !e[r.type] ? {
+      isValid: !1,
+      error: o.Attachments.error
+    } : { isValid: !0 },
+    [e, m]
+  ), y = l(
+    (r) => {
+      const f = r.map((d) => {
+        const b = d.name.replace(/[^a-zA-Z0-9_.-]/g, "_"), T = new File([d], b, { type: d.type });
+        return {
+          id: `${d.name}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          file: T,
+          progress: 0,
+          status: "uploading"
+        };
+      });
+      p(f), f.forEach((d) => {
+        const b = A(d.file);
+        b.isValid || R(d.id, "error", b.error);
+      });
+      const L = f.filter((d) => A(d.file).isValid);
+      t && t(L, E), g.current && (g.current.value = "");
+    },
+    [p, t, E, R, A]
+  ), j = l((r) => {
+    r.preventDefault(), r.stopPropagation(), F(!0);
+  }, []), k = l((r) => {
+    r.preventDefault(), r.stopPropagation(), F(!1);
+  }, []), U = l((r) => {
+    r.preventDefault(), r.stopPropagation();
+  }, []), _ = l(
+    (r) => {
+      r.preventDefault(), r.stopPropagation(), F(!1), y(Array.from(r.dataTransfer.files));
+    },
+    [y]
+  ), z = l(
+    (r) => {
+      r.target.files && y(Array.from(r.target.files));
+    },
+    [y]
+  ), I = l(() => {
+    var r, f;
+    x || ((r = g.current) == null || r.click(), (f = g.current) == null || f.focus());
+  }, [x]);
+  return /* @__PURE__ */ c("div", { className: "mx-auto flex w-full flex-col gap-space-02", children: [
+    /* @__PURE__ */ a(S, { shouldRender: s, children: /* @__PURE__ */ a(
+      W,
+      {
+        isDragging: w,
+        disabled: i || x,
+        acceptedExtensions: D,
+        onDragEnter: j,
+        onDragLeave: k,
+        onDragOver: U,
+        onDrop: _,
+        onSelectFiles: I
+      }
+    ) }),
+    /* @__PURE__ */ a(S, { shouldRender: !s, children: /* @__PURE__ */ a(
+      X,
+      {
+        disabled: i || x,
+        acceptedExtensions: D,
+        onSelectFiles: I,
+        isSelectedFile: !!n.length
+      }
+    ) }),
+    /* @__PURE__ */ a(
+      "input",
+      {
+        type: "file",
+        accept: P,
+        ref: g,
+        onChange: z,
+        className: "hidden",
+        id: "fileInput",
+        disabled: i || x,
+        "aria-describedby": "fileInputDescription"
+      }
+    ),
+    /* @__PURE__ */ a(Q, { files: n, onRemove: v })
+  ] });
+}
+const X = ({ disabled: e, acceptedExtensions: t, isSelectedFile: s, onSelectFiles: i }) => /* @__PURE__ */ c("div", { className: "space-y-space-04", children: [
+  /* @__PURE__ */ c("div", { className: "space-y-space-02", children: [
+    /* @__PURE__ */ a(
+      "p",
+      {
+        className: u("text-body-02 text-form-field-text-label", {
+          "text-disabled-text-default-disabled": e
+        }),
+        children: o.Attachments.uploadFiles
+      }
+    ),
+    /* @__PURE__ */ c(
+      "p",
+      {
+        className: u("text-caption-01 text-text-paragraph-primary group-hover:text-text-success", {
+          "text-disabled-text-default-disabled": e
+        }),
+        children: [
+          o.formatString(o.Attachments.maxSize, 5),
+          o.Shared.comma,
+          " ",
+          o.formatString(o.Attachments.allowedFormats, t.join(", "))
+        ]
+      }
+    )
+  ] }),
+  /* @__PURE__ */ a(S, { shouldRender: !s, children: /* @__PURE__ */ a(N, { onClick: i, colors: "neutral", rounded: "default", size: "sm", disabled: e, children: o.Attachments.browseFile }) })
+] });
 export {
-  f as Popover,
-  v as PopoverArrow,
-  g as PopoverClose,
-  m as PopoverContent,
-  c as PopoverTrigger
+  ce as FileUpload
 };

package/index.es44.js

@@ -1,39 +1,175 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-progress";
-import * as n from "react";
-import { cn as s } from "./index.es69.js";
-const c = n.forwardRef(
-  ({ className: d, value: a, colors: m = "bg-primary", rounded: r, icon: i, ...l }, o) => /* @__PURE__ */ f("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ t(
-      e.Root,
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import b, { useState as L } from "react";
+import { useMediaQuery as N } from "./index.es100.js";
+import { strings as m } from "./index.es88.js";
+import "./index.es2.js";
+import { ShouldRender as h } from "./index.es14.js";
+import { Button as f } from "./index.es22.js";
+import z from "./index.es134.js";
+import { Collapsible as H, CollapsibleTrigger as O, CollapsibleContent as _ } from "./index.es26.js";
+import A from "./index.es135.js";
+import { RadioGroup as D, RadioGroupItem as E } from "./index.es52.js";
+import { MultiSelect as P } from "./index.es10.js";
+import { ComboboxControlNoForm as Q } from "./index.es7.js";
+import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es57.js";
+import ee from "./index.es136.js";
+import { Checkbox as re } from "./index.es25.js";
+import le from "./index.es80.js";
+import { cn as se } from "./index.es76.js";
+const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), $ = b.createContext(null), oe = (l) => {
+  const [s, d] = L(), a = N("(max-width: 767px)");
+  return { value: s, upsert: ({ name: o, selectedValue: i }) => {
+    const n = { ...s, [o]: i };
+    d(n), a || l == null || l(n);
+  }, resetFilters: () => {
+    const o = { ...s };
+    for (const i in o)
+      o[i] = "";
+    d(o);
+  } };
+}, te = b.forwardRef(({ children: l, onValueChange: s, label: d, ...a }, u) => {
+  const p = N("(max-width: 767px)"), { value: o, resetFilters: i, upsert: n } = oe(s);
+  return /* @__PURE__ */ r("div", { ref: u, ...a, children: /* @__PURE__ */ c($.Provider, { value: { value: o, upsert: n }, children: [
+    /* @__PURE__ */ r(h, { shouldRender: p, children: /* @__PURE__ */ c(ae, { resetFilters: i, onClickFilter: () => s == null ? void 0 : s(o), label: d, children: [
+      l,
+      " "
+    ] }) }),
+    /* @__PURE__ */ c(h, { shouldRender: !p, children: [
+      l,
+      /* @__PURE__ */ r(h, { shouldRender: o && Object.values(o).some(Boolean), children: /* @__PURE__ */ c(f, { colors: "neutral", rounded: "default", variant: "text", size: "sm", onClick: i, className: "ms-auto", children: [
+        m.Shared.reset,
+        /* @__PURE__ */ r(z, { className: "ms-space-01" })
+      ] }) })
+    ] })
+  ] }) });
+});
+te.displayName = "FilterGroup";
+const xe = ({ multi: l, data: s, placeholder: d, disabled: a, isLoading: u, rounded: p, size: o, name: i, defaultOpen: n }) => {
+  var w, y, S, R, F, C, x, k, j;
+  const e = b.useContext($), I = N("(max-width: 767px)"), { dir: g } = le();
+  return I ? /* @__PURE__ */ c(H, { dir: g, defaultOpen: n, children: [
+    /* @__PURE__ */ c(
+      O,
       {
-        ref: o,
-        className: s("relative h-space-02 w-full overflow-hidden bg-background-secondary", r && "rounded-full", d),
-        ...l,
-        children: /* @__PURE__ */ t(
-          e.Indicator,
-          {
-            className: s("h-full w-full flex-1 transition-all", r && "rounded-full", m),
-            style: {
-              transform: (l == null ? void 0 : l.dir) === "rtl" ? `translateX(${100 - (a || 0)}%)` : `translateX(-${100 - (a || 0)}%)`
-            }
-          }
-        )
+        id: "subcategoriesCollapsible",
+        className: "flex w-full items-center justify-between py-space-03 [&>svg]:data-[state=closed]:rotate-180",
+        children: [
+          /* @__PURE__ */ c("div", { className: "flex grow items-center justify-between gap-space-01", children: [
+            /* @__PURE__ */ r("span", { className: "text-body-01", children: d }),
+            /* @__PURE__ */ r(h, { shouldRender: typeof ((w = e == null ? void 0 : e.value) == null ? void 0 : w[i]) == "object" && !!((S = (y = e == null ? void 0 : e.value) == null ? void 0 : y[i]) != null && S.length), children: /* @__PURE__ */ r("span", { className: "flex h-[24px] w-[24px] items-center justify-center rounded-full bg-background-secondary text-caption-01 text-primary", children: ie(((F = (R = e == null ? void 0 : e.value) == null ? void 0 : R[i]) == null ? void 0 : F.length) || 0) }) })
+          ] }),
+          /* @__PURE__ */ r(A, { className: "text-primary" })
+        ]
       }
     ),
-    !!i && /* @__PURE__ */ t(
-      "div",
-      {
-        className: "absolute top-1/2 -translate-y-1/2 duration-200",
-        style: {
-          [(l == null ? void 0 : l.dir) === "rtl" ? "right" : "left"]: `calc(${a}% + -12px)`
-        },
-        children: i
-      }
-    )
+    /* @__PURE__ */ c(_, { children: [
+      /* @__PURE__ */ r(h, { shouldRender: l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: s == null ? void 0 : s.map((t) => {
+        var B, V, G;
+        return /* @__PURE__ */ r(
+          T,
+          {
+            multi: l,
+            name: i,
+            label: t.label,
+            value: t.value,
+            isCkecked: typeof ((B = e == null ? void 0 : e.value) == null ? void 0 : B[i]) == "object" && !!((G = (V = e == null ? void 0 : e.value) == null ? void 0 : V[i]) != null && G.find((v) => v == t.value)),
+            onChange: (v) => {
+              var M;
+              return v && (e == null ? void 0 : e.upsert({ name: i, selectedValue: [...((M = e == null ? void 0 : e.value) == null ? void 0 : M[i]) ?? [], t.value] }));
+            }
+          },
+          t.label
+        );
+      }) }) }),
+      /* @__PURE__ */ r(h, { shouldRender: !l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: /* @__PURE__ */ r(
+        D,
+        {
+          name: i,
+          dir: g,
+          value: typeof ((C = e == null ? void 0 : e.value) == null ? void 0 : C[i]) == "string" ? (x = e == null ? void 0 : e.value) == null ? void 0 : x[i] : void 0,
+          onValueChange: (t) => {
+            e == null || e.upsert({ name: i, selectedValue: t });
+          },
+          children: s == null ? void 0 : s.map((t) => /* @__PURE__ */ r(T, { multi: l, name: i, label: t.label, value: t.value }, t.label))
+        }
+      ) }) })
+    ] })
+  ] }) : l ? /* @__PURE__ */ r(
+    P,
+    {
+      options: s || [],
+      onChange: (t) => {
+        e == null || e.upsert({ name: i, selectedValue: t });
+      },
+      selectedValues: ((k = e == null ? void 0 : e.value) == null ? void 0 : k[i]) || [],
+      dataTestId: "muliSelect",
+      placeholder: d,
+      disabled: a,
+      rounded: p,
+      size: o,
+      className: "!w-max"
+    }
+  ) : /* @__PURE__ */ r(
+    Q,
+    {
+      className: "!w-max",
+      rounded: p,
+      options: s || [],
+      optionLabel: "label",
+      optionValue: "value",
+      placeholder: d,
+      onChange: (t) => {
+        e == null || e.upsert({ name: i, selectedValue: t });
+      },
+      value: ((j = e == null ? void 0 : e.value) == null ? void 0 : j[i]) || "",
+      size: o,
+      disabled: a,
+      isLoading: u
+    }
+  );
+}, ae = ({
+  resetFilters: l,
+  children: s,
+  onClickFilter: d,
+  label: a
+}) => /* @__PURE__ */ c(q, { children: [
+  /* @__PURE__ */ r("div", { className: "flex justify-between", children: /* @__PURE__ */ r(J, { asChild: !0, children: /* @__PURE__ */ r("div", { className: "flex items-center gap-space-01", children: /* @__PURE__ */ c(
+    f,
+    {
+      id: "servicesFilter",
+      variant: "text",
+      colors: "neutral",
+      className: se({
+        "!px-space-02": !a
+      }),
+      children: [
+        /* @__PURE__ */ r(ee, {}),
+        a && /* @__PURE__ */ r("span", { children: "label" })
+      ]
+    }
+  ) }) }) }),
+  /* @__PURE__ */ c(K, { className: "flex flex-col gap-0 bg-white p-0", side: "bottom", children: [
+    /* @__PURE__ */ r(U, { children: /* @__PURE__ */ r(W, { children: m.Shared.sortBy }) }),
+    /* @__PURE__ */ r(X, { className: "px-space-04 py-space-00", children: s }),
+    /* @__PURE__ */ r(Y, { className: "p-space-04", children: /* @__PURE__ */ c("div", { className: "flex bg-background", children: [
+      /* @__PURE__ */ r(f, { id: "servicesRest", size: "sm", variant: "ghost", colors: "gray", onClick: l, className: "grow", children: m.Shared.reset }),
+      /* @__PURE__ */ r(Z, { asChild: !0, className: "", children: /* @__PURE__ */ r(f, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: d, className: "grow", children: m.Shared.showResults }) })
+    ] }) })
   ] })
-);
-c.displayName = e.Root.displayName;
+] }), T = ({ label: l, value: s, isCkecked: d, onChange: a, name: u, multi: p }) => /* @__PURE__ */ c("div", { className: "flex items-center justify-between p-space-01 hover:bg-card-hover", children: [
+  /* @__PURE__ */ r("label", { htmlFor: l, className: "text-Body-01 flex grow gap-space-02 font-medium", children: l }),
+  /* @__PURE__ */ r(h, { shouldRender: p, children: /* @__PURE__ */ r(
+    re,
+    {
+      id: `${u}${s}`,
+      value: s,
+      onCheckedChange: (o) => a == null ? void 0 : a(typeof o == "boolean" ? o : !1, s),
+      checked: d
+    }
+  ) }),
+  /* @__PURE__ */ r(h, { shouldRender: !p, children: /* @__PURE__ */ r(E, { id: `${u}${s}`, value: s.toString() }) })
+] });
 export {
-  c as Progress
+  te as FilterGroup,
+  xe as FilterSelect
 };