@beweco/aurora-ui 0.1.24 → 0.1.25

package/dist/index.cjs.js

@@ -177,7 +177,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$b = {
+var defaultTranslations$d = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -201,7 +201,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$b), translations);
+    var t = __assign(__assign({}, defaultTranslations$d), translations);
     var _b = React.useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -271,7 +271,7 @@ var P = function (_a) {
     return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$a = {
+var defaultTranslations$c = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -325,7 +325,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$c), translations);
     var _h = React.useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = React.useMemo(function () {
         var _a;
@@ -989,6 +989,227 @@ var Chip = function (_a) {
     return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
+// Default translations in Spanish
+var defaultTranslations$b = {
+    emptyStateMessage: "No hay contenido disponible",
+    emptyStateButtonText: "Agregar contenido",
+    previousButtonLabel: "Anterior",
+    nextButtonLabel: "Siguiente",
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    goToItemLabel: "Ir al item",
+};
+/**
+ * ContentCarousel - Generic 3D carousel component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContentCarousel
+ *   items={items}
+ *   onItemClick={handleItemClick}
+ *   renderFooter={({ item }) => <div>Footer content</div>}
+ * />
+ * ```
+ */
+var ContentCarousel = function (_a) {
+    var items = _a.items, onItemClick = _a.onItemClick, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "" : _c, _d = _a.translations, translations = _d === void 0 ? {} : _d, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody;
+    var t = __assign(__assign({}, defaultTranslations$b), translations);
+    var _e = React.useState(items.length >= 3 ? 1 : 0), activeIndex = _e[0], setActiveIndex = _e[1];
+    // Reset to show 3 images when items change
+    React.useEffect(function () {
+        setActiveIndex(items.length >= 3 ? 1 : 0);
+    }, [items.length]);
+    var handleNext = React.useCallback(function () {
+        setActiveIndex(function (prev) { return Math.min(prev + 1, items.length - 1); });
+    }, [items.length]);
+    var handlePrev = React.useCallback(function () {
+        setActiveIndex(function (prev) { return Math.max(prev - 1, 0); });
+    }, []);
+    // Get position of card relative to active index
+    var getPosition = function (index) {
+        if (index === activeIndex) {
+            return "center";
+        }
+        if (index === activeIndex - 1) {
+            return "left";
+        }
+        if (index === activeIndex + 1) {
+            return "right";
+        }
+        return "hidden";
+    };
+    var handleItemClick = React.useCallback(function (item) {
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    }, [onItemClick]);
+    // Empty state when no items
+    if (items.length === 0) {
+        return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 gap-6 ".concat(className), children: [jsxRuntime.jsx("p", { className: "text-default-500 text-center", children: t.emptyStateMessage }), emptyStateRedirectPath && (jsxRuntime.jsx(react.Button, { color: "primary", variant: "solid", size: "md", onPress: function () {
+                        if (typeof window !== "undefined") {
+                            window.location.href = emptyStateRedirectPath;
+                        }
+                    }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold", className: "w-5 h-5" }), children: t.emptyStateButtonText }))] }));
+    }
+    return (jsxRuntime.jsx("div", { className: "relative w-full ".concat(className), children: jsxRuntime.jsxs("div", { className: "relative w-full pt-4 pb-8", children: [jsxRuntime.jsxs("div", { className: "relative h-[450px] flex items-center justify-center overflow-hidden", children: [items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 z-20 ml-4", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handlePrev, isDisabled: activeIndex === 0, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:-translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.previousButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-left-outline", className: "w-6 h-6" }) }) }), jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-20 mr-4", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handleNext, isDisabled: activeIndex === items.length - 1, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.nextButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-right-outline", className: "w-6 h-6" }) }) })] })), items.map(function (item, index) {
+                            var position = getPosition(index);
+                            if (position === "hidden") {
+                                return null;
+                            }
+                            return (jsxRuntime.jsx(CarouselItemComponent, { item: item, position: position, onClick: function () { return handleItemClick(item); }, translations: t, renderFooter: renderFooter, renderHeader: renderHeader, renderBody: renderBody }, item.id));
+                        })] }), items.length > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx("div", { className: "flex justify-center gap-2", children: items.map(function (_, index) { return (jsxRuntime.jsx("button", { type: "button", onClick: function () { return setActiveIndex(index); }, className: "rounded-full transition-all duration-300 hover:scale-110 ".concat(index === activeIndex
+                                ? "w-8 h-2 bg-gradient-to-r from-primary-500 to-primary-600 shadow-lg shadow-primary-500/50"
+                                : "w-2 h-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 hover:w-3"), "aria-label": "".concat(t.goToItemLabel, " ").concat(index + 1) }, index)); }) }) }))] }) }));
+};
+/**
+ * Internal carousel item component
+ * Renders a single card with customizable content
+ * @internal
+ */
+function CarouselItemComponent(_a) {
+    var item = _a.item, position = _a.position, onClick = _a.onClick, translations = _a.translations, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody;
+    var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var captionText = item.caption || item.title;
+    // Get styles based on position
+    var getPositionStyles = function () {
+        var baseStyles = {
+            minHeight: "400px",
+            maxHeight: "400px",
+            boxShadow: "0 10px 40px -5px rgba(0, 0, 0, 0.3), 0 8px 25px -8px rgba(0, 0, 0, 0.2)",
+        };
+        if (position === "center") {
+            return __assign(__assign({}, baseStyles), { width: "500px", transform: "scale(1)", opacity: 1, zIndex: 10 });
+        }
+        if (position === "left") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(-115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        if (position === "right") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        return baseStyles;
+    };
+    return (jsxRuntime.jsxs("div", { className: "absolute rounded-3xl shadow-lg transition-all duration-500 ease-in-out flex flex-col overflow-hidden", style: getPositionStyles(), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: [item.imageUrl ? (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-cover bg-center transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
+                    backgroundImage: "url(".concat(item.imageUrl, ")"),
+                } })) : (jsxRuntime.jsx("div", { className: "absolute inset-0 transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
+                    background: item.gradient,
+                } })), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b transition-all duration-500 ease-in-out ".concat(isHovered
+                    ? "from-black/70 via-black/60 to-black/80"
+                    : "from-black/40 via-black/20 to-black/50") }), renderHeader && (jsxRuntime.jsx("div", { className: "absolute top-4 left-4 right-4 z-20", children: renderHeader({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                }) })), renderBody ? (jsxRuntime.jsx("div", { className: "relative w-full h-full z-10", children: renderBody(item, isHovered) })) : (jsxRuntime.jsxs("button", { type: "button", onClick: onClick, className: "relative w-full h-full cursor-pointer flex flex-col justify-between p-6 z-10", "aria-label": item.title, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("h3", { className: "text-white text-3xl font-semibold mb-2 text-left drop-shadow-lg", children: item.title }) }), jsxRuntime.jsx("div", { className: "space-y-3 overflow-hidden", children: jsxRuntime.jsx("p", { className: "text-white text-sm text-left drop-shadow-md transition-all duration-500 ease-in-out ".concat(!isHovered && "line-clamp-2"), children: captionText }) })] })), renderFooter && (function () {
+                var footerContent = renderFooter({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                });
+                // Only render if there's actual content
+                if (footerContent) {
+                    return (jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 right-4 z-20", children: footerContent }));
+                }
+                return null;
+            })()] }));
+}
+
+// Default translations in Spanish
+var defaultTranslations$a = {
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    instagramLabel: "Instagram",
+    storyLabel: "Story",
+    tiktokLabel: "TikTok",
+    whatsappLabel: "WhatsApp",
+};
+/**
+ * SocialMediaBar - Independent bar component for social media badges and actions
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaBar
+ *   platform="instagram-post"
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaBar = function (_a) {
+    var platform = _a.platform, _b = _a.badgeOnly, badgeOnly = _b === void 0 ? false : _b, _c = _a.showPreview, showPreview = _c === void 0 ? false : _c, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, onPreview = _a.onPreview, _d = _a.actionsAlwaysVisible, actionsAlwaysVisible = _d === void 0 ? false : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g, customBadge = _a.customBadge, customActions = _a.customActions;
+    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    // Determine visibility of actions
+    var showActions = actionsAlwaysVisible || isHovered;
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between ".concat(className), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [customBadge || (jsxRuntime.jsxs("div", { className: "backdrop-blur-xl border border-white/30 rounded-full px-3 py-1.5 shadow-xl flex items-center gap-2", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, children: [platform === "instagram-post" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-pink-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.instagramLabel })] })), platform === "instagram-story" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-purple-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.storyLabel })] })), platform === "tiktok-video" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "ic:baseline-tiktok", className: "w-4 h-4 text-white" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.tiktokLabel })] })), (platform === "whatsapp" || platform === "whatsapp-message") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:whatsapp", className: "w-4 h-4 text-green-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.whatsappLabel })] }))] })), showPreview && onPreview && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                            e.stopPropagation();
+                            onPreview();
+                        }, className: "backdrop-blur-xl border border-white/30 rounded-lg w-8 h-8 shadow-xl flex items-center justify-center hover:scale-110 transition-all duration-200", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, "aria-label": t.previewButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:eye-bold", className: "w-4 h-4 text-white" }) }))] }), !badgeOnly && (jsxRuntime.jsx("div", { className: "flex items-center gap-2 transition-opacity duration-500 ease-in-out ".concat(showActions ? "opacity-100" : "opacity-0 pointer-events-none"), children: customActions || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onEdit && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "flat", size: "sm", onPress: onEdit, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.editButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-outline", className: "w-4 h-4 transition-transform duration-200 hover:rotate-12" }) })), onDelete && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "flat", size: "sm", onPress: onDelete, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.deleteButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline", className: "w-4 h-4 transition-transform duration-200 hover:scale-110" }) })), onPublish && (jsxRuntime.jsx(react.Button, { variant: "solid", color: "primary", size: "sm", onPress: onPublish, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:plain-3-bold", className: "w-3.5 h-3.5 transition-transform duration-200" }), "aria-label": t.publishButtonLabel, className: "text-xs shadow-md transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 active:scale-95", children: t.publishButtonLabel }))] })) }))] }));
+};
+
+// Inject CSS animations for audience info
+if (typeof document !== "undefined") {
+    var style = document.createElement("style");
+    style.textContent = "\n  @keyframes pulse-subtle {\n    0%, 100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n    50% {\n      transform: scale(1.05);\n      opacity: 0.95;\n    }\n  }\n  \n  @keyframes fade-in {\n    from {\n      opacity: 0;\n      transform: translateX(-5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  \n  .animate-fade-in {\n    animation: fade-in 0.3s ease-out;\n  }\n";
+    if (!document.head.querySelector("#social-carousel-animations")) {
+        style.id = "social-carousel-animations";
+        document.head.appendChild(style);
+    }
+}
+/**
+ * SocialMediaCarousel - Specialized carousel variant for social media content
+ * Extends ContentCarousel with social media specific features
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaCarousel
+ *   items={socialMediaItems}
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaCarousel = function (_a) {
+    var items = _a.items, onItemClick = _a.onItemClick, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "/contenidos-ai/crear-contenido" : _c; _a.compactHeader; _a.campaignView; var _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.hideFooter, hideFooter = _g === void 0 ? false : _g, _h = _a.hideAudienceInfo, hideAudienceInfo = _h === void 0 ? false : _h;
+    var handlePreview = React.useCallback(function (item) {
+        console.log("Preview:", item);
+        // This could be extended to open a preview modal
+    }, []);
+    // Custom footer renderer with audience info + SocialMediaBar
+    var renderSocialFooterWithAudience = React.useCallback(function (_a) {
+        var item = _a.item, isHovered = _a.isHovered, translations = _a.translations;
+        var socialItem = item;
+        var showAudience = !hideAudienceInfo && socialItem.targetAudienceCount;
+        return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [showAudience && (jsxRuntime.jsxs("div", { className: "backdrop-blur-xl border border-white/30 shadow-xl flex items-center transition-all duration-500 ".concat(isHovered
+                        ? "bg-gradient-to-br from-white/40 to-white/30 rounded-2xl px-4 py-2.5 gap-3 max-w-md"
+                        : "bg-gradient-to-br from-white/30 to-white/20 rounded-3xl px-3 py-1.5 gap-1.5 w-fit"), style: {
+                        animation: isHovered
+                            ? "none"
+                            : "pulse-subtle 3s ease-in-out infinite",
+                    }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:users-group-rounded-bold", className: "w-3.5 h-3.5 text-white transition-transform duration-300 hover:scale-110" }), jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-white transition-all duration-500 ".concat(isHovered
+                                        ? "opacity-100 max-w-20"
+                                        : "opacity-100 max-w-20 whitespace-nowrap"), children: socialItem.targetAudienceCount.toLocaleString("es-ES") })] }), socialItem.audienceReason && isHovered && (jsxRuntime.jsx("div", { className: "text-[11px] text-white/95 leading-relaxed animate-fade-in", children: socialItem.audienceReason })), socialItem.requiredTags &&
+                            socialItem.requiredTags.length > 0 &&
+                            isHovered && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2 pt-2 border-t border-white/20 animate-fade-in", children: socialItem.requiredTags.map(function (tag, idx) { return (jsxRuntime.jsx("span", { className: "text-[9px] px-1.5 py-0.5 rounded-md bg-white/20 text-white/95 backdrop-blur-sm border border-white/30", children: tag }, idx)); }) }))] })), !hideFooter && (jsxRuntime.jsx(SocialMediaBar, { platform: socialItem.type, isHovered: isHovered, showPreview: !!socialItem.imageUrl, onEdit: onEdit ? function () { return onEdit(socialItem); } : undefined, onDelete: onDelete ? function () { return onDelete(socialItem); } : undefined, onPublish: onPublish ? function () { return onPublish(socialItem); } : undefined, onPreview: function () { return handlePreview(socialItem); }, translations: {
+                        editButtonLabel: translations.editButtonLabel,
+                        deleteButtonLabel: translations.deleteButtonLabel,
+                        publishButtonLabel: translations.publishButtonLabel,
+                        previewButtonLabel: translations.previewButtonLabel,
+                    } }))] }));
+    }, [hideAudienceInfo, hideFooter, onEdit, onDelete, onPublish, handlePreview]);
+    return (jsxRuntime.jsx(ContentCarousel, { items: items, onItemClick: onItemClick, className: className, emptyStateRedirectPath: emptyStateRedirectPath, translations: translations, renderFooter: renderSocialFooterWithAudience }));
+};
+
 // Traducciones por defecto en español
 var defaultTranslations$9 = {
     dayOption: "Día específico",
@@ -4372,6 +4593,7 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.ColorSelector = ColorSelector;
+exports.ContentCarousel = ContentCarousel;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DateSelector = DateSelector;
@@ -4404,6 +4626,8 @@ exports.RowSteps = RowSteps;
 exports.ScheduleRow = ScheduleRow;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
+exports.SocialMediaBar = SocialMediaBar;
+exports.SocialMediaCarousel = SocialMediaCarousel;
 exports.SocialMediaPreview = SocialMediaPreview;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as Date
 export * from '@heroui/react';
 export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useId, useState, useCallback, useMemo, createContext, useContext, createElement, useRef, useEffect, useLayoutEffect } from 'react';
+import React, { useId, useState, useCallback, useMemo, createContext, useContext, useEffect, createElement, useRef, useLayoutEffect } from 'react';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area } from 'recharts';
@@ -178,7 +178,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$b = {
+var defaultTranslations$d = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -202,7 +202,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$b), translations);
+    var t = __assign(__assign({}, defaultTranslations$d), translations);
     var _b = useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -272,7 +272,7 @@ var P = function (_a) {
     return (jsx("p", __assign({ className: cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$a = {
+var defaultTranslations$c = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -326,7 +326,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$c), translations);
     var _h = useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = useMemo(function () {
         var _a;
@@ -990,6 +990,227 @@ var Chip = function (_a) {
     return (jsx(Chip$1, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
+// Default translations in Spanish
+var defaultTranslations$b = {
+    emptyStateMessage: "No hay contenido disponible",
+    emptyStateButtonText: "Agregar contenido",
+    previousButtonLabel: "Anterior",
+    nextButtonLabel: "Siguiente",
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    goToItemLabel: "Ir al item",
+};
+/**
+ * ContentCarousel - Generic 3D carousel component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContentCarousel
+ *   items={items}
+ *   onItemClick={handleItemClick}
+ *   renderFooter={({ item }) => <div>Footer content</div>}
+ * />
+ * ```
+ */
+var ContentCarousel = function (_a) {
+    var items = _a.items, onItemClick = _a.onItemClick, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "" : _c, _d = _a.translations, translations = _d === void 0 ? {} : _d, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody;
+    var t = __assign(__assign({}, defaultTranslations$b), translations);
+    var _e = useState(items.length >= 3 ? 1 : 0), activeIndex = _e[0], setActiveIndex = _e[1];
+    // Reset to show 3 images when items change
+    useEffect(function () {
+        setActiveIndex(items.length >= 3 ? 1 : 0);
+    }, [items.length]);
+    var handleNext = useCallback(function () {
+        setActiveIndex(function (prev) { return Math.min(prev + 1, items.length - 1); });
+    }, [items.length]);
+    var handlePrev = useCallback(function () {
+        setActiveIndex(function (prev) { return Math.max(prev - 1, 0); });
+    }, []);
+    // Get position of card relative to active index
+    var getPosition = function (index) {
+        if (index === activeIndex) {
+            return "center";
+        }
+        if (index === activeIndex - 1) {
+            return "left";
+        }
+        if (index === activeIndex + 1) {
+            return "right";
+        }
+        return "hidden";
+    };
+    var handleItemClick = useCallback(function (item) {
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    }, [onItemClick]);
+    // Empty state when no items
+    if (items.length === 0) {
+        return (jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 gap-6 ".concat(className), children: [jsx("p", { className: "text-default-500 text-center", children: t.emptyStateMessage }), emptyStateRedirectPath && (jsx(Button$1, { color: "primary", variant: "solid", size: "md", onPress: function () {
+                        if (typeof window !== "undefined") {
+                            window.location.href = emptyStateRedirectPath;
+                        }
+                    }, startContent: jsx(IconComponent, { icon: "solar:add-circle-bold", className: "w-5 h-5" }), children: t.emptyStateButtonText }))] }));
+    }
+    return (jsx("div", { className: "relative w-full ".concat(className), children: jsxs("div", { className: "relative w-full pt-4 pb-8", children: [jsxs("div", { className: "relative h-[450px] flex items-center justify-center overflow-hidden", children: [items.length > 1 && (jsxs(Fragment, { children: [jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 z-20 ml-4", children: jsx(Button$1, { isIconOnly: true, variant: "bordered", onPress: handlePrev, isDisabled: activeIndex === 0, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:-translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.previousButtonLabel, children: jsx(IconComponent, { icon: "solar:alt-arrow-left-outline", className: "w-6 h-6" }) }) }), jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-20 mr-4", children: jsx(Button$1, { isIconOnly: true, variant: "bordered", onPress: handleNext, isDisabled: activeIndex === items.length - 1, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.nextButtonLabel, children: jsx(IconComponent, { icon: "solar:alt-arrow-right-outline", className: "w-6 h-6" }) }) })] })), items.map(function (item, index) {
+                            var position = getPosition(index);
+                            if (position === "hidden") {
+                                return null;
+                            }
+                            return (jsx(CarouselItemComponent, { item: item, position: position, onClick: function () { return handleItemClick(item); }, translations: t, renderFooter: renderFooter, renderHeader: renderHeader, renderBody: renderBody }, item.id));
+                        })] }), items.length > 1 && (jsx("div", { className: "flex justify-center mt-4", children: jsx("div", { className: "flex justify-center gap-2", children: items.map(function (_, index) { return (jsx("button", { type: "button", onClick: function () { return setActiveIndex(index); }, className: "rounded-full transition-all duration-300 hover:scale-110 ".concat(index === activeIndex
+                                ? "w-8 h-2 bg-gradient-to-r from-primary-500 to-primary-600 shadow-lg shadow-primary-500/50"
+                                : "w-2 h-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 hover:w-3"), "aria-label": "".concat(t.goToItemLabel, " ").concat(index + 1) }, index)); }) }) }))] }) }));
+};
+/**
+ * Internal carousel item component
+ * Renders a single card with customizable content
+ * @internal
+ */
+function CarouselItemComponent(_a) {
+    var item = _a.item, position = _a.position, onClick = _a.onClick, translations = _a.translations, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody;
+    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var captionText = item.caption || item.title;
+    // Get styles based on position
+    var getPositionStyles = function () {
+        var baseStyles = {
+            minHeight: "400px",
+            maxHeight: "400px",
+            boxShadow: "0 10px 40px -5px rgba(0, 0, 0, 0.3), 0 8px 25px -8px rgba(0, 0, 0, 0.2)",
+        };
+        if (position === "center") {
+            return __assign(__assign({}, baseStyles), { width: "500px", transform: "scale(1)", opacity: 1, zIndex: 10 });
+        }
+        if (position === "left") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(-115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        if (position === "right") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        return baseStyles;
+    };
+    return (jsxs("div", { className: "absolute rounded-3xl shadow-lg transition-all duration-500 ease-in-out flex flex-col overflow-hidden", style: getPositionStyles(), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: [item.imageUrl ? (jsx("div", { className: "absolute inset-0 bg-cover bg-center transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
+                    backgroundImage: "url(".concat(item.imageUrl, ")"),
+                } })) : (jsx("div", { className: "absolute inset-0 transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
+                    background: item.gradient,
+                } })), jsx("div", { className: "absolute inset-0 bg-gradient-to-b transition-all duration-500 ease-in-out ".concat(isHovered
+                    ? "from-black/70 via-black/60 to-black/80"
+                    : "from-black/40 via-black/20 to-black/50") }), renderHeader && (jsx("div", { className: "absolute top-4 left-4 right-4 z-20", children: renderHeader({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                }) })), renderBody ? (jsx("div", { className: "relative w-full h-full z-10", children: renderBody(item, isHovered) })) : (jsxs("button", { type: "button", onClick: onClick, className: "relative w-full h-full cursor-pointer flex flex-col justify-between p-6 z-10", "aria-label": item.title, children: [jsx("div", { children: jsx("h3", { className: "text-white text-3xl font-semibold mb-2 text-left drop-shadow-lg", children: item.title }) }), jsx("div", { className: "space-y-3 overflow-hidden", children: jsx("p", { className: "text-white text-sm text-left drop-shadow-md transition-all duration-500 ease-in-out ".concat(!isHovered && "line-clamp-2"), children: captionText }) })] })), renderFooter && (function () {
+                var footerContent = renderFooter({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                });
+                // Only render if there's actual content
+                if (footerContent) {
+                    return (jsx("div", { className: "absolute bottom-4 left-4 right-4 z-20", children: footerContent }));
+                }
+                return null;
+            })()] }));
+}
+
+// Default translations in Spanish
+var defaultTranslations$a = {
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    instagramLabel: "Instagram",
+    storyLabel: "Story",
+    tiktokLabel: "TikTok",
+    whatsappLabel: "WhatsApp",
+};
+/**
+ * SocialMediaBar - Independent bar component for social media badges and actions
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaBar
+ *   platform="instagram-post"
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaBar = function (_a) {
+    var platform = _a.platform, _b = _a.badgeOnly, badgeOnly = _b === void 0 ? false : _b, _c = _a.showPreview, showPreview = _c === void 0 ? false : _c, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, onPreview = _a.onPreview, _d = _a.actionsAlwaysVisible, actionsAlwaysVisible = _d === void 0 ? false : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g, customBadge = _a.customBadge, customActions = _a.customActions;
+    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    // Determine visibility of actions
+    var showActions = actionsAlwaysVisible || isHovered;
+    return (jsxs("div", { className: "flex items-center justify-between ".concat(className), children: [jsxs("div", { className: "flex items-center gap-2", children: [customBadge || (jsxs("div", { className: "backdrop-blur-xl border border-white/30 rounded-full px-3 py-1.5 shadow-xl flex items-center gap-2", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, children: [platform === "instagram-post" && (jsxs(Fragment, { children: [jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-pink-400" }), jsx("span", { className: "text-xs font-medium text-white", children: t.instagramLabel })] })), platform === "instagram-story" && (jsxs(Fragment, { children: [jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-purple-400" }), jsx("span", { className: "text-xs font-medium text-white", children: t.storyLabel })] })), platform === "tiktok-video" && (jsxs(Fragment, { children: [jsx(IconComponent, { icon: "ic:baseline-tiktok", className: "w-4 h-4 text-white" }), jsx("span", { className: "text-xs font-medium text-white", children: t.tiktokLabel })] })), (platform === "whatsapp" || platform === "whatsapp-message") && (jsxs(Fragment, { children: [jsx(IconComponent, { icon: "mdi:whatsapp", className: "w-4 h-4 text-green-400" }), jsx("span", { className: "text-xs font-medium text-white", children: t.whatsappLabel })] }))] })), showPreview && onPreview && (jsx("button", { type: "button", onClick: function (e) {
+                            e.stopPropagation();
+                            onPreview();
+                        }, className: "backdrop-blur-xl border border-white/30 rounded-lg w-8 h-8 shadow-xl flex items-center justify-center hover:scale-110 transition-all duration-200", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, "aria-label": t.previewButtonLabel, children: jsx(IconComponent, { icon: "solar:eye-bold", className: "w-4 h-4 text-white" }) }))] }), !badgeOnly && (jsx("div", { className: "flex items-center gap-2 transition-opacity duration-500 ease-in-out ".concat(showActions ? "opacity-100" : "opacity-0 pointer-events-none"), children: customActions || (jsxs(Fragment, { children: [onEdit && (jsx(Button$1, { isIconOnly: true, variant: "flat", size: "sm", onPress: onEdit, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.editButtonLabel, children: jsx(IconComponent, { icon: "solar:pen-outline", className: "w-4 h-4 transition-transform duration-200 hover:rotate-12" }) })), onDelete && (jsx(Button$1, { isIconOnly: true, variant: "flat", size: "sm", onPress: onDelete, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.deleteButtonLabel, children: jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline", className: "w-4 h-4 transition-transform duration-200 hover:scale-110" }) })), onPublish && (jsx(Button$1, { variant: "solid", color: "primary", size: "sm", onPress: onPublish, endContent: jsx(IconComponent, { icon: "solar:plain-3-bold", className: "w-3.5 h-3.5 transition-transform duration-200" }), "aria-label": t.publishButtonLabel, className: "text-xs shadow-md transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 active:scale-95", children: t.publishButtonLabel }))] })) }))] }));
+};
+
+// Inject CSS animations for audience info
+if (typeof document !== "undefined") {
+    var style = document.createElement("style");
+    style.textContent = "\n  @keyframes pulse-subtle {\n    0%, 100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n    50% {\n      transform: scale(1.05);\n      opacity: 0.95;\n    }\n  }\n  \n  @keyframes fade-in {\n    from {\n      opacity: 0;\n      transform: translateX(-5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  \n  .animate-fade-in {\n    animation: fade-in 0.3s ease-out;\n  }\n";
+    if (!document.head.querySelector("#social-carousel-animations")) {
+        style.id = "social-carousel-animations";
+        document.head.appendChild(style);
+    }
+}
+/**
+ * SocialMediaCarousel - Specialized carousel variant for social media content
+ * Extends ContentCarousel with social media specific features
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaCarousel
+ *   items={socialMediaItems}
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaCarousel = function (_a) {
+    var items = _a.items, onItemClick = _a.onItemClick, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "/contenidos-ai/crear-contenido" : _c; _a.compactHeader; _a.campaignView; var _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.hideFooter, hideFooter = _g === void 0 ? false : _g, _h = _a.hideAudienceInfo, hideAudienceInfo = _h === void 0 ? false : _h;
+    var handlePreview = useCallback(function (item) {
+        console.log("Preview:", item);
+        // This could be extended to open a preview modal
+    }, []);
+    // Custom footer renderer with audience info + SocialMediaBar
+    var renderSocialFooterWithAudience = useCallback(function (_a) {
+        var item = _a.item, isHovered = _a.isHovered, translations = _a.translations;
+        var socialItem = item;
+        var showAudience = !hideAudienceInfo && socialItem.targetAudienceCount;
+        return (jsxs("div", { className: "flex flex-col gap-3", children: [showAudience && (jsxs("div", { className: "backdrop-blur-xl border border-white/30 shadow-xl flex items-center transition-all duration-500 ".concat(isHovered
+                        ? "bg-gradient-to-br from-white/40 to-white/30 rounded-2xl px-4 py-2.5 gap-3 max-w-md"
+                        : "bg-gradient-to-br from-white/30 to-white/20 rounded-3xl px-3 py-1.5 gap-1.5 w-fit"), style: {
+                        animation: isHovered
+                            ? "none"
+                            : "pulse-subtle 3s ease-in-out infinite",
+                    }, children: [jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [jsx(IconComponent, { icon: "solar:users-group-rounded-bold", className: "w-3.5 h-3.5 text-white transition-transform duration-300 hover:scale-110" }), jsx("span", { className: "text-[11px] font-medium text-white transition-all duration-500 ".concat(isHovered
+                                        ? "opacity-100 max-w-20"
+                                        : "opacity-100 max-w-20 whitespace-nowrap"), children: socialItem.targetAudienceCount.toLocaleString("es-ES") })] }), socialItem.audienceReason && isHovered && (jsx("div", { className: "text-[11px] text-white/95 leading-relaxed animate-fade-in", children: socialItem.audienceReason })), socialItem.requiredTags &&
+                            socialItem.requiredTags.length > 0 &&
+                            isHovered && (jsx("div", { className: "flex flex-wrap gap-1 mt-2 pt-2 border-t border-white/20 animate-fade-in", children: socialItem.requiredTags.map(function (tag, idx) { return (jsx("span", { className: "text-[9px] px-1.5 py-0.5 rounded-md bg-white/20 text-white/95 backdrop-blur-sm border border-white/30", children: tag }, idx)); }) }))] })), !hideFooter && (jsx(SocialMediaBar, { platform: socialItem.type, isHovered: isHovered, showPreview: !!socialItem.imageUrl, onEdit: onEdit ? function () { return onEdit(socialItem); } : undefined, onDelete: onDelete ? function () { return onDelete(socialItem); } : undefined, onPublish: onPublish ? function () { return onPublish(socialItem); } : undefined, onPreview: function () { return handlePreview(socialItem); }, translations: {
+                        editButtonLabel: translations.editButtonLabel,
+                        deleteButtonLabel: translations.deleteButtonLabel,
+                        publishButtonLabel: translations.publishButtonLabel,
+                        previewButtonLabel: translations.previewButtonLabel,
+                    } }))] }));
+    }, [hideAudienceInfo, hideFooter, onEdit, onDelete, onPublish, handlePreview]);
+    return (jsx(ContentCarousel, { items: items, onItemClick: onItemClick, className: className, emptyStateRedirectPath: emptyStateRedirectPath, translations: translations, renderFooter: renderSocialFooterWithAudience }));
+};
+
 // Traducciones por defecto en español
 var defaultTranslations$9 = {
     dayOption: "Día específico",
@@ -4355,4 +4576,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$4 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };
+export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, ContentCarousel, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$4 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };

package/dist/types/components/content-carousel/ContentCarousel.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { ContentCarouselProps } from "./ContentCarousel.types";
+/**
+ * ContentCarousel - Generic 3D carousel component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContentCarousel
+ *   items={items}
+ *   onItemClick={handleItemClick}
+ *   renderFooter={({ item }) => <div>Footer content</div>}
+ * />
+ * ```
+ */
+export declare const ContentCarousel: React.FC<ContentCarouselProps>;
+//# sourceMappingURL=ContentCarousel.d.ts.map

package/dist/types/components/content-carousel/ContentCarousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCarousel.d.ts","sourceRoot":"","sources":["../../../../src/components/content-carousel/ContentCarousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAIX,oBAAoB,EAEpB,MAAM,yBAAyB,CAAC;AAejC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuK1D,CAAC"}