@simple-builder/react 1.3.8 → 1.4.0

package/dist/{build-container-client-5QC5KVS3.mjs → build-container-client-LMZUWEUI.mjs}

@@ -1,18 +1,7 @@
 'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-'use client';
-import './chunk-XSG7W73Z.mjs';
-import { buttonVariants, Button, useBuilder } from './chunk-CJGHP5Q7.mjs';
-import { cn, tv, DesignWrapper, builder, Image } from './chunk-B5R6QY7N.mjs';
+import './chunk-UA2CNH3R.mjs';
+import { buttonVariants, Button, useBuilder } from './chunk-MXIMMIPT.mjs';
+import { cn, tv, DesignWrapper, builder, Image } from './chunk-ZQBKKI2S.mjs';
 import * as React25 from 'react';
 import { useCallback } from 'react';
 import { ChevronRight, Check, Circle, X, ChevronDown, ChevronUp, PlusIcon, ArrowUp, ArrowDown, Edit2Icon, Trash2Icon, ImageIcon, XIcon, PlusCircleIcon, CalendarIcon, MonitorIcon, SmartphoneIcon, ChevronLeftIcon, ChevronRightIcon, PaintbrushIcon, Loader2Icon, AlignHorizontalSpaceAroundIcon, AlignHorizontalJustifyStartIcon, ScanIcon } from 'lucide-react';
@@ -1174,11 +1163,26 @@ var ColorPicker = (props) => {
     }
   ))));
 };
+var IMAGE_FILE_ACCEPT = ".png,.jpg,.jpeg,.webp,.gif,.svg";
+var MEDIA_FILE_ACCEPT = `${IMAGE_FILE_ACCEPT},.mp4,.webm,.mov,.ogg,.ogv,.m4v,video/*`;
+var VIDEO_EXTENSIONS = [".mp4", ".webm", ".mov", ".ogg", ".ogv", ".m4v"];
+var isVideoUrl = (src) => {
+  const path = src.split("?")[0].split("#")[0].toLowerCase();
+  return VIDEO_EXTENSIONS.some((ext) => path.endsWith(ext));
+};
+var isVideoFile = (file) => file.type.startsWith("video/") || isVideoUrl(file.name);
 var MediaInput = (props) => {
-  const { onFilesChange, limit = 32, multiple = false, onError } = props;
+  const {
+    onFilesChange,
+    limit = 32,
+    multiple = false,
+    onError,
+    accept = MEDIA_FILE_ACCEPT
+  } = props;
   const id = React25.useId();
   const [queue, setQueue] = React25.useState([]);
   const [sources, setSources] = React25.useState(props.files ?? []);
+  const [videoUrls, setVideoUrls] = React25.useState({});
   const maxConcurrentUploads = 3;
   const uploadingCountRef = React25.useRef(0);
   const handleFilesAdd = async (e) => {
@@ -1228,6 +1232,9 @@ var MediaInput = (props) => {
           );
           continue;
         }
+        if (isVideoFile(file)) {
+          setVideoUrls((prev) => ({ ...prev, [url]: true }));
+        }
         setSources((prev) => [...prev, url]);
         onFilesChange?.([...sources, url]);
       } catch (e2) {
@@ -1252,12 +1259,10 @@ var MediaInput = (props) => {
     });
   };
   return /* @__PURE__ */ React25.createElement("div", { className: cn("flex flex-wrap gap-4", props.className) }, sources.map((src) => /* @__PURE__ */ React25.createElement(MediaInputItem, { key: src, className: cn("group", props.itemClassName) }, /* @__PURE__ */ React25.createElement(
-    Image,
+    MediaPreview,
     {
       src,
-      alt: "",
-      fill: true,
-      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none"
+      isVideo: !!videoUrls[src] || isVideoUrl(src)
     }
   ), /* @__PURE__ */ React25.createElement("div", { className: "sb:absolute sb:right-1 sb:top-1 sb:z-30 sb:flex sb:items-center sb:justify-end sb:gap-3 sb:opacity-0 sb:transition-opacity sb:group-hover:opacity-100" }, /* @__PURE__ */ React25.createElement(
     "button",
@@ -1293,7 +1298,7 @@ var MediaInput = (props) => {
         type: "file",
         onChange: handleFilesAdd,
         multiple,
-        accept: ".png,.jpg,.jpeg,.webp,.gif,.svg",
+        accept,
         className: "sb:hidden"
       }
     )
@@ -1311,6 +1316,33 @@ var MediaInputItem = (props) => {
     props.children
   );
 };
+var MediaPreview = (props) => {
+  const [kind, setKind] = React25.useState(
+    props.isVideo ? "video" : "image"
+  );
+  if (kind === "video") {
+    return /* @__PURE__ */ React25.createElement(
+      "video",
+      {
+        src: props.src,
+        muted: true,
+        playsInline: true,
+        preload: "metadata",
+        className: "sb:absolute sb:inset-0 sb:h-full sb:w-full sb:object-cover sb:pointer-events-none"
+      }
+    );
+  }
+  return /* @__PURE__ */ React25.createElement(
+    Image,
+    {
+      src: props.src,
+      alt: "",
+      fill: true,
+      className: "sb:absolute sb:inset-0 sb:object-cover sb:pointer-events-none",
+      onError: () => setKind("video")
+    }
+  );
+};
 var MediaInputError = class extends Error {
   title;
   description;
@@ -1782,6 +1814,7 @@ var BackgroundPicker = (props) => {
       className: "sb:grid sb:grid-cols-2 sb:gap-1",
       itemClassName: "sb:aspect-video sb:h-auto sb:w-full",
       multiple: false,
+      accept: IMAGE_FILE_ACCEPT,
       onFilesChange: (files) => {
         if (!files.length)
           return;

package/dist/{builder-content-4ZNXUE7D.mjs → builder-content-OR2VTIUY.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-XLE7GSYM.mjs';
-import { BuildContainer } from './chunk-6GCUWI4L.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-MXIMMIPT.mjs';
+import { BuildContainer } from './chunk-ZQBKKI2S.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{builder-content-2MA6BKJ5.js → builder-content-XNIM2YVG.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkMBISMJDL_js = require('./chunk-MBISMJDL.js');
-var chunkIQX5LONG_js = require('./chunk-IQX5LONG.js');
+var chunk4SFXTFFU_js = require('./chunk-4SFXTFFU.js');
+var chunkYFRFNRKR_js = require('./chunk-YFRFNRKR.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 } = chunkMBISMJDL_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(chunkMBISMJDL_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunk4SFXTFFU_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(chunk4SFXTFFU_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkMBISMJDL_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunk4SFXTFFU_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkMBISMJDL_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkIQX5LONG_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunk4SFXTFFU_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkYFRFNRKR_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{chunk-EVMN5SX2.js → chunk-4SFXTFFU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkXZNO7DXS_js = require('./chunk-XZNO7DXS.js');
+var chunkYFRFNRKR_js = require('./chunk-YFRFNRKR.js');
 var React = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
@@ -57,7 +57,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkXZNO7DXS_js.builder.getComponent(name);
+      const component = chunkYFRFNRKR_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -79,7 +79,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunkXZNO7DXS_js.insertAt(content2, index, entry));
+        setContent((content2) => chunkYFRFNRKR_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -89,7 +89,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkXZNO7DXS_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunkYFRFNRKR_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -254,7 +254,7 @@ var Button = React__namespace.forwardRef(
     return /* @__PURE__ */ React__namespace.createElement(
       Comp,
       {
-        className: chunkXZNO7DXS_js.cn(buttonVariants({ variant, size, className })),
+        className: chunkYFRFNRKR_js.cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
       }

package/dist/{chunk-4TVSMCQU.js → chunk-7I4RGF45.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIQX5LONG_js = require('./chunk-IQX5LONG.js');
+var chunkYFRFNRKR_js = require('./chunk-YFRFNRKR.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(
-    chunkIQX5LONG_js.BuildContainer,
+    chunkYFRFNRKR_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-2MA6BKJ5.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-XNIM2YVG.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-5OV6KPTF.mjs → chunk-MXIMMIPT.mjs}

@@ -1,4 +1,4 @@
-import { cn, builder, insertAt } from './chunk-TQQ4WVQU.mjs';
+import { cn, builder, insertAt } from './chunk-ZQBKKI2S.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';

package/dist/{chunk-5Q4KJW4A.mjs → chunk-UA2CNH3R.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-ZZT7HGAM.mjs';
+import { BuildContainer } from './chunk-ZQBKKI2S.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-PWV6LNFT.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-OR2VTIUY.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-2CPAROZB.js → chunk-YFRFNRKR.js}

@@ -133,7 +133,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-NXIMV3RF.js')
+  () => import('./build-container-client-EQBL556Y.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/{chunk-B5R6QY7N.mjs → chunk-ZQBKKI2S.mjs}

@@ -109,7 +109,7 @@ var DesignWrapper = (props) => {
       `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-5QC5KVS3.mjs')
+  () => import('./build-container-client-LMZUWEUI.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;

package/dist/index.css

@@ -543,9 +543,6 @@
   .sb\:w-px {
     width: 1px;
   }
-  .sb\:w-screen {
-    width: 100vw;
-  }
   .sb\:max-w-3xl {
     max-width: var(--sb-container-3xl);
   }

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -37,17 +36,12 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare class Builder {
-    private static instance;
-    private components;
-    private constructor();
-    static getInstance(): Builder;
-    register(component: Component["component"], config: Omit<Component, "component">): void;
-    getComponents(): Component[];
-    getComponent(name: string): Component | undefined;
-    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
-}
-declare const builder: Builder;
+declare const builder: {
+    register: (component: any, config: Omit<Component, "component">) => void;
+    getComponents: () => Component[];
+    getComponent: (name: string) => Component | undefined;
+    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
+};
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -37,17 +36,12 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare class Builder {
-    private static instance;
-    private components;
-    private constructor();
-    static getInstance(): Builder;
-    register(component: Component["component"], config: Omit<Component, "component">): void;
-    getComponents(): Component[];
-    getComponent(name: string): Component | undefined;
-    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
-}
-declare const builder: Builder;
+declare const builder: {
+    register: (component: any, config: Omit<Component, "component">) => void;
+    getComponents: () => Component[];
+    getComponent: (name: string) => Component | undefined;
+    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
+};
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkNZ4ZQMIS_js = require('./chunk-NZ4ZQMIS.js');
-var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
+var chunk7I4RGF45_js = require('./chunk-7I4RGF45.js');
+var chunkYFRFNRKR_js = require('./chunk-YFRFNRKR.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkNZ4ZQMIS_js.BuilderContent; }
+  get: function () { return chunk7I4RGF45_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkNZ4ZQMIS_js.StaticContent; }
+  get: function () { return chunk7I4RGF45_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkNUDE6YTK_js.BuildContainer; }
+  get: function () { return chunkYFRFNRKR_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkNUDE6YTK_js.builder; }
+  get: function () { return chunkYFRFNRKR_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-F5JWY4CM.mjs';
-export { BuildContainer, builder } from './chunk-6GCUWI4L.mjs';
+export { BuilderContent, StaticContent } from './chunk-UA2CNH3R.mjs';
+export { BuildContainer, builder } from './chunk-ZQBKKI2S.mjs';

package/package.json

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