@simple-builder/react 1.0.2 → 1.0.4

package/dist/chunk-BSE6WW6Q.mjs

@@ -0,0 +1,115 @@
+import * as React3 from 'react';
+import { createElement } from 'react';
+import NextImage from 'next/image';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+// 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.default, { ...props });
+  }
+  return /* @__PURE__ */ React3.createElement("img", { ...props });
+};
+var twMerge = extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+var spacing = {
+  parse: (input) => {
+    const matches = input.match(/(\d+)/gm);
+    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+    switch (matches?.length) {
+      case 1:
+        return { top, right: top, bottom: top, left: top };
+      case 2:
+        return { top, bottom: top, left: right, right };
+      case 3:
+        return { top, right, left: right, bottom };
+      default:
+        return { top, right, bottom, left };
+    }
+  },
+  isIndipendent: (input) => {
+    const { top, right, bottom, left } = spacing.parse(input);
+    return top !== bottom || right !== left;
+  }
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, styles } = props;
+  const { container = true, background, ...rest } = styles || {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: cn("sb-relative", className),
+      style: { ...!src && { background }, ...rest }
+    },
+    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: "sb-container sb-mx-auto" }, children) : children
+  );
+};
+var BuildContainerInner = React3.lazy(
+  () => import('./build-container-client-Y55WZE6M.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, spacing };

package/dist/{chunk-BXL6F5AB.mjs → chunk-EQMVGJ6X.mjs}

@@ -1,41 +1,8 @@
-import { builder } from './chunk-7K7IGTF3.mjs';
+import { cn, builder, insertAt } from './chunk-BSE6WW6Q.mjs';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 
-var twMerge = extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var insertAt = (items, index, item) => {
-  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
-};
-var spacing = {
-  parse: (input) => {
-    const matches = input.match(/(\d+)/gm);
-    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
-    switch (matches?.length) {
-      case 1:
-        return { top, right: top, bottom: top, left: top };
-      case 2:
-        return { top, bottom: top, left: right, right };
-      case 3:
-        return { top, right, left: right, bottom };
-      default:
-        return { top, right, bottom, left };
-    }
-  },
-  isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
-    return top !== bottom || right !== left;
-  }
-};
-
-// src/components/context/builder-context.tsx
 var BuilderContext = React.createContext(
   null
 );
@@ -266,4 +233,4 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-export { BuilderProvider, Button, buttonVariants, cn, spacing, useBuilder };
+export { BuilderProvider, Button, buttonVariants, useBuilder };

package/dist/chunk-J36K7WVK.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var React3 = require('react');
+var NextImage = require('next/image');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+
+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 = /* @__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 = React3.createElement(component.component, {
+        key: block.id,
+        builder: { id: block.id, content, edit },
+        ...block.props
+      });
+      return Element;
+    }
+  };
+})();
+var Image = (props) => {
+  if (typeof NextImage__default.default !== "undefined") {
+    return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.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 insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+var spacing = {
+  parse: (input) => {
+    const matches = input.match(/(\d+)/gm);
+    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+    switch (matches?.length) {
+      case 1:
+        return { top, right: top, bottom: top, left: top };
+      case 2:
+        return { top, bottom: top, left: right, right };
+      case 3:
+        return { top, right, left: right, bottom };
+      default:
+        return { top, right, bottom, left };
+    }
+  },
+  isIndipendent: (input) => {
+    const { top, right, bottom, left } = spacing.parse(input);
+    return top !== bottom || right !== left;
+  }
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, styles } = props;
+  const { container = true, background, ...rest } = styles || {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  return /* @__PURE__ */ React3__namespace.createElement(
+    "div",
+    {
+      className: cn("sb-relative", className),
+      style: { ...!src && { background }, ...rest }
+    },
+    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: "sb-container sb-mx-auto" }, children) : children
+  );
+};
+var BuildContainerInner = React3__namespace.lazy(
+  () => import('./build-container-client-PDM3LRIQ.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, { 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.spacing = spacing;

package/dist/{chunk-5ZDNACOH.js → chunk-KOBGFPWB.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -23,16 +23,20 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var BuildContainerInner = React__namespace.lazy(
-  () => import('./build-container-client-LHGW2FFR.js')
-);
-var BuildContainer = (props) => {
-  const { content, edit, name } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!edit) {
-    return items.map((item) => chunkVMHWPKU4_js.builder.bindComponent(item));
-  }
-  return /* @__PURE__ */ React__namespace.createElement(BuildContainerInner, { ...props });
+var StaticContent = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(
+    chunkJ36K7WVK_js.BuildContainer,
+    {
+      name: "root",
+      edit: false,
+      multiple: true,
+      content: props.content || []
+    }
+  );
 };
 
-exports.BuildContainer = BuildContainer;
+// src/index.ts
+var BuilderContent = React.lazy(() => import('./builder-content-QNCUQJUB.js'));
+
+exports.BuilderContent = BuilderContent;
+exports.StaticContent = StaticContent;

package/dist/chunk-NP2NHVJP.mjs

@@ -0,0 +1,20 @@
+import { BuildContainer } from './chunk-BSE6WW6Q.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-GELONUMY.mjs'));
+
+export { BuilderContent, StaticContent };

package/dist/{chunk-3S4FFEHM.js → chunk-XEMUNFCV.js}

@@ -1,9 +1,7 @@
 'use strict';
 
-var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 
@@ -27,37 +25,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx.clsx(inputs));
-}
-var insertAt = (items, index, item) => {
-  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
-};
-var spacing = {
-  parse: (input) => {
-    const matches = input.match(/(\d+)/gm);
-    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
-    switch (matches?.length) {
-      case 1:
-        return { top, right: top, bottom: top, left: top };
-      case 2:
-        return { top, bottom: top, left: right, right };
-      case 3:
-        return { top, right, left: right, bottom };
-      default:
-        return { top, right, bottom, left };
-    }
-  },
-  isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
-    return top !== bottom || right !== left;
-  }
-};
-
-// src/components/context/builder-context.tsx
 var BuilderContext = React__namespace.createContext(
   null
 );
@@ -92,7 +59,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkVMHWPKU4_js.builder.getComponent(name);
+      const component = chunkJ36K7WVK_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -114,7 +81,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => insertAt(content2, index, entry));
+        setContent((content2) => chunkJ36K7WVK_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -124,7 +91,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: insertAt(item.content?.[container], index, entry)
+                [container]: chunkJ36K7WVK_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -279,7 +246,7 @@ var Button = React__namespace.forwardRef(
     return /* @__PURE__ */ React__namespace.createElement(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: chunkJ36K7WVK_js.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }
@@ -291,6 +258,4 @@ Button.displayName = "Button";
 exports.BuilderProvider = BuilderProvider;
 exports.Button = Button;
 exports.buttonVariants = buttonVariants;
-exports.cn = cn;
-exports.spacing = spacing;
 exports.useBuilder = useBuilder;

package/dist/index.d.mts

@@ -52,7 +52,7 @@ type BuildContainerProps = {
     multiple?: boolean;
     edit: boolean;
 };
-declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.FunctionComponentElement<any>[];
+declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.JSX.Element[];
 
 declare const BuilderContent: React.LazyExoticComponent<(props: {
     content?: _simple_builder_server.BuilderContent | undefined;

package/dist/index.d.ts

@@ -52,7 +52,7 @@ type BuildContainerProps = {
     multiple?: boolean;
     edit: boolean;
 };
-declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.FunctionComponentElement<any>[];
+declare const BuildContainer: (props: BuildContainerProps) => React.JSX.Element | React.JSX.Element[];
 
 declare const BuilderContent: React.LazyExoticComponent<(props: {
     content?: _simple_builder_server.BuilderContent | undefined;

package/dist/index.js

@@ -1,51 +1,23 @@
 'use strict';
 
-var chunk5ZDNACOH_js = require('./chunk-5ZDNACOH.js');
-var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.js');
-var React = require('react');
+var chunkKOBGFPWB_js = require('./chunk-KOBGFPWB.js');
+var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
 
-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(
-    chunk5ZDNACOH_js.BuildContainer,
-    {
-      name: "root",
-      edit: false,
-      multiple: true,
-      content: props.content || []
-    }
-  );
-};
-
-// src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-66LHSBUX.js'));
 
+Object.defineProperty(exports, "BuilderContent", {
+  enumerable: true,
+  get: function () { return chunkKOBGFPWB_js.BuilderContent; }
+});
+Object.defineProperty(exports, "StaticContent", {
+  enumerable: true,
+  get: function () { return chunkKOBGFPWB_js.StaticContent; }
+});
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunk5ZDNACOH_js.BuildContainer; }
+  get: function () { return chunkJ36K7WVK_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkVMHWPKU4_js.builder; }
+  get: function () { return chunkJ36K7WVK_js.builder; }
 });
-exports.BuilderContent = BuilderContent;
-exports.StaticContent = StaticContent;

package/dist/index.mjs

@@ -1,22 +1,2 @@
-import { BuildContainer } from './chunk-NROQCSBF.mjs';
-export { BuildContainer } from './chunk-NROQCSBF.mjs';
-export { builder } from './chunk-7K7IGTF3.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-FCQHSHSY.mjs'));
-
-export { BuilderContent, StaticContent };
+export { BuilderContent, StaticContent } from './chunk-NP2NHVJP.mjs';
+export { BuildContainer, builder } from './chunk-BSE6WW6Q.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -26,7 +26,7 @@
     "dist"
   ],
   "dependencies": {
-    "@hookform/resolvers": "^3.3.3",
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
@@ -36,29 +36,29 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "date-fns": "^3.0.6",
-    "lucide-react": "^0.303.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.2.0",
+    "lucide-react": "^0.309.0",
     "react-day-picker": "^8.10.0",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.49.3",
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.0",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.2"
+    "@simple-builder/server": "1.0.4"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.5",
-    "@types/react": "^18.2.46",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.0.1",
     "typescript": "5.3.3"

package/dist/chunk-7K7IGTF3.mjs

@@ -1,40 +0,0 @@
-import { createElement } from 'react';
-
-// 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;
-    }
-  };
-})();
-
-export { builder };

package/dist/chunk-NROQCSBF.mjs

@@ -1,16 +0,0 @@
-import { builder } from './chunk-7K7IGTF3.mjs';
-import * as React from 'react';
-
-var BuildContainerInner = React.lazy(
-  () => import('./build-container-client-SL4TZBOD.mjs')
-);
-var BuildContainer = (props) => {
-  const { content, edit, name } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!edit) {
-    return items.map((item) => builder.bindComponent(item));
-  }
-  return /* @__PURE__ */ React.createElement(BuildContainerInner, { ...props });
-};
-
-export { BuildContainer };