@simple-builder/react 1.3.9 → 1.4.0

package/dist/chunk-RNGHWAPZ.js

@@ -1,269 +0,0 @@
-'use strict';
-
-var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
-var React = require('react');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
-
-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 BuilderContext = React__namespace.createContext(
-  null
-);
-var BuilderProvider = (props) => {
-  const url = props.url ?? "/api/simple-builder";
-  const [content, setContent] = React__namespace.useState(
-    props.content ?? []
-  );
-  const getItem = React__namespace.useCallback(
-    (id) => {
-      return findRecursive(content, (item) => item.id === id);
-    },
-    [content]
-  );
-  const patchItem = React__namespace.useCallback(
-    (id, patch) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item) => {
-          if (item.id === id) {
-            return {
-              ...item,
-              ...patch
-            };
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const addContent = React__namespace.useCallback(
-    (name, container, parent, index = 0) => {
-      const component = chunkNUDE6YTK_js.builder.getComponent(name);
-      if (!component) {
-        throw new Error(`[simple-builder]: Component "${name}" not found`);
-      }
-      const entry = {
-        id: crypto.randomUUID(),
-        component: component.name,
-        ...parent && { parent },
-        ...component.inputs && {
-          props: component.inputs.reduce(
-            (acc, input) => ({
-              ...acc,
-              [input.name]: input.defaultValue
-            }),
-            {}
-          )
-        },
-        ...component.defaultStyles && {
-          styles: component.defaultStyles
-        }
-      };
-      if (!parent) {
-        setContent((content2) => chunkNUDE6YTK_js.insertAt(content2, index, entry));
-        return;
-      }
-      setContent(
-        (content2) => mapRecursive(content2, (item) => {
-          if (item.id === parent) {
-            return {
-              ...item,
-              content: {
-                ...item.content,
-                [container]: chunkNUDE6YTK_js.insertAt(item.content?.[container], index, entry)
-              }
-            };
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const deleteContent = React__namespace.useCallback(
-    (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
-    [setContent, filterRecursive]
-  );
-  const bringUp = React__namespace.useCallback(
-    (id) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item, index, arr) => {
-          if (item.id === id && index > 0) {
-            return arr[index - 1];
-          }
-          if (arr[index + 1]?.id === id) {
-            return arr[index + 1];
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const bringDown = React__namespace.useCallback(
-    (id) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item, index, arr) => {
-          if (item.id === id && index < arr.length - 1) {
-            return arr[index + 1];
-          }
-          if (arr[index - 1]?.id === id) {
-            return arr[index - 1];
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const save = React__namespace.useCallback(async () => {
-    const slug = window.location.pathname;
-    try {
-      await fetch(`${url}/page/update`, {
-        method: "POST",
-        body: JSON.stringify({
-          slug,
-          content
-        })
-      });
-      alert("Pagina opgeslagen!");
-    } catch (e) {
-      console.error("[simple-builder]: Failed to save content", e);
-      alert("Er is iets fout gegaan. Bekijk de console voor meer info.");
-    }
-  }, [content]);
-  return /* @__PURE__ */ React__namespace.createElement(
-    BuilderContext.Provider,
-    {
-      value: {
-        url,
-        content,
-        setContent,
-        getItem,
-        patchItem,
-        addContent,
-        bringUp,
-        bringDown,
-        deleteContent,
-        save
-      }
-    },
-    props.children
-  );
-};
-var useBuilder = () => {
-  const context = React__namespace.useContext(BuilderContext);
-  if (!context) {
-    throw new Error(
-      "[simple-builder]: useBuilder must be used within a BuilderProvider"
-    );
-  }
-  return context;
-};
-var filterRecursive = (items, predicate, key = "content") => {
-  return items.filter(predicate).map((item) => ({
-    ...item,
-    ...item[key] && {
-      [key]: Object.entries(item[key] ?? {}).reduce(
-        (acc, [name, content]) => ({
-          ...acc,
-          [name]: filterRecursive(content, predicate, key)
-        }),
-        {}
-      )
-    }
-  }));
-};
-var mapRecursive = (items, predicate, key = "content") => {
-  return items.map(predicate).map((item) => ({
-    ...item,
-    ...item[key] && {
-      [key]: Object.entries(item[key] ?? {}).reduce(
-        (acc, [name, content]) => ({
-          ...acc,
-          [name]: mapRecursive(content, predicate, key)
-        }),
-        {}
-      )
-    }
-  }));
-};
-var findRecursive = (items, predicate, key = "content") => {
-  for (const item of items) {
-    if (predicate(item)) {
-      return item;
-    }
-    if (item[key]) {
-      const keys = Object.keys(item[key] ?? {});
-      for (const x of keys) {
-        const found = findRecursive(item[key][x], predicate, key);
-        if (found) {
-          return found;
-        }
-      }
-    }
-  }
-};
-var buttonVariants = classVarianceAuthority.cva(
-  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:whitespace-nowrap sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "sb:bg-primary sb:text-primary-foreground sb:shadow sb:hover:bg-primary/90",
-        destructive: "sb:bg-destructive sb:text-destructive-foreground sb:shadow-sm sb:hover:bg-destructive/90",
-        outline: "sb:border sb:border-input sb:bg-background sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground",
-        secondary: "sb:bg-secondary sb:text-secondary-foreground sb:shadow-sm sb:hover:bg-secondary/80",
-        ghost: "sb:hover:bg-accent sb:hover:text-accent-foreground",
-        link: "sb:text-primary sb:underline-offset-4 sb:hover:underline"
-      },
-      size: {
-        default: "sb:h-9 sb:px-4 sb:py-2",
-        sm: "sb:h-8 sb:rounded-md sb:px-3 sb:text-xs",
-        lg: "sb:h-10 sb:rounded-md sb:px-8",
-        icon: "sb:h-9 sb:w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React__namespace.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? reactSlot.Slot : "button";
-    return /* @__PURE__ */ React__namespace.createElement(
-      Comp,
-      {
-        className: chunkNUDE6YTK_js.cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-exports.BuilderProvider = BuilderProvider;
-exports.Button = Button;
-exports.buttonVariants = buttonVariants;
-exports.useBuilder = useBuilder;

package/dist/chunk-RYW5OXNX.mjs

@@ -1,244 +0,0 @@
-import { cn, builder, insertAt } from './chunk-IJJTQQQN.mjs';
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-
-var BuilderContext = React.createContext(
-  null
-);
-var BuilderProvider = (props) => {
-  const url = props.url ?? "/api/simple-builder";
-  const [content, setContent] = React.useState(
-    props.content ?? []
-  );
-  const getItem = React.useCallback(
-    (id) => {
-      return findRecursive(content, (item) => item.id === id);
-    },
-    [content]
-  );
-  const patchItem = React.useCallback(
-    (id, patch) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item) => {
-          if (item.id === id) {
-            return {
-              ...item,
-              ...patch
-            };
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const addContent = React.useCallback(
-    (name, container, parent, index = 0) => {
-      const component = builder.getComponent(name);
-      if (!component) {
-        throw new Error(`[simple-builder]: Component "${name}" not found`);
-      }
-      const entry = {
-        id: crypto.randomUUID(),
-        component: component.name,
-        ...parent && { parent },
-        ...component.inputs && {
-          props: component.inputs.reduce(
-            (acc, input) => ({
-              ...acc,
-              [input.name]: input.defaultValue
-            }),
-            {}
-          )
-        },
-        ...component.defaultStyles && {
-          styles: component.defaultStyles
-        }
-      };
-      if (!parent) {
-        setContent((content2) => insertAt(content2, index, entry));
-        return;
-      }
-      setContent(
-        (content2) => mapRecursive(content2, (item) => {
-          if (item.id === parent) {
-            return {
-              ...item,
-              content: {
-                ...item.content,
-                [container]: insertAt(item.content?.[container], index, entry)
-              }
-            };
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const deleteContent = React.useCallback(
-    (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
-    [setContent, filterRecursive]
-  );
-  const bringUp = React.useCallback(
-    (id) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item, index, arr) => {
-          if (item.id === id && index > 0) {
-            return arr[index - 1];
-          }
-          if (arr[index + 1]?.id === id) {
-            return arr[index + 1];
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const bringDown = React.useCallback(
-    (id) => {
-      setContent(
-        (content2) => mapRecursive(content2, (item, index, arr) => {
-          if (item.id === id && index < arr.length - 1) {
-            return arr[index + 1];
-          }
-          if (arr[index - 1]?.id === id) {
-            return arr[index - 1];
-          }
-          return item;
-        })
-      );
-    },
-    [setContent, mapRecursive]
-  );
-  const save = React.useCallback(async () => {
-    const slug = window.location.pathname;
-    try {
-      await fetch(`${url}/page/update`, {
-        method: "POST",
-        body: JSON.stringify({
-          slug,
-          content
-        })
-      });
-      alert("Pagina opgeslagen!");
-    } catch (e) {
-      console.error("[simple-builder]: Failed to save content", e);
-      alert("Er is iets fout gegaan. Bekijk de console voor meer info.");
-    }
-  }, [content]);
-  return /* @__PURE__ */ React.createElement(
-    BuilderContext.Provider,
-    {
-      value: {
-        url,
-        content,
-        setContent,
-        getItem,
-        patchItem,
-        addContent,
-        bringUp,
-        bringDown,
-        deleteContent,
-        save
-      }
-    },
-    props.children
-  );
-};
-var useBuilder = () => {
-  const context = React.useContext(BuilderContext);
-  if (!context) {
-    throw new Error(
-      "[simple-builder]: useBuilder must be used within a BuilderProvider"
-    );
-  }
-  return context;
-};
-var filterRecursive = (items, predicate, key = "content") => {
-  return items.filter(predicate).map((item) => ({
-    ...item,
-    ...item[key] && {
-      [key]: Object.entries(item[key] ?? {}).reduce(
-        (acc, [name, content]) => ({
-          ...acc,
-          [name]: filterRecursive(content, predicate, key)
-        }),
-        {}
-      )
-    }
-  }));
-};
-var mapRecursive = (items, predicate, key = "content") => {
-  return items.map(predicate).map((item) => ({
-    ...item,
-    ...item[key] && {
-      [key]: Object.entries(item[key] ?? {}).reduce(
-        (acc, [name, content]) => ({
-          ...acc,
-          [name]: mapRecursive(content, predicate, key)
-        }),
-        {}
-      )
-    }
-  }));
-};
-var findRecursive = (items, predicate, key = "content") => {
-  for (const item of items) {
-    if (predicate(item)) {
-      return item;
-    }
-    if (item[key]) {
-      const keys = Object.keys(item[key] ?? {});
-      for (const x of keys) {
-        const found = findRecursive(item[key][x], predicate, key);
-        if (found) {
-          return found;
-        }
-      }
-    }
-  }
-};
-var buttonVariants = cva(
-  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:whitespace-nowrap sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "sb:bg-primary sb:text-primary-foreground sb:shadow sb:hover:bg-primary/90",
-        destructive: "sb:bg-destructive sb:text-destructive-foreground sb:shadow-sm sb:hover:bg-destructive/90",
-        outline: "sb:border sb:border-input sb:bg-background sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground",
-        secondary: "sb:bg-secondary sb:text-secondary-foreground sb:shadow-sm sb:hover:bg-secondary/80",
-        ghost: "sb:hover:bg-accent sb:hover:text-accent-foreground",
-        link: "sb:text-primary sb:underline-offset-4 sb:hover:underline"
-      },
-      size: {
-        default: "sb:h-9 sb:px-4 sb:py-2",
-        sm: "sb:h-8 sb:rounded-md sb:px-3 sb:text-xs",
-        lg: "sb:h-10 sb:rounded-md sb:px-8",
-        icon: "sb:h-9 sb:w-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ React.createElement(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-export { BuilderProvider, Button, buttonVariants, useBuilder };

package/dist/chunk-RZFAIM2Q.mjs

@@ -1,123 +0,0 @@
-import * as React3 from 'react';
-import { createElement } from 'react';
-import NextImage from 'next/image';
-import { clsx } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-import { createTV } from 'tailwind-variants';
-
-// 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, { ...props });
-  }
-  return /* @__PURE__ */ React3.createElement("img", { ...props });
-};
-var twMerge = extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var tv = createTV({
-  twMergeConfig: {
-    prefix: "sb-"
-  }
-});
-var insertAt = (items, index, item) => {
-  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
-};
-
-// src/components/design-wrapper.tsx
-var DesignWrapper = (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, "");
-  let hiddenClass = "";
-  switch (hidden) {
-    case "always":
-      hiddenClass = building ? "sb:opacity-30" : "sb:hidden";
-      break;
-    case "mobile":
-      hiddenClass = building ? "sb:max-md:opacity-30" : "sb:max-md:hidden";
-      break;
-    case "desktop":
-      hiddenClass = building ? "sb:md:opacity-30" : "sb:md:hidden";
-      break;
-    case "never":
-      hiddenClass = "";
-      break;
-  }
-  return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb:relative", className, hiddenClass) }, 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: "container sb:mx-auto" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
-        #${id} {
-          ${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
-        }
-
-        @media (max-width: 1024px) {
-          #${id} {
-            ${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
-          }
-        }
-      `.replace(/\s\s+/g, " ")));
-};
-var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-J56NWFBF.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, tv };

package/dist/chunk-SFYJAJOD.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var chunkXZNO7DXS_js = require('./chunk-XZNO7DXS.js');
-var React = require('react');
-
-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(
-    chunkXZNO7DXS_js.BuildContainer,
-    {
-      name: "root",
-      edit: false,
-      multiple: true,
-      content: props.content || []
-    }
-  );
-};
-
-// src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-FMTTH7R2.js'));
-
-exports.BuilderContent = BuilderContent;
-exports.StaticContent = StaticContent;