@simple-builder/react 1.2.5 → 1.2.7

package/dist/builder-content-5K55QBEE.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkIVF3GTYS_js = require('./chunk-IVF3GTYS.js');
+var chunk5VQCJART_js = require('./chunk-5VQCJART.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 } = chunkIVF3GTYS_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(chunkIVF3GTYS_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkIVF3GTYS_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkIVF3GTYS_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunk5VQCJART_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/builder-content-5K7B4FXR.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkJDB6GNKI_js = require('./chunk-JDB6GNKI.js');
+var chunkRTB6I3Q2_js = require('./chunk-RTB6I3Q2.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 } = chunkJDB6GNKI_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(chunkJDB6GNKI_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkJDB6GNKI_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkJDB6GNKI_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkRTB6I3Q2_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/builder-content-EHVMYKSR.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-BUELIHBX.mjs';
+import { BuildContainer } from './chunk-UH23D2JA.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-J6G2PNIM.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkRCDOLMDG_js = require('./chunk-RCDOLMDG.js');
+var chunkORODN5Q7_js = require('./chunk-ORODN5Q7.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 } = chunkRCDOLMDG_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(chunkRCDOLMDG_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkRCDOLMDG_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkRCDOLMDG_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkORODN5Q7_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/builder-content-JQ7BYR4W.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-5NN2XSII.mjs';
+import { BuildContainer } from './chunk-2DLJX5FY.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-KWK44AH6.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-RUBQ6OAO.mjs';
+import { BuildContainer } from './chunk-XFIY7HQO.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-LYSSA6KK.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunk2S5KDJXM_js = require('./chunk-2S5KDJXM.js');
+var chunkIACBZNOK_js = require('./chunk-IACBZNOK.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 } = chunk2S5KDJXM_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(chunk2S5KDJXM_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunk2S5KDJXM_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunk2S5KDJXM_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkIACBZNOK_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/builder-content-MPQ7ZQN4.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkI4TPSTXB_js = require('./chunk-I4TPSTXB.js');
+var chunkSMRPMB3V_js = require('./chunk-SMRPMB3V.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 } = chunkI4TPSTXB_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(chunkI4TPSTXB_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkI4TPSTXB_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkI4TPSTXB_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkSMRPMB3V_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/builder-content-OE75E24Z.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-5DXQZNUR.mjs';
+import { BuildContainer } from './chunk-TF7VKEU2.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-STUVQ4ME.mjs

@@ -0,0 +1,20 @@
+import { BuilderProvider, useBuilder, Button } from './chunk-75X4HNGS.mjs';
+import { BuildContainer } from './chunk-HA4DTJA7.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/chunk-2DLJX5FY.mjs

@@ -0,0 +1,123 @@
+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 = /* @__PURE__ */ (() => {
+  const components = [];
+  return {
+    register: (component, config) => {
+      if (components.find(({ name }) => name === config.name)) {
+        console.log(
+          `[simple-builder]: Component ${config.name} already registered.`
+        );
+        return;
+      }
+      components.push({
+        component,
+        ...config
+      });
+    },
+    getComponents: () => components,
+    getComponent: (name) => {
+      return components.find((c) => c.name === name);
+    },
+    bindComponent: ({ content, ...block }, edit) => {
+      const component = 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 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 ? "max-md:sb-opacity-30" : "max-md:sb-hidden";
+      break;
+    case "desktop":
+      hiddenClass = building ? "md:sb-opacity-30" : "md:sb-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-6D4M5MV6.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, { 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 };