funuicss 3.6.9 → 3.6.11

package/css/fun.css

@@ -1953,7 +1953,9 @@ link:hover {
 .text-dark{
   color: var(--dark) !important;
 }
-
+.text-default{
+  color: var(--text-color) !important;
+}
 .text-gradient,
 .hover-text-gradient:hover {
   background: -webkit-linear-gradient(var(--gradientColors));
@@ -1987,7 +1989,7 @@ body {
   background-color: var(--page-bg) !important;
   color: var(--text-color) !important;
 }
-.bg{
+.bg, .page-bg{
   background-color: var(--page-bg) !important;
 }
 
@@ -3223,7 +3225,6 @@ border-radius: var(--borderRadius);
 
 .main-content {
   flex: 1;
-  padding: 1rem 5px;
   overflow-y: auto;
 }
 
@@ -3491,7 +3492,6 @@ border-radius: var(--borderRadius);
 }
 
 
-.button
 /*inputs*/
 .input {
   padding: var(--inputPadding);
@@ -3557,17 +3557,6 @@ border-radius: var(--borderRadius);
   display: none;
 }
 
-.input.success-input{
-  border-bottom:var(--inputBorder) solid var(--success) !important;
-}
-
-
-.input.warning-input{
-  border-bottom:var(--inputBorder) solid var(--warning) !important;
-}
-.input.danger-input{
-  border-bottom:var(--inputBorder) solid var(--danger) !important;
-}
 .input.success-input ,
 .warning-input,
 .input.danger-input:focus
@@ -3576,8 +3565,7 @@ outline: none !important;
 }
 input , select {height: var(--inputButtonHeight);   border-radius: var(--radius);}
 textarea{border-radius: var(--radius) !important; height: fit-content !important;}
-.input.flat{border-radius: 0;}
-
+.input.flat{border-radius: 0 !important;}
 .input:focus {
   border-bottom: var(--inputBorder) solid var(--primary);
 }
@@ -3623,9 +3611,7 @@ background-color: rgba(var(--borderRgb), 0.3);
   box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
 }
 
-.input.borderless {
-  border: none;
-}
+.input.borderless {border: none !important;}
 .input.borderless:focus {
   border: none;
 }
@@ -4669,6 +4655,7 @@ th {
 
 .accordion {
 width: 100%;
+overflow: visible !important;
 }
 
 .accordion-item {
@@ -4703,7 +4690,6 @@ cursor: pointer;
 
 .accordion-content {
 max-height: 0;
-overflow: hidden;
 transition: max-height 1s ease-in-out, opacity 0.3s ease;
 opacity: 0;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.9",
+  "version": "3.6.11",
   "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/accordion/Accordion.d.ts

@@ -26,6 +26,7 @@ export type AccordionProps = {
     iconClass?: string;
     contentClass?: string;
     activeClass?: string;
+    funcss?: string;
 };
 declare const Accordion: React.FC<AccordionProps>;
 export default Accordion;

package/ui/accordion/Accordion.js

@@ -59,14 +59,14 @@ var AccordionItem = function (_a) {
                 react_1.default.createElement("div", { className: "col fit" }, title)),
             react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? 'accordion-rotated' : '') },
                 react_1.default.createElement(pi_1.PiCaretDown, null))),
-        react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
+        react_1.default.createElement("div", { style: { overflow: isOpen ? 'visible' : 'hidden' }, className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
             react_1.default.createElement("div", { className: "accordion-inner" }, content))));
 };
 exports.AccordionItem = AccordionItem;
 var Accordion = function (_a) {
     var _b;
-    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass;
-    var _e = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _e[0], setOpenIndexes = _e[1];
+    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass, _e = _a.funcss, funcss = _e === void 0 ? '' : _e;
+    var _f = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _f[0], setOpenIndexes = _f[1];
     var toggleIndex = function (index) {
         if (allowMultiple) {
             if (openIndexes.includes(index)) {
@@ -80,6 +80,6 @@ var Accordion = function (_a) {
             setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
         }
     };
-    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+    return (react_1.default.createElement("div", { className: "accordion ".concat(funcss) }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
 };
 exports.default = Accordion;

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/input/Input.js

@@ -73,7 +73,7 @@ var generateInputClasses = function (_a) {
     var bgClass = bg || '';
     var flatClass = flat ? 'flat' : '';
     var cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
-    var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : '';
+    var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
     return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
 // Iconic Input Wrapper Component
@@ -95,8 +95,24 @@ var TextInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -106,10 +122,10 @@ var TextInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, mergedProps)));
+    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest, mergedProps)));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
 };
 exports.TextInput = TextInput;
@@ -118,8 +134,24 @@ var SelectInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -129,10 +161,10 @@ var SelectInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
 };
 exports.SelectInput = SelectInput;
@@ -141,8 +173,24 @@ var TextareaInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -152,10 +200,10 @@ var TextareaInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, mergedProps)));
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest, mergedProps)));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
 };
 exports.TextareaInput = TextareaInput;
@@ -165,8 +213,24 @@ var FileInput = function (_a) {
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+        bordered: rest.bordered,
+        borderless: rest.borderless,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var handleChange = function (e) {
         var _a;
         var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -192,7 +256,7 @@ var FileInput = function (_a) {
         var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
             button || (react_1.default.createElement(Button_1.default, { funcss: mergedProps.funcss, startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label)),
-            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, mergedProps))));
+            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest, mergedProps))));
         return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
@@ -206,7 +270,7 @@ var FileInput = function (_a) {
                     width: '100%',
                 } }, fileName || label),
             extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
-        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, mergedProps))));
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest, mergedProps))));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
 };
 exports.FileInput = FileInput;
@@ -216,9 +280,8 @@ var Input = function (_a) {
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     // Merge config with local props
     var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg })).props;
-    // Handle legacy noBorder prop and theme variant
-    var themeVariant = (0, theme_1.useVariant)().variant;
-    var inputProps = __assign(__assign({}, mergedProps), { variant: variant, bordered: themeVariant === 'standard' ? true : mergedProps.bordered, borderless: themeVariant === 'minimal' ? true : noBorder || mergedProps.borderless });
+    // Handle legacy noBorder prop
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/theme/theme.d.ts

@@ -15,6 +15,8 @@ interface ProjectData {
 interface ThemeProviderProps {
     theme: ThemeName;
     projectId: string;
+    funcss?: string;
+    minHeight?: string;
     children: ReactNode;
 }
 interface ThemeContextType {

package/ui/theme/theme.js

@@ -190,13 +190,13 @@ var subscribeToTheme = function (projectId, callback) {
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children, projectId = _a.projectId;
-    var _b = (0, react_1.useState)('standard'), variant = _b[0], setVariant = _b[1];
-    var _c = (0, react_1.useState)({}), themeConfig = _c[0], setThemeConfig = _c[1];
-    var _d = (0, react_1.useState)(null), projectData = _d[0], setProjectData = _d[1];
-    var _e = (0, react_1.useState)(true), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = (0, react_1.useState)(true), isInitialLoad = _f[0], setIsInitialLoad = _f[1];
-    var _g = (0, react_1.useState)(null), error = _g[0], setError = _g[1];
+    var theme = _a.theme, children = _a.children, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.minHeight, minHeight = _c === void 0 ? '100vh' : _c, projectId = _a.projectId;
+    var _d = (0, react_1.useState)('standard'), variant = _d[0], setVariant = _d[1];
+    var _e = (0, react_1.useState)({}), themeConfig = _e[0], setThemeConfig = _e[1];
+    var _f = (0, react_1.useState)(null), projectData = _f[0], setProjectData = _f[1];
+    var _g = (0, react_1.useState)(true), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = (0, react_1.useState)(true), isInitialLoad = _h[0], setIsInitialLoad = _h[1];
+    var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -303,10 +303,10 @@ var ThemeProvider = function (_a) {
     }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
     /* ------------------------------- Render ------------------------------- */
     return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
-        react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
+        react_1.default.createElement("div", { className: "theme-".concat(theme, " ").concat(funcss), style: {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
-                minHeight: '100vh',
+                minHeight: minHeight,
                 // Smooth transition when theme changes
                 transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
             } }, children)));

package/ui/vista/Vista.d.ts

@@ -12,12 +12,30 @@ type VistaProps = {
     blurry?: number;
     opacity?: number;
     heading?: React.ReactNode;
+    headingSize?: string;
+    headingWeight?: number;
+    headingColor?: string;
+    headingClass?: string;
     subheading?: React.ReactNode;
+    subheadingSize?: string;
+    subheadingWeight?: number;
+    subheadingColor?: string;
+    subheadingClass?: string;
     content?: React.ReactNode;
+    contentSize?: string;
+    contentWeight?: number;
+    contentColor?: string;
+    contentClass?: string;
     image?: React.ReactNode;
+    imageUrl?: string;
+    imageAlt?: string;
+    imageClass?: string;
+    imageSize?: string;
     cta?: React.ReactNode;
+    ctaClass?: string;
     sectionClass?: string;
     containerClass?: string;
+    gap?: string;
     textWrapperClass?: string;
     imageWrapperClass?: string;
     children?: React.ReactNode;
@@ -30,6 +48,7 @@ type VistaProps = {
     fadeRadial?: boolean;
     fadeOverlayDarken?: number;
     backgroundImage?: string;
+    variant?: string;
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -18,28 +18,91 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
 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 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, heading = _a.heading, subheading = _a.subheading, content = _a.content, image = _a.image, cta = _a.cta, _l = _a.sectionClass, sectionClass = _l === void 0 ? '' : _l, _m = _a.containerClass, containerClass = _m === void 0 ? '' : _m, _o = _a.textWrapperClass, textWrapperClass = _o === void 0 ? '' : _o, _p = _a.imageWrapperClass, imageWrapperClass = _p === void 0 ? '' : _p, children = _a.children, 
+    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
+    heading = _a.heading, _l = _a.headingSize, headingSize = _l === void 0 ? '5xl' : _l, _m = _a.headingWeight, headingWeight = _m === void 0 ? 700 : _m, _o = _a.headingColor, headingColor = _o === void 0 ? '' : _o, _p = _a.headingClass, headingClass = _p === void 0 ? '' : _p, subheading = _a.subheading, _q = _a.subheadingSize, subheadingSize = _q === void 0 ? 'lg' : _q, _r = _a.subheadingWeight, subheadingWeight = _r === void 0 ? 400 : _r, _s = _a.subheadingColor, subheadingColor = _s === void 0 ? 'light' : _s, _t = _a.subheadingClass, subheadingClass = _t === void 0 ? '' : _t, content = _a.content, _u = _a.contentSize, contentSize = _u === void 0 ? 'base' : _u, _v = _a.contentWeight, contentWeight = _v === void 0 ? 400 : _v, _w = _a.contentColor, contentColor = _w === void 0 ? '' : _w, _x = _a.contentClass, contentClass = _x === void 0 ? '' : _x, image = _a.image, _y = _a.imageUrl, imageUrl = _y === void 0 ? '' : _y, _z = _a.imageAlt, imageAlt = _z === void 0 ? '' : _z, _0 = _a.imageClass, imageClass = _0 === void 0 ? '' : _0, _1 = _a.imageSize, imageSize = _1 === void 0 ? '100%' : _1, cta = _a.cta, _2 = _a.ctaClass, ctaClass = _2 === void 0 ? '' : _2, _3 = _a.sectionClass, sectionClass = _3 === void 0 ? '' : _3, _4 = _a.containerClass, containerClass = _4 === void 0 ? '' : _4, _5 = _a.textWrapperClass, textWrapperClass = _5 === void 0 ? '' : _5, _6 = _a.gap, gap = _6 === void 0 ? '2rem' : _6, _7 = _a.imageWrapperClass, imageWrapperClass = _7 === void 0 ? '' : _7, children = _a.children, 
     // Gradient Props
-    _q = _a.showGradient, 
+    _8 = _a.showGradient, 
     // Gradient Props
-    showGradient = _q === void 0 ? false : _q, _r = _a.gradientPosition, gradientPosition = _r === void 0 ? 'bottom-right' : _r, _s = _a.gradientSize, gradientSize = _s === void 0 ? '300px' : _s, _t = _a.blurry, blurry = _t === void 0 ? 100 : _t, _u = _a.opacity, opacity = _u === void 0 ? 0.4 : _u, gradientColors = _a.gradientColors, _v = _a.fade, fade = _v === void 0 ? false : _v, _w = _a.fadeDirection, fadeDirection = _w === void 0 ? 'bottom' : _w, _x = _a.fadeRadial, fadeRadial = _x === void 0 ? false : _x, _y = _a.fadeOverlayDarken, fadeOverlayDarken = _y === void 0 ? 0.5 : _y, _z = _a.backgroundImage, backgroundImage = _z === void 0 ? '' : _z;
+    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;
+    // Use the component config hook
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
+    // Merge config with local props - local props should override config
+    var mergedProps = mergeWithLocal({
+        layout: layout,
+        reverse: reverse,
+        bg: bg,
+        padding: padding,
+        textAlign: textAlign,
+        imgPosition: imgPosition,
+        funcss: funcss,
+        pattern: pattern,
+        patternOpacity: patternOpacity,
+        showGradient: showGradient,
+        gradientPosition: gradientPosition,
+        gradientSize: gradientSize,
+        blurry: blurry,
+        opacity: opacity,
+        gradientColors: gradientColors,
+        fade: fade,
+        fadeDirection: fadeDirection,
+        fadeRadial: fadeRadial,
+        fadeOverlayDarken: fadeOverlayDarken,
+        backgroundImage: backgroundImage,
+        sectionClass: sectionClass,
+        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,
+        cta: cta,
+        ctaClass: ctaClass,
+    }).props;
     var layoutClass = [
-        layout,
-        reverse ? 'reverse' : '',
-        "text-".concat(textAlign),
+        mergedProps.layout,
+        mergedProps.reverse ? 'reverse' : '',
+        "text-".concat(mergedProps.textAlign),
     ]
         .filter(Boolean)
         .join(' ');
-    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(textWrapperClass) },
-        heading,
-        subheading,
-        content,
-        cta,
-        children));
-    var ImageContent = image && (react_1.default.createElement("div", { className: "vista-image ".concat(imageWrapperClass) }, image));
-    var isCentered = layout === 'centered';
-    var isStacked = layout === 'stacked';
+    // 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))));
+    // 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',
+            maxWidth: mergedProps.imageSize,
+            borderRadius: 'inherit'
+        } }))));
+    var isCentered = mergedProps.layout === 'centered';
+    var isStacked = mergedProps.layout === 'stacked';
     var positionStyles = {
         'top-left': { top: '-100px', left: '-100px' },
         'top-right': { top: '-100px', right: '-100px' },
@@ -49,59 +112,61 @@ var Vista = function (_a) {
     };
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
-    var gradientStyle = __assign({ position: 'absolute', width: gradientSize, height: gradientSize, background: gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: opacity, filter: "blur(".concat(blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[gradientPosition]);
+    var gradientStyle = __assign({ position: 'absolute', width: mergedProps.gradientSize, height: mergedProps.gradientSize, background: mergedProps.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: mergedProps.opacity, filter: "blur(".concat(mergedProps.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[mergedProps.gradientPosition]);
     return (react_1.default.createElement(ScrollInView_1.default, null,
-        react_1.default.createElement("div", { className: "vista \n          ".concat(pattern === 'grid' ? 'grid-bg' :
-                pattern === 'dots' ? 'bg-pattern-dots' :
-                    pattern === 'diagonal' ? 'bg-pattern-diagonal' :
-                        pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
-                            pattern === 'horizontal' ? 'bg-pattern-horizontal' :
-                                pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(bg, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative',
+        react_1.default.createElement("div", { className: "vista \n          ".concat(mergedProps.pattern === 'grid' ? 'grid-bg' :
+                mergedProps.pattern === 'dots' ? 'bg-pattern-dots' :
+                    mergedProps.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
+                        mergedProps.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+                            mergedProps.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+                                mergedProps.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(mergedProps.bg, " p-").concat(mergedProps.padding, " ").concat(layoutClass, " ").concat(mergedProps.sectionClass, " ").concat(mergedProps.funcss), style: {
+                position: 'relative',
                 overflow: 'hidden',
-                backgroundImage: pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px)") :
-                    pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
-                        pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, "), rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
-                            pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%)") :
-                                pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
-                                    pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") : ''
+                minHeight: "90vh",
+                backgroundImage: mergedProps.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                    mergedProps.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                        mergedProps.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, "), rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
+                            mergedProps.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%)") :
+                                mergedProps.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                                    mergedProps.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") : ''
             } },
-            showGradient && react_1.default.createElement("div", { style: gradientStyle }),
-            react_1.default.createElement("div", { className: "vista-container ".concat(containerClass), style: { position: 'relative', zIndex: 1 } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
-                (imgPosition === 'top') && ImageContent,
+            mergedProps.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
+            react_1.default.createElement("div", { className: "vista-container ".concat(mergedProps.containerClass), style: { position: 'relative', zIndex: 1, gap: mergedProps.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (mergedProps.imgPosition === 'top') && ImageContent,
                 TextContent,
-                (imgPosition === 'bottom') && ImageContent)) : reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (mergedProps.imgPosition === 'bottom') && ImageContent)) : mergedProps.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
                 ImageContent,
                 TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                (layout === 'imageLeft') && ImageContent,
+                (mergedProps.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
                 TextContent,
-                (layout === 'imageRight') && ImageContent))),
-            fade && (react_1.default.createElement("div", { style: {
+                (mergedProps.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
+            mergedProps.fade && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     width: '100%',
                     height: '100%',
-                    background: fadeRadial
-                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(bg || 'page-bg'), " 100%)")
-                        : "linear-gradient(to ".concat(fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(bg || 'page-bg'), " 0%, transparent 100%)"),
+                    background: mergedProps.fadeRadial
+                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 100%)")
+                        : "linear-gradient(to ".concat(mergedProps.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 0%, transparent 100%)"),
                     zIndex: 0,
                     pointerEvents: 'none'
                 } })),
-            backgroundImage && (react_1.default.createElement("div", { style: {
+            mergedProps.backgroundImage && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     inset: 0,
-                    backgroundImage: "url(".concat(backgroundImage, ")"),
+                    backgroundImage: "url(".concat(mergedProps.backgroundImage, ")"),
                     backgroundSize: 'cover',
                     backgroundPosition: 'center',
                     zIndex: -1,
                     width: '100%',
                     height: '100%',
                 } })),
-            backgroundImage && fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
+            mergedProps.backgroundImage && mergedProps.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
                     inset: 0,
-                    backgroundColor: "rgba(0, 0, 0, ".concat(fadeOverlayDarken, ")"),
+                    backgroundColor: "rgba(0, 0, 0, ".concat(mergedProps.fadeOverlayDarken, ")"),
                     zIndex: -1,
                 } })))));
 };

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,8 +256,8 @@ var mergeComponentConfig = function (config, localProps) {
         };
     }
     return {
-        // Props: config overrides local only if variant exists
-        props: __assign(__assign({}, localProps), config.componentProps),
+        // 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;