@pagehub/sdk 0.1.0

package/dist/chunks/ColorPanel-CxnVRl9s.js

@@ -0,0 +1,186 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { S as R, P as g, b as D, bC as A, p as b, c5 as E, d8 as P } from "./index-lNS44FHV.js";
+import { useState as C, useEffect as z } from "react";
+import { u as B } from "./index.module-C7TzJyO2.js";
+import { D as H, S as T, R as w, T as G } from "./DesignSystemPalette-BfIADDMo.js";
+function I() {
+  try {
+    const t = b.get("recent-colors");
+    return t ? JSON.parse(t) : [];
+  } catch {
+    return [];
+  }
+}
+function v(t, r) {
+  const n = [t, ...r.filter((s) => s !== t)].slice(0, 12);
+  return b.set("recent-colors", n), n;
+}
+function _(t) {
+  if (!t) return "";
+  if (t.startsWith("palette:")) return t;
+  const r = t.replace(/^(bg|text|border|from|to|via|ring|divide|outline)-/, ""), n = r.match(/#[0-9A-Fa-f]{3,8}/);
+  if (n) return n[0];
+  const s = r.match(/\[var\(--([a-z0-9-]+)\)\]/i);
+  return s ? s[1] : r;
+}
+function S(t) {
+  const r = t.match(/#[0-9A-Fa-f]{6,8}/);
+  return r ? r[0] : "";
+}
+function F({ value: t, onChange: r, onClear: n }) {
+  const { open: s, isSupported: h } = B(), [p, c] = C(I), [d, u] = C(() => S(t)), f = _(t);
+  z(() => {
+    const e = S(t);
+    e && u(e);
+  }, [t]);
+  const a = (e) => {
+    r(e), e.type === "hex" && typeof e.value == "string" ? c((i) => v(e.value, i)) : e.type === "class" && typeof e.value == "string" && c((i) => v(e.value, i));
+  }, l = (e, i) => {
+    a({ type: e, value: i });
+  }, m = () => {
+    d && /^#[0-9A-Fa-f]{6}$/.test(d) && a({ type: "hex", value: d });
+  }, k = async () => {
+    try {
+      const e = await s();
+      e != null && e.sRGBHex && (u(e.sRGBHex), a({ type: "hex", value: e.sRGBHex }));
+    } catch {
+    }
+  }, N = () => {
+    c([]), b.remove("recent-colors");
+  };
+  return /* @__PURE__ */ y("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ o("div", { className: "overflow-hidden rounded-md", children: /* @__PURE__ */ o(
+      R,
+      {
+        width: "100%",
+        presetColors: [],
+        disableAlpha: !1,
+        styles: {
+          picker: {},
+          saturation: {
+            width: "100%",
+            height: "120px",
+            paddingBottom: "",
+            position: "relative",
+            overflow: "hidden"
+          }
+        },
+        color: d || "#3b82f6",
+        onChange: (e) => u(e.hex),
+        onChangeComplete: (e) => {
+          var x;
+          (((x = e.rgb) == null ? void 0 : x.a) ?? 1) < 1 - 1e-6 ? a({ type: "rgb", value: e.rgb }) : a({ type: "hex", value: e.hex });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ y("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          type: "text",
+          value: d,
+          onChange: (e) => u(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && m(),
+          onBlur: m,
+          placeholder: "#000000",
+          className: "border-base-300 bg-base-200 text-base-content placeholder:text-neutral-content focus:border-ring focus:ring-ring h-8 flex-1 rounded-md border px-2 text-xs outline-none focus:ring-1"
+        }
+      ),
+      h() && /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          onClick: k,
+          className: "border-base-300 text-neutral-content hover:border-base-content hover:text-base-content flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors",
+          "data-tooltip-id": g,
+          "data-tooltip-content": "Eyedropper",
+          "data-tooltip-place": "top",
+          "data-tooltip-offset": 10,
+          "aria-label": "Pick color from screen",
+          children: /* @__PURE__ */ o(D, { className: "size-3.5" })
+        }
+      ),
+      n && /* @__PURE__ */ o(
+        "button",
+        {
+          type: "button",
+          disabled: !t,
+          onClick: n,
+          className: "border-base-300 text-neutral-content hover:border-primary hover:text-base-content flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors disabled:pointer-events-none disabled:opacity-40",
+          "data-tooltip-id": g,
+          "data-tooltip-content": "Clear color",
+          "data-tooltip-place": "top",
+          "data-tooltip-offset": 10,
+          "aria-label": "Clear color",
+          children: /* @__PURE__ */ o(A, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o(
+      H,
+      {
+        selectedColor: f,
+        onSelect: (e) => a({ type: "palette", value: e })
+      }
+    ),
+    /* @__PURE__ */ o(
+      T,
+      {
+        selectedColor: f,
+        onSelect: l,
+        onDoubleClick: l
+      }
+    ),
+    p.length > 0 && /* @__PURE__ */ o(
+      w,
+      {
+        recentColors: p,
+        selectedColor: f,
+        onClear: N,
+        onSelect: l,
+        onDoubleClick: l
+      }
+    ),
+    /* @__PURE__ */ o(
+      G,
+      {
+        selectedColor: f,
+        onSelect: l,
+        onDoubleClick: l
+      }
+    )
+  ] });
+}
+function M({
+  initialPosition: t,
+  onClose: r,
+  defaultWidth: n,
+  defaultHeight: s,
+  value: h,
+  onChange: p,
+  onClear: c
+}) {
+  return /* @__PURE__ */ o(
+    E,
+    {
+      isOpen: !0,
+      onClose: r,
+      title: "Color",
+      storageKey: "color-input",
+      autoSize: !1,
+      defaultWidth: n,
+      defaultHeight: s,
+      minWidth: 260,
+      maxWidth: 400,
+      minHeight: 420,
+      initialPosition: t,
+      persistSize: !1,
+      zIndex: P,
+      scrollable: !0,
+      children: /* @__PURE__ */ o(F, { value: h, onChange: p, onClear: c })
+    }
+  );
+}
+export {
+  M as default
+};

package/dist/chunks/ColorPickerDialog-DPpzgy4-.js

@@ -0,0 +1,269 @@
+import { jsx as n, jsxs as c, Fragment as K } from "react/jsx-runtime";
+import { ROOT_NODE as j } from "@craftjs/utils";
+import { useEditor as U } from "@craftjs/core";
+import { g as V, u as R, C as G, a as Q, r as D, A as Y, P as m, T as Z, b as _, c as ee, i as te, d as oe, S as ae, e as ne, f as re, h as se, p as z, s as le, j as ie, k as O, l as ce, m as de } from "./index-lNS44FHV.js";
+import { useState as v, useEffect as E } from "react";
+import { u as pe } from "./index.module-C7TzJyO2.js";
+const he = 8, fe = () => {
+  try {
+    const i = z.get("recent-colors");
+    return i ? JSON.parse(i) : [];
+  } catch {
+    return [];
+  }
+}, y = (i, s) => {
+  const p = [i, ...s.filter((C) => C !== i)].slice(0, he);
+  return z.set("recent-colors", p), p;
+}, Ce = () => {
+  const i = V(), [s, p] = R(G), [C, u] = R(Q), [k, w] = v([]), [N, b] = v([]), [x, P] = v(!1), { open: H, isSupported: B } = pe(), { actions: M, query: T } = U(), W = k.length > 0, g = s.mode || "both", q = (g === "both" || g === "palette") && W && s.showPalette !== !1, F = g === "both" || g === "picker";
+  E(() => {
+    s.enabled && (b(fe()), P(!1));
+  }, [s.enabled]), E(() => {
+    var r;
+    const e = T.node(j).get();
+    if (!e) return;
+    const t = D(((r = e.data) == null ? void 0 : r.props) || {}).palette;
+    if (Array.isArray(t) && t.length > 0) {
+      const l = t.filter((a) => a && typeof a == "object" && a.name && a.color);
+      w(l);
+      const o = l.map((a) => a.color);
+      u(o);
+    } else
+      w([]), u([]);
+  }, [s.enabled, T, u]);
+  const L = () => {
+    const e = s.value;
+    let t = e;
+    if (e) {
+      if (typeof e == "object" && e.r !== void 0)
+        t = `rgba(${e.r},${e.g},${e.b},${e.a})`;
+      else if (typeof e == "string")
+        t = e;
+      else
+        return;
+      M.setProp(j, (r) => {
+        const o = [...D(r).palette];
+        o.findIndex((f) => f.color === t) === -1 && o.unshift({ name: `Color ${o.length + 1}`, color: t }), r.theme || (r.theme = {}), r.theme.palette = o;
+        const d = o.map((f) => f.color);
+        u(d);
+      });
+    }
+  }, X = () => {
+    H().then((e) => {
+      const t = ce(e.sRGBHex, 1);
+      h({ type: "hex", value: t });
+    }).catch(() => {
+    });
+  }, h = (e) => {
+    if (s.changed) {
+      if (p({ ...s, value: e.value }), s.changed(e), e.type === "hex" && typeof e.value == "string")
+        b((t) => y(e.value, t));
+      else if (e.type === "rgb" && typeof e.value == "object") {
+        const { r: t, g: r, b: l } = e.value, o = `#${[t, r, l].map((a) => a.toString(16).padStart(2, "0")).join("")}`;
+        b((a) => y(o, a));
+      } else if (e.type === "class" && typeof e.value == "string") {
+        const t = O(
+          e.value.split("-").slice(0, -1).join("-"),
+          e.value.split("-").pop()
+        );
+        t && t !== "#cccccc" && b((r) => y(t, r));
+      }
+    }
+  }, I = (() => {
+    if (!s.value) return;
+    const e = s.value;
+    if (typeof e == "object" && e.r !== void 0) return e;
+    if (typeof e == "string") {
+      let t = le(e);
+      const { base: r, opacity: l } = ie(t);
+      let o = r.replace(/[\[\]]/g, "");
+      const a = (d) => l != null && l < 1 - 1e-6 ? de(d, l) : d;
+      if (o.includes("#") || o.startsWith("rgba") || o.startsWith("rgb"))
+        return a(o);
+      if (o.includes("-")) {
+        const d = o.split("-");
+        if (d.length === 2) {
+          const [f, J] = d;
+          return a(O(f, J));
+        }
+      }
+      if (o === "white") return a("#ffffff");
+      if (o === "black") return a("#000000");
+      if (o === "transparent") return a("transparent");
+    }
+  })(), S = () => {
+    p({ ...s, enabled: !1 });
+  }, $ = s.e ?? null, A = typeof window < "u" ? Math.min(600, window.innerHeight * 0.6) : 600;
+  return /* @__PURE__ */ n(
+    Y,
+    {
+      open: !!(s.enabled && $),
+      onOpenChange: (e) => {
+        e || S();
+      },
+      anchorRect: $,
+      placement: "bottom-start",
+      mainAxisOffset: 6,
+      maxHeightCeiling: A,
+      className: "pagehub-sdk-root ph-panel pointer-events-auto w-[310px] overflow-hidden",
+      children: /* @__PURE__ */ c("div", { role: "dialog", children: [
+        /* @__PURE__ */ c("div", { className: "border-base-300 bg-accent text-accent-content flex items-center justify-between border-b px-3 py-1.5", children: [
+          /* @__PURE__ */ c("div", { className: "flex gap-1.5", children: [
+            s.propKey !== "theme-design-system" && /* @__PURE__ */ n(
+              "button",
+              {
+                className: "text-accent-content hover:bg-neutral hover:text-base-content flex cursor-pointer items-center justify-center rounded-md p-1 text-xs transition-colors",
+                onClick: L,
+                "data-tooltip-id": m,
+                "data-tooltip-content": "Save to palette",
+                "data-tooltip-offset": 10,
+                children: /* @__PURE__ */ n(Z, {})
+              }
+            ),
+            B() && /* @__PURE__ */ n(
+              "button",
+              {
+                onClick: X,
+                className: "text-accent-content hover:bg-neutral hover:text-base-content flex cursor-pointer items-center justify-center rounded-md p-1 text-xs transition-colors",
+                "data-tooltip-id": m,
+                "data-tooltip-content": "Eyedropper",
+                "data-tooltip-offset": 10,
+                children: /* @__PURE__ */ n(_, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              onClick: S,
+              className: "text-accent-content hover:bg-accent-content/10 flex items-center justify-center rounded-md p-1 transition-colors",
+              children: /* @__PURE__ */ n(ee, { className: "size-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: "scrollbar-light bg-base-100 flex w-[310px] flex-col overflow-y-auto rounded-lg",
+            style: { maxHeight: A },
+            children: [
+              q && /* @__PURE__ */ n("div", { className: "border-base-300 border-b px-2 py-1.5", children: /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1", children: k.map((e, t) => {
+                const r = te(s.value, e), l = !e.color.includes("rgba") && !e.color.startsWith("#"), o = l && !e.color.startsWith("bg-") ? `bg-${e.color}` : e.color;
+                return /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: "group relative",
+                    onMouseDown: (a) => {
+                      a.preventDefault(), a.stopPropagation(), h({ type: "palette", value: `palette:${e.name}` });
+                    },
+                    "data-tooltip-id": m,
+                    "data-tooltip-content": e.name,
+                    "data-tooltip-place": "top",
+                    "data-tooltip-offset": 10,
+                    children: /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: `size-7 rounded-md border-2 transition-all group-hover:scale-110 ${r ? "border-primary ring-primary/30 ring-1" : "border-base-300"} ${l ? o : ""}`,
+                        style: {
+                          backgroundColor: l ? void 0 : e.color
+                        },
+                        children: r && /* @__PURE__ */ n(oe, { className: "m-auto mt-0.5 size-4 text-white drop-shadow-md" })
+                      }
+                    )
+                  },
+                  t
+                );
+              }) }) }),
+              N.length > 0 && /* @__PURE__ */ c("div", { className: "border-base-300 flex items-center gap-1.5 border-b px-2 py-1.5", children: [
+                /* @__PURE__ */ n("span", { className: "text-neutral-content shrink-0 text-[9px]", children: "Recent" }),
+                /* @__PURE__ */ n("div", { className: "flex flex-1 gap-1", children: N.map((e, t) => /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: "border-base-300 hover:border-primary size-5 shrink-0 cursor-pointer rounded-full border transition-all hover:scale-110",
+                    style: { backgroundColor: e },
+                    onClick: () => h({ type: "hex", value: e }),
+                    "data-tooltip-id": m,
+                    "data-tooltip-content": e
+                  },
+                  t
+                )) })
+              ] }),
+              F && /* @__PURE__ */ c(K, { children: [
+                /* @__PURE__ */ n("div", { className: "px-2 pt-2", children: /* @__PURE__ */ n("div", { className: "overflow-hidden rounded-lg", children: /* @__PURE__ */ n(
+                  ae,
+                  {
+                    width: "100%",
+                    presetColors: [],
+                    styles: {
+                      picker: {},
+                      saturation: {
+                        width: "100%",
+                        height: "100px",
+                        paddingBottom: "",
+                        position: "relative",
+                        overflow: "hidden"
+                      }
+                    },
+                    color: I || void 0,
+                    onChangeComplete: (e) => {
+                      h({ type: "rgb", value: e == null ? void 0 : e.rgb });
+                    },
+                    onChange: ne((e) => {
+                      p({ ...s, value: e == null ? void 0 : e.rgb });
+                    }, 20)
+                  }
+                ) }) }),
+                /* @__PURE__ */ c("div", { className: "px-2 pt-1 pb-2", children: [
+                  /* @__PURE__ */ c(
+                    "button",
+                    {
+                      className: "text-neutral-content hover:text-base-content flex w-full items-center gap-1 py-1 text-[10px]",
+                      onClick: () => P(!x),
+                      children: [
+                        x ? /* @__PURE__ */ n(re, { className: "size-3" }) : /* @__PURE__ */ n(se, { className: "size-3" }),
+                        /* @__PURE__ */ n("span", { children: "Tailwind Colors" })
+                      ]
+                    }
+                  ),
+                  x && /* @__PURE__ */ n("div", { className: "flex flex-col gap-1.5 pt-1", children: Array.from({ length: Math.ceil(i.length / 11) }).map((e, t) => /* @__PURE__ */ n(
+                    "div",
+                    {
+                      className: "relative flex flex-row items-start gap-1",
+                      children: i.slice(t * 11, (t + 1) * 11).map((r, l) => {
+                        const o = r.color.find((a) => a.key === "500") || r.color[Math.floor(r.color.length / 2)];
+                        return /* @__PURE__ */ n(
+                          "button",
+                          {
+                            className: "border-base-300 hover:border-primary size-5 cursor-pointer rounded border transition-all hover:scale-110",
+                            style: { backgroundColor: o.color },
+                            onClick: (a) => {
+                              a.stopPropagation(), h({
+                                type: "class",
+                                value: `${r.key}-${o.key}`
+                              });
+                            },
+                            "data-tooltip-id": m,
+                            "data-tooltip-content": r.key,
+                            "data-tooltip-place": "top",
+                            "data-tooltip-offset": 10
+                          },
+                          `color-${t * 11 + l}`
+                        );
+                      })
+                    },
+                    `row-${t}`
+                  )) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  Q as ColorPaletteAtom,
+  G as ColorPickerAtom,
+  Ce as ColorPickerDialog
+};

package/dist/chunks/ColorPickerSidebarDialog-Ba051knL.js

@@ -0,0 +1,231 @@
+import { jsx as e, jsxs as r, Fragment as N } from "react/jsx-runtime";
+import { n as S, o as w, c as D, P as C, T as P, b as T, p as E, q as j } from "./index-lNS44FHV.js";
+import { t as B } from "./index-lNS44FHV.js";
+import { useRef as R, useEffect as $ } from "react";
+import { u as A, S as F, D as L, R as I, T as _ } from "./DesignSystemPalette-BfIADDMo.js";
+function z({
+  isOpen: l,
+  onClose: o,
+  title: c,
+  icon: n,
+  headerRight: i,
+  hideHeader: m = !1,
+  showCloseButton: d = !0,
+  showTopBorder: p = !1,
+  children: s,
+  width: b,
+  position: a = "fixed",
+  top: h,
+  closeOnOutsideClick: f = !0
+}) {
+  const u = R(null), t = S(l), y = b || (a === "absolute" ? "100%" : "360px"), x = h ?? (a === "absolute" ? "var(--editor-nav-height, 3rem)" : "40px");
+  return w({
+    id: `left-sidebar-dialog:${c}`,
+    isOpen: l,
+    onDismiss: o
+  }), $(() => {
+    if (!l || !f) return;
+    const v = (k) => {
+      const g = k.target;
+      if (u.current && !u.current.contains(g)) {
+        if (g.closest(
+          '[role="dialog"], .modal, [data-modal="true"]'
+        )) return;
+        o();
+      }
+    };
+    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+  }, [l, o, f]), l ? /* @__PURE__ */ e(
+    "div",
+    {
+      ref: t,
+      role: "dialog",
+      "aria-modal": "true",
+      ...m ? { "aria-label": c } : { "aria-labelledby": "left-sidebar-dialog-title" },
+      className: `${a} bg-base-100 text-base-content left-0 z-9999 flex flex-col`,
+      style: {
+        width: y,
+        top: x,
+        height: a === "fixed" ? `calc(100vh - ${x})` : void 0,
+        bottom: a === "absolute" ? "0" : void 0,
+        pointerEvents: a === "absolute" ? "auto" : void 0
+      },
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          ref: u,
+          className: `border-base-300 flex h-full flex-col overflow-hidden border-r shadow-2xl${p ? "border-base-300 border-t" : ""}`,
+          children: [
+            m ? null : /* @__PURE__ */ r(
+              "div",
+              {
+                className: `border-base-300 bg-base-100 text-base-content flex items-center border-b px-3 py-2.5 ${i || d ? "justify-between" : "justify-start"}`,
+                children: [
+                  /* @__PURE__ */ r("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    n && /* @__PURE__ */ e("span", { className: "text-base-content/70 shrink-0 text-lg", children: n }),
+                    /* @__PURE__ */ e(
+                      "h2",
+                      {
+                        id: "left-sidebar-dialog-title",
+                        className: "truncate text-sm font-semibold tracking-tight",
+                        children: c
+                      }
+                    )
+                  ] }),
+                  (i || d) && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-1", children: [
+                    i,
+                    d ? /* @__PURE__ */ e(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: o,
+                        className: "text-base-content/50 hover:bg-base-200 hover:text-base-content flex items-center justify-center rounded-md p-1.5 transition-colors",
+                        "aria-label": "Close",
+                        children: /* @__PURE__ */ e(D, { className: "size-5" })
+                      }
+                    ) : null
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "bg-base-100 text-base-content flex min-h-0 flex-1 flex-col overflow-hidden", children: s })
+          ]
+        }
+      )
+    }
+  ) : null;
+}
+function U() {
+  const {
+    dialog: l,
+    hexInput: o,
+    setHexInput: c,
+    selectedColor: n,
+    recentColors: i,
+    setRecentColors: m,
+    isEyeDropperSupported: d,
+    handleClose: p,
+    handleColorSelect: s,
+    handleColorDoubleClick: b,
+    handleHexSubmit: a,
+    handleEyeDropper: h,
+    handleSaveToPalette: f
+  } = A(), u = /* @__PURE__ */ r(N, { children: [
+    l.showPalette && /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: f,
+        disabled: !o || !/^#[0-9A-Fa-f]{6}$/.test(o),
+        className: "text-accent-content hover:bg-accent-content/10 flex items-center justify-center rounded-md p-1 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-label": "Save to palette",
+        "data-tooltip-id": C,
+        "data-tooltip-content": "Save to Palette",
+        "data-tooltip-place": "bottom",
+        "data-tooltip-offset": 10,
+        children: /* @__PURE__ */ e(P, {})
+      }
+    ),
+    d() && /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: h,
+        className: "text-accent-content hover:bg-accent-content/10 flex items-center justify-center rounded-md p-1 transition-colors",
+        "aria-label": "Pick color from screen",
+        "data-tooltip-id": C,
+        "data-tooltip-content": "Eyedropper",
+        "data-tooltip-place": "bottom",
+        "data-tooltip-offset": 10,
+        children: /* @__PURE__ */ e(T, {})
+      }
+    )
+  ] });
+  return /* @__PURE__ */ e(
+    z,
+    {
+      isOpen: l.enabled,
+      onClose: p,
+      title: "Select Color",
+      icon: /* @__PURE__ */ e(j, {}),
+      headerRight: u,
+      width: "360px",
+      children: /* @__PURE__ */ r("div", { className: "flex h-full flex-col overflow-y-auto p-4", children: [
+        /* @__PURE__ */ r("div", { className: "mb-4", children: [
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: "color-picker-hex-input",
+              className: "text-base-content mb-1.5 block text-xs font-medium",
+              children: "Custom Color"
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "color",
+                value: o || "#000000",
+                onChange: (t) => {
+                  c(t.target.value), s("hex", t.target.value);
+                },
+                className: "border-base-300 bg-base-200 h-10 w-16 cursor-pointer rounded-lg border-2",
+                style: { padding: "2px" }
+              }
+            ),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                id: "color-picker-hex-input",
+                type: "text",
+                value: o,
+                onChange: (t) => c(t.target.value),
+                onKeyDown: (t) => t.key === "Enter" && a(),
+                placeholder: "#000000",
+                className: "input-dialog-md placeholder:text-neutral-content flex-1"
+              }
+            ),
+            /* @__PURE__ */ e("button", { type: "button", onClick: a, className: "btn btn-primary", children: "Apply" })
+          ] })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ e(
+          F,
+          {
+            selectedColor: n,
+            onSelect: s,
+            onDoubleClick: b
+          }
+        ) }),
+        l.showPalette && /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ e(
+          L,
+          {
+            selectedColor: n,
+            onSelect: (t) => s("palette", t)
+          }
+        ) }),
+        i.length > 0 && /* @__PURE__ */ e("div", { className: "mb-4", children: /* @__PURE__ */ e(
+          I,
+          {
+            recentColors: i,
+            selectedColor: n,
+            onClear: () => {
+              m([]), E.remove("recent-colors");
+            },
+            onSelect: s,
+            onDoubleClick: b
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            selectedColor: n,
+            onSelect: s,
+            onDoubleClick: b
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  B as ColorPickerSidebarAtom,
+  U as ColorPickerSidebarDialog
+};