mada-design-system 0.9.1 → 1.0.1

package/index.es11.js

@@ -1,162 +1,143 @@
-import { jsxs as o, jsx as e, Fragment as T } from "react/jsx-runtime";
-import { useVirtualizer as _ } from "./index.es118.js";
-import h, { useMemo as L, useEffect as $ } from "react";
-import { useToggle as A } from "./index.es106.js";
-import { strings as k } from "./index.es101.js";
-import D from "./index.es3.js";
-import { ShouldRender as y } from "./index.es15.js";
-import { Badge as G } from "./index.es21.js";
-import { Button as j } from "./index.es23.js";
-import { Checkbox as q } from "./index.es26.js";
-import { Command as H, CommandInput as J, CommandList as K, CommandEmpty as Q, CommandGroup as U, CommandItem as W } from "./index.es28.js";
-import { Popover as X, PopoverTrigger as Y, PopoverContent as Z } from "./index.es60.js";
-import { selectVariants as B } from "./index.es66.js";
-import { debounce as V, cn as ee } from "./index.es89.js";
-import re from "./index.es104.js";
-function ve({
-  placeholder: l,
+import { jsx as e, jsxs as g, Fragment as O } from "react/jsx-runtime";
+import { cn as C, dateFormatter as F } from "./index.es94.js";
+import { useLanguage as _ } from "./index.es9.js";
+import { CommandEmpty as k, CommandInput as z, CommandItem as A, Command as D, CommandGroup as M } from "./index.es33.js";
+import { FormControl as q } from "./index.es41.js";
+import { Popover as B, PopoverContent as H, PopoverTrigger as R } from "./index.es65.js";
+import { ScrollArea as J } from "./index.es69.js";
+import S, { useState as P } from "react";
+import { strings as j } from "./index.es95.js";
+import K from "./index.es3.js";
+import { ShouldRender as Q } from "./index.es19.js";
+import { selectVariants as U } from "./index.es71.js";
+import W from "./index.es106.js";
+const E = B, X = z, Y = k, G = A, I = S.forwardRef(({ className: r, children: t, ...c }, f) => /* @__PURE__ */ e(H, { className: C("min-w-[var(--radix-popover-trigger-width)] p-space-02", r), ref: f, ...c, children: /* @__PURE__ */ e(D, { children: t }) }));
+I.displayName = "ComboboxContent";
+const N = S.forwardRef(
+  ({ className: r, children: t, variant: c, colors: f, size: m, rounded: u, placeholder: d, isLoading: h, isForm: x = !0, startAdornment: l, ...b }, s) => {
+    const i = {
+      ref: s,
+      role: "combobox",
+      "aria-expanded": !1,
+      "aria-label": d || "Select an option",
+      title: d || "Select an option",
+      disabled: h,
+      className: C(U({ variant: c, colors: f, size: m, rounded: u }), r),
+      ...b
+    }, o = /* @__PURE__ */ g(O, { children: [
+      d && !t && /* @__PURE__ */ g("span", { className: "pointer-events-none flex items-center gap-space-02 text-body-01 text-form-field-text-placeholder", children: [
+        l,
+        " ",
+        d
+      ] }),
+      t && /* @__PURE__ */ g("span", { className: "flex flex-1 items-center gap-space-02 text-right", children: [
+        l,
+        " ",
+        t
+      ] }),
+      h ? /* @__PURE__ */ e(K, {}) : /* @__PURE__ */ e(
+        W,
+        {
+          className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
+          "aria-hidden": !0
+        }
+      )
+    ] });
+    return x ? /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e("button", { ...i, children: o }) }) }) : /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e("button", { ...i, children: o }) });
+  }
+);
+N.displayName = "ComboboxTrigger";
+const y = S.forwardRef(({ className: r, children: t, placeholder: c, ...f }, m) => {
+  const { dir: u } = _(), d = S.Children.count(t);
+  return /* @__PURE__ */ g(I, { className: r, children: [
+    d > 9 && /* @__PURE__ */ g(O, { children: [
+      /* @__PURE__ */ e(X, { placeholder: c }),
+      /* @__PURE__ */ e(Y, { children: j.Shared.NoDataFound })
+    ] }),
+    /* @__PURE__ */ e(J, { className: C({ "h-auto": d <= 7, "h-48 sm:h-64": d > 7 }), dir: u, children: /* @__PURE__ */ e(M, { ref: m, ...f, dir: document.dir, children: t }) })
+  ] });
+});
+y.displayName = "ComboboxGroup";
+const lr = ({
   options: r,
-  selectedValues: a,
-  onChange: c,
-  disabled: g,
-  size: s = "default",
-  dataTestId: d = "",
-  rounded: u = "default",
-  variant: x = "outline",
-  colors: v = "default",
-  isLoading: n = !1,
-  className: f,
-  checkboxSize: b = "default",
-  threshold: N = 1,
-  showSelectButton: i,
-  selectButtonTitle: F
-}) {
-  var I;
-  const [C, S] = A(!1), [R, w] = h.useState(""), [M, E] = h.useState(""), [z, p] = h.useState(a), P = L(() => V((t) => w(t), 300), []), O = L(() => r.filter((t) => t.label.toLowerCase().includes(R.toLowerCase())), [r, R]), m = C && i ? z : a;
-  return $(() => {
-    p(a);
-  }, [a]), /* @__PURE__ */ o(
-    X,
-    {
-      open: C,
-      onOpenChange: () => {
-        S(), C || (E(""), w(""), i && p(a));
-      },
-      children: [
-        /* @__PURE__ */ e(Y, { asChild: !0, disabled: g, "data-testid": d, children: /* @__PURE__ */ o("button", { className: ee(B({ variant: x, colors: v, size: s, rounded: u }), f), children: [
-          /* @__PURE__ */ e("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: l }),
-          (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ e(T, { children: m.length > N ? /* @__PURE__ */ e("label", { className: "ms-auto flex size-space-05 shrink-0 items-center justify-center rounded-full  bg-inverted text-caption-01 text-inverted-foreground", children: m.length }) : (I = r == null ? void 0 : r.filter((t) => m.includes(t.value))) == null ? void 0 : I.map((t) => /* @__PURE__ */ e(G, { colors: "gray", variant: "ghost", size: "sm", className: "ms-auto", children: t.label }, t.value)) }),
-          n ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(
-            re,
-            {
-              className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
-              "aria-hidden": !0
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ e(
-          Z,
-          {
-            className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)] p-space-00   max-md:max-w-[var(--radix-popper-available-width)]",
-            align: "start",
-            children: /* @__PURE__ */ o(H, { className: "w-full", shouldFilter: !1, children: [
-              /* @__PURE__ */ o("div", { className: "p-space-02", children: [
-                /* @__PURE__ */ e(y, { shouldRender: (r == null ? void 0 : r.length) > 7, children: /* @__PURE__ */ e(
-                  J,
-                  {
-                    placeholder: l,
-                    value: M,
-                    onValueChange: (t) => {
-                      E(t), P(t);
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ o(K, { children: [
-                  /* @__PURE__ */ e(Q, { className: "my-auto text-center", children: k.Shared.NoDataFound }),
-                  /* @__PURE__ */ e(
-                    ae,
-                    {
-                      options: O,
-                      dataTestId: d,
-                      selectedValues: i ? z : a,
-                      onChange: i ? p : c,
-                      checkboxSize: b
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ e(y, { shouldRender: !!(a != null && a.length) || i, children: /* @__PURE__ */ o("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: [
-                /* @__PURE__ */ e(
-                  j,
-                  {
-                    colors: "neutral",
-                    variant: "text",
-                    size: "sm",
-                    onClick: () => {
-                      c([]), p([]), i || S();
-                    },
-                    className: "flex-1",
-                    children: k.Shared.reset
-                  }
-                ),
-                /* @__PURE__ */ e(y, { shouldRender: i, children: /* @__PURE__ */ e(
-                  j,
-                  {
-                    type: "button",
-                    colors: "primary",
-                    size: "sm",
-                    onClick: () => {
-                      c(z), S();
-                    },
-                    className: "flex-1",
-                    children: F ?? k.Shared.Select
-                  }
-                ) })
-              ] }) })
-            ] })
-          }
-        )
-      ]
-    }
-  );
-}
-function ae({
-  options: l,
-  selectedValues: r,
-  dataTestId: a,
-  onChange: c,
-  checkboxSize: g
-}) {
-  var u;
-  const s = h.useRef(null), d = _({
-    count: l.length,
-    getScrollElement: () => s.current,
-    estimateSize: () => 36,
-    // Adjust based on your row height
-    overscan: 10
-    // Improves scroll performance
-  });
-  return /* @__PURE__ */ e(U, { ref: s, className: "overflow-auto", children: (u = d.getVirtualItems()) == null ? void 0 : u.map((x, v) => {
-    const n = l[x.index], f = r == null ? void 0 : r.includes(n.value);
-    return /* @__PURE__ */ o(
-      W,
+  optionLabel: t,
+  placeholder: c,
+  isLoading: f,
+  optionValue: m,
+  onChange: u,
+  value: d,
+  triggerProps: h,
+  contentClassName: x = "",
+  ...l
+}) => {
+  var o;
+  const [b, s] = P(!1), i = (r == null ? void 0 : r.length) && ((o = r == null ? void 0 : r.find((n) => String(n[m]) === d)) == null ? void 0 : o[t]) || "";
+  return /* @__PURE__ */ g(E, { open: b, onOpenChange: (n) => s(n), children: [
+    /* @__PURE__ */ e(N, { ...h, placeholder: c, isLoading: f, disabled: l == null ? void 0 : l.disabled, ...l, children: i.toString() }),
+    /* @__PURE__ */ e(y, { placeholder: c, className: x, children: !!(r != null && r.length) && (r == null ? void 0 : r.map((n) => /* @__PURE__ */ e(
+      G,
       {
-        "data-testid": `${a}-${v}`,
-        className: "flex gap-space-02",
+        className: C({
+          relative: !0,
+          "after:absolute after:bottom-auto after:right-space-01 after:top-auto after:h-[75%] after:w-[2px] after:rounded-full after:bg-primary": String(n[m]) === d
+        }),
+        value: String(n[t]),
         onSelect: () => {
-          const b = f ? r.filter((N) => N !== n.value) : [...r, n.value];
-          c(b);
+          u(String(n[m])), s(!1);
         },
-        children: [
-          n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ e("span", { children: n.label }),
-          /* @__PURE__ */ e(q, { className: "ms-auto", checked: f, size: g })
-        ]
+        children: String(n == null ? void 0 : n[t])
       },
-      n.value
-    );
-  }) });
-}
+      String(n[m])
+    ))) })
+  ] });
+}, fr = ({
+  options: r,
+  optionLabel: t,
+  placeholder: c,
+  isLoading: f,
+  optionValue: m,
+  renderItem: u,
+  onChange: d,
+  value: h,
+  triggerProps: x,
+  isDate: l,
+  disabledOption: b,
+  contentClassName: s = "",
+  ...i
+}) => {
+  var w;
+  const [o, n] = P(!1), v = (r == null ? void 0 : r.length) && ((w = r == null ? void 0 : r.find((a) => String(a[m]) === h)) == null ? void 0 : w[t]) || "", T = (a) => u ? u(a) : l ? F({ date: String(a == null ? void 0 : a[t]) ?? "", format: "long" }) : String(a == null ? void 0 : a[t]);
+  return /* @__PURE__ */ g(E, { open: o, onOpenChange: (a) => n(a), children: [
+    /* @__PURE__ */ e(N, { isForm: !1, ...x, placeholder: c, isLoading: f, disabled: i == null ? void 0 : i.disabled, ...i, children: l ? F({ date: String(v) ?? "", format: "long" }) : v.toString() }),
+    /* @__PURE__ */ g(y, { placeholder: c, className: s, children: [
+      /* @__PURE__ */ e(Q, { shouldRender: !r || (r == null ? void 0 : r.length) < 1, children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center", children: j.Shared.NoDataFound }) }),
+      !!(r != null && r.length) && (r == null ? void 0 : r.map((a) => /* @__PURE__ */ e(
+        G,
+        {
+          className: C({
+            "relative min-w-[220px]": !0,
+            "after:absolute after:bottom-auto after:start-space-01 after:top-auto after:h-[50%] after:w-[2px] after:rounded-full after:bg-primary": String(a[m]) === h
+          }),
+          value: String(a[t]),
+          disabled: b && b(a),
+          onSelect: () => {
+            d(String(a[m])), n(!1);
+          },
+          children: T(a)
+        },
+        String(a[m])
+      )))
+    ] })
+  ] });
+};
 export {
-  ve as MultiSelect
+  E as Combobox,
+  I as ComboboxContent,
+  lr as ComboboxControl,
+  fr as ComboboxControlNoForm,
+  Y as ComboboxEmpty,
+  y as ComboboxGroup,
+  X as ComboboxInput,
+  G as ComboboxItem,
+  N as ComboboxTrigger
 };