@beweco/aurora-ui 0.1.53 → 0.1.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +134 -70
- package/dist/index.esm.js +133 -69
- package/dist/types/components/menu/Menu.d.ts +1 -6
- package/dist/types/components/menu/Menu.d.ts.map +1 -1
- package/dist/types/components/menu/Menu.types.d.ts +38 -7
- package/dist/types/components/menu/Menu.types.d.ts.map +1 -1
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/MenuMobileBottomBar.d.ts +4 -0
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/MenuMobileBottomBar.d.ts.map +1 -0
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/MenuMobileBottomBar.types.d.ts +12 -0
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/MenuMobileBottomBar.types.d.ts.map +1 -0
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/index.d.ts +3 -0
- package/dist/types/components/menu/_internal/menu-mobile-bottom-bar/index.d.ts.map +1 -0
- package/dist/types/components/menu/_internal/menu-nav-list/MenuNavList.d.ts.map +1 -1
- package/dist/types/components/menu/index.d.ts +3 -1
- package/dist/types/components/menu/index.d.ts.map +1 -1
- package/dist/types/components/social-media-preview/SocialMediaPreview.d.ts.map +1 -1
- package/dist/types/components/social-media-preview/SocialMediaPreview.types.d.ts +4 -0
- package/dist/types/components/social-media-preview/SocialMediaPreview.types.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1703,12 +1703,12 @@ var NotificationButton = function (_a) {
|
|
|
1703
1703
|
};
|
|
1704
1704
|
NotificationButton.displayName = "NotificationButton";
|
|
1705
1705
|
|
|
1706
|
-
var DEFAULT_TRANSLATIONS$
|
|
1706
|
+
var DEFAULT_TRANSLATIONS$4 = {
|
|
1707
1707
|
logout: "Cerrar sesión",
|
|
1708
1708
|
};
|
|
1709
1709
|
var HeaderComponent = function (_a) {
|
|
1710
1710
|
var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout, _b = _a.translations, translations = _b === void 0 ? {} : _b, breadcrumbs = _a.breadcrumbs, onNotificationClick = _a.onNotificationClick, onOptionSelect = _a.onOptionSelect, onBreadcrumbClick = _a.onBreadcrumbClick;
|
|
1711
|
-
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$
|
|
1711
|
+
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$4), translations);
|
|
1712
1712
|
return (jsxRuntime.jsx("header", { className: "header__container", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(react.Button, { className: "sm:hidden", isIconOnly: true, variant: "light", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear" }), onPress: onMenuClick }), breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx(BreadcrumbsComponent, { items: breadcrumbs, onItemClick: onBreadcrumbClick }))] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(NotificationButton, { notificationCount: notificationCount, onPress: onNotificationClick }), jsxRuntime.jsx(ConfigMenu, { options: options, onLogout: onLogout, onOptionSelect: onOptionSelect, translations: t })] })] }) }));
|
|
1713
1713
|
};
|
|
1714
1714
|
HeaderComponent.displayName = "Header";
|
|
@@ -1832,7 +1832,7 @@ KanbanColumn.displayName = "KanbanColumn";
|
|
|
1832
1832
|
* Traducciones por defecto en español.
|
|
1833
1833
|
* Se mezclan con las traducciones proporcionadas por el usuario.
|
|
1834
1834
|
*/
|
|
1835
|
-
var DEFAULT_TRANSLATIONS$
|
|
1835
|
+
var DEFAULT_TRANSLATIONS$3 = {
|
|
1836
1836
|
dropHere: "Soltar aquí",
|
|
1837
1837
|
emptyMessage: "No hay elementos",
|
|
1838
1838
|
};
|
|
@@ -1866,7 +1866,7 @@ var columnGapClasses = {
|
|
|
1866
1866
|
var KanbanComponent = function (_a) {
|
|
1867
1867
|
var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e, onLoadMore = _a.onLoadMore;
|
|
1868
1868
|
// Mezclar traducciones del usuario con las por defecto
|
|
1869
|
-
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$
|
|
1869
|
+
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
|
|
1870
1870
|
// Determinar si drag está habilitado
|
|
1871
1871
|
var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
|
|
1872
1872
|
// Estado del drag actual
|
|
@@ -1974,6 +1974,24 @@ var ImagePreview = function (_a) {
|
|
|
1974
1974
|
: undefined, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": isClickable ? t.clickableImageAriaLabel : undefined }), showRemoveButton && onRemove && (jsxRuntime.jsx("button", { type: "button", onClick: function () { return handleRemove(image.id || "", index); }, "aria-label": t.removeButtonAriaLabel, className: "\n\t\t\t\t\t\t\t\t\tabsolute -top-2 -right-2 \n\t\t\t\t\t\t\t\t\tp-1 rounded-full \n\t\t\t\t\t\t\t\t\tbg-danger-500 hover:bg-danger-600 \n\t\t\t\t\t\t\t\t\ttext-white \n\t\t\t\t\t\t\t\t\tcursor-pointer \n\t\t\t\t\t\t\t\t\ttransition-colors\n\t\t\t\t\t\t\t\t\tfocus:outline-none \n\t\t\t\t\t\t\t\t\tfocus:ring-2 \n\t\t\t\t\t\t\t\t\tfocus:ring-danger-400 \n\t\t\t\t\t\t\t\t\tfocus:ring-offset-2\n\t\t\t\t\t\t\t\t", children: jsxRuntime.jsx(IconComponent, { size: size === "micro" ? "sm" : "md", icon: "solar:trash-bin-minimalistic-outline" }) }))] }) }, image.id || index)); }) }));
|
|
1975
1975
|
};
|
|
1976
1976
|
|
|
1977
|
+
exports.EnumMenuNavListItem = void 0;
|
|
1978
|
+
(function (EnumMenuNavListItem) {
|
|
1979
|
+
EnumMenuNavListItem["Nest"] = "nest";
|
|
1980
|
+
})(exports.EnumMenuNavListItem || (exports.EnumMenuNavListItem = {}));
|
|
1981
|
+
|
|
1982
|
+
var MAX_VISIBLE_ITEMS = 4;
|
|
1983
|
+
var MenuMobileBottomBar = React.memo(function MenuMobileBottomBar(_a) {
|
|
1984
|
+
var items = _a.items, selectedKey = _a.selectedKey, onSelect = _a.onSelect, onMenuPress = _a.onMenuPress, menuLabel = _a.menuLabel, navAriaLabel = _a.navAriaLabel, _b = _a.forceVisible, forceVisible = _b === void 0 ? false : _b;
|
|
1985
|
+
var visibleItems = items.slice(0, MAX_VISIBLE_ITEMS);
|
|
1986
|
+
var handleItemPress = React.useCallback(function (key, href) {
|
|
1987
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(key, href);
|
|
1988
|
+
}, [onSelect]);
|
|
1989
|
+
return (jsxRuntime.jsx("nav", { className: react.cn("menu-mobile-bottom-bar", forceVisible && "menu-mobile-bottom-bar--force-visible"), "aria-label": navAriaLabel, children: jsxRuntime.jsxs("div", { className: "menu-mobile-bottom-bar__container", children: [visibleItems.map(function (item) {
|
|
1990
|
+
var isSelected = selectedKey === item.key;
|
|
1991
|
+
return (jsxRuntime.jsxs("button", { type: "button", className: react.cn("menu-mobile-bottom-bar__item", isSelected && "menu-mobile-bottom-bar__item--active"), onClick: function () { return handleItemPress(item.key, item.href); }, "aria-current": isSelected ? "page" : undefined, "aria-label": item.title, children: [item.icon && (jsxRuntime.jsx(IconComponent, { icon: item.icon, size: "md", className: "menu-mobile-bottom-bar__icon" })), jsxRuntime.jsx("span", { className: "menu-mobile-bottom-bar__label", children: item.title })] }, item.key));
|
|
1992
|
+
}), jsxRuntime.jsxs("button", { type: "button", className: "menu-mobile-bottom-bar__item", onClick: onMenuPress, "aria-label": menuLabel, children: [jsxRuntime.jsx(IconComponent, { icon: "solar:hamburger-menu-linear", size: "md", className: "menu-mobile-bottom-bar__icon" }), jsxRuntime.jsx("span", { className: "menu-mobile-bottom-bar__label", children: menuLabel })] })] }) }));
|
|
1993
|
+
});
|
|
1994
|
+
|
|
1977
1995
|
function normalizeClass(value) {
|
|
1978
1996
|
if (typeof value === "string") {
|
|
1979
1997
|
return value || undefined;
|
|
@@ -2006,11 +2024,6 @@ var getItemClasses = function (isCollapsed, itemClassesProp) {
|
|
|
2006
2024
|
})) }));
|
|
2007
2025
|
};
|
|
2008
2026
|
|
|
2009
|
-
var EnumMenuNavListItem;
|
|
2010
|
-
(function (EnumMenuNavListItem) {
|
|
2011
|
-
EnumMenuNavListItem["Nest"] = "nest";
|
|
2012
|
-
})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
|
|
2013
|
-
|
|
2014
2027
|
/**
|
|
2015
2028
|
* @component MenuNavList
|
|
2016
2029
|
* @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
|
|
@@ -2032,34 +2045,43 @@ var EnumMenuNavListItem;
|
|
|
2032
2045
|
*/
|
|
2033
2046
|
var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
2034
2047
|
var items = _a.items, isCollapsed = _a.isCollapsed, defaultSelectedKey = _a.defaultSelectedKey, onSelect = _a.onSelect, hideEndContent = _a.hideEndContent, _b = _a.sectionClasses, sectionClassesProp = _b === void 0 ? {} : _b, _c = _a.itemClasses, itemClassesProp = _c === void 0 ? {} : _c, iconClassName = _a.iconClassName, classNames = _a.classNames, className = _a.className, props = __rest(_a, ["items", "isCollapsed", "defaultSelectedKey", "onSelect", "hideEndContent", "sectionClasses", "itemClasses", "iconClassName", "classNames", "className"]);
|
|
2035
|
-
|
|
2048
|
+
// Componente totalmente controlado: la única fuente de verdad es defaultSelectedKey (menuItems.selectedKey).
|
|
2049
|
+
// Sin estado interno se evita que la selección quede "pegada" al navegar sin recargar.
|
|
2050
|
+
var selectedKey = defaultSelectedKey;
|
|
2036
2051
|
// Component styles
|
|
2037
2052
|
var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
|
|
2038
2053
|
var itemClasses = getItemClasses(isCollapsed, itemClassesProp);
|
|
2039
|
-
//
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
var handleItemPress = React.useCallback(function (item, parentKey) {
|
|
2043
|
-
var keySelected = typeof parentKey === "string" ? parentKey : item.key;
|
|
2044
|
-
setSelected(keySelected);
|
|
2045
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect(keySelected, item.href);
|
|
2054
|
+
// Al hacer clic solo notificamos al padre; el padre actualiza selectedKey y re-renderiza.
|
|
2055
|
+
var handleItemPress = React.useCallback(function (item) {
|
|
2056
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.key, item.href);
|
|
2046
2057
|
if (document.activeElement instanceof HTMLElement) {
|
|
2047
2058
|
document.activeElement.blur();
|
|
2048
2059
|
}
|
|
2049
|
-
}, [
|
|
2060
|
+
}, [onSelect]);
|
|
2061
|
+
// Renders a sub-item (text-only, hierarchy line, pill selected state).
|
|
2062
|
+
// Aplicamos estilos de selección por key porque el Listbox anidado puede no inyectar data-selected.
|
|
2063
|
+
var renderSubItem = React.useCallback(function (item, parentKey) {
|
|
2064
|
+
var _a;
|
|
2065
|
+
item.href; var itemProps = __rest(item, ["href"]);
|
|
2066
|
+
var isSelected = item.key === selectedKey;
|
|
2067
|
+
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, textValue: item.title, title: item.title, startContent: null, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, "aria-selected": isSelected, "data-menu-subitem-selected": isSelected ? "true" : "false", classNames: {
|
|
2068
|
+
base: react.cn("min-h-9 rounded-large px-3 py-2 menu-nav-list__sub-item", "text-default-500 data-[hover=true]:text-default-700", "data-[selected=true]:bg-default-100 data-[selected=true]:text-foreground data-[selected=true]:font-semibold"),
|
|
2069
|
+
}, onPress: function () { return handleItemPress(item); } })));
|
|
2070
|
+
}, [handleItemPress, selectedKey]);
|
|
2050
2071
|
// Renders the item displayed inside the Popover when the menu is collapsed.
|
|
2051
2072
|
var renderCompactItem = React.useCallback(function (item, parentKey) {
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, endContent: (_a = item.endContent) !== null && _a !== void 0 ? _a : null, startContent: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_b = item.startContent) !== null && _b !== void 0 ? _b : null)), textValue: item.title, title: item.title, className: "data-[hover=true]:text-default-600", onPress: function () { return handleItemPress(item, parentKey); } })));
|
|
2055
|
-
}, [handleItemPress, iconClassName]);
|
|
2073
|
+
return renderSubItem(item, parentKey);
|
|
2074
|
+
}, [renderSubItem]);
|
|
2056
2075
|
// Renders a nested item, i.e., an item that has sub-items.
|
|
2057
2076
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
2058
2077
|
var renderNestItem = React.useCallback(function (item) {
|
|
2059
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
2078
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
2060
2079
|
var isNestType = item.items &&
|
|
2061
2080
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2062
|
-
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
|
|
2081
|
+
(item === null || item === void 0 ? void 0 : item.type) === exports.EnumMenuNavListItem.Nest;
|
|
2082
|
+
// Abrir el grupo si el selectedKey actual es uno de sus sub-ítems
|
|
2083
|
+
var isSelectedKeyInThisNest = Boolean(selectedKey && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) &&
|
|
2084
|
+
((_d = (_c = item.items) === null || _c === void 0 ? void 0 : _c.some(function (child) { return child.key === selectedKey; })) !== null && _d !== void 0 ? _d : false);
|
|
2063
2085
|
item.href; var itemProps = __rest(item, ["href"]);
|
|
2064
2086
|
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, classNames: {
|
|
2065
2087
|
base: react.cn({
|
|
@@ -2071,85 +2093,127 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
2071
2093
|
}, "rounded-large"),
|
|
2072
2094
|
}, endContent: isCollapsed || isNestType || hideEndContent
|
|
2073
2095
|
? null
|
|
2074
|
-
: ((
|
|
2075
|
-
isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
}, [isCollapsed, hideEndContent, iconClassName, items, selected]);
|
|
2096
|
+
: ((_e = item.endContent) !== null && _e !== void 0 ? _e : null), startContent: isCollapsed || isNestType ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-foreground", iconClassName), icon: item.icon, size: "lg" })) : (((_f = item.startContent) !== null && _f !== void 0 ? _f : null)), title: isCollapsed || isNestType ? null : item.title }),
|
|
2097
|
+
isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-center gap-1", children: [jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", classNames: {
|
|
2098
|
+
base: "text-default-500",
|
|
2099
|
+
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_g = item.startContent) !== null && _g !== void 0 ? _g : null)) }) }), jsxRuntime.jsx(IconComponent, { className: "text-default-400 shrink-0", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] }) }), jsxRuntime.jsx(react.PopoverContent, { className: "border border-default-200 bg-white p-0 shadow-md", children: jsxRuntime.jsxs("div", { className: "min-w-[200px] rounded-large p-2", children: [jsxRuntime.jsx("div", { className: "px-3 py-2 text-small font-semibold text-default-500", children: item.title }), jsxRuntime.jsx(react.Listbox, { className: "mt-0.5", classNames: {
|
|
2100
|
+
list: "border-l border-default-200 pl-4 ml-2 gap-0.5",
|
|
2101
|
+
}, "aria-label": "Nested menu items", items: (_h = item.items) !== null && _h !== void 0 ? _h : [item], variant: "flat", hideSelectedIcon: true, selectedKeys: [selectedKey], selectionMode: "single", children: function (child) {
|
|
2102
|
+
var _a;
|
|
2103
|
+
return ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length)
|
|
2104
|
+
? renderCompactItem(child)
|
|
2105
|
+
: renderCompactItem(item);
|
|
2106
|
+
} })] }) })] })) : null,
|
|
2107
|
+
!isCollapsed && isNestType ? (jsxRuntime.jsxs("details", { className: "group/details w-full p-0", "aria-label": item.title, open: isSelectedKeyInThisNest, children: [jsxRuntime.jsx("summary", { className: react.cn("flex h-11 list-none cursor-pointer items-center gap-2 rounded-large px-3 py-1.5 pr-3", "text-default-500 hover:bg-default-100 [&::-webkit-details-marker]:hidden [&::marker]:hidden"), children: item.icon ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500 group-open/details:text-default-600", iconClassName), icon: item.icon, size: "lg" }), jsxRuntime.jsx("span", { className: "text-small font-medium text-default-500 group-open/details:text-default-600 flex-1", children: item.title }), jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center text-default-400", children: [jsxRuntime.jsx(IconComponent, { className: "hidden group-open/details:inline-block", icon: "solar:alt-arrow-down-outline", size: "sm", "aria-hidden": true }), jsxRuntime.jsx(IconComponent, { className: "inline-block group-open/details:hidden", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(_j = item.startContent) !== null && _j !== void 0 ? _j : null, jsxRuntime.jsxs("span", { className: "ml-auto flex shrink-0 items-center text-default-400", children: [jsxRuntime.jsx(IconComponent, { className: "hidden group-open/details:inline-block", icon: "solar:alt-arrow-down-outline", size: "sm", "aria-hidden": true }), jsxRuntime.jsx(IconComponent, { className: "inline-block group-open/details:hidden", icon: "solar:alt-arrow-right-outline", size: "sm", "aria-hidden": true })] })] })) }), jsxRuntime.jsx("div", { className: "py-0 pl-4", children: item.items && ((_k = item.items) === null || _k === void 0 ? void 0 : _k.length) > 0 ? (jsxRuntime.jsx(react.Listbox, { className: "mt-0.5", classNames: {
|
|
2108
|
+
list: react.cn("border-l border-default-200 pl-4 ml-2 gap-0.5"),
|
|
2109
|
+
}, items: item.items, variant: "flat", hideSelectedIcon: true, selectedKeys: [selectedKey], selectionMode: "single", children: function (child) { return renderSubItem(child); } })) : (renderItem(item)) })] })) : null));
|
|
2110
|
+
}, [isCollapsed, hideEndContent, iconClassName, items, selectedKey, renderSubItem]);
|
|
2090
2111
|
// Renders a simple item (without children) in the navigation list.
|
|
2091
2112
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
2092
2113
|
var renderItem = React.useCallback(function (item, parentKey) {
|
|
2093
2114
|
var _a, _b, _c, _d;
|
|
2094
2115
|
var isNestType = item.items &&
|
|
2095
2116
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2096
|
-
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
|
|
2117
|
+
(item === null || item === void 0 ? void 0 : item.type) === exports.EnumMenuNavListItem.Nest;
|
|
2097
2118
|
if (isNestType) {
|
|
2098
2119
|
return renderNestItem(item);
|
|
2099
2120
|
}
|
|
2100
|
-
var isItemSelected =
|
|
2121
|
+
var isItemSelected = selectedKey === item.key;
|
|
2101
2122
|
item.href; var itemProps = __rest(item, ["href"]);
|
|
2102
|
-
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item
|
|
2123
|
+
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, endContent: isCollapsed || hideEndContent ? null : ((_b = item.endContent) !== null && _b !== void 0 ? _b : null), startContent: isCollapsed ? null : item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_c = item.startContent) !== null && _c !== void 0 ? _c : null)), textValue: item.title, title: isCollapsed ? null : item.title, onPress: function () { return handleItemPress(item); }, "aria-selected": isItemSelected, "aria-label": item.title || "Menu item ".concat(item.key) }), isCollapsed ? (jsxRuntime.jsx(react.Tooltip, { content: item.title, placement: "right", closeDelay: 200, shouldCloseOnBlur: false, classNames: {
|
|
2103
2124
|
base: "text-default-500",
|
|
2104
2125
|
}, children: jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center", "aria-hidden": "true", children: item.icon ? (jsxRuntime.jsx(IconComponent, { className: react.cn("text-default-500", "group-data-[selected=true]:text-default-600", iconClassName), icon: item.icon, size: "lg" })) : (((_d = item.startContent) !== null && _d !== void 0 ? _d : null)) }) })) : null));
|
|
2105
2126
|
},
|
|
2106
2127
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2107
2128
|
[isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
|
|
2108
|
-
return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [
|
|
2129
|
+
return (jsxRuntime.jsx(react.Listbox, __assign({ ref: ref, hideSelectedIcon: true, as: "nav", className: react.cn("list-none", className), classNames: __assign(__assign({}, classNames), { list: react.cn("items-center", classNames === null || classNames === void 0 ? void 0 : classNames.list) }), color: "default", itemClasses: __assign(__assign({}, itemClasses), { base: react.cn("px-3 min-h-11 rounded-large h-[44px] data-[selected=true]:bg-primary-100", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base), title: react.cn("text-small font-medium text-default-500 group-data-[selected=true]:text-default-600 ", itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.title) }), items: items, selectedKeys: [selectedKey], selectionMode: "single", variant: "flat" }, props, { children: function (item) {
|
|
2109
2130
|
var _a, _b;
|
|
2110
2131
|
return item.items &&
|
|
2111
2132
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2112
|
-
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
|
|
2133
|
+
(item === null || item === void 0 ? void 0 : item.type) === exports.EnumMenuNavListItem.Nest ? (renderNestItem(item)) : item.items && ((_b = item.items) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (jsxRuntime.jsx(react.ListboxSection, { classNames: sectionClasses, showDivider: isCollapsed, title: item.title, children: item.items.map(renderItem) }, item.key)) : (renderItem(item));
|
|
2113
2134
|
} }), isCollapsed ? "compact" : "default"));
|
|
2114
2135
|
});
|
|
2115
2136
|
MenuNavList.displayName = "MenuNavList";
|
|
2116
2137
|
|
|
2138
|
+
var DEFAULT_TRANSLATIONS$2 = {
|
|
2139
|
+
menuLabel: "Menú",
|
|
2140
|
+
closeSidebarAriaLabel: "Cerrar menú lateral",
|
|
2141
|
+
mobileNavAriaLabel: "Navegación móvil",
|
|
2142
|
+
logoAlt: "Logo de",
|
|
2143
|
+
notDefinedLabel: "no definido",
|
|
2144
|
+
};
|
|
2117
2145
|
/**
|
|
2118
2146
|
* Sidebar menu component for navigation and user actions.
|
|
2119
|
-
*
|
|
2120
|
-
* @param userInfo - Object with user avatar, name, and email.
|
|
2121
|
-
* @param helpButton - Help button configuration.
|
|
2122
|
-
* @param upgradeCard - Optional upgrade card configuration.
|
|
2123
|
-
* @param isOpenSidebar - Controls sidebar visibility.
|
|
2124
|
-
* @param onOpenSidebarChange - Callback to open/close sidebar.
|
|
2147
|
+
* On mobile, shows a bottom navigation bar with items from the specified group.
|
|
2125
2148
|
*/
|
|
2126
2149
|
var MenuComponent = React.memo(function Menu(_a) {
|
|
2127
|
-
var
|
|
2128
|
-
|
|
2129
|
-
var
|
|
2130
|
-
|
|
2150
|
+
var _b, _c;
|
|
2151
|
+
var commerceInfo = _a.commerceInfo, userInfo = _a.userInfo, helpButton = _a.helpButton, isOpenSidebar = _a.isOpenSidebar, onOpenSidebarChange = _a.onOpenSidebarChange, menuItems = _a.menuItems, mobileBottomBarGroupKey = _a.mobileBottomBarGroupKey, _d = _a.showNativeMenu, showNativeMenu = _d === void 0 ? true : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e;
|
|
2152
|
+
var _f = React.useState(false), isCollapsed = _f[0], setIsCollapsed = _f[1];
|
|
2153
|
+
var _g = React.useState(false), logoError = _g[0], setLogoError = _g[1];
|
|
2154
|
+
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$2), translations);
|
|
2155
|
+
var commerceName = (typeof (commerceInfo === null || commerceInfo === void 0 ? void 0 : commerceInfo.name) === "string" && commerceInfo.name.trim()) ||
|
|
2156
|
+
t.notDefinedLabel;
|
|
2157
|
+
var userName = (typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) === "string" && userInfo.name.trim()) ||
|
|
2158
|
+
t.notDefinedLabel;
|
|
2159
|
+
var userRole = (typeof (userInfo === null || userInfo === void 0 ? void 0 : userInfo.role) === "string" && userInfo.role.trim()) ||
|
|
2160
|
+
t.notDefinedLabel;
|
|
2161
|
+
var helpTitle = (typeof (helpButton === null || helpButton === void 0 ? void 0 : helpButton.title) === "string" && helpButton.title.trim()) ||
|
|
2162
|
+
t.notDefinedLabel;
|
|
2163
|
+
var hasValidLogo = typeof (commerceInfo === null || commerceInfo === void 0 ? void 0 : commerceInfo.logo) === "string" &&
|
|
2164
|
+
commerceInfo.logo.trim() !== "" &&
|
|
2165
|
+
!logoError;
|
|
2166
|
+
var bottomBarItems = React.useMemo(function () {
|
|
2167
|
+
if (!mobileBottomBarGroupKey)
|
|
2168
|
+
return [];
|
|
2169
|
+
var group = menuItems.items.find(function (item) { return item.key === mobileBottomBarGroupKey; });
|
|
2170
|
+
if (!(group === null || group === void 0 ? void 0 : group.items))
|
|
2171
|
+
return [];
|
|
2172
|
+
return group.items.filter(function (item) { return item.icon; });
|
|
2173
|
+
}, [mobileBottomBarGroupKey, menuItems.items]);
|
|
2131
2174
|
var handleSidebarClose = React.useCallback(function () {
|
|
2132
2175
|
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
|
|
2133
2176
|
}, [onOpenSidebarChange]);
|
|
2177
|
+
var handleSidebarOpen = React.useCallback(function () {
|
|
2178
|
+
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
|
|
2179
|
+
}, [onOpenSidebarChange]);
|
|
2134
2180
|
var handleCollapseToggle = React.useCallback(function () {
|
|
2135
2181
|
setIsCollapsed(function (prev) { return !prev; });
|
|
2136
2182
|
}, []);
|
|
2137
|
-
var handleUpgradeClick = React.useCallback(function () {
|
|
2138
|
-
if (upgradeCard) {
|
|
2139
|
-
window.open(upgradeCard.buttonLink, "_blank");
|
|
2140
|
-
}
|
|
2141
|
-
}, [upgradeCard]);
|
|
2142
2183
|
var handleHelpClick = React.useCallback(function () {
|
|
2143
|
-
|
|
2184
|
+
var _a;
|
|
2185
|
+
var url = (_a = helpButton === null || helpButton === void 0 ? void 0 : helpButton.redirect) === null || _a === void 0 ? void 0 : _a.trim();
|
|
2186
|
+
if (url)
|
|
2187
|
+
window.open(url, "_blank");
|
|
2144
2188
|
}, [helpButton]);
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2189
|
+
// Menú lateral: al seleccionar ítem/sub-ítem cerrar en móvil. No hacer nada si es una sección (solo título).
|
|
2190
|
+
var handleMenuSelect = React.useCallback(function (key, href) {
|
|
2191
|
+
var _a;
|
|
2192
|
+
var isSectionKey = menuItems.items.some(function (it) {
|
|
2193
|
+
return it.key === key &&
|
|
2194
|
+
Array.isArray(it.items) &&
|
|
2195
|
+
it.items.length > 0 &&
|
|
2196
|
+
it.type !== exports.EnumMenuNavListItem.Nest;
|
|
2197
|
+
});
|
|
2198
|
+
if (isSectionKey)
|
|
2199
|
+
return;
|
|
2200
|
+
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
|
|
2201
|
+
(_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "sidebar");
|
|
2202
|
+
}, [onOpenSidebarChange, menuItems.onSelect, menuItems.items]);
|
|
2203
|
+
// Barra inferior: cerrar lateral y notificar con source 'bottomBar' para que la app no reabra el menú.
|
|
2204
|
+
var handleBottomBarSelect = React.useCallback(function (key, href) {
|
|
2205
|
+
var _a;
|
|
2206
|
+
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
|
|
2207
|
+
(_a = menuItems.onSelect) === null || _a === void 0 ? void 0 : _a.call(menuItems, key, href, "bottomBar");
|
|
2208
|
+
}, [onOpenSidebarChange, menuItems.onSelect]);
|
|
2209
|
+
var showBottomBar = (mobileBottomBarGroupKey && bottomBarItems.length > 0) || showNativeMenu;
|
|
2210
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showBottomBar && (jsxRuntime.jsx(MenuMobileBottomBar, { items: bottomBarItems, selectedKey: menuItems.selectedKey, onSelect: handleBottomBarSelect, onMenuPress: handleSidebarOpen, menuLabel: t.menuLabel, navAriaLabel: t.mobileNavAriaLabel, forceVisible: showNativeMenu && bottomBarItems.length === 0 })), jsxRuntime.jsx("button", { type: "button", "aria-label": t.closeSidebarAriaLabel, className: "menu-overlay ".concat(isOpenSidebar ? "menu-overlay--open" : ""), onClick: handleSidebarClose, tabIndex: isOpenSidebar ? 0 : -1 }), jsxRuntime.jsx("div", { className: "container__menu ".concat(isCollapsed
|
|
2149
2211
|
? "container__menu--collapsed"
|
|
2150
|
-
: "container__menu--expanded"
|
|
2212
|
+
: "container__menu--expanded", " ").concat(isOpenSidebar ? "container__menu--mobile-open" : ""), "aria-hidden": !isOpenSidebar, children: jsxRuntime.jsxs("div", { className: "content__menu", children: [jsxRuntime.jsxs("div", { className: "content__menu--header", style: {
|
|
2213
|
+
flexDirection: isCollapsed ? "column-reverse" : "row",
|
|
2214
|
+
}, children: [jsxRuntime.jsxs("div", { className: "flex flex-row items-center justify-center ".concat(isCollapsed ? "gap-0" : "gap-2"), children: [jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full bg-foreground text-background", children: hasValidLogo ? (jsxRuntime.jsx("img", { src: commerceInfo.logo, alt: "".concat(t.logoAlt, " ").concat(commerceName), className: "h-full w-full object-cover", onError: function () { return setLogoError(true); } })) : (jsxRuntime.jsx(IconComponent, { icon: "solar:buildings-2-outline", size: "sm", className: "shrink-0", "aria-hidden": true })) }), jsxRuntime.jsx("span", { className: "collapsible-item text-small font-bold truncate min-w-0", children: commerceName })] }), jsxRuntime.jsxs("div", { className: "flex items-center", children: [jsxRuntime.jsx(IconComponent, { icon: "material-symbols-light:close", size: "lg", className: "cursor-pointer block sm:hidden", onClick: handleSidebarClose }), jsxRuntime.jsx(IconComponent, { icon: isCollapsed
|
|
2151
2215
|
? "solar:alt-arrow-right-outline"
|
|
2152
|
-
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: userInfo.avatar, color: userInfo.avatar ===
|
|
2216
|
+
: "solar:alt-arrow-left-outline", size: "lg", className: "hidden sm:block cursor-pointer", onClick: handleCollapseToggle })] })] }), jsxRuntime.jsx(react.Spacer, { y: 6 }), jsxRuntime.jsxs("div", { className: "content__menu--user ".concat(isCollapsed ? "gap-0" : "gap-3"), children: [jsxRuntime.jsx(react.Avatar, { size: "md", src: ((_b = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _b === void 0 ? void 0 : _b.trim()) || undefined, color: !((_c = userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) === null || _c === void 0 ? void 0 : _c.trim()) ? "warning" : "default", name: userName, className: "shrink-0" }), jsxRuntime.jsxs("div", { className: "collapsible-item flex min-w-0 flex-col overflow-hidden", children: [jsxRuntime.jsx("p", { className: "text-small font-medium text-default-900 truncate", children: userName }), jsxRuntime.jsx("p", { className: "text-tiny text-default-400 truncate", children: userRole })] })] }), jsxRuntime.jsx("div", { className: "".concat(!isCollapsed ? "flex-1" : "h-full", " min-h-0 py-6"), children: jsxRuntime.jsx("div", { className: "h-full overflow-y-auto pr-6 -mr-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: jsxRuntime.jsx(MenuNavList, { defaultSelectedKey: menuItems.selectedKey, items: menuItems.items, isCollapsed: isCollapsed, onSelect: handleMenuSelect }, menuItems.selectedKey) }) }), jsxRuntime.jsx("div", { className: "mt-auto flex flex-col justify-center items-center", children: jsxRuntime.jsx(react.Button, { fullWidth: true, className: " text-default-500 data-[hover=true]:text-default-600", startContent: jsxRuntime.jsx(IconComponent, { className: "text-default-500", icon: "solar:info-circle-line-duotone", size: "md" }), variant: "light", onPress: handleHelpClick, isIconOnly: isCollapsed, children: !isCollapsed && (jsxRuntime.jsx("span", { className: "collapsible-item truncate", children: helpTitle })) }) })] }) })] }));
|
|
2153
2217
|
});
|
|
2154
2218
|
|
|
2155
2219
|
var StepIndicator = function (_a) {
|
|
@@ -3551,7 +3615,7 @@ var defaultTranslations$3 = {
|
|
|
3551
3615
|
* ```
|
|
3552
3616
|
*/
|
|
3553
3617
|
var SocialMediaPreview = function (_a) {
|
|
3554
|
-
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;
|
|
3618
|
+
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, _j = _a.showEditButton, showEditButton = _j === void 0 ? false : _j, onEditClick = _a.onEditClick;
|
|
3555
3619
|
var t = __assign(__assign({}, defaultTranslations$3), translations);
|
|
3556
3620
|
var displayUsername = username || t.username;
|
|
3557
3621
|
var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
|
|
@@ -3590,12 +3654,12 @@ var SocialMediaPreview = function (_a) {
|
|
|
3590
3654
|
return renderInstagramPost();
|
|
3591
3655
|
};
|
|
3592
3656
|
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 ".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" })] })] })); };
|
|
3593
|
-
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.
|
|
3657
|
+
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.jsxs("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)), showEditButton && typeof onEditClick === "function" && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "solid", color: "default", className: "absolute top-4 right-4 z-30 bg-background/90 dark:bg-background/90 backdrop-blur-sm rounded-full shadow-lg hover:bg-background/100 transition-colors border border-divider", onPress: onEditClick, "aria-label": "Editar imagen", children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-2-outline", className: "text-gray-900" }) }))] })), 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) {
|
|
3594
3658
|
e.stopPropagation();
|
|
3595
3659
|
onToggleCaption();
|
|
3596
3660
|
}, 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 }))] })] })); };
|
|
3597
3661
|
// Render Facebook Preview
|
|
3598
|
-
var renderFacebook = 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-xl overflow-hidden", " ").concat(className), children: [showHeader && (jsxRuntime.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-600 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-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1", children: [t.timeAgo, " \u00B7 ", jsxRuntime.jsx(IconComponent, { icon: "solar:earth-bold", className: "text-xs" })] })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-xl text-gray-600 dark:text-gray-400" })] }) })), jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx("p", { className: "text-sm text-gray-900 dark:text-white whitespace-pre-wrap break-words", children: displayCaption }) }), imageUrl && (jsxRuntime.
|
|
3662
|
+
var renderFacebook = 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-xl overflow-hidden", " ").concat(className), children: [showHeader && (jsxRuntime.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-600 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-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1", children: [t.timeAgo, " \u00B7 ", jsxRuntime.jsx(IconComponent, { icon: "solar:earth-bold", className: "text-xs" })] })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-xl text-gray-600 dark:text-gray-400" })] }) })), jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx("p", { className: "text-sm text-gray-900 dark:text-white whitespace-pre-wrap break-words", children: displayCaption }) }), imageUrl && (jsxRuntime.jsxs("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)), showEditButton && typeof onEditClick === "function" && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "solid", color: "default", className: "absolute top-4 right-4 z-30 bg-white/90 hover:bg-white shadow-lg", onPress: onEditClick, "aria-label": "Editar imagen", children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-2-outline", className: "text-gray-900" }) }))] })), jsxRuntime.jsx("div", { className: "p-3 border-t border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-around", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:like-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Me gusta" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Comentar" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Compartir" })] })] }) })] })); };
|
|
3599
3663
|
// Render TikTok Preview
|
|
3600
3664
|
var renderTikTok = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-black 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-gradient-to-b from-transparent via-transparent to-black opacity-60" })] })), jsxRuntime.jsxs("div", { className: "absolute right-2 bottom-20 flex flex-col items-center gap-6 z-20", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-white bg-gray-900 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("div", { className: "w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center -mt-3 border-2 border-black", children: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold", className: "text-xs text-white" }) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "24.5K" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "1,234" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "453" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "892" })] }), jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-800 border border-gray-700 flex items-center justify-center", children: jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-xl text-white" }) })] }), jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-14 z-20 p-4", children: [jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-white mb-1", children: ["@", displayUsername] }), jsxRuntime.jsx("p", { className: "text-sm text-white mb-2 line-clamp-2", children: displayCaption }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-white", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-sm" }), jsxRuntime.jsxs("span", { className: "truncate", children: ["Sonido original - ", displayUsername] })] })] })] })); };
|
|
3601
3665
|
// Render Twitter Preview
|