@lizzelabs/react-harmony 1.0.0 → 1.0.1

package/dist/piece-Mpz6AD6r.js

@@ -0,0 +1,221 @@
+import { useMemo as i, useId as b, useInsertionEffect as y, memo as k } from "react";
+import { u as w, j as r, i as P } from "./piece-provider-DTglah_F.js";
+import { a as x, f as S } from "./fillObjectWithDefaults-AoLKqRgC.js";
+import { S as R } from "./styles-DofTX6nZ.js";
+const I = [
+  "as",
+  "kind",
+  "aria",
+  "withStyle",
+  "direction",
+  "alignContent",
+  "justifyContent",
+  "justifyItems",
+  "alignItems",
+  "display",
+  "contentColumns",
+  "contentRows",
+  "atColumn",
+  "atRow",
+  "fontSize",
+  "flex",
+  "gap",
+  "textColor",
+  "backgroundColor",
+  "background",
+  "margin",
+  "padding"
+], s = {
+  pickComponentProps: (e) => {
+    const n = { ...e };
+    for (const t of I)
+      delete n[t];
+    return {
+      ...n,
+      ...e.aria
+    };
+  },
+  pickComponentStyle: (e, n) => {
+    if (n)
+      return typeof n == "function" ? s.pickComponentStyle(e, n(e)) : Array.isArray(n) ? n.reduce(
+        (t, a) => ({
+          ...t,
+          ...typeof a == "function" ? a(e) : a
+        }),
+        {}
+      ) : n;
+  },
+  loadPositionProps: (e, n, t) => {
+    const a = [
+      {
+        enabled: e.flex !== void 0,
+        name: "flex",
+        value: e.flex
+      },
+      {
+        enabled: e.contentColumns !== void 0,
+        name: "gridTemplateColumns",
+        value: typeof e.contentColumns == "number" ? `repeat(${e.contentColumns}, 1fr)` : e.contentColumns
+      },
+      {
+        enabled: e.contentRows !== void 0,
+        name: "gridTemplateRows",
+        value: typeof e.contentRows == "number" ? `repeat(${e.contentRows}, 1fr)` : e.contentRows
+      },
+      {
+        enabled: e.atColumn !== void 0,
+        name: "gridColumn",
+        value: typeof e.atColumn == "number" ? `${e.atColumn} / ${e.atColumn + 1}` : e.atColumn
+      },
+      {
+        enabled: e.atRow !== void 0,
+        name: "gridRow",
+        value: typeof e.atRow == "number" ? `${e.atRow} / ${e.atRow + 1}` : e.atRow
+      },
+      {
+        enabled: e.height !== void 0,
+        name: "height",
+        value: e.height
+      },
+      {
+        enabled: e.width !== void 0,
+        name: "width",
+        value: e.width
+      },
+      {
+        enabled: e.display !== void 0,
+        name: "display",
+        value: e.display
+      },
+      {
+        enabled: e.direction !== void 0,
+        name: "flexDirection",
+        value: e.direction
+      },
+      {
+        enabled: e.alignContent !== void 0,
+        name: "alignContent",
+        value: e.alignContent
+      },
+      {
+        enabled: e.justifyContent !== void 0,
+        name: "justifyContent",
+        value: e.justifyContent
+      },
+      {
+        enabled: e.alignItems !== void 0,
+        name: "alignItems",
+        value: e.alignItems
+      },
+      {
+        enabled: e.justifyItems !== void 0,
+        name: "justifyItems",
+        value: e.justifyItems
+      },
+      {
+        enabled: e.fontSize !== void 0,
+        name: "fontSize",
+        value: typeof e.fontSize == "function" ? e.fontSize(t) : e.fontSize
+      },
+      {
+        enabled: e.gap !== void 0,
+        name: "gap",
+        value: e.gap
+      },
+      {
+        enabled: e.textColor !== void 0,
+        name: "color",
+        value: typeof e.textColor == "function" ? e.textColor(t) : e.textColor
+      },
+      {
+        enabled: e.background !== void 0,
+        name: "background",
+        value: typeof e.background == "function" ? e.background(t) : e.background
+      },
+      {
+        enabled: e.backgroundColor !== void 0,
+        name: "backgroundColor",
+        value: typeof e.backgroundColor == "function" ? e.backgroundColor(t) : e.backgroundColor
+      },
+      {
+        enabled: e.margin !== void 0,
+        name: "margin",
+        value: typeof e.margin == "function" ? e.margin(t) : e.margin
+      },
+      {
+        enabled: e.padding !== void 0,
+        name: "padding",
+        value: typeof e.padding == "function" ? e.padding(t) : e.padding
+      }
+    ], m = a.some((l) => l.enabled), u = a.reduce(
+      (l, d) => ({
+        ...l,
+        ...d.enabled ? {
+          [d.name]: d.value
+        } : {}
+      }),
+      {}
+    );
+    return !n && m === !1 ? void 0 : {
+      ...n,
+      ...u
+    };
+  }
+}, j = (e) => {
+  const { getContext: n, theme: t } = w(), a = i(() => new R(), []), m = b(), u = i(() => e.kind || "piece", [e.kind]), l = i(() => e.id || m, [e.id, m]), d = i(() => `${u}-${l}`, [u, l]), c = i(
+    () => ({
+      ...e,
+      kind: u,
+      id: l,
+      className: x(e.className, d)
+    }),
+    [e, u, l, d]
+  ), o = i(
+    () => n(c),
+    [n, c]
+  ), f = i(
+    () => s.loadPositionProps(
+      c,
+      s.pickComponentStyle(t, c.withStyle),
+      t
+    ),
+    [c, t]
+  ), v = i(
+    () => S(
+      {
+        className: `${c.className} ${o.className}`
+      },
+      o.defaults,
+      c
+    ),
+    [o.defaults, o.className, c]
+  ), g = i(
+    () => s.pickComponentProps(v),
+    [v]
+  ), C = v.as || "div";
+  return y(
+    function() {
+      return o.style && a.apply(o.style, o.className), f && a.apply(f, d), () => {
+        a.delete();
+      };
+    },
+    [
+      a,
+      o.style,
+      o.className,
+      f,
+      d,
+      f
+    ]
+  ), {
+    element: /* @__PURE__ */ r.jsx(C, { ...g })
+  };
+};
+function N(e) {
+  return j(e).element;
+}
+const A = k(N, P);
+export {
+  A as P,
+  j as u
+};