@simple-builder/react 1.3.4 → 1.3.7

package/dist/build-container-client-XOHYMPBB.js

@@ -1,5 +1,7 @@
 'use client';
 'use client';
+'use client';
+'use client';
 'use strict';
 
 require('./chunk-CJNSRJNF.js');

package/dist/build-container-client-YDRPPWCU.js

@@ -4,6 +4,8 @@
 'use client';
 'use client';
 'use client';
+'use client';
+'use client';
 'use strict';
 
 require('./chunk-WA7TKN6M.js');

package/dist/build-container-client-ZXO66OL5.js

@@ -7,6 +7,8 @@
 'use client';
 'use client';
 'use client';
+'use client';
+'use client';
 'use strict';
 
 require('./chunk-4TVSMCQU.js');

package/dist/builder-content-4ZNXUE7D.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-XLE7GSYM.mjs';
+import { BuildContainer } from './chunk-6GCUWI4L.mjs';
+import * as React2 from 'react';
+
+var BuilderHeader = () => {
+  const { save } = useBuilder();
+  return /* @__PURE__ */ React2.createElement("div", { className: "sb:grid sb:grid-cols-3 sb:gap-4 sb:items-center sb:p-2 sb:shadow-lg sb:sticky sb:inset-x-0 sb:top-0 sb:bg-background sb:z-30" }, /* @__PURE__ */ React2.createElement("div", { className: "sb:flex sb:gap-4 sb:items-center" }, /* @__PURE__ */ React2.createElement(Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2.createElement(BuilderProvider, { content: props.content }, /* @__PURE__ */ React2.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = useBuilder();
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(BuilderHeader, null), /* @__PURE__ */ React2.createElement(BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+export { builder_content_default as default };

package/dist/builder-content-GBSIY2Z7.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkRNGHWAPZ_js = require('./chunk-RNGHWAPZ.js');
+var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
+var React2 = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var BuilderHeader = () => {
+  const { save } = chunkRNGHWAPZ_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:grid sb:grid-cols-3 sb:gap-4 sb:items-center sb:p-2 sb:shadow-lg sb:sticky sb:inset-x-0 sb:top-0 sb:bg-background sb:z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "sb:flex sb:gap-4 sb:items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkRNGHWAPZ_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkRNGHWAPZ_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkRNGHWAPZ_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkNUDE6YTK_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/chunk-6GCUWI4L.mjs

@@ -0,0 +1,135 @@
+import * as React3 from 'react';
+import { createElement } from 'react';
+import NextImage from 'next/image';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
+
+// src/lib/builder.ts
+var Builder = class _Builder {
+  static instance;
+  components = [];
+  constructor() {
+  }
+  static getInstance() {
+    if (!_Builder.instance) {
+      _Builder.instance = new _Builder();
+    }
+    return _Builder.instance;
+  }
+  register(component, config) {
+    if (this.components.find(({ name }) => name === config.name)) {
+      console.log(
+        `[simple-builder]: Component ${config.name} already registered.`
+      );
+      return;
+    }
+    this.components.push({
+      component,
+      ...config
+    });
+  }
+  getComponents() {
+    return this.components;
+  }
+  getComponent(name) {
+    return this.components.find((c) => c.name === name);
+  }
+  bindComponent({ content, ...block }, edit) {
+    const component = this.components.find(
+      ({ name }) => name === block.component
+    );
+    if (!component) {
+      throw new Error(
+        `[simple-builder]: Component ${block.component} not found`
+      );
+    }
+    const Element = createElement(component.component, {
+      key: block.id,
+      builder: { id: block.id, content, edit },
+      ...block.props
+    });
+    return Element;
+  }
+};
+var builder = Builder.getInstance();
+var Image = (props) => {
+  if (typeof NextImage !== "undefined") {
+    return /* @__PURE__ */ React3.createElement(NextImage, { ...props });
+  }
+  return /* @__PURE__ */ React3.createElement("img", { ...props });
+};
+var twMerge = extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var tv = createTV({
+  twMergeConfig: {
+    prefix: "sb-"
+  }
+});
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, building = false } = props;
+  const { background } = props.styles?.desktop ?? {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  const desktopStyles = props.styles?.desktop ?? {};
+  const mobileStyles = props.styles?.mobile ?? {};
+  const container = props.styles?.container ?? true;
+  const hidden = props.styles?.hidden ?? "never";
+  const id = React3.useId().replace(/[^a-zA-Z0-9]/g, "");
+  let hiddenClass = "";
+  switch (hidden) {
+    case "always":
+      hiddenClass = building ? "sb:opacity-30" : "sb:hidden";
+      break;
+    case "mobile":
+      hiddenClass = building ? "sb:max-md:opacity-30" : "sb:max-md:hidden";
+      break;
+    case "desktop":
+      hiddenClass = building ? "sb:md:opacity-30" : "sb:md:hidden";
+      break;
+    case "never":
+      hiddenClass = "";
+      break;
+  }
+  return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb:relative", className, hiddenClass) }, src && /* @__PURE__ */ React3.createElement(
+    Image,
+    {
+      src,
+      alt: "",
+      fill: true,
+      className: "sb:object-cover sb:absolute sb:inset-0 sb:pointer-events-none sb:-z-1"
+    }
+  ), container ? /* @__PURE__ */ React3.createElement("div", { className: "container sb:mx-auto" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
+        #${id} {
+          ${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
+        }
+
+        @media (max-width: 1024px) {
+          #${id} {
+            ${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
+          }
+        }
+      `.replace(/\s\s+/g, " ")));
+};
+var BuildContainerInner = React3.lazy(
+  () => import('./build-container-client-XAQDWWKB.mjs')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { key: item.id, styles: item.styles }, builder.bindComponent(item, true)));
+  }
+  return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: /* @__PURE__ */ React3.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3.createElement(BuildContainerInner, { ...props }));
+};
+
+export { BuildContainer, DesignWrapper, Image, builder, cn, insertAt, tv };

package/dist/chunk-F5JWY4CM.mjs

@@ -0,0 +1,20 @@
+import { BuildContainer } from './chunk-6GCUWI4L.mjs';
+import * as React from 'react';
+import { lazy } from 'react';
+
+var StaticContent = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    BuildContainer,
+    {
+      name: "root",
+      edit: false,
+      multiple: true,
+      content: props.content || []
+    }
+  );
+};
+
+// src/index.ts
+var BuilderContent = lazy(() => import('./builder-content-4ZNXUE7D.mjs'));
+
+export { BuilderContent, StaticContent };

package/dist/chunk-NUDE6YTK.js

@@ -0,0 +1,165 @@
+'use strict';
+
+var React3 = require('react');
+var NextImage = require('next/image');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
+
+// src/lib/builder.ts
+var Builder = class _Builder {
+  static instance;
+  components = [];
+  constructor() {
+  }
+  static getInstance() {
+    if (!_Builder.instance) {
+      _Builder.instance = new _Builder();
+    }
+    return _Builder.instance;
+  }
+  register(component, config) {
+    if (this.components.find(({ name }) => name === config.name)) {
+      console.log(
+        `[simple-builder]: Component ${config.name} already registered.`
+      );
+      return;
+    }
+    this.components.push({
+      component,
+      ...config
+    });
+  }
+  getComponents() {
+    return this.components;
+  }
+  getComponent(name) {
+    return this.components.find((c) => c.name === name);
+  }
+  bindComponent({ content, ...block }, edit) {
+    const component = this.components.find(
+      ({ name }) => name === block.component
+    );
+    if (!component) {
+      throw new Error(
+        `[simple-builder]: Component ${block.component} not found`
+      );
+    }
+    const Element = React3.createElement(component.component, {
+      key: block.id,
+      builder: { id: block.id, content, edit },
+      ...block.props
+    });
+    return Element;
+  }
+};
+var builder = Builder.getInstance();
+var Image = (props) => {
+  if (typeof NextImage__default.default !== "undefined") {
+    return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default, { ...props });
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("img", { ...props });
+};
+var twMerge = tailwindMerge.extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var tv = tailwindVariants.createTV({
+  twMergeConfig: {
+    prefix: "sb-"
+  }
+});
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, building = false } = props;
+  const { background } = props.styles?.desktop ?? {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  const desktopStyles = props.styles?.desktop ?? {};
+  const mobileStyles = props.styles?.mobile ?? {};
+  const container = props.styles?.container ?? true;
+  const hidden = props.styles?.hidden ?? "never";
+  const id = React3__namespace.useId().replace(/[^a-zA-Z0-9]/g, "");
+  let hiddenClass = "";
+  switch (hidden) {
+    case "always":
+      hiddenClass = building ? "sb:opacity-30" : "sb:hidden";
+      break;
+    case "mobile":
+      hiddenClass = building ? "sb:max-md:opacity-30" : "sb:max-md:hidden";
+      break;
+    case "desktop":
+      hiddenClass = building ? "sb:md:opacity-30" : "sb:md:hidden";
+      break;
+    case "never":
+      hiddenClass = "";
+      break;
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("div", { id, className: cn("sb:relative", className, hiddenClass) }, src && /* @__PURE__ */ React3__namespace.createElement(
+    Image,
+    {
+      src,
+      alt: "",
+      fill: true,
+      className: "sb:object-cover sb:absolute sb:inset-0 sb:pointer-events-none sb:-z-1"
+    }
+  ), container ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "container sb:mx-auto" }, children) : children, /* @__PURE__ */ React3__namespace.createElement("style", null, `
+        #${id} {
+          ${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
+        }
+
+        @media (max-width: 1024px) {
+          #${id} {
+            ${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
+          }
+        }
+      `.replace(/\s\s+/g, " ")));
+};
+var BuildContainerInner = React3__namespace.lazy(
+  () => import('./build-container-client-RSJ4H3SB.js')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { key: item.id, styles: item.styles }, builder.bindComponent(item, true)));
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
+};
+
+exports.BuildContainer = BuildContainer;
+exports.DesignWrapper = DesignWrapper;
+exports.Image = Image;
+exports.builder = builder;
+exports.cn = cn;
+exports.insertAt = insertAt;
+exports.tv = tv;

package/dist/chunk-NZ4ZQMIS.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var StaticContent = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(
+    chunkNUDE6YTK_js.BuildContainer,
+    {
+      name: "root",
+      edit: false,
+      multiple: true,
+      content: props.content || []
+    }
+  );
+};
+
+// src/index.ts
+var BuilderContent = React.lazy(() => import('./builder-content-GBSIY2Z7.js'));
+
+exports.BuilderContent = BuilderContent;
+exports.StaticContent = StaticContent;