@chaibuilder/sdk 1.0.9 → 1.0.11

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, Suraj Air
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name "Chai Builder" nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,41 +1,143 @@
-# Chai Builder - Multipurpose Tailwind CSS Builder
+# Chai Builder - Low-Code Visual Builder
 
-Chai Builder is a simple  multipurpose Tailwind CSS builder designed to streamline and enhance your web development workflow. This tool simplifies the process of customizing and generating Tailwind CSS styles, providing an intuitive interface for creating, editing, and exporting Tailwind configurations.
+Chai Builder is an Open Source Low Code React + Tailwind CSS Builder to create beautiful content driven websites. The perfect tool for Startups and Indie-Hackers alike.
 
-## Features
 
-- **Visual Editor**: Easily tweak and fine-tune Tailwind CSS settings visually.
-- **Live Preview**: See real-time changes in a live preview, enabling quick design decisions.
-- **Customization**: Modify colors, spacing, typography, and more to match your design requirements.
-- **Responsive Design**: Test and preview designs across various screen sizes to ensure responsiveness.
+### Try Chai Builder:
+
+[Demo Link](https://chaibuilder-demo.vercel.app)
 
+Source Code (React App): [GitHub](https://github.com/surajair/demo)
 
-## Usage
 
-2. **Install dependencies**:
+### Usage
 
+> Please ensure `Tailwind CSS` is configured for your project depending on framework. [https://tailwindcss.com/docs/installation](https://tailwindcss.com/docs/installation)
+
+Step 1: Install the package
 ```bash
-npx chaibuilder-app my-app
+npm install @chaibuilder/sdk @chaibuilder/blocks
 ```
 
-3. **Start the development server**:
+Step 2: Add a custom tailwind config.
+Create a new file: `tailwind.chaibuilder.config.ts` and add the following content.
+```js
+import type { Config } from "tailwindcss";
+
+/**
+ * NOTE: This file is only used for the ChaiBuilder UI.
+ * Any changes made here will only affect the ChaiBuilder UI and your website will not be affected.
+ */
+const config: Config = {
+  content: [
+    "./chai-blocks/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "node_modules/@chaibuilder/sdk/dist/*.{js,cjs}",
+  ],
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  // eslint-disable-next-line no-undef
+  plugins: [],
+};
+export default config;
 
-```bash
-npm run dev
 ```
 
-4. **Access the application**:
+Step 3: Create a new `chaibuilder.tailwind.css`
+```css
+@config "./tailwind.chaibuilder.config.ts";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+Step 4: Add the component on the page.
+```tsx
+import "./chaibuilder.tailwind.css";
+import "@chaibuilder/sdk/styles";
+import {ChaiBuilderEditor} from "@chaibuilder/sdk";
+
+const BuilderFullPage = () => {
+  return  (
+    <ChaiBuilderEditor
+      logo={<h1>Your Logo</h1>}
+      blocks={[]}
+      onSaveBrandingOptions={(options) => console.log(options)}
+      onSavePage={pageData => console.log(pageData)}
+    />
+  );
+}
+```
 
-Visit `http://localhost:3000` in your browser to start using Chai Builder.
 
-## Fair Usage Policy
-Chai Builder operates under a Fair Usage Policy. While this tool is available for free and open use, we kindly request users to employ it responsibly and ethically. The Fair Usage Policy for Chai Builder encompasses:
+### Features
 
+- **Visual Editor**: Easily tweak and fine-tune Tailwind CSS settings visually.
+- **Customization**: Modify colors, spacing, typography, and more to match your design requirements.
+- **Responsive Design**: Test and preview designs across various screen sizes to ensure responsiveness.
+
+### In Progress
+- **Live Preview**: See real-time changes in a live preview, enabling quick design decisions.
+- **Sub Pages**: Global reusable blocks. Eg: Header, Footer etc
 
 ## Acknowledgments
 
 Chai Builder stands on the shoulders of many open-source libraries and tools. We extend our gratitude to the developers and maintainers of these projects for their contributions.
-
----
-
-Feel free to adjust this to fit the specifics of your project, and add any additional sections or details as needed.

package/dist/AddBlocks-7ACJv8LW.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-JYMCiFoE.cjs"),i=require("react"),s=require("lodash"),b=require("jotai"),w=require("./accordion-ynvFtV_p.cjs"),L=require("./scroll-area-FiHvy-TZ.cjs"),k=require("./tabs-iWeaaVrg.cjs"),y=require("./skeleton-JHP9zwL2.cjs"),v=require("react-dnd"),C=require("@radix-ui/react-icons"),d=require("./ChaiBuilderEditor-BoE-sArB.cjs"),q=require("./useAddBlock-dCKRFPRU.cjs");require("react-i18next");const A=require("./index-HAue58ea.cjs"),I=require("./useUiLibraries-9FhQCpKo.cjs"),P=require("lucide-react"),S=require("./utils-qK_SjzzV.cjs"),M=require("./useAllBlocks-6hvuNuyw.cjs"),f=require("./textarea-1kZEh7ki.cjs"),F=require("./label-tFm8HZdb.cjs"),H=require("./html-to-json-P6GpbcQX.cjs");require("@radix-ui/react-accordion");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-toast");require("./MODIFIERS-Fx6WAZcw.cjs");require("clsx");require("react-dom");require("@floating-ui/react-dom");require("i18next");require("flagged");require("@minoru/react-dnd-treeview");require("react-hotkeys-hook");require("flat-to-nested");require("./functions-uw7QP2kT.cjs");require("redux-undo");require("@react-hookz/web");require("./controls-xUKa23ic.cjs");require("tailwind-merge");require("@radix-ui/react-label");require("himalaya");const D=({block:t})=>{const{type:r,icon:o,label:a}=t,{addCoreBlock:u,addPredefinedBlock:m}=q.useAddBlock(),[p]=d.useSelectedBlockIds(),[,x]=b.useAtom(d.activePanelAtom),[,l]=b.useAtom(d.addBlocksModalAtom),E=()=>{s.has(t,"blocks")?m(A.P(t.blocks),s.first(p)):u(t,s.first(p)),l(!1),x("layers")},[,g,j]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}));return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+(a||r).replace(/ /g,"+")}),e.jsxRuntimeExports.jsxs(y.Tooltip,{children:[e.jsxRuntimeExports.jsx(y.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:E,type:"button",ref:g,className:"cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[i.createElement(o||C.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:a||r})]})}),e.jsxRuntimeExports.jsx(y.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:a||r})})]})]})},O=({block:t,closePopover:r})=>{var j;const[o,a]=i.useState(!1),u=y.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:m,addPredefinedBlock:p}=q.useAddBlock(),[x]=d.useSelectedBlockIds(),[,l,E]=v.useDrag(()=>({type:"CHAI_BLOCK",item:t}),[t]),g=i.useCallback(async R=>{if(R.stopPropagation(),s.has(t,"component")){m(t,s.first(x)),r();return}a(!0);const n=await u(t);s.isEmpty(n)||p(A.P(n),s.first(x)),r()},[t]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(v.DragPreviewImage,{connect:E,src:"https://placehold.co/100x30/000000/FFF?text="+((j=t.name||t.label)==null?void 0:j.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:l,onClick:o?()=>{}:g,className:"relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[o&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(P.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),t.preview?e.jsxRuntimeExports.jsx("img",{src:t.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:t.name}):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:t.name})})]})]})},U=()=>{const{data:t,isLoading:r}=I.useUILibraryBlocks(),o=A.C(),a=s.filter(s.values(o),{category:"custom"}),u=s.groupBy(a,"group"),m=s.groupBy(t,"group"),[p,x]=i.useState(null),l=i.useMemo(()=>s.mergeWith(u,m,(n,h)=>{if(s.isArray(n)&&s.isArray(h))return[...n,...h]}),[u,m]),[,E]=b.useAtom(d.addBlocksModalAtom),[g,j]=i.useState("Navbar"),R=s.get(l,g,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("ul",{className:"sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2",children:r?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("li",{className:"h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"})]}):i.Children.toArray(s.map(l,(n,h)=>e.jsxRuntimeExports.jsx("li",{onMouseOut:()=>{clearTimeout(p),x(null)},onMouseEnter:()=>{const B=setTimeout(()=>{j(h)},300);x(B)},onClick:()=>j(h),className:S.cn("-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",g===h?"bg-blue-500 text-white":" text-gray-700 hover:bg-foreground/10"),children:h})))}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-8",children:i.Children.toArray(R.map(n=>e.jsxRuntimeExports.jsx(O,{block:n,closePopover:()=>E(!1)})))})]})},z=()=>{const[t,r]=i.useState(""),{addPredefinedBlock:o}=q.useAddBlock(),[a]=d.useSelectedBlockIds(),[,u]=b.useAtom(d.addBlockOffCanvasAtom),[,m]=b.useAtom(d.activePanelAtom),[,p]=b.useAtom(d.addBlocksModalAtom),x=()=>{const l=H.getBlocksFromHTML(t);o([...l],s.first(a)||null),r(""),u(!1),m("layers"),p(!1)};return e.jsxRuntimeExports.jsxs(f.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsxs(f.CardHeader,{className:"p-3",children:[e.jsxRuntimeExports.jsx(f.CardTitle,{children:"Import HTML"}),e.jsxRuntimeExports.jsx(f.CardDescription,{children:"Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported."})]}),e.jsxRuntimeExports.jsx(f.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(F.Label,{htmlFor:"current",className:"text-sm",children:"Enter HTML Code:"}),e.jsxRuntimeExports.jsx(f.Textarea,{autoFocus:!0,tabIndex:1,ref:l=>l&&l.focus(),defaultValue:t,onChange:l=>r(l.target.value),rows:12,placeholder:`<div>
+    <h1>Enter code here</h1>
+</div>`,className:"resize-none overflow-x-auto whitespace-pre font-mono font-normal"})]})}),e.jsxRuntimeExports.jsxs(f.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(y.Button,{disabled:t.trim()==="",onClick:()=>x(),size:"sm",className:"w-full",children:"Import"}),e.jsxRuntimeExports.jsxs(f.Alert,{variant:"default",className:"mt-2 p-1 text-blue-400",children:[e.jsxRuntimeExports.jsx(C.ExclamationTriangleIcon,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx(f.AlertTitle,{className:"text-sm leading-4",children:"Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page."})]})]})]})},G=z,N=["ListItem","TableHead","TableBody","TableRow","TableCell","Column"],_=(t,r)=>{if(!t)return!s.includes(N,r);const o=t._type;return o==="List"?r==="ListItem":o==="Table"?r==="TableHead"||r==="TableBody":o==="TableHead"||o==="TableBody"?r==="TableRow":o==="TableRow"?r==="TableCell":o==="Row"?r==="Column":!s.includes(N,r)},K=()=>{const[t,r]=i.useState("core"),[o,a]=i.useState("basic"),u=A.C(),[,m]=b.useAtom(d.showPredefinedBlockCategoryAtom),[,p]=b.useAtom(d.addBlocksModalAtom),[x]=d.useSelectedBlockIds(),l=M.useAllBlocks(),E=s.find(l,{_id:s.first(x)}),{data:g,isLoading:j}=I.useUILibraryBlocks(),R=s.groupBy(s.filter(u,c=>_(E,c.type)),"category"),n=s.uniq(s.map(R.core,"group"));i.useEffect(()=>{!s.includes(n,o)&&!s.isEmpty(n)&&!s.isEmpty(o)&&a(s.first(n))},[n,o]);const h=c=>a(T=>T===c?"":c),B=!j&&!s.isEmpty(g)||s.find(s.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 justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsxs("h1",{className:"flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row",children:["Add block",e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:t==="html"?"(Enter or paste your own HTML code)":"(Drag & drop into tree view or click to add)"})]}),e.jsxRuntimeExports.jsxs("button",{onClick:()=>p(!1),className:"flex h-max items-center gap-x-1 rounded-full border p-px text-xs text-gray-800 hover:bg-gray-100 md:p-2",children:[e.jsxRuntimeExports.jsx(C.Cross1Icon,{width:12})," Close"]})]}),e.jsxRuntimeExports.jsx(k.Tabs,{onValueChange:c=>{m(""),r(c)},value:t,className:"h-max",children:e.jsxRuntimeExports.jsxs(k.TabsList,{className:"grid w-full "+(B?"grid-cols-3":"grid-cols-2"),children:[e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"core",children:"Core"}),B?e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"ui-blocks",children:"UI Blocks"}):null,e.jsxRuntimeExports.jsx(k.TabsTrigger,{value:"html",children:"Import"})]})}),t==="core"&&e.jsxRuntimeExports.jsx(L.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx(w.Accordion,{type:"single",value:o,className:"w-full px-3",children:i.Children.toArray(s.map(n,c=>s.reject(s.filter(s.values(R.core),{group:c}),{hidden:!0}).length?e.jsxRuntimeExports.jsxs(w.AccordionItem,{value:c,className:"border-border",children:[e.jsxRuntimeExports.jsx(w.AccordionTrigger,{onClick:()=>h(c),className:"py-2 capitalize",children:c}),e.jsxRuntimeExports.jsx(w.AccordionContent,{children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-4 gap-2",children:i.Children.toArray(s.reject(s.filter(s.values(R.core),{group:c}),{hidden:!0}).map(T=>e.jsxRuntimeExports.jsx(D,{block:T})))})})]}):null))})}),t==="ui-blocks"&&e.jsxRuntimeExports.jsx(i.Suspense,{fallback:e.jsxRuntimeExports.jsx(y.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(U,{})}),t==="html"&&e.jsxRuntimeExports.jsx(G,{})]})};exports.default=K;

package/dist/{AddBlocks-d10b7b87.js → AddBlocks-H7BZYHUC.js}

@@ -1,30 +1,32 @@
-import { j as e } from "./jsx-runtime-944c88e2.js";
-import v, { createElement as K, useState as j, useMemo as W, useCallback as q, useEffect as V, Suspense as $ } from "react";
-import { has as _, first as b, filter as w, values as k, groupBy as I, mergeWith as Z, isArray as H, get as J, map as L, isEmpty as B, find as M, uniq as Q, includes as P, reject as E } from "lodash";
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
+import v, { createElement as K, useState as j, useMemo as q, useCallback as V, useEffect as Q, Suspense as W } from "react";
+import { has as R, first as b, filter as w, values as k, groupBy as I, mergeWith as $, isArray as H, get as J, map as L, isEmpty as T, find as M, uniq as X, includes as P, reject as E } from "lodash";
 import { useAtom as h } from "jotai";
-import { A as X, a as Y, b as ee, c as se } from "./accordion-c0176dc5.js";
-import { S as re } from "./scroll-area-83bd9e8f.js";
-import { T as oe, a as te, b as A } from "./tabs-85caa1e8.js";
-import { l as le, m as ae, n as ce, u as ie, B as ne, S as de } from "./useBuilderProp-21feb2da.js";
-import { useDrag as R, DragPreviewImage as O } from "react-dnd";
+import { A as Y, a as Z, b as ee, c as se } from "./accordion-oPUeqPCZ.js";
+import { S as re } from "./scroll-area-ewXbxc3n.js";
+import { T as oe, a as te, b as A } from "./tabs-Gb9v5dVb.js";
+import { T as le, a as ae, c as ce, u as ie, B as ne, S as de } from "./skeleton-CU_FIbg3.js";
+import { useDrag as _, DragPreviewImage as O } from "react-dnd";
 import { BoxIcon as me, ExclamationTriangleIcon as ue, Cross1Icon as pe } from "@radix-ui/react-icons";
-import { W as F, i as C, a as z, b as T, Z as D, _ as xe, $ as he, B as fe } from "./index-aa42febc.js";
+import { l as C, w as z, x as B, P as xe, Q as he } from "./ChaiBuilderEditor-hEuUONQ3.js";
+import { u as F } from "./useAddBlock-WJc3OgG8.js";
 import "react-i18next";
-import { syncBlocksWithDefaults as G, useChaiBlocks as U } from "@chaibuilder/blocks";
-import { Loader as ge } from "lucide-react";
-import { c as be } from "./utils-ac68b2c8.js";
-import { C as je, c as ye, e as we, f as ke, g as Be, T as ve, d as Ce, A as Te, a as Ne } from "./textarea-0750bcd2.js";
-import { L as Ae } from "./label-e770a087.js";
-import { b as Ie } from "./html-to-json-45e0e3b5.js";
+import { P as G, C as U } from "./index-ehKdBRUK.js";
+import { u as D } from "./useUiLibraries-4hPOi8DI.js";
+import { Loader as fe } from "lucide-react";
+import { c as ge } from "./utils-dze1SGvB.js";
+import { u as be } from "./useAllBlocks-PQKYvs-e.js";
+import { C as je, c as ye, e as we, f as ke, g as Te, T as ve, d as Ce, A as Be, a as Ne } from "./textarea-b2QvVhrK.js";
+import { L as Ae } from "./label-KaP7MRrs.js";
+import { g as Ie } from "./html-to-json-pdHQfRkN.js";
 import "@radix-ui/react-accordion";
 import "@radix-ui/react-scroll-area";
 import "@radix-ui/react-tabs";
-import "@radix-ui/react-alert-dialog";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
 import "@radix-ui/react-toast";
-import "./MODIFIERS-2f19c314.js";
+import "./MODIFIERS-DsEzQ3aH.js";
 import "clsx";
 import "react-dom";
 import "@floating-ui/react-dom";
@@ -33,16 +35,17 @@ import "flagged";
 import "@minoru/react-dnd-treeview";
 import "react-hotkeys-hook";
 import "flat-to-nested";
+import "./functions-pcUZhFJM.js";
 import "redux-undo";
 import "@react-hookz/web";
-import "sonner";
+import "./controls-Ni5kEzLz.js";
 import "tailwind-merge";
 import "@radix-ui/react-label";
 import "himalaya";
 const Le = ({ block: s }) => {
-  const { type: r, icon: o, label: a } = s, { addCoreBlock: i, addPredefinedBlock: d } = F(), [m] = C(), [, n] = h(z), [, t] = h(T), f = () => {
-    _(s, "blocks") ? d(G(s.blocks), b(m)) : i(s, b(m)), t(!1), n("layers");
-  }, [, x, u] = R(() => ({
+  const { type: r, icon: o, label: a } = s, { addCoreBlock: i, addPredefinedBlock: d } = F(), [m] = C(), [, n] = h(z), [, t] = h(B), f = () => {
+    R(s, "blocks") ? d(G(s.blocks), b(m)) : i(s, b(m)), t(!1), n("layers");
+  }, [, x, u] = _(() => ({
     type: "CHAI_BLOCK",
     item: s
   }));
@@ -73,21 +76,21 @@ const Le = ({ block: s }) => {
   ] });
 }, Pe = ({ block: s, closePopover: r }) => {
   var u;
-  const [o, a] = j(!1), i = ie("getExternalPredefinedBlock"), { addCoreBlock: d, addPredefinedBlock: m } = F(), [n] = C(), [, t, f] = R(
+  const [o, a] = j(!1), i = ie("getExternalPredefinedBlock"), { addCoreBlock: d, addPredefinedBlock: m } = F(), [n] = C(), [, t, f] = _(
     () => ({
       type: "CHAI_BLOCK",
       item: s
     }),
     [s]
-  ), x = q(
+  ), x = V(
     async (g) => {
-      if (g.stopPropagation(), _(s, "component")) {
+      if (g.stopPropagation(), R(s, "component")) {
         d(s, b(n)), r();
         return;
       }
       a(!0);
       const l = await i(s);
-      B(l) || m(G(l), b(n)), r();
+      T(l) || m(G(l), b(n)), r();
     },
     [s]
   );
@@ -108,7 +111,7 @@ const Le = ({ block: s }) => {
         className: "relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",
         children: [
           o && /* @__PURE__ */ e.jsxs("div", { className: "absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70", children: [
-            /* @__PURE__ */ e.jsx(ge, { className: "animate-spin", size: 15, color: "white" }),
+            /* @__PURE__ */ e.jsx(fe, { className: "animate-spin", size: 15, color: "white" }),
             " ",
             /* @__PURE__ */ e.jsx("span", { className: "pl-2 text-sm text-white", children: "Adding..." })
           ] }),
@@ -118,10 +121,10 @@ const Le = ({ block: s }) => {
     )
   ] });
 }, Fe = () => {
-  const { data: s, isLoading: r } = D(), o = U(), a = w(k(o), { category: "custom" }), i = I(a, "group"), d = I(s, "group"), [m, n] = j(null), t = W(() => Z(i, d, (l, p) => {
+  const { data: s, isLoading: r } = D(), o = U(), a = w(k(o), { category: "custom" }), i = I(a, "group"), d = I(s, "group"), [m, n] = j(null), t = q(() => $(i, d, (l, p) => {
     if (H(l) && H(p))
       return [...l, ...p];
-  }), [i, d]), [, f] = h(T), [x, u] = j("Navbar"), g = J(t, x, []);
+  }), [i, d]), [, f] = h(B), [x, u] = j("Navbar"), g = J(t, x, []);
   return /* @__PURE__ */ e.jsxs("div", { className: "relative flex h-full max-h-full overflow-hidden py-2", children: [
     /* @__PURE__ */ e.jsx("ul", { className: "sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2", children: r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsx("li", { className: "h-8 w-full animate-pulse bg-gray-200" }),
@@ -144,7 +147,7 @@ const Le = ({ block: s }) => {
             n(y);
           },
           onClick: () => u(p),
-          className: be(
+          className: ge(
             "-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",
             x === p ? "bg-blue-500 text-white" : " text-gray-700 hover:bg-foreground/10"
           ),
@@ -157,7 +160,7 @@ const Le = ({ block: s }) => {
     ) })
   ] });
 }, He = () => {
-  const [s, r] = j(""), { addPredefinedBlock: o } = F(), [a] = C(), [, i] = h(xe), [, d] = h(z), [, m] = h(T), n = () => {
+  const [s, r] = j(""), { addPredefinedBlock: o } = F(), [a] = C(), [, i] = h(xe), [, d] = h(z), [, m] = h(B), n = () => {
     const t = Ie(s);
     o([...t], b(a) || null), r(""), i(!1), d("layers"), m(!1);
   };
@@ -166,7 +169,7 @@ const Le = ({ block: s }) => {
       /* @__PURE__ */ e.jsx(we, { children: "Import HTML" }),
       /* @__PURE__ */ e.jsx(ke, { children: "Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported." })
     ] }),
-    /* @__PURE__ */ e.jsx(Be, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ e.jsx(Te, { className: "space-y-2 px-3 py-0", children: /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ e.jsx(Ae, { htmlFor: "current", className: "text-sm", children: "Enter HTML Code:" }),
       /* @__PURE__ */ e.jsx(
         ve,
@@ -186,7 +189,7 @@ const Le = ({ block: s }) => {
     ] }) }),
     /* @__PURE__ */ e.jsxs(Ce, { className: "flex flex-col justify-end p-3", children: [
       /* @__PURE__ */ e.jsx(ne, { disabled: s.trim() === "", onClick: () => n(), size: "sm", className: "w-full", children: "Import" }),
-      /* @__PURE__ */ e.jsxs(Te, { variant: "default", className: "mt-2 p-1 text-blue-400", children: [
+      /* @__PURE__ */ e.jsxs(Be, { variant: "default", className: "mt-2 p-1 text-blue-400", children: [
         /* @__PURE__ */ e.jsx(ue, { className: "h-4 w-4" }),
         /* @__PURE__ */ e.jsx(Ne, { className: "text-sm leading-4", children: "Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page." })
       ] })
@@ -198,14 +201,14 @@ const Le = ({ block: s }) => {
   const o = s._type;
   return o === "List" ? r === "ListItem" : o === "Table" ? r === "TableHead" || r === "TableBody" : o === "TableHead" || o === "TableBody" ? r === "TableRow" : o === "TableRow" ? r === "TableCell" : o === "Row" ? r === "Column" : !P(S, r);
 }, Bs = () => {
-  const [s, r] = j("core"), [o, a] = j("basic"), i = U(), [, d] = h(he), [, m] = h(T), [n] = C(), t = fe(), f = M(t, { _id: b(n) }), { data: x, isLoading: u } = D(), g = I(
+  const [s, r] = j("core"), [o, a] = j("basic"), i = U(), [, d] = h(he), [, m] = h(B), [n] = C(), t = be(), f = M(t, { _id: b(n) }), { data: x, isLoading: u } = D(), g = I(
     w(i, (c) => Ee(f, c.type)),
     "category"
-  ), l = Q(L(g.core, "group"));
-  V(() => {
-    !P(l, o) && !B(l) && !B(o) && a(b(l));
+  ), l = X(L(g.core, "group"));
+  Q(() => {
+    !P(l, o) && !T(l) && !T(o) && a(b(l));
   }, [l, o]);
-  const p = (c) => a((N) => N === c ? "" : c), y = !u && !B(x) || M(k(i), { category: "custom" }) !== void 0;
+  const p = (c) => a((N) => N === c ? "" : c), y = !u && !T(x) || M(k(i), { 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 justify-between rounded-md bg-background/30 p-1", children: [
       /* @__PURE__ */ e.jsxs("h1", { className: "flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row", children: [
@@ -239,12 +242,12 @@ const Le = ({ block: s }) => {
         ] })
       }
     ),
-    s === "core" && /* @__PURE__ */ e.jsx(re, { className: "-mx-1.5 h-full", children: /* @__PURE__ */ e.jsx(X, { type: "single", value: o, className: "w-full px-3", children: v.Children.toArray(
+    s === "core" && /* @__PURE__ */ e.jsx(re, { className: "-mx-1.5 h-full", children: /* @__PURE__ */ e.jsx(Y, { type: "single", value: o, className: "w-full px-3", children: v.Children.toArray(
       L(
         l,
         (c) => E(w(k(g.core), { group: c }), {
           hidden: !0
-        }).length ? /* @__PURE__ */ e.jsxs(Y, { value: c, className: "border-border", children: [
+        }).length ? /* @__PURE__ */ e.jsxs(Z, { value: c, className: "border-border", children: [
           /* @__PURE__ */ e.jsx(ee, { onClick: () => p(c), className: "py-2 capitalize", children: c }),
           /* @__PURE__ */ e.jsx(se, { children: /* @__PURE__ */ e.jsx("div", { className: "grid grid-cols-4 gap-2", children: v.Children.toArray(
             E(w(k(g.core), { group: c }), { hidden: !0 }).map((N) => /* @__PURE__ */ e.jsx(Le, { block: N }))
@@ -252,7 +255,7 @@ const Le = ({ block: s }) => {
         ] }) : null
       )
     ) }) }),
-    s === "ui-blocks" && /* @__PURE__ */ e.jsx($, { fallback: /* @__PURE__ */ e.jsx(de, { className: "h-32 w-full" }), children: /* @__PURE__ */ e.jsx(Fe, {}) }),
+    s === "ui-blocks" && /* @__PURE__ */ e.jsx(W, { fallback: /* @__PURE__ */ e.jsx(de, { className: "h-32 w-full" }), children: /* @__PURE__ */ e.jsx(Fe, {}) }),
     s === "html" && /* @__PURE__ */ e.jsx(Me, {})
   ] });
 };

package/dist/BrandingOptions-5j-XszLM.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-JYMCiFoE.cjs"),O=require("react"),C=require("@rjsf/validator-ajv8"),B=require("@rjsf/core"),j=require("./ChaiBuilderEditor-BoE-sArB.cjs");require("react-i18next");const R=require("./skeleton-JHP9zwL2.cjs"),e=require("./controls-W97-POR_.cjs"),k=require("lodash");require("./MODIFIERS-Fx6WAZcw.cjs");require("clsx");require("@radix-ui/react-scroll-area");require("react-dom");require("@floating-ui/react-dom");require("jotai");require("i18next");require("flagged");require("react-dnd");require("@minoru/react-dnd-treeview");require("./utils-qK_SjzzV.cjs");require("tailwind-merge");require("react-hotkeys-hook");require("flat-to-nested");require("./functions-uw7QP2kT.cjs");require("redux-undo");require("@react-hookz/web");require("./index-HAue58ea.cjs");require("@radix-ui/react-slot");require("class-variance-authority");require("@radix-ui/react-tooltip");require("@radix-ui/react-icons");require("@radix-ui/react-toast");function P(i){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const a in i)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(i,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>i[a]})}}return t.default=i,Object.freeze(t)}const c=P(O),v=[{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"}],D=()=>{const i=R.useBuilderProp("onSaveBrandingOptions",async()=>{}),[t,a]=j.useBrandingOptions(),r=c.useRef(t);c.useEffect(()=>()=>{k.isEqual(t,r.current)||i(r.current)},[]);const p=({formData:l},u)=>{u&&(a(l),r.current=l)},{bodyFont:y,headingFont:f,primaryColor:g,bodyTextDarkColor:b,bodyTextLightColor:m,bodyBgDarkColor:h,secondaryColor:q,bodyBgLightColor:x,roundedCorners:S}=t,s={headingFont:e.f({title:"Heading font",default:f,options:v}),bodyFont:e.f({title:"Body font",default:y,options:v}),roundedCorners:e.c({title:"Rounded Corner",default:parseInt(S||5,10)}),primaryColor:e.y({title:"Primary",default:g}),secondaryColor:e.y({title:"Secondary",default:q}),bodyBgLightColor:e.y({title:"Body Background (Light)",default:x}),bodyBgDarkColor:e.y({title:"Body Background (Dark)",default:h}),bodyTextLightColor:e.y({title:"Body Text (Light)",default:b}),bodyTextDarkColor:e.y({title:"Body Text (Dark)",default:m})},n={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const u=s[l];return n.properties||(n.properties={}),n.properties[l]=u.schema,d[l]=u.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(B,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:n,formData:t,validator:C,onChange:p})})]})};exports.default=D;

package/dist/{BrandingOptions-f4ab5d9f.js → BrandingOptions-PAgY-kvj.js}

@@ -1,13 +1,13 @@
-import { j as a } from "./jsx-runtime-944c88e2.js";
+import { j as a } from "./jsx-runtime-Sp0orL4X.js";
 import * as s from "react";
-import B from "@rjsf/validator-ajv8";
+import O from "@rjsf/validator-ajv8";
 import k from "@rjsf/core";
-import { z as N } from "./index-aa42febc.js";
+import { j } from "./ChaiBuilderEditor-hEuUONQ3.js";
 import "react-i18next";
-import { u as D } from "./useBuilderProp-21feb2da.js";
-import { SelectOption as p, Numeric as P, Color as e } from "@chaibuilder/blocks";
-import { isEqual as R } from "lodash";
-import "./MODIFIERS-2f19c314.js";
+import { u as D } from "./skeleton-CU_FIbg3.js";
+import { f as p, c as N, y as e } from "./controls-enQY7NI8.js";
+import { isEqual as P } from "lodash";
+import "./MODIFIERS-DsEzQ3aH.js";
 import "clsx";
 import "@radix-ui/react-scroll-area";
 import "react-dom";
@@ -17,21 +17,18 @@ import "i18next";
 import "flagged";
 import "react-dnd";
 import "@minoru/react-dnd-treeview";
-import "./utils-ac68b2c8.js";
+import "./utils-dze1SGvB.js";
 import "tailwind-merge";
 import "react-hotkeys-hook";
 import "flat-to-nested";
-import "./html-to-json-45e0e3b5.js";
-import "himalaya";
+import "./functions-pcUZhFJM.js";
 import "redux-undo";
 import "@react-hookz/web";
-import "@radix-ui/react-icons";
-import "sonner";
-import "lucide-react";
-import "@radix-ui/react-alert-dialog";
+import "./index-ehKdBRUK.js";
 import "@radix-ui/react-slot";
 import "class-variance-authority";
 import "@radix-ui/react-tooltip";
+import "@radix-ui/react-icons";
 import "@radix-ui/react-toast";
 const d = [
   { title: "Roboto", value: "Roboto" },
@@ -83,11 +80,11 @@ const d = [
   { title: "Lustria", value: "Lustria" },
   { title: "Ovo", value: "Ovo" },
   { title: "Suranna", value: "Suranna" }
-], pt = () => {
+], nt = () => {
   const m = D("onSaveBrandingOptions", async () => {
-  }), [o, v] = N(), r = s.useRef(o);
+  }), [o, v] = j(), r = s.useRef(o);
   s.useEffect(() => () => {
-    R(o, r.current) || m(r.current);
+    P(o, r.current) || m(r.current);
   }, []);
   const c = ({ formData: t }, l) => {
     l && (v(t), r.current = t);
@@ -100,7 +97,7 @@ const d = [
     bodyBgDarkColor: S,
     secondaryColor: x,
     bodyBgLightColor: C,
-    roundedCorners: O
+    roundedCorners: B
   } = o, n = {
     headingFont: p({
       title: "Heading font",
@@ -112,9 +109,9 @@ const d = [
       default: f,
       options: d
     }),
-    roundedCorners: P({
+    roundedCorners: N({
       title: "Rounded Corner",
-      default: parseInt(O || 5, 10)
+      default: parseInt(B || 5, 10)
     }),
     primaryColor: e({ title: "Primary", default: y }),
     secondaryColor: e({ title: "Secondary", default: x }),
@@ -155,12 +152,12 @@ const d = [
         uiSchema: u,
         schema: i,
         formData: o,
-        validator: B,
+        validator: O,
         onChange: c
       }
     ) })
   ] });
 };
 export {
-  pt as default
+  nt as default
 };