mada-design-system 0.5.11 → 0.5.13

package/index.es108.js

@@ -1,13 +1,324 @@
-import L from "./index.es191.js";
-const o = L("Close", [
-  [
-    "path",
-    {
-      d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
-      key: "14hqpl"
+import U, { useMemo as A, useRef as z, useEffect as E, useContext as le, useState as ue } from "react";
+import { KeyboardCode as O, useDndContext as fe, useDroppable as ge, useDraggable as pe, getClientRect as be } from "./index.es107.js";
+import { useUniqueId as ve, useIsomorphicLayoutEffect as V, useCombinedRefs as me, isKeyboardEvent as Ie, CSS as Y } from "./index.es187.js";
+function $(e, r, t) {
+  const n = e.slice();
+  return n.splice(t < 0 ? n.length + t : t, 0, n.splice(r, 1)[0]), n;
+}
+function xe(e, r) {
+  return e.reduce((t, n, i) => {
+    const c = r.get(n);
+    return c && (t[i] = c), t;
+  }, Array(e.length));
+}
+function N(e) {
+  return e !== null && e >= 0;
+}
+function ye(e, r) {
+  if (e === r)
+    return !0;
+  if (e.length !== r.length)
+    return !1;
+  for (let t = 0; t < e.length; t++)
+    if (e[t] !== r[t])
+      return !1;
+  return !0;
+}
+function he(e) {
+  return typeof e == "boolean" ? {
+    draggable: e,
+    droppable: e
+  } : e;
+}
+const j = (e) => {
+  let {
+    rects: r,
+    activeIndex: t,
+    overIndex: n,
+    index: i
+  } = e;
+  const c = $(r, n, t), o = r[i], a = c[i];
+  return !a || !o ? null : {
+    x: a.left - o.left,
+    y: a.top - o.top,
+    scaleX: a.width / o.width,
+    scaleY: a.height / o.height
+  };
+}, G = "Sortable", k = /* @__PURE__ */ U.createContext({
+  activeIndex: -1,
+  containerId: G,
+  disableTransforms: !1,
+  items: [],
+  overIndex: -1,
+  useDragOverlay: !1,
+  sortedRects: [],
+  strategy: j,
+  disabled: {
+    draggable: !1,
+    droppable: !1
+  }
+});
+function _e(e) {
+  let {
+    children: r,
+    id: t,
+    items: n,
+    strategy: i = j,
+    disabled: c = !1
+  } = e;
+  const {
+    active: o,
+    dragOverlay: a,
+    droppableRects: f,
+    over: l,
+    measureDroppableContainers: s
+  } = fe(), p = ve(G, t), v = a.rect !== null, u = A(() => n.map((m) => typeof m == "object" && "id" in m ? m.id : m), [n]), S = o != null, y = o ? u.indexOf(o.id) : -1, b = l ? u.indexOf(l.id) : -1, T = z(u), h = !ye(u, T.current), D = b !== -1 && y === -1 || h, g = he(c);
+  V(() => {
+    h && S && s(u);
+  }, [h, u, S, s]), E(() => {
+    T.current = u;
+  }, [u]);
+  const R = A(
+    () => ({
+      activeIndex: y,
+      containerId: p,
+      disabled: g,
+      disableTransforms: D,
+      items: u,
+      overIndex: b,
+      useDragOverlay: v,
+      sortedRects: xe(u, f),
+      strategy: i
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [y, p, g.draggable, g.droppable, D, u, b, f, v, i]
+  );
+  return U.createElement(k.Provider, {
+    value: R
+  }, r);
+}
+const De = (e) => {
+  let {
+    id: r,
+    items: t,
+    activeIndex: n,
+    overIndex: i
+  } = e;
+  return $(t, n, i).indexOf(r);
+}, Re = (e) => {
+  let {
+    containerId: r,
+    isSorting: t,
+    wasDragging: n,
+    index: i,
+    items: c,
+    newIndex: o,
+    previousItems: a,
+    previousContainerId: f,
+    transition: l
+  } = e;
+  return !l || !n || a !== c && i === o ? !1 : t ? !0 : o !== i && r === f;
+}, Ce = {
+  duration: 200,
+  easing: "ease"
+}, J = "transform", we = /* @__PURE__ */ Y.Transition.toString({
+  property: J,
+  duration: 0,
+  easing: "linear"
+}), Se = {
+  roleDescription: "sortable"
+};
+function Te(e) {
+  let {
+    disabled: r,
+    index: t,
+    node: n,
+    rect: i
+  } = e;
+  const [c, o] = ue(null), a = z(t);
+  return V(() => {
+    if (!r && t !== a.current && n.current) {
+      const f = i.current;
+      if (f) {
+        const l = be(n.current, {
+          ignoreTransform: !0
+        }), s = {
+          x: f.left - l.left,
+          y: f.top - l.top,
+          scaleX: f.width / l.width,
+          scaleY: f.height / l.height
+        };
+        (s.x || s.y) && o(s);
+      }
+    }
+    t !== a.current && (a.current = t);
+  }, [r, t, n, i]), E(() => {
+    c && o(null);
+  }, [c]), c;
+}
+function ze(e) {
+  let {
+    animateLayoutChanges: r = Re,
+    attributes: t,
+    disabled: n,
+    data: i,
+    getNewIndex: c = De,
+    id: o,
+    strategy: a,
+    resizeObserverConfig: f,
+    transition: l = Ce
+  } = e;
+  const {
+    items: s,
+    containerId: p,
+    activeIndex: v,
+    disabled: u,
+    disableTransforms: S,
+    sortedRects: y,
+    overIndex: b,
+    useDragOverlay: T,
+    strategy: h
+  } = le(k), D = Oe(n, u), g = s.indexOf(o), R = A(() => ({
+    sortable: {
+      containerId: p,
+      index: g,
+      items: s
+    },
+    ...i
+  }), [p, i, g, s]), m = A(() => s.slice(s.indexOf(o)), [s, o]), {
+    rect: P,
+    node: M,
+    isOver: Q,
+    setNodeRef: X
+  } = ge({
+    id: o,
+    data: R,
+    disabled: D.droppable,
+    resizeObserverConfig: {
+      updateMeasurementsFor: m,
+      ...f
+    }
+  }), {
+    active: C,
+    activatorEvent: W,
+    activeNodeRect: Z,
+    attributes: ee,
+    setNodeRef: q,
+    listeners: te,
+    isDragging: L,
+    over: re,
+    setActivatorNodeRef: ne,
+    transform: oe
+  } = pe({
+    id: o,
+    data: R,
+    attributes: {
+      ...Se,
+      ...t
+    },
+    disabled: D.draggable
+  }), se = me(X, q), I = !!C, B = I && !S && N(v) && N(b), F = !T && L, H = F && B ? oe : null, ie = B ? H ?? (a ?? h)({
+    rects: y,
+    activeNodeRect: Z,
+    activeIndex: v,
+    overIndex: b,
+    index: g
+  }) : null, w = N(v) && N(b) ? c({
+    id: o,
+    items: s,
+    activeIndex: v,
+    overIndex: b
+  }) : g, x = C == null ? void 0 : C.id, d = z({
+    activeId: x,
+    items: s,
+    newIndex: w,
+    containerId: p
+  }), ae = s !== d.current.items, K = r({
+    active: C,
+    containerId: p,
+    isDragging: L,
+    isSorting: I,
+    id: o,
+    index: g,
+    items: s,
+    newIndex: d.current.newIndex,
+    previousItems: d.current.items,
+    previousContainerId: d.current.containerId,
+    transition: l,
+    wasDragging: d.current.activeId != null
+  }), _ = Te({
+    disabled: !K,
+    index: g,
+    node: M,
+    rect: P
+  });
+  return E(() => {
+    I && d.current.newIndex !== w && (d.current.newIndex = w), p !== d.current.containerId && (d.current.containerId = p), s !== d.current.items && (d.current.items = s);
+  }, [I, w, p, s]), E(() => {
+    if (x === d.current.activeId)
+      return;
+    if (x != null && d.current.activeId == null) {
+      d.current.activeId = x;
+      return;
     }
-  ]
-]);
+    const ce = setTimeout(() => {
+      d.current.activeId = x;
+    }, 50);
+    return () => clearTimeout(ce);
+  }, [x]), {
+    active: C,
+    activeIndex: v,
+    attributes: ee,
+    data: R,
+    rect: P,
+    index: g,
+    newIndex: w,
+    items: s,
+    isOver: Q,
+    isSorting: I,
+    isDragging: L,
+    listeners: te,
+    node: M,
+    overIndex: b,
+    over: re,
+    setNodeRef: se,
+    setActivatorNodeRef: ne,
+    setDroppableNodeRef: X,
+    setDraggableNodeRef: q,
+    transform: _ ?? ie,
+    transition: de()
+  };
+  function de() {
+    if (
+      // Temporarily disable transitions for a single frame to set up derived transforms
+      _ || // Or to prevent items jumping to back to their "new" position when items change
+      ae && d.current.newIndex === g
+    )
+      return we;
+    if (!(F && !Ie(W) || !l) && (I || K))
+      return Y.Transition.toString({
+        ...l,
+        property: J
+      });
+  }
+}
+function Oe(e, r) {
+  var t, n;
+  return typeof e == "boolean" ? {
+    draggable: e,
+    // Backwards compatibility
+    droppable: !1
+  } : {
+    draggable: (t = e == null ? void 0 : e.draggable) != null ? t : r.draggable,
+    droppable: (n = e == null ? void 0 : e.droppable) != null ? n : r.droppable
+  };
+}
+O.Down, O.Right, O.Up, O.Left;
 export {
-  o as default
+  _e as SortableContext,
+  $ as arrayMove,
+  Re as defaultAnimateLayoutChanges,
+  De as defaultNewIndexGetter,
+  j as rectSortingStrategy,
+  ze as useSortable
 };

package/index.es109.js

@@ -1,13 +1,13 @@
-import e from "./index.es191.js";
-const r = e("Refresh", [
+import L from "./index.es185.js";
+const o = L("Close", [
   [
     "path",
     {
-      d: "M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z",
-      key: "1wsech"
+      d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
+      key: "14hqpl"
     }
   ]
 ]);
 export {
-  r as default
+  o as default
 };

package/index.es11.js

@@ -1,20 +1,162 @@
-import { jsx as r } from "react/jsx-runtime";
-import o from "./index.es86.js";
-import { cn as a } from "./index.es85.js";
-const s = () => {
-  const e = o((t) => t.isActive);
-  return /* @__PURE__ */ r(
-    "div",
+import { jsxs as o, jsx as e, Fragment as T } from "react/jsx-runtime";
+import { useVirtualizer as _ } from "./index.es113.js";
+import h, { useMemo as L, useEffect as $ } from "react";
+import { useToggle as A } from "./index.es104.js";
+import { strings as k } from "./index.es98.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.es65.js";
+import { debounce as V, cn as ee } from "./index.es86.js";
+import re from "./index.es102.js";
+function ve({
+  placeholder: l,
+  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,
     {
-      className: a({
-        "fixed  left-0 top-0 z-[1000] flex h-full w-full items-center justify-center opacity-70": !0,
-        grayscale: e,
-        "grayscale-0": !e
-      }),
-      children: /* @__PURE__ */ r("div", { className: "z-[1001] block h-60 w-60 animate-spin rounded-[50%] border-[3px] border-solid border-[transparent] border-t-green-800 before:absolute before:bottom-2 before:left-2 before:right-2 before:top-2 before:animate-spin before:rounded-[50%] before:border-[3px] before:border-solid before:border-[transparent] before:border-t-slate-800 after:absolute after:bottom-6 after:left-6 after:right-6 after:top-6 after:animate-spin after:rounded-[50%] after:border-[3px] after:border-solid after:border-[transparent] after:border-t-orange-600" })
+      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,
+      {
+        "data-testid": `${a}-${v}`,
+        className: "flex gap-space-02",
+        onSelect: () => {
+          const b = f ? r.filter((N) => N !== n.value) : [...r, n.value];
+          c(b);
+        },
+        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 })
+        ]
+      },
+      n.value
+    );
+  }) });
+}
 export {
-  s as PageLoader
+  ve as MultiSelect
 };

package/index.es110.js

@@ -1,13 +1,13 @@
-import H from "./index.es191.js";
-const e = H("AddBox", [
+import e from "./index.es185.js";
+const r = e("Refresh", [
   [
     "path",
     {
-      d: "M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM11 17H13V13H17V11H13V7H11V11H7V13H11V17Z",
-      key: "eelf3i"
+      d: "M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z",
+      key: "1wsech"
     }
   ]
 ]);
 export {
-  e as default
+  r as default
 };

package/index.es111.js

@@ -1,10 +1,13 @@
-import H from "./index.es191.js";
-const t = H("DashboardCustomize", [
-  ["path", { d: "M3 11H11V3H3V11ZM5 5H9V9H5V5Z", key: "1w78ug" }],
-  ["path", { d: "M13 3V11H21V3H13ZM19 9H15V5H19V9Z", key: "tprguu" }],
-  ["path", { d: "M3 21H11V13H3V21ZM5 15H9V19H5V15Z", key: "3xlfiv" }],
-  ["path", { d: "M18 13H16V16H13V18H16V21H18V18H21V16H18V13Z", key: "lwgil4" }]
+import H from "./index.es185.js";
+const e = H("AddBox", [
+  [
+    "path",
+    {
+      d: "M19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19ZM11 17H13V13H17V11H13V7H11V11H7V13H11V17Z",
+      key: "eelf3i"
+    }
+  ]
 ]);
 export {
-  t as default
+  e as default
 };

package/index.es112.js

@@ -1,35 +1,10 @@
-import * as r from "react";
-import { flushSync as c } from "react-dom";
-import { observeElementRect as f, observeElementOffset as i, elementScroll as m, Virtualizer as d } from "./index.es183.js";
-import { defaultKeyExtractor as R, defaultRangeExtractor as g, measureElement as z } from "./index.es183.js";
-const a = typeof document < "u" ? r.useLayoutEffect : r.useEffect;
-function p(e) {
-  const n = r.useReducer(() => ({}), {})[1], o = {
-    ...e,
-    onChange: (l, u) => {
-      var s;
-      u ? c(n) : n(), (s = e.onChange) == null || s.call(e, l, u);
-    }
-  }, [t] = r.useState(
-    () => new d(o)
-  );
-  return t.setOptions(o), a(() => t._didMount(), []), a(() => t._willUpdate()), t;
-}
-function h(e) {
-  return p({
-    observeElementRect: f,
-    observeElementOffset: i,
-    scrollToFn: m,
-    ...e
-  });
-}
+import H from "./index.es185.js";
+const t = H("DashboardCustomize", [
+  ["path", { d: "M3 11H11V3H3V11ZM5 5H9V9H5V5Z", key: "1w78ug" }],
+  ["path", { d: "M13 3V11H21V3H13ZM19 9H15V5H19V9Z", key: "tprguu" }],
+  ["path", { d: "M3 21H11V13H3V21ZM5 15H9V19H5V15Z", key: "3xlfiv" }],
+  ["path", { d: "M18 13H16V16H13V18H16V21H18V18H21V16H18V13Z", key: "lwgil4" }]
+]);
 export {
-  d as Virtualizer,
-  R as defaultKeyExtractor,
-  g as defaultRangeExtractor,
-  m as elementScroll,
-  z as measureElement,
-  i as observeElementOffset,
-  f as observeElementRect,
-  h as useVirtualizer
+  t as default
 };