mada-design-system 0.0.9

package/index.es89.js

@@ -0,0 +1,37 @@
+import { clsx as O } from "./index.es86.js";
+const m = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, y = O, j = (e, l) => (n) => {
+  var s;
+  if ((l == null ? void 0 : l.variants) == null)
+    return y(e, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+  const { variants: r, defaultVariants: d } = l, V = Object.keys(r).map((t) => {
+    const a = n == null ? void 0 : n[t], u = d == null ? void 0 : d[t];
+    if (a === null)
+      return null;
+    const i = m(a) || m(u);
+    return r[t][i];
+  }), v = n && Object.entries(n).reduce((t, a) => {
+    let [u, i] = a;
+    return i === void 0 || (t[u] = i), t;
+  }, {}), N = l == null || (s = l.compoundVariants) === null || s === void 0 ? void 0 : s.reduce((t, a) => {
+    let { class: u, className: i, ...f } = a;
+    return Object.entries(f).every((C) => {
+      let [c, o] = C;
+      return Array.isArray(o) ? o.includes({
+        ...d,
+        ...v
+      }[c]) : {
+        ...d,
+        ...v
+      }[c] === o;
+    }) ? [
+      ...t,
+      u,
+      i
+    ] : t;
+  }, []);
+  return y(e, V, N, n == null ? void 0 : n.class, n == null ? void 0 : n.className);
+};
+export {
+  j as cva,
+  y as cx
+};

package/index.es9.js

@@ -0,0 +1,198 @@
+import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { useSensor as O, useSensors as V, DndContext as _, closestCenter as q, DragOverlay as J, MouseSensor as K, TouchSensor as Q } from "./index.es90.js";
+import { SortableContext as U, useSortable as X, arrayMove as Y } from "./index.es91.js";
+import { useState as A } from "react";
+import { createPortal as W } from "react-dom";
+import { cn as j } from "./index.es69.js";
+import { strings as Z } from "./index.es80.js";
+import E from "./index.es3.js";
+import { Button as y } from "./index.es23.js";
+import { Separator as M } from "./index.es49.js";
+import { Stack as ee } from "./index.es41.js";
+import re from "./index.es92.js";
+import te from "./index.es93.js";
+import se from "./index.es94.js";
+import ie from "./index.es95.js";
+function De({
+  configs: s,
+  isEditMode: o,
+  componentMap: p,
+  onConfigChange: g,
+  onOrderChange: v,
+  onSave: c,
+  onCancel: D,
+  onReset: z,
+  onAdd: C,
+  isSidePanelShown: I,
+  isSaving: u
+}) {
+  const [d, w] = A(null), [S, k] = A(null), $ = O(K, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), B = O(Q, {
+    activationConstraint: {
+      delay: 100,
+      tolerance: 5
+    }
+  }), H = V($, B), P = (e) => {
+    w(e.active.id);
+  }, R = (e) => {
+    const { over: t } = e;
+    k(t ? t.id : null);
+  }, F = (e) => {
+    const { active: t, over: i } = e;
+    if (w(null), k(null), !i || t.id === i.id)
+      return;
+    if (i.id.toString().startsWith("placeholder-")) {
+      const l = parseInt(i.id.toString().split("-")[1]), h = s.find((m) => m.alias === t.id);
+      if (h && h.size === "half") {
+        const m = s.findIndex((L) => L.alias === t.id), N = [...s];
+        N.splice(l + 1, 0, ...N.splice(m, 1)), v(N);
+      }
+      return;
+    }
+    const a = s.findIndex((l) => l.alias === t.id), n = s.findIndex((l) => l.alias === i.id), b = Y(s, a, n);
+    v(b);
+  }, x = s.filter((e) => (e == null ? void 0 : e.isVisible) && p[e.alias]), G = Array(x.length).fill(0).map((e, t) => `placeholder-${t}`);
+  return /* @__PURE__ */ f(T, { children: [
+    u && W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: j(
+            "fixed inset-0 z-[60000] bg-black transition-all duration-200",
+            u ? "opacity-50" : "pointer-events-none opacity-0"
+          )
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ f(
+      _,
+      {
+        sensors: H,
+        collisionDetection: q,
+        onDragStart: P,
+        onDragEnd: F,
+        onDragOver: R,
+        children: [
+          /* @__PURE__ */ r(U, { items: [...s.map((e) => e.alias), ...G], children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 items-center justify-center gap-space-05 px-space-04 pt-space-04 sm:grid-cols-2 sm:items-stretch sm:justify-stretch sm:px-space-06 xl:px-space-05", children: (() => {
+            let e = 0;
+            const t = [], i = s.find((a) => a.alias === d);
+            for (let a = 0; a < x.length; a++) {
+              const n = x[a], b = p[n.alias];
+              if (!b)
+                continue;
+              t.push(
+                /* @__PURE__ */ r(
+                  b,
+                  {
+                    config: n,
+                    isEditMode: o,
+                    onConfigChange: g,
+                    isOver: n.alias === S,
+                    isDragging: n.alias === d
+                  },
+                  n.alias
+                )
+              );
+              const l = n.size === "full" ? 2 : 1;
+              if (e += l, o && n.size === "half" && e % 2 === 1) {
+                const h = x[a + 1];
+                if (!h || h.size === "full") {
+                  const m = `placeholder-${a}`;
+                  t.push(
+                    /* @__PURE__ */ r(
+                      ae,
+                      {
+                        id: m,
+                        isEditMode: o,
+                        activeId: d,
+                        overId: S,
+                        draggedWidgetSize: i == null ? void 0 : i.size
+                      },
+                      m
+                    )
+                  ), e += 1;
+                }
+              }
+            }
+            return t;
+          })() }) }),
+          /* @__PURE__ */ r(J, { children: d && (() => {
+            const e = s.find((i) => i.alias === d);
+            if (!e)
+              return null;
+            const t = p[e.alias];
+            return t ? /* @__PURE__ */ r(
+              t,
+              {
+                config: e,
+                isEditMode: o,
+                onConfigChange: g,
+                isDragOverlay: !0,
+                isOver: e.alias === S,
+                isDragging: e.alias === d
+              },
+              e.alias
+            ) : null;
+          })() })
+        ]
+      }
+    ),
+    W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: `fixed bottom-4 left-0 right-0 flex justify-center transition-all duration-300 ${o ? "z-[50000] opacity-100" : "pointer-events-none opacity-0"}
+                    ${I ? "hidden xl:flex" : ""}
+                    `,
+          children: /* @__PURE__ */ f(
+            "div",
+            {
+              className: `flex transform items-center gap-space-04 rounded-full border-t bg-background-brand p-space-02 shadow-card-shadow transition-all duration-300 ${o ? "translate-y-[-10px]" : "translate-y-full"}`,
+              children: [
+                /* @__PURE__ */ f(ee, { gap: 4, alignItems: "center", children: [
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: D, children: /* @__PURE__ */ r(re, {}) }),
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: z, children: /* @__PURE__ */ r(te, {}) }),
+                  /* @__PURE__ */ r(M, { orientation: "vertical", className: "h-space-06" })
+                ] }),
+                /* @__PURE__ */ r(y, { variant: "outline", colors: "primary", size: "icon-sm", className: "xl:hidden", onClick: C, children: /* @__PURE__ */ r(se, {}) }),
+                /* @__PURE__ */ f(y, { variant: "default", onClick: c, size: "sm", colors: "primary", className: "gap-space-02", disabled: u, children: [
+                  /* @__PURE__ */ r(ie, { className: "size-space-05" }),
+                  Z.DragAndDrop.SaveCustomization,
+                  u && /* @__PURE__ */ r(E, {})
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+const ae = ({ id: s, isEditMode: o, activeId: p, overId: g, draggedWidgetSize: v }) => {
+  const c = v === "half", { attributes: D, listeners: z, isOver: C, setNodeRef: I } = X({
+    id: s,
+    disabled: !o || !c
+  });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: I,
+      ...c ? D : {},
+      ...c ? z : {},
+      className: j(
+        "hidden sm:block",
+        "h-[440px] rounded-3 border-2 border-dashed transition-all duration-200",
+        C || g === s ? "border-primary" : "border-border",
+        !c && p ? "cursor-not-allowed" : "cursor-default"
+      )
+    }
+  );
+};
+export {
+  De as DraggableGrid
+};