@simple-builder/react 1.0.9 → 1.0.11

package/dist/{builder-content-SSON3UB4.js → builder-content-FHSGBL2M.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkYGI2WZVP_js = require('./chunk-YGI2WZVP.js');
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkGXNKJBJA_js = require('./chunk-GXNKJBJA.js');
+var chunkB4NNVFW6_js = require('./chunk-B4NNVFW6.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 } = chunkYGI2WZVP_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(chunkYGI2WZVP_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkGXNKJBJA_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(chunkGXNKJBJA_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkYGI2WZVP_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkGXNKJBJA_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkYGI2WZVP_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkECJUPPTG_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkGXNKJBJA_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkB4NNVFW6_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{builder-content-XM6XI2VA.css → builder-content-N7Z4YJMT.css}

@@ -186,6 +186,9 @@
 .sb-right-1 {
   right: 0.25rem;
 }
+.sb-right-2 {
+  right: 0.5rem;
+}
 .sb-right-3 {
   right: 0.75rem;
 }
@@ -198,6 +201,9 @@
 .sb-top-1\/2 {
   top: 50%;
 }
+.sb-top-2 {
+  top: 0.5rem;
+}
 .sb-top-\[50\%\] {
   top: 50%;
 }
@@ -254,6 +260,12 @@
 .sb-h-11 {
   height: 2.75rem;
 }
+.sb-h-2 {
+  height: 0.5rem;
+}
+.sb-h-2\.5 {
+  height: 0.625rem;
+}
 .sb-h-28 {
   height: 7rem;
 }
@@ -278,12 +290,24 @@
 .sb-h-auto {
   height: auto;
 }
+.sb-h-full {
+  height: 100%;
+}
+.sb-max-h-\[80vh\] {
+  max-height: 80vh;
+}
 .sb-min-h-\[60px\] {
   min-height: 60px;
 }
 .sb-w-11 {
   width: 2.75rem;
 }
+.sb-w-2 {
+  width: 0.5rem;
+}
+.sb-w-2\.5 {
+  width: 0.625rem;
+}
 .sb-w-28 {
   width: 7rem;
 }
@@ -308,6 +332,9 @@
 .sb-w-8 {
   width: 2rem;
 }
+.sb-w-\[89\%\] {
+  width: 89%;
+}
 .sb-w-auto {
   width: auto;
 }
@@ -365,6 +392,14 @@
 .sb-cursor-pointer {
   cursor: pointer;
 }
+.sb-touch-none {
+  touch-action: none;
+}
+.sb-select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 .sb-grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -457,6 +492,9 @@
 .sb-rounded {
   border-radius: 0.25rem;
 }
+.sb-rounded-\[inherit\] {
+  border-radius: inherit;
+}
 .sb-rounded-full {
   border-radius: 9999px;
 }
@@ -481,12 +519,27 @@
 .sb-border-b-2 {
   border-bottom-width: 2px;
 }
+.sb-border-l {
+  border-left-width: 1px;
+}
+.sb-border-t {
+  border-top-width: 1px;
+}
+.sb-border-dashed {
+  border-style: dashed;
+}
 .sb-border-input {
   border-color: hsl(var(--sb-input));
 }
 .sb-border-transparent {
   border-color: transparent;
 }
+.sb-border-l-transparent {
+  border-left-color: transparent;
+}
+.sb-border-t-transparent {
+  border-top-color: transparent;
+}
 .sb-bg-accent {
   background-color: hsl(var(--sb-accent));
 }
@@ -496,6 +549,9 @@
 .sb-bg-background\/80 {
   background-color: hsl(var(--sb-background) / 0.8);
 }
+.sb-bg-border {
+  background-color: hsl(var(--sb-border));
+}
 .sb-bg-card {
   background-color: hsl(var(--sb-card));
 }
@@ -554,6 +610,9 @@
 .sb-p-6 {
   padding: 1.5rem;
 }
+.sb-p-\[1px\] {
+  padding: 1px;
+}
 .sb-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -656,6 +715,9 @@
 .sb-text-destructive-foreground {
   color: hsl(var(--sb-destructive-foreground));
 }
+.sb-text-foreground\/70 {
+  color: hsl(var(--sb-foreground) / 0.7);
+}
 .sb-text-muted-foreground {
   color: hsl(var(--sb-muted-foreground));
 }
@@ -901,6 +963,9 @@
 .hover\:sb-text-accent-foreground:hover {
   color: hsl(var(--sb-accent-foreground));
 }
+.hover\:sb-text-foreground:hover {
+  color: hsl(var(--sb-foreground));
+}
 .hover\:sb-text-muted-foreground:hover {
   color: hsl(var(--sb-muted-foreground));
 }

package/dist/{builder-content-DNX5TNK2.mjs → builder-content-S6T7RZEC.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-2GQCSML3.mjs';
-import { BuildContainer } from './chunk-OCMLPCSW.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-ADR6VCSK.mjs';
+import { BuildContainer } from './chunk-44UFVNJG.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{chunk-OCMLPCSW.mjs → chunk-44UFVNJG.mjs}

@@ -79,7 +79,7 @@ var DesignWrapper = (props) => {
       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, /* @__PURE__ */ React3.createElement("style", null, `
+  ), container ? /* @__PURE__ */ React3.createElement("div", { className: "sb-container sb-mx-auto sb-px-4" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
         #${id} {
           ${Object.entries(props.styles?.desktop ?? {}).map(([key, value]) => `${key}: ${value};`).join(" ")}
         }
@@ -92,7 +92,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-BOFDDL56.mjs')
+  () => import('./build-container-client-N3S3PJV6.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-2GQCSML3.mjs → chunk-ADR6VCSK.mjs}

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

package/dist/{chunk-ECJUPPTG.js → chunk-B4NNVFW6.js}

@@ -103,7 +103,7 @@ var DesignWrapper = (props) => {
       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, /* @__PURE__ */ React3__namespace.createElement("style", null, `
+  ), container ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "sb-container sb-mx-auto sb-px-4" }, children) : children, /* @__PURE__ */ React3__namespace.createElement("style", null, `
         #${id} {
           ${Object.entries(props.styles?.desktop ?? {}).map(([key, value]) => `${key}: ${value};`).join(" ")}
         }
@@ -116,7 +116,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-PB2K64X3.js')
+  () => import('./build-container-client-QWYPV2WG.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-YGI2WZVP.js → chunk-GXNKJBJA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkB4NNVFW6_js = require('./chunk-B4NNVFW6.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 = chunkECJUPPTG_js.builder.getComponent(name);
+      const component = chunkB4NNVFW6_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) => chunkECJUPPTG_js.insertAt(content2, index, entry));
+        setContent((content2) => chunkB4NNVFW6_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -88,7 +88,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkECJUPPTG_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunkB4NNVFW6_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -216,7 +216,7 @@ var findRecursive = (items, predicate, key = "content") => {
     }
   }
 };
-var buttonVariants = chunkECJUPPTG_js.tv({
+var buttonVariants = chunkB4NNVFW6_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-LULPEBSO.mjs → chunk-QCZCJQPC.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-OCMLPCSW.mjs';
+import { BuildContainer } from './chunk-44UFVNJG.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-DNX5TNK2.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-S6T7RZEC.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-VFH3LVDU.js → chunk-T4HKIDFE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkB4NNVFW6_js = require('./chunk-B4NNVFW6.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(
-    chunkECJUPPTG_js.BuildContainer,
+    chunkB4NNVFW6_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-SSON3UB4.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-FHSGBL2M.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/index.css

@@ -186,6 +186,9 @@
 .sb-right-1 {
   right: 0.25rem;
 }
+.sb-right-2 {
+  right: 0.5rem;
+}
 .sb-right-3 {
   right: 0.75rem;
 }
@@ -198,6 +201,9 @@
 .sb-top-1\/2 {
   top: 50%;
 }
+.sb-top-2 {
+  top: 0.5rem;
+}
 .sb-top-\[50\%\] {
   top: 50%;
 }
@@ -254,6 +260,12 @@
 .sb-h-11 {
   height: 2.75rem;
 }
+.sb-h-2 {
+  height: 0.5rem;
+}
+.sb-h-2\.5 {
+  height: 0.625rem;
+}
 .sb-h-28 {
   height: 7rem;
 }
@@ -278,12 +290,24 @@
 .sb-h-auto {
   height: auto;
 }
+.sb-h-full {
+  height: 100%;
+}
+.sb-max-h-\[80vh\] {
+  max-height: 80vh;
+}
 .sb-min-h-\[60px\] {
   min-height: 60px;
 }
 .sb-w-11 {
   width: 2.75rem;
 }
+.sb-w-2 {
+  width: 0.5rem;
+}
+.sb-w-2\.5 {
+  width: 0.625rem;
+}
 .sb-w-28 {
   width: 7rem;
 }
@@ -308,6 +332,9 @@
 .sb-w-8 {
   width: 2rem;
 }
+.sb-w-\[89\%\] {
+  width: 89%;
+}
 .sb-w-auto {
   width: auto;
 }
@@ -365,6 +392,14 @@
 .sb-cursor-pointer {
   cursor: pointer;
 }
+.sb-touch-none {
+  touch-action: none;
+}
+.sb-select-none {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
 .sb-grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -457,6 +492,9 @@
 .sb-rounded {
   border-radius: 0.25rem;
 }
+.sb-rounded-\[inherit\] {
+  border-radius: inherit;
+}
 .sb-rounded-full {
   border-radius: 9999px;
 }
@@ -481,12 +519,27 @@
 .sb-border-b-2 {
   border-bottom-width: 2px;
 }
+.sb-border-l {
+  border-left-width: 1px;
+}
+.sb-border-t {
+  border-top-width: 1px;
+}
+.sb-border-dashed {
+  border-style: dashed;
+}
 .sb-border-input {
   border-color: hsl(var(--sb-input));
 }
 .sb-border-transparent {
   border-color: transparent;
 }
+.sb-border-l-transparent {
+  border-left-color: transparent;
+}
+.sb-border-t-transparent {
+  border-top-color: transparent;
+}
 .sb-bg-accent {
   background-color: hsl(var(--sb-accent));
 }
@@ -496,6 +549,9 @@
 .sb-bg-background\/80 {
   background-color: hsl(var(--sb-background) / 0.8);
 }
+.sb-bg-border {
+  background-color: hsl(var(--sb-border));
+}
 .sb-bg-card {
   background-color: hsl(var(--sb-card));
 }
@@ -554,6 +610,9 @@
 .sb-p-6 {
   padding: 1.5rem;
 }
+.sb-p-\[1px\] {
+  padding: 1px;
+}
 .sb-px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -656,6 +715,9 @@
 .sb-text-destructive-foreground {
   color: hsl(var(--sb-destructive-foreground));
 }
+.sb-text-foreground\/70 {
+  color: hsl(var(--sb-foreground) / 0.7);
+}
 .sb-text-muted-foreground {
   color: hsl(var(--sb-muted-foreground));
 }
@@ -901,6 +963,9 @@
 .hover\:sb-text-accent-foreground:hover {
   color: hsl(var(--sb-accent-foreground));
 }
+.hover\:sb-text-foreground:hover {
+  color: hsl(var(--sb-foreground));
+}
 .hover\:sb-text-muted-foreground:hover {
   color: hsl(var(--sb-muted-foreground));
 }

package/dist/index.d.mts

@@ -2,18 +2,21 @@ import * as React from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
-type InputType = "string" | "number" | "boolean" | "longText" | "richText" | "file" | "color" | "date";
+type InputType = "string" | "number" | "boolean" | "longText" | "richText" | "file" | "color" | "date" | "grouped";
 type ComponentInput<T extends InputType> = {
     type: T;
     name: string;
     friendlyName?: string;
     helperText?: string;
     defaultValue?: any;
+    multiple?: boolean;
 } & (T extends "string" ? {
     enum?: string[] | {
         label: string;
         value: any;
     };
+} : {}) & (T extends "grouped" ? {
+    inputs: ComponentInput<any>[];
 } : {});
 type Component = {
     component: (props?: any) => JSX.Element;
@@ -21,7 +24,7 @@ type Component = {
     friendlyName?: string;
     icon?: any;
     description?: string;
-    inputs?: ComponentInput<any>[];
+    inputs?: ComponentInput<InputType>[];
     defaults?: Record<string, unknown>;
     defaultStyles?: ContentItem["styles"];
 };

package/dist/index.d.ts

@@ -2,18 +2,21 @@ import * as React from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
-type InputType = "string" | "number" | "boolean" | "longText" | "richText" | "file" | "color" | "date";
+type InputType = "string" | "number" | "boolean" | "longText" | "richText" | "file" | "color" | "date" | "grouped";
 type ComponentInput<T extends InputType> = {
     type: T;
     name: string;
     friendlyName?: string;
     helperText?: string;
     defaultValue?: any;
+    multiple?: boolean;
 } & (T extends "string" ? {
     enum?: string[] | {
         label: string;
         value: any;
     };
+} : {}) & (T extends "grouped" ? {
+    inputs: ComponentInput<any>[];
 } : {});
 type Component = {
     component: (props?: any) => JSX.Element;
@@ -21,7 +24,7 @@ type Component = {
     friendlyName?: string;
     icon?: any;
     description?: string;
-    inputs?: ComponentInput<any>[];
+    inputs?: ComponentInput<InputType>[];
     defaults?: Record<string, unknown>;
     defaultStyles?: ContentItem["styles"];
 };

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkVFH3LVDU_js = require('./chunk-VFH3LVDU.js');
-var chunkECJUPPTG_js = require('./chunk-ECJUPPTG.js');
+var chunkT4HKIDFE_js = require('./chunk-T4HKIDFE.js');
+var chunkB4NNVFW6_js = require('./chunk-B4NNVFW6.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkVFH3LVDU_js.BuilderContent; }
+  get: function () { return chunkT4HKIDFE_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkVFH3LVDU_js.StaticContent; }
+  get: function () { return chunkT4HKIDFE_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkECJUPPTG_js.BuildContainer; }
+  get: function () { return chunkB4NNVFW6_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkECJUPPTG_js.builder; }
+  get: function () { return chunkB4NNVFW6_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-LULPEBSO.mjs';
-export { BuildContainer, builder } from './chunk-OCMLPCSW.mjs';
+export { BuilderContent, StaticContent } from './chunk-QCZCJQPC.mjs';
+export { BuildContainer, builder } from './chunk-44UFVNJG.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -31,6 +31,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
@@ -44,7 +45,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.9"
+    "@simple-builder/server": "1.0.11"
   },
   "peerDependencies": {
     "react": ">=16.8.0",