@chaibuilder/sdk 1.2.60 → 1.2.62

package/README.md

@@ -4,7 +4,7 @@ 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](https://chaibuilder.com/demo)
+### [Try Chai Builder](https://chaibuilder.com/demos/web)
 
 ---
 

package/dist/AddBlocks-Wja5xsTO.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-Z_BpKhVy.cjs"),u=require("react"),t=require("lodash-es"),h=require("jotai"),q=require("react-i18next"),s=require("./index-upb0eDoG.cjs"),b=require("@radix-ui/react-icons"),R=require("@chaibuilder/runtime"),E=require("./MODIFIERS-mVmfEGgo.cjs"),T=require("./atoms-KQpaDRnF.cjs"),N=require("flagged"),k=require("./html-to-json-ndxaXRT8.cjs");require("./_commonjsHelpers-wDK0ZLPo.cjs");require("@radix-ui/react-toggle");require("class-variance-authority");require("./utils-D_vtk3zK.cjs");require("clsx");require("tailwind-merge");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("./Functions-N3yhPYKY.cjs");require("@react-hookz/web");require("tree-model");require("himalaya");require("lodash");const y=({block:r})=>{const[,i]=h.useAtom(T.draggedBlockAtom),{type:l,icon:c,label:d}=r,{addCoreBlock:p,addPredefinedBlock:j}=s.useAddBlock(),[o,g]=s.useSelectedBlockIds(),[,f]=s.useHighlightBlockId(),[,x]=h.useAtom(s.activePanelAtom),a=()=>{if(t.has(r,"blocks")){const m=t.isFunction(r.blocks)?r.blocks():r.blocks;j(R.syncBlocksWithDefaults(m),t.first(o))}else p(r,t.first(o));x(E.OUTLINE_KEY)},n=N.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:a,type:"button",onDragStart:m=>{m.dataTransfer.setData("text/plain",JSON.stringify(t.omit(r,["component","icon"]))),m.dataTransfer.setDragImage(new Image,0,0),i(t.omit(r,["component","icon"])),setTimeout(()=>{g([]),f(null),x(E.OUTLINE_KEY)},200)},draggable:n?"true":"false",className:"cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[u.createElement(c||b.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"text-xs",children:d||l})]})}),e.jsxRuntimeExports.jsx(s.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:d||l})})]})})},B=()=>{const{t:r}=q.useTranslation(),[i,l]=u.useState(""),{addPredefinedBlock:c}=s.useAddBlock(),[d]=s.useSelectedBlockIds(),[,p]=h.useAtom(s.activePanelAtom),j=()=>{const o=k.getBlocksFromHTML(i);c([...o],t.first(d)||null),l(""),p(E.OUTLINE_KEY)};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:o=>o&&o.focus(),onChange:o=>l(o.target.value),rows:12,value:i,placeholder:r("enter_code_snippet"),className:"resize-none overflow-x-auto whitespace-pre bg-gray-100 font-mono text-xs 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:()=>j(),size:"sm",className:"w-full",children:r("import_html")}),e.jsxRuntimeExports.jsx(s.Alert,{variant:"default",className:"mt-2 border-none p-1 text-gray-400",children:e.jsxRuntimeExports.jsx(s.AlertTitle,{className:"text-xs font-normal leading-4",children:r("note_imported_html")})})]})]})},v=()=>{const{t:r}=q.useTranslation(),[i,l]=u.useState("core"),[c,d]=u.useState("basic"),p=R.useChaiBlocks(),[,j]=h.useAtom(s.showPredefinedBlockCategoryAtom),o=s.useBuilderProp("importHTMLSupport",!0),g=s.useBuilderProp("filterChaiBlock",()=>!0),f=t.filter(p,g),x=t.groupBy(f,"category"),a=t.uniq(t.map(x.core,"group"));return u.useEffect(()=>{!t.includes(a,c)&&!t.isEmpty(a)&&!t.isEmpty(c)&&d(t.first(a))},[a,c]),e.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-72 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:n=>{j(""),l(n)},value:i,className:"h-max",children:e.jsxRuntimeExports.jsxs(s.TabsList,{className:"grid w-full "+(o?"grid-cols-2":"grid-cols-1"),children:[e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"core",children:r("Blocks")}),o?e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"html",children:r("import")}):null]})}),i==="core"&&e.jsxRuntimeExports.jsx(s.ScrollArea,{className:"-mx-1.5 h-[calc(100vh-156px)] overflow-y-auto",children:e.jsxRuntimeExports.jsx("div",{className:"mt-2 w-full",children:u.Children.toArray(t.map(a,n=>t.reject(t.filter(t.values(x.core),{group:n}),{hidden:!0}).length?e.jsxRuntimeExports.jsx(s.Accordion,{type:"single",value:n,collapsible:!0,className:"w-full",children:e.jsxRuntimeExports.jsxs(s.AccordionItem,{value:n,children:[e.jsxRuntimeExports.jsx(s.AccordionTrigger,{className:"rounded-md bg-gray-100 px-4 py-2 capitalize",children:n}),e.jsxRuntimeExports.jsx(s.AccordionContent,{className:"p-3",children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-3 gap-2",children:u.Children.toArray(t.reject(t.filter(t.values(x.core),{group:n}),{hidden:!0}).map(m=>e.jsxRuntimeExports.jsx(y,{block:m})))})})]})}):null))})}),i==="html"&&o?e.jsxRuntimeExports.jsx(B,{}):null]})};exports.default=v;

package/dist/{AddBlocks-L-3Io1jR.js → AddBlocks-ucNQHhx7.js}

@@ -1,14 +1,14 @@
 import { j as e } from "./jsx-runtime-WbnYoNE9.js";
-import N, { createElement as P, useState as b, useEffect as F } from "react";
-import { has as H, isFunction as S, first as x, omit as k, filter as g, groupBy as E, uniq as D, map as y, includes as M, isEmpty as B, reject as C, values as v } from "lodash-es";
+import N, { createElement as P, useState as j, useEffect as F } from "react";
+import { has as H, isFunction as S, first as x, omit as k, filter as g, groupBy as D, uniq as E, map as y, includes as M, isEmpty as B, reject as C, values as v } from "lodash-es";
 import { useAtom as h } from "jotai";
-import { useTranslation as _ } from "react-i18next";
-import { a2 as w, r as I, ad as z, aJ as L, aF as O, aG as q, aH as G, bt as J, bu as K, bv as R, bw as U, aX as V, T as W, bx as X, B as Y, by as Q, bz as Z, bA as $, h as T, aK as ee, aL as te, aM as A, bq as se, L as oe, M as re, N as ae, O as le } from "./index-TzLilp-0.js";
+import { useTranslation as w } from "react-i18next";
+import { a2 as A, r as I, ad as z, aJ as L, aF as O, aG as q, aH as G, bs as J, bt as K, bu as R, bv as U, aX as V, T as W, bw as X, B as Y, bx as Q, by as Z, bz as $, h as T, aK as ee, aL as te, aM as _, bp as se, L as oe, M as re, N as ae, O as le } from "./index-SyrshOUV.js";
 import { BoxIcon as ie } from "@radix-ui/react-icons";
 import { syncBlocksWithDefaults as ce, useChaiBlocks as ne } from "@chaibuilder/runtime";
-import { useFeature as de } from "flagged";
-import { O as j } from "./MODIFIERS-fd5XOmum.js";
-import { d as me } from "./atoms-ZOWyNoiC.js";
+import { O as b } from "./MODIFIERS-fd5XOmum.js";
+import { d as de } from "./atoms-Oomqut88.js";
+import { useFeature as me } from "flagged";
 import { g as pe } from "./html-to-json-_01DXd-a.js";
 import "./_commonjsHelpers-UyOWmZb0.js";
 import "@radix-ui/react-toggle";
@@ -43,14 +43,14 @@ import "tree-model";
 import "himalaya";
 import "lodash";
 const xe = ({ block: t }) => {
-  const [, o] = h(me), { type: a, icon: l, label: c } = t, { addCoreBlock: m, addPredefinedBlock: p } = w(), [s, u] = I(), [, f] = z(), [, n] = h(L), i = () => {
+  const [, o] = h(de), { type: a, icon: l, label: c } = t, { addCoreBlock: m, addPredefinedBlock: p } = A(), [s, u] = I(), [, f] = z(), [, n] = h(L), i = () => {
     if (H(t, "blocks")) {
       const d = S(t.blocks) ? t.blocks() : t.blocks;
       p(ce(d), x(s));
     } else
       m(t, x(s));
-    n(j);
-  }, r = de("dnd");
+    n(b);
+  }, r = me("dnd");
   return /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(O, { children: [
     /* @__PURE__ */ e.jsx(q, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
       "button",
@@ -59,11 +59,11 @@ const xe = ({ block: t }) => {
         type: "button",
         onDragStart: (d) => {
           d.dataTransfer.setData("text/plain", JSON.stringify(k(t, ["component", "icon"]))), d.dataTransfer.setDragImage(new Image(), 0, 0), o(k(t, ["component", "icon"])), setTimeout(() => {
-            u([]), f(null), n(j);
+            u([]), f(null), n(b);
           }, 200);
         },
-        draggable: "true",
-        className: "space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50 " + (r ? "cursor-grab" : "cursor-pointer"),
+        draggable: r ? "true" : "false",
+        className: "cursor-pointer space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",
         children: [
           P(l || ie, { className: "w-4 h-4 mx-auto" }),
           /* @__PURE__ */ e.jsx("p", { className: "text-xs", children: c || a })
@@ -73,9 +73,9 @@ const xe = ({ block: t }) => {
     /* @__PURE__ */ e.jsx(G, { children: /* @__PURE__ */ e.jsx("p", { children: c || a }) })
   ] }) });
 }, he = () => {
-  const { t } = _(), [o, a] = b(""), { addPredefinedBlock: l } = w(), [c] = I(), [, m] = h(L), p = () => {
+  const { t } = w(), [o, a] = j(""), { addPredefinedBlock: l } = A(), [c] = I(), [, m] = h(L), p = () => {
     const s = pe(o);
-    l([...s], x(c) || null), a(""), m(j);
+    l([...s], x(c) || null), a(""), m(b);
   };
   return /* @__PURE__ */ e.jsxs(J, { className: "border-border/0 p-0 shadow-none", children: [
     /* @__PURE__ */ e.jsx(K, { className: "p-3", children: /* @__PURE__ */ e.jsx(R, { children: t("html_snippet_description") }) }),
@@ -101,7 +101,7 @@ const xe = ({ block: t }) => {
     ] })
   ] });
 }, at = () => {
-  const { t } = _(), [o, a] = b("core"), [l, c] = b("basic"), m = ne(), [, p] = h($), s = T("importHTMLSupport", !0), u = T("filterChaiBlock", () => !0), f = g(m, u), n = E(f, "category"), i = D(y(n.core, "group"));
+  const { t } = w(), [o, a] = j("core"), [l, c] = j("basic"), m = ne(), [, p] = h($), s = T("importHTMLSupport", !0), u = T("filterChaiBlock", () => !0), f = g(m, u), n = D(f, "category"), i = E(y(n.core, "group"));
   return F(() => {
     !M(i, l) && !B(i) && !B(l) && c(x(i));
   }, [i, l]), /* @__PURE__ */ e.jsxs("div", { className: "flex h-full w-72 flex-col overflow-hidden", children: [
@@ -118,8 +118,8 @@ const xe = ({ block: t }) => {
         value: o,
         className: "h-max",
         children: /* @__PURE__ */ e.jsxs(te, { className: "grid w-full " + (s ? "grid-cols-2" : "grid-cols-1"), children: [
-          /* @__PURE__ */ e.jsx(A, { value: "core", children: t("Blocks") }),
-          s ? /* @__PURE__ */ e.jsx(A, { value: "html", children: t("import") }) : null
+          /* @__PURE__ */ e.jsx(_, { value: "core", children: t("Blocks") }),
+          s ? /* @__PURE__ */ e.jsx(_, { value: "html", children: t("import") }) : null
         ] })
       }
     ),