mada-design-system 0.0.11 → 0.1.1

package/index.es10.js

@@ -1,81 +1,91 @@
-import { jsxs as a, jsx as r, Fragment as z } from "react/jsx-runtime";
-import { useVirtualizer as R } from "./index.es109.js";
-import g, { useCallback as I, useMemo as L } from "react";
-import { useToggle as j } from "./index.es100.js";
-import { strings as B } from "./index.es88.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.es50.js";
-import { selectVariants as J } from "./index.es55.js";
-import { debounce as K, cn as Q } from "./index.es76.js";
-import U from "./index.es98.js";
+import { jsxs as a, jsx as r, Fragment as R } from "react/jsx-runtime";
+import { useVirtualizer as I } from "./index.es105.js";
+import x, { useCallback as L, useMemo as j } from "react";
+import { useToggle as B } from "./index.es96.js";
+import { strings as E } from "./index.es90.js";
+import M from "./index.es3.js";
+import { ShouldRender as k } from "./index.es14.js";
+import { Badge as P } from "./index.es20.js";
+import { Button as F } from "./index.es22.js";
+import { Checkbox as O } from "./index.es25.js";
+import { Command as _, CommandInput as $, CommandList as A, CommandEmpty as G, CommandGroup as T, CommandItem as q } from "./index.es27.js";
+import { Popover as D, PopoverTrigger as H, PopoverContent as J } from "./index.es52.js";
+import { selectVariants as K } from "./index.es57.js";
+import { debounce as Q, cn as U } from "./index.es78.js";
+import W from "./index.es93.js";
 function hr({
   placeholder: i,
   options: t,
   selectedValues: n,
-  onChange: c,
-  disabled: l,
-  size: f = "default",
-  dataTestId: m = "",
-  rounded: s = "default",
+  onChange: m,
+  disabled: s,
+  size: c = "default",
+  dataTestId: l = "",
+  rounded: d = "default",
   variant: p = "outline",
-  colors: e = "default",
-  isLoading: d = !1,
-  className: u
+  colors: u = "default",
+  isLoading: o = !1,
+  className: f,
+  checkboxSize: g = "default"
 }) {
-  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]);
+  var S;
+  const [h, b] = B(!1), [v, C] = x.useState(""), [w, N] = x.useState(""), z = L(() => Q((e) => C(e), 300), []), y = j(() => t.filter((e) => e.label.toLowerCase().includes(v.toLowerCase())), [t, v]);
   return /* @__PURE__ */ a(
-    q,
+    D,
     {
       open: h,
       onOpenChange: () => {
-        x(), h || (C(""), v(""));
+        b(), h || (N(""), C(""));
       },
       children: [
-        /* @__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(H, { asChild: !0, disabled: s, "data-testid": l, children: /* @__PURE__ */ a("button", { className: U(K({ variant: p, colors: u, size: c, rounded: d }), f), 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,
+          (n == null ? void 0 : n.length) > 0 && /* @__PURE__ */ r(R, { 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 }) : (S = t == null ? void 0 : t.filter((e) => n == null ? void 0 : n.includes(e.value))) == null ? void 0 : S.map((e) => /* @__PURE__ */ r(P, { colors: "gray", variant: "ghost", size: "sm", children: e.label }, e.value)) }),
+          o ? /* @__PURE__ */ r(M, {}) : /* @__PURE__ */ r(
+            W,
             {
               className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
               "aria-hidden": !0
             }
           )
         ] }) }),
-        /* @__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__ */ r(J, { className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)]   p-space-00", align: "start", children: /* @__PURE__ */ a(_, { 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(
-              _,
+            /* @__PURE__ */ r(k, { shouldRender: (t == null ? void 0 : t.length) > 7, children: /* @__PURE__ */ r(
+              $,
               {
                 placeholder: i,
-                value: k,
-                onValueChange: (o) => {
-                  C(o), w()(o);
+                value: w,
+                onValueChange: (e) => {
+                  N(e), z()(e);
                 }
               }
             ) }),
-            /* @__PURE__ */ a($, { children: [
-              /* @__PURE__ */ r(A, { children: "No results found." }),
-              /* @__PURE__ */ r(W, { options: y, dataTestId: m, onChange: c, selectedValues: n })
+            /* @__PURE__ */ a(A, { children: [
+              /* @__PURE__ */ r(G, { children: "No results found." }),
+              /* @__PURE__ */ r(
+                X,
+                {
+                  options: y,
+                  dataTestId: l,
+                  onChange: m,
+                  selectedValues: n,
+                  checkboxSize: g
+                }
+              )
             ] })
           ] }),
-          /* @__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,
+          /* @__PURE__ */ r(k, { 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(
+            F,
             {
-              colors: "gray",
-              variant: "ghost",
+              colors: "neutral",
+              variant: "text",
               size: "sm",
               onClick: () => {
-                c([]), x();
+                m([]), b();
               },
               className: "flex-1",
-              children: B.Shared.reset
+              children: E.Shared.reset
             }
           ) }) })
         ] }) })
@@ -83,34 +93,40 @@ function hr({
     }
   );
 }
-function W({ options: i, selectedValues: t, dataTestId: n, onChange: c }) {
-  var m;
-  const l = g.useRef(null), f = R({
+function X({
+  options: i,
+  selectedValues: t,
+  dataTestId: n,
+  onChange: m,
+  checkboxSize: s
+}) {
+  var d;
+  const c = x.useRef(null), l = I({
     count: i.length,
-    getScrollElement: () => l.current,
+    getScrollElement: () => c.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__ */ r(T, { ref: c, className: "overflow-auto", children: (d = l.getVirtualItems()) == null ? void 0 : d.map((p, u) => {
+    const o = i[p.index], f = t == null ? void 0 : t.includes(o.value);
     return /* @__PURE__ */ a(
-      T,
+      q,
       {
-        "data-testid": `${n}-${p}`,
+        "data-testid": `${n}-${u}`,
         className: "flex gap-space-02",
         onSelect: () => {
-          const u = d ? t.filter((h) => h !== e.value) : [...t, e.value];
-          c(u);
+          const g = f ? t.filter((h) => h !== o.value) : [...t, o.value];
+          m(g);
         },
         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 })
+          o.icon && /* @__PURE__ */ r(o.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ r("span", { children: o.label }),
+          /* @__PURE__ */ r(O, { className: "ms-auto", checked: f, size: s })
         ]
       },
-      e.value
+      o.value
     );
   }) });
 }

package/index.es100.js

@@ -1,26 +1,324 @@
-import { useState as o, useCallback as l, useLayoutEffect as s, useEffect as f } from "react";
-import "./index.es170.js";
-var h = typeof window < "u" ? s : f, m = typeof window > "u";
-function w(n, e) {
-  const a = typeof e == "boolean" ? e : (e == null ? void 0 : e.defaultValue) ?? !1, r = typeof e == "boolean" ? void 0 : (e == null ? void 0 : e.initializeWithValue) ?? void 0, u = (t) => m ? a : window.matchMedia(t).matches, [d, c] = o(() => r ? u(n) : a);
-  function i() {
-    c(u(n));
+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.es99.js";
+import { useUniqueId as ve, useIsomorphicLayoutEffect as V, useCombinedRefs as me, isKeyboardEvent as Ie, CSS as Y } from "./index.es169.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
   }
-  return h(() => {
-    const t = window.matchMedia(n);
-    return i(), t.addListener ? t.addListener(i) : t.addEventListener("change", i), () => {
-      t.removeListener ? t.removeListener(i) : t.removeEventListener("change", i);
-    };
-  }, [n]), d;
-}
-function L(n) {
-  const [e, a] = o(!!n), r = l(() => {
-    a((u) => !u);
-  }, []);
-  return [e, r, a];
+});
+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 {
-  h as useIsomorphicLayoutEffect,
-  w as useMediaQuery,
-  L as useToggle
+  _e as SortableContext,
+  $ as arrayMove,
+  Re as defaultAnimateLayoutChanges,
+  De as defaultNewIndexGetter,
+  j as rectSortingStrategy,
+  ze as useSortable
 };