@simple-builder/react 1.0.9 → 1.0.11

package/dist/{build-container-client-2WP7AN5U.css → build-container-client-MHISDNJL.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/{build-container-client-BOFDDL56.mjs → build-container-client-N3S3PJV6.mjs}

@@ -1,13 +1,13 @@
 'use client';
-import './chunk-LULPEBSO.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-2GQCSML3.mjs';
-import { cn, tv, DesignWrapper, builder, Image } from './chunk-OCMLPCSW.mjs';
+import './chunk-QCZCJQPC.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-ADR6VCSK.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-44UFVNJG.mjs';
 import * as React11 from 'react';
-import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
+import { PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { format } from 'date-fns';
-import { useFormContext, useForm, FormProvider, Controller } from 'react-hook-form';
+import { useFormContext, useForm, useFieldArray, FormProvider, Controller } from 'react-hook-form';
 import { DayPicker } from 'react-day-picker';
 import { Slot } from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -16,6 +16,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
@@ -558,30 +559,128 @@ var ContainerItemForm = (props) => {
     return () => subscription.unsubscribe();
   }, [form.watch, form.handleSubmit]);
   return /* @__PURE__ */ React11.createElement(Form, { ...form }, /* @__PURE__ */ React11.createElement("form", { onSubmit: form.handleSubmit(onSubmit) }, /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4 sb-p-4" }, (component.inputs || []).map((input) => /* @__PURE__ */ React11.createElement(
-    FormField,
+    RenderFormField,
     {
       key: input.name,
-      control: form.control,
-      name: input.name,
-      render: ({ field }) => /* @__PURE__ */ React11.createElement(RenderInput, { type: input.type, input, field })
+      type: input.type,
+      input,
+      form
     }
   )))));
 };
+var RenderFormField = (props) => {
+  const { type, input, form } = props;
+  const fieldArray = useFieldArray({
+    control: form.control,
+    name: input.name
+  });
+  if (input.multiple) {
+    return /* @__PURE__ */ React11.createElement("fieldset", { className: "sb-space-y-2" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-4" }, fieldArray.fields.map(
+      (field, i) => type !== "grouped" ? /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: field.id,
+          control: form.control,
+          name: `${input.name}.${i}`,
+          render: ({ field: field2 }) => /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-gap-3" }, /* @__PURE__ */ React11.createElement(RenderInput, { field: field2, type: input.type }), /* @__PURE__ */ React11.createElement("button", { type: "button", onClick: () => fieldArray.remove(i) }, /* @__PURE__ */ React11.createElement(XIcon, { className: "sb-h-4 sb-w-4" })))
+        }
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "sb-flex sb-items-center sb-relative" }, /* @__PURE__ */ React11.createElement(
+        RenderFormField,
+        {
+          key: field.id,
+          form,
+          type,
+          input: {
+            ...input,
+            name: `${input.name}.${i}`,
+            multiple: false,
+            friendlyName: ""
+          }
+        }
+      ), /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => fieldArray.remove(i),
+          className: "sb-absolute sb-top-2 sb-right-2 sb-text-foreground/70 hover:sb-text-foreground"
+        },
+        /* @__PURE__ */ React11.createElement(XIcon, { className: "sb-h-4 sb-w-4" })
+      ))
+    ), /* @__PURE__ */ React11.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        className: cn(
+          "sb-w-[89%] sb-border-2 sb-border-dashed sb-text-muted-foreground",
+          type === "grouped" && "sb-w-full"
+        ),
+        onClick: () => fieldArray.append(void 0)
+      },
+      /* @__PURE__ */ React11.createElement(PlusCircleIcon, { className: "sb-h-4 sb-w-4" })
+    )));
+  }
+  switch (type) {
+    case "string":
+    case "number":
+    case "longText":
+    case "richText":
+    case "color":
+    case "date":
+    case "file":
+      return /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ React11.createElement(
+        FormField,
+        {
+          key: input.name,
+          control: form.control,
+          name: input.name,
+          render: ({ field }) => /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(RenderInput, { type, field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null))
+        }
+      );
+    case "grouped":
+      return /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-w-full" }, input.friendlyName !== "" && /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement("div", { className: "sb-space-y-2 sb-p-3 sb-w-full sb-border sb-rounded-lg" }, input.inputs.map((sub) => /* @__PURE__ */ React11.createElement(
+        RenderFormField,
+        {
+          key: `${input.name}.${sub.name}`,
+          type: sub.type,
+          input: {
+            ...sub,
+            name: `${input.name}.${sub.name}`
+          },
+          form
+        }
+      ))));
+    default:
+      throw new Error(
+        `[simple-builder]: Input type "${props.type}" not supported in render form field.`
+      );
+  }
+};
 var RenderInput = (props) => {
-  const { type, input, field } = props;
+  const { type, field } = props;
   switch (type) {
     case "string":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { ...field });
     case "longText":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
     case "richText":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Textarea, { ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Textarea, { ...field });
     case "number":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Input, { type: "number", ...field });
     case "color":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(ColorPicker, { color: field.value, onColorChange: field.onChange });
     case "date":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(
         Button,
         {
           variant: "outline",
@@ -601,11 +700,11 @@ var RenderInput = (props) => {
           onSelect: field.onChange,
           initialFocus: true
         }
-      )))), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      )));
     case "boolean":
-      return /* @__PURE__ */ React11.createElement(FormItem, { className: "sb-flex sb-flex-row sb-items-center sb-justify-between sb-space-y-0" }, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange })), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      return /* @__PURE__ */ React11.createElement(Switch, { checked: field.value, onCheckedChange: field.onChange });
     case "file":
-      return /* @__PURE__ */ React11.createElement(FormItem, null, /* @__PURE__ */ React11.createElement(FormLabel, null, input.friendlyName || input.name), /* @__PURE__ */ React11.createElement(FormControl, null, /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React11.createElement(
         MediaInput,
         {
           className: "sb-grid sb-grid-cols-2 sb-gap-1",
@@ -617,10 +716,10 @@ var RenderInput = (props) => {
             "media-input: Error: " + e?.description
           )
         }
-      )), input.helperText && /* @__PURE__ */ React11.createElement(FormDescription, null, input.helperText), /* @__PURE__ */ React11.createElement(FormMessage, null));
+      );
     default:
       throw new Error(
-        `[simple-builder]: Input type "${props.type}" not supported`
+        `[simple-builder]: Input type "${props.type}" not supported in render input.`
       );
   }
 };
@@ -995,6 +1094,11 @@ var ItemDesignForm = (props) => {
         if (value === desktopValue || isDirty) {
           return acc;
         }
+        if (["padding", "margin"].includes(key)) {
+          if (value === "0px" && desktopValue === "0px") {
+            return acc;
+          }
+        }
         return {
           ...acc,
           ...value && { [key]: value }
@@ -1005,8 +1109,8 @@ var ItemDesignForm = (props) => {
     patchItem(item.id, {
       styles: {
         ...container === false && { container },
-        desktop: desktopPatch,
-        mobile: mobilePatch
+        ...Object.keys(desktopPatch).length && { desktop: desktopPatch },
+        ...Object.keys(mobilePatch).length && { mobile: mobilePatch }
       }
     });
   };
@@ -1093,6 +1197,34 @@ var ItemDesignForm = (props) => {
     }
   )))));
 };
+var ScrollArea = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    className: cn("sb-relative sb-overflow-hidden", className),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Viewport, { className: "sb-h-full sb-max-h-[80vh] sb-w-full sb-rounded-[inherit]" }, children),
+  /* @__PURE__ */ React11.createElement(ScrollBar, null),
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.Corner, null)
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React11.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React11.createElement(
+  ScrollAreaPrimitive.ScrollAreaScrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "sb-flex sb-touch-none sb-select-none sb-transition-colors",
+      orientation === "vertical" && "sb-h-full sb-w-2.5 sb-border-l sb-border-l-transparent sb-p-[1px]",
+      orientation === "horizontal" && "sb-h-2.5 sb-flex-col sb-border-t sb-border-t-transparent sb-p-[1px]",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React11.createElement(ScrollAreaPrimitive.ScrollAreaThumb, { className: "sb-relative sb-flex-1 sb-rounded-full sb-bg-border" })
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/container-item-toolbar.tsx
 var ContainerItemToolbar = (props) => {
@@ -1119,14 +1251,14 @@ var ContainerItemToolbar = (props) => {
   ), /* @__PURE__ */ React11.createElement(DeleteButton, { contentId })));
 };
 var EditButton = ({ id }) => {
-  return /* @__PURE__ */ React11.createElement(Popover, null, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement(Popover, { modal: true }, /* @__PURE__ */ React11.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React11.createElement(Button, { variant: "ghost", className: "sb-w-8 sb-h-8 sb-p-0" }, /* @__PURE__ */ React11.createElement(Edit2Icon, { className: "sb-h-5 sb-w-5" }))), /* @__PURE__ */ React11.createElement(
     PopoverContent,
     {
       side: "left",
       align: "start",
       sideOffset: 16,
       alignOffset: -8,
-      className: "sb-p-0",
+      className: "sb-p-0 sb-relative",
       collisionPadding: 16
     },
     /* @__PURE__ */ React11.createElement(EditPopoverInner, { id })
@@ -1141,7 +1273,7 @@ var EditPopoverInner = (props) => {
       `[simple-builder]: Item with id ${id} not found in container item form component`
     );
   }
-  return /* @__PURE__ */ React11.createElement(Tabs, null, /* @__PURE__ */ React11.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11.createElement(ContainerItemForm, { item })), /* @__PURE__ */ React11.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11.createElement(ItemDesignForm, { item })));
+  return /* @__PURE__ */ React11.createElement(Tabs, null, /* @__PURE__ */ React11.createElement(TabsList, { variant: "text", defaultValue: "content" }, /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "content" }, "Inhoud"), /* @__PURE__ */ React11.createElement(TabsTrigger, { variant: "text", value: "design" }, "Design")), /* @__PURE__ */ React11.createElement(TabsContent, { value: "content" }, /* @__PURE__ */ React11.createElement(ScrollArea, null, /* @__PURE__ */ React11.createElement(ContainerItemForm, { item }))), /* @__PURE__ */ React11.createElement(TabsContent, { value: "design" }, /* @__PURE__ */ React11.createElement(ItemDesignForm, { item })));
 };
 var DeleteButton = ({ contentId }) => {
   const { deleteContent } = useBuilder();