@beweco/aurora-ui 0.6.11 → 0.6.12

package/dist/index.cjs.js

@@ -5400,6 +5400,55 @@ var UploadFile = function (_a) {
 };
 UploadFile.displayName = "UploadFile";
 
+function resolvePreviewActions(previewAction, ctaType, ctaLabel, ctaValue) {
+    var _a;
+    var fromProp = (_a = previewAction === null || previewAction === void 0 ? void 0 : previewAction.filter(function (a) {
+        var _a;
+        if (!((_a = a.title) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return false;
+        }
+        if (a.type === "list") {
+            return Array.isArray(a.listItems) && a.listItems.length > 0;
+        }
+        return true;
+    })) !== null && _a !== void 0 ? _a : [];
+    if (fromProp.length > 0) {
+        return fromProp;
+    }
+    if (ctaType && ctaLabel && ctaValue) {
+        var isPhone = ctaType === "CALL_NOW" || ctaType.toLowerCase() === "phone";
+        return [
+            __assign({ type: isPhone ? "phone" : "url", title: ctaLabel }, (isPhone ? { value: ctaValue } : { url: ctaValue, value: ctaValue })),
+        ];
+    }
+    return [];
+}
+/** Verdes alineados con WhatsApp (claro / oscuro); icono hereda con `text-current` */
+var ACTION_PRIMARY_CLASS = "text-[#008069] dark:text-[#00A884]";
+var ACTION_MUTED_CLASS = "text-gray-600 dark:text-gray-400";
+function actionIconForType(type) {
+    switch (type) {
+        case "phone":
+            return "solar:phone-bold";
+        case "quick_reply":
+            return "solar:reply-bold";
+        case "list":
+            return "solar:list-bold";
+        default:
+            return "solar:square-share-line-bold";
+    }
+}
+var ListMessageSheet = function (_a) {
+    var _b, _c, _d;
+    var action = _a.action, onClose = _a.onClose, onPick = _a.onPick, translations = _a.translations;
+    var items = (_b = action.listItems) !== null && _b !== void 0 ? _b : [];
+    var headerTitle = (_c = action.listHeaderTitle) !== null && _c !== void 0 ? _c : action.title;
+    var footerHint = (_d = action.listFooterHint) !== null && _d !== void 0 ? _d : translations.listSelectHintDefault;
+    return (jsxRuntime.jsxs("div", { className: "absolute inset-0 z-40 flex flex-col justify-end pointer-events-auto", role: "presentation", children: [jsxRuntime.jsx("button", { type: "button", className: "absolute inset-0 z-40 bg-black/45 dark:bg-black/60 border-0 cursor-pointer p-0 m-0", onClick: onClose, "aria-label": translations.listCloseAriaLabel }), jsxRuntime.jsxs("div", { className: "relative z-50 mx-1 mb-1 rounded-2xl bg-white dark:bg-[#1f1f1f] shadow-2xl flex flex-col max-h-[min(52vh,420px)] overflow-hidden ring-1 ring-black/5 dark:ring-white/10", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-center relative shrink-0 px-10 pt-3 pb-2.5 border-b border-black/[0.08] dark:border-white/[0.12]", children: [jsxRuntime.jsx("span", { className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100 text-center", children: headerTitle }), jsxRuntime.jsx("button", { type: "button", onClick: onClose, className: "absolute right-2 top-1.5 p-1.5 rounded-full text-gray-500 hover:bg-black/[0.06] dark:text-gray-400 dark:hover:bg-white/[0.08]", "aria-label": translations.listCloseAriaLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:close-circle-bold", className: "text-current", size: "lg" }) })] }), jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 min-h-0", children: items.map(function (item, rowIndex) {
+                            var _a;
+                            return (jsxRuntime.jsxs("button", { type: "button", onClick: function () { return onPick(item); }, className: "w-full text-left flex gap-3 px-4 py-3 border-t border-black/[0.06] dark:border-white/[0.08] first:border-t-0 hover:bg-black/[0.04] dark:hover:bg-white/[0.05] transition-colors", children: [item.emoji || item.icon ? (jsxRuntime.jsx("div", { className: "shrink-0 w-9 inline-flex items-center justify-center self-start", children: item.emoji ? (jsxRuntime.jsx("span", { className: "text-xl leading-none", "aria-hidden": true, children: item.emoji })) : item.icon ? (jsxRuntime.jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center [&>span]:flex [&>span]:size-full [&>span]:items-center [&>span]:justify-center", children: jsxRuntime.jsx(IconComponent, { icon: item.icon, className: "text-gray-600 dark:text-gray-300 [&_svg]:block", size: "sm" }) })) : null })) : null, jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("p", { className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100 leading-snug", children: item.title }), item.description ? (jsxRuntime.jsx("p", { className: "text-[13px] text-gray-600 dark:text-gray-400 mt-0.5 leading-snug", children: item.description })) : null] })] }, (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(item.title, "-").concat(rowIndex)));
+                        }) }), footerHint ? (jsxRuntime.jsx("p", { className: "shrink-0 text-center text-[11px] text-gray-500 dark:text-gray-500 px-4 py-2.5 border-t border-black/[0.06] dark:border-white/[0.08]", children: footerHint })) : null] })] }));
+};
 var DEFAULT_TRANSLATIONS$3 = {
     businessName: "Tu Negocio",
     businessInitials: "TN",
@@ -5407,10 +5456,12 @@ var DEFAULT_TRANSLATIONS$3 = {
     imageAlt: "Vista previa de mensaje WhatsApp",
     viewMore: "ver mas",
     viewLess: "ver menos",
+    listCloseAriaLabel: "Cerrar",
+    listSelectHintDefault: "Pulsa una opción para elegir",
 };
 /**
  * WhatsAppPreview - Displays a realistic WhatsApp message bubble preview.
- * Supports image, caption, CTA buttons, and compact/full variants.
+ * Supports image, caption, acciones de plantilla (`previewAction` o CTA legacy), y variantes compact/full.
  *
  * @component
  * @example
@@ -5424,8 +5475,13 @@ var DEFAULT_TRANSLATIONS$3 = {
  * ```
  */
 var WhatsAppPreview = function (_a) {
-    var imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "compact" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? false : _c, maxCaptionLength = _a.maxCaptionLength, onToggleCaption = _a.onToggleCaption, _d = _a.showFullCaption, showFullCaption = _d === void 0 ? false : _d, ctaType = _a.ctaType, ctaLabel = _a.ctaLabel, ctaValue = _a.ctaValue, _e = _a.campaignView, campaignView = _e === void 0 ? false : _e, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.timeLocale, timeLocale = _h === void 0 ? "es-ES" : _h;
+    var imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "compact" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? false : _c, maxCaptionLength = _a.maxCaptionLength, onToggleCaption = _a.onToggleCaption, _d = _a.showFullCaption, showFullCaption = _d === void 0 ? false : _d, ctaType = _a.ctaType, ctaLabel = _a.ctaLabel, ctaValue = _a.ctaValue, previewAction = _a.previewAction, _e = _a.campaignView, campaignView = _e === void 0 ? false : _e, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.timeLocale, timeLocale = _h === void 0 ? "es-ES" : _h, onListItemPick = _a.onListItemPick;
     var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
+    var _j = React.useState(null), openListSheetIndex = _j[0], setOpenListSheetIndex = _j[1];
+    var closeListSheet = React.useCallback(function () {
+        setOpenListSheetIndex(null);
+    }, []);
+    var resolvedActions = React.useMemo(function () { return resolvePreviewActions(previewAction, ctaType, ctaLabel, ctaValue); }, [previewAction, ctaType, ctaLabel, ctaValue]);
     var shouldTruncate = maxCaptionLength && caption.length > maxCaptionLength;
     var displayCaption = campaignView
         ? caption
@@ -5442,21 +5498,44 @@ var WhatsAppPreview = function (_a) {
             : "max-h-64";
     var imageAspectRatio = campaignView ? "1/1" : undefined;
     var bubblePadding = variant === "compact" ? "p-2.5" : "p-3";
-    return (jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col bg-[#ECE5DD] dark:bg-gray-900 ".concat(paddingClass, " justify-start ").concat(className), style: containerStyle, children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4 p-3 bg-[#075E54] dark:bg-[#1F2C33] rounded-t-lg -mx-4 -mt-4", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-gray-600 text-sm font-bold", children: t.businessInitials }) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white", children: t.businessName }), jsxRuntime.jsx("p", { className: "text-xs text-gray-300", children: t.onlineStatus })] })] })), jsxRuntime.jsx("div", { className: "flex flex-col gap-2 ".concat(showHeader ? "mt-6 overflow-y-auto flex-1" : "", " items-start"), children: jsxRuntime.jsx("div", { className: "mr-auto max-w-[85%]", children: jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg ".concat(bubblePadding, " shadow-sm"), children: [imageUrl && (jsxRuntime.jsx("div", { className: "rounded-lg overflow-hidden ".concat(imageMargin), style: imageAspectRatio
+    var bubbleOutdent = variant === "compact" ? "-mx-2.5" : "-mx-3";
+    var listSheetAction = openListSheetIndex !== null
+        ? resolvedActions[openListSheetIndex]
+        : undefined;
+    var isListSheetOpen = (listSheetAction === null || listSheetAction === void 0 ? void 0 : listSheetAction.type) === "list" &&
+        Array.isArray(listSheetAction.listItems) &&
+        listSheetAction.listItems.length > 0;
+    return (jsxRuntime.jsxs("div", { className: "relative w-full h-full flex flex-col bg-[#ECE5DD] dark:bg-gray-900 ".concat(paddingClass, " justify-start ").concat(className), style: containerStyle, children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4 p-3 bg-[#075E54] dark:bg-[#1F2C33] rounded-t-lg -mx-4 -mt-4", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", children: jsxRuntime.jsx("span", { className: "text-gray-600 text-sm font-bold", children: t.businessInitials }) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white", children: t.businessName }), jsxRuntime.jsx("p", { className: "text-xs text-gray-300", children: t.onlineStatus })] })] })), jsxRuntime.jsx("div", { className: "flex flex-col gap-2 ".concat(showHeader ? "mt-6 overflow-y-auto flex-1" : "", " items-start"), children: jsxRuntime.jsx("div", { className: "mr-auto max-w-[85%]", children: jsxRuntime.jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg ".concat(bubblePadding, " shadow-sm"), children: [imageUrl && (jsxRuntime.jsx("div", { className: "rounded-lg overflow-hidden ".concat(imageMargin), style: imageAspectRatio
                                     ? { aspectRatio: imageAspectRatio }
                                     : undefined, children: jsxRuntime.jsx(react.Image, { src: imageUrl, alt: t.imageAlt, className: "w-full ".concat(imageHeight, " object-cover") }) })), jsxRuntime.jsxs("div", { className: "text-sm text-gray-900 dark:text-white text-left ".concat(imageUrl ? "mt-2" : ""), children: [jsxRuntime.jsx("div", { className: "".concat(showFullCaption && variant === "compact" ? "overflow-y-auto" : "", " ").concat(campaignView ? (imageUrl ? "line-clamp-3" : "line-clamp-[12]") : ""), style: {
-                                            maxHeight: showFullCaption && variant === "compact"
-                                                ? "150px"
-                                                : "none",
-                                        }, children: jsxRuntime.jsx("span", { className: "whitespace-pre-wrap font-sans break-words block text-left", children: displayCaption }) }), shouldTruncate &&
-                                        onToggleCaption &&
-                                        variant === "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                                            maxHeight: showFullCaption && variant === "compact" ? "150px" : "none",
+                                        }, children: jsxRuntime.jsx("span", { className: "whitespace-pre-wrap font-sans break-words block text-left", children: displayCaption }) }), shouldTruncate && onToggleCaption && variant === "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
                                             e.stopPropagation();
                                             onToggleCaption();
-                                        }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs", children: showFullCaption ? t.viewLess : t.viewMore }))] }), ctaType && ctaLabel && ctaValue && (jsxRuntime.jsx("div", { className: "mt-3 -mx-1", children: jsxRuntime.jsx(Button, { size: "sm", color: "primary", variant: "bordered", className: "w-full font-semibold", startContent: ctaType === "CALL_NOW" ? (jsxRuntime.jsx(IconComponent, { icon: "solar:phone-bold", className: "text-sm" })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:link-bold", className: "text-sm" })), children: ctaLabel }) })), jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 mt-1", children: [jsxRuntime.jsx("span", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: new Date().toLocaleTimeString(timeLocale, {
-                                            hour: "2-digit",
-                                            minute: "2-digit",
-                                        }) }), jsxRuntime.jsx(IconComponent, { "aria-hidden": true, icon: "solar:check-read-linear", size: "sm", className: "shrink-0 text-gray-600 dark:text-gray-400" })] })] }) }) })] }));
+                                        }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs", children: showFullCaption ? t.viewLess : t.viewMore })), jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1 mt-1", children: [jsxRuntime.jsx("span", { className: "text-[10px] text-gray-600 dark:text-gray-400 tabular-nums", children: new Date().toLocaleTimeString(timeLocale, {
+                                                    hour: "2-digit",
+                                                    minute: "2-digit",
+                                                }) }), jsxRuntime.jsx(IconComponent, { "aria-hidden": true, icon: "solar:check-read-linear", size: "sm", className: "shrink-0 text-gray-600 dark:text-gray-400" })] })] }), resolvedActions.length > 0 && (jsxRuntime.jsx("div", { className: "".concat(bubbleOutdent, " mt-1 flex flex-col border-t border-black/[0.08] dark:border-white/[0.12]"), children: resolvedActions.map(function (action, index) {
+                                    var _a;
+                                    var emphasis = (_a = action.emphasis) !== null && _a !== void 0 ? _a : "primary";
+                                    var toneClass = action.type === "list"
+                                        ? ACTION_PRIMARY_CLASS
+                                        : emphasis === "muted"
+                                            ? ACTION_MUTED_CLASS
+                                            : ACTION_PRIMARY_CLASS;
+                                    return (jsxRuntime.jsxs("button", { type: "button", className: "w-full flex flex-row items-center justify-center gap-2.5 py-2.5 px-3 text-sm font-medium leading-5 bg-transparent ".concat(toneClass, " border-t border-black/[0.06] dark:border-white/[0.08] first:border-t-0 hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-colors"), onClick: function (e) {
+                                            if (action.type === "list") {
+                                                e.stopPropagation();
+                                                setOpenListSheetIndex(index);
+                                            }
+                                        }, children: [jsxRuntime.jsx("span", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center [&>span]:flex [&>span]:size-full [&>span]:items-center [&>span]:justify-center", "aria-hidden": true, children: jsxRuntime.jsx(IconComponent, { icon: actionIconForType(action.type), className: "text-current [&_svg]:block", size: "sm" }) }), jsxRuntime.jsx("span", { className: "min-w-0 text-center leading-5", children: action.title })] }, "".concat(action.type, "-").concat(action.title, "-").concat(index)));
+                                }) }))] }) }) }), isListSheetOpen && listSheetAction && openListSheetIndex !== null ? (jsxRuntime.jsx(ListMessageSheet, { action: listSheetAction, onClose: closeListSheet, onPick: function (item) {
+                    onListItemPick === null || onListItemPick === void 0 ? void 0 : onListItemPick({
+                        actionIndex: openListSheetIndex,
+                        item: item,
+                    });
+                    closeListSheet();
+                }, translations: t })) : null] }));
 };
 
 /**

package/dist/index.esm.js

@@ -5401,6 +5401,55 @@ var UploadFile = function (_a) {
 };
 UploadFile.displayName = "UploadFile";
 
+function resolvePreviewActions(previewAction, ctaType, ctaLabel, ctaValue) {
+    var _a;
+    var fromProp = (_a = previewAction === null || previewAction === void 0 ? void 0 : previewAction.filter(function (a) {
+        var _a;
+        if (!((_a = a.title) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return false;
+        }
+        if (a.type === "list") {
+            return Array.isArray(a.listItems) && a.listItems.length > 0;
+        }
+        return true;
+    })) !== null && _a !== void 0 ? _a : [];
+    if (fromProp.length > 0) {
+        return fromProp;
+    }
+    if (ctaType && ctaLabel && ctaValue) {
+        var isPhone = ctaType === "CALL_NOW" || ctaType.toLowerCase() === "phone";
+        return [
+            __assign({ type: isPhone ? "phone" : "url", title: ctaLabel }, (isPhone ? { value: ctaValue } : { url: ctaValue, value: ctaValue })),
+        ];
+    }
+    return [];
+}
+/** Verdes alineados con WhatsApp (claro / oscuro); icono hereda con `text-current` */
+var ACTION_PRIMARY_CLASS = "text-[#008069] dark:text-[#00A884]";
+var ACTION_MUTED_CLASS = "text-gray-600 dark:text-gray-400";
+function actionIconForType(type) {
+    switch (type) {
+        case "phone":
+            return "solar:phone-bold";
+        case "quick_reply":
+            return "solar:reply-bold";
+        case "list":
+            return "solar:list-bold";
+        default:
+            return "solar:square-share-line-bold";
+    }
+}
+var ListMessageSheet = function (_a) {
+    var _b, _c, _d;
+    var action = _a.action, onClose = _a.onClose, onPick = _a.onPick, translations = _a.translations;
+    var items = (_b = action.listItems) !== null && _b !== void 0 ? _b : [];
+    var headerTitle = (_c = action.listHeaderTitle) !== null && _c !== void 0 ? _c : action.title;
+    var footerHint = (_d = action.listFooterHint) !== null && _d !== void 0 ? _d : translations.listSelectHintDefault;
+    return (jsxs("div", { className: "absolute inset-0 z-40 flex flex-col justify-end pointer-events-auto", role: "presentation", children: [jsx("button", { type: "button", className: "absolute inset-0 z-40 bg-black/45 dark:bg-black/60 border-0 cursor-pointer p-0 m-0", onClick: onClose, "aria-label": translations.listCloseAriaLabel }), jsxs("div", { className: "relative z-50 mx-1 mb-1 rounded-2xl bg-white dark:bg-[#1f1f1f] shadow-2xl flex flex-col max-h-[min(52vh,420px)] overflow-hidden ring-1 ring-black/5 dark:ring-white/10", children: [jsxs("div", { className: "flex items-center justify-center relative shrink-0 px-10 pt-3 pb-2.5 border-b border-black/[0.08] dark:border-white/[0.12]", children: [jsx("span", { className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100 text-center", children: headerTitle }), jsx("button", { type: "button", onClick: onClose, className: "absolute right-2 top-1.5 p-1.5 rounded-full text-gray-500 hover:bg-black/[0.06] dark:text-gray-400 dark:hover:bg-white/[0.08]", "aria-label": translations.listCloseAriaLabel, children: jsx(IconComponent, { icon: "solar:close-circle-bold", className: "text-current", size: "lg" }) })] }), jsx("div", { className: "overflow-y-auto flex-1 min-h-0", children: items.map(function (item, rowIndex) {
+                            var _a;
+                            return (jsxs("button", { type: "button", onClick: function () { return onPick(item); }, className: "w-full text-left flex gap-3 px-4 py-3 border-t border-black/[0.06] dark:border-white/[0.08] first:border-t-0 hover:bg-black/[0.04] dark:hover:bg-white/[0.05] transition-colors", children: [item.emoji || item.icon ? (jsx("div", { className: "shrink-0 w-9 inline-flex items-center justify-center self-start", children: item.emoji ? (jsx("span", { className: "text-xl leading-none", "aria-hidden": true, children: item.emoji })) : item.icon ? (jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center [&>span]:flex [&>span]:size-full [&>span]:items-center [&>span]:justify-center", children: jsx(IconComponent, { icon: item.icon, className: "text-gray-600 dark:text-gray-300 [&_svg]:block", size: "sm" }) })) : null })) : null, jsxs("div", { className: "min-w-0 flex-1", children: [jsx("p", { className: "text-[15px] font-semibold text-gray-900 dark:text-gray-100 leading-snug", children: item.title }), item.description ? (jsx("p", { className: "text-[13px] text-gray-600 dark:text-gray-400 mt-0.5 leading-snug", children: item.description })) : null] })] }, (_a = item.id) !== null && _a !== void 0 ? _a : "".concat(item.title, "-").concat(rowIndex)));
+                        }) }), footerHint ? (jsx("p", { className: "shrink-0 text-center text-[11px] text-gray-500 dark:text-gray-500 px-4 py-2.5 border-t border-black/[0.06] dark:border-white/[0.08]", children: footerHint })) : null] })] }));
+};
 var DEFAULT_TRANSLATIONS$3 = {
     businessName: "Tu Negocio",
     businessInitials: "TN",
@@ -5408,10 +5457,12 @@ var DEFAULT_TRANSLATIONS$3 = {
     imageAlt: "Vista previa de mensaje WhatsApp",
     viewMore: "ver mas",
     viewLess: "ver menos",
+    listCloseAriaLabel: "Cerrar",
+    listSelectHintDefault: "Pulsa una opción para elegir",
 };
 /**
  * WhatsAppPreview - Displays a realistic WhatsApp message bubble preview.
- * Supports image, caption, CTA buttons, and compact/full variants.
+ * Supports image, caption, acciones de plantilla (`previewAction` o CTA legacy), y variantes compact/full.
  *
  * @component
  * @example
@@ -5425,8 +5476,13 @@ var DEFAULT_TRANSLATIONS$3 = {
  * ```
  */
 var WhatsAppPreview = function (_a) {
-    var imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "compact" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? false : _c, maxCaptionLength = _a.maxCaptionLength, onToggleCaption = _a.onToggleCaption, _d = _a.showFullCaption, showFullCaption = _d === void 0 ? false : _d, ctaType = _a.ctaType, ctaLabel = _a.ctaLabel, ctaValue = _a.ctaValue, _e = _a.campaignView, campaignView = _e === void 0 ? false : _e, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.timeLocale, timeLocale = _h === void 0 ? "es-ES" : _h;
+    var imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "compact" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? false : _c, maxCaptionLength = _a.maxCaptionLength, onToggleCaption = _a.onToggleCaption, _d = _a.showFullCaption, showFullCaption = _d === void 0 ? false : _d, ctaType = _a.ctaType, ctaLabel = _a.ctaLabel, ctaValue = _a.ctaValue, previewAction = _a.previewAction, _e = _a.campaignView, campaignView = _e === void 0 ? false : _e, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.timeLocale, timeLocale = _h === void 0 ? "es-ES" : _h, onListItemPick = _a.onListItemPick;
     var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
+    var _j = useState(null), openListSheetIndex = _j[0], setOpenListSheetIndex = _j[1];
+    var closeListSheet = useCallback(function () {
+        setOpenListSheetIndex(null);
+    }, []);
+    var resolvedActions = useMemo(function () { return resolvePreviewActions(previewAction, ctaType, ctaLabel, ctaValue); }, [previewAction, ctaType, ctaLabel, ctaValue]);
     var shouldTruncate = maxCaptionLength && caption.length > maxCaptionLength;
     var displayCaption = campaignView
         ? caption
@@ -5443,21 +5499,44 @@ var WhatsAppPreview = function (_a) {
             : "max-h-64";
     var imageAspectRatio = campaignView ? "1/1" : undefined;
     var bubblePadding = variant === "compact" ? "p-2.5" : "p-3";
-    return (jsxs("div", { className: "w-full h-full flex flex-col bg-[#ECE5DD] dark:bg-gray-900 ".concat(paddingClass, " justify-start ").concat(className), style: containerStyle, children: [showHeader && (jsxs("div", { className: "flex items-center gap-3 mb-4 p-3 bg-[#075E54] dark:bg-[#1F2C33] rounded-t-lg -mx-4 -mt-4", children: [jsx("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", children: jsx("span", { className: "text-gray-600 text-sm font-bold", children: t.businessInitials }) }), jsxs("div", { className: "flex-1", children: [jsx("span", { className: "text-sm font-semibold text-white", children: t.businessName }), jsx("p", { className: "text-xs text-gray-300", children: t.onlineStatus })] })] })), jsx("div", { className: "flex flex-col gap-2 ".concat(showHeader ? "mt-6 overflow-y-auto flex-1" : "", " items-start"), children: jsx("div", { className: "mr-auto max-w-[85%]", children: jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg ".concat(bubblePadding, " shadow-sm"), children: [imageUrl && (jsx("div", { className: "rounded-lg overflow-hidden ".concat(imageMargin), style: imageAspectRatio
+    var bubbleOutdent = variant === "compact" ? "-mx-2.5" : "-mx-3";
+    var listSheetAction = openListSheetIndex !== null
+        ? resolvedActions[openListSheetIndex]
+        : undefined;
+    var isListSheetOpen = (listSheetAction === null || listSheetAction === void 0 ? void 0 : listSheetAction.type) === "list" &&
+        Array.isArray(listSheetAction.listItems) &&
+        listSheetAction.listItems.length > 0;
+    return (jsxs("div", { className: "relative w-full h-full flex flex-col bg-[#ECE5DD] dark:bg-gray-900 ".concat(paddingClass, " justify-start ").concat(className), style: containerStyle, children: [showHeader && (jsxs("div", { className: "flex items-center gap-3 mb-4 p-3 bg-[#075E54] dark:bg-[#1F2C33] rounded-t-lg -mx-4 -mt-4", children: [jsx("div", { className: "w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center", children: jsx("span", { className: "text-gray-600 text-sm font-bold", children: t.businessInitials }) }), jsxs("div", { className: "flex-1", children: [jsx("span", { className: "text-sm font-semibold text-white", children: t.businessName }), jsx("p", { className: "text-xs text-gray-300", children: t.onlineStatus })] })] })), jsx("div", { className: "flex flex-col gap-2 ".concat(showHeader ? "mt-6 overflow-y-auto flex-1" : "", " items-start"), children: jsx("div", { className: "mr-auto max-w-[85%]", children: jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg ".concat(bubblePadding, " shadow-sm"), children: [imageUrl && (jsx("div", { className: "rounded-lg overflow-hidden ".concat(imageMargin), style: imageAspectRatio
                                     ? { aspectRatio: imageAspectRatio }
                                     : undefined, children: jsx(Image$1, { src: imageUrl, alt: t.imageAlt, className: "w-full ".concat(imageHeight, " object-cover") }) })), jsxs("div", { className: "text-sm text-gray-900 dark:text-white text-left ".concat(imageUrl ? "mt-2" : ""), children: [jsx("div", { className: "".concat(showFullCaption && variant === "compact" ? "overflow-y-auto" : "", " ").concat(campaignView ? (imageUrl ? "line-clamp-3" : "line-clamp-[12]") : ""), style: {
-                                            maxHeight: showFullCaption && variant === "compact"
-                                                ? "150px"
-                                                : "none",
-                                        }, children: jsx("span", { className: "whitespace-pre-wrap font-sans break-words block text-left", children: displayCaption }) }), shouldTruncate &&
-                                        onToggleCaption &&
-                                        variant === "compact" && (jsx("button", { type: "button", onClick: function (e) {
+                                            maxHeight: showFullCaption && variant === "compact" ? "150px" : "none",
+                                        }, children: jsx("span", { className: "whitespace-pre-wrap font-sans break-words block text-left", children: displayCaption }) }), shouldTruncate && onToggleCaption && variant === "compact" && (jsx("button", { type: "button", onClick: function (e) {
                                             e.stopPropagation();
                                             onToggleCaption();
-                                        }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs", children: showFullCaption ? t.viewLess : t.viewMore }))] }), ctaType && ctaLabel && ctaValue && (jsx("div", { className: "mt-3 -mx-1", children: jsx(Button, { size: "sm", color: "primary", variant: "bordered", className: "w-full font-semibold", startContent: ctaType === "CALL_NOW" ? (jsx(IconComponent, { icon: "solar:phone-bold", className: "text-sm" })) : (jsx(IconComponent, { icon: "solar:link-bold", className: "text-sm" })), children: ctaLabel }) })), jsxs("div", { className: "flex items-center justify-end gap-1 mt-1", children: [jsx("span", { className: "text-[10px] text-gray-600 dark:text-gray-400", children: new Date().toLocaleTimeString(timeLocale, {
-                                            hour: "2-digit",
-                                            minute: "2-digit",
-                                        }) }), jsx(IconComponent, { "aria-hidden": true, icon: "solar:check-read-linear", size: "sm", className: "shrink-0 text-gray-600 dark:text-gray-400" })] })] }) }) })] }));
+                                        }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs", children: showFullCaption ? t.viewLess : t.viewMore })), jsxs("div", { className: "flex items-center justify-end gap-1 mt-1", children: [jsx("span", { className: "text-[10px] text-gray-600 dark:text-gray-400 tabular-nums", children: new Date().toLocaleTimeString(timeLocale, {
+                                                    hour: "2-digit",
+                                                    minute: "2-digit",
+                                                }) }), jsx(IconComponent, { "aria-hidden": true, icon: "solar:check-read-linear", size: "sm", className: "shrink-0 text-gray-600 dark:text-gray-400" })] })] }), resolvedActions.length > 0 && (jsx("div", { className: "".concat(bubbleOutdent, " mt-1 flex flex-col border-t border-black/[0.08] dark:border-white/[0.12]"), children: resolvedActions.map(function (action, index) {
+                                    var _a;
+                                    var emphasis = (_a = action.emphasis) !== null && _a !== void 0 ? _a : "primary";
+                                    var toneClass = action.type === "list"
+                                        ? ACTION_PRIMARY_CLASS
+                                        : emphasis === "muted"
+                                            ? ACTION_MUTED_CLASS
+                                            : ACTION_PRIMARY_CLASS;
+                                    return (jsxs("button", { type: "button", className: "w-full flex flex-row items-center justify-center gap-2.5 py-2.5 px-3 text-sm font-medium leading-5 bg-transparent ".concat(toneClass, " border-t border-black/[0.06] dark:border-white/[0.08] first:border-t-0 hover:bg-black/[0.03] dark:hover:bg-white/[0.04] transition-colors"), onClick: function (e) {
+                                            if (action.type === "list") {
+                                                e.stopPropagation();
+                                                setOpenListSheetIndex(index);
+                                            }
+                                        }, children: [jsx("span", { className: "inline-flex h-5 w-5 shrink-0 items-center justify-center [&>span]:flex [&>span]:size-full [&>span]:items-center [&>span]:justify-center", "aria-hidden": true, children: jsx(IconComponent, { icon: actionIconForType(action.type), className: "text-current [&_svg]:block", size: "sm" }) }), jsx("span", { className: "min-w-0 text-center leading-5", children: action.title })] }, "".concat(action.type, "-").concat(action.title, "-").concat(index)));
+                                }) }))] }) }) }), isListSheetOpen && listSheetAction && openListSheetIndex !== null ? (jsx(ListMessageSheet, { action: listSheetAction, onClose: closeListSheet, onPick: function (item) {
+                    onListItemPick === null || onListItemPick === void 0 ? void 0 : onListItemPick({
+                        actionIndex: openListSheetIndex,
+                        item: item,
+                    });
+                    closeListSheet();
+                }, translations: t })) : null] }));
 };
 
 /**

package/dist/types/components/whatsapp-preview/WhatsAppPreview.d.ts

@@ -2,7 +2,7 @@ import type React from "react";
 import type { WhatsAppPreviewProps } from "./WhatsAppPreview.types";
 /**
  * WhatsAppPreview - Displays a realistic WhatsApp message bubble preview.
- * Supports image, caption, CTA buttons, and compact/full variants.
+ * Supports image, caption, acciones de plantilla (`previewAction` o CTA legacy), y variantes compact/full.
  *
  * @component
  * @example

package/dist/types/components/whatsapp-preview/WhatsAppPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsAppPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/WhatsAppPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EACX,oBAAoB,EAEpB,MAAM,yBAAyB,CAAC;AAWjC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmK1D,CAAC"}
+{"version":3,"file":"WhatsAppPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/WhatsAppPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAGX,oBAAoB,EAEpB,MAAM,yBAAyB,CAAC;AA6JjC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwN1D,CAAC"}

package/dist/types/components/whatsapp-preview/WhatsAppPreview.types.d.ts

@@ -1,3 +1,43 @@
+/** Opcion dentro de una accion tipo lista (list message / selector). */
+export interface WhatsAppPreviewListItem {
+    id?: string;
+    title: string;
+    description?: string;
+    /** Emoji o caracter visible a la izquierda (ej. señal, TV). */
+    emoji?: string;
+    /** Icono Iconify si no hay `emoji` */
+    icon?: string;
+}
+/** Accion de plantilla (CTA / respuesta rapida / lista) para el preview; el consumidor mapea el JSON del backend a esta forma. */
+export interface WhatsAppPreviewAction {
+    /**
+     * `url` — enlace externo (icono tipo “abrir enlace”).
+     * `quick_reply` — respuesta rapida (icono tipo respuesta).
+     * `phone` — llamada.
+     * `list` — abre hoja inferior con opciones (list message).
+     */
+    type: "url" | "phone" | "quick_reply" | "list";
+    /**
+     * Texto del boton en la burbuja.
+     * Para `list`, suele ser el disparador (ej. "Selecciona").
+     */
+    title: string;
+    /** URL si type es "url" (si falta, se usa `value`) */
+    url?: string;
+    /** Telefono si type es "phone"; para "url" puede usarse como URL alternativa */
+    value?: string;
+    /**
+     * Enfoque visual (como en WhatsApp: principal en verde marca, secundario en gris).
+     * Por defecto `primary`. No aplica a `list` (siempre estilo lista verde).
+     */
+    emphasis?: "primary" | "muted";
+    /** Si type es `list`: titulo en la hoja (por defecto el mismo `title` del boton). */
+    listHeaderTitle?: string;
+    /** Si type es `list`: filas de la hoja (obligatorio al menos uno). */
+    listItems?: WhatsAppPreviewListItem[];
+    /** Texto pie de la hoja (ej. instruccion al usuario). */
+    listFooterHint?: string;
+}
 export interface WhatsAppPreviewTranslations {
     /** Business name displayed in header */
     businessName?: string;
@@ -11,6 +51,10 @@ export interface WhatsAppPreviewTranslations {
     viewMore?: string;
     /** "View less" text for caption truncation */
     viewLess?: string;
+    /** aria-label del boton cerrar en la hoja de lista */
+    listCloseAriaLabel?: string;
+    /** Pie de la hoja de lista si no se pasa por accion */
+    listSelectHintDefault?: string;
 }
 export interface WhatsAppPreviewProps {
     /** URL of the image to display */
@@ -33,6 +77,16 @@ export interface WhatsAppPreviewProps {
     ctaLabel?: string;
     /** CTA button value (phone number or URL) */
     ctaValue?: string;
+    /**
+     * Lista de acciones (botones) tipo plantilla WhatsApp.
+     * Si tiene al menos un elemento con `title` no vacio, tiene prioridad sobre `ctaType` / `ctaLabel` / `ctaValue`.
+     */
+    previewAction?: WhatsAppPreviewAction[];
+    /** Tras elegir una fila en una accion `list`, el consumidor puede reaccionar (p. ej. analytics). */
+    onListItemPick?: (detail: {
+        actionIndex: number;
+        item: WhatsAppPreviewListItem;
+    }) => void;
     /** If true, shows square image and more text lines (for campaigns) */
     campaignView?: boolean;
     /** Translations for i18n support */

package/dist/types/components/whatsapp-preview/WhatsAppPreview.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsAppPreview.types.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/WhatsAppPreview.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,2BAA2B;IAC3C,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACpC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"WhatsAppPreview.types.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/WhatsAppPreview.types.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,MAAM,WAAW,uBAAuB;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,kIAAkI;AAClI,MAAM,WAAW,qBAAqB;IACrC;;;;;OAKG;IACH,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC;IAC/C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC/B,qFAAqF;IACrF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sEAAsE;IACtE,SAAS,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACtC,yDAAyD;IACzD,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,2BAA2B;IAC3C,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACpC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACxC,oGAAoG;IACpG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE;QACzB,WAAW,EAAE,MAAM,CAAC;QACpB,IAAI,EAAE,uBAAuB,CAAC;KAC9B,KAAK,IAAI,CAAC;IACX,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oCAAoC;IACpC,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/types/components/whatsapp-preview/index.d.ts

@@ -1,3 +1,3 @@
 export { WhatsAppPreview } from "./WhatsAppPreview.js";
-export type { WhatsAppPreviewProps, WhatsAppPreviewTranslations, } from "./WhatsAppPreview.types.js";
+export type { WhatsAppPreviewAction, WhatsAppPreviewListItem, WhatsAppPreviewProps, WhatsAppPreviewTranslations, } from "./WhatsAppPreview.types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/whatsapp-preview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACX,oBAAoB,EACpB,2BAA2B,GAC3B,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/whatsapp-preview/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EACX,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,2BAA2B,GAC3B,MAAM,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.11",
+	"version": "0.6.12",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",