@simple-builder/react 1.0.20 → 1.0.21

package/dist/{builder-content-PZYB2ILV.js → builder-content-BGBWMI6B.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkN6DUKS7Z_js = require('./chunk-N6DUKS7Z.js');
-var chunkLLKCXOGO_js = require('./chunk-LLKCXOGO.js');
+var chunkQ2EMWEEZ_js = require('./chunk-Q2EMWEEZ.js');
+var chunkSMX2JVU7_js = require('./chunk-SMX2JVU7.js');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -25,17 +25,17 @@ function _interopNamespace(e) {
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
 var BuilderHeader = () => {
-  const { save } = chunkN6DUKS7Z_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(chunkN6DUKS7Z_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkQ2EMWEEZ_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(chunkQ2EMWEEZ_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkN6DUKS7Z_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkQ2EMWEEZ_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkN6DUKS7Z_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkLLKCXOGO_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkQ2EMWEEZ_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkSMX2JVU7_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{builder-content-6XOZLKFJ.css → builder-content-JWIMCW6L.css}

@@ -752,6 +752,9 @@
 .sb-opacity-0 {
   opacity: 0;
 }
+.sb-opacity-30 {
+  opacity: 0.3;
+}
 .sb-opacity-50 {
   opacity: 0.5;
 }
@@ -1211,6 +1214,14 @@
 .data-\[state\=open\]\:sb-slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
+@media not all and (min-width: 768px) {
+  .max-md\:sb-hidden {
+    display: none;
+  }
+  .max-md\:sb-opacity-30 {
+    opacity: 0.3;
+  }
+}
 @media (min-width: 640px) {
   .sm\:sb-mt-0 {
     margin-top: 0px;
@@ -1243,6 +1254,14 @@
     text-align: left;
   }
 }
+@media (min-width: 768px) {
+  .md\:sb-hidden {
+    display: none;
+  }
+  .md\:sb-opacity-30 {
+    opacity: 0.3;
+  }
+}
 .\[\&\:has\(\>\.day-range-end\)\]\:sb-rounded-r-md:has(> .day-range-end) {
   border-top-right-radius: calc(var(--sb-radius) - 2px);
   border-bottom-right-radius: calc(var(--sb-radius) - 2px);

package/dist/{builder-content-4TTGQUUJ.mjs → builder-content-RQZGNHGE.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-2Y3J2R5O.mjs';
-import { BuildContainer } from './chunk-SLA7GUFF.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-JDY3WVEQ.mjs';
+import { BuildContainer } from './chunk-YM22QCRZ.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{chunk-IY3JM23H.js → chunk-GQ2NJQNP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLLKCXOGO_js = require('./chunk-LLKCXOGO.js');
+var chunkSMX2JVU7_js = require('./chunk-SMX2JVU7.js');
 var React = require('react');
 
 function _interopNamespace(e) {
@@ -25,7 +25,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var StaticContent = (props) => {
   return /* @__PURE__ */ React__namespace.createElement(
-    chunkLLKCXOGO_js.BuildContainer,
+    chunkSMX2JVU7_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-PZYB2ILV.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-BGBWMI6B.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-2Y3J2R5O.mjs → chunk-JDY3WVEQ.mjs}

@@ -1,4 +1,4 @@
-import { tv, builder, insertAt } from './chunk-SLA7GUFF.mjs';
+import { tv, builder, insertAt } from './chunk-YM22QCRZ.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 

package/dist/{chunk-J6SSP2IE.mjs → chunk-KD2J6VPO.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-SLA7GUFF.mjs';
+import { BuildContainer } from './chunk-YM22QCRZ.mjs';
 import * as React from 'react';
 import { lazy } from 'react';
 
@@ -15,6 +15,6 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = lazy(() => import('./builder-content-4TTGQUUJ.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-RQZGNHGE.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-N6DUKS7Z.js → chunk-Q2EMWEEZ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLLKCXOGO_js = require('./chunk-LLKCXOGO.js');
+var chunkSMX2JVU7_js = require('./chunk-SMX2JVU7.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 
@@ -56,7 +56,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkLLKCXOGO_js.builder.getComponent(name);
+      const component = chunkSMX2JVU7_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -78,7 +78,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunkLLKCXOGO_js.insertAt(content2, index, entry));
+        setContent((content2) => chunkSMX2JVU7_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -88,7 +88,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkLLKCXOGO_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunkSMX2JVU7_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -216,7 +216,7 @@ var findRecursive = (items, predicate, key = "content") => {
     }
   }
 };
-var buttonVariants = chunkLLKCXOGO_js.tv({
+var buttonVariants = chunkSMX2JVU7_js.tv({
   base: "sb-inline-flex sb-uppercase sb-font-roboto sb-items-center sb-justify-center sb-whitespace-nowrap sb-rounded-md sb-text-xs sb-font-semibold ring-offset-background sb-transition-colors focus-visible:sb-outline-none focus-visible:sb-ring-2 focus-visible:ring-ring focus-visible:sb-ring-offset-2 disabled:sb-pointer-events-none disabled:sb-opacity-50",
   variants: {
     variant: {

package/dist/{chunk-LLKCXOGO.js → chunk-SMX2JVU7.js}

@@ -88,15 +88,31 @@ var insertAt = (items, index, item) => {
 
 // src/components/design-wrapper.tsx
 var DesignWrapper = (props) => {
-  const { children, className } = 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, "");
-  return /* @__PURE__ */ React3__namespace.createElement("div", { id, className: cn("sb-relative", className) }, src && /* @__PURE__ */ React3__namespace.createElement(
+  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__namespace.createElement("div", { id, className: cn("sb-relative", className, hiddenClass) }, src && /* @__PURE__ */ React3__namespace.createElement(
     Image,
     {
       src,
@@ -117,7 +133,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-RGQQTCKG.js')
+  () => import('./build-container-client-VLVAC2RM.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-SLA7GUFF.mjs → chunk-YM22QCRZ.mjs}

@@ -64,15 +64,31 @@ var insertAt = (items, index, item) => {
 
 // src/components/design-wrapper.tsx
 var DesignWrapper = (props) => {
-  const { children, className } = 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, "");
-  return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb-relative", className) }, src && /* @__PURE__ */ React3.createElement(
+  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,
@@ -93,7 +109,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-LY4RX272.mjs')
+  () => import('./build-container-client-EGUVIJQE.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/index.css

@@ -752,6 +752,9 @@
 .sb-opacity-0 {
   opacity: 0;
 }
+.sb-opacity-30 {
+  opacity: 0.3;
+}
 .sb-opacity-50 {
   opacity: 0.5;
 }
@@ -1211,6 +1214,14 @@
 .data-\[state\=open\]\:sb-slide-in-from-top-\[48\%\][data-state=open] {
   --tw-enter-translate-y: -48%;
 }
+@media not all and (min-width: 768px) {
+  .max-md\:sb-hidden {
+    display: none;
+  }
+  .max-md\:sb-opacity-30 {
+    opacity: 0.3;
+  }
+}
 @media (min-width: 640px) {
   .sm\:sb-mt-0 {
     margin-top: 0px;
@@ -1243,6 +1254,14 @@
     text-align: left;
   }
 }
+@media (min-width: 768px) {
+  .md\:sb-hidden {
+    display: none;
+  }
+  .md\:sb-opacity-30 {
+    opacity: 0.3;
+  }
+}
 .\[\&\:has\(\>\.day-range-end\)\]\:sb-rounded-r-md:has(> .day-range-end) {
   border-top-right-radius: calc(var(--sb-radius) - 2px);
   border-bottom-right-radius: calc(var(--sb-radius) - 2px);

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkIY3JM23H_js = require('./chunk-IY3JM23H.js');
-var chunkLLKCXOGO_js = require('./chunk-LLKCXOGO.js');
+var chunkGQ2NJQNP_js = require('./chunk-GQ2NJQNP.js');
+var chunkSMX2JVU7_js = require('./chunk-SMX2JVU7.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkIY3JM23H_js.BuilderContent; }
+  get: function () { return chunkGQ2NJQNP_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkIY3JM23H_js.StaticContent; }
+  get: function () { return chunkGQ2NJQNP_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkLLKCXOGO_js.BuildContainer; }
+  get: function () { return chunkSMX2JVU7_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkLLKCXOGO_js.builder; }
+  get: function () { return chunkSMX2JVU7_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-J6SSP2IE.mjs';
-export { BuildContainer, builder } from './chunk-SLA7GUFF.mjs';
+export { BuilderContent, StaticContent } from './chunk-KD2J6VPO.mjs';
+export { BuildContainer, builder } from './chunk-YM22QCRZ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -46,7 +46,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.20"
+    "@simple-builder/server": "1.0.21"
   },
   "peerDependencies": {
     "react": ">=16.8.0",