funuicss 3.6.11 → 3.6.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.11",
+  "version": "3.6.12",
   "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/button/Button.d.ts

@@ -30,10 +30,11 @@ interface ButtonProps {
     outlineSize?: number;
     isLoading?: boolean;
     variant?: string;
+    url?: string;
     status?: 'success' | 'warning' | 'info' | 'danger';
     children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export default function Button({ variant, color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, onClick, ...rest }: ButtonProps): React.JSX.Element;
+export default function Button({ variant, color, bg, funcss, startIcon, endIcon, text, rounded, raised, height, width, float, hoverUp, fullWidth, outlined, small, hoverless, smaller, big, bigger, jumbo, flat, hoverNone, fillAnimation, fillDirection, fillTextColor, outlineSize, isLoading, status, children, bold, style, url, onClick, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/button/Button.js

@@ -31,7 +31,7 @@ var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
 function Button(_a) {
-    var _b = _a.variant, variant = _b === void 0 ? '' : _b, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, children = _a.children, bold = _a.bold, style = _a.style, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "children", "bold", "style", "onClick"]);
+    var _b = _a.variant, variant = _b === void 0 ? '' : _b, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, children = _a.children, bold = _a.bold, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "children", "bold", "style", "url", "onClick"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
     // Merge config with local props - local props should override config
@@ -109,7 +109,7 @@ function Button(_a) {
         "".concat(finalFillAnimation ? "".concat(finalFillTextColor ? "hover-text-".concat(finalFillTextColor) : '', " button-fill fill-").concat(finalFillDirection || 'left') : '')
     ].join(' ');
     return (react_1.default.createElement("span", null,
-        react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat(startIcon || endIcon || finalStatus || finalIsLoading ? 'iconic' : ''), style: __assign({ height: mergedProps.height || '', width: mergedProps.fullWidth ? '100%' : mergedProps.width || '', borderRadius: finalFlat ? '0rem' : '' }, style), onClick: onClick }, mergedProps),
+        react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat(startIcon || endIcon || finalStatus || finalIsLoading ? 'iconic' : ''), style: __assign({ height: mergedProps.height || '', width: mergedProps.fullWidth ? '100%' : mergedProps.width || '', borderRadius: finalFlat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return window.location.href = url; } : undefined) }, mergedProps),
             finalIsLoading && (react_1.default.createElement("span", { className: 'rotate btn_left_icon', style: { lineHeight: "0" } },
                 react_1.default.createElement(pi_1.PiSpinner, null))),
             finalStatus && (react_1.default.createElement("span", { className: 'btn_left_icon', style: { lineHeight: "0" } },

package/ui/vista/Vista.d.ts

@@ -49,6 +49,20 @@ type VistaProps = {
     fadeOverlayDarken?: number;
     backgroundImage?: string;
     variant?: string;
+    showPrimaryCTA?: boolean;
+    showSecondaryCTA?: boolean;
+    showAccentCTA?: boolean;
+    primaryButtonOutlined?: boolean;
+    secondaryButtonOutlined?: boolean;
+    accentButtonOutlined?: boolean;
+    ctaPrimaryUrl?: string;
+    ctaSecondaryUrl?: string;
+    ctaAccentUrl?: string;
+    ctaPrimaryText?: string;
+    ctaSecondaryText?: string;
+    ctaAccentText?: string;
+    ctaGap?: string;
+    ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -21,6 +21,8 @@ var getCssVariable_1 = require("../../utils/getCssVariable");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text_1 = __importDefault(require("../text/Text"));
 var Col_1 = __importDefault(require("../grid/Col"));
+var Button_1 = __importDefault(require("../button/Button")); // Import your Button component
+var Flex_1 = __importDefault(require("../flex/Flex")); // Import your Flex component
 var Vista = function (_a) {
     var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.bg, bg = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k, 
     // Enhanced Content
@@ -28,7 +30,11 @@ var Vista = function (_a) {
     // Gradient Props
     _8 = _a.showGradient, 
     // Gradient Props
-    showGradient = _8 === void 0 ? false : _8, _9 = _a.gradientPosition, gradientPosition = _9 === void 0 ? 'bottom-right' : _9, _10 = _a.gradientSize, gradientSize = _10 === void 0 ? '300px' : _10, _11 = _a.blurry, blurry = _11 === void 0 ? 100 : _11, _12 = _a.opacity, opacity = _12 === void 0 ? 0.4 : _12, gradientColors = _a.gradientColors, _13 = _a.fade, fade = _13 === void 0 ? false : _13, _14 = _a.fadeDirection, fadeDirection = _14 === void 0 ? 'bottom' : _14, _15 = _a.fadeRadial, fadeRadial = _15 === void 0 ? false : _15, _16 = _a.fadeOverlayDarken, fadeOverlayDarken = _16 === void 0 ? 0.5 : _16, _17 = _a.backgroundImage, backgroundImage = _17 === void 0 ? '' : _17, _18 = _a.variant, variant = _18 === void 0 ? '' : _18;
+    showGradient = _8 === void 0 ? false : _8, _9 = _a.gradientPosition, gradientPosition = _9 === void 0 ? 'bottom-right' : _9, _10 = _a.gradientSize, gradientSize = _10 === void 0 ? '300px' : _10, _11 = _a.blurry, blurry = _11 === void 0 ? 100 : _11, _12 = _a.opacity, opacity = _12 === void 0 ? 0.4 : _12, gradientColors = _a.gradientColors, _13 = _a.fade, fade = _13 === void 0 ? false : _13, _14 = _a.fadeDirection, fadeDirection = _14 === void 0 ? 'bottom' : _14, _15 = _a.fadeRadial, fadeRadial = _15 === void 0 ? false : _15, _16 = _a.fadeOverlayDarken, fadeOverlayDarken = _16 === void 0 ? 0.5 : _16, _17 = _a.backgroundImage, backgroundImage = _17 === void 0 ? '' : _17, _18 = _a.variant, variant = _18 === void 0 ? '' : _18, 
+    // New CTA Button Props
+    _19 = _a.showPrimaryCTA, 
+    // New CTA Button Props
+    showPrimaryCTA = _19 === void 0 ? false : _19, _20 = _a.showSecondaryCTA, showSecondaryCTA = _20 === void 0 ? false : _20, _21 = _a.showAccentCTA, showAccentCTA = _21 === void 0 ? false : _21, _22 = _a.primaryButtonOutlined, primaryButtonOutlined = _22 === void 0 ? false : _22, _23 = _a.secondaryButtonOutlined, secondaryButtonOutlined = _23 === void 0 ? false : _23, _24 = _a.accentButtonOutlined, accentButtonOutlined = _24 === void 0 ? false : _24, _25 = _a.ctaPrimaryUrl, ctaPrimaryUrl = _25 === void 0 ? '' : _25, _26 = _a.ctaSecondaryUrl, ctaSecondaryUrl = _26 === void 0 ? '' : _26, _27 = _a.ctaAccentUrl, ctaAccentUrl = _27 === void 0 ? '' : _27, _28 = _a.ctaPrimaryText, ctaPrimaryText = _28 === void 0 ? 'Primary Action' : _28, _29 = _a.ctaSecondaryText, ctaSecondaryText = _29 === void 0 ? 'Secondary Action' : _29, _30 = _a.ctaAccentText, ctaAccentText = _30 === void 0 ? 'Accent Action' : _30, _31 = _a.ctaGap, ctaGap = _31 === void 0 ? '1rem' : _31, _32 = _a.ctaFlexJustify, ctaFlexJustify = _32 === void 0 ? 'center' : _32;
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
     // Merge config with local props - local props should override config
@@ -81,6 +87,21 @@ var Vista = function (_a) {
         imageClass: imageClass,
         cta: cta,
         ctaClass: ctaClass,
+        // CTA Button props
+        showPrimaryCTA: showPrimaryCTA,
+        showSecondaryCTA: showSecondaryCTA,
+        showAccentCTA: showAccentCTA,
+        primaryButtonOutlined: primaryButtonOutlined,
+        secondaryButtonOutlined: secondaryButtonOutlined,
+        accentButtonOutlined: accentButtonOutlined,
+        ctaPrimaryUrl: ctaPrimaryUrl,
+        ctaSecondaryUrl: ctaSecondaryUrl,
+        ctaAccentUrl: ctaAccentUrl,
+        ctaPrimaryText: ctaPrimaryText,
+        ctaSecondaryText: ctaSecondaryText,
+        ctaAccentText: ctaAccentText,
+        ctaGap: ctaGap,
+        ctaFlexJustify: ctaFlexJustify,
     }).props;
     var layoutClass = [
         mergedProps.layout,
@@ -89,12 +110,22 @@ var Vista = function (_a) {
     ]
         .filter(Boolean)
         .join(' ');
+    // CTA Buttons Component
+    var CTAButtons = function () {
+        var hasCTAs = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
+        if (!hasCTAs)
+            return null;
+        return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-6 ".concat(mergedProps.ctaClass), wrap: "wrap" },
+            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: mergedProps.primaryButtonOutlined ? undefined : "primary", outlined: mergedProps.primaryButtonOutlined, color: mergedProps.primaryButtonOutlined ? "primary" : undefined, onClick: function () { return window.location.href = mergedProps.ctaPrimaryUrl; } }, mergedProps.ctaPrimaryText)),
+            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: mergedProps.secondaryButtonOutlined ? undefined : "secondary", outlined: mergedProps.secondaryButtonOutlined, color: mergedProps.secondaryButtonOutlined ? "secondary" : undefined, onClick: function () { return window.location.href = mergedProps.ctaSecondaryUrl; } }, mergedProps.ctaSecondaryText)),
+            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: mergedProps.accentButtonOutlined ? undefined : "accent", outlined: mergedProps.accentButtonOutlined, color: mergedProps.accentButtonOutlined ? "accent" : undefined, onClick: function () { return window.location.href = mergedProps.ctaAccentUrl; } }, mergedProps.ctaAccentText))));
+    };
     // Enhanced Text Content with flexible styling
     var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(mergedProps.layout === 'centered' ? "text-center" : "", " ").concat(mergedProps.textWrapperClass) },
         mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass }, mergedProps.heading)),
         mergedProps.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-2 ".concat(mergedProps.subheadingClass) }, mergedProps.subheading)),
         mergedProps.content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-4 ".concat(mergedProps.contentClass), article: true }, mergedProps.content || children)),
-        mergedProps.cta && (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, mergedProps.cta))));
+        mergedProps.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, mergedProps.cta)) : (react_1.default.createElement(CTAButtons, null))));
     // Enhanced Image Content - uses imageUrl if no image component provided
     var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(mergedProps.imageWrapperClass) }, mergedProps.image ? (mergedProps.image) : (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt || 'Vista image', className: "".concat(mergedProps.imageClass), style: {
             objectFit: 'cover',