@chaibuilder/sdk 1.2.10 → 1.2.12

package/README.md

@@ -1,14 +1,14 @@
-# Chai Builder - Low-Code Visual Builder
+# Chai Builder - Open Source Visual Builder
 
-Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. Its a simple React component which can be integrated into any React based framework.
+Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. 
+It allows you to create web pages & email templates visually by dragging and dropping elements onto the canvas. 
+It is a simple React component that renders a full-fledged visual builder into any React application. 
 
-### Try Chai Builder:
-[Demo Link](https://chaibuilder-demo.vercel.app)
-   |      [GitHub](https://github.com/surajair/demo)
+### [Try Chai Builder](https://chaibuilder.com/demo)
 
 ---
 
-### Getting Started:
+### Manual installation:
 
 Step 1: Install the packages
 ```bash
@@ -50,16 +50,14 @@ const BuilderFullPage = () => {
 ```
     
 Step 5: Render the blocks on your page.
+
 ```tsx
-export default async () => {
-    const styles = await getStylesForBlocks(blocks, brandingOptions);
-    return <>
-        <style>{styles}</style>
-        <RenderChaiBlocks blocks={blocks} />
-    </>
+export default () => {
+    return <RenderChaiBlocks blocks={blocks}/>
 }
 ```
 
+---
 ## Support
 If you like the project, you can assist us in expanding. ChaiBuilder is a collaborative endeavor crafted by developers in their free time. We value every contribution, no matter how modest, as each one represents a significant step forward in various ways, particularly in fueling our drive to enhance this tool continually.
 

package/dist/AddBlocks-ByeMUUzE.js

@@ -0,0 +1,218 @@
+import { j as e } from "./jsx-runtime-WbnYoNE9.js";
+import y, { createElement as z, useState as f, useCallback as G, useMemo as M, useEffect as q, Suspense as V } from "react";
+import { has as S, first as x, omit as K, isEmpty as g, filter as j, values as b, groupBy as N, mergeWith as O, isArray as T, keys as R, get as U, map as B, uniq as W, includes as J, find as X, reject as _ } from "lodash-es";
+import { useAtom as v } from "jotai";
+import { useTranslation as L } from "react-i18next";
+import { K as w, j as C, X as Q, ao as A, av as Y, aw as Z, ax as $, i as I, a2 as F, aj as ee, ak as se, al as re, am as te, an as P, bg as oe, bh as ae, bi as le, bj as ce, az as ie, bk as ne, bl as de, B as me, bm as pe, bn as ue, bo as xe, ap as he, aq as fe, ar as k, bf as ge, b8 as je, b9 as be, ba as ye, bb as ve, S as ke } from "./index-0m8Zuv5X.js";
+import { BoxIcon as Ne } from "@radix-ui/react-icons";
+import { syncBlocksWithDefaults as H, useChaiBlocks as E } from "@chaibuilder/runtime";
+import { useFeature as Be } from "flagged";
+import { Loader as we } from "lucide-react";
+import { useDrag as Ce, DragPreviewImage as Ae } from "react-dnd";
+import { g as Te } from "./html-to-json-57841sEK.js";
+import "./_commonjsHelpers-UyOWmZb0.js";
+import "./Functions-7jnEwJyw.js";
+import "clsx";
+import "tailwind-merge";
+import "flat-to-nested";
+import "./MODIFIERS-RiXS5Mn1.js";
+import "@react-hookz/web";
+import "@radix-ui/react-toggle";
+import "class-variance-authority";
+import "./Class-17XFhL48.js";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-menubar";
+import "@radix-ui/react-hover-card";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dropdown-menu";
+import "@radix-ui/react-separator";
+import "@radix-ui/react-toast";
+import "cmdk";
+import "@radix-ui/react-context-menu";
+import "react-icons-picker";
+import "react-dom";
+import "react-quill";
+import "himalaya";
+const _e = ({ block: s }) => {
+  const { type: t, icon: i, label: l } = s, { addCoreBlock: d, addPredefinedBlock: c } = w(), [n, o] = C(), [, u] = Q(), [, p] = v(A), a = () => {
+    S(s, "blocks") ? c(H(s.blocks), x(n)) : d(s, x(n)), p("layers");
+  }, r = Be("dnd");
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(Y, { children: [
+    /* @__PURE__ */ e.jsx(Z, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+      "button",
+      {
+        onClick: a,
+        type: "button",
+        onDragStart: (h) => {
+          h.dataTransfer.setData("text/plain", JSON.stringify(K(s, ["component", "icon"]))), setTimeout(() => {
+            o([]), u(null), p("layers");
+          }, 200);
+        },
+        draggable: r ? "true" : "false",
+        className: "space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 " + (r ? "cursor-grab" : "cursor-pointer"),
+        children: [
+          z(i || Ne, { className: "w-4 h-4 mx-auto" }),
+          /* @__PURE__ */ e.jsx("p", { className: "truncate text-xs", children: l || t })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx($, { children: /* @__PURE__ */ e.jsx("p", { children: l || t }) })
+  ] }) });
+}, Pe = ({ block: s, closePopover: t }) => {
+  var r;
+  const [i, l] = f(!1), d = I("getExternalPredefinedBlock"), { addCoreBlock: c, addPredefinedBlock: n } = w(), [o] = C(), [, u, p] = Ce(
+    () => ({
+      type: "CHAI_BLOCK",
+      item: s
+    }),
+    [s]
+  ), a = G(
+    async (h) => {
+      if (h.stopPropagation(), S(s, "component")) {
+        c(s, x(o)), t();
+        return;
+      }
+      l(!0);
+      const m = await d(s);
+      g(m) || n(H(m), x(o)), t();
+    },
+    [s]
+  );
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      Ae,
+      {
+        connect: p,
+        src: "https://placehold.co/100x30/000000/FFF?text=" + ((r = s.name || s.label) == null ? void 0 : r.replace(" ", "+"))
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ref: u,
+        onClick: i ? () => {
+        } : a,
+        className: "relative cursor-pointer overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",
+        children: [
+          i && /* @__PURE__ */ e.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70", children: [
+            /* @__PURE__ */ e.jsx(we, { className: "animate-spin", size: 15, color: "white" }),
+            " ",
+            /* @__PURE__ */ e.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
+          ] }),
+          s.preview ? /* @__PURE__ */ e.jsx(
+            "img",
+            {
+              src: s.preview,
+              className: "min-h-[50px] w-full rounded-md border border-gray-300",
+              alt: s.label
+            }
+          ) : /* @__PURE__ */ e.jsx("div", { className: "flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200", children: /* @__PURE__ */ e.jsx("p", { className: "max-w-xs text-center text-sm text-gray-700", children: s.label }) })
+        ]
+      }
+    )
+  ] });
+}, Se = () => {
+  const { data: s } = F(), t = E(), i = j(b(t), { category: "custom" }), l = N(i, "group"), d = N(s, "group"), c = M(() => O(l, d, (a, r) => {
+    if (T(a) && T(r))
+      return [...a, ...r];
+  }), [l, d]), [n, o] = f(x(R(c)) || ""), [, u] = v(A), p = U(c, n, []);
+  return /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col h-full max-h-full overflow-hidden py-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "p-3 sticky top-0 flex w-full items-center", children: /* @__PURE__ */ e.jsxs(ee, { value: n, onValueChange: (a) => o(a), children: [
+      /* @__PURE__ */ e.jsx(se, { className: "w-full", children: /* @__PURE__ */ e.jsx(re, { placeholder: "Select a provider" }) }),
+      /* @__PURE__ */ e.jsxs(te, { children: [
+        /* @__PURE__ */ e.jsx(P, { value: "", children: "Choose" }),
+        y.Children.toArray(
+          B(c, (a, r) => /* @__PURE__ */ e.jsx(P, { value: r, children: r }, r))
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "h-full w-full space-y-2 overflow-y-auto px-2", children: y.Children.toArray(
+      p.map((a) => /* @__PURE__ */ e.jsx(Pe, { block: a, closePopover: () => u("layers") }))
+    ) })
+  ] });
+}, Le = () => {
+  const { t: s } = L(), [t, i] = f(""), { addPredefinedBlock: l } = w(), [d] = C(), [, c] = v(A), n = () => {
+    const o = Te(t);
+    l([...o], x(d) || null), i(""), c("layers");
+  };
+  return /* @__PURE__ */ e.jsxs(oe, { className: "border-border/0 p-0 shadow-none", children: [
+    /* @__PURE__ */ e.jsx(ae, { className: "p-3", children: /* @__PURE__ */ e.jsx(le, { children: s("html_snippet_description") }) }),
+    /* @__PURE__ */ e.jsx(ce, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ e.jsx(ie, { htmlFor: "current", className: "text-sm", children: s("tailwind_html_snippet") }),
+      /* @__PURE__ */ e.jsx(
+        ne,
+        {
+          autoFocus: !0,
+          tabIndex: 1,
+          ref: (o) => o && o.focus(),
+          onChange: (o) => i(o.target.value),
+          rows: 12,
+          value: t,
+          placeholder: s("enter_code_snippet"),
+          className: "resize-none bg-gray-100 overflow-x-auto whitespace-pre text-xs font-mono font-normal"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e.jsxs(de, { className: "flex flex-col justify-end p-3", children: [
+      /* @__PURE__ */ e.jsx(me, { disabled: t.trim() === "", onClick: () => n(), size: "sm", className: "w-full", children: s("import_html") }),
+      /* @__PURE__ */ e.jsx(pe, { variant: "default", className: "mt-2 p-1 border-none text-gray-400", children: /* @__PURE__ */ e.jsx(ue, { className: "text-xs font-normal leading-4", children: s("note_imported_html") }) })
+    ] })
+  ] });
+}, Ie = () => !0, Bs = () => {
+  const { t: s } = L(), [t, i] = f("core"), [l, d] = f("basic"), c = E(), [, n] = v(xe), o = I("importHTMLSupport", !0), { data: u, isLoading: p } = F(), a = N(
+    j(c, () => Ie()),
+    "category"
+  ), r = W(B(a.core, "group"));
+  q(() => {
+    !J(r, l) && !g(r) && !g(l) && d(x(r));
+  }, [r, l]);
+  const h = !p && !g(u) || X(b(c), { category: "custom" }) !== void 0;
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1", children: [
+      /* @__PURE__ */ e.jsx("h1", { className: "flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col", children: s("add_block") }),
+      /* @__PURE__ */ e.jsx("span", { className: "p-0 text-xs font-light leading-3 opacity-80 xl:pl-1", children: s(t === "html" ? "enter_paste_tailwind_html" : "click_to_add_block") })
+    ] }),
+    /* @__PURE__ */ e.jsx(
+      he,
+      {
+        onValueChange: (m) => {
+          n(""), i(m);
+        },
+        value: t,
+        className: "h-max",
+        children: /* @__PURE__ */ e.jsxs(fe, { className: "grid w-full " + (h && o ? "grid-cols-3" : "grid-cols-2"), children: [
+          /* @__PURE__ */ e.jsx(k, { value: "core", children: s("core") }),
+          h ? /* @__PURE__ */ e.jsx(k, { value: "ui-blocks", children: s("custom_blocks") }) : null,
+          o ? /* @__PURE__ */ e.jsx(k, { value: "html", children: s("import") }) : null
+        ] })
+      }
+    ),
+    t === "core" && /* @__PURE__ */ e.jsx(ge, { className: "-mx-1.5 h-full", children: /* @__PURE__ */ e.jsx("div", { className: "mt-2 w-full", children: y.Children.toArray(
+      B(
+        r,
+        (m) => _(j(b(a.core), { group: m }), {
+          hidden: !0
+        }).length ? /* @__PURE__ */ e.jsx(je, { type: "single", value: m, collapsible: !0, className: "w-full", children: /* @__PURE__ */ e.jsxs(be, { value: m, children: [
+          /* @__PURE__ */ e.jsx(ye, { className: "rounded-md bg-gray-100 px-4 py-2 capitalize", children: m }),
+          /* @__PURE__ */ e.jsx(ve, { className: "p-3", children: /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-3 gap-2", children: y.Children.toArray(
+            _(j(b(a.core), { group: m }), { hidden: !0 }).map((D) => /* @__PURE__ */ e.jsx(_e, { block: D }))
+          ) }) })
+        ] }) }) : null
+      )
+    ) }) }),
+    t === "ui-blocks" && /* @__PURE__ */ e.jsx(V, { fallback: /* @__PURE__ */ e.jsx(ke, { className: "h-32 w-full" }), children: /* @__PURE__ */ e.jsx(Se, {}) }),
+    t === "html" && o ? /* @__PURE__ */ e.jsx(Le, {}) : null
+  ] });
+};
+export {
+  Bs as default
+};

package/dist/AddBlocks-nMUkm4og.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-Z_BpKhVy.cjs"),c=require("react"),t=require("lodash-es"),g=require("jotai"),y=require("react-i18next"),s=require("./index-TEfD-2ti.cjs"),b=require("@radix-ui/react-icons"),E=require("@chaibuilder/runtime"),q=require("flagged"),B=require("lucide-react"),R=require("react-dnd"),k=require("./html-to-json-2PeOCVey.cjs");require("./_commonjsHelpers-wDK0ZLPo.cjs");require("./Functions-N3yhPYKY.cjs");require("clsx");require("tailwind-merge");require("flat-to-nested");require("./MODIFIERS-2FeVfZQ9.cjs");require("@react-hookz/web");require("@radix-ui/react-toggle");require("class-variance-authority");require("./Class-5ARpH_Tu.cjs");require("@radix-ui/react-switch");require("@radix-ui/react-slot");require("@radix-ui/react-accordion");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-dialog");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-menubar");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-context-menu");require("react-icons-picker");require("react-dom");require("react-quill");require("himalaya");const N=({block:r})=>{const{type:i,icon:d,label:a}=r,{addCoreBlock:m,addPredefinedBlock:u}=s.useAddBlock(),[x,l]=s.useSelectedBlockIds(),[,h]=s.useHighlightBlockId(),[,j]=g.useAtom(s.activePanelAtom),n=()=>{t.has(r,"blocks")?u(E.syncBlocksWithDefaults(r.blocks),t.first(x)):m(r,t.first(x)),j("layers")},o=q.useFeature("dnd");return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(s.Tooltip,{children:[e.jsxRuntimeExports.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:n,type:"button",onDragStart:f=>{f.dataTransfer.setData("text/plain",JSON.stringify(t.omit(r,["component","icon"]))),setTimeout(()=>{l([]),h(null),j("layers")},200)},draggable:o?"true":"false",className:"space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 "+(o?"cursor-grab":"cursor-pointer"),children:[c.createElement(d||b.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:a||i})]})}),e.jsxRuntimeExports.jsx(s.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:a||i})})]})})},A=({block:r,closePopover:i})=>{var o;const[d,a]=c.useState(!1),m=s.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:u,addPredefinedBlock:x}=s.useAddBlock(),[l]=s.useSelectedBlockIds(),[,h,j]=R.useDrag(()=>({type:"CHAI_BLOCK",item:r}),[r]),n=c.useCallback(async f=>{if(f.stopPropagation(),t.has(r,"component")){u(r,t.first(l)),i();return}a(!0);const p=await m(r);t.isEmpty(p)||x(E.syncBlocksWithDefaults(p),t.first(l)),i()},[r]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(R.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+((o=r.name||r.label)==null?void 0:o.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:h,onClick:d?()=>{}:n,className:"relative cursor-pointer overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[d&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(B.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),r.preview?e.jsxRuntimeExports.jsx("img",{src:r.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:r.label}):e.jsxRuntimeExports.jsx("div",{className:"flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200",children:e.jsxRuntimeExports.jsx("p",{className:"max-w-xs text-center text-sm text-gray-700",children:r.label})})]})]})},C=()=>{const{data:r}=s.useUILibraryBlocks(),i=E.useChaiBlocks(),d=t.filter(t.values(i),{category:"custom"}),a=t.groupBy(d,"group"),m=t.groupBy(r,"group"),u=c.useMemo(()=>t.mergeWith(a,m,(n,o)=>{if(t.isArray(n)&&t.isArray(o))return[...n,...o]}),[a,m]),[x,l]=c.useState(t.first(t.keys(u))||""),[,h]=g.useAtom(s.activePanelAtom),j=t.get(u,x,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex flex-col h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("div",{className:"p-3 sticky top-0 flex w-full items-center",children:e.jsxRuntimeExports.jsxs(s.Select,{value:x,onValueChange:n=>l(n),children:[e.jsxRuntimeExports.jsx(s.SelectTrigger,{className:"w-full",children:e.jsxRuntimeExports.jsx(s.SelectValue,{placeholder:"Select a provider"})}),e.jsxRuntimeExports.jsxs(s.SelectContent,{children:[e.jsxRuntimeExports.jsx(s.SelectItem,{value:"",children:"Choose"}),c.Children.toArray(t.map(u,(n,o)=>e.jsxRuntimeExports.jsx(s.SelectItem,{value:o,children:o},o)))]})]})}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-2",children:c.Children.toArray(j.map(n=>e.jsxRuntimeExports.jsx(A,{block:n,closePopover:()=>h("layers")})))})]})},w=()=>{const{t:r}=y.useTranslation(),[i,d]=c.useState(""),{addPredefinedBlock:a}=s.useAddBlock(),[m]=s.useSelectedBlockIds(),[,u]=g.useAtom(s.activePanelAtom),x=()=>{const l=k.getBlocksFromHTML(i);a([...l],t.first(m)||null),d(""),u("layers")};return e.jsxRuntimeExports.jsxs(s.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsx(s.CardHeader,{className:"p-3",children:e.jsxRuntimeExports.jsx(s.CardDescription,{children:r("html_snippet_description")})}),e.jsxRuntimeExports.jsx(s.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(s.Label,{htmlFor:"current",className:"text-sm",children:r("tailwind_html_snippet")}),e.jsxRuntimeExports.jsx(s.Textarea,{autoFocus:!0,tabIndex:1,ref:l=>l&&l.focus(),onChange:l=>d(l.target.value),rows:12,value:i,placeholder:r("enter_code_snippet"),className:"resize-none bg-gray-100 overflow-x-auto whitespace-pre text-xs font-mono font-normal"})]})}),e.jsxRuntimeExports.jsxs(s.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(s.Button,{disabled:i.trim()==="",onClick:()=>x(),size:"sm",className:"w-full",children:r("import_html")}),e.jsxRuntimeExports.jsx(s.Alert,{variant:"default",className:"mt-2 p-1 border-none text-gray-400",children:e.jsxRuntimeExports.jsx(s.AlertTitle,{className:"text-xs font-normal leading-4",children:r("note_imported_html")})})]})]})},T=()=>!0,S=()=>{const{t:r}=y.useTranslation(),[i,d]=c.useState("core"),[a,m]=c.useState("basic"),u=E.useChaiBlocks(),[,x]=g.useAtom(s.showPredefinedBlockCategoryAtom),l=s.useBuilderProp("importHTMLSupport",!0),{data:h,isLoading:j}=s.useUILibraryBlocks(),n=t.groupBy(t.filter(u,()=>T()),"category"),o=t.uniq(t.map(n.core,"group"));c.useEffect(()=>{!t.includes(o,a)&&!t.isEmpty(o)&&!t.isEmpty(a)&&m(t.first(o))},[o,a]);const f=!j&&!t.isEmpty(h)||t.find(t.values(u),{category:"custom"})!==void 0;return e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col overflow-hidden",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-2 flex flex-col justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsx("h1",{className:"flex flex-col items-baseline px-1 text-xl font-semibold xl:flex-col",children:r("add_block")}),e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:r(i==="html"?"enter_paste_tailwind_html":"click_to_add_block")})]}),e.jsxRuntimeExports.jsx(s.Tabs,{onValueChange:p=>{x(""),d(p)},value:i,className:"h-max",children:e.jsxRuntimeExports.jsxs(s.TabsList,{className:"grid w-full "+(f&&l?"grid-cols-3":"grid-cols-2"),children:[e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"core",children:r("core")}),f?e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"ui-blocks",children:r("custom_blocks")}):null,l?e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"html",children:r("import")}):null]})}),i==="core"&&e.jsxRuntimeExports.jsx(s.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx("div",{className:"mt-2 w-full",children:c.Children.toArray(t.map(o,p=>t.reject(t.filter(t.values(n.core),{group:p}),{hidden:!0}).length?e.jsxRuntimeExports.jsx(s.Accordion,{type:"single",value:p,collapsible:!0,className:"w-full",children:e.jsxRuntimeExports.jsxs(s.AccordionItem,{value:p,children:[e.jsxRuntimeExports.jsx(s.AccordionTrigger,{className:"rounded-md bg-gray-100 px-4 py-2 capitalize",children:p}),e.jsxRuntimeExports.jsx(s.AccordionContent,{className:"p-3",children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-3 gap-2",children:c.Children.toArray(t.reject(t.filter(t.values(n.core),{group:p}),{hidden:!0}).map(v=>e.jsxRuntimeExports.jsx(N,{block:v})))})})]})}):null))})}),i==="ui-blocks"&&e.jsxRuntimeExports.jsx(c.Suspense,{fallback:e.jsxRuntimeExports.jsx(s.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(C,{})}),i==="html"&&l?e.jsxRuntimeExports.jsx(w,{}):null]})};exports.default=S;

package/dist/{BrandingOptions-10jJO8mG.js → BrandingOptions--poS5shs.js}

@@ -2,16 +2,21 @@ import { j as t } from "./jsx-runtime-WbnYoNE9.js";
 import * as c from "react";
 import N from "@rjsf/validator-ajv8";
 import j from "@rjsf/core";
-import { i as k, t as D, bC as P } from "./index-B4sL0YTN.js";
-import { f, c as R, y as a } from "./controls-XPXGHKht.js";
+import { i as k, t as D, bt as P } from "./index-0m8Zuv5X.js";
+import { f, c as R, y as a } from "./empty-slot-MWycClTb.js";
 import { debounce as w, isEqual as L } from "lodash-es";
 import "./_commonjsHelpers-UyOWmZb0.js";
-import "@radix-ui/react-toggle";
-import "class-variance-authority";
-import "./utils-AvyFzbPC.js";
-import "./MODIFIERS-RiXS5Mn1.js";
+import "./Functions-7jnEwJyw.js";
 import "clsx";
 import "tailwind-merge";
+import "@chaibuilder/runtime";
+import "jotai";
+import "flat-to-nested";
+import "./MODIFIERS-RiXS5Mn1.js";
+import "@react-hookz/web";
+import "@radix-ui/react-toggle";
+import "class-variance-authority";
+import "./Class-17XFhL48.js";
 import "@radix-ui/react-switch";
 import "@radix-ui/react-slot";
 import "@radix-ui/react-accordion";
@@ -34,12 +39,6 @@ import "@radix-ui/react-context-menu";
 import "react-icons-picker";
 import "react-dom";
 import "react-quill";
-import "jotai";
-import "flat-to-nested";
-import "./Functions-7jnEwJyw.js";
-import "redux-undo";
-import "@chaibuilder/runtime";
-import "@react-hookz/web";
 import "react-i18next";
 const F = ({ value: u, onChange: e, id: p, onBlur: d }) => {
   const i = w(e, 200), m = (l) => i(l.target.value);
@@ -103,7 +102,7 @@ const F = ({ value: u, onChange: e, id: p, onBlur: d }) => {
   { title: "Lustria", value: "Lustria" },
   { title: "Ovo", value: "Ovo" },
   { title: "Suranna", value: "Suranna" }
-], St = () => {
+], Ct = () => {
   const u = k("onSaveBrandingOptions", async () => {
   }), [e, p] = D(), [d] = P(), i = c.useRef(e);
   c.useEffect(() => () => {
@@ -146,14 +145,14 @@ const F = ({ value: u, onChange: e, id: p, onBlur: d }) => {
       title: "Body Background (Light)",
       default: B
     }),
-    bodyBgDarkColor: a({
-      title: "Body Background (Dark)",
-      default: C
-    }),
     bodyTextLightColor: a({
       title: "Body Text (Light)",
       default: x
     }),
+    bodyBgDarkColor: a({
+      title: "Body Background (Dark)",
+      default: C
+    }),
     bodyTextDarkColor: a({
       title: "Body Text (Dark)",
       default: b
@@ -171,9 +170,7 @@ const F = ({ value: u, onChange: e, id: p, onBlur: d }) => {
     /* @__PURE__ */ t.jsx("div", { className: "-mx-2", children: /* @__PURE__ */ t.jsx(
       j,
       {
-        widgets: {
-          color: F
-        },
+        widgets: { color: F },
         idSeparator: ".",
         autoComplete: "off",
         omitExtraData: !0,
@@ -189,5 +186,5 @@ const F = ({ value: u, onChange: e, id: p, onBlur: d }) => {
   ] });
 };
 export {
-  St as default
+  Ct as default
 };

package/dist/BrandingOptions-eeDfvB0R.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./jsx-runtime-Z_BpKhVy.cjs"),B=require("react"),R=require("@rjsf/validator-ajv8"),E=require("@rjsf/core"),p=require("./index-TEfD-2ti.cjs"),r=require("./empty-slot-TF2kd-0X.cjs"),m=require("lodash-es");require("./_commonjsHelpers-wDK0ZLPo.cjs");require("./Functions-N3yhPYKY.cjs");require("clsx");require("tailwind-merge");require("@chaibuilder/runtime");require("jotai");require("flat-to-nested");require("./MODIFIERS-2FeVfZQ9.cjs");require("@react-hookz/web");require("@radix-ui/react-toggle");require("class-variance-authority");require("./Class-5ARpH_Tu.cjs");require("@radix-ui/react-switch");require("@radix-ui/react-slot");require("@radix-ui/react-accordion");require("@radix-ui/react-icons");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-dialog");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-menubar");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-context-menu");require("react-icons-picker");require("react-dom");require("react-quill");require("react-i18next");function N(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const l=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,l.get?l:{enumerable:!0,get:()=>t[i]})}}return e.default=t,Object.freeze(e)}const x=N(B),k=({value:t,onChange:e,id:i,onBlur:l})=>{const n=m.debounce(e,200),v=u=>n(u.target.value);return a.jsxRuntimeExports.jsx("div",{className:"mt-1.5 flex items-center gap-x-3",children:a.jsxRuntimeExports.jsx("div",{className:"flex w-3/5 flex-col",children:a.jsxRuntimeExports.jsx("input",{type:"color",className:"text-xs p-0",value:t,onBlur:({target:{value:u}})=>l(i,u),onChange:v})})})},f=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],P=()=>{const t=p.useBuilderProp("onSaveBrandingOptions",async()=>{}),[e,i]=p.useBrandingOptions(),[l]=p.useBlocksContainer(),n=x.useRef(e);x.useEffect(()=>()=>{m.isEqual(e,n.current)||t(n.current)},[]);const v=({formData:o},c)=>{c&&(i(o),n.current=o)},{bodyFont:u,headingFont:y,primaryColor:q,bodyTextDarkColor:b,bodyTextLightColor:h,bodyBgDarkColor:S,secondaryColor:C,bodyBgLightColor:O,roundedCorners:j}=e;let s={headingFont:r.f({title:"Heading font",default:y,options:f}),bodyFont:r.f({title:"Body font",default:u,options:f}),roundedCorners:r.c({title:"Rounded Corner",default:parseInt(j||5,10)}),primaryColor:r.y({title:"Primary",default:q}),secondaryColor:r.y({title:"Secondary",default:C})};l||(s={...s,bodyBgLightColor:r.y({title:"Body Background (Light)",default:O}),bodyTextLightColor:r.y({title:"Body Text (Light)",default:b}),bodyBgDarkColor:r.y({title:"Body Background (Dark)",default:S}),bodyTextDarkColor:r.y({title:"Body Text (Dark)",default:h})});const d={type:"object",properties:{}},g={};return Object.keys(s).forEach(o=>{const c=s[o];return d.properties||(d.properties={}),d.properties[o]=c.schema,g[o]=c.uiSchema,!0}),a.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[a.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:a.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),a.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:a.jsxRuntimeExports.jsx(E,{widgets:{color:k},idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:g,schema:d,formData:e,validator:R,onChange:v})})]})};exports.default=P;