funuicss 3.6.10 → 3.6.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.10",
+  "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/carousel/Carousel.d.ts

@@ -1,10 +1,12 @@
 import React, { ReactNode } from 'react';
-interface CarouselProps {
+interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
     scrollNumber?: number;
     gap?: number;
     funcss?: string;
     children: ReactNode;
     showDashes?: boolean;
+    allowVerticalOverflow?: boolean;
+    itemPadding?: string;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -1,5 +1,16 @@
 "use strict";
 'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,6 +44,17 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -43,11 +65,11 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Functions_1 = require("../../utils/Functions");
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, children = _a.children;
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, _f = _a.allowVerticalOverflow, allowVerticalOverflow = _f === void 0 ? false : _f, _g = _a.itemPadding, itemPadding = _g === void 0 ? '0rem' : _g, children = _a.children, rest = __rest(_a, ["scrollNumber", "gap", "funcss", "showDashes", "allowVerticalOverflow", "itemPadding", "children"]);
     var scrollRef = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)('start'), scrollPosition = _f[0], setScrollPosition = _f[1];
-    var _g = (0, react_1.useState)(false), isPhone = _g[0], setIsPhone = _g[1];
-    var _h = (0, react_1.useState)(false), isScrollable = _h[0], setIsScrollable = _h[1];
+    var _h = (0, react_1.useState)('start'), scrollPosition = _h[0], setScrollPosition = _h[1];
+    var _j = (0, react_1.useState)(false), isPhone = _j[0], setIsPhone = _j[1];
+    var _k = (0, react_1.useState)(false), isScrollable = _k[0], setIsScrollable = _k[1];
     var checkScrollable = function () {
         var container = scrollRef.current;
         if (container) {
@@ -100,7 +122,7 @@ var Carousel = function (_a) {
             return function () { return container.removeEventListener('scroll', handleScroll); };
         }
     }, []);
-    return (react_1.default.createElement("div", { className: "carousel-wrapper ".concat(funcss) },
+    return (react_1.default.createElement("div", __assign({ className: "carousel-wrapper ".concat(funcss) }, rest),
         react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
             !isPhone && isScrollable && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
@@ -109,10 +131,12 @@ var Carousel = function (_a) {
                     width: '100%',
                     gap: gap + 'rem',
                     overflowX: 'auto',
+                    overflowY: 'visible',
                     display: 'flex',
                     justifyItems: (isScrollable || isPhone) ? 'flex-start' : 'center',
                     scrollSnapType: 'x mandatory',
                     scrollBehavior: 'smooth',
+                    padding: itemPadding || "0.5rem"
                 } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
                 react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
             !isPhone && isScrollable && (react_1.default.createElement("div", null,

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
@@ -57,25 +63,45 @@ var Vista = function (_a) {
         containerClass: containerClass,
         textWrapperClass: textWrapperClass,
         imageWrapperClass: imageWrapperClass,
+        gap: gap,
         // Enhanced content props
+        heading: heading,
         headingSize: headingSize,
         headingWeight: headingWeight,
         headingColor: headingColor,
         headingClass: headingClass,
+        subheading: subheading,
         subheadingSize: subheadingSize,
         subheadingWeight: subheadingWeight,
         subheadingColor: subheadingColor,
         subheadingClass: subheadingClass,
+        content: content,
         contentSize: contentSize,
         contentWeight: contentWeight,
         contentColor: contentColor,
         contentClass: contentClass,
+        image: image,
         imageUrl: imageUrl,
         imageSize: imageSize,
         imageAlt: imageAlt,
         imageClass: imageClass,
-        gap: gap,
-        ctaClass: ctaClass
+        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,
@@ -84,16 +110,26 @@ 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) },
-        heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass }, heading)),
-        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) }, subheading)),
-        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 }, content || children)),
-        cta && (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, cta))));
+        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)) : (react_1.default.createElement(CTAButtons, null))));
     // Enhanced Image Content - uses imageUrl if no image component provided
-    var ImageContent = (image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(mergedProps.imageWrapperClass) }, image ? (image) : (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt || 'Vista image', className: "".concat(mergedProps.imageClass), style: {
+    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',
-            maxWidth: imageSize,
+            maxWidth: mergedProps.imageSize,
             borderRadius: 'inherit'
         } }))));
     var isCentered = mergedProps.layout === 'centered';

package/utils/componentUtils.d.ts

@@ -33,16 +33,42 @@ export interface MergedConfig {
 export interface UseComponentConfigReturn extends ComponentConfig {
     mergeWithLocal: (localProps?: ComponentProps) => MergedConfig;
     getProp: <T = any>(propName: string, defaultValue?: T) => T;
+    hasVariant: boolean;
+    isDefaultVariant: boolean;
 }
 /**
  * Universal component config getter
+ *
+ * @param projectData - The project configuration data
+ * @param componentName - Name of the component to get config for
+ * @param variantName - Name of the variant (defaults to 'default')
+ * @returns Component configuration with metadata
  */
 export declare const getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
 /**
  * Merge component config with local props - only applies config if variant exists
+ *
+ * @param config - Component configuration from getComponentConfig
+ * @param localProps - Props passed directly to the component
+ * @returns Merged configuration with metadata
  */
 export declare const mergeComponentConfig: (config: ComponentConfig, localProps?: ComponentProps) => MergedConfig;
 /**
  * Hook for easy component config usage - only applies if variant is provided and exists
+ * Uses useMemo to prevent unnecessary re-computation
+ *
+ * @param componentName - Name of the component
+ * @param variantName - Optional variant name
+ * @returns Configuration object with helper methods
  */
 export declare const useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;
+/**
+ * Utility function to check if a component variant exists
+ * Useful for conditional rendering logic
+ */
+export declare const hasComponentVariant: (projectData: ProjectData | null | undefined, componentName: string, variantName: string) => boolean;
+/**
+ * Get all available variants for a component
+ * Useful for variant selectors/dropdowns
+ */
+export declare const getAvailableVariants: (projectData: ProjectData | null | undefined, componentName: string) => string[];

package/utils/componentUtils.js

@@ -1,4 +1,5 @@
 "use strict";
+// import { useTheme } from "../ui/theme/theme"
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -11,14 +12,168 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
+exports.getAvailableVariants = exports.hasComponentVariant = exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
+// // utils/componentUtils.ts
+// // Type definitions
+// export interface ComponentProps {
+//   [key: string]: any
+// }
+// export interface ComponentMetadata {
+//   createdAt?: Date
+//   updatedAt?: Date
+//   isCustom?: boolean
+//   baseVariant?: string
+// }
+// export interface ComponentVariant {
+//   componentProps: ComponentProps
+//   metadata?: ComponentMetadata
+// }
+// export interface ComponentConfig {
+//   componentProps: ComponentProps
+//   variantExists: boolean
+//   actualVariant: string
+//   availableVariants: string[]
+//   metadata: ComponentMetadata
+// }
+// export interface ProjectData {
+//   components?: {
+//     [componentName: string]: {
+//       [variantName: string]: ComponentVariant
+//     }
+//   }
+// }
+// export interface MergedConfig {
+//   props: ComponentProps
+//   variant: string
+//   hasConfig: boolean
+// }
+// export interface UseComponentConfigReturn extends ComponentConfig {
+//   mergeWithLocal: (localProps?: ComponentProps) => MergedConfig
+//   getProp: <T = any>(propName: string, defaultValue?: T) => T
+// }
+// /**
+//  * Universal component config getter
+//  */
+// export const getComponentConfig = (
+//   projectData: ProjectData | null | undefined,
+//   componentName: string,
+//   variantName: string = 'default'
+// ): ComponentConfig => {
+//   if (!projectData?.components?.[componentName]) {
+//     return {
+//       componentProps: {},
+//       variantExists: false,
+//       actualVariant: variantName,
+//       availableVariants: [],
+//       metadata: {}
+//     }
+//   }
+//   const component = projectData.components[componentName]
+//   const availableVariants = Object.keys(component)
+//   // Find the best variant match
+//   let targetVariant = variantName
+//   if (!availableVariants.includes(variantName)) {
+//     if (availableVariants.includes('default')) {
+//       targetVariant = 'default'
+//     } else if (availableVariants.length > 0) {
+//       targetVariant = availableVariants[0]
+//     } else {
+//       return {
+//         componentProps: {},
+//         variantExists: false,
+//         actualVariant: variantName,
+//         availableVariants: [],
+//         metadata: {}
+//       }
+//     }
+//   }
+//   const variantData = component[targetVariant] || {}
+//   return {
+//     componentProps: variantData.componentProps || {},
+//     variantExists: true,
+//     actualVariant: targetVariant,
+//     availableVariants,
+//     metadata: variantData.metadata || {}
+//   }
+// }
+// /**
+//  * Merge component config with local props - only applies config if variant exists
+//  */
+// export const mergeComponentConfig = (
+//   config: ComponentConfig,
+//   localProps: ComponentProps = {}
+// ): MergedConfig => {
+//   // Only apply config if variant exists and has actual configuration
+//   const hasValidConfig = config.variantExists && Object.keys(config.componentProps).length > 0
+//   if (!hasValidConfig) {
+//     return {
+//       props: localProps,
+//       variant: config.actualVariant,
+//       hasConfig: false
+//     }
+//   }
+//   return {
+//     // Props: config overrides local only if variant exists
+//     props: {
+//       ...localProps,
+//       ...config.componentProps
+//     },
+//     // Metadata
+//     variant: config.actualVariant,
+//     hasConfig: true
+//   }
+// }
+// /**
+//  * Hook for easy component config usage - only applies if variant is provided and exists
+//  */
+// export const useComponentConfiguration = (
+//   componentName: string, 
+//   variantName?: string // Make variantName optional
+// ): UseComponentConfigReturn => {
+//   const { projectData } = useTheme()
+//   // Only get config if variantName is provided
+//   const config = variantName ? getComponentConfig(projectData, componentName, variantName) : {
+//     componentProps: {},
+//     variantExists: false,
+//     actualVariant: '',
+//     availableVariants: [],
+//     metadata: {}
+//   }
+//   const mergeWithLocal = (
+//     localProps: ComponentProps = {}
+//   ): MergedConfig => {
+//     // If no variant name was provided, return local props as-is
+//     if (!variantName) {
+//       return {
+//         props: localProps,
+//         variant: '',
+//         hasConfig: false
+//       }
+//     }
+//     return mergeComponentConfig(config, localProps)
+//   }
+//   const getProp = <T = any>(propName: string, defaultValue?: T): T => 
+//     (config.componentProps[propName] ?? defaultValue) as T
+//   return {
+//     ...config,
+//     mergeWithLocal,
+//     getProp
+//   }
+// }
 var theme_1 = require("../ui/theme/theme");
+var react_1 = require("react");
 /**
  * Universal component config getter
+ *
+ * @param projectData - The project configuration data
+ * @param componentName - Name of the component to get config for
+ * @param variantName - Name of the variant (defaults to 'default')
+ * @returns Component configuration with metadata
  */
 var getComponentConfig = function (projectData, componentName, variantName) {
     var _a;
     if (variantName === void 0) { variantName = 'default'; }
+    // Early return if no component exists
     if (!((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName])) {
         return {
             componentProps: {},
@@ -30,14 +185,18 @@ var getComponentConfig = function (projectData, componentName, variantName) {
     }
     var component = projectData.components[componentName];
     var availableVariants = Object.keys(component);
-    // Find the best variant match
+    // Find the best variant match with fallback chain
     var targetVariant = variantName;
-    if (!availableVariants.includes(variantName)) {
+    var variantExists = availableVariants.includes(variantName);
+    if (!variantExists) {
+        // Fallback priority: default → first available → none
         if (availableVariants.includes('default')) {
             targetVariant = 'default';
+            variantExists = true;
         }
         else if (availableVariants.length > 0) {
             targetVariant = availableVariants[0];
+            variantExists = true;
         }
         else {
             return {
@@ -49,18 +208,41 @@ var getComponentConfig = function (projectData, componentName, variantName) {
             };
         }
     }
-    var variantData = component[targetVariant] || {};
+    var variantData = component[targetVariant];
     return {
-        componentProps: variantData.componentProps || {},
-        variantExists: true,
+        componentProps: (variantData === null || variantData === void 0 ? void 0 : variantData.componentProps) || {},
+        variantExists: variantExists,
         actualVariant: targetVariant,
         availableVariants: availableVariants,
-        metadata: variantData.metadata || {}
+        metadata: (variantData === null || variantData === void 0 ? void 0 : variantData.metadata) || {}
     };
 };
 exports.getComponentConfig = getComponentConfig;
+/**
+ * Deep merge utility for nested objects
+ * Config props override local props, but we preserve nested structure
+ */
+var deepMerge = function (target, source) {
+    var result = __assign({}, target);
+    for (var key in source) {
+        if (source[key] !== undefined) {
+            // For objects, do shallow merge (we don't go too deep to avoid complexity)
+            if (typeof source[key] === 'object' && !Array.isArray(source[key]) && source[key] !== null) {
+                result[key] = __assign(__assign({}, (target[key] || {})), source[key]);
+            }
+            else {
+                result[key] = source[key];
+            }
+        }
+    }
+    return result;
+};
 /**
  * Merge component config with local props - only applies config if variant exists
+ *
+ * @param config - Component configuration from getComponentConfig
+ * @param localProps - Props passed directly to the component
+ * @returns Merged configuration with metadata
  */
 var mergeComponentConfig = function (config, localProps) {
     if (localProps === void 0) { localProps = {}; }
@@ -74,9 +256,9 @@ var mergeComponentConfig = function (config, localProps) {
         };
     }
     return {
-        // FIXED: Local props should override config (correct order)
-        props: __assign(__assign({}, config.componentProps), localProps // Local props second (higher priority)
-        ),
+        // Props: config overrides local, with deep merge for nested objects
+        props: deepMerge(localProps, config.componentProps),
+        // Metadata
         variant: config.actualVariant,
         hasConfig: true
     };
@@ -84,31 +266,64 @@ var mergeComponentConfig = function (config, localProps) {
 exports.mergeComponentConfig = mergeComponentConfig;
 /**
  * Hook for easy component config usage - only applies if variant is provided and exists
+ * Uses useMemo to prevent unnecessary re-computation
+ *
+ * @param componentName - Name of the component
+ * @param variantName - Optional variant name
+ * @returns Configuration object with helper methods
  */
-var useComponentConfiguration = function (componentName, variantName // Make variantName optional
-) {
+var useComponentConfiguration = function (componentName, variantName) {
     var projectData = (0, theme_1.useTheme)().projectData;
-    // Only get config if variantName is provided
-    var config = variantName ? (0, exports.getComponentConfig)(projectData, componentName, variantName) : {
-        componentProps: {},
-        variantExists: false,
-        actualVariant: '',
-        availableVariants: [],
-        metadata: {}
-    };
-    var mergeWithLocal = function (localProps) {
-        if (localProps === void 0) { localProps = {}; }
-        // If no variant name was provided, return local props as-is
+    // Memoize config computation - only recompute when dependencies change
+    var config = (0, react_1.useMemo)(function () {
         if (!variantName) {
             return {
-                props: localProps,
-                variant: '',
-                hasConfig: false
+                componentProps: {},
+                variantExists: false,
+                actualVariant: '',
+                availableVariants: [],
+                metadata: {}
             };
         }
-        return (0, exports.mergeComponentConfig)(config, localProps);
-    };
-    var getProp = function (propName, defaultValue) { var _a; return ((_a = config.componentProps[propName]) !== null && _a !== void 0 ? _a : defaultValue); };
-    return __assign(__assign({}, config), { mergeWithLocal: mergeWithLocal, getProp: getProp });
+        return (0, exports.getComponentConfig)(projectData, componentName, variantName);
+    }, [projectData, componentName, variantName]);
+    // Memoize merge function
+    var mergeWithLocal = (0, react_1.useMemo)(function () {
+        return function (localProps) {
+            if (localProps === void 0) { localProps = {}; }
+            // If no variant name was provided, return local props as-is
+            if (!variantName) {
+                return {
+                    props: localProps,
+                    variant: '',
+                    hasConfig: false
+                };
+            }
+            return (0, exports.mergeComponentConfig)(config, localProps);
+        };
+    }, [config, variantName]);
+    // Memoize getProp function
+    var getProp = (0, react_1.useMemo)(function () {
+        return function (propName, defaultValue) { var _a; return ((_a = config.componentProps[propName]) !== null && _a !== void 0 ? _a : defaultValue); };
+    }, [config.componentProps]);
+    return __assign(__assign({}, config), { mergeWithLocal: mergeWithLocal, getProp: getProp, hasVariant: config.variantExists, isDefaultVariant: config.actualVariant === 'default' });
 };
 exports.useComponentConfiguration = useComponentConfiguration;
+/**
+ * Utility function to check if a component variant exists
+ * Useful for conditional rendering logic
+ */
+var hasComponentVariant = function (projectData, componentName, variantName) {
+    var _a, _b;
+    return !!((_b = (_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName]) === null || _b === void 0 ? void 0 : _b[variantName]);
+};
+exports.hasComponentVariant = hasComponentVariant;
+/**
+ * Get all available variants for a component
+ * Useful for variant selectors/dropdowns
+ */
+var getAvailableVariants = function (projectData, componentName) {
+    var _a;
+    return Object.keys(((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName]) || {});
+};
+exports.getAvailableVariants = getAvailableVariants;