@pagehub/sdk 0.1.5 → 0.1.6

package/dist/chunks/PropertiesInput-9O39ngbb.js

@@ -0,0 +1,125 @@
+import { jsxs as n, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { n as i, Q as h, C as T } from "./index-C66dAl3Q.js";
+import { useNode as u } from "@craftjs/core";
+import { useState as P, Suspense as A, lazy as C } from "react";
+import { u as N } from "./usePopoverPosition-83Vti7Aw.js";
+const I = () => /* @__PURE__ */ n(i, { propKey: "tagName", type: "select", label: "Type", propType: "component", children: [
+  /* @__PURE__ */ e("option", { value: "" }),
+  /* @__PURE__ */ e("option", { value: "span", children: "span" }),
+  /* @__PURE__ */ e("option", { value: "article", children: "article" }),
+  /* @__PURE__ */ e("option", { value: "section", children: "section" }),
+  /* @__PURE__ */ e("option", { value: "header", children: "header" }),
+  /* @__PURE__ */ e("option", { value: "footer", children: "footer" }),
+  /* @__PURE__ */ e("option", { value: "main", children: "main" }),
+  /* @__PURE__ */ e("option", { value: "nav", children: "nav" }),
+  /* @__PURE__ */ e("option", { value: "aside", children: "aside" }),
+  /* @__PURE__ */ e("option", { value: "div", children: "div" }),
+  /* @__PURE__ */ e("option", { value: "p", children: "p" }),
+  /* @__PURE__ */ e("option", { value: "h1", children: "h1" }),
+  /* @__PURE__ */ e("option", { value: "h2", children: "h2" }),
+  /* @__PURE__ */ e("option", { value: "h3", children: "h3" }),
+  /* @__PURE__ */ e("option", { value: "h4", children: "h4" }),
+  /* @__PURE__ */ e("option", { value: "h5", children: "h5" }),
+  /* @__PURE__ */ e("option", { value: "h6", children: "h6" }),
+  /* @__PURE__ */ e("option", { value: "Textfit", children: "Full Width" })
+] }), D = C(() => import("./DataAttributesPanel-mYhisO_O.js")), k = 360;
+function E() {
+  const [t, o] = P(!1), { triggerRef: a, initialPos: m, setInitialPos: b, computePosition: v } = N(k), {
+    actions: { setProp: f },
+    count: l
+  } = u((r) => {
+    var c, d;
+    return {
+      count: (((d = (c = r.data) == null ? void 0 : c.props) == null ? void 0 : d.dataAttributes) || []).length
+    };
+  }), y = l === 0, g = `${l} attribute${l === 1 ? "" : "s"}`, x = () => {
+    f((r) => {
+      r.dataAttributes = [];
+    });
+  }, s = () => {
+    b(v()), o(!0);
+  };
+  return /* @__PURE__ */ n(p, { children: [
+    y ? /* @__PURE__ */ n(
+      "button",
+      {
+        ref: a,
+        type: "button",
+        onClick: () => t ? o(!1) : s(),
+        "aria-expanded": t,
+        "aria-label": "Add data attribute",
+        className: "text-neutral-content hover:text-base-content hover:bg-base-200 inline-flex h-7 items-center gap-1.5 self-start rounded-md px-2 text-xs transition-colors",
+        children: [
+          /* @__PURE__ */ e(h, { className: "size-3.5 shrink-0", "aria-hidden": !0 }),
+          /* @__PURE__ */ e("span", { children: "Add data-…" })
+        ]
+      }
+    ) : /* @__PURE__ */ e(
+      T,
+      {
+        mode: "popover",
+        ref: a,
+        open: t,
+        onTriggerClick: () => t ? o(!1) : s(),
+        onClear: () => {
+          t && o(!1), x();
+        },
+        triggerAriaLabel: "Edit data attributes",
+        clearAriaLabel: "Clear data attributes",
+        leading: /* @__PURE__ */ e(h, { className: "size-3.5", "aria-hidden": !0 }),
+        summary: g
+      }
+    ),
+    t && /* @__PURE__ */ e(A, { fallback: null, children: /* @__PURE__ */ e(D, { initialPosition: m, onClose: () => o(!1) }) })
+  ] });
+}
+const j = () => {
+  const { componentName: t } = u((o) => {
+    var a;
+    return {
+      componentName: String(((a = o.data) == null ? void 0 : a.name) || "")
+    };
+  });
+  return /* @__PURE__ */ n(p, { children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        propKey: "id",
+        propType: "component",
+        type: "text",
+        label: "Element ID",
+        placeholder: "myComponent",
+        labelHide: !1
+      }
+    ),
+    /* @__PURE__ */ e(I, {}),
+    t === "Image" ? /* @__PURE__ */ n(p, { children: [
+      /* @__PURE__ */ e(
+        i,
+        {
+          propKey: "alt",
+          propType: "component",
+          type: "text",
+          label: "Alt Text",
+          placeholder: "Describe this image for screen readers",
+          labelHide: !1
+        }
+      ),
+      /* @__PURE__ */ e(
+        i,
+        {
+          propKey: "title",
+          propType: "component",
+          type: "text",
+          label: "Title",
+          placeholder: "Optional advisory title",
+          labelHide: !1
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ e(E, {})
+  ] });
+};
+export {
+  j as PropertiesInput
+};

package/dist/chunks/PropertiesPanel-DO0RlalO.js

@@ -0,0 +1,76 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { W as r, n as o, aF as a } from "./index-C66dAl3Q.js";
+import { F as n } from "./FloatingPanel-DJP5Vhua.js";
+function s({ initialPosition: p, onClose: t }) {
+  return /* @__PURE__ */ e(
+    n,
+    {
+      isOpen: !0,
+      onClose: t,
+      title: "Properties",
+      icon: /* @__PURE__ */ e(a, {}),
+      storageKey: "ph-form-element-properties",
+      autoSize: !0,
+      defaultWidth: 280,
+      minWidth: 260,
+      initialPosition: p,
+      zIndex: r,
+      scrollable: !0,
+      children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "required",
+            propType: "component",
+            type: "checkbox",
+            label: "Required",
+            on: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "disabled",
+            propType: "component",
+            type: "checkbox",
+            label: "Disabled",
+            on: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "readOnly",
+            propType: "component",
+            type: "checkbox",
+            label: "Read Only",
+            on: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "autoComplete",
+            propType: "component",
+            type: "text",
+            label: "Autocomplete",
+            placeholder: "off / email / name / …"
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            propKey: "defaultValue",
+            propType: "component",
+            type: "text",
+            label: "Default",
+            placeholder: "Initial value"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  s as default
+};

package/dist/chunks/SaveModifierPanel-B6mjKyrT.js

@@ -0,0 +1,130 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { F as S } from "./FloatingPanel-DJP5Vhua.js";
+import { useMemo as E, useState as m, useRef as M, useEffect as y } from "react";
+import { C as v, bY as O, a7 as P } from "./index-C66dAl3Q.js";
+import { u as j } from "./useModifiers-BUaftv28.js";
+function k(r) {
+  const a = /* @__PURE__ */ new Set(), s = [];
+  for (const d of r.split(/\s+/)) {
+    const n = d.trim();
+    !n || a.has(n) || (a.add(n), s.push(n));
+  }
+  return s;
+}
+function A({ onClose: r }) {
+  const { currentClassName: a, nodeTypeName: s, saveAsModifier: d } = j(), n = E(() => k(a), [a]), [p, N] = m(/* @__PURE__ */ new Set()), [c, T] = m(""), [u, f] = m(s), h = M(null);
+  y(() => f(s), [s]), y(() => {
+    var e;
+    (e = h.current) == null || e.focus();
+  }, []);
+  const x = n.filter((e) => !p.has(e)), C = x.join(" "), b = !!c.trim() && !!u.trim() && x.length > 0, w = (e) => {
+    N((i) => {
+      const o = new Set(i);
+      return o.has(e) ? o.delete(e) : o.add(e), o;
+    });
+  }, g = () => {
+    b && (d(c, u, C), r());
+  };
+  return n.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content py-6 text-center text-xs", children: "This node has no classes to save." }) : /* @__PURE__ */ l("div", { className: "flex h-full min-h-0 flex-col gap-2", children: [
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ t("label", { className: "text-neutral-content px-0.5 text-[10px] font-medium", children: "Modifier name" }),
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+        "input",
+        {
+          ref: h,
+          type: "text",
+          value: c,
+          onChange: (e) => T(e.target.value),
+          placeholder: "e.g. my-card-style",
+          onKeyDown: (e) => {
+            e.key === "Enter" && g(), e.key === "Escape" && r();
+          },
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ t("label", { className: "text-neutral-content px-0.5 text-[10px] font-medium", children: "Component type" }),
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+        "input",
+        {
+          type: "text",
+          value: u,
+          onChange: (e) => f(e.target.value),
+          placeholder: "e.g. Button, Container",
+          className: "h-full w-full bg-transparent px-1 text-xs outline-none"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ l("div", { className: "flex items-baseline justify-between px-0.5", children: [
+        /* @__PURE__ */ t("span", { className: "text-neutral-content text-[10px] font-medium", children: "Classes to include" }),
+        /* @__PURE__ */ l("span", { className: "text-neutral-content/70 text-[10px]", children: [
+          x.length,
+          " / ",
+          n.length
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "border-base-300 bg-base-100 min-h-0 flex-1 overflow-y-auto rounded-md border p-1.5", children: /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-1", children: n.map((e) => {
+        const i = p.has(e);
+        return /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            onClick: () => w(e),
+            className: i ? "border-base-300 text-neutral-content/50 inline-flex items-center gap-1 rounded border bg-transparent px-1.5 py-0.5 font-mono text-[10px] line-through" : "border-primary/40 bg-primary/10 text-primary inline-flex items-center gap-1 rounded border px-1.5 py-0.5 font-mono text-[10px]",
+            "aria-pressed": !i,
+            "aria-label": i ? `Include ${e}` : `Exclude ${e}`,
+            children: [
+              /* @__PURE__ */ t("span", { children: e }),
+              !i && /* @__PURE__ */ t(O, { size: 10, "aria-hidden": !0 })
+            ]
+          },
+          e
+        );
+      }) }) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex shrink-0 gap-1.5 pt-1", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: g,
+          disabled: !b,
+          className: "bg-primary text-primary-content disabled:bg-neutral disabled:text-neutral-content/60 h-7 flex-1 rounded-md px-3 text-xs font-medium",
+          children: "Save modifier"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: r,
+          className: "border-base-300 hover:bg-base-200 h-7 rounded-md border px-3 text-xs",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+function F({ initialPosition: r, onClose: a }) {
+  return /* @__PURE__ */ t(
+    S,
+    {
+      isOpen: !0,
+      onClose: a,
+      title: "Save as modifier",
+      storageKey: "save-modifier-panel",
+      minWidth: 280,
+      maxWidth: 420,
+      minHeight: 320,
+      initialPosition: r,
+      zIndex: P,
+      scrollable: !0,
+      children: /* @__PURE__ */ t(A, { onClose: a })
+    }
+  );
+}
+export {
+  F as default
+};

package/dist/chunks/ScrollEffectEditorPanel-CllGUhui.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { W as o, eL as i } from "./index-C66dAl3Q.js";
+import { F as l } from "./FloatingPanel-DJP5Vhua.js";
+import { ContainerScrollEffectSection as n } from "./ContainerScrollEffectSection-Dbztqdnr.js";
+function s({ initialPosition: r, onClose: t }) {
+  return /* @__PURE__ */ e(
+    l,
+    {
+      isOpen: !0,
+      onClose: t,
+      title: "Scroll Effect",
+      icon: /* @__PURE__ */ e(i, { "aria-hidden": !0 }),
+      storageKey: "effects-builder-scroll",
+      minWidth: 300,
+      maxWidth: 480,
+      minHeight: 260,
+      initialPosition: r,
+      zIndex: o,
+      scrollable: !0,
+      children: /* @__PURE__ */ e(n, {})
+    }
+  );
+}
+export {
+  s as default
+};

package/dist/chunks/SearchInput-DRUztbM0.js

@@ -0,0 +1,76 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { dp as m, P as x, bY as g } from "./index-C66dAl3Q.js";
+const P = {
+  default: {
+    input: "input-transparent",
+    inputPadL: "pl-8",
+    inputPadR: "pr-3",
+    inputPadRWithClear: "pr-8",
+    icon: "left-2.5 size-3.5",
+    clear: "right-2 size-5",
+    clearIcon: "size-3.5"
+  },
+  slim: {
+    input: "border-base-300 placeholder:text-neutral-content focus-visible:ring-ring flex h-7 w-full rounded-md border bg-transparent text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    inputPadL: "pl-7",
+    inputPadR: "pr-2",
+    inputPadRWithClear: "pr-7",
+    icon: "left-2 size-3",
+    clear: "right-1.5 size-4",
+    clearIcon: "size-3"
+  }
+}, v = h(
+  ({
+    value: a,
+    onChange: n,
+    placeholder: s = "Search...",
+    className: l = "",
+    clearTooltip: i = "Clear",
+    size: o = "default",
+    autoFocus: c,
+    onKeyDown: u,
+    inputProps: p
+  }, d) => {
+    const r = a.length > 0, e = P[o];
+    return /* @__PURE__ */ f("div", { className: `relative flex-1 ${l}`, children: [
+      /* @__PURE__ */ t(
+        m,
+        {
+          className: `text-neutral-content pointer-events-none absolute top-1/2 -translate-y-1/2 ${e.icon}`,
+          "aria-hidden": !0
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          ref: d,
+          type: "text",
+          placeholder: s,
+          className: `${e.input} ${e.inputPadL} ${r ? e.inputPadRWithClear : e.inputPadR}`,
+          value: a,
+          onChange: (b) => n(b.target.value),
+          autoFocus: c,
+          onKeyDown: u,
+          ...p
+        }
+      ),
+      r && /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => n(""),
+          className: `text-neutral-content hover:text-base-content focus-visible:ring-ring absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded focus-visible:ring-1 focus-visible:outline-none ${e.clear}`,
+          "aria-label": i,
+          "data-tooltip-id": x,
+          "data-tooltip-content": i,
+          children: /* @__PURE__ */ t(g, { className: e.clearIcon, "aria-hidden": !0 })
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "SearchInput";
+export {
+  v as S
+};