@simple-builder/react 1.2.9 → 1.3.0

package/dist/chunk-TF7VKEU2.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 ? "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,
-      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-JR4HENF4.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-TPRY6DEO.js

@@ -1,153 +0,0 @@
-'use strict';
-
-var React3 = require('react');
-var NextImage = require('next/image');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
-var tailwindVariants = require('tailwind-variants');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-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 React3__namespace = /*#__PURE__*/_interopNamespace(React3);
-var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
-
-// 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 = React3.createElement(component.component, {
-        key: block.id,
-        builder: { id: block.id, content, edit },
-        ...block.props
-      });
-      return Element;
-    }
-  };
-})();
-var Image = (props) => {
-  if (typeof NextImage__default.default !== "undefined") {
-    return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default, { ...props });
-  }
-  return /* @__PURE__ */ React3__namespace.createElement("img", { ...props });
-};
-var twMerge = tailwindMerge.extendTailwindMerge({
-  prefix: "sb-"
-});
-function cn(...inputs) {
-  return twMerge(clsx.clsx(inputs));
-}
-var tv = tailwindVariants.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__namespace.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 ? "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,
-      alt: "",
-      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: "container sb-mx-auto" }, children) : children, /* @__PURE__ */ React3__namespace.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__namespace.lazy(
-  () => import('./build-container-client-O3HCUDB7.js')
-);
-var BuildContainer = (props) => {
-  const { content, edit, name } = props;
-  const items = Array.isArray(content) ? content : content?.[name] || [];
-  if (!edit) {
-    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
-  }
-  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
-};
-
-exports.BuildContainer = BuildContainer;
-exports.DesignWrapper = DesignWrapper;
-exports.Image = Image;
-exports.builder = builder;
-exports.cn = cn;
-exports.insertAt = insertAt;
-exports.tv = tv;

package/dist/chunk-TSIU64AJ.mjs

@@ -1,238 +0,0 @@
-import { cn, builder, insertAt } from './chunk-KC4V2ZJN.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;
-    await fetch(`${url}/page/update`, {
-      method: "POST",
-      body: JSON.stringify({
-        slug,
-        content
-      })
-    });
-  }, [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 focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-pointer-events-none disabled:sb-opacity-50 [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "sb-bg-primary sb-text-primary-foreground sb-shadow hover:sb-bg-primary/90",
-        destructive: "sb-bg-destructive sb-text-destructive-foreground sb-shadow-sm hover:sb-bg-destructive/90",
-        outline: "sb-border sb-border-input sb-bg-background sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground",
-        secondary: "sb-bg-secondary sb-text-secondary-foreground sb-shadow-sm hover:sb-bg-secondary/80",
-        ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground",
-        link: "sb-text-primary sb-underline-offset-4 hover:sb-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-TWGYIJD2.js

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

package/dist/chunk-UFWIAKEA.mjs

@@ -1,20 +0,0 @@
-import { BuildContainer } from './chunk-UH23D2JA.mjs';
-import * as React from 'react';
-import { lazy } from 'react';
-
-var StaticContent = (props) => {
-  return /* @__PURE__ */ React.createElement(
-    BuildContainer,
-    {
-      name: "root",
-      edit: false,
-      multiple: true,
-      content: props.content || []
-    }
-  );
-};
-
-// src/index.ts
-var BuilderContent = lazy(() => import('./builder-content-EHVMYKSR.mjs'));
-
-export { BuilderContent, StaticContent };

package/dist/chunk-UH23D2JA.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 ? "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,
-      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-OANZW6DH.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 };