@bettercms-ai/ui 0.10.0 → 0.11.0

package/dist/index.js

@@ -32,7 +32,7 @@ function Heading({
 import React from "react";
 import { PortableText as PT } from "@portabletext/react";
 
-// ../../../../bettercms-backend/packages/richtext/src/types.ts
+// ../richtext/src/types.ts
 var PT_TYPES = {
   /** A generic embedded block: `{schemaKey, schemaLabel, fields}`, the successor to Lexical's BlockNode. */
   block: "bcmsBlock",
@@ -77,7 +77,7 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.file
 ]);
 
-// ../../../../bettercms-backend/packages/richtext/src/styled.ts
+// ../richtext/src/styled.ts
 var STYLED_TAGS = [
   "span",
   "small",
@@ -160,7 +160,7 @@ function styledAttrEntries(attrs) {
   return out;
 }
 
-// ../../../../bettercms-backend/packages/richtext/src/href.ts
+// ../richtext/src/href.ts
 var SAFE_HREF_SCHEMES = ["http:", "https:", "mailto:", "tel:"];
 function safeHref(raw) {
   const trimmed = raw.trim();
@@ -173,7 +173,7 @@ function safeHref(raw) {
   }
 }
 
-// ../../../../bettercms-backend/packages/richtext/src/key.ts
+// ../richtext/src/key.ts
 var ALPHABET = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 var KEY_PATTERN = /^[A-Za-z0-9-]{1,32}$/;
 var isValidKey = (k) => typeof k === "string" && KEY_PATTERN.test(k);
@@ -192,7 +192,7 @@ function deterministicKeys(prefix = "k") {
   };
 }
 
-// ../../../../bettercms-backend/packages/richtext/src/table.ts
+// ../richtext/src/table.ts
 var isRecord = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 var isPortableTextTable = (n) => isRecord(n) && n._type === PT_TYPES.table && Array.isArray(n.rows);
 var isBuiltInTableBlock = (n) => isRecord(n) && n._type === PT_TYPES.block && n.schemaKey === BUILTIN_TABLE_KEY;
@@ -303,7 +303,7 @@ function migrateTable(node, key = randomKey, read = asIs) {
   };
 }
 
-// ../../../../bettercms-backend/packages/richtext/src/read.ts
+// ../richtext/src/read.ts
 var isRecord2 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 function normalizePortableText(value, key = randomKey) {
   if (!Array.isArray(value)) return [];
@@ -575,13 +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,
@@ -590,8 +593,15 @@ 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",
@@ -604,20 +614,24 @@ function Button({
   };
   const sizeClass = size === "sm" || size === "lg" ? sizeStyles[size] : sizeStyles.md;
   const fullClass = fullWidth === true ? "flex w-full justify-center" : "";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs3(
     "a",
     {
       href,
       "data-bcms-field": field,
       "data-bcms-kind": kind,
-      className: cn(baseStyles, variantStyles[variant], alignClass, sizeClass, fullClass, 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",
@@ -625,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"
       ] })
@@ -657,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})/
@@ -700,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",
@@ -747,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(
@@ -764,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)) }),
@@ -777,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" })
@@ -792,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",
       {
@@ -817,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 })
   ] });
@@ -838,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)" })
@@ -945,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 {};
@@ -965,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 ?? ""}`,
@@ -989,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}`,