@beweco/aurora-ui 0.1.52 → 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 +148 -77
- package/dist/index.esm.js +147 -76
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts +5 -0
- package/dist/types/components/breadcrumbs/Breadcrumbs.types.d.ts.map +1 -1
- package/dist/types/components/header/Header.d.ts.map +1 -1
- package/dist/types/components/header/Header.types.d.ts +25 -4
- package/dist/types/components/header/Header.types.d.ts.map +1 -1
- package/dist/types/components/header/_internal/config-menu/ConfigMenu.d.ts.map +1 -1
- package/dist/types/components/header/_internal/config-menu/ConfigMenu.types.d.ts +7 -4
- package/dist/types/components/header/_internal/config-menu/ConfigMenu.types.d.ts.map +1 -1
- package/dist/types/components/header/index.d.ts +1 -1
- package/dist/types/components/header/index.d.ts.map +1 -1
- 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
|
@@ -1674,20 +1674,23 @@ var H4 = function (_a) {
|
|
|
1674
1674
|
* ```
|
|
1675
1675
|
*/
|
|
1676
1676
|
var BreadcrumbsComponent = function (_a) {
|
|
1677
|
-
var items = _a.items, children = _a.children, heroUIProps = __rest(_a, ["items", "children"]);
|
|
1677
|
+
var items = _a.items, children = _a.children, onItemClick = _a.onItemClick, heroUIProps = __rest(_a, ["items", "children", "onItemClick"]);
|
|
1678
1678
|
return (jsxRuntime.jsx(react.Breadcrumbs, __assign({}, heroUIProps, { children: items
|
|
1679
|
-
? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, {
|
|
1679
|
+
? items.map(function (item, index) { return (jsxRuntime.jsx(react.BreadcrumbItem, __assign({}, (onItemClick && item.href && !item.isCurrent
|
|
1680
|
+
? { onPress: function () { return onItemClick(item.href); } }
|
|
1681
|
+
: { href: item.href }), { isCurrent: item.isCurrent, children: item.label }), "".concat(item.href || item.label, "-").concat(index))); })
|
|
1680
1682
|
: children })));
|
|
1681
1683
|
};
|
|
1682
1684
|
|
|
1683
1685
|
var ConfigMenu = function (_a) {
|
|
1684
|
-
var
|
|
1685
|
-
|
|
1686
|
-
|
|
1686
|
+
var options = _a.options, onLogout = _a.onLogout, onOptionSelect = _a.onOptionSelect, translations = _a.translations;
|
|
1687
|
+
return (jsxRuntime.jsxs(react.Dropdown, { className: "min-w-40", children: [jsxRuntime.jsx(react.DropdownTrigger, { children: jsxRuntime.jsx(react.Button, { isIconOnly: true, color: "default", startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:settings-linear" }) }) }), jsxRuntime.jsxs(react.DropdownMenu, { "aria-label": "Configuration", children: [jsxRuntime.jsx(react.DropdownSection, { showDivider: true, className: "mb-0", children: options.map(function (item) { return (jsxRuntime.jsx(react.DropdownItem, __assign({}, (onOptionSelect
|
|
1688
|
+
? { onPress: function () { return onOptionSelect(item.href); } }
|
|
1689
|
+
: { href: item.href }), { className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1687
1690
|
base: "text-default-500",
|
|
1688
|
-
}, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }, item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1691
|
+
}, startContent: item.icon ? jsxRuntime.jsx(IconComponent, { icon: item.icon }) : undefined, children: item.label }), item.label)); }) }), jsxRuntime.jsx(react.DropdownSection, { children: jsxRuntime.jsx(react.DropdownItem, { onPress: onLogout, className: "data-[hover=true]:bg-primary-100 data-[hover=true]:text-default-700", classNames: {
|
|
1689
1692
|
base: "text-default-500",
|
|
1690
|
-
}, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children:
|
|
1693
|
+
}, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:logout-2-linear" }), children: translations === null || translations === void 0 ? void 0 : translations.logout }, "logout") })] })] }));
|
|
1691
1694
|
};
|
|
1692
1695
|
ConfigMenu.displayName = "ConfigMenu";
|
|
1693
1696
|
|
|
@@ -1700,9 +1703,13 @@ var NotificationButton = function (_a) {
|
|
|
1700
1703
|
};
|
|
1701
1704
|
NotificationButton.displayName = "NotificationButton";
|
|
1702
1705
|
|
|
1706
|
+
var DEFAULT_TRANSLATIONS$4 = {
|
|
1707
|
+
logout: "Cerrar sesión",
|
|
1708
|
+
};
|
|
1703
1709
|
var HeaderComponent = function (_a) {
|
|
1704
|
-
var notificationCount = _a.notificationCount, options = _a.options, onMenuClick = _a.onMenuClick, onLogout = _a.onLogout,
|
|
1705
|
-
|
|
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$4), translations);
|
|
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 })] })] }) }));
|
|
1706
1713
|
};
|
|
1707
1714
|
HeaderComponent.displayName = "Header";
|
|
1708
1715
|
|
|
@@ -1825,7 +1832,7 @@ KanbanColumn.displayName = "KanbanColumn";
|
|
|
1825
1832
|
* Traducciones por defecto en español.
|
|
1826
1833
|
* Se mezclan con las traducciones proporcionadas por el usuario.
|
|
1827
1834
|
*/
|
|
1828
|
-
var DEFAULT_TRANSLATIONS$
|
|
1835
|
+
var DEFAULT_TRANSLATIONS$3 = {
|
|
1829
1836
|
dropHere: "Soltar aquí",
|
|
1830
1837
|
emptyMessage: "No hay elementos",
|
|
1831
1838
|
};
|
|
@@ -1859,7 +1866,7 @@ var columnGapClasses = {
|
|
|
1859
1866
|
var KanbanComponent = function (_a) {
|
|
1860
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;
|
|
1861
1868
|
// Mezclar traducciones del usuario con las por defecto
|
|
1862
|
-
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$
|
|
1869
|
+
var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$3), translations);
|
|
1863
1870
|
// Determinar si drag está habilitado
|
|
1864
1871
|
var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
|
|
1865
1872
|
// Estado del drag actual
|
|
@@ -1967,6 +1974,24 @@ var ImagePreview = function (_a) {
|
|
|
1967
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)); }) }));
|
|
1968
1975
|
};
|
|
1969
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
|
+
|
|
1970
1995
|
function normalizeClass(value) {
|
|
1971
1996
|
if (typeof value === "string") {
|
|
1972
1997
|
return value || undefined;
|
|
@@ -1999,11 +2024,6 @@ var getItemClasses = function (isCollapsed, itemClassesProp) {
|
|
|
1999
2024
|
})) }));
|
|
2000
2025
|
};
|
|
2001
2026
|
|
|
2002
|
-
var EnumMenuNavListItem;
|
|
2003
|
-
(function (EnumMenuNavListItem) {
|
|
2004
|
-
EnumMenuNavListItem["Nest"] = "nest";
|
|
2005
|
-
})(EnumMenuNavListItem || (EnumMenuNavListItem = {}));
|
|
2006
|
-
|
|
2007
2027
|
/**
|
|
2008
2028
|
* @component MenuNavList
|
|
2009
2029
|
* @description A versatile navigation list component that can be displayed in an expanded or collapsed state.
|
|
@@ -2025,34 +2045,43 @@ var EnumMenuNavListItem;
|
|
|
2025
2045
|
*/
|
|
2026
2046
|
var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
2027
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"]);
|
|
2028
|
-
|
|
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;
|
|
2029
2051
|
// Component styles
|
|
2030
2052
|
var sectionClasses = getSectionClasses(isCollapsed, sectionClassesProp);
|
|
2031
2053
|
var itemClasses = getItemClasses(isCollapsed, itemClassesProp);
|
|
2032
|
-
//
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
var handleItemPress = React.useCallback(function (item, parentKey) {
|
|
2036
|
-
var keySelected = typeof parentKey === "string" ? parentKey : item.key;
|
|
2037
|
-
setSelected(keySelected);
|
|
2038
|
-
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);
|
|
2039
2057
|
if (document.activeElement instanceof HTMLElement) {
|
|
2040
2058
|
document.activeElement.blur();
|
|
2041
2059
|
}
|
|
2042
|
-
}, [
|
|
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]);
|
|
2043
2071
|
// Renders the item displayed inside the Popover when the menu is collapsed.
|
|
2044
2072
|
var renderCompactItem = React.useCallback(function (item, parentKey) {
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
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); } })));
|
|
2048
|
-
}, [handleItemPress, iconClassName]);
|
|
2073
|
+
return renderSubItem(item, parentKey);
|
|
2074
|
+
}, [renderSubItem]);
|
|
2049
2075
|
// Renders a nested item, i.e., an item that has sub-items.
|
|
2050
2076
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
2051
2077
|
var renderNestItem = React.useCallback(function (item) {
|
|
2052
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
2078
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
2053
2079
|
var isNestType = item.items &&
|
|
2054
2080
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2055
|
-
(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);
|
|
2056
2085
|
item.href; var itemProps = __rest(item, ["href"]);
|
|
2057
2086
|
return (React.createElement(react.ListboxItem, __assign({}, itemProps, { key: item.key, classNames: {
|
|
2058
2087
|
base: react.cn({
|
|
@@ -2064,85 +2093,127 @@ var MenuNavList = React.forwardRef(function (_a, ref) {
|
|
|
2064
2093
|
}, "rounded-large"),
|
|
2065
2094
|
}, endContent: isCollapsed || isNestType || hideEndContent
|
|
2066
2095
|
? null
|
|
2067
|
-
: ((
|
|
2068
|
-
isCollapsed && isNestType ? (jsxRuntime.jsxs(react.Popover, { placement: "right", offset: 10, children: [jsxRuntime.jsx(react.PopoverTrigger, { children: jsxRuntime.
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
}, [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]);
|
|
2083
2111
|
// Renders a simple item (without children) in the navigation list.
|
|
2084
2112
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
2085
2113
|
var renderItem = React.useCallback(function (item, parentKey) {
|
|
2086
2114
|
var _a, _b, _c, _d;
|
|
2087
2115
|
var isNestType = item.items &&
|
|
2088
2116
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2089
|
-
(item === null || item === void 0 ? void 0 : item.type) === EnumMenuNavListItem.Nest;
|
|
2117
|
+
(item === null || item === void 0 ? void 0 : item.type) === exports.EnumMenuNavListItem.Nest;
|
|
2090
2118
|
if (isNestType) {
|
|
2091
2119
|
return renderNestItem(item);
|
|
2092
2120
|
}
|
|
2093
|
-
var isItemSelected =
|
|
2121
|
+
var isItemSelected = selectedKey === item.key;
|
|
2094
2122
|
item.href; var itemProps = __rest(item, ["href"]);
|
|
2095
|
-
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: {
|
|
2096
2124
|
base: "text-default-500",
|
|
2097
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));
|
|
2098
2126
|
},
|
|
2099
2127
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2100
2128
|
[isCollapsed, hideEndContent, iconClassName, itemClasses === null || itemClasses === void 0 ? void 0 : itemClasses.base]);
|
|
2101
|
-
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) {
|
|
2102
2130
|
var _a, _b;
|
|
2103
2131
|
return item.items &&
|
|
2104
2132
|
((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
|
|
2105
|
-
(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));
|
|
2106
2134
|
} }), isCollapsed ? "compact" : "default"));
|
|
2107
2135
|
});
|
|
2108
2136
|
MenuNavList.displayName = "MenuNavList";
|
|
2109
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
|
+
};
|
|
2110
2145
|
/**
|
|
2111
2146
|
* Sidebar menu component for navigation and user actions.
|
|
2112
|
-
*
|
|
2113
|
-
* @param userInfo - Object with user avatar, name, and email.
|
|
2114
|
-
* @param helpButton - Help button configuration.
|
|
2115
|
-
* @param upgradeCard - Optional upgrade card configuration.
|
|
2116
|
-
* @param isOpenSidebar - Controls sidebar visibility.
|
|
2117
|
-
* @param onOpenSidebarChange - Callback to open/close sidebar.
|
|
2147
|
+
* On mobile, shows a bottom navigation bar with items from the specified group.
|
|
2118
2148
|
*/
|
|
2119
2149
|
var MenuComponent = React.memo(function Menu(_a) {
|
|
2120
|
-
var
|
|
2121
|
-
|
|
2122
|
-
var
|
|
2123
|
-
|
|
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]);
|
|
2124
2174
|
var handleSidebarClose = React.useCallback(function () {
|
|
2125
2175
|
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(false);
|
|
2126
2176
|
}, [onOpenSidebarChange]);
|
|
2177
|
+
var handleSidebarOpen = React.useCallback(function () {
|
|
2178
|
+
onOpenSidebarChange === null || onOpenSidebarChange === void 0 ? void 0 : onOpenSidebarChange(true);
|
|
2179
|
+
}, [onOpenSidebarChange]);
|
|
2127
2180
|
var handleCollapseToggle = React.useCallback(function () {
|
|
2128
2181
|
setIsCollapsed(function (prev) { return !prev; });
|
|
2129
2182
|
}, []);
|
|
2130
|
-
var handleUpgradeClick = React.useCallback(function () {
|
|
2131
|
-
if (upgradeCard) {
|
|
2132
|
-
window.open(upgradeCard.buttonLink, "_blank");
|
|
2133
|
-
}
|
|
2134
|
-
}, [upgradeCard]);
|
|
2135
2183
|
var handleHelpClick = React.useCallback(function () {
|
|
2136
|
-
|
|
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");
|
|
2137
2188
|
}, [helpButton]);
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
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
|
|
2142
2211
|
? "container__menu--collapsed"
|
|
2143
|
-
: "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
|
|
2144
2215
|
? "solar:alt-arrow-right-outline"
|
|
2145
|
-
: "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 })) }) })] }) })] }));
|
|
2146
2217
|
});
|
|
2147
2218
|
|
|
2148
2219
|
var StepIndicator = function (_a) {
|
|
@@ -3544,7 +3615,7 @@ var defaultTranslations$3 = {
|
|
|
3544
3615
|
* ```
|
|
3545
3616
|
*/
|
|
3546
3617
|
var SocialMediaPreview = function (_a) {
|
|
3547
|
-
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;
|
|
3548
3619
|
var t = __assign(__assign({}, defaultTranslations$3), translations);
|
|
3549
3620
|
var displayUsername = username || t.username;
|
|
3550
3621
|
var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
|
|
@@ -3583,12 +3654,12 @@ var SocialMediaPreview = function (_a) {
|
|
|
3583
3654
|
return renderInstagramPost();
|
|
3584
3655
|
};
|
|
3585
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" })] })] })); };
|
|
3586
|
-
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) {
|
|
3587
3658
|
e.stopPropagation();
|
|
3588
3659
|
onToggleCaption();
|
|
3589
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 }))] })] })); };
|
|
3590
3661
|
// Render Facebook Preview
|
|
3591
|
-
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" })] })] }) })] })); };
|
|
3592
3663
|
// Render TikTok Preview
|
|
3593
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] })] })] })] })); };
|
|
3594
3665
|
// Render Twitter Preview
|