mada-design-system 0.9.1 → 1.0.1

package/index.es47.js

@@ -1,253 +1,118 @@
-import { jsxs as m, jsx as e, Fragment as O } from "react/jsx-runtime";
-import S, { createContext as R, useCallback as L, useMemo as F, useContext as H, useState as _ } from "react";
-import { useMediaQuery as j } from "./index.es106.js";
-import "./index.es2.js";
-import { Collapsible as k, CollapsibleTrigger as M, CollapsibleContent as v } from "./index.es27.js";
-import A from "./index.es151.js";
-import { RadioGroup as D, RadioGroupItem as P } from "./index.es63.js";
-import { MultiSelect as Q } from "./index.es11.js";
-import { ComboboxControlNoForm as q } from "./index.es7.js";
-import { strings as b } from "./index.es101.js";
-import J from "./index.es152.js";
-import { Command as K, CommandInput as U, CommandList as W, CommandEmpty as X, CommandItem as Y } from "./index.es28.js";
-import { Sheet as Z, SheetTrigger as I, SheetContent as V, SheetHeader as ee, SheetTitle as te, SheetBody as re, SheetFooter as se, SheetClose as oe } from "./index.es68.js";
-import ie from "./index.es153.js";
-import { Checkbox as ae } from "./index.es26.js";
-import { Label as le } from "./index.es39.js";
-import z from "./index.es93.js";
-import { Button as N } from "./index.es23.js";
-import { cn as T } from "./index.es89.js";
-const B = R(null), G = () => {
-  const t = H(B);
-  if (!t)
-    throw new Error("useFilterContext must be used within a FilterGroup");
-  return t;
-}, ce = (t) => t < 10 ? "0" + (t == null ? void 0 : t.toString()) : t == null ? void 0 : t.toString(), ne = ({ label: t, value: r, isCkecked: o, onChange: i, name: a, multi: x }) => /* @__PURE__ */ m("div", { className: "flex w-full items-center gap-space-02", children: [
-  x ? /* @__PURE__ */ e(
-    ae,
-    {
-      id: `${a}${r}`,
-      value: r,
-      size: "sm",
-      onCheckedChange: (h) => i == null ? void 0 : i(typeof h == "boolean" ? h : !1, r),
-      checked: o
+import { jsx as y } from "react/jsx-runtime";
+import { cva as m } from "./index.es113.js";
+import { clsx as l } from "./index.es137.js";
+const u = m("flex", {
+  variants: {
+    direction: {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      col: "flex-col",
+      "col-reverse": "flex-col-reverse"
+    },
+    gap: {
+      none: "",
+      small: "gap-space-04",
+      medium: "gap-space-05",
+      1: "gap-space-01",
+      2: "gap-space-02",
+      3: "gap-space-03",
+      4: "gap-space-04",
+      5: "gap-space-05",
+      6: "gap-space-06",
+      7: "gap-space-07",
+      8: "gap-space-08",
+      9: "gap-space-09",
+      10: "gap-space-10",
+      11: "gap-space-11",
+      12: "gap-space-12"
+    },
+    gapX: {
+      none: "",
+      small: "gap-x-space-04",
+      medium: "gap-x-space-05",
+      1: "gap-x-space-01",
+      2: "gap-x-space-02",
+      3: "gap-x-space-03",
+      4: "gap-x-space-04",
+      5: "gap-x-space-05",
+      6: "gap-x-space-06",
+      7: "gap-x-space-07",
+      8: "gap-x-space-08",
+      9: "gap-x-space-09",
+      10: "gap-x-space-10",
+      11: "gap-x-space-11",
+      12: "gap-x-space-12"
+    },
+    gapY: {
+      none: "",
+      small: "gap-y-space-04",
+      medium: "gap-y-space-05",
+      1: "gap-y-space-01",
+      2: "gap-y-space-02",
+      3: "gap-y-space-03",
+      4: "gap-y-space-04",
+      5: "gap-y-space-05",
+      6: "gap-y-space-06",
+      7: "gap-y-space-07",
+      8: "gap-y-space-08",
+      9: "gap-y-space-09",
+      10: "gap-y-space-10",
+      11: "gap-y-space-11",
+      12: "gap-y-space-12"
+    },
+    alignItems: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    },
+    justifyItems: {
+      start: "justify-items-start",
+      center: "justify-items-center",
+      end: "justify-items-end",
+      stretch: "justify-items-stretch"
+    },
+    alignContent: {
+      start: "content-start",
+      center: "content-center",
+      end: "content-end",
+      between: "content-between",
+      around: "content-around",
+      evenly: "content-evenly"
+    },
+    justifyContent: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
     }
-  ) : /* @__PURE__ */ e(P, { id: `${a}${r}`, value: r.toString() }),
-  /* @__PURE__ */ e(le, { htmlFor: `${a}${r}`, className: "text-Body-01 flex grow gap-space-02", children: t })
-] });
-function pe(t = [], r, o) {
-  const i = new Set(t);
-  return o ? i.add(r) : i.delete(r), Array.from(i);
-}
-const $ = ({ data: t, name: r, multi: o, renderItem: i }) => {
-  var y, p;
-  const { value: a, upsert: x } = G(), [h, s] = _(""), d = 5, n = o && Array.isArray(a == null ? void 0 : a[r]) ? a == null ? void 0 : a[r] : [], l = (c, w) => {
-    o && x({ name: r, selectedValue: pe(n, c, w) });
-  }, u = (c) => {
-    const w = o ? n.includes(c.value) : (a == null ? void 0 : a[r]) === c.value, g = i ? i(c) : c.label;
-    return /* @__PURE__ */ e(Y, { className: "py-space-01", children: /* @__PURE__ */ e(
-      ne,
-      {
-        multi: o,
-        name: r,
-        label: g,
-        value: c.value,
-        isCkecked: w,
-        onChange: (C) => l(c.value, C)
-      }
-    ) }, c.value);
-  }, f = F(() => t.filter((c) => c.label.toLowerCase().includes(h.toLowerCase())), [t, h]);
-  return /* @__PURE__ */ m(K, { shouldFilter: !1, className: "pt-space-03", children: [
-    t.length > 9 && /* @__PURE__ */ e(U, { placeholder: b.Shared.Search, value: h, onValueChange: s }),
-    /* @__PURE__ */ m(W, { className: "h-full max-h-max", children: [
-      /* @__PURE__ */ e(X, { children: b.Shared.noResultsFound }),
-      (y = f == null ? void 0 : f.slice(0, d)) == null ? void 0 : y.map(u),
-      (f == null ? void 0 : f.length) > d && /* @__PURE__ */ m(k, { children: [
-        /* @__PURE__ */ e(v, { children: (p = f == null ? void 0 : f.slice(d)) == null ? void 0 : p.map(u) }),
-        /* @__PURE__ */ m(M, { 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: b.Shared.showLess }),
-          /* @__PURE__ */ e("span", { className: "group-data-[state=open]:hidden", children: b.Shared.showMore }),
-          /* @__PURE__ */ e(A, { size: 16, className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" })
-        ] })
-      ] })
-    ] })
-  ] });
-}, de = ({
-  resetFilters: t,
-  children: r,
-  onClickFilter: o,
-  label: i,
-  filterButtonProps: a,
-  filterIcon: x
-}) => {
-  const { dir: h } = z(), s = S.Children.map(r, (d) => {
-    var n;
-    return S.isValidElement(d) ? d.type && typeof d.type == "object" && "displayName" in d.type && d.type.displayName === "FilterSelect" ? d : /* @__PURE__ */ m(
-      k,
-      {
-        dir: h,
-        defaultOpen: !1,
-        className: "flex flex-col gap-space-01 border-b border-border-primary px-space-03 py-space-02",
-        children: [
-          /* @__PURE__ */ m(M, { 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: ((n = d.props) == null ? void 0 : n.placeholder) || "Filter" }),
-            /* @__PURE__ */ e(N, { variant: "text", type: "button", size: "icon-sm", colors: "gray", "aria-label": "Toggle filter options", children: /* @__PURE__ */ e(A, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
-          ] }),
-          /* @__PURE__ */ e(v, { children: d })
-        ]
-      }
-    ) : d;
-  });
-  return /* @__PURE__ */ m(Z, { children: [
-    /* @__PURE__ */ e(I, { asChild: !0, children: /* @__PURE__ */ m(
-      N,
-      {
-        id: "mobileFilter",
-        colors: "neutral",
-        className: T({
-          "!px-space-02": !i
-        }),
-        ...a,
-        children: [
-          x || /* @__PURE__ */ e(ie, {}),
-          i && /* @__PURE__ */ e("span", { children: i })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ m(V, { side: "bottom", children: [
-      /* @__PURE__ */ e(ee, { children: /* @__PURE__ */ e(te, { children: b.Shared.sortBy }) }),
-      /* @__PURE__ */ e(re, { className: "px-space-00 py-space-02", children: s }),
-      /* @__PURE__ */ m(se, { className: "flex-row gap-space-02 p-space-04", children: [
-        /* @__PURE__ */ e(N, { id: "servicesRest", size: "sm", variant: "text", colors: "neutral", onClick: t, className: "grow", children: b.Shared.reset }),
-        /* @__PURE__ */ e(oe, { asChild: !0, children: /* @__PURE__ */ e(N, { id: "servicesShowResults", size: "sm", colors: "primary", onClick: o, className: "grow", children: b.Shared.showResults }) })
-      ] })
-    ] })
-  ] });
-}, me = S.memo(
-  ({ multi: t, data: r, placeholder: o, disabled: i, isLoading: a, rounded: x, size: h, name: s, defaultOpen: d, renderItem: n }) => {
-    const { value: l, upsert: u } = G(), f = j("(max-width: 768px)"), { dir: y } = z();
-    let p;
-    return t ? p = Array.isArray(l == null ? void 0 : l[s]) ? l == null ? void 0 : l[s] : [] : p = typeof (l == null ? void 0 : l[s]) == "string" ? l == null ? void 0 : l[s] : void 0, f ? /* @__PURE__ */ m(k, { dir: y, defaultOpen: d, className: "border-b border-border-primary px-space-03 py-space-02", children: [
-      /* @__PURE__ */ m(M, { 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: o }),
-        /* @__PURE__ */ m("div", { className: "flex items-center gap-space-01", children: [
-          t && !!(p != null && p.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: ce(p.length) }),
-          !t && !!p && /* @__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", "aria-label": "Toggle filter options", children: /* @__PURE__ */ e(A, { className: "transition-transform duration-300 group-data-[state=closed]:rotate-180" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ e(v, { children: t ? /* @__PURE__ */ e($, { data: r, name: s, multi: t, renderItem: n }) : /* @__PURE__ */ e(
-        D,
-        {
-          name: s,
-          size: "sm",
-          dir: y,
-          value: p,
-          onValueChange: (c) => u({ name: s, selectedValue: c }),
-          children: /* @__PURE__ */ e($, { data: r, name: s, multi: t, renderItem: n })
-        }
-      ) })
-    ] }) : t ? /* @__PURE__ */ e(
-      Q,
-      {
-        options: r || [],
-        onChange: (c) => u({ name: s, selectedValue: c }),
-        selectedValues: p || [],
-        dataTestId: `multiSelect-${s}`,
-        placeholder: o,
-        disabled: i,
-        rounded: x,
-        size: h,
-        className: "!w-max"
-      },
-      s
-    ) : /* @__PURE__ */ e(
-      q,
-      {
-        className: "!w-max",
-        rounded: x,
-        options: r || [],
-        optionLabel: "label",
-        optionValue: "value",
-        renderItem: n,
-        placeholder: o,
-        onChange: (c) => u({ name: s, selectedValue: c }),
-        value: (l == null ? void 0 : l[s]) || "",
-        size: h,
-        disabled: i,
-        isLoading: a
-      },
-      `${s}-${p || "empty"}`
-    );
+  },
+  defaultVariants: {
+    direction: "row",
+    gap: "medium"
   }
-);
-me.displayName = "FilterSelect";
-const he = S.forwardRef(
-  ({
-    children: t,
-    onValueChange: r,
-    onValueReset: o,
-    label: i,
-    resetButtonProps: a,
-    filterButtonProps: x,
-    filterIcon: h,
-    resetButtonLabel: s,
-    className: d,
-    value: n,
-    ...l
-  }, u) => {
-    const f = j("(max-width: 768px)"), y = L(
-      ({ name: g, selectedValue: C }) => {
-        const E = { ...n || {}, [g]: C };
-        r == null || r(E);
-      },
-      [n, r]
-    ), p = L(() => {
-      o == null || o();
-    }, [o]), c = F(
-      () => ({
-        value: n,
-        upsert: y,
-        reset: p
-      }),
-      [n, y, p]
-    ), w = F(
-      () => n && Object.values(n).some((g) => Array.isArray(g) ? g.length > 0 : !!g),
-      [n]
-    );
-    return /* @__PURE__ */ e("div", { ref: u, className: T("flex", d), ...l, children: /* @__PURE__ */ e(B.Provider, { value: c, children: f ? /* @__PURE__ */ e(
-      de,
-      {
-        filterButtonProps: x,
-        resetFilters: p,
-        onClickFilter: () => r == null ? void 0 : r(n),
-        label: i,
-        filterIcon: h,
-        children: t
-      }
-    ) : /* @__PURE__ */ m(O, { children: [
-      t,
-      w && /* @__PURE__ */ m(
-        N,
-        {
-          colors: "neutral",
-          rounded: "default",
-          variant: "text",
-          size: "sm",
-          onClick: p,
-          className: "ms-auto",
-          ...a,
-          children: [
-            s || b.Shared.reset,
-            /* @__PURE__ */ e(J, { className: "ms-space-01" })
-          ]
-        }
-      )
-    ] }) }) });
+}), j = ({
+  direction: e,
+  gap: a,
+  gapX: s,
+  gapY: p,
+  justifyContent: t,
+  justifyItems: c,
+  alignContent: n,
+  alignItems: r,
+  className: g,
+  children: i,
+  ...o
+}) => /* @__PURE__ */ y(
+  "div",
+  {
+    className: l(u({ direction: e, gap: a, gapX: s, gapY: p, justifyContent: t, justifyItems: c, alignContent: n, alignItems: r }), g),
+    ...o,
+    children: i
   }
 );
-he.displayName = "FilterGroup";
 export {
-  he as FilterGroup,
-  me as FilterSelect
+  j as Stack
 };