@beweco/aurora-ui 0.1.23 → 0.1.24

package/dist/index.cjs.js

@@ -177,7 +177,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$a = {
+var defaultTranslations$b = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -201,7 +201,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$b), translations);
     var _b = React.useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -271,7 +271,7 @@ var P = function (_a) {
     return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$9 = {
+var defaultTranslations$a = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -325,7 +325,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$9), translations);
+    var t = __assign(__assign({}, defaultTranslations$a), translations);
     var _h = React.useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = React.useMemo(function () {
         var _a;
@@ -990,7 +990,7 @@ var Chip = function (_a) {
 };
 
 // Traducciones por defecto en español
-var defaultTranslations$8 = {
+var defaultTranslations$9 = {
     dayOption: "Día específico",
     dateRangeOption: "Rango de fechas",
     selectDateAriaLabel: "Seleccionar fecha",
@@ -1008,7 +1008,7 @@ var DateSelector = function (_a) {
     var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
     var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$8), translations);
+    var t = __assign(__assign({}, defaultTranslations$9), translations);
     var handleTypeChange = function (value) {
         var newType = value;
         setType(newType);
@@ -1115,7 +1115,7 @@ var HeaderComponent = function (_a) {
 };
 HeaderComponent.displayName = "Header";
 
-var defaultTranslations$7 = {
+var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
     emptyStateText: "No hay imágenes para mostrar",
@@ -1148,7 +1148,7 @@ var normalizeImages = function (images) {
 };
 var ImagePreview = function (_a) {
     var images = _a.images, _b = _a.size, size = _b === void 0 ? "small" : _b, onRemove = _a.onRemove, _c = _a.showRemoveButton, showRemoveButton = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "bg-white dark:bg-gray-800" : _f, _g = _a.radius, radius = _g === void 0 ? "lg" : _g, _h = _a.showBorder, showBorder = _h === void 0 ? true : _h, onImageClick = _a.onImageClick;
-    var t = __assign(__assign({}, defaultTranslations$7), translations);
+    var t = __assign(__assign({}, defaultTranslations$8), translations);
     var normalizedImages = normalizeImages(images);
     var sizeClass = sizeClasses[size];
     var radiusClass = radiusClasses[radius];
@@ -1436,13 +1436,13 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
-var defaultTranslations$6 = {
+var defaultTranslations$7 = {
     checkIconTitle: "Check",
 };
 var VerticalSteps = React.forwardRef(function (_a, ref) {
     var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
-    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -2081,7 +2081,7 @@ var countries = [
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
 // Traducciones por defecto
-var defaultTranslations$5 = {
+var defaultTranslations$6 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -2099,7 +2099,7 @@ var Phone = function (_a) {
     var portalDropdownRef = React.useRef(null);
     var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$5), translations);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
     var finalLabel = label || t.label;
     React.useEffect(function () {
         if (value) {
@@ -2178,7 +2178,7 @@ var Phone = function (_a) {
                                     : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3", children: jsxRuntime.jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsxRuntime.jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
-var defaultTranslations$4 = {
+var defaultTranslations$5 = {
     message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
     buttonText: "Explore",
     closeButtonLabel: "Close Banner",
@@ -2188,7 +2188,7 @@ var defaultTranslations$4 = {
  */
 var PromotionalBanner = function (_a) {
     var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
-    var t = __assign(__assign({}, defaultTranslations$4), translations);
+    var t = __assign(__assign({}, defaultTranslations$5), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -2517,7 +2517,7 @@ var TimeInput = function (_a) {
  * />
  * ```
  */
-var defaultTranslations$3 = {
+var defaultTranslations$4 = {
     /** Label for the start time input field */
     from: "Desde",
     /** Label for the end time input field */
@@ -2575,7 +2575,7 @@ var defaultTranslations$3 = {
  */
 var ScheduleRow = function (_a) {
     var day = _a.day, daySchedule = _a.daySchedule, _b = _a.translations, translations = _b === void 0 ? {} : _b, _c = _a.showCopyToAll, showCopyToAll = _c === void 0 ? false : _c, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$4), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -2728,6 +2728,81 @@ var Select = function (_a) {
             } })) }));
 };
 
+var defaultTranslations$3 = {
+    username: "tu_negocio",
+    sendMessage: "Enviar mensaje",
+    viewMore: "ver más",
+    viewLess: "ver menos",
+    timeAgo: "hace unos momentos",
+    imageAlt: "Vista previa de red social",
+};
+/**
+ * SocialMediaPreview component for displaying social media post previews
+ * across multiple platforms: Instagram, Facebook, TikTok, and Twitter.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaPreview
+ *   platform="instagram"
+ *   imageUrl="/path/to/image.jpg"
+ *   caption="Check out our new product!"
+ *   variant="full"
+ * />
+ * ```
+ */
+var SocialMediaPreview = function (_a) {
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var displayUsername = username || t.username;
+    var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    var getTruncatedCaption = function () {
+        if (variant !== "compact") {
+            return caption;
+        }
+        if (!shouldTruncate || showFullCaption) {
+            return caption;
+        }
+        var firstLineEnd = caption.indexOf("\n");
+        var truncateAt = firstLineEnd > 0 && firstLineEnd < maxCaptionLength
+            ? firstLineEnd
+            : maxCaptionLength;
+        return "".concat(caption.substring(0, truncateAt).trim(), "...");
+    };
+    var displayCaption = getTruncatedCaption();
+    // Render Instagram Preview
+    var renderInstagram = function () {
+        if (variant === "story") {
+            return renderInstagramStory();
+        }
+        return renderInstagramPost();
+    };
+    var renderInstagramStory = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsxRuntime.jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsxRuntime.jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxRuntime.jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsxRuntime.jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsxRuntime.jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
+    var renderInstagramPost = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsxs("div", { className: "text-sm text-left", children: [jsxRuntime.jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsxRuntime.jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                                    e.stopPropagation();
+                                    onToggleCaption();
+                                }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
+    // Render Facebook Preview
+    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.jsx("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)) })), 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" })] })] }) })] })); };
+    // Render TikTok Preview
+    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] })] })] })] })); };
+    // Render Twitter Preview
+    var renderTwitter = function () { return (jsxRuntime.jsx("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-xl border border-gray-200 dark:border-gray-800" : "rounded-xl border border-gray-200 dark:border-gray-800", " ").concat(className), children: jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0", 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 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [jsxRuntime.jsx("span", { className: "font-bold text-gray-900 dark:text-white text-sm truncate", children: displayUsername }), jsxRuntime.jsx(IconComponent, { icon: "solar:verified-check-bold", className: "text-blue-500 text-base flex-shrink-0" }), jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-sm truncate", children: ["@", displayUsername.toLowerCase().replace(/\s/g, "_")] }), jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\u00B7 2h" })] }), jsxRuntime.jsx("p", { className: "text-gray-900 dark:text-white text-sm mb-3 whitespace-pre-wrap break-words", children: displayCaption }), imageUrl && (jsxRuntime.jsx("div", { className: "rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 mb-3", children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between max-w-md mt-3", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "234" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:repost-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "1.2K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "5.6K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chart-2-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "12K" })] }), jsxRuntime.jsx("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-lg" }) })] })] })] }) }) })); };
+    // Main render logic
+    switch (platform) {
+        case "instagram":
+            return renderInstagram();
+        case "facebook":
+            return renderFacebook();
+        case "tiktok":
+            return renderTikTok();
+        case "twitter":
+            return renderTwitter();
+        default:
+            return renderInstagram();
+    }
+};
+
 function AuraTable(_a) {
     var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
     return (jsxRuntime.jsxs(react.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
@@ -4329,6 +4404,7 @@ exports.RowSteps = RowSteps;
 exports.ScheduleRow = ScheduleRow;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
+exports.SocialMediaPreview = SocialMediaPreview;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;
 exports.Textarea = Textarea;
@@ -4342,7 +4418,7 @@ exports.VerticalSteps = VerticalSteps;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
-exports.defaultTranslations = defaultTranslations$3;
+exports.defaultTranslations = defaultTranslations$4;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip as Chip$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
+import { Button as Button$1, DatePicker as DatePicker$1, DateRangePicker as DateRangePicker$1, Input as Input$1, RadioGroup, Radio, cn, Card as Card$1, Spacer, Tabs, Tab, Chip as Chip$1, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Autocomplete, Breadcrumbs, BreadcrumbItem, DropdownSection, ListboxItem, Popover, PopoverTrigger, Tooltip as Tooltip$1, PopoverContent, Listbox, Accordion, AccordionItem, ListboxSection, Avatar, CardBody, CardFooter, Pagination as Pagination$1, Link, Switch as Switch$1, TimeInput as TimeInput$1, Select as Select$1, Image as Image$1, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Textarea as Textarea$1, Alert, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader as ModalHeader$1, ModalBody as ModalBody$1, Slider, ModalFooter as ModalFooter$1, Spinner, SelectItem, Drawer, DrawerContent, DrawerBody } from '@heroui/react';
 export * from '@heroui/react';
 export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -178,7 +178,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$a = {
+var defaultTranslations$b = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -202,7 +202,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$b), translations);
     var _b = useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -272,7 +272,7 @@ var P = function (_a) {
     return (jsx("p", __assign({ className: cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$9 = {
+var defaultTranslations$a = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -326,7 +326,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$9), translations);
+    var t = __assign(__assign({}, defaultTranslations$a), translations);
     var _h = useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = useMemo(function () {
         var _a;
@@ -991,7 +991,7 @@ var Chip = function (_a) {
 };
 
 // Traducciones por defecto en español
-var defaultTranslations$8 = {
+var defaultTranslations$9 = {
     dayOption: "Día específico",
     dateRangeOption: "Rango de fechas",
     selectDateAriaLabel: "Seleccionar fecha",
@@ -1009,7 +1009,7 @@ var DateSelector = function (_a) {
     var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
     var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$8), translations);
+    var t = __assign(__assign({}, defaultTranslations$9), translations);
     var handleTypeChange = function (value) {
         var newType = value;
         setType(newType);
@@ -1116,7 +1116,7 @@ var HeaderComponent = function (_a) {
 };
 HeaderComponent.displayName = "Header";
 
-var defaultTranslations$7 = {
+var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
     emptyStateText: "No hay imágenes para mostrar",
@@ -1149,7 +1149,7 @@ var normalizeImages = function (images) {
 };
 var ImagePreview = function (_a) {
     var images = _a.images, _b = _a.size, size = _b === void 0 ? "small" : _b, onRemove = _a.onRemove, _c = _a.showRemoveButton, showRemoveButton = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "bg-white dark:bg-gray-800" : _f, _g = _a.radius, radius = _g === void 0 ? "lg" : _g, _h = _a.showBorder, showBorder = _h === void 0 ? true : _h, onImageClick = _a.onImageClick;
-    var t = __assign(__assign({}, defaultTranslations$7), translations);
+    var t = __assign(__assign({}, defaultTranslations$8), translations);
     var normalizedImages = normalizeImages(images);
     var sizeClass = sizeClasses[size];
     var radiusClass = radiusClasses[radius];
@@ -1437,13 +1437,13 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
-var defaultTranslations$6 = {
+var defaultTranslations$7 = {
     checkIconTitle: "Check",
 };
 var VerticalSteps = React.forwardRef(function (_a, ref) {
     var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
-    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -2082,7 +2082,7 @@ var countries = [
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
 // Traducciones por defecto
-var defaultTranslations$5 = {
+var defaultTranslations$6 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -2100,7 +2100,7 @@ var Phone = function (_a) {
     var portalDropdownRef = useRef(null);
     var _l = useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$5), translations);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
     var finalLabel = label || t.label;
     useEffect(function () {
         if (value) {
@@ -2179,7 +2179,7 @@ var Phone = function (_a) {
                                     : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsx("span", { className: "mr-3", children: jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
-var defaultTranslations$4 = {
+var defaultTranslations$5 = {
     message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
     buttonText: "Explore",
     closeButtonLabel: "Close Banner",
@@ -2189,7 +2189,7 @@ var defaultTranslations$4 = {
  */
 var PromotionalBanner = function (_a) {
     var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
-    var t = __assign(__assign({}, defaultTranslations$4), translations);
+    var t = __assign(__assign({}, defaultTranslations$5), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -2518,7 +2518,7 @@ var TimeInput = function (_a) {
  * />
  * ```
  */
-var defaultTranslations$3 = {
+var defaultTranslations$4 = {
     /** Label for the start time input field */
     from: "Desde",
     /** Label for the end time input field */
@@ -2576,7 +2576,7 @@ var defaultTranslations$3 = {
  */
 var ScheduleRow = function (_a) {
     var day = _a.day, daySchedule = _a.daySchedule, _b = _a.translations, translations = _b === void 0 ? {} : _b, _c = _a.showCopyToAll, showCopyToAll = _c === void 0 ? false : _c, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$4), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -2729,6 +2729,81 @@ var Select = function (_a) {
             } })) }));
 };
 
+var defaultTranslations$3 = {
+    username: "tu_negocio",
+    sendMessage: "Enviar mensaje",
+    viewMore: "ver más",
+    viewLess: "ver menos",
+    timeAgo: "hace unos momentos",
+    imageAlt: "Vista previa de red social",
+};
+/**
+ * SocialMediaPreview component for displaying social media post previews
+ * across multiple platforms: Instagram, Facebook, TikTok, and Twitter.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaPreview
+ *   platform="instagram"
+ *   imageUrl="/path/to/image.jpg"
+ *   caption="Check out our new product!"
+ *   variant="full"
+ * />
+ * ```
+ */
+var SocialMediaPreview = function (_a) {
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var displayUsername = username || t.username;
+    var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    var getTruncatedCaption = function () {
+        if (variant !== "compact") {
+            return caption;
+        }
+        if (!shouldTruncate || showFullCaption) {
+            return caption;
+        }
+        var firstLineEnd = caption.indexOf("\n");
+        var truncateAt = firstLineEnd > 0 && firstLineEnd < maxCaptionLength
+            ? firstLineEnd
+            : maxCaptionLength;
+        return "".concat(caption.substring(0, truncateAt).trim(), "...");
+    };
+    var displayCaption = getTruncatedCaption();
+    // Render Instagram Preview
+    var renderInstagram = function () {
+        if (variant === "story") {
+            return renderInstagramStory();
+        }
+        return renderInstagramPost();
+    };
+    var renderInstagramStory = function () { return (jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxs("div", { className: "absolute inset-0", children: [jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxs("div", { className: "flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxs("div", { className: "flex items-center gap-3", children: [jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
+    var renderInstagramPost = function () { return (jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxs("div", { className: "flex items-center gap-4", children: [jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxs("div", { className: "text-sm text-left", children: [jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsx("button", { type: "button", onClick: function (e) {
+                                    e.stopPropagation();
+                                    onToggleCaption();
+                                }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
+    // Render Facebook Preview
+    var renderFacebook = function () { return (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 && (jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxs("div", { className: "flex-1", children: [jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername }), jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1", children: [t.timeAgo, " \u00B7 ", jsx(IconComponent, { icon: "solar:earth-bold", className: "text-xs" })] })] }), jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-xl text-gray-600 dark:text-gray-400" })] }) })), jsx("div", { className: "px-4 py-2", children: jsx("p", { className: "text-sm text-gray-900 dark:text-white whitespace-pre-wrap break-words", children: displayCaption }) }), imageUrl && (jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800", children: jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsx("div", { className: "p-3 border-t border-gray-200 dark:border-gray-800", children: jsxs("div", { className: "flex items-center justify-around", children: [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: [jsx(IconComponent, { icon: "solar:like-bold", className: "text-xl" }), jsx("span", { className: "text-sm font-medium", children: "Me gusta" })] }), 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: [jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl" }), jsx("span", { className: "text-sm font-medium", children: "Comentar" })] }), 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: [jsx(IconComponent, { icon: "solar:share-bold", className: "text-xl" }), jsx("span", { className: "text-sm font-medium", children: "Compartir" })] })] }) })] })); };
+    // Render TikTok Preview
+    var renderTikTok = function () { return (jsxs("div", { className: "relative w-full bg-black rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxs("div", { className: "absolute inset-0", children: [jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-60" })] })), jsxs("div", { className: "absolute right-2 bottom-20 flex flex-col items-center gap-6 z-20", children: [jsxs("div", { className: "flex flex-col items-center", children: [jsx("div", { className: "w-12 h-12 rounded-full border-2 border-white bg-gray-900 flex items-center justify-center", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsx("div", { className: "w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center -mt-3 border-2 border-black", children: jsx(IconComponent, { icon: "solar:add-circle-bold", className: "text-xs text-white" }) })] }), jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsx(IconComponent, { icon: "solar:heart-bold", className: "text-3xl text-white drop-shadow-lg" }), jsx("span", { className: "text-xs text-white font-semibold", children: "24.5K" })] }), jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-3xl text-white drop-shadow-lg" }), jsx("span", { className: "text-xs text-white font-semibold", children: "1,234" })] }), jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-3xl text-white drop-shadow-lg" }), jsx("span", { className: "text-xs text-white font-semibold", children: "453" })] }), jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsx(IconComponent, { icon: "solar:share-bold", className: "text-3xl text-white drop-shadow-lg" }), jsx("span", { className: "text-xs text-white font-semibold", children: "892" })] }), jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-800 border border-gray-700 flex items-center justify-center", children: jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-xl text-white" }) })] }), jsxs("div", { className: "absolute bottom-0 left-0 right-14 z-20 p-4", children: [jsxs("p", { className: "text-sm font-semibold text-white mb-1", children: ["@", displayUsername] }), jsx("p", { className: "text-sm text-white mb-2 line-clamp-2", children: displayCaption }), jsxs("div", { className: "flex items-center gap-2 text-xs text-white", children: [jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-sm" }), jsxs("span", { className: "truncate", children: ["Sonido original - ", displayUsername] })] })] })] })); };
+    // Render Twitter Preview
+    var renderTwitter = function () { return (jsx("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-xl border border-gray-200 dark:border-gray-800" : "rounded-xl border border-gray-200 dark:border-gray-800", " ").concat(className), children: jsx("div", { className: "p-4", children: jsxs("div", { className: "flex gap-3", children: [jsx("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0", children: avatarUrl ? (jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center gap-1 mb-1", children: [jsx("span", { className: "font-bold text-gray-900 dark:text-white text-sm truncate", children: displayUsername }), jsx(IconComponent, { icon: "solar:verified-check-bold", className: "text-blue-500 text-base flex-shrink-0" }), jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-sm truncate", children: ["@", displayUsername.toLowerCase().replace(/\s/g, "_")] }), jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\u00B7 2h" })] }), jsx("p", { className: "text-gray-900 dark:text-white text-sm mb-3 whitespace-pre-wrap break-words", children: displayCaption }), imageUrl && (jsx("div", { className: "rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 mb-3", children: jsx(Image$1, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxs("div", { className: "flex items-center justify-between max-w-md mt-3", children: [jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-lg" }), jsx("span", { className: "text-xs", children: "234" })] }), jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors", children: [jsx(IconComponent, { icon: "solar:repost-bold", className: "text-lg" }), jsx("span", { className: "text-xs", children: "1.2K" })] }), jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors", children: [jsx(IconComponent, { icon: "solar:heart-bold", className: "text-lg" }), jsx("span", { className: "text-xs", children: "5.6K" })] }), jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsx(IconComponent, { icon: "solar:chart-2-bold", className: "text-lg" }), jsx("span", { className: "text-xs", children: "12K" })] }), jsx("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: jsx(IconComponent, { icon: "solar:share-bold", className: "text-lg" }) })] })] })] }) }) })); };
+    // Main render logic
+    switch (platform) {
+        case "instagram":
+            return renderInstagram();
+        case "facebook":
+            return renderFacebook();
+        case "tiktok":
+            return renderTikTok();
+        case "twitter":
+            return renderTwitter();
+        default:
+            return renderInstagram();
+    }
+};
+
 function AuraTable(_a) {
     var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
     return (jsxs(Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsx(TableHeader, { columns: columns, children: function (column) { return jsx(TableColumn, { children: column.label }, column.key); } }), jsx(TableBody, { items: items, children: function (item) { return (jsx(TableRow, { children: function (columnKey) { return (jsx(TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
@@ -4280,4 +4355,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$3 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };
+export { AddHolidayForm, AnalyticsCard, AuraAutocomplete, AuraTable, AuraToastProvider, BreadcrumbsComponent, Button, Card, Chip, ColorSelector, DatePicker, DateRangePicker, DateSelector, DrawerFilters, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, RangeFilter, RowSteps, ScheduleRow, SearchInput, Select, SocialMediaPreview, StepIndicator, Switch as SwitchComponent, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, UploadFile, VerticalSteps, Wizard, WizardNavigation, WizardSidebar, defaultTranslations$4 as defaultTranslations, sizeMap, themeColors, useAuraToast, useNavigationLoading, useThemeContext };

package/dist/types/components/social-media-preview/SocialMediaPreview.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { SocialMediaPreviewProps } from "./SocialMediaPreview.types";
+/**
+ * SocialMediaPreview component for displaying social media post previews
+ * across multiple platforms: Instagram, Facebook, TikTok, and Twitter.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaPreview
+ *   platform="instagram"
+ *   imageUrl="/path/to/image.jpg"
+ *   caption="Check out our new product!"
+ *   variant="full"
+ * />
+ * ```
+ */
+export declare const SocialMediaPreview: React.FC<SocialMediaPreviewProps>;
+//# sourceMappingURL=SocialMediaPreview.d.ts.map

package/dist/types/components/social-media-preview/SocialMediaPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialMediaPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/social-media-preview/SocialMediaPreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACX,uBAAuB,EAEvB,MAAM,4BAA4B,CAAC;AAWpC;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+chE,CAAC"}

package/dist/types/components/social-media-preview/SocialMediaPreview.types.d.ts

@@ -0,0 +1,46 @@
+import type { ImageProps } from "@heroui/react";
+export type SocialPlatform = "instagram" | "facebook" | "tiktok" | "twitter";
+export type PreviewVariant = "compact" | "full" | "story";
+export interface SocialMediaPreviewTranslations {
+    /** Username placeholder */
+    username?: string;
+    /** "Send message" placeholder text */
+    sendMessage?: string;
+    /** "View more" text for caption truncation */
+    viewMore?: string;
+    /** "View less" text for caption truncation */
+    viewLess?: string;
+    /** Time ago text */
+    timeAgo?: string;
+    /** Alt text for images */
+    imageAlt?: string;
+}
+export interface SocialMediaPreviewProps {
+    /** Social media platform to preview */
+    platform: SocialPlatform;
+    /** Image URL to display */
+    imageUrl?: string;
+    /** Caption/text content */
+    caption: string;
+    /** Preview variant */
+    variant?: PreviewVariant;
+    /** Show header with user info */
+    showHeader?: boolean;
+    /** Maximum caption length before truncation */
+    maxCaptionLength?: number;
+    /** Callback for "view more/less" toggle */
+    onToggleCaption?: () => void;
+    /** State for expanded caption */
+    showFullCaption?: boolean;
+    /** Custom username (defaults to platform-specific) */
+    username?: string;
+    /** Custom avatar URL */
+    avatarUrl?: string;
+    /** Translations for i18n support */
+    translations?: SocialMediaPreviewTranslations;
+    /** Additional className for custom styling */
+    className?: string;
+    /** Props passed to the Image component */
+    imageProps?: Omit<ImageProps, "src" | "alt">;
+}
+//# sourceMappingURL=SocialMediaPreview.types.d.ts.map

package/dist/types/components/social-media-preview/SocialMediaPreview.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialMediaPreview.types.d.ts","sourceRoot":"","sources":["../../../../src/components/social-media-preview/SocialMediaPreview.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7E,MAAM,MAAM,cAAc,GACvB,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AAEX,MAAM,WAAW,8BAA8B;IAC9C,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,uBAAuB;IACvC,uCAAuC;IACvC,QAAQ,EAAE,cAAc,CAAC;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,8BAA8B,CAAC;IAC9C,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC,CAAC;CAC7C"}

package/dist/types/components/social-media-preview/index.d.ts

@@ -0,0 +1,3 @@
+export { SocialMediaPreview } from "./SocialMediaPreview.js";
+export type { SocialMediaPreviewProps, SocialMediaPreviewTranslations, SocialPlatform, PreviewVariant, } from "./SocialMediaPreview.types.js";
+//# sourceMappingURL=index.d.ts.map