@bettercms-ai/ui 0.9.0 → 0.11.0

package/dist/renderer.js

@@ -575,11 +575,16 @@ function Image({
 }
 
 // src/blocks/Button.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { buttonIconOf, buttonIconSvg, buttonVariantOf } from "@bettercms-ai/types";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function Button({
   text,
   href,
   variant = "primary",
+  size = "md",
+  fullWidth = false,
+  arrow = false,
+  icon: iconProp,
   align = "left",
   className = "",
   "data-bcms-field": field,
@@ -588,27 +593,45 @@ function Button({
   const baseStyles = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
   const variantStyles = {
     primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80"
+    secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+    tertiary: "bg-transparent text-primary hover:bg-primary/10",
+    brand: "bg-accent text-accent-foreground shadow hover:bg-accent/90",
+    dark: "bg-foreground text-background shadow hover:bg-foreground/90",
+    light: "border bg-background text-foreground shadow-sm hover:bg-muted",
+    outline: "border border-current bg-transparent text-primary hover:bg-primary/10",
+    link: "h-auto bg-transparent p-0 text-primary underline underline-offset-4"
   };
+  const icon = buttonIconOf(iconProp);
   const alignClass = {
     left: "justify-start",
     center: "justify-center",
     right: "justify-end"
   }[align];
-  return /* @__PURE__ */ jsx5(
+  const sizeStyles = {
+    sm: "px-3 py-1.5 text-xs",
+    md: "px-4 py-2",
+    lg: "px-6 py-3 text-base"
+  };
+  const sizeClass = size === "sm" || size === "lg" ? sizeStyles[size] : sizeStyles.md;
+  const fullClass = fullWidth === true ? "flex w-full justify-center" : "";
+  return /* @__PURE__ */ jsxs3(
     "a",
     {
       href,
       "data-bcms-field": field,
       "data-bcms-kind": kind,
-      className: cn(baseStyles, variantStyles[variant], alignClass, "px-4 py-2", className),
-      children: text
+      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") } }),
+        text,
+        arrow === true && /* @__PURE__ */ jsx5("span", { className: "ml-2 inline-flex", dangerouslySetInnerHTML: { __html: buttonIconSvg("arrow-right", "bcms-btn-arrow") } })
+      ]
     }
   );
 }
 
 // src/blocks/Spacer.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Spacer({ height = 32, className = "" }) {
   return /* @__PURE__ */ jsx6(
     "div",
@@ -616,7 +639,7 @@ function Spacer({ height = 32, className = "" }) {
       className: `w-full border border-dashed border-muted-foreground/20 rounded flex items-center justify-center ${className}`,
       style: { height: `${height}px` },
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxs3("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
+      children: /* @__PURE__ */ jsxs4("span", { className: "text-xs text-muted-foreground/40 select-none", children: [
         height,
         "px"
       ] })
@@ -648,7 +671,7 @@ function Columns({
 
 // src/blocks/Video.tsx
 import { useState } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function getEmbedUrl(url) {
   const ytMatch = url.match(
     /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
@@ -691,7 +714,7 @@ function Video({
       }
     );
   }
-  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full overflow-hidden rounded-md bg-black aspect-video", className), children: [
     !isLoaded && poster && // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ jsx8(
       "img",
@@ -738,9 +761,9 @@ function Section({
 }
 
 // src/blocks/Navbar.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function Navbar({ logo, links, cta, className = "" }) {
-  return /* @__PURE__ */ jsxs5("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
+  return /* @__PURE__ */ jsxs6("nav", { className: cn("flex items-center gap-6 py-4", className), children: [
     logo?.src ? /* @__PURE__ */ jsx10("a", { href: logo.href ?? "/", className: "shrink-0", children: /* @__PURE__ */ jsx10("img", { src: logo.src, alt: logo.alt, className: "h-8 w-auto" }) }) : null,
     /* @__PURE__ */ jsx10("div", { className: "flex flex-1 gap-5", children: (links ?? []).map((l, i) => /* @__PURE__ */ jsx10("a", { href: l.href, className: "text-inherit no-underline", children: l.label }, i)) }),
     cta ? /* @__PURE__ */ jsx10(
@@ -755,10 +778,10 @@ function Navbar({ logo, links, cta, className = "" }) {
 }
 
 // src/blocks/Footer.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Footer({ columns, copyright, className = "" }) {
-  return /* @__PURE__ */ jsxs6("footer", { className: cn("mt-12 border-t pt-8", className), children: [
-    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
+  return /* @__PURE__ */ jsxs7("footer", { className: cn("mt-12 border-t pt-8", className), children: [
+    /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-12", children: (columns ?? []).map((col, i) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
       col.heading ? /* @__PURE__ */ jsx11("h4", { className: "mb-2 font-semibold", children: col.heading }) : null,
       (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx11("a", { href: l.href, className: "text-neutral-500 no-underline", children: l.label }, j))
     ] }, i)) }),
@@ -768,13 +791,13 @@ function Footer({ columns, copyright, className = "" }) {
 
 // src/blocks/Slider.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function Slider({ slides, className = "", renderBlock }) {
   const [i, setI] = useState2(0);
   const list = slides ?? [];
   const go = (n) => setI((n + list.length) % (list.length || 1));
   const btn = "absolute top-1/2 -translate-y-1/2 flex h-9 w-9 items-center justify-center rounded-full border-0 bg-black/50 text-white cursor-pointer";
-  return /* @__PURE__ */ jsxs7("div", { className: cn("relative w-full", className), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn("relative w-full", className), children: [
     list.map((s, idx) => /* @__PURE__ */ jsx12("div", { hidden: idx !== i, className: "flex flex-col gap-4", children: (s.children ?? []).map((b) => /* @__PURE__ */ jsx12("span", { children: renderBlock ? renderBlock(b) : null }, b.id)) }, s.id)),
     /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Previous", onClick: () => go(i - 1), className: cn(btn, "left-2"), children: "\u2039" }),
     /* @__PURE__ */ jsx12("button", { type: "button", "aria-label": "Next", onClick: () => go(i + 1), className: cn(btn, "right-2"), children: "\u203A" })
@@ -783,11 +806,11 @@ function Slider({ slides, className = "", renderBlock }) {
 
 // src/blocks/Tabs.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Tabs({ tabs, className = "", renderBlock }) {
   const [active, setActive] = useState3(0);
   const list = tabs ?? [];
-  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx13("div", { role: "tablist", className: "mb-4 flex gap-1 border-b", children: list.map((t, idx) => /* @__PURE__ */ jsx13(
       "button",
       {
@@ -808,19 +831,19 @@ function Tabs({ tabs, className = "", renderBlock }) {
 }
 
 // src/blocks/Placeholders.tsx
-import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var box = "rounded border border-dashed border-neutral-300 bg-neutral-50 p-4 text-sm text-neutral-500";
 function ComponentInstance({
   componentId,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
     "Component instance: ",
     /* @__PURE__ */ jsx14("code", { children: componentId })
   ] });
 }
 function FormPlaceholder({ formId, className = "" }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
     "Form: ",
     /* @__PURE__ */ jsx14("code", { children: formId })
   ] });
@@ -829,9 +852,9 @@ function CollectionPlaceholder({
   cardComponentId,
   className = ""
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cn(box, className), children: [
+  return /* @__PURE__ */ jsxs10("div", { className: cn(box, className), children: [
     "Collection: entries of this page",
-    cardComponentId ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    cardComponentId ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
       " as ",
       /* @__PURE__ */ jsx14("code", { children: cardComponentId })
     ] }) : /* @__PURE__ */ jsx14(Fragment2, { children: " (default card)" })
@@ -936,7 +959,7 @@ function blockStyleToReactStyle(style) {
 
 // src/renderer.tsx
 import "react";
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var CONTAINER_TYPES = /* @__PURE__ */ new Set(["columns", "section", "slider", "tabs"]);
 function bindingProps(block, annotate) {
   if (!annotate || !block.id) return {};
@@ -956,7 +979,7 @@ function bindingProps(block, annotate) {
 function resolveBlock(block, className, annotate = false) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className ?? ""}`,
@@ -980,7 +1003,7 @@ function BlockRenderer({
 }) {
   const entry = BLOCK_REGISTRY[block.type];
   if (!entry) {
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: `w-full p-4 border border-dashed border-red-400 bg-red-50 text-red-600 text-sm rounded ${className}`,