@beweco/aurora-ui 0.1.27 → 0.1.29

package/dist/index.cjs.js

@@ -2,8 +2,8 @@
 
 var react = require('@heroui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var react$1 = require('@iconify/react');
+var React = require('react');
 var recharts = require('recharts');
 var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
@@ -102,6 +102,129 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var sizeMap = {
+    sm: "16px",
+    md: "20px",
+    lg: "24px",
+    xl: "32px",
+};
+var IconComponent = function (_a) {
+    var _b;
+    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
+    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
+    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
+};
+
+/**
+ * AccordionList - A flexible component for displaying lists of items
+ * Supports two modes:
+ * - accordion: Expandable items with collapsible content
+ * - list: Flat list of items (similar to client notes/communications)
+ *
+ * **IMPORTANTE - Paginación:**
+ * Este componente NO maneja paginación internamente. El padre debe:
+ * 1. Pasar solo items de la página actual (ej: 20-30 items)
+ * 2. Calcular totalPages basado en total de registros del backend
+ * 3. Manejar onPageChange para fetch de nuevos datos
+ *
+ * @example
+ * ```tsx
+ * // Accordion mode (Social Networks - Proposed Content)
+ * <AccordionList
+ *   mode="accordion"
+ *   items={contents}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getMetadata: (item) => [
+ *       { key: "type", label: item.type, color: "primary" }
+ *     ]
+ *   }}
+ *   content={{
+ *     render: (item) => <div>{item.description}</div>
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // List mode (Clients - Notes History)
+ * <AccordionList
+ *   mode="list"
+ *   items={notes}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getSubtitle: (item) => item.description
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // With pagination (controlled by parent)
+ * <AccordionList
+ *   items={currentPageItems}  // Only items of current page
+ *   pagination={{
+ *     currentPage: 1,
+ *     totalPages: Math.ceil(totalRecords / pageSize), // Based on backend total
+ *     onPageChange: (page) => fetchPage(page) // Parent fetches new data
+ *   }}
+ * />
+ * ```
+ */
+function AccordionList(_a) {
+    var items = _a.items, header = _a.header, content = _a.content, _b = _a.actions, actions = _b === void 0 ? [] : _b, _c = _a.mode, mode = _c === void 0 ? "list" : _c, pagination = _a.pagination, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, emptyState = _a.emptyState, sectionTitle = _a.sectionTitle, sectionIcon = _a.sectionIcon, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.accordionVariant, accordionVariant = _g === void 0 ? "splitted" : _g, _h = _a.selectionMode, selectionMode = _h === void 0 ? "multiple" : _h, _j = _a.disableIndicatorAnimation, disableIndicatorAnimation = _j === void 0 ? false : _j, loadingComponent = _a.loadingComponent, emptyStateComponent = _a.emptyStateComponent;
+    // Loading State
+    if (isLoading) {
+        if (loadingComponent) {
+            return jsxRuntime.jsx("div", { className: className, children: loadingComponent });
+        }
+        return (jsxRuntime.jsx("div", { className: "flex flex-col gap-3 ".concat(className), children: Array.from({ length: 3 }).map(function (_, index) { return (jsxRuntime.jsxs("div", { className: "p-4 border border-default-100 rounded-lg", children: [jsxRuntime.jsx(react.Skeleton, { className: "h-4 w-3/4 mb-2" }), jsxRuntime.jsx(react.Skeleton, { className: "h-3 w-full mb-2" }), jsxRuntime.jsx(react.Skeleton, { className: "h-3 w-2/3" })] }, "skeleton-".concat(index))); }) }));
+    }
+    // Empty State
+    if (items.length === 0) {
+        if (emptyStateComponent) {
+            return jsxRuntime.jsx("div", { className: className, children: emptyStateComponent });
+        }
+        if (emptyState) {
+            return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 ".concat(className), children: [jsxRuntime.jsx(IconComponent, { icon: emptyState.icon, className: "w-16 h-16 text-default-300 mb-4" }), jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-default-900 mb-2", children: emptyState.title }), emptyState.description && (jsxRuntime.jsx("p", { className: "text-sm text-default-500 mb-4 text-center max-w-md", children: emptyState.description })), emptyState.actionText && emptyState.onAction && (jsxRuntime.jsx(react.Button, { color: "primary", onPress: emptyState.onAction, children: emptyState.actionText }))] }));
+        }
+        return null;
+    }
+    // Render Actions
+    var renderActions = function (item) {
+        var visibleActions = actions.filter(function (action) {
+            if (action.show === undefined)
+                return true;
+            if (typeof action.show === "function")
+                return action.show(item);
+            return action.show;
+        });
+        return (jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: function (e) { return e.stopPropagation(); }, children: visibleActions.map(function (action) { return (jsxRuntime.jsx(react.Button, { variant: "light", color: action.color || "default", size: "sm", isIconOnly: true, onPress: function () { return action.onPress(item); }, className: action.className, title: action.tooltip, children: jsxRuntime.jsx(IconComponent, { icon: action.icon, className: "w-4 h-4" }) }, action.key)); }) }));
+    };
+    // Render Metadata Chips
+    var renderMetadata = function (item) {
+        if (!header.getMetadata)
+            return null;
+        var metadata = header.getMetadata(item);
+        return (jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-wrap", children: metadata.map(function (meta) { return (jsxRuntime.jsx(react.Chip, { size: "sm", variant: meta.variant || "flat", color: meta.color || "default", className: "text-xs", startContent: meta.icon ? jsxRuntime.jsx(IconComponent, { icon: meta.icon, className: "w-3 h-3" }) : undefined, children: meta.label }, meta.key)); }) }));
+    };
+    // Accordion Mode
+    if (mode === "accordion") {
+        if (!content) {
+            console.warn("AccordionList: content prop is required for accordion mode");
+            return null;
+        }
+        return (jsxRuntime.jsxs("div", { className: "h-full w-full ".concat(className), children: [(sectionTitle || sectionIcon) && (jsxRuntime.jsx("div", { className: "mb-4 flex items-center justify-between", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsxRuntime.jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-violet-600 dark:text-violet-400" })), sectionTitle && (jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsxRuntime.jsx(react.Chip, { size: "sm", variant: "flat", color: "secondary", children: items.length }))] }) })), jsxRuntime.jsx(react.Accordion, { variant: accordionVariant, selectionMode: selectionMode, disableIndicatorAnimation: disableIndicatorAnimation, children: items.map(function (item) { return (jsxRuntime.jsx(react.AccordionItem, { "aria-label": header.getTitle(item), indicator: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", className: "w-4 h-4 text-default-400 transition-transform duration-200 data-[open=true]:rotate-180" }), classNames: {
+                            indicator: "data-[open=true]:rotate-180 transition-transform duration-200",
+                        }, title: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full pr-4", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-sm text-default-900 truncate", children: header.getTitle(item) }), renderMetadata(item)] })) }), actions.length > 0 && renderActions(item)] }), children: jsxRuntime.jsx("div", { className: "pb-4", children: content.render(item) }) }, item.id)); }) }), pagination && pagination.totalPages > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx(react.Pagination, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
+    }
+    // List Mode
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [(sectionTitle || sectionIcon) && (jsxRuntime.jsx("div", { className: "mb-1 flex items-center justify-between", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsxRuntime.jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-primary-600 dark:text-primary-400" })), sectionTitle && (jsxRuntime.jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsxRuntime.jsx(react.Chip, { size: "sm", variant: "flat", color: "primary", children: items.length }))] }) })), items.map(function (item) { return (jsxRuntime.jsxs("div", { className: "flex items-start justify-between p-4 border border-default-100 rounded-lg transition-colors bg-default-50 hover:bg-default-100", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-2", children: jsxRuntime.jsx("span", { className: "text-sm font-medium text-default-900 truncate", children: header.getTitle(item) }) }), header.getSubtitle && (jsxRuntime.jsx("p", { className: "text-sm text-default-700 line-clamp-2 leading-relaxed mb-2", children: header.getSubtitle(item) })), renderMetadata(item)] })) }), actions.length > 0 && (jsxRuntime.jsx("div", { className: "ml-4 flex-shrink-0", children: renderActions(item) }))] }, item.id)); }), pagination && pagination.totalPages > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx(react.Pagination, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
+}
+AccordionList.displayName = "AccordionList";
+
 exports.HolidayType = void 0;
 (function (HolidayType) {
     HolidayType["SingleDay"] = "singleDay";
@@ -144,19 +267,6 @@ var DateRangePicker = function (_a) {
         } }, props, { id: autoId })));
 };
 
-var sizeMap = {
-    sm: "16px",
-    md: "20px",
-    lg: "24px",
-    xl: "32px",
-};
-var IconComponent = function (_a) {
-    var _b;
-    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
-    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
-    return (jsxRuntime.jsx("span", __assign({}, nativeProps, { children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
-};
-
 /**
  * Input genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
  *
@@ -2974,10 +3084,23 @@ var defaultTranslations$3 = {
  * ```
  */
 var SocialMediaPreview = function (_a) {
-    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.postAspectRatio, postAspectRatio = _c === void 0 ? "square" : _c, _d = _a.showHeader, showHeader = _d === void 0 ? true : _d, _e = _a.maxCaptionLength, maxCaptionLength = _e === void 0 ? 125 : _e, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.imageProps, imageProps = _h === void 0 ? {} : _h;
     var t = __assign(__assign({}, defaultTranslations$3), translations);
     var displayUsername = username || t.username;
     var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    // Get aspect ratio based on postAspectRatio prop
+    var getAspectRatio = function () {
+        switch (postAspectRatio) {
+            case "square":
+                return "1/1"; // 1080 x 1080px
+            case "portrait":
+                return "4/5"; // 1080 x 1350px
+            case "landscape":
+                return "1.91/1"; // 1080 x 566px
+            default:
+                return "1/1";
+        }
+    };
     var getTruncatedCaption = function () {
         if (variant !== "compact") {
             return caption;
@@ -3000,7 +3123,7 @@ var SocialMediaPreview = function (_a) {
         return renderInstagramPost();
     };
     var renderInstagramStory = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsxRuntime.jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsxRuntime.jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxRuntime.jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsxRuntime.jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsxRuntime.jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
-    var renderInstagramPost = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsxs("div", { className: "text-sm text-left", children: [jsxRuntime.jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsxRuntime.jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+    var renderInstagramPost = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-black overflow-hidden rounded-none flex items-center justify-center", style: { aspectRatio: getAspectRatio() }, children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-contain rounded-none", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsxs("div", { className: "text-sm text-left", children: [jsxRuntime.jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsxRuntime.jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", 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 block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
@@ -4584,6 +4707,7 @@ Object.defineProperty(exports, "loadIcons", {
     enumerable: true,
     get: function () { return react$1.loadIcons; }
 });
+exports.AccordionList = AccordionList;
 exports.AddHolidayForm = AddHolidayForm;
 exports.AnalyticsCard = AnalyticsCard;
 exports.AuraAutocomplete = AuraAutocomplete;

package/dist/index.esm.js

@@ -1,10 +1,10 @@
-import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip as Chip$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
+import { Skeleton, Button as Button$1, Chip as Chip$1, Accordion, AccordionItem, Pagination as Pagination$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, ListboxSection, Avatar, CardBody, CardFooter, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
 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, useEffect, createElement, useRef, useLayoutEffect } from 'react';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
+import React, { useId, useState, useCallback, useMemo, createContext, useContext, useEffect, createElement, useRef, useLayoutEffect } from 'react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip, Area } from 'recharts';
 import { LazyMotion, domAnimation, m } from 'framer-motion';
 import { createPortal } from 'react-dom';
@@ -103,6 +103,129 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+var sizeMap = {
+    sm: "16px",
+    md: "20px",
+    lg: "24px",
+    xl: "32px",
+};
+var IconComponent = function (_a) {
+    var _b;
+    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
+    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
+    return (jsx("span", __assign({}, nativeProps, { children: jsx(Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
+};
+
+/**
+ * AccordionList - A flexible component for displaying lists of items
+ * Supports two modes:
+ * - accordion: Expandable items with collapsible content
+ * - list: Flat list of items (similar to client notes/communications)
+ *
+ * **IMPORTANTE - Paginación:**
+ * Este componente NO maneja paginación internamente. El padre debe:
+ * 1. Pasar solo items de la página actual (ej: 20-30 items)
+ * 2. Calcular totalPages basado en total de registros del backend
+ * 3. Manejar onPageChange para fetch de nuevos datos
+ *
+ * @example
+ * ```tsx
+ * // Accordion mode (Social Networks - Proposed Content)
+ * <AccordionList
+ *   mode="accordion"
+ *   items={contents}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getMetadata: (item) => [
+ *       { key: "type", label: item.type, color: "primary" }
+ *     ]
+ *   }}
+ *   content={{
+ *     render: (item) => <div>{item.description}</div>
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // List mode (Clients - Notes History)
+ * <AccordionList
+ *   mode="list"
+ *   items={notes}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getSubtitle: (item) => item.description
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // With pagination (controlled by parent)
+ * <AccordionList
+ *   items={currentPageItems}  // Only items of current page
+ *   pagination={{
+ *     currentPage: 1,
+ *     totalPages: Math.ceil(totalRecords / pageSize), // Based on backend total
+ *     onPageChange: (page) => fetchPage(page) // Parent fetches new data
+ *   }}
+ * />
+ * ```
+ */
+function AccordionList(_a) {
+    var items = _a.items, header = _a.header, content = _a.content, _b = _a.actions, actions = _b === void 0 ? [] : _b, _c = _a.mode, mode = _c === void 0 ? "list" : _c, pagination = _a.pagination, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, emptyState = _a.emptyState, sectionTitle = _a.sectionTitle, sectionIcon = _a.sectionIcon, _e = _a.showCount, showCount = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.accordionVariant, accordionVariant = _g === void 0 ? "splitted" : _g, _h = _a.selectionMode, selectionMode = _h === void 0 ? "multiple" : _h, _j = _a.disableIndicatorAnimation, disableIndicatorAnimation = _j === void 0 ? false : _j, loadingComponent = _a.loadingComponent, emptyStateComponent = _a.emptyStateComponent;
+    // Loading State
+    if (isLoading) {
+        if (loadingComponent) {
+            return jsx("div", { className: className, children: loadingComponent });
+        }
+        return (jsx("div", { className: "flex flex-col gap-3 ".concat(className), children: Array.from({ length: 3 }).map(function (_, index) { return (jsxs("div", { className: "p-4 border border-default-100 rounded-lg", children: [jsx(Skeleton, { className: "h-4 w-3/4 mb-2" }), jsx(Skeleton, { className: "h-3 w-full mb-2" }), jsx(Skeleton, { className: "h-3 w-2/3" })] }, "skeleton-".concat(index))); }) }));
+    }
+    // Empty State
+    if (items.length === 0) {
+        if (emptyStateComponent) {
+            return jsx("div", { className: className, children: emptyStateComponent });
+        }
+        if (emptyState) {
+            return (jsxs("div", { className: "flex flex-col items-center justify-center py-12 ".concat(className), children: [jsx(IconComponent, { icon: emptyState.icon, className: "w-16 h-16 text-default-300 mb-4" }), jsx("h3", { className: "text-lg font-semibold text-default-900 mb-2", children: emptyState.title }), emptyState.description && (jsx("p", { className: "text-sm text-default-500 mb-4 text-center max-w-md", children: emptyState.description })), emptyState.actionText && emptyState.onAction && (jsx(Button$1, { color: "primary", onPress: emptyState.onAction, children: emptyState.actionText }))] }));
+        }
+        return null;
+    }
+    // Render Actions
+    var renderActions = function (item) {
+        var visibleActions = actions.filter(function (action) {
+            if (action.show === undefined)
+                return true;
+            if (typeof action.show === "function")
+                return action.show(item);
+            return action.show;
+        });
+        return (jsx("div", { className: "flex items-center gap-1", onClick: function (e) { return e.stopPropagation(); }, children: visibleActions.map(function (action) { return (jsx(Button$1, { variant: "light", color: action.color || "default", size: "sm", isIconOnly: true, onPress: function () { return action.onPress(item); }, className: action.className, title: action.tooltip, children: jsx(IconComponent, { icon: action.icon, className: "w-4 h-4" }) }, action.key)); }) }));
+    };
+    // Render Metadata Chips
+    var renderMetadata = function (item) {
+        if (!header.getMetadata)
+            return null;
+        var metadata = header.getMetadata(item);
+        return (jsx("div", { className: "flex items-center gap-2 flex-wrap", children: metadata.map(function (meta) { return (jsx(Chip$1, { size: "sm", variant: meta.variant || "flat", color: meta.color || "default", className: "text-xs", startContent: meta.icon ? jsx(IconComponent, { icon: meta.icon, className: "w-3 h-3" }) : undefined, children: meta.label }, meta.key)); }) }));
+    };
+    // Accordion Mode
+    if (mode === "accordion") {
+        if (!content) {
+            console.warn("AccordionList: content prop is required for accordion mode");
+            return null;
+        }
+        return (jsxs("div", { className: "h-full w-full ".concat(className), children: [(sectionTitle || sectionIcon) && (jsx("div", { className: "mb-4 flex items-center justify-between", children: jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-violet-600 dark:text-violet-400" })), sectionTitle && (jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsx(Chip$1, { size: "sm", variant: "flat", color: "secondary", children: items.length }))] }) })), jsx(Accordion, { variant: accordionVariant, selectionMode: selectionMode, disableIndicatorAnimation: disableIndicatorAnimation, children: items.map(function (item) { return (jsx(AccordionItem, { "aria-label": header.getTitle(item), indicator: jsx(IconComponent, { icon: "solar:alt-arrow-down-outline", className: "w-4 h-4 text-default-400 transition-transform duration-200 data-[open=true]:rotate-180" }), classNames: {
+                            indicator: "data-[open=true]:rotate-180 transition-transform duration-200",
+                        }, title: jsxs("div", { className: "flex items-center justify-between w-full pr-4", children: [jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxs(Fragment, { children: [jsx("span", { className: "text-sm text-default-900 truncate", children: header.getTitle(item) }), renderMetadata(item)] })) }), actions.length > 0 && renderActions(item)] }), children: jsx("div", { className: "pb-4", children: content.render(item) }) }, item.id)); }) }), pagination && pagination.totalPages > 1 && (jsx("div", { className: "flex justify-center mt-4", children: jsx(Pagination$1, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
+    }
+    // List Mode
+    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [(sectionTitle || sectionIcon) && (jsx("div", { className: "mb-1 flex items-center justify-between", children: jsxs("div", { className: "flex items-center gap-2", children: [sectionIcon && (jsx(IconComponent, { icon: sectionIcon, className: "w-5 h-5 text-primary-600 dark:text-primary-400" })), sectionTitle && (jsx("h3", { className: "text-base font-semibold text-foreground", children: sectionTitle })), showCount && (jsx(Chip$1, { size: "sm", variant: "flat", color: "primary", children: items.length }))] }) })), items.map(function (item) { return (jsxs("div", { className: "flex items-start justify-between p-4 border border-default-100 rounded-lg transition-colors bg-default-50 hover:bg-default-100", children: [jsx("div", { className: "flex-1 min-w-0", children: header.customRender ? (header.customRender(item)) : (jsxs(Fragment, { children: [jsx("div", { className: "flex items-center gap-2 mb-2", children: jsx("span", { className: "text-sm font-medium text-default-900 truncate", children: header.getTitle(item) }) }), header.getSubtitle && (jsx("p", { className: "text-sm text-default-700 line-clamp-2 leading-relaxed mb-2", children: header.getSubtitle(item) })), renderMetadata(item)] })) }), actions.length > 0 && (jsx("div", { className: "ml-4 flex-shrink-0", children: renderActions(item) }))] }, item.id)); }), pagination && pagination.totalPages > 1 && (jsx("div", { className: "flex justify-center mt-4", children: jsx(Pagination$1, { isCompact: pagination.isCompact, showControls: pagination.showControls, showShadow: true, color: "primary", page: pagination.currentPage, total: pagination.totalPages, onChange: pagination.onPageChange }) }))] }));
+}
+AccordionList.displayName = "AccordionList";
+
 var HolidayType;
 (function (HolidayType) {
     HolidayType["SingleDay"] = "singleDay";
@@ -145,19 +268,6 @@ var DateRangePicker = function (_a) {
         } }, props, { id: autoId })));
 };
 
-var sizeMap = {
-    sm: "16px",
-    md: "20px",
-    lg: "24px",
-    xl: "32px",
-};
-var IconComponent = function (_a) {
-    var _b;
-    var icon = _a.icon, _c = _a.size, size = _c === void 0 ? "md" : _c, className = _a.className, style = _a.style, color = _a.color, hFlip = _a.hFlip, vFlip = _a.vFlip, flip = _a.flip, rotate = _a.rotate, nativeProps = __rest(_a, ["icon", "size", "className", "style", "color", "hFlip", "vFlip", "flip", "rotate"]);
-    var iconSize = (_b = sizeMap[size]) !== null && _b !== void 0 ? _b : sizeMap.md;
-    return (jsx("span", __assign({}, nativeProps, { children: jsx(Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) })));
-};
-
 /**
  * Input genérico reutilizable basado en HeroUI siguiendo las reglas de diseño BeweOS.
  *
@@ -2975,10 +3085,23 @@ var defaultTranslations$3 = {
  * ```
  */
 var SocialMediaPreview = function (_a) {
-    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.postAspectRatio, postAspectRatio = _c === void 0 ? "square" : _c, _d = _a.showHeader, showHeader = _d === void 0 ? true : _d, _e = _a.maxCaptionLength, maxCaptionLength = _e === void 0 ? 125 : _e, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.imageProps, imageProps = _h === void 0 ? {} : _h;
     var t = __assign(__assign({}, defaultTranslations$3), translations);
     var displayUsername = username || t.username;
     var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    // Get aspect ratio based on postAspectRatio prop
+    var getAspectRatio = function () {
+        switch (postAspectRatio) {
+            case "square":
+                return "1/1"; // 1080 x 1080px
+            case "portrait":
+                return "4/5"; // 1080 x 1350px
+            case "landscape":
+                return "1.91/1"; // 1080 x 566px
+            default:
+                return "1/1";
+        }
+    };
     var getTruncatedCaption = function () {
         if (variant !== "compact") {
             return caption;
@@ -3001,7 +3124,7 @@ var SocialMediaPreview = function (_a) {
         return renderInstagramPost();
     };
     var renderInstagramStory = function () { return (jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxs("div", { className: "absolute inset-0", children: [jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxs("div", { className: "flex items-center gap-3", children: [jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
-    var renderInstagramPost = function () { return (jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxs("div", { className: "text-sm text-left", children: [jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsx("button", { type: "button", onClick: function (e) {
+    var renderInstagramPost = function () { return (jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsx("div", { className: "relative w-full bg-black overflow-hidden rounded-none flex items-center justify-center", style: { aspectRatio: getAspectRatio() }, children: jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-contain rounded-none", radius: "none" }, imageProps)) })), jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxs("div", { className: "text-sm text-left", children: [jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", 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 block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
@@ -4577,4 +4700,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, 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 };
+export { AccordionList, 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/accordion-list/AccordionList.d.ts

@@ -0,0 +1,64 @@
+import type { AccordionListProps, BaseAccordionItem } from "./AccordionList.types";
+/**
+ * AccordionList - A flexible component for displaying lists of items
+ * Supports two modes:
+ * - accordion: Expandable items with collapsible content
+ * - list: Flat list of items (similar to client notes/communications)
+ *
+ * **IMPORTANTE - Paginación:**
+ * Este componente NO maneja paginación internamente. El padre debe:
+ * 1. Pasar solo items de la página actual (ej: 20-30 items)
+ * 2. Calcular totalPages basado en total de registros del backend
+ * 3. Manejar onPageChange para fetch de nuevos datos
+ *
+ * @example
+ * ```tsx
+ * // Accordion mode (Social Networks - Proposed Content)
+ * <AccordionList
+ *   mode="accordion"
+ *   items={contents}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getMetadata: (item) => [
+ *       { key: "type", label: item.type, color: "primary" }
+ *     ]
+ *   }}
+ *   content={{
+ *     render: (item) => <div>{item.description}</div>
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // List mode (Clients - Notes History)
+ * <AccordionList
+ *   mode="list"
+ *   items={notes}
+ *   header={{
+ *     getTitle: (item) => item.title,
+ *     getSubtitle: (item) => item.description
+ *   }}
+ *   actions={[
+ *     { key: "edit", icon: "solar:pen-outline", onPress: handleEdit },
+ *     { key: "delete", icon: "solar:trash-bin-minimalistic-outline", onPress: handleDelete, color: "danger" }
+ *   ]}
+ * />
+ *
+ * // With pagination (controlled by parent)
+ * <AccordionList
+ *   items={currentPageItems}  // Only items of current page
+ *   pagination={{
+ *     currentPage: 1,
+ *     totalPages: Math.ceil(totalRecords / pageSize), // Based on backend total
+ *     onPageChange: (page) => fetchPage(page) // Parent fetches new data
+ *   }}
+ * />
+ * ```
+ */
+export declare function AccordionList<T extends BaseAccordionItem = BaseAccordionItem>({ items, header, content, actions, mode, pagination, isLoading, emptyState, sectionTitle, sectionIcon, showCount, className, accordionVariant, selectionMode, disableIndicatorAnimation, loadingComponent, emptyStateComponent, }: AccordionListProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace AccordionList {
+    var displayName: string;
+}
+//# sourceMappingURL=AccordionList.d.ts.map

package/dist/types/components/accordion-list/AccordionList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionList.d.ts","sourceRoot":"","sources":["../../../../src/components/accordion-list/AccordionList.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,kBAAkB,EAClB,iBAAiB,EAEjB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,EAAE,EAC9E,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAY,EACZ,IAAa,EACb,UAAU,EACV,SAAiB,EACjB,UAAU,EACV,YAAY,EACZ,WAAW,EACX,SAAgB,EAChB,SAAc,EACd,gBAA6B,EAC7B,aAA0B,EAC1B,yBAAiC,EACjC,gBAAgB,EAChB,mBAAmB,GACnB,EAAE,kBAAkB,CAAC,CAAC,CAAC,kDA8QvB;yBAhSe,aAAa"}