funuicss 3.7.12 → 3.7.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.12",
+  "version": "3.7.13",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/vista/Vista.d.ts

@@ -44,9 +44,12 @@ type VistaProps = {
     gradientSize?: string;
     gradientColors?: string;
     fade?: boolean;
+    fadeColor?: string;
     fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
     fadeRadial?: boolean;
     variant?: string;
+    mediaSize?: string;
+    mediaCss?: string;
     showPrimaryCTA?: boolean;
     showSecondaryCTA?: boolean;
     showAccentCTA?: boolean;
@@ -101,9 +104,6 @@ type VistaProps = {
     hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
     parallax?: boolean;
     parallaxSpeed?: number;
-    mobileLayout?: 'centered' | 'stacked';
-    tabletLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
-    desktopLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -75,29 +75,26 @@ var Vista = function (localProps) {
         window.addEventListener('scroll', handleScroll);
         return function () { return window.removeEventListener('scroll', handleScroll); };
     }, [final.parallax, final.parallaxSpeed]);
-    // Get responsive layout
-    var getResponsiveLayout = function () {
-        if (typeof window === 'undefined')
-            return final.layout || 'centered';
-        var width = window.innerWidth;
-        if (width < 768 && final.mobileLayout)
-            return final.mobileLayout;
-        if (width >= 768 && width < 1024 && final.tabletLayout)
-            return final.tabletLayout;
-        if (width >= 1024 && final.desktopLayout)
-            return final.desktopLayout;
-        return final.layout || 'centered';
+    // Get media size - updated logic
+    var getMediaSize = function () {
+        // Priority order:
+        // 1. If imageSize is passed for images, use it
+        // 2. If iframeSize is passed for iframes, use it
+        // 3. Otherwise use mediaSize
+        // 4. Fallback to undefined
+        if (final.mediaType === 'image' && final.imageSize) {
+            return final.imageSize;
+        }
+        if (final.mediaType === 'iframe' && final.iframeSize) {
+            return final.iframeSize;
+        }
+        if (final.mediaSize) {
+            return final.mediaSize;
+        }
+        return undefined;
     };
-    var _b = (0, react_1.useState)(getResponsiveLayout()), currentLayout = _b[0], setCurrentLayout = _b[1];
-    (0, react_1.useEffect)(function () {
-        var handleResize = function () {
-            setCurrentLayout(getResponsiveLayout());
-        };
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, [final.layout, final.mobileLayout, final.tabletLayout, final.desktopLayout]);
     var layoutClass = [
-        currentLayout,
+        final.layout || 'centered',
         final.reverse ? 'reverse' : '',
         "text-".concat(final.textAlign || 'left'),
     ]
@@ -140,18 +137,11 @@ var Vista = function (localProps) {
             final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl); }, rounded: final.ctaAccentRounded, flat: final.ctaAccentFlat, stringPrefix: final.ctaAccentPrefix, stringSuffix: final.ctaAccentSuffix, iconSize: final.accentIconSize, funcss: final.accentButtonFuncss, small: final.accentButtonSmall }, final.ctaAccentText))));
     };
     // Enhanced Text Content
-    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(currentLayout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
+    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
         final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
         final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
         final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass || ''), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
         final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
-    // Get size for media
-    var getMediaSize = function () {
-        if (final.mediaType === 'iframe' && final.iframeSize) {
-            return final.iframeSize;
-        }
-        return final.imageSize;
-    };
     // Enhanced Media Content
     var MediaContent = function () {
         var _a;
@@ -185,7 +175,7 @@ var Vista = function (localProps) {
             borderRadius: 'inherit',
             zIndex: 1,
         } : {};
-        return (react_1.default.createElement("div", { className: "vista-media ".concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
+        return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
             mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
                 final.customMedia,
                 final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
@@ -221,8 +211,10 @@ var Vista = function (localProps) {
                 final.image ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.image)) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: final.imageClass || '', style: mediaStyle, loading: "lazy" })),
                 final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
     };
-    var isCentered = currentLayout === 'centered';
-    var isStacked = currentLayout === 'stacked';
+    var isCentered = final.layout === 'centered';
+    var isStacked = final.layout === 'stacked';
+    var isImageLeft = final.layout === 'imageLeft';
+    var isImageRight = final.layout === 'imageRight';
     var positionStyles = {
         'top-left': { top: '-100px', left: '-100px' },
         'top-right': { top: '-100px', right: '-100px' },
@@ -233,14 +225,29 @@ var Vista = function (localProps) {
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
     var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
+    // Get fade color - accepts color variable name or color string
+    var getFadeColor = function () {
+        if (!final.fade)
+            return '';
+        if (final.fadeColor) {
+            // Try to get CSS variable value
+            var colorValue = (0, getCssVariable_1.getCssVariableValue)(final.fadeColor);
+            if (colorValue)
+                return colorValue;
+            // If not a variable, assume it's a color string
+            return final.fadeColor;
+        }
+        // Default to page background
+        return (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
+    };
     // Get fade style
     var getFadeStyle = function () {
-        if (!final.fade)
+        var fadeColor = getFadeColor();
+        if (!fadeColor)
             return {};
-        var bgColor = (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
         if (final.fadeRadial) {
             return {
-                background: "radial-gradient(circle, transparent 0%, ".concat(bgColor, " 100%)"),
+                background: "radial-gradient(circle, transparent 0%, ".concat(fadeColor, " 100%)"),
             };
         }
         var direction = final.fadeDirection || 'bottom';
@@ -251,7 +258,7 @@ var Vista = function (localProps) {
             right: 'to right'
         };
         return {
-            background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(bgColor, " 100%)"),
+            background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(fadeColor, " 100%)"),
         };
     };
     return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n        ".concat(final.pattern === 'grid' ? 'grid-bg' :
@@ -292,10 +299,10 @@ var Vista = function (localProps) {
             react_1.default.createElement("div", { style: { flex: 1 } },
                 react_1.default.createElement(MediaContent, null)),
             react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            (currentLayout === 'imageLeft') && (react_1.default.createElement("div", { style: { flex: 1 } },
+            isImageLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
                 react_1.default.createElement(MediaContent, null))),
             react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
-            (currentLayout === 'imageRight') && (react_1.default.createElement("div", { style: { flex: 1 } },
+            isImageRight && (react_1.default.createElement("div", { style: { flex: 1 } },
                 react_1.default.createElement(MediaContent, null))))))));
 };
 exports.default = Vista;