@pagehub/sdk 0.1.5 → 0.1.7

package/dist/chunks/ColorInput-BSfMNt86.js

@@ -0,0 +1,187 @@
+import { jsxs as z, jsx as o } from "react/jsx-runtime";
+import { ROOT_NODE as J } from "@craftjs/utils";
+import { useEditor as Q, useNode as U } from "@craftjs/core";
+import { u as I, V as X, E as Y, g as Z, dL as ee, r as te, a as oe, p as re, b as ne, c as A, C as se, aw as ae, e as le } from "./index-C66dAl3Q.js";
+import { useState as B, useRef as k, useEffect as ie, useMemo as O, useCallback as ce } from "react";
+import { createPortal as ue } from "react-dom";
+import { T as de } from "./TokenPicker-Q0LToF_p.js";
+import { f as pe } from "./FloatingPanel-DJP5Vhua.js";
+import { c as me, T as fe } from "./uiPrimitives-BtohldWg.js";
+import { f as he } from "./formatStorage-C3o2s3dk.js";
+const Le = (c) => {
+  const {
+    propKey: r,
+    label: u = "",
+    prefix: s = "",
+    index: d = null,
+    propItemKey: p = "",
+    propType: a = "class",
+    showPalette: Ce = !0,
+    onChange: v = () => {
+    },
+    labelHide: F = !1,
+    inline: ge = !1,
+    inputWidth: we = "",
+    labelWidth: K = ""
+  } = c, [C, m] = B(!1), [g, W] = B(null), x = k(null);
+  ie(() => {
+    if (!C) return;
+    const e = () => {
+      var L;
+      const t = (L = x.current) == null ? void 0 : L.getBoundingClientRect();
+      t && W({
+        top: t.bottom + 4,
+        right: window.innerWidth - t.right
+      });
+    };
+    return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
+    };
+  }, [C]);
+  const y = I(X), f = I(Y).dark ?? !1, { actions: w, query: l } = Q(), {
+    actions: { setProp: b },
+    nodeProps: j,
+    id: P
+  } = U((e) => {
+    var t;
+    return {
+      nodeProps: ((t = e.data) == null ? void 0 : t.props) || {},
+      id: e.id
+    };
+  }), { value: D } = Z(c, y, j, f), n = D || "", h = ee(), M = O(() => {
+    var e;
+    if (h && h.length > 0) return h;
+    try {
+      const t = l.node(J).get();
+      return te(((e = t == null ? void 0 : t.data) == null ? void 0 : e.props) || {}).palette;
+    } catch {
+      return [];
+    }
+  }, [h, l]), E = oe(n, s), [, N] = re(E, s), q = ne(E, s, M), T = !!String(n ?? "").trim(), V = q.backgroundColor ?? "", H = !T || me(V), R = O(() => {
+    const e = String(n ?? "").trim();
+    if (!e) return "";
+    const t = e.match(/palette:(.+)$/);
+    return t ? t[1] : e;
+  }, [n]), i = a === "class" ? le(y) : void 0, $ = (e) => {
+    if (!e) return;
+    const t = he(e, s);
+    A({
+      propKey: r,
+      index: d,
+      propItemKey: p,
+      propType: a,
+      value: t,
+      setProp: b,
+      query: l,
+      actions: w,
+      nodeId: P,
+      ...a === "class" && i != null ? { view: i, classDark: f } : {}
+    }), v(N, t);
+  }, G = k(null), _ = n && n.includes("palette:") ? n : N, S = ce(() => {
+    A({
+      propKey: r,
+      index: d,
+      propItemKey: p,
+      propType: a,
+      value: "",
+      setProp: b,
+      query: l,
+      actions: w,
+      nodeId: P,
+      ...a === "class" && i != null ? { view: i, classDark: f } : {}
+    }), v("", ""), m(!1);
+  }, [
+    w,
+    f,
+    i,
+    P,
+    d,
+    v,
+    p,
+    r,
+    a,
+    l,
+    b
+  ]);
+  return /* @__PURE__ */ z("div", { ref: G, className: "relative", children: [
+    /* @__PURE__ */ o(
+      se,
+      {
+        variant: "swatch",
+        label: F ? void 0 : u,
+        onLabelClick: () => m((e) => !e),
+        index: d,
+        propType: a,
+        propKey: r,
+        propItemKey: p,
+        labelWidth: K,
+        trailing: n ? /* @__PURE__ */ o(ae, { onClick: (e) => {
+          e.stopPropagation(), S();
+        }, tooltip: "Clear color" }) : null,
+        children: /* @__PURE__ */ z(
+          "button",
+          {
+            ref: x,
+            type: "button",
+            id: `input-${r}`,
+            className: "relative h-full w-full min-w-0 flex-1 shrink rounded-none",
+            onClick: () => m((e) => !e),
+            "aria-label": u || r || "Color",
+            children: [
+              H && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-0 z-0",
+                  style: fe,
+                  "aria-hidden": !0
+                }
+              ),
+              T && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-0 z-[1]",
+                  style: { backgroundColor: V },
+                  "aria-hidden": !0
+                }
+              ),
+              R && /* @__PURE__ */ o(
+                "span",
+                {
+                  className: "pointer-events-none absolute inset-0 z-[2] flex items-center justify-center px-2 text-[11px] font-medium tracking-tight text-white",
+                  style: { mixBlendMode: "difference" },
+                  children: /* @__PURE__ */ o("span", { className: "block max-w-full truncate", children: R })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    C && g && /* @__PURE__ */ o(ve, { top: g.top, right: g.right, children: /* @__PURE__ */ o("div", { className: "border-base-300 bg-base-200 rounded-xl border shadow-xl", children: /* @__PURE__ */ o(
+      de,
+      {
+        variant: "panel",
+        value: _,
+        onChange: (e) => {
+          $(e);
+        },
+        onClose: () => m(!1),
+        onClear: S
+      }
+    ) }) })
+  ] });
+};
+function ve({
+  top: c,
+  right: r,
+  children: u
+}) {
+  const s = k(null);
+  return pe(s), ue(
+    /* @__PURE__ */ o("div", { ref: s, className: "pagehub-sdk-root fixed z-[1200]", style: { top: c, right: r }, children: u }),
+    document.querySelector(".pagehub-sdk-root") || document.body
+  );
+}
+export {
+  Le as C
+};