@billgangcom/theme-lib 1.3.0 → 1.4.0

package/dist/ui.es.js

@@ -1,19 +1,19 @@
-import { j as t, I as h, a as x, S as p, T as b, c as v } from "./index-dSkEANl1.js";
-import { B as Q, C as U, M as V, P as W, R as X, b as Y, d as Z, e as tt } from "./index-dSkEANl1.js";
-import "react";
-const u = "_wrapper_o1bnv_2", j = "_alignmentBlock_o1bnv_8", N = "_title_o1bnv_16", k = "_subtitle_o1bnv_23", T = "_alignmentContent_o1bnv_30", y = "_alignments_o1bnv_37", C = "_alignment_o1bnv_8", B = "_circle_o1bnv_56", f = "_paddings_o1bnv_63", z = "_padding_o1bnv_63", S = "_input_o1bnv_81", s = {
-  wrapper: u,
-  alignmentBlock: j,
-  title: N,
-  subtitle: k,
-  alignmentContent: T,
-  alignments: y,
-  alignment: C,
-  circle: B,
-  paddings: f,
-  padding: z,
-  input: S
-}, w = [
+import { j as t, I as r, a as T, c as I, S as k, T as A, B as S, v as L, b as C } from "./index-ohEJxZVF.js";
+import { C as Xt, M as Zt, P as te, R as ee, d as se, e as ne } from "./index-ohEJxZVF.js";
+import b from "react";
+const R = "_wrapper_o1bnv_2", E = "_alignmentBlock_o1bnv_8", H = "_title_o1bnv_16", O = "_subtitle_o1bnv_23", F = "_alignmentContent_o1bnv_30", G = "_alignments_o1bnv_37", D = "_alignment_o1bnv_8", M = "_circle_o1bnv_56", Y = "_paddings_o1bnv_63", q = "_padding_o1bnv_63", J = "_input_o1bnv_81", x = {
+  wrapper: R,
+  alignmentBlock: E,
+  title: H,
+  subtitle: O,
+  alignmentContent: F,
+  alignments: G,
+  alignment: D,
+  circle: M,
+  paddings: Y,
+  padding: q,
+  input: J
+}, K = [
   "topLeft",
   "top",
   "topRight",
@@ -23,24 +23,24 @@ const u = "_wrapper_o1bnv_2", j = "_alignmentBlock_o1bnv_8", N = "_title_o1bnv_1
   "bottomLeft",
   "bottom",
   "bottomRight"
-], $ = ["left", "top", "right", "bottom"], G = (c) => {
-  const { alignment: i, padding: o, setPadding: d, setAlignment: r } = c;
-  return /* @__PURE__ */ t.jsxs("div", { className: s.layout, children: [
-    /* @__PURE__ */ t.jsx("h3", { className: s.title, children: "Layout" }),
-    /* @__PURE__ */ t.jsxs("div", { className: s.alignmentBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: s.subtitle, children: "Alignment" }),
-      /* @__PURE__ */ t.jsxs("div", { className: s.alignmentContent, children: [
-        /* @__PURE__ */ t.jsx("div", { className: s.alignments, children: w.map((e) => /* @__PURE__ */ t.jsxs(
+], Q = ["left", "top", "right", "bottom"], Jt = (_) => {
+  const { alignment: o, padding: u, setPadding: n, setAlignment: a } = _;
+  return /* @__PURE__ */ t.jsxs("div", { className: x.layout, children: [
+    /* @__PURE__ */ t.jsx("h3", { className: x.title, children: "Layout" }),
+    /* @__PURE__ */ t.jsxs("div", { className: x.alignmentBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: x.subtitle, children: "Alignment" }),
+      /* @__PURE__ */ t.jsxs("div", { className: x.alignmentContent, children: [
+        /* @__PURE__ */ t.jsx("div", { className: x.alignments, children: K.map((i) => /* @__PURE__ */ t.jsxs(
           "div",
           {
             onClick: () => {
-              console.log(e, i), r((l) => (console.log(l, e), e));
+              a((c) => i);
             },
-            className: s.alignment,
+            className: x.alignment,
             children: [
-              e !== i && /* @__PURE__ */ t.jsx("div", { className: s.circle }),
-              e === i && /* @__PURE__ */ t.jsx(
-                h,
+              i !== o && /* @__PURE__ */ t.jsx("div", { className: x.circle }),
+              i === o && /* @__PURE__ */ t.jsx(
+                r,
                 {
                   name: "text-align-left",
                   fill: "#FF3F19"
@@ -48,25 +48,25 @@ const u = "_wrapper_o1bnv_2", j = "_alignmentBlock_o1bnv_8", N = "_title_o1bnv_1
               )
             ]
           },
-          e
+          i
         )) }),
-        /* @__PURE__ */ t.jsx("div", { className: s.paddings, children: $.map((e) => /* @__PURE__ */ t.jsxs("label", { className: s.padding, children: [
+        /* @__PURE__ */ t.jsx("div", { className: x.paddings, children: Q.map((i) => /* @__PURE__ */ t.jsxs("label", { className: x.padding, children: [
           /* @__PURE__ */ t.jsx("div", { children: /* @__PURE__ */ t.jsx(
-            h,
+            r,
             {
-              name: `align-${e}`,
+              name: `align-${i}`,
               width: 20,
               height: 20
             }
           ) }),
           /* @__PURE__ */ t.jsx(
-            x,
+            T,
             {
               type: "text",
-              value: String(o[e]),
-              onChange: (l) => d((_) => ({
-                ..._,
-                [e]: Number(l)
+              value: String(u[i]),
+              onChange: (c) => n((g) => ({
+                ...g,
+                [i]: Number(c)
               })),
               paddingless: !0
             }
@@ -75,82 +75,501 @@ const u = "_wrapper_o1bnv_2", j = "_alignmentBlock_o1bnv_8", N = "_title_o1bnv_1
       ] })
     ] })
   ] });
-}, I = "_subtitle_1hhz4_1", L = "_header_1hhz4_8", P = "_text_1hhz4_9", R = "_top_1hhz4_16", A = "_itemsBlock_1hhz4_23", F = "_typeTexts_1hhz4_29", M = "_block_1hhz4_35", O = "_active_1hhz4_46", a = {
-  subtitle: I,
-  header: L,
-  text: P,
-  top: R,
-  itemsBlock: A,
-  typeTexts: F,
-  block: M,
-  active: O
-}, E = ["bold", "italic", "underline", "strike-through", "code"], H = (c) => {
+}, U = "_subtitle_2zbxx_1", V = "_header_2zbxx_8", W = "_text_2zbxx_9", X = "_top_2zbxx_16", Z = "_itemsBlock_2zbxx_23", y = {
+  subtitle: U,
+  header: V,
+  text: W,
+  top: X,
+  itemsBlock: Z
+}, tt = "_typeTexts_3zlec_1", et = "_block_3zlec_7", st = "_active_3zlec_18", B = {
+  typeTexts: tt,
+  block: et,
+  active: st
+}, nt = ["bold", "italic", "underline", "strike-through", "code"], z = (_) => {
+  const { typeText: o, setTypeText: u } = _;
+  return /* @__PURE__ */ t.jsx("div", { className: B.typeTexts, children: nt.map((n) => /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      className: I(B.block, {
+        [B.active]: o === n
+      }),
+      onClick: () => u((a) => n),
+      children: /* @__PURE__ */ t.jsx(
+        r,
+        {
+          name: `text-${n}`,
+          fill: o === n ? "#252525" : "#757575",
+          width: 20,
+          height: 20
+        }
+      )
+    },
+    String(n)
+  )) });
+}, Kt = (_) => {
   const {
-    typeText: i,
-    isActiveText: o,
-    setIsActiveText: d,
-    text: r,
-    setText: e,
-    setTypeText: l,
-    title: _,
-    subtitle: m = "Items"
-  } = c;
-  return /* @__PURE__ */ t.jsxs("div", { className: a.text, children: [
-    /* @__PURE__ */ t.jsxs("div", { className: a.top, children: [
-      /* @__PURE__ */ t.jsx("h3", { className: a.title, children: _ }),
+    typeText: o,
+    isActiveText: u,
+    setIsActiveText: n,
+    text: a,
+    setText: i,
+    setTypeText: c,
+    title: g,
+    subtitle: v = "Items"
+  } = _;
+  return /* @__PURE__ */ t.jsxs("div", { className: y.text, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: y.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: y.title, children: g }),
       /* @__PURE__ */ t.jsx(
-        p,
+        k,
         {
-          current: o,
-          onChange: (n) => d((g) => n)
+          current: u,
+          onChange: (m) => n((e) => m)
         }
       )
     ] }),
-    /* @__PURE__ */ t.jsxs("div", { className: a.itemsBlock, children: [
-      /* @__PURE__ */ t.jsx("h5", { className: a.subtitle, children: m }),
+    /* @__PURE__ */ t.jsxs("div", { className: y.itemsBlock, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: y.subtitle, children: v }),
       /* @__PURE__ */ t.jsx(
-        b,
+        A,
         {
-          onChange: (n) => e((g) => n),
-          value: r,
+          onChange: (m) => i((e) => m),
+          value: a,
           maxLength: 150
         }
       ),
-      /* @__PURE__ */ t.jsx("div", { className: a.typeTexts, children: E.map((n) => /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ t.jsx(
+        z,
+        {
+          typeText: o,
+          setTypeText: c
+        }
+      )
+    ] })
+  ] });
+}, ot = "_subtitle_2l7ty_1", it = "_header_2l7ty_8", ct = "_text_2l7ty_9", lt = "_productsBlock_2l7ty_10", at = "_top_2l7ty_22", dt = "_itemsBlock_2l7ty_29", rt = "_typeTexts_2l7ty_35", _t = "_block_2l7ty_41", ut = "_active_2l7ty_52", pt = "_products_2l7ty_10", ht = "_product_2l7ty_10", mt = "_button_2l7ty_70", xt = "_image_2l7ty_80", gt = "_info_2l7ty_87", bt = "_name_2l7ty_98", vt = "_buttons_2l7ty_102", jt = "_modal_2l7ty_108", yt = "_other_2l7ty_125", l = {
+  subtitle: ot,
+  header: it,
+  text: ct,
+  productsBlock: lt,
+  top: at,
+  itemsBlock: dt,
+  typeTexts: rt,
+  block: _t,
+  active: ut,
+  products: pt,
+  product: ht,
+  button: mt,
+  image: xt,
+  info: gt,
+  name: bt,
+  buttons: vt,
+  modal: jt,
+  other: yt
+}, kt = (_) => {
+  const { activeProduct: o, setActiveProduct: u, popupPosition: n } = _;
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: l.modal,
+      onClick: (a) => {
+        a.stopPropagation();
+      },
+      style: {
+        top: `${n.top}px`,
+        left: `${n.left}px`
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: l.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: o.name }),
+          /* @__PURE__ */ t.jsx(
+            r,
+            {
+              name: "x",
+              height: 20,
+              width: 20,
+              hoverable: !0,
+              onClick: () => u(null)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsxs("div", { children: [
+          /* @__PURE__ */ t.jsx("span", { children: "Put up an attractive image" }),
+          /* @__PURE__ */ t.jsx("div", { children: "Choose Image" })
+        ] })
+      ]
+    }
+  );
+}, Qt = (_) => {
+  const {
+    isActiveProducts: o,
+    setIsActiveProducts: u,
+    products: n,
+    setProducts: a,
+    isProductStats: i,
+    setIsProductStats: c,
+    title: g = "Product",
+    subtitle: v = "Products will appear in this section"
+  } = _, [m, e] = b.useState(null), [h, j] = b.useState({
+    top: 0,
+    left: 0
+  });
+  b.useEffect(() => {
+    const s = () => {
+      e(null);
+    };
+    return document.body.addEventListener("click", s), e(null), () => {
+      e(null), document.body.removeEventListener("click", s);
+    };
+  }, []);
+  const w = (s, d) => {
+    s.stopPropagation();
+    const f = s.target.getBoundingClientRect(), P = 100, $ = window.innerHeight;
+    let N = f.top + window.scrollY;
+    N + P > $ && (N = $ - P - 20), j({
+      top: N - 80,
+      left: f.left - 30
+    }), e(d);
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: l.productsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: l.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: l.title, children: g }),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          current: o,
+          onChange: (s) => u((d) => s)
+        }
+      )
+    ] }),
+    m && /* @__PURE__ */ t.jsx(
+      kt,
+      {
+        activeProduct: m,
+        setActiveProduct: e,
+        popupPosition: h
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: l.products, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: l.subtitle, children: v }),
+      n.map((s) => /* @__PURE__ */ t.jsxs(
         "div",
         {
-          className: v(a.block, {
-            [a.active]: i === n
+          className: l.product,
+          children: [
+            /* @__PURE__ */ t.jsxs("div", { className: l.info, children: [
+              /* @__PURE__ */ t.jsx("div", { className: l.image, children: s.image ? /* @__PURE__ */ t.jsx("img", { src: s.image }) : /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  name: "image",
+                  width: 16,
+                  height: 16,
+                  fill: "#757575"
+                }
+              ) }),
+              /* @__PURE__ */ t.jsx("span", { className: l.name, children: s.name }),
+              /* @__PURE__ */ t.jsx(r, { name: "arrow-down" })
+            ] }),
+            /* @__PURE__ */ t.jsxs("div", { className: l.buttons, children: [
+              /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  name: "sliders",
+                  hoverable: !0,
+                  width: 20,
+                  height: 20,
+                  onClick: (d) => {
+                    w(d, s);
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  name: "trash",
+                  hoverable: !0,
+                  onClick: () => a((d) => d.filter((f) => f.id !== s.id)),
+                  width: 20,
+                  height: 20,
+                  fill: "#C12A2A"
+                }
+              )
+            ] })
+          ]
+        },
+        s.id
+      )),
+      /* @__PURE__ */ t.jsxs(
+        S,
+        {
+          className: l.button,
+          size: "s",
+          onClick: () => a((s) => {
+            const d = [...s];
+            return d.push({
+              name: "Product 1",
+              id: L()
+            }), d;
           }),
-          onClick: () => l((g) => n),
-          children: /* @__PURE__ */ t.jsx(
-            h,
+          children: [
+            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+            /* @__PURE__ */ t.jsx(
+              r,
+              {
+                name: "plus",
+                width: 16,
+                height: 16
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    i !== void 0 && /* @__PURE__ */ t.jsxs("div", { className: l.other, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: l.subtitle, children: "Other" }),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          current: i,
+          onChange: (s) => c == null ? void 0 : c((d) => s),
+          label: "Product Stats",
+          hasBackground: !0,
+          paddingless: !1
+        }
+      )
+    ] })
+  ] });
+}, wt = "_subtitle_1y5sw_1", ft = "_header_1y5sw_8", Nt = "_text_1y5sw_9", Bt = "_productsBlock_1y5sw_10", Pt = "_buttonsBlock_1y5sw_11", $t = "_top_1y5sw_22", Ct = "_itemsBlock_1y5sw_29", Tt = "_typeTexts_1y5sw_35", At = "_block_1y5sw_41", St = "_active_1y5sw_52", Lt = "_products_1y5sw_10", zt = "_product_1y5sw_10", It = "_button_1y5sw_11", Rt = "_image_1y5sw_80", Et = "_info_1y5sw_87", Ht = "_name_1y5sw_98", Ot = "_buttons_1y5sw_11", Ft = "_modal_1y5sw_108", Gt = "_other_1y5sw_125", Dt = "_options_1y5sw_131", p = {
+  subtitle: wt,
+  header: ft,
+  text: Nt,
+  productsBlock: Bt,
+  buttonsBlock: Pt,
+  top: $t,
+  itemsBlock: Ct,
+  typeTexts: Tt,
+  block: At,
+  active: St,
+  products: Lt,
+  product: zt,
+  button: It,
+  image: Rt,
+  info: Et,
+  name: Ht,
+  buttons: Ot,
+  modal: Ft,
+  other: Gt,
+  options: Dt
+}, Mt = (_) => {
+  const { activeButton: o, setActiveButton: u, popupPosition: n } = _, [a, i] = b.useState(o.typeText), [c, g] = b.useState(o.destination), [v, m] = b.useState(o.link || "");
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      className: p.modal,
+      onClick: (e) => {
+        e.stopPropagation();
+      },
+      style: {
+        top: `${n.top}px`,
+        left: `${n.left}px`
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs("div", { className: p.top, children: [
+          /* @__PURE__ */ t.jsx("h3", { children: o.type }),
+          /* @__PURE__ */ t.jsx(
+            r,
             {
-              name: `text-${n}`,
-              fill: i === n ? "#252525" : "#757575",
+              name: "x",
+              height: 20,
               width: 20,
-              height: 20
+              hoverable: !0,
+              onClick: () => u(null)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsxs("div", { className: p.options, children: [
+          /* @__PURE__ */ t.jsx(
+            C,
+            {
+              label: "Destination",
+              onChange: (e) => g(e),
+              options: ["Go to Page", "Open Link"],
+              value: c
+            }
+          ),
+          c === "Go to Page" ? /* @__PURE__ */ t.jsx(
+            C,
+            {
+              label: "Go to",
+              onChange: () => {
+              },
+              options: [],
+              value: "Homepage"
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            T,
+            {
+              onChange: (e) => m(e),
+              value: v,
+              placeholder: "https://",
+              label: "Link"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            k,
+            {
+              current: !1,
+              label: "Open in new tab"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            A,
+            {
+              onChange: () => {
+              },
+              value: "Lorem ipsum dolor sit amet com",
+              label: "Text",
+              maxLength: 150
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            z,
+            {
+              typeText: a,
+              setTypeText: i
             }
           )
+        ] })
+      ]
+    }
+  );
+}, Ut = (_) => {
+  const { isActiveButtons: o, setIsActiveButtons: u, buttons: n, setButtons: a } = _, [i, c] = b.useState(null), [g, v] = b.useState({
+    top: 0,
+    left: 0
+  });
+  b.useEffect(() => {
+    const e = () => {
+      c(null);
+    };
+    return document.body.addEventListener("click", e), c(null), () => {
+      c(null), document.body.removeEventListener("click", e);
+    };
+  }, []);
+  const m = (e, h) => {
+    e.stopPropagation();
+    const j = e.target.getBoundingClientRect(), w = 490, s = window.innerHeight;
+    let d = j.top + window.scrollY;
+    d + w > s && (d = s - w - 20), v({
+      top: d,
+      left: j.left - 30
+    }), c(h);
+  };
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs("div", { className: p.buttonsBlock, children: [
+    /* @__PURE__ */ t.jsxs("div", { className: p.top, children: [
+      /* @__PURE__ */ t.jsx("h3", { className: p.title, children: "Buttons" }),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          current: o,
+          onChange: (e) => u((h) => e)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsxs("div", { className: p.products, children: [
+      /* @__PURE__ */ t.jsx("h5", { className: p.subtitle, children: "Button Type" }),
+      n.map((e) => /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          className: p.product,
+          children: [
+            /* @__PURE__ */ t.jsxs("div", { className: p.info, children: [
+              /* @__PURE__ */ t.jsx("span", { className: p.name, children: e.type }),
+              /* @__PURE__ */ t.jsx(r, { name: "arrow-down" })
+            ] }),
+            /* @__PURE__ */ t.jsxs("div", { className: p.buttons, children: [
+              /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  name: "sliders",
+                  hoverable: !0,
+                  width: 20,
+                  height: 20,
+                  onClick: (h) => {
+                    m(h, e);
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  name: "trash",
+                  hoverable: !0,
+                  onClick: () => a((h) => h.filter((j) => j.id !== e.id)),
+                  width: 20,
+                  height: 20,
+                  fill: "#C12A2A"
+                }
+              )
+            ] })
+          ]
         },
-        String(n)
-      )) })
+        e.id
+      )),
+      i && /* @__PURE__ */ t.jsx(
+        Mt,
+        {
+          activeButton: i,
+          setActiveButton: c,
+          popupPosition: g
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(
+        S,
+        {
+          className: p.button,
+          size: "s",
+          onClick: () => a((e) => {
+            const h = [...e];
+            return h.push({
+              type: "Primary",
+              id: L(),
+              typeText: "bold",
+              destination: "Go to Page"
+            }), h;
+          }),
+          children: [
+            /* @__PURE__ */ t.jsx("span", { children: "Add Option" }),
+            /* @__PURE__ */ t.jsx(
+              r,
+              {
+                name: "plus",
+                width: 16,
+                height: 16
+              }
+            )
+          ]
+        }
+      )
     ] })
-  ] });
+  ] }) });
 };
 export {
-  Q as Button,
-  U as ColorPicker,
-  h as Icon,
-  x as Input,
-  G as LayoutSettings,
-  V as Modal,
-  W as Picker,
-  X as Radio,
-  Y as Select,
-  Z as Submodal,
-  p as Switch,
-  H as TextSettings,
-  b as Textarea,
-  tt as Tip
+  S as Button,
+  Ut as ButtonsSettings,
+  Xt as ColorPicker,
+  r as Icon,
+  T as Input,
+  Jt as LayoutSettings,
+  Zt as Modal,
+  te as Picker,
+  Qt as ProductSettings,
+  ee as Radio,
+  C as Select,
+  se as Submodal,
+  k as Switch,
+  Kt as TextSettings,
+  A as Textarea,
+  ne as Tip,
+  z as TypeTexts
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@billgangcom/theme-lib",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"