@chaibuilder/sdk 1.2.115 → 1.2.116

package/README.md

@@ -4,10 +4,6 @@ Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder.
 It allows you to create web pages 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. 
 
-#### [View Demo](https://chaibuilder.com/demos/web)
-#### [Documentation](https://chaibuilder.com/docs/sdk/introduction)
-#### [API References](https://api-reference.chaibuilder.com)
-
 ---
 
 ### Manual installation:
@@ -47,8 +43,8 @@ const BuilderFullPage = () => {
   return  (
       <ChaiBuilderEditor
           blocks={[{_type: 'Heading', _id: 'a', content: 'This is a heading', styles: '#styles:,text-3xl font-bold'}]}
-          onSave={async ({ blocks, providers, brandingOptions } ) => {
-            console.log(blocks, providers, brandingOptions );
+          onSave={async ({ blocks, theme } ) => {
+            console.log(blocks, theme );
             return true
           }}
       />

package/dist/CodeEditor-Bl58eelM.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BYECrxsp.cjs"),k=require("@monaco-editor/react"),C=require("./context-menu-DfAXjmc8.cjs"),E=require("react-i18next"),i=require("react"),l=require("./index-B_be_Or7.cjs"),R=require("@radix-ui/react-icons"),g=require("@react-hookz/web"),u=o=>{const n=document.createElement("div");return n.innerHTML=o,n.innerHTML};function v(){const{t:o}=E.useTranslation(),[n,d]=i.useState(!1),[c,x]=i.useState(""),[t,r]=l.useCodeEditor(),[a]=l.useSelectedBlockIds(),m=l.useUpdateBlocksProps(),p=l.useUpdateBlocksPropsRealtime(),j=g.useThrottledCallback(s=>{const b=u(s);p([t.blockId],{[t.blockProp]:b})},[],300),f=i.useCallback(()=>{if(n){const s=u(c);m([t.blockId],{[t.blockProp]:s})}},[n,c]);i.useEffect(()=>{a.includes(t==null?void 0:t.blockId)||(f(),r(null))},[a]);const h=()=>{r(null)};return e.jsxRuntimeExports.jsxs("div",{className:"h-full rounded-t-lg border-t-4 border-black bg-black text-white",children:[e.jsxRuntimeExports.jsx("button",{onClick:h,className:"fixed inset-0 z-[100000] cursor-default bg-gray-400/20"}),e.jsxRuntimeExports.jsxs("div",{className:"relative z-[100001] h-full w-full flex-col gap-y-1",children:[e.jsxRuntimeExports.jsxs("div",{className:"-mt-1 flex items-center justify-between px-2 py-2",children:[e.jsxRuntimeExports.jsxs("h3",{className:"space-x-3 text-sm font-semibold",children:[e.jsxRuntimeExports.jsx("span",{children:o("HTML Code Editor |")}),e.jsxRuntimeExports.jsx("span",{className:"text-xs text-gray-400",children:o("Scripts will be only executed in preview and live mode.")})]}),e.jsxRuntimeExports.jsx("div",{className:"flex gap-x-2",children:e.jsxRuntimeExports.jsx(C.Button,{onClick:()=>r(null),size:"sm",variant:"destructive",className:"h-6 w-fit",children:e.jsxRuntimeExports.jsx(R.Cross2Icon,{})})})]}),e.jsxRuntimeExports.jsx(k,{onMount:s=>{s.setValue(t.initialCode)},onChange:s=>{d(!0),x(s),j(s)},height:"100%",defaultLanguage:"html",theme:"vs-dark",defaultValue:"",options:{minimap:{enabled:!1}}})]})]})}exports.default=v;

package/dist/CodeEditor-C1ImRmIp.js

@@ -0,0 +1,77 @@
+import { j as e } from "./jsx-runtime-DGlMoOmv.js";
+import k from "@monaco-editor/react";
+import { B as C } from "./context-menu-BbqLeYFX.js";
+import { useTranslation as j } from "react-i18next";
+import { useState as r, useCallback as v, useEffect as g } from "react";
+import { u as y, a as N, b as T, c as E } from "./index-Bn53BEJy.js";
+import { Cross2Icon as w } from "@radix-ui/react-icons";
+import { useThrottledCallback as B } from "@react-hookz/web";
+const c = (l) => {
+  const o = document.createElement("div");
+  return o.innerHTML = l, o.innerHTML;
+};
+function U() {
+  const { t: l } = j(), [o, d] = r(!1), [n, m] = r(""), [t, a] = y(), [i] = N(), u = T(), p = E(), f = B(
+    (s) => {
+      const b = c(s);
+      p([t.blockId], { [t.blockProp]: b });
+    },
+    [],
+    300
+  ), x = v(() => {
+    if (o) {
+      const s = c(n);
+      u([t.blockId], { [t.blockProp]: s });
+    }
+  }, [o, n]);
+  g(() => {
+    i.includes(t == null ? void 0 : t.blockId) || (x(), a(null));
+  }, [i]);
+  const h = () => {
+    a(null);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "h-full rounded-t-lg border-t-4 border-black bg-black text-white", children: [
+    /* @__PURE__ */ e.jsx("button", { onClick: h, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "-mt-1 flex items-center justify-between px-2 py-2", children: [
+        /* @__PURE__ */ e.jsxs("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ e.jsx("span", { children: l("HTML Code Editor |") }),
+          /* @__PURE__ */ e.jsx("span", { className: "text-xs text-gray-400", children: l("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex gap-x-2", children: /* @__PURE__ */ e.jsx(
+          C,
+          {
+            onClick: () => a(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ e.jsx(w, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e.jsx(
+        k,
+        {
+          onMount: (s) => {
+            s.setValue(t.initialCode);
+          },
+          onChange: (s) => {
+            d(!0), m(s), f(s);
+          },
+          height: "100%",
+          defaultLanguage: "html",
+          theme: "vs-dark",
+          defaultValue: "",
+          options: {
+            minimap: {
+              enabled: !1
+            }
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  U as default
+};

package/dist/Topbar-BpMZTZKz.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BYECrxsp.cjs"),u=require("react"),x=require("./context-menu-DfAXjmc8.cjs"),s=require("./index-B_be_Or7.cjs"),p=require("react-i18next"),j=require("./iconBase-Cn2BsTrq.cjs"),d=require("@radix-ui/react-icons"),a=require("lodash-es");require("@chaibuilder/runtime");const E=()=>{const{savePage:i,saveState:n}=s.useSavePage(),{t:r}=p.useTranslation(),o=e.jsxRuntimeExports.jsxs(x.Button,{disabled:n==="SAVING",onClick:t=>{t.preventDefault(),i()},className:j.cn("flex h-auto w-fit items-center gap-x-2 p-1 px-2","bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",{"animate-pulse bg-gray-300 text-gray-900":n==="SAVING","bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white":n==="SAVED"}),size:"sm",variant:"outline",children:[e.jsxRuntimeExports.jsx(s.FaCheck,{className:"text-sm text-white"}),e.jsxRuntimeExports.jsx("span",{className:"text-sm",children:r(n==="SAVING"?"Saving":n==="SAVED"?"Saved":"Unsaved")})]});return e.jsxRuntimeExports.jsx("div",{className:"flex items-center",children:o})},g=function(){const n=s.useBuilderProp("previewComponent"),[,r]=s.usePreviewMode(),{t:o}=p.useTranslation();return n?e.jsxRuntimeExports.jsxs(x.Button,{onClick:t=>{t.preventDefault(),r(!0)},className:"flex h-auto w-fit items-center gap-x-2 p-1 px-2",size:"sm",variant:"outline",children:[e.jsxRuntimeExports.jsx(d.EyeOpenIcon,{className:"text-xs"}),e.jsxRuntimeExports.jsx("span",{className:"text-sm",children:o("Preview")})]}):null},v=()=>{const{fallbackLang:i,languages:n,selectedLang:r,setSelectedLang:o}=s.useLanguages(),t=(r==null?void 0:r.length)>0?r:i,h=u.useMemo(()=>{const l=[];return a.forEach(a.uniq([i,...n]),c=>{const m=a.get(s.LANGUAGES,c);m&&l.push({key:c,value:m,default:c===i})}),l},[i,n]);return a.isEmpty(n)&&t==="en"?null:a.isEmpty(n)&&t!=="en"?e.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600",children:[e.jsxRuntimeExports.jsx(s.FaLanguage,{className:"h-4 w-4"}),a.get(s.LANGUAGES,t)]}):e.jsxRuntimeExports.jsxs(x.DropdownMenu,{children:[e.jsxRuntimeExports.jsx(x.DropdownMenuTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(x.Button,{size:"sm",variant:"outline",className:"flex items-center gap-x-1 text-blue-500 hover:text-blue-600",children:[e.jsxRuntimeExports.jsx(s.FaLanguage,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxRuntimeExports.jsxs("div",{children:[" ",a.get(s.LANGUAGES,t)]}),e.jsxRuntimeExports.jsx(d.ChevronDownIcon,{className:"h-4 w-4"})]})]})}),e.jsxRuntimeExports.jsx(x.DropdownMenuContent,{className:"border-border",children:a.map(h,l=>e.jsxRuntimeExports.jsxs(x.DropdownMenuItem,{className:j.cn("flex cursor-pointer items-center text-sm",l.key===t&&"!bg-blue-500 text-white hover:!text-white"),onClick:()=>o(l.key),children:[e.jsxRuntimeExports.jsx("div",{children:l.value}),l.key===i?e.jsxRuntimeExports.jsx(s.FaStar,{className:"ml-2 h-4 w-4 text-yellow-400"}):null]}))})]})},R=()=>{const i=s.useBuilderProp("topBarComponents.left",[]),n=s.useBuilderProp("topBarComponents.center",[]),r=s.useBuilderProp("topBarComponents.right",[]),o=s.useBuilderProp("editable",!0);return e.jsxRuntimeExports.jsxs("div",{className:"flex h-14 items-center justify-between px-2",children:[e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2 font-bold",children:u.Children.toArray(i.map(t=>e.jsxRuntimeExports.jsx(u.Suspense,{fallback:e.jsxRuntimeExports.jsx(x.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))})}),e.jsxRuntimeExports.jsx("div",{className:"flex items-center space-x-2",children:u.Children.toArray(n.map(t=>e.jsxRuntimeExports.jsx(u.Suspense,{fallback:e.jsxRuntimeExports.jsx(x.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-1",children:[e.jsxRuntimeExports.jsx(v,{}),e.jsxRuntimeExports.jsx(x.Separator,{orientation:"vertical"}),e.jsxRuntimeExports.jsx(g,{}),e.jsxRuntimeExports.jsx(x.Separator,{orientation:"vertical"}),o?e.jsxRuntimeExports.jsx(E,{}):null,u.Children.toArray(r.map(t=>e.jsxRuntimeExports.jsx(u.Suspense,{fallback:e.jsxRuntimeExports.jsx(x.Skeleton,{className:"h-10"}),children:e.jsxRuntimeExports.jsx(t,{})})))]})]})};exports.default=R;

package/dist/Topbar-tRFEAMbG.js

@@ -0,0 +1,113 @@
+import { j as e } from "./jsx-runtime-DGlMoOmv.js";
+import c, { useMemo as w, Suspense as x } from "react";
+import { B as p, a6 as C, a7 as S, a8 as y, a9 as k, aq as m, al as g } from "./context-menu-BbqLeYFX.js";
+import { e as A, F as D, d as i, f as P, g as B, L as d, h as f, i as E } from "./index-Bn53BEJy.js";
+import { useTranslation as v } from "react-i18next";
+import { c as N } from "./iconBase-DHfFLkem.js";
+import { EyeOpenIcon as L, ChevronDownIcon as M } from "@radix-ui/react-icons";
+import { forEach as I, uniq as G, get as u, isEmpty as j, map as V } from "lodash-es";
+import "@chaibuilder/runtime";
+const F = () => {
+  const { savePage: r, saveState: t } = A(), { t: a } = v(), n = /* @__PURE__ */ e.jsxs(
+    p,
+    {
+      disabled: t === "SAVING",
+      onClick: (s) => {
+        s.preventDefault(), r();
+      },
+      className: N(
+        "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+        // UNSAVED sate
+        "bg-gray-200 text-gray-500 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400",
+        {
+          "animate-pulse bg-gray-300 text-gray-900": t === "SAVING",
+          "bg-green-500 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:text-white": t === "SAVED"
+        }
+      ),
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ e.jsx(D, { className: "text-sm text-white" }),
+        /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: a(t === "SAVING" ? "Saving" : t === "SAVED" ? "Saved" : "Unsaved") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: n });
+}, z = function() {
+  const t = i("previewComponent"), [, a] = P(), { t: n } = v();
+  return t ? /* @__PURE__ */ e.jsxs(
+    p,
+    {
+      onClick: (s) => {
+        s.preventDefault(), a(!0);
+      },
+      className: "flex h-auto w-fit items-center gap-x-2 p-1 px-2",
+      size: "sm",
+      variant: "outline",
+      children: [
+        /* @__PURE__ */ e.jsx(L, { className: "text-xs" }),
+        /* @__PURE__ */ e.jsx("span", { className: "text-sm", children: n("Preview") })
+      ]
+    }
+  ) : null;
+}, T = () => {
+  const { fallbackLang: r, languages: t, selectedLang: a, setSelectedLang: n } = B(), s = (a == null ? void 0 : a.length) > 0 ? a : r, b = w(() => {
+    const l = [];
+    return I(G([r, ...t]), (o) => {
+      const h = u(d, o);
+      h && l.push({ key: o, value: h, default: o === r });
+    }), l;
+  }, [r, t]);
+  return j(t) && s === "en" ? null : j(t) && s !== "en" ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-x-1 text-sm text-blue-500 hover:text-blue-600", children: [
+    /* @__PURE__ */ e.jsx(f, { className: "h-4 w-4" }),
+    u(d, s)
+  ] }) : /* @__PURE__ */ e.jsxs(C, { children: [
+    /* @__PURE__ */ e.jsx(S, { asChild: !0, children: /* @__PURE__ */ e.jsxs(p, { size: "sm", variant: "outline", className: "flex items-center gap-x-1 text-blue-500 hover:text-blue-600", children: [
+      /* @__PURE__ */ e.jsx(f, { className: "h-4 w-4" }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
+        /* @__PURE__ */ e.jsxs("div", { children: [
+          " ",
+          u(d, s)
+        ] }),
+        /* @__PURE__ */ e.jsx(M, { className: "h-4 w-4" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e.jsx(y, { className: "border-border", children: V(b, (l) => /* @__PURE__ */ e.jsxs(
+      k,
+      {
+        className: N(
+          "flex cursor-pointer items-center text-sm",
+          l.key === s && "!bg-blue-500 text-white hover:!text-white"
+        ),
+        onClick: () => n(l.key),
+        children: [
+          /* @__PURE__ */ e.jsx("div", { children: l.value }),
+          l.key === r ? /* @__PURE__ */ e.jsx(E, { className: "ml-2 h-4 w-4 text-yellow-400" }) : null
+        ]
+      }
+    )) })
+  ] });
+}, W = () => {
+  const r = i("topBarComponents.left", []), t = i("topBarComponents.center", []), a = i("topBarComponents.right", []), n = i("editable", !0);
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2 font-bold", children: c.Children.toArray(
+      r.map((s) => /* @__PURE__ */ e.jsx(x, { fallback: /* @__PURE__ */ e.jsx(m, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(s, {}) }))
+    ) }) }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex items-center space-x-2", children: c.Children.toArray(
+      t.map((s) => /* @__PURE__ */ e.jsx(x, { fallback: /* @__PURE__ */ e.jsx(m, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(s, {}) }))
+    ) }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-1", children: [
+      /* @__PURE__ */ e.jsx(T, {}),
+      /* @__PURE__ */ e.jsx(g, { orientation: "vertical" }),
+      /* @__PURE__ */ e.jsx(z, {}),
+      /* @__PURE__ */ e.jsx(g, { orientation: "vertical" }),
+      n ? /* @__PURE__ */ e.jsx(F, {}) : null,
+      c.Children.toArray(
+        a.map((s) => /* @__PURE__ */ e.jsx(x, { fallback: /* @__PURE__ */ e.jsx(m, { className: "h-10" }), children: /* @__PURE__ */ e.jsx(s, {}) }))
+      )
+    ] })
+  ] });
+};
+export {
+  W as default
+};

package/dist/UnsplashImages-BXarNGDE.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BYECrxsp.cjs"),l=require("react"),p=require("lodash-es"),A=require("unsplash-js"),g=require("./context-menu-DfAXjmc8.cjs"),_=require("react-i18next"),v=require("./index-B_be_Or7.cjs"),T=require("@react-hookz/web"),B=require("lucide-react"),b=async(h,f)=>new Promise((r,n)=>{A.createApi({accessKey:f}).search.getPhotos(h).then(o=>{r(o)}).catch(o=>n(o))}),L=({isModalView:h,onSelect:f})=>{const r=v.useBuilderProp("unsplashAccessKey",""),[n,j]=l.useState([]),[o,y]=l.useState(0),[i,w]=l.useState(),[c,k]=l.useState(),[C,E]=l.useState(0),[d,P]=T.useDebouncedState("",1e3),[m,u]=l.useState(!1),{t:R}=_.useTranslation(),I=async s=>{if(p.isEmpty(d))return;let a=o+1;u(!0),y(a);const x={query:d,page:a};i&&(x.orientation=i),c&&(x.color=c),b(x,r).then(t=>{var N,q,S;j(a===1?((N=t==null?void 0:t.response)==null?void 0:N.results)||[]:[...n,...((q=t==null?void 0:t.response)==null?void 0:q.results)||[]]),E((S=t==null?void 0:t.response)==null?void 0:S.total_pages),u(!1)}).catch(()=>{u(!1)})};return l.useEffect(()=>{if(!p.isEmpty(d)&&r){u(!0);const s={query:d,page:1};i&&(s.orientation=i),c&&(s.color=c),y(1),b(s,r).then(a=>{var x,t;j(((x=a==null?void 0:a.response)==null?void 0:x.results)||[]),E((t=a==null?void 0:a.response)==null?void 0:t.total_pages),u(!1)}).catch(()=>{u(!1)})}},[i,c,d,r]),p.isEmpty(r)?e.jsxRuntimeExports.jsx("div",{className:"flex h-full flex-col items-center justify-center",children:e.jsxRuntimeExports.jsxs("p",{className:"max-w-3xl text-center text-gray-500",children:["To enable Unsplash, kindly provide your",e.jsxRuntimeExports.jsx("a",{href:"https://unsplash.com/documentation#public-authentication",className:"px-1 underline hover:text-blue-400",target:"_blank",rel:"noopener noreferrer",children:"Unsplash Access Key"})]})}):e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsxs("form",{className:"flex items-center gap-x-2 rounded-md border border-border bg-background p-px",children:[e.jsxRuntimeExports.jsx(g.Input,{type:"text",name:"query",className:"text-foreground",placeholder:'Try "dog" or "apple"',onChange:s=>P(s.target.value)}),e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(v.ChaiSelect,{className:"w-40",placeholder:R("Orientation"),options:[{value:"",label:"All"},{value:"landscape",label:"Landscape"},{value:"portrait",label:"Portrait"},{value:"squarish",label:"Square"}],defaultValue:i,onValueChange:s=>w(s)})}),e.jsxRuntimeExports.jsx("div",{children:e.jsxRuntimeExports.jsx(v.ChaiSelect,{placeholder:R("Color"),options:[{value:"",label:"All"},{value:"black_and_white",label:"Black and White"},{value:"black",label:"Black"},{value:"white",label:"White"},{value:"night",label:"Night"},{value:"warm",label:"Warm"},{value:"cool",label:"Cool"},{value:"sepia",label:"Sepia"}],defaultValue:c,onValueChange:s=>k(s)})})]}),e.jsxRuntimeExports.jsxs(g.ScrollArea,{className:`h-full ${h&&!p.isEmpty(n)?"-mx-2 flex flex-wrap px-2":"-mx-2 flex flex-col pb-8 pt-2"}`,children:[p.isEmpty(n)&&!m&&e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center justify-center py-6",children:[e.jsxRuntimeExports.jsx("div",{className:"font-medium",children:"No Data"}),e.jsxRuntimeExports.jsx("div",{className:"text-sm text-gray-500",children:"Enter query and press enter"})]}),h?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:n.map(s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>f(s.urls.regular),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:s.alt_description,src:s.urls.small})})},s.id))}):n.map(s=>e.jsxRuntimeExports.jsx("div",{className:"w-full px-2 py-1",children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:s.alt_description,src:s.urls.small})})},s.id)),m&&e.jsxRuntimeExports.jsxs("div",{className:"flex items-center justify-center py-8",children:[e.jsxRuntimeExports.jsx(B.Loader,{className:"h-6 w-6 animate-spin"}),"  Loading..."]}),!p.isEmpty(n)&&o<C&&!m&&e.jsxRuntimeExports.jsx(g.Button,{size:"sm",variant:"link",className:"w-full",onClick:()=>I(),disabled:m,children:m?"":"Load More"})]})]})};exports.default=L;exports.fetchImage=b;

package/dist/{UnsplashImages--HU-110a.js → UnsplashImages-Ds_3IihK.js}

@@ -1,93 +1,41 @@
-import { j as e } from "./jsx-runtime-Sp0orL4X.js";
-import { useState as c, useEffect as q } from "react";
-import { isEmpty as d } from "lodash-es";
+import { j as e } from "./jsx-runtime-DGlMoOmv.js";
+import { useState as m, useEffect as q } from "react";
+import { isEmpty as p } from "lodash-es";
 import { createApi as B } from "unsplash-js";
-import { I as D, S as E, B as L } from "./context-menu-FPX89OKr.js";
-import { useTranslation as T } from "react-i18next";
-import { d as F, C as k } from "./index-suTYVyMn.js";
+import { I as E, S as L, B as T } from "./context-menu-BbqLeYFX.js";
+import { useTranslation as D } from "react-i18next";
+import { d as F, C as k } from "./index-Bn53BEJy.js";
 import { useDebouncedState as K } from "@react-hookz/web";
 import { Loader as U } from "lucide-react";
-import "@radix-ui/react-switch";
-import "@radix-ui/react-accordion";
-import "@radix-ui/react-icons";
-import "class-variance-authority";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-slot";
-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-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-dialog";
-import "@radix-ui/react-context-menu";
-import "clsx";
-import "tailwind-merge";
-import "jotai";
-import "./iconBase-Ief2hJUZ.js";
-import "@chaibuilder/runtime";
-import "./plugin-f6SDZ_Or.js";
-import "tree-model";
-import "react-quill";
-import "./STRINGS-Xxstm-7I.js";
-import "flagged";
-import "react-hotkeys-hook";
-import "@floating-ui/dom";
-import "@floating-ui/react-dom";
-import "react-event-hook";
-import "@tailwindcss/typography";
-import "@tailwindcss/forms";
-import "@tailwindcss/aspect-ratio";
-import "react-wrap-balancer";
-import "react-dom";
-import "prop-types";
-import "react-error-boundary";
-import "re-resizable";
-import "@rjsf/validator-ajv8";
-import "@rjsf/core";
-import "./controls-lEwMTdPQ.js";
-import "react-arborist";
-import "himalaya";
-import "react-icons-picker";
-import "react-autosuggest";
-import "fuse.js";
-import "i18next";
-import "framer-motion";
-const C = async (f, g) => new Promise((s, r) => {
-  B({ accessKey: g }).search.getPhotos(f).then((i) => {
-    s(i);
-  }).catch((i) => r(i));
-}), $e = ({ isModalView: f, onSelect: g }) => {
-  const s = F("unsplashAccessKey", ""), [r, x] = c([]), [i, v] = c(0), [l, P] = c(), [n, A] = c(), [I, b] = c(0), [h, S] = K("", 1e3), [u, m] = c(!1), { t: j } = T(), _ = async (a) => {
-    if (d(h))
-      return;
-    let t = i + 1;
-    a && (a.preventDefault(), t = 1), m(!0), v(t);
-    const p = { query: h, page: t };
-    l && (p.orientation = l), n && (p.color = n), C(p, s).then((o) => {
+const C = async (x, g) => new Promise((t, o) => {
+  B({ accessKey: g }).search.getPhotos(x).then((n) => {
+    t(n);
+  }).catch((n) => o(n));
+}), J = ({ isModalView: x, onSelect: g }) => {
+  const t = F("unsplashAccessKey", ""), [o, f] = m([]), [n, v] = m(0), [r, P] = m(), [i, A] = m(), [I, b] = m(0), [h, S] = K("", 1e3), [u, c] = m(!1), { t: j } = D(), _ = async (a) => {
+    if (p(h)) return;
+    let l = n + 1;
+    c(!0), v(l);
+    const d = { query: h, page: l };
+    r && (d.orientation = r), i && (d.color = i), C(d, t).then((s) => {
       var y, N, w;
-      x(t === 1 ? ((y = o == null ? void 0 : o.response) == null ? void 0 : y.results) || [] : [...r, ...((N = o == null ? void 0 : o.response) == null ? void 0 : N.results) || []]), b((w = o == null ? void 0 : o.response) == null ? void 0 : w.total_pages), m(!1);
+      f(l === 1 ? ((y = s == null ? void 0 : s.response) == null ? void 0 : y.results) || [] : [...o, ...((N = s == null ? void 0 : s.response) == null ? void 0 : N.results) || []]), b((w = s == null ? void 0 : s.response) == null ? void 0 : w.total_pages), c(!1);
     }).catch(() => {
-      m(!1);
+      c(!1);
     });
   };
   return q(() => {
-    if (!d(h) && s) {
-      m(!0);
+    if (!p(h) && t) {
+      c(!0);
       const a = { query: h, page: 1 };
-      l && (a.orientation = l), n && (a.color = n), v(1), C(a, s).then((t) => {
-        var p, o;
-        x(((p = t == null ? void 0 : t.response) == null ? void 0 : p.results) || []), b((o = t == null ? void 0 : t.response) == null ? void 0 : o.total_pages), m(!1);
+      r && (a.orientation = r), i && (a.color = i), v(1), C(a, t).then((l) => {
+        var d, s;
+        f(((d = l == null ? void 0 : l.response) == null ? void 0 : d.results) || []), b((s = l == null ? void 0 : l.response) == null ? void 0 : s.total_pages), c(!1);
       }).catch(() => {
-        m(!1);
+        c(!1);
       });
     }
-  }, [l, n, h, s]), d(s) ? /* @__PURE__ */ e.jsx("div", { className: "flex h-full flex-col items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "max-w-3xl text-center text-gray-500", children: [
+  }, [r, i, h, t]), p(t) ? /* @__PURE__ */ e.jsx("div", { className: "flex h-full flex-col items-center justify-center", children: /* @__PURE__ */ e.jsxs("p", { className: "max-w-3xl text-center text-gray-500", children: [
     "To enable Unsplash, kindly provide your",
     /* @__PURE__ */ e.jsx(
       "a",
@@ -102,7 +50,7 @@ const C = async (f, g) => new Promise((s, r) => {
   ] }) }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxs("form", { className: "flex items-center gap-x-2 rounded-md border border-border bg-background p-px", children: [
       /* @__PURE__ */ e.jsx(
-        D,
+        E,
         {
           type: "text",
           name: "query",
@@ -134,7 +82,7 @@ const C = async (f, g) => new Promise((s, r) => {
               label: "Square"
             }
           ],
-          defaultValue: l,
+          defaultValue: r,
           onValueChange: (a) => P(a)
         }
       ) }),
@@ -176,21 +124,21 @@ const C = async (f, g) => new Promise((s, r) => {
               label: "Sepia"
             }
           ],
-          defaultValue: n,
+          defaultValue: i,
           onValueChange: (a) => A(a)
         }
       ) })
     ] }),
     /* @__PURE__ */ e.jsxs(
-      E,
+      L,
       {
-        className: `h-full ${f && !d(r) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
+        className: `h-full ${x && !p(o) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
         children: [
-          d(r) && !u && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
+          p(o) && !u && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center py-6", children: [
             /* @__PURE__ */ e.jsx("div", { className: "font-medium", children: "No Data" }),
             /* @__PURE__ */ e.jsx("div", { className: "text-sm text-gray-500", children: "Enter query and press enter" })
           ] }),
-          f ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: r.map((a) => /* @__PURE__ */ e.jsx(
+          x ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: o.map((a) => /* @__PURE__ */ e.jsx(
             "div",
             {
               role: "button",
@@ -207,7 +155,7 @@ const C = async (f, g) => new Promise((s, r) => {
               ) })
             },
             a.id
-          )) }) : r.map((a) => /* @__PURE__ */ e.jsx("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+          )) }) : o.map((a) => /* @__PURE__ */ e.jsx("div", { className: "w-full px-2 py-1", children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
             "img",
             {
               className: "h-auto cursor-pointer transition duration-300 ease-in-out hover:scale-105",
@@ -219,13 +167,13 @@ const C = async (f, g) => new Promise((s, r) => {
             /* @__PURE__ */ e.jsx(U, { className: "h-6 w-6 animate-spin" }),
             "  Loading..."
           ] }),
-          !d(r) && i < I && !u && /* @__PURE__ */ e.jsx(
-            L,
+          !p(o) && n < I && !u && /* @__PURE__ */ e.jsx(
+            T,
             {
               size: "sm",
               variant: "link",
               className: "w-full",
-              onClick: () => _(void 0),
+              onClick: () => _(),
               disabled: u,
               children: u ? "" : "Load More"
             }
@@ -236,6 +184,6 @@ const C = async (f, g) => new Promise((s, r) => {
   ] });
 };
 export {
-  $e as default,
+  J as default,
   C as fetchImage
 };

package/dist/UploadImages-DPMndPNm.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BYECrxsp.cjs"),r=require("react"),i=require("lodash-es"),R=require("jotai"),w=require("./context-menu-DfAXjmc8.cjs"),k=require("react-i18next"),b=require("./index-B_be_Or7.cjs"),E=require("lucide-react"),S=R.atom([]),q=({isModalView:l,onSelect:x})=>{const{t}=k.useTranslation(),d=b.useBuilderProp("uploadMediaCallback"),c=b.useBuilderProp("fetchMediaCallback"),[n,m]=R.useAtom(S),[y,p]=r.useState(!1),[j,h]=r.useState(!1),[,N]=r.useState(),[f,u]=r.useState("");r.useEffect(()=>{(async()=>{if(!c)return;h(!0);const s=await c();m(s||[]),h(!1)})()},[]);const v=s=>{var a,o;if(u(""),s&&((o=(a=s==null?void 0:s.target)==null?void 0:a.files)==null?void 0:o.length)>0){const g=s.target.files[0];g.type.startsWith("image")?I(g):u(t("Please select an image"))}},I=async s=>{if(d){p(!0);try{const{url:a}=await d(s);x(a),N(void 0);const o=await c();m(o)}catch(a){m([]),u((a==null?void 0:a.message)||"Something went wrong.")}p(!1)}};return e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsxs("label",{htmlFor:l?"upload-in-modal":"upload-in-panel",children:[e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center rounded-lg",children:e.jsxRuntimeExports.jsxs("label",{htmlFor:"image-upload",className:"flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",children:[e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col items-center justify-center pb-6 pt-5",children:[e.jsxRuntimeExports.jsx(E.Upload,{className:"mb-3 h-10 w-10 text-gray-400"}),e.jsxRuntimeExports.jsx("p",{className:"mb-2 text-sm text-gray-500 dark:text-gray-400",children:e.jsxRuntimeExports.jsx("span",{className:"font-semibold",children:t("Click to upload")})}),e.jsxRuntimeExports.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:t("SVG, PNG, JPG or GIF (Max. 2mb)")})]}),y?e.jsxRuntimeExports.jsxs("div",{className:"flex h-full w-full items-center justify-center",children:[e.jsxRuntimeExports.jsx(E.Loader,{className:"h-6 w-6 animate-spin"}),e.jsxRuntimeExports.jsx("span",{className:"ml-2 text-sm text-gray-500",children:t("Uploading...")})]}):null,f&&e.jsxRuntimeExports.jsx("p",{className:"pb-2 text-xs text-red-500",children:f||t("Something went wrong")})]})}),e.jsxRuntimeExports.jsx("input",{type:"file",id:"image-upload",accept:"image/*",hidden:!0,onChange:v})]}),e.jsxRuntimeExports.jsxs(w.ScrollArea,{className:`-mx-2 flex h-full flex-col pb-8 pt-2 ${l?"px-2":""} pt-2`,children:[i.isEmpty(n)&&j&&e.jsxRuntimeExports.jsx("div",{className:"flex flex-col items-center justify-center py-6",children:e.jsxRuntimeExports.jsx("div",{className:"animate-pulse font-medium",children:t("Fetching...")})}),i.isEmpty(n)&&!j&&e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col items-center justify-center text-center",children:[e.jsxRuntimeExports.jsx("div",{className:"mb-4 h-12 rounded-full p-6"}),e.jsxRuntimeExports.jsx("h3",{className:"mb-2 text-sm font-semibold",children:t("No images found")}),e.jsxRuntimeExports.jsx("p",{className:"mb-4 max-w-sm text-muted-foreground",children:t("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.")})]}),l?e.jsxRuntimeExports.jsx("div",{className:"h-full columns-5 py-2",children:i.map(n,s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"my-1 flex",onClick:()=>x(s.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",alt:s.name,src:s.thumbUrl})})},s.id))}):i.map(n,s=>e.jsxRuntimeExports.jsx("div",{role:"button",tabIndex:0,className:"px-2 py-1",onClick:()=>x(s.url),children:e.jsxRuntimeExports.jsx("div",{className:"relative overflow-hidden rounded-md bg-cover bg-no-repeat",children:e.jsxRuntimeExports.jsx("img",{className:"h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",alt:s.name,src:s.url})})},s.id))]})]})};exports.default=q;

package/dist/UploadImages-VZ7-y0rA.js

@@ -0,0 +1,101 @@
+import { j as e } from "./jsx-runtime-DGlMoOmv.js";
+import { useState as n, useEffect as k } from "react";
+import { isEmpty as j, map as b } from "lodash-es";
+import { atom as F, useAtom as U } from "jotai";
+import { S as C } from "./context-menu-BbqLeYFX.js";
+import { useTranslation as S } from "react-i18next";
+import { d as N } from "./index-Bn53BEJy.js";
+import { Upload as E, Loader as G } from "lucide-react";
+const P = F([]), $ = ({ isModalView: l, onSelect: i }) => {
+  const { t } = S(), u = N("uploadMediaCallback"), d = N("fetchMediaCallback"), [r, c] = U(P), [y, x] = n(!1), [f, p] = n(!1), [, v] = n(), [h, m] = n("");
+  k(() => {
+    (async () => {
+      if (!d) return;
+      p(!0);
+      const s = await d();
+      c(s || []), p(!1);
+    })();
+  }, []);
+  const w = (s) => {
+    var a, o;
+    if (m(""), s && ((o = (a = s == null ? void 0 : s.target) == null ? void 0 : a.files) == null ? void 0 : o.length) > 0) {
+      const g = s.target.files[0];
+      g.type.startsWith("image") ? I(g) : m(t("Please select an image"));
+    }
+  }, I = async (s) => {
+    if (u) {
+      x(!0);
+      try {
+        const { url: a } = await u(s);
+        i(a), v(void 0);
+        const o = await d();
+        c(o);
+      } catch (a) {
+        c([]), m((a == null ? void 0 : a.message) || "Something went wrong.");
+      }
+      x(!1);
+    }
+  };
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsxs("label", { htmlFor: l ? "upload-in-modal" : "upload-in-panel", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center rounded-lg", children: /* @__PURE__ */ e.jsxs(
+        "label",
+        {
+          htmlFor: "image-upload",
+          className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",
+          children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center pb-6 pt-5", children: [
+              /* @__PURE__ */ e.jsx(E, { className: "mb-3 h-10 w-10 text-gray-400" }),
+              /* @__PURE__ */ e.jsx("p", { className: "mb-2 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ e.jsx("span", { className: "font-semibold", children: t("Click to upload") }) }),
+              /* @__PURE__ */ e.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: t("SVG, PNG, JPG or GIF (Max. 2mb)") })
+            ] }),
+            y ? /* @__PURE__ */ e.jsxs("div", { className: "flex h-full w-full items-center justify-center", children: [
+              /* @__PURE__ */ e.jsx(G, { className: "h-6 w-6 animate-spin" }),
+              /* @__PURE__ */ e.jsx("span", { className: "ml-2 text-sm text-gray-500", children: t("Uploading...") })
+            ] }) : null,
+            h && /* @__PURE__ */ e.jsx("p", { className: "pb-2 text-xs text-red-500", children: h || t("Something went wrong") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "file",
+          id: "image-upload",
+          accept: "image/*",
+          hidden: !0,
+          onChange: w
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsxs(C, { className: `-mx-2 flex h-full flex-col pb-8 pt-2 ${l ? "px-2" : ""} pt-2`, children: [
+      j(r) && f && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e.jsx("div", { className: "animate-pulse font-medium", children: t("Fetching...") }) }),
+      j(r) && !f && /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "mb-4 h-12 rounded-full p-6" }),
+        /* @__PURE__ */ e.jsx("h3", { className: "mb-2 text-sm font-semibold", children: t("No images found") }),
+        /* @__PURE__ */ e.jsx("p", { className: "mb-4 max-w-sm text-muted-foreground", children: t("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.") })
+      ] }),
+      l ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: b(r, (s) => /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "my-1 flex", onClick: () => i(s.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+        "img",
+        {
+          className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+          alt: s.name,
+          src: s.thumbUrl
+        }
+      ) }) }, s.id)) }) : b(r, (s) => (
+        // TODO: Drag and Drop Image to Canvas from Here use `pic.url` for image quality
+        /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "px-2 py-1", onClick: () => i(s.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            className: "h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+            alt: s.name,
+            src: s.url
+          }
+        ) }) }, s.id)
+      ))
+    ] })
+  ] });
+};
+export {
+  $ as default
+};