@chaibuilder/sdk 1.3.0-beta.8 → 1.3.0

package/dist/CodeEditor-C94XQmvL.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-C9LOYt3W.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-D5t7A9Po.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-CcLk7_o6.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/STRINGS-eiGM83kj.js

@@ -0,0 +1,7 @@
+const s = "#styles:", _ = "#slots:", t = "#i18n", E = "__ADD_BLOCK_INTERNAL_ROOT";
+export {
+  t as I,
+  E as R,
+  s as S,
+  _ as a
+};

package/dist/STRINGS-ew98weUe.cjs

@@ -0,0 +1 @@
+"use strict";const _="#styles:",E="#slots:",s="#i18n",T="__ADD_BLOCK_INTERNAL_ROOT";exports.I18N_KEY=s;exports.ROOT_TEMP_KEY=T;exports.SLOT_KEY=E;exports.STYLES_KEY=_;

package/dist/Topbar-Bnxt9C5B.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-CcLk7_o6.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/Topbar-DFm3YQZi.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-C9LOYt3W.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/UnsplashImages-BWT3eyq3.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-C9LOYt3W.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-D-9aNQGK.js

@@ -0,0 +1,189 @@
+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 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-CcLk7_o6.js";
+import { useDebouncedState as K } from "@react-hookz/web";
+import { Loader as U } from "lucide-react";
+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;
+      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(() => {
+      c(!1);
+    });
+  };
+  return q(() => {
+    if (!p(h) && t) {
+      c(!0);
+      const a = { query: h, page: 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(() => {
+        c(!1);
+      });
+    }
+  }, [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",
+      {
+        href: "https://unsplash.com/documentation#public-authentication",
+        className: "px-1 underline hover:text-blue-400",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "Unsplash Access Key"
+      }
+    )
+  ] }) }) : /* @__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(
+        E,
+        {
+          type: "text",
+          name: "query",
+          className: "text-foreground",
+          placeholder: 'Try "dog" or "apple"',
+          onChange: (a) => S(a.target.value)
+        }
+      ),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          className: "w-40",
+          placeholder: j("Orientation"),
+          options: [
+            {
+              value: "",
+              label: "All"
+            },
+            {
+              value: "landscape",
+              label: "Landscape"
+            },
+            {
+              value: "portrait",
+              label: "Portrait"
+            },
+            {
+              value: "squarish",
+              label: "Square"
+            }
+          ],
+          defaultValue: r,
+          onValueChange: (a) => P(a)
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
+        k,
+        {
+          placeholder: j("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: i,
+          onValueChange: (a) => A(a)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(
+      L,
+      {
+        className: `h-full ${x && !p(o) ? "-mx-2 flex flex-wrap px-2" : "-mx-2 flex flex-col pb-8 pt-2"}`,
+        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" })
+          ] }),
+          x ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: o.map((a) => /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              className: "my-1 flex",
+              onClick: () => g(a.urls.regular),
+              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: a.alt_description,
+                  src: a.urls.small
+                }
+              ) })
+            },
+            a.id
+          )) }) : 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",
+              alt: a.alt_description,
+              src: a.urls.small
+            }
+          ) }) }, a.id)),
+          u && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-center py-8", children: [
+            /* @__PURE__ */ e.jsx(U, { className: "h-6 w-6 animate-spin" }),
+            "  Loading..."
+          ] }),
+          !p(o) && n < I && !u && /* @__PURE__ */ e.jsx(
+            T,
+            {
+              size: "sm",
+              variant: "link",
+              className: "w-full",
+              onClick: () => _(),
+              disabled: u,
+              children: u ? "" : "Load More"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  J as default,
+  C as fetchImage
+};

package/dist/UploadImages-CntfFAoV.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-C9LOYt3W.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-CrAaKlC1.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-CcLk7_o6.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
+};