@bettercms-ai/ui 0.12.0 → 0.14.0

package/dist/index.js

@@ -555,7 +555,8 @@ function Image({
   "data-bcms-field": field,
   "data-bcms-kind": kind
 }) {
-  return /* @__PURE__ */ jsxs2("figure", { className: cn("w-full", className), children: [
+  const sized = typeof width === "number" && width > 0;
+  return /* @__PURE__ */ jsxs2("figure", { className: cn(sized ? "max-w-full" : "w-full", className), children: [
     /* @__PURE__ */ jsx4(
       "img",
       {
@@ -566,7 +567,8 @@ function Image({
         sizes,
         "data-bcms-field": field,
         "data-bcms-kind": kind,
-        className: "w-full h-auto rounded-md object-cover",
+        style: sized ? { width: `${width}px`, maxWidth: "100%", height: "auto" } : void 0,
+        className: cn(!sized && "w-full", "h-auto rounded-md object-cover"),
         loading: "lazy"
       }
     ),
@@ -588,6 +590,7 @@ function Button({
   newTab = false,
   align = "left",
   className = "",
+  style,
   "data-bcms-field": field,
   "data-bcms-kind": kind
 }) {
@@ -622,6 +625,7 @@ function Button({
       ...newTab === true ? { target: "_blank", rel: "noopener noreferrer" } : {},
       "data-bcms-field": field,
       "data-bcms-kind": kind,
+      style,
       className: cn(baseStyles, variantStyles[buttonVariantOf(variant)], alignClass, sizeClass, fullClass, className),
       children: [
         icon && /* @__PURE__ */ jsx5("span", { className: "mr-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg(icon, "bcms-btn-icon") } }),
@@ -953,6 +957,9 @@ var BLOCK_REGISTRY = {
 };
 var BLOCK_TYPES = Object.keys(BLOCK_REGISTRY);
 
+// src/renderer.tsx
+import { splitButtonStyle } from "@bettercms-ai/types";
+
 // src/blockStyle.ts
 import { blockStyleToCss } from "@bettercms-ai/types";
 function blockStyleToReactStyle(style) {
@@ -963,6 +970,11 @@ function blockStyleToReactStyle(style) {
 import "react";
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
+function styleOf(block) {
+  if (block.type !== "button") return { wrapper: blockStyleToReactStyle(block.style), paint: {} };
+  const { placement, paint } = splitButtonStyle(block.style);
+  return { wrapper: blockStyleToReactStyle(placement), paint: paint ? { style: paint } : {} };
+}
 function bindingProps(block, annotate) {
   if (!annotate || !block.id) return {};
   switch (block.type) {
@@ -993,8 +1005,8 @@ function resolveBlock(block, className, annotate = false) {
     );
   }
   const Component = entry.component;
-  const blockStyle = blockStyleToReactStyle(block.style);
-  const el = /* @__PURE__ */ jsx15(Component, { ...block.props, className, ...bindingProps(block, annotate) });
+  const { wrapper: blockStyle, paint } = styleOf(block);
+  const el = /* @__PURE__ */ jsx15(Component, { ...block.props, ...paint, className, ...bindingProps(block, annotate) });
   return blockStyle ? /* @__PURE__ */ jsx15("div", { style: blockStyle, children: el }) : el;
 }
 function BlockRenderer({
@@ -1018,11 +1030,12 @@ function BlockRenderer({
   }
   const Component = entry.component;
   const containerProps = CONTAINER_TYPES.has(block.type) ? { renderBlock: renderBlock ?? ((child) => resolveBlock(child, void 0, annotate)) } : {};
-  const blockStyle = blockStyleToReactStyle(block.style);
+  const { wrapper: blockStyle, paint } = styleOf(block);
   const el = /* @__PURE__ */ jsx15(
     Component,
     {
       ...block.props,
+      ...paint,
       className,
       ...containerProps,
       ...bindingProps(block, annotate)