@simple-builder/react 1.0.4 → 1.0.6

package/dist/{builder-content-GELONUMY.mjs → builder-content-36BOBBAF.mjs}

@@ -1,5 +1,5 @@
-import { BuilderProvider, useBuilder, Button } from './chunk-EQMVGJ6X.mjs';
-import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-JF244SXI.mjs';
+import { BuildContainer } from './chunk-PIRC2EWS.mjs';
 import * as React2 from 'react';
 
 var BuilderHeader = () => {

package/dist/{builder-content-QNCUQJUB.js → builder-content-3LSJER2M.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkXEMUNFCV_js = require('./chunk-XEMUNFCV.js');
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunkTQITQHDC_js = require('./chunk-TQITQHDC.js');
+var chunkNVOLMEIV_js = require('./chunk-NVOLMEIV.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 } = chunkXEMUNFCV_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(chunkXEMUNFCV_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+  const { save } = chunkTQITQHDC_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(chunkTQITQHDC_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
 };
 
 // src/components/builder-content.tsx
 var BuilderContent = (props) => {
-  return /* @__PURE__ */ React2__namespace.createElement(chunkXEMUNFCV_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+  return /* @__PURE__ */ React2__namespace.createElement(chunkTQITQHDC_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
 };
 var BuilderContentInner = () => {
-  const { content } = chunkXEMUNFCV_js.useBuilder();
-  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkJ36K7WVK_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+  const { content } = chunkTQITQHDC_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunkNVOLMEIV_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
 };
 var builder_content_default = BuilderContent;
 

package/dist/{build-container-client-QJL5MQR6.css → builder-content-XM6XI2VA.css}

@@ -466,6 +466,9 @@
 .sb-rounded-md {
   border-radius: calc(var(--sb-radius) - 2px);
 }
+.sb-rounded-sm {
+  border-radius: calc(var(--sb-radius) - 4px);
+}
 .sb-border {
   border-width: 1px;
 }
@@ -499,6 +502,9 @@
 .sb-bg-destructive {
   background-color: hsl(var(--sb-destructive));
 }
+.sb-bg-muted {
+  background-color: hsl(var(--sb-muted));
+}
 .sb-bg-popover {
   background-color: hsl(var(--sb-popover));
 }
@@ -572,6 +578,10 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.sb-py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .sb-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -991,6 +1001,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.data-\[state\=active\]\:sb-bg-background[data-state=active] {
+  background-color: hsl(var(--sb-background));
+}
 .data-\[state\=checked\]\:sb-bg-primary[data-state=checked] {
   background-color: hsl(var(--sb-primary));
 }
@@ -1006,6 +1019,14 @@
 .data-\[state\=on\]\:sb-text-accent-foreground[data-state=on] {
   color: hsl(var(--sb-accent-foreground));
 }
+.data-\[state\=active\]\:sb-shadow-sm[data-state=active] {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .data-\[state\=open\]\:sb-animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;

package/dist/{chunk-KOBGFPWB.js → chunk-4NWAJBFM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunkNVOLMEIV_js = require('./chunk-NVOLMEIV.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(
-    chunkJ36K7WVK_js.BuildContainer,
+    chunkNVOLMEIV_js.BuildContainer,
     {
       name: "root",
       edit: false,
@@ -36,7 +36,7 @@ var StaticContent = (props) => {
 };
 
 // src/index.ts
-var BuilderContent = React.lazy(() => import('./builder-content-QNCUQJUB.js'));
+var BuilderContent = React.lazy(() => import('./builder-content-3LSJER2M.js'));
 
 exports.BuilderContent = BuilderContent;
 exports.StaticContent = StaticContent;

package/dist/{chunk-NP2NHVJP.mjs → chunk-DOQHCW2T.mjs}

@@ -1,4 +1,4 @@
-import { BuildContainer } from './chunk-BSE6WW6Q.mjs';
+import { BuildContainer } from './chunk-PIRC2EWS.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-GELONUMY.mjs'));
+var BuilderContent = lazy(() => import('./builder-content-36BOBBAF.mjs'));
 
 export { BuilderContent, StaticContent };

package/dist/{chunk-EQMVGJ6X.mjs → chunk-JF244SXI.mjs}

@@ -1,7 +1,6 @@
-import { cn, builder, insertAt } from './chunk-BSE6WW6Q.mjs';
+import { tv, builder, insertAt } from './chunk-PIRC2EWS.mjs';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 
 var BuilderContext = React.createContext(
   null
@@ -197,34 +196,32 @@ var findRecursive = (items, predicate, key = "content") => {
     }
   }
 };
-var buttonVariants = cva(
-  "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: {
-        primary: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary/90",
-        destructive: "sb-bg-destructive sb-text-destructive-foreground hover:sb-bg-destructive/90",
-        outline: "sb-border border-input sb-bg-background hover:sb-bg-accent hover:sb-text-accent-foreground",
-        ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground"
-      },
-      size: {
-        default: "sb-h-10 sb-px-4 sb-py-2",
-        sm: "sb-h-8 sb-px-3 sb-py-1"
-      }
+var buttonVariants = 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: {
+      primary: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary/90",
+      destructive: "sb-bg-destructive sb-text-destructive-foreground hover:sb-bg-destructive/90",
+      outline: "sb-border border-input sb-bg-background hover:sb-bg-accent hover:sb-text-accent-foreground",
+      ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground"
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "default"
+    size: {
+      default: "sb-h-10 sb-px-4 sb-py-2",
+      sm: "sb-h-8 sb-px-3 sb-py-1"
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    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 })),
+        className: buttonVariants({ variant, size, className }),
         ref,
         ...props
       }

package/dist/{chunk-J36K7WVK.js → chunk-NVOLMEIV.js}

@@ -4,6 +4,7 @@ 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 }; }
 
@@ -76,11 +77,23 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 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];
 };
 var spacing = {
   parse: (input) => {
+    if (typeof input !== "string")
+      return {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      };
     const matches = input.match(/(\d+)/gm);
     const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
     switch (matches?.length) {
@@ -94,38 +107,59 @@ var spacing = {
         return { top, right, bottom, left };
     }
   },
+  stringify: ({
+    top = 0,
+    right = 0,
+    bottom = 0,
+    left = 0
+  }) => {
+    if ([right, bottom, left].every((v) => v === top)) {
+      if (top === 0)
+        return;
+      return `${top}px`;
+    } else if (top === bottom && left === right) {
+      return `${top}px ${left}px`;
+    } else {
+      return `${top}px ${right}px ${bottom}px ${left}px`;
+    }
+  },
   isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
+    const { top, right, bottom, left } = spacing.parse(input || "");
     return top !== bottom || right !== left;
   }
 };
 
 // src/components/design-wrapper.tsx
 var DesignWrapper = (props) => {
-  const { children, className, styles } = props;
-  const { container = true, background, ...rest } = styles || {};
+  const { children, className } = props;
+  const styles = props.styles?.desktop ?? {};
+  const { background } = styles;
   const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
   const src = matches ? matches[1] : void 0;
-  return /* @__PURE__ */ React3__namespace.createElement(
-    "div",
+  const container = props.styles?.container ?? true;
+  const id = React3__namespace.useId().replace(/[^a-zA-Z0-9]/g, "");
+  return /* @__PURE__ */ React3__namespace.createElement("div", { id, className: cn("sb-relative", className) }, src && /* @__PURE__ */ React3__namespace.createElement(
+    Image,
     {
-      className: cn("sb-relative", className),
-      style: { ...!src && { background }, ...rest }
-    },
-    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: "sb-container sb-mx-auto" }, children) : children
-  );
+      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: "sb-container sb-mx-auto" }, children) : children, /* @__PURE__ */ React3__namespace.createElement("style", null, `
+        #${id} {
+          ${Object.entries(props.styles?.desktop ?? {}).map(([key, value]) => `${key}: ${value};`).join(" ")}
+        }
+
+        @media (max-width: 1024px) {
+          #${id} {
+            ${Object.entries(props.styles?.mobile ?? {}).map(([key, value]) => `${key}: ${value}; `).join(" ")}
+          }
+        }
+      `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3__namespace.lazy(
-  () => import('./build-container-client-PDM3LRIQ.js')
+  () => import('./build-container-client-B6ZYGDJF.js')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;
@@ -143,3 +177,4 @@ exports.builder = builder;
 exports.cn = cn;
 exports.insertAt = insertAt;
 exports.spacing = spacing;
+exports.tv = tv;

package/dist/{chunk-BSE6WW6Q.mjs → chunk-PIRC2EWS.mjs}

@@ -3,6 +3,7 @@ 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__ */ (() => {
@@ -52,11 +53,23 @@ var twMerge = extendTailwindMerge({
 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];
 };
 var spacing = {
   parse: (input) => {
+    if (typeof input !== "string")
+      return {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      };
     const matches = input.match(/(\d+)/gm);
     const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
     switch (matches?.length) {
@@ -70,38 +83,59 @@ var spacing = {
         return { top, right, bottom, left };
     }
   },
+  stringify: ({
+    top = 0,
+    right = 0,
+    bottom = 0,
+    left = 0
+  }) => {
+    if ([right, bottom, left].every((v) => v === top)) {
+      if (top === 0)
+        return;
+      return `${top}px`;
+    } else if (top === bottom && left === right) {
+      return `${top}px ${left}px`;
+    } else {
+      return `${top}px ${right}px ${bottom}px ${left}px`;
+    }
+  },
   isIndipendent: (input) => {
-    const { top, right, bottom, left } = spacing.parse(input);
+    const { top, right, bottom, left } = spacing.parse(input || "");
     return top !== bottom || right !== left;
   }
 };
 
 // src/components/design-wrapper.tsx
 var DesignWrapper = (props) => {
-  const { children, className, styles } = props;
-  const { container = true, background, ...rest } = styles || {};
+  const { children, className } = props;
+  const styles = props.styles?.desktop ?? {};
+  const { background } = styles;
   const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
   const src = matches ? matches[1] : void 0;
-  return /* @__PURE__ */ React3.createElement(
-    "div",
+  const container = props.styles?.container ?? true;
+  const id = React3.useId().replace(/[^a-zA-Z0-9]/g, "");
+  return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb-relative", className) }, src && /* @__PURE__ */ React3.createElement(
+    Image,
     {
-      className: cn("sb-relative", className),
-      style: { ...!src && { background }, ...rest }
-    },
-    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: "sb-container sb-mx-auto" }, children) : children
-  );
+      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: "sb-container sb-mx-auto" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
+        #${id} {
+          ${Object.entries(props.styles?.desktop ?? {}).map(([key, value]) => `${key}: ${value};`).join(" ")}
+        }
+
+        @media (max-width: 1024px) {
+          #${id} {
+            ${Object.entries(props.styles?.mobile ?? {}).map(([key, value]) => `${key}: ${value}; `).join(" ")}
+          }
+        }
+      `.replace(/\s\s+/g, " ")));
 };
 var BuildContainerInner = React3.lazy(
-  () => import('./build-container-client-Y55WZE6M.mjs')
+  () => import('./build-container-client-F3SDJONS.mjs')
 );
 var BuildContainer = (props) => {
   const { content, edit, name } = props;
@@ -112,4 +146,4 @@ var BuildContainer = (props) => {
   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, spacing };
+export { BuildContainer, DesignWrapper, Image, builder, cn, insertAt, spacing, tv };

package/dist/{chunk-XEMUNFCV.js → chunk-TQITQHDC.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunkNVOLMEIV_js = require('./chunk-NVOLMEIV.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;
@@ -59,7 +58,7 @@ var BuilderProvider = (props) => {
   );
   const addContent = React__namespace.useCallback(
     (name, container, parent, index = 0) => {
-      const component = chunkJ36K7WVK_js.builder.getComponent(name);
+      const component = chunkNVOLMEIV_js.builder.getComponent(name);
       if (!component) {
         throw new Error(`[simple-builder]: Component "${name}" not found`);
       }
@@ -81,7 +80,7 @@ var BuilderProvider = (props) => {
         }
       };
       if (!parent) {
-        setContent((content2) => chunkJ36K7WVK_js.insertAt(content2, index, entry));
+        setContent((content2) => chunkNVOLMEIV_js.insertAt(content2, index, entry));
         return;
       }
       setContent(
@@ -91,7 +90,7 @@ var BuilderProvider = (props) => {
               ...item,
               content: {
                 ...item.content,
-                [container]: chunkJ36K7WVK_js.insertAt(item.content?.[container], index, entry)
+                [container]: chunkNVOLMEIV_js.insertAt(item.content?.[container], index, entry)
               }
             };
           }
@@ -219,34 +218,32 @@ var findRecursive = (items, predicate, key = "content") => {
     }
   }
 };
-var buttonVariants = classVarianceAuthority.cva(
-  "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: {
-        primary: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary/90",
-        destructive: "sb-bg-destructive sb-text-destructive-foreground hover:sb-bg-destructive/90",
-        outline: "sb-border border-input sb-bg-background hover:sb-bg-accent hover:sb-text-accent-foreground",
-        ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground"
-      },
-      size: {
-        default: "sb-h-10 sb-px-4 sb-py-2",
-        sm: "sb-h-8 sb-px-3 sb-py-1"
-      }
+var buttonVariants = chunkNVOLMEIV_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: {
+      primary: "sb-bg-primary sb-text-primary-foreground hover:sb-bg-primary/90",
+      destructive: "sb-bg-destructive sb-text-destructive-foreground hover:sb-bg-destructive/90",
+      outline: "sb-border border-input sb-bg-background hover:sb-bg-accent hover:sb-text-accent-foreground",
+      ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground"
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "default"
+    size: {
+      default: "sb-h-10 sb-px-4 sb-py-2",
+      sm: "sb-h-8 sb-px-3 sb-py-1"
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    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: chunkJ36K7WVK_js.cn(buttonVariants({ variant, size, className })),
+        className: buttonVariants({ variant, size, className }),
         ref,
         ...props
       }

package/dist/index.css

@@ -466,6 +466,9 @@
 .sb-rounded-md {
   border-radius: calc(var(--sb-radius) - 2px);
 }
+.sb-rounded-sm {
+  border-radius: calc(var(--sb-radius) - 4px);
+}
 .sb-border {
   border-width: 1px;
 }
@@ -499,6 +502,9 @@
 .sb-bg-destructive {
   background-color: hsl(var(--sb-destructive));
 }
+.sb-bg-muted {
+  background-color: hsl(var(--sb-muted));
+}
 .sb-bg-popover {
   background-color: hsl(var(--sb-popover));
 }
@@ -572,6 +578,10 @@
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.sb-py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .sb-py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -991,6 +1001,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.data-\[state\=active\]\:sb-bg-background[data-state=active] {
+  background-color: hsl(var(--sb-background));
+}
 .data-\[state\=checked\]\:sb-bg-primary[data-state=checked] {
   background-color: hsl(var(--sb-primary));
 }
@@ -1006,6 +1019,14 @@
 .data-\[state\=on\]\:sb-text-accent-foreground[data-state=on] {
   color: hsl(var(--sb-accent-foreground));
 }
+.data-\[state\=active\]\:sb-shadow-sm[data-state=active] {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .data-\[state\=open\]\:sb-animate-in[data-state=open] {
   animation-name: enter;
   animation-duration: 150ms;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkKOBGFPWB_js = require('./chunk-KOBGFPWB.js');
-var chunkJ36K7WVK_js = require('./chunk-J36K7WVK.js');
+var chunk4NWAJBFM_js = require('./chunk-4NWAJBFM.js');
+var chunkNVOLMEIV_js = require('./chunk-NVOLMEIV.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkKOBGFPWB_js.BuilderContent; }
+  get: function () { return chunk4NWAJBFM_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkKOBGFPWB_js.StaticContent; }
+  get: function () { return chunk4NWAJBFM_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkJ36K7WVK_js.BuildContainer; }
+  get: function () { return chunkNVOLMEIV_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkJ36K7WVK_js.builder; }
+  get: function () { return chunkNVOLMEIV_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-NP2NHVJP.mjs';
-export { BuildContainer, builder } from './chunk-BSE6WW6Q.mjs';
+export { BuilderContent, StaticContent } from './chunk-DOQHCW2T.mjs';
+export { BuildContainer, builder } from './chunk-PIRC2EWS.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -35,7 +35,6 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
-    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.2.0",
     "lucide-react": "^0.309.0",
@@ -43,8 +42,9 @@
     "react-hook-form": "^7.49.3",
     "server-only": "^0.0.1",
     "tailwind-merge": "^2.2.0",
+    "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.0.4"
+    "@simple-builder/server": "1.0.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",