mada-design-system 0.0.9 → 0.0.10

package/index.es10.js

@@ -1,96 +1,81 @@
-import { jsxs as i, jsx as m, Fragment as k } from "react/jsx-runtime";
-import t from "./index.es83.js";
-import { useToggle as w } from "./index.es87.js";
-import { strings as j } from "./index.es80.js";
-import { ShouldRender as x } from "./index.es14.js";
-import { Badge as P } from "./index.es21.js";
-import { Button as v } from "./index.es23.js";
-import { Checkbox as R } from "./index.es26.js";
-import { Command as u, CommandInput as B, CommandList as E, CommandEmpty as M, CommandGroup as O, CommandItem as $ } from "./index.es28.js";
-import { Popover as z, PopoverTrigger as F, PopoverContent as G } from "./index.es43.js";
-import I from "./index.es84.js";
-function X({
-  placeholder: h,
-  options: a,
-  selectedValues: r,
+import { jsxs as a, jsx as r, Fragment as z } from "react/jsx-runtime";
+import { useVirtualizer as R } from "./index.es105.js";
+import g, { useCallback as I, useMemo as L } from "react";
+import { useToggle as j } from "./index.es96.js";
+import { strings as B } from "./index.es89.js";
+import E from "./index.es3.js";
+import { ShouldRender as S } from "./index.es14.js";
+import { Badge as M } from "./index.es20.js";
+import { Button as P } from "./index.es22.js";
+import { Checkbox as F } from "./index.es25.js";
+import { Command as O, CommandInput as _, CommandList as $, CommandEmpty as A, CommandGroup as G, CommandItem as T } from "./index.es27.js";
+import { Popover as q, PopoverTrigger as D, PopoverContent as H } from "./index.es51.js";
+import { selectVariants as J } from "./index.es56.js";
+import { debounce as K, cn as Q } from "./index.es77.js";
+import U from "./index.es93.js";
+function hr({
+  placeholder: i,
+  options: t,
+  selectedValues: n,
   onChange: c,
-  disabled: b,
-  size: o = "default",
-  dataTestId: g = "",
-  rounded: N = "default"
+  disabled: l,
+  size: f = "default",
+  dataTestId: m = "",
+  rounded: s = "default",
+  variant: p = "outline",
+  colors: e = "default",
+  isLoading: d = !1,
+  className: u
 }) {
-  var p;
-  const [l, f] = w(!1);
-  return /* @__PURE__ */ i(
-    z,
+  var N;
+  const [h, x] = j(!1), [b, v] = g.useState(""), [k, C] = g.useState(""), w = I(() => K((o) => v(o), 300), []), y = L(() => t.filter((o) => o.label.toLowerCase().includes(b.toLowerCase())), [t, b]);
+  return /* @__PURE__ */ a(
+    q,
     {
-      open: l,
+      open: h,
       onOpenChange: () => {
-        f();
+        x(), h || (C(""), v(""));
       },
       children: [
-        /* @__PURE__ */ m(F, { asChild: !0, disabled: b, "data-testid": g, children: /* @__PURE__ */ i(v, { size: o, rounded: N, colors: "gray", variant: "outline", className: "gap-space-01 py-space-02 pl-space-03 pr-space-04", children: [
-          /* @__PURE__ */ m(
-            "span",
+        /* @__PURE__ */ r(D, { asChild: !0, disabled: l, "data-testid": m, children: /* @__PURE__ */ a("button", { className: Q(J({ variant: p, colors: e, size: f, rounded: s }), u), children: [
+          /* @__PURE__ */ r("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: i }),
+          (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ r(z, { children: (n == null ? void 0 : n.length) > 1 ? /* @__PURE__ */ r("label", { className: "flex size-space-05 shrink-0 items-center justify-center rounded-full bg-background-secondary text-caption-01", children: n.length }) : (N = t == null ? void 0 : t.filter((o) => n == null ? void 0 : n.includes(o.value))) == null ? void 0 : N.map((o) => /* @__PURE__ */ r(M, { colors: "gray", variant: "ghost", size: "sm", children: o.label }, o.value)) }),
+          d ? /* @__PURE__ */ r(E, {}) : /* @__PURE__ */ r(
+            U,
             {
-              className: t({
-                "text-body-01": o === "sm",
-                "text-body-02": o === "default",
-                "text-foreground-secondary": !(r != null && r.length)
-              }),
-              children: h
-            }
-          ),
-          (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ m(k, { children: (r == null ? void 0 : r.length) > 1 ? /* @__PURE__ */ m("label", { className: "flex size-space-05 items-center justify-center rounded-full bg-background-secondary text-caption-01", children: r.length }) : (p = a == null ? void 0 : a.filter((n) => r == null ? void 0 : r.includes(n.value))) == null ? void 0 : p.map((n) => /* @__PURE__ */ m(P, { colors: "gray", variant: "ghost", size: "sm", children: n.label }, n.value)) }),
-          /* @__PURE__ */ m(
-            I,
-            {
-              className: t({
-                "size-8": o === "sm",
-                "size-space-05": o === "default",
-                "text-foreground-secondary": !(r != null && r.length)
-              })
+              className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
+              "aria-hidden": !0
             }
           )
         ] }) }),
-        /* @__PURE__ */ m(G, { className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)]   p-space-00", align: "start", children: /* @__PURE__ */ i(u, { className: "w-full", children: [
-          /* @__PURE__ */ i("div", { className: "p-space-02", children: [
-            /* @__PURE__ */ m(x, { shouldRender: (a == null ? void 0 : a.length) > 7, children: /* @__PURE__ */ m(B, { placeholder: h }) }),
-            /* @__PURE__ */ i(E, { children: [
-              /* @__PURE__ */ m(M, { children: "No results found." }),
-              /* @__PURE__ */ m(O, { children: a == null ? void 0 : a.map((n, y) => {
-                const d = r == null ? void 0 : r.includes(n.value);
-                return /* @__PURE__ */ i(
-                  $,
-                  {
-                    "data-testid": `${g}-${y}`,
-                    className: "flex gap-space-02 ",
-                    onSelect: () => {
-                      const C = d ? r.filter((S) => S !== n.value) : [...r, n.value];
-                      c(C);
-                    },
-                    children: [
-                      n.icon && /* @__PURE__ */ m(n.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-                      /* @__PURE__ */ m("span", { children: n.label }),
-                      /* @__PURE__ */ m(R, { className: "mr-auto", checked: d })
-                    ]
-                  },
-                  n.value
-                );
-              }) })
+        /* @__PURE__ */ r(H, { className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)]   p-space-00", align: "start", children: /* @__PURE__ */ a(O, { className: "w-full", shouldFilter: !1, children: [
+          /* @__PURE__ */ a("div", { className: "p-space-02", children: [
+            /* @__PURE__ */ r(S, { shouldRender: (t == null ? void 0 : t.length) > 7, children: /* @__PURE__ */ r(
+              _,
+              {
+                placeholder: i,
+                value: k,
+                onValueChange: (o) => {
+                  C(o), w()(o);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ a($, { children: [
+              /* @__PURE__ */ r(A, { children: "No results found." }),
+              /* @__PURE__ */ r(W, { options: y, dataTestId: m, onChange: c, selectedValues: n })
             ] })
           ] }),
-          /* @__PURE__ */ m(x, { shouldRender: !!(r != null && r.length), children: /* @__PURE__ */ m("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: /* @__PURE__ */ m(
-            v,
+          /* @__PURE__ */ r(S, { shouldRender: !!(n != null && n.length), children: /* @__PURE__ */ r("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: /* @__PURE__ */ r(
+            P,
             {
               colors: "gray",
               variant: "ghost",
               size: "sm",
               onClick: () => {
-                c([]), f();
+                c([]), x();
               },
               className: "flex-1",
-              children: j.Shared.reset
+              children: B.Shared.reset
             }
           ) }) })
         ] }) })
@@ -98,6 +83,37 @@ function X({
     }
   );
 }
+function W({ options: i, selectedValues: t, dataTestId: n, onChange: c }) {
+  var m;
+  const l = g.useRef(null), f = R({
+    count: i.length,
+    getScrollElement: () => l.current,
+    estimateSize: () => 36,
+    // Adjust based on your row height
+    overscan: 10
+    // Improves scroll performance
+  });
+  return /* @__PURE__ */ r(G, { ref: l, className: "overflow-auto", children: (m = f.getVirtualItems()) == null ? void 0 : m.map((s, p) => {
+    const e = i[s.index], d = t == null ? void 0 : t.includes(e.value);
+    return /* @__PURE__ */ a(
+      T,
+      {
+        "data-testid": `${n}-${p}`,
+        className: "flex gap-space-02",
+        onSelect: () => {
+          const u = d ? t.filter((h) => h !== e.value) : [...t, e.value];
+          c(u);
+        },
+        children: [
+          e.icon && /* @__PURE__ */ r(e.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ r("span", { children: e.label }),
+          /* @__PURE__ */ r(F, { className: "ms-auto", checked: d })
+        ]
+      },
+      e.value
+    );
+  }) });
+}
 export {
-  X as MultiSelect
+  hr as MultiSelect
 };