mada-design-system 0.2.6 → 0.2.7

package/index.es44.js

@@ -1,172 +1,207 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import b, { useState as z } from "react";
-import { useMediaQuery as w } from "./index.es98.js";
-import { strings as m } from "./index.es91.js";
+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 { Button as f } from "./index.es22.js";
-import H from "./index.es133.js";
-import { Collapsible as O, CollapsibleTrigger as _, CollapsibleContent as A } from "./index.es26.js";
-import D from "./index.es134.js";
-import { RadioGroup as E, RadioGroupItem as P } from "./index.es54.js";
-import { MultiSelect as Q } from "./index.es10.js";
-import { ComboboxControlNoForm as V } 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.es59.js";
-import ee from "./index.es135.js";
-import { Checkbox as re } from "./index.es25.js";
-import { ShouldRender as n } from "./index.es14.js";
-import se from "./index.es83.js";
-import { cn as le } from "./index.es79.js";
-const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), I = b.createContext(null), te = (l, i) => {
-  const [c, t] = z(), p = w("(max-width: 767px)");
-  return { value: c, upsert: ({ name: s, selectedValue: u }) => {
-    const e = { ...c, [s]: u };
-    t(e), p || l == null || l(e);
-  }, resetFilters: () => {
-    const s = { ...c };
-    for (const u in s)
-      s[u] = "";
-    t(s), i == null || i();
-  } };
-}, oe = b.forwardRef(({ children: l, onValueChange: i, onValueReset: c, label: t, ...p }, h) => {
-  const d = w("(max-width: 767px)"), { value: s, resetFilters: u, upsert: e } = te(i, c);
-  return /* @__PURE__ */ r("div", { ref: h, ...p, children: /* @__PURE__ */ a(I.Provider, { value: { value: s, upsert: e }, children: [
-    /* @__PURE__ */ r(n, { shouldRender: d, children: /* @__PURE__ */ r(ce, { resetFilters: u, onClickFilter: () => i == null ? void 0 : i(s), label: t, children: l }) }),
-    /* @__PURE__ */ a(n, { shouldRender: !d, children: [
-      l,
-      /* @__PURE__ */ r(n, { shouldRender: s && Object.values(s).some(Boolean), children: /* @__PURE__ */ a(f, { colors: "neutral", rounded: "default", variant: "text", size: "sm", onClick: u, className: "ms-auto", children: [
-        m.Shared.reset,
-        /* @__PURE__ */ r(H, { className: "ms-space-01" })
-      ] }) })
+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" })
+        ] })
+      ] })
     ] })
-  ] }) });
-});
-oe.displayName = "FilterGroup";
-const Re = ({ multi: l, data: i, placeholder: c, disabled: t, isLoading: p, rounded: h, size: d, name: s, defaultOpen: u }) => {
-  var y, g, S, F, C, x, R, j, k;
-  const e = b.useContext(I), L = w("(max-width: 767px)"), { dir: N } = se();
-  return L ? /* @__PURE__ */ a(O, { dir: N, defaultOpen: u, children: [
-    /* @__PURE__ */ a(
+  ] });
+}, ne = ({
+  resetFilters: s,
+  children: r,
+  onClickFilter: l,
+  label: o
+}) => /* @__PURE__ */ p(W, { children: [
+  /* @__PURE__ */ t(X, { asChild: !0, children: /* @__PURE__ */ p(
+    g,
+    {
+      id: "mobileFilter",
+      colors: "neutral",
+      className: T({
+        "!px-space-02": !o
+      }),
+      children: [
+        /* @__PURE__ */ t(re, {}),
+        o && /* @__PURE__ */ t("span", { children: o })
+      ]
+    }
+  ) }),
+  /* @__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(
       _,
       {
-        id: "subcategoriesCollapsible",
-        className: "flex w-full items-center justify-between py-space-03 [&>svg]:data-[state=closed]:rotate-180",
-        children: [
-          /* @__PURE__ */ a("div", { className: "flex grow items-center justify-between gap-space-01", children: [
-            /* @__PURE__ */ r("span", { className: "text-body-01", children: c }),
-            /* @__PURE__ */ r(n, { shouldRender: typeof ((y = e == null ? void 0 : e.value) == null ? void 0 : y[s]) == "object" && !!((S = (g = e == null ? void 0 : e.value) == null ? void 0 : g[s]) != 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(((C = (F = e == null ? void 0 : e.value) == null ? void 0 : F[s]) == null ? void 0 : C.length) || 0) }) })
-          ] }),
-          /* @__PURE__ */ r(D, { className: "text-primary" })
-        ]
+        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 })
       }
-    ),
-    /* @__PURE__ */ a(A, { children: [
-      /* @__PURE__ */ r(n, { shouldRender: l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: i == null ? void 0 : i.map((o) => {
-        var B, G, M;
-        return /* @__PURE__ */ r(
-          $,
-          {
-            multi: l,
-            name: s,
-            label: o.label,
-            value: o.value,
-            isCkecked: typeof ((B = e == null ? void 0 : e.value) == null ? void 0 : B[s]) == "object" && !!((M = (G = e == null ? void 0 : e.value) == null ? void 0 : G[s]) != null && M.find((v) => v == o.value)),
-            onChange: (v) => {
-              var T;
-              return v && (e == null ? void 0 : e.upsert({ name: s, selectedValue: [...((T = e == null ? void 0 : e.value) == null ? void 0 : T[s]) ?? [], o.value] }));
-            }
-          },
-          o.label
-        );
-      }) }) }),
-      /* @__PURE__ */ r(n, { shouldRender: !l, children: /* @__PURE__ */ r("div", { className: "py-space-04", children: /* @__PURE__ */ r(
-        E,
-        {
-          name: s,
-          dir: N,
-          value: typeof ((x = e == null ? void 0 : e.value) == null ? void 0 : x[s]) == "string" ? (R = e == null ? void 0 : e.value) == null ? void 0 : R[s] : void 0,
-          onValueChange: (o) => {
-            e == null || e.upsert({ name: s, selectedValue: o });
-          },
-          children: i == null ? void 0 : i.map((o) => /* @__PURE__ */ r($, { multi: l, name: s, label: o.label, value: o.value }, o.label))
-        }
-      ) }) })
-    ] })
-  ] }) : l ? /* @__PURE__ */ r(
-    Q,
+    ) })
+  ] }) : s ? /* @__PURE__ */ t(
+    I,
     {
-      options: i || [],
-      onChange: (o) => {
-        e == null || e.upsert({ name: s, selectedValue: o });
-      },
-      selectedValues: ((j = e == null ? void 0 : e.value) == null ? void 0 : j[s]) || [],
+      options: r || [],
+      onChange: (d) => c({ name: i, selectedValue: d }),
+      selectedValues: (e == null ? void 0 : e[i]) || [],
       dataTestId: "muliSelect",
-      placeholder: c,
-      disabled: t,
-      rounded: h,
-      size: d,
+      placeholder: l,
+      disabled: o,
+      rounded: m,
+      size: h,
       className: "!w-max"
     }
-  ) : /* @__PURE__ */ r(
-    V,
+  ) : /* @__PURE__ */ t(
+    P,
     {
       className: "!w-max",
-      rounded: h,
-      options: i || [],
+      rounded: m,
+      options: r || [],
       optionLabel: "label",
       optionValue: "value",
-      placeholder: c,
-      onChange: (o) => {
-        e == null || e.upsert({ name: s, selectedValue: o });
-      },
-      value: ((k = e == null ? void 0 : e.value) == null ? void 0 : k[s]) || "",
-      size: d,
-      disabled: t,
-      isLoading: p
+      placeholder: l,
+      onChange: (d) => c({ name: i, selectedValue: d }),
+      value: (e == null ? void 0 : e[i]) || "",
+      size: h,
+      disabled: o,
+      isLoading: x
     }
   );
-}, ce = ({
-  resetFilters: l,
-  children: i,
-  onClickFilter: c,
-  label: t
-}) => /* @__PURE__ */ a(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__ */ a(
-    f,
-    {
-      id: "servicesFilter",
-      variant: "text",
-      colors: "neutral",
-      className: le({
-        "!px-space-02": !t
+});
+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
       }),
-      children: [
-        /* @__PURE__ */ r(ee, {}),
-        t && /* @__PURE__ */ r("span", { children: t })
-      ]
-    }
-  ) }) }) }),
-  /* @__PURE__ */ a(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: i }),
-    /* @__PURE__ */ a(Y, { className: "p-space-04", children: [
-      /* @__PURE__ */ r(f, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", 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: c, className: "grow", children: m.Shared.showResults }) })
-    ] })
-  ] })
-] }), $ = ({ label: l, value: i, isCkecked: c, onChange: t, name: p, multi: h }) => /* @__PURE__ */ a("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(n, { shouldRender: h, children: /* @__PURE__ */ r(
-    re,
-    {
-      id: `${p}${i}`,
-      value: i,
-      onCheckedChange: (d) => t == null ? void 0 : t(typeof d == "boolean" ? d : !1, i),
-      checked: c
-    }
-  ) }),
-  /* @__PURE__ */ r(n, { shouldRender: !h, children: /* @__PURE__ */ r(P, { id: `${p}${i}`, value: i.toString() }) })
-] });
+      [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,
+        {
+          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" })
+          ]
+        }
+      )
+    ] }) }) });
+  }
+);
+de.displayName = "FilterGroup";
 export {
-  oe as FilterGroup,
-  Re as FilterSelect
+  de as FilterGroup,
+  pe as FilterSelect
 };

package/index.es45.js

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es136.js";
-import g from "./index.es137.js";
-import b from "./index.es138.js";
-import x from "./index.es139.js";
-import v from "./index.es140.js";
-import N from "./index.es141.js";
+import h from "./index.es135.js";
+import g from "./index.es136.js";
+import b from "./index.es137.js";
+import x from "./index.es138.js";
+import v from "./index.es139.js";
+import N from "./index.es140.js";
 import "./index.es2.js";
 import w from "./index.es80.js";
 import { strings as i } from "./index.es91.js";
-import y from "./index.es142.js";
-import k from "./index.es143.js";
-import F from "./index.es144.js";
-import z from "./index.es145.js";
+import y from "./index.es141.js";
+import k from "./index.es142.js";
+import F from "./index.es143.js";
+import z from "./index.es144.js";
 import { Link as p } from "./index.es49.js";
 import { cn as u } from "./index.es79.js";
 import { ShouldRender as f } from "./index.es14.js";

package/index.es46.js

@@ -1,7 +1,7 @@
 import { jsxs as c, Fragment as u, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
-import C from "./index.es110.js";
-import E from "./index.es109.js";
+import C from "./index.es109.js";
+import E from "./index.es108.js";
 import { Button as h } from "./index.es22.js";
 import { cn as g } from "./index.es79.js";
 function B({ children: v, scrollAmount: p = 200, margin: a = 0, className: b = "", buttonClassName: i = "" }) {

package/index.es47.js

@@ -1,21 +1,21 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { cva as N } from "./index.es100.js";
+import { cva as N } from "./index.es99.js";
 import { createContext as C, useState as T, useEffect as b, useContext as z } from "react";
-import { useMediaQuery as D } from "./index.es98.js";
-import { THEME as l } from "./index.es146.js";
+import { useMediaQuery as D } from "./index.es97.js";
+import { THEME as l } from "./index.es145.js";
 import "./index.es2.js";
 import { cn as p, formatterTime as u } from "./index.es79.js";
-import k from "./index.es147.js";
-import I from "./index.es148.js";
-import H from "./index.es142.js";
-import A from "./index.es143.js";
-import w from "./index.es144.js";
-import V from "./index.es145.js";
+import k from "./index.es146.js";
+import I from "./index.es147.js";
+import H from "./index.es141.js";
+import A from "./index.es142.js";
+import w from "./index.es143.js";
+import V from "./index.es144.js";
 import { useThemeStore as M } from "./index.es90.js";
-import R from "./index.es149.js";
-import G from "./index.es150.js";
+import R from "./index.es148.js";
+import G from "./index.es149.js";
 import { Badge as L } from "./index.es20.js";
-import B from "./index.es151.js";
+import B from "./index.es150.js";
 import E from "./index.es83.js";
 import F from "./index.es80.js";
 import { ShouldRender as g } from "./index.es14.js";

package/index.es49.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
 import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es100.js";
+import { cva as p } from "./index.es99.js";
 import * as m from "react";
 import { cn as x } from "./index.es79.js";
 const v = p(

package/index.es50.js

@@ -1,9 +1,9 @@
 import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import * as a from "react";
 import { cn as p } from "./index.es79.js";
-import { cva as b } from "./index.es100.js";
+import { cva as b } from "./index.es99.js";
 import { ShouldRender as x } from "./index.es14.js";
-import h from "./index.es152.js";
+import h from "./index.es151.js";
 const f = b("group relative flex shrink-0 items-start justify-start ", {
   variants: {
     variant: {