funuicss 3.6.6 → 3.6.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.6",
+  "version": "3.6.8",
   "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

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-import * as React from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 interface ButtonProps {
     color?: string;
     bg?: string;
@@ -30,10 +29,11 @@ interface ButtonProps {
     buttonFillStyle?: React.CSSProperties;
     outlineSize?: number;
     isLoading?: boolean;
+    variant?: string;
     status?: 'success' | 'warning' | 'info' | 'danger';
     children?: React.ReactNode;
     style?: React.CSSProperties;
-    onClick?: (...args: unknown[]) => void;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export default function Button({ 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, onClick, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/ui/button/Button.js

@@ -11,39 +11,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        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)
@@ -55,57 +22,103 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Button;
-var React = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
+var componentUtils_1 = require("../../utils/componentUtils");
 function Button(_a) {
-    var 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, ["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, 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"]);
+    // Use the component config hook
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
+    // Merge config with local props - local props should override config
+    var mergedProps = mergeWithLocal(__assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold }, rest)).props;
+    // Use mergedProps directly instead of getProp - this ensures local props override config
+    var finalIsLoading = mergedProps.isLoading;
+    var finalStatus = mergedProps.status;
+    var finalText = mergedProps.text;
+    var finalOutlined = mergedProps.outlined;
+    var finalBg = mergedProps.bg;
+    var finalColor = mergedProps.color;
+    var finalRounded = mergedProps.rounded;
+    var finalHoverless = mergedProps.hoverless;
+    var finalBold = mergedProps.bold;
+    var finalFloat = mergedProps.float;
+    var finalRaised = mergedProps.raised;
+    var finalHoverUp = mergedProps.hoverUp;
+    var finalFlat = mergedProps.flat;
+    var finalHoverNone = mergedProps.hoverNone;
+    var finalSmall = mergedProps.small;
+    var finalSmaller = mergedProps.smaller;
+    var finalBig = mergedProps.big;
+    var finalBigger = mergedProps.bigger;
+    var finalJumbo = mergedProps.jumbo;
+    var finalFillAnimation = mergedProps.fillAnimation;
+    var finalFillDirection = mergedProps.fillDirection;
+    var finalFillTextColor = mergedProps.fillTextColor;
+    var finalFuncss = mergedProps.funcss;
     function removeNumbers(text) {
+        if (!text)
+            return '';
         return text.replace(/[0-9]/g, '');
     }
     function hasNumberAbove(text) {
-        var matches = text.match(/\d+/g); // find all numbers in the string
+        if (!text)
+            return false;
+        var matches = text.match(/\d+/g);
         if (!matches)
             return false;
         return matches.some(function (num) { return parseInt(num) >= 400; });
     }
     function hasNumber(text) {
+        if (!text)
+            return false;
         return /\d/.test(text);
     }
+    // Determine text color class using final values (local props override config)
+    var textColorClass = finalBg ?
+        finalColor ?
+            finalColor :
+            !hasNumber(finalBg) && !finalOutlined ?
+                "" :
+                hasNumberAbove(finalBg) && !finalOutlined ?
+                    "white" :
+                    removeNumbers(finalBg)
+        : finalColor;
     var classNames = [
         'button',
-        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
-        funcss || '',
-        rounded ? 'roundBtn' : '',
-        hoverless ? 'hoverless' : '',
-        bold ? 'text-bold' : '',
-        float ? 'floatBtn' : '',
-        raised ? 'raisedBtn' : '',
-        hoverUp ? 'hover-up' : '',
-        flat ? 'flat' : '',
-        hoverNone ? 'hoverNone' : '',
-        small ? 'smallBtn' :
-            smaller ? 'smallerBtn' : '',
-        big ? 'bigBtn' : '',
-        bigger ? 'biggerBtn' : '',
-        jumbo ? 'jumboBtn' : '',
-        outlined ? "outlined outline-".concat(bg || '', " text-").concat(color ? color : removeNumbers(bg)) : bg || '',
-        "".concat(fillAnimation ? "".concat(fillTextColor ? "hover-text-".concat(fillTextColor) : '', " button-fill fill-").concat(fillDirection ? fillDirection : 'left') : '')
+        "text-".concat(textColorClass),
+        finalFuncss || '',
+        finalRounded ? 'roundBtn' : '',
+        finalHoverless ? 'hoverless' : '',
+        finalBold ? 'text-bold' : '',
+        finalFloat ? 'floatBtn' : '',
+        finalRaised ? 'raisedBtn' : '',
+        finalHoverUp ? 'hover-up' : '',
+        finalFlat ? 'flat' : '',
+        finalHoverNone ? 'hoverNone' : '',
+        finalSmall ? 'smallBtn' :
+            finalSmaller ? 'smallerBtn' : '',
+        finalBig ? 'bigBtn' : '',
+        finalBigger ? 'biggerBtn' : '',
+        finalJumbo ? 'jumboBtn' : '',
+        finalOutlined ? "outlined outline-".concat(finalBg || '', " text-").concat(finalColor ? finalColor : removeNumbers(finalBg)) : finalBg || '',
+        "".concat(finalFillAnimation ? "".concat(finalFillTextColor ? "hover-text-".concat(finalFillTextColor) : '', " button-fill fill-").concat(finalFillDirection || 'left') : '')
     ].join(' ');
-    return (React.createElement("span", null,
-        React.createElement("button", __assign({ className: "".concat(classNames, " ").concat(startIcon || endIcon || status || isLoading ? 'iconic' : ''), style: __assign({ height: height || '', width: fullWidth ? '100%' : width || '', borderRadius: flat ? '0rem' : '' }, style), onClick: onClick }, rest),
-            isLoading &&
-                React.createElement("span", { className: 'rotate btn_left_icon', style: { lineHeight: "0" } },
-                    React.createElement(pi_1.PiSpinner, null)),
-            status &&
-                React.createElement("span", { className: ' btn_left_icon', style: { lineHeight: "0" } },
-                    status === "success" && React.createElement(pi_1.PiCheck, null),
-                    status === "info" && React.createElement(pi_1.PiInfo, null),
-                    status === "warning" && React.createElement(pi_1.PiWarning, null),
-                    status === "danger" && React.createElement(pi_1.PiX, null)),
-            fillAnimation ? React.createElement("span", { className: "button_fill_span ".concat(bg) }) : '',
-            startIcon && React.createElement("span", { className: "btn_left_icon", style: { lineHeight: "0" } }, startIcon),
-            text ? text : children,
-            endIcon && React.createElement("span", { className: "btn_right_icon", style: { lineHeight: "0" } }, endIcon))));
+    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),
+            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" } },
+                finalStatus === "success" && react_1.default.createElement(pi_1.PiCheck, null),
+                finalStatus === "info" && react_1.default.createElement(pi_1.PiInfo, null),
+                finalStatus === "warning" && react_1.default.createElement(pi_1.PiWarning, null),
+                finalStatus === "danger" && react_1.default.createElement(pi_1.PiX, null))),
+            finalFillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(finalBg) }),
+            startIcon && react_1.default.createElement("span", { className: "btn_left_icon", style: { lineHeight: "0" } }, startIcon),
+            finalText ? finalText : children,
+            endIcon && react_1.default.createElement("span", { className: "btn_right_icon", style: { lineHeight: "0" } }, endIcon))));
 }

package/ui/input/Input.d.ts

@@ -18,6 +18,7 @@ interface BaseInputProps {
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     iconicBg?: string;
+    variant?: string;
 }
 interface SelectOption {
     value: string;

package/ui/input/Input.js

@@ -64,6 +64,7 @@ var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
 var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
+var componentUtils_1 = require("../../utils/componentUtils");
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
     var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
@@ -91,65 +92,81 @@ var IconicInputWrapper = function (_a) {
 };
 // Text Input Component
 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, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label"]);
+    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;
     var className = generateInputClasses({
-        status: status,
-        rounded: rounded,
-        bg: bg,
-        funcss: funcss,
-        flat: flat,
-        leftRounded: leftRounded,
-        rightRounded: rightRounded,
-        bordered: bordered,
-        borderless: borderless
+        status: mergedProps.status,
+        rounded: mergedProps.rounded,
+        bg: mergedProps.bg,
+        funcss: mergedProps.funcss,
+        flat: mergedProps.flat,
+        leftRounded: mergedProps.leftRounded,
+        rightRounded: mergedProps.rightRounded,
+        bordered: mergedProps.bordered,
+        borderless: mergedProps.borderless
     });
-    var style = 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 }, rest)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, inputElement));
+    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)));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
 };
 exports.TextInput = TextInput;
 // Select Component
 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, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options"]);
+    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;
     var className = generateInputClasses({
-        status: status,
-        rounded: rounded,
-        bg: bg,
-        funcss: funcss,
-        flat: flat,
-        leftRounded: leftRounded,
-        rightRounded: rightRounded,
-        bordered: bordered,
-        borderless: borderless
+        status: mergedProps.status,
+        rounded: mergedProps.rounded,
+        bg: mergedProps.bg,
+        funcss: mergedProps.funcss,
+        flat: mergedProps.flat,
+        leftRounded: mergedProps.leftRounded,
+        rightRounded: mergedProps.rightRounded,
+        bordered: mergedProps.bordered,
+        borderless: mergedProps.borderless
     });
-    var style = 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 }, rest), 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: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, selectElement));
+    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)); })));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
 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, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows"]);
+    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;
     var className = generateInputClasses({
-        status: status,
-        rounded: rounded,
-        bg: bg,
-        funcss: funcss,
-        flat: flat,
-        leftRounded: leftRounded,
-        rightRounded: rightRounded,
-        bordered: bordered,
-        borderless: borderless
+        status: mergedProps.status,
+        rounded: mergedProps.rounded,
+        bg: mergedProps.bg,
+        funcss: mergedProps.funcss,
+        flat: mergedProps.flat,
+        leftRounded: mergedProps.leftRounded,
+        rightRounded: mergedProps.rightRounded,
+        bordered: mergedProps.bordered,
+        borderless: mergedProps.borderless
     });
-    var style = 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 }, rest)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, textareaElement));
+    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)));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
 };
 exports.TextareaInput = TextareaInput;
 // File Input Component
 var FileInput = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "icon", "extra", "button", "btn", "value"]);
-    var _d = (0, react_1.useState)(''), fileName = _d[0], setFileName = _d[1];
+    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "icon", "extra", "button", "btn", "value", "variant"]);
+    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;
     var handleChange = function (e) {
         var _a;
         var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -161,22 +178,22 @@ var FileInput = function (_a) {
     };
     if (btn) {
         var className = generateInputClasses({
-            status: status,
-            rounded: rounded,
-            bg: bg,
-            funcss: funcss,
-            flat: flat,
-            leftRounded: leftRounded,
-            rightRounded: rightRounded,
+            status: mergedProps.status,
+            rounded: mergedProps.rounded,
+            bg: mergedProps.bg,
+            funcss: mergedProps.funcss,
+            flat: mergedProps.flat,
+            leftRounded: mergedProps.leftRounded,
+            rightRounded: mergedProps.rightRounded,
             bordered: true,
             borderless: false,
             additionalClasses: 'filedInput'
         });
-        var style = fullWidth ? { width: '100%' } : undefined;
+        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: 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 }, rest))));
-        return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, fileInputElement));
+            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))));
+        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" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -189,15 +206,19 @@ 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" }, rest))));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, funcss: funcss }, uploadElement));
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, mergedProps))));
+    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
 };
 exports.FileInput = FileInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg"]);
-    // Handle legacy noBorder prop
-    var variant = (0, theme_1.useVariant)().variant;
-    var inputProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg, bordered: variant === 'standard' ? true : props.bordered, borderless: variant === 'minimal' ? true : noBorder || props.borderless });
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg", "variant"]);
+    // Use the component config hook for the main Input component
+    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 });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/select/Select.d.ts

@@ -10,8 +10,13 @@ interface CustomSelectProps {
     defaultValue?: string;
     placeholder?: string;
     options: SelectOption[];
-    onChange?: (value: string, option: SelectOption) => void;
-    onBlur?: (event: React.FocusEvent) => void;
+    onChange?: (value: string, event?: {
+        target: {
+            value: string;
+            name: string;
+        };
+    }) => void;
+    onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
     searchable?: boolean;
     disabled?: boolean;
     bordered?: boolean;
@@ -25,6 +30,7 @@ interface CustomSelectProps {
     label?: string;
     searchAutoFocus?: boolean;
     style?: React.CSSProperties;
+    required?: boolean;
 }
 declare const Select: React.FC<CustomSelectProps>;
 export default Select;

package/ui/select/Select.js

@@ -36,26 +36,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var theme_1 = require("../theme/theme");
 var Select = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
-    var _r = (0, react_1.useState)(false), isOpen = _r[0], setIsOpen = _r[1];
-    var _s = (0, react_1.useState)(null), selectedOption = _s[0], setSelectedOption = _s[1];
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q, _r = _a.required, required = _r === void 0 ? false : _r;
+    var _s = (0, react_1.useState)(false), isOpen = _s[0], setIsOpen = _s[1];
     var _t = (0, react_1.useState)(''), searchQuery = _t[0], setSearchQuery = _t[1];
     var _u = (0, react_1.useState)(-1), focusedIndex = _u[0], setFocusedIndex = _u[1];
     var _v = (0, react_1.useState)(options), filteredOptions = _v[0], setFilteredOptions = _v[1];
+    var _w = (0, react_1.useState)(value || defaultValue || ''), internalValue = _w[0], setInternalValue = _w[1];
     var containerRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var searchInputRef = (0, react_1.useRef)(null);
+    var selectRef = (0, react_1.useRef)(null);
     var variant = (0, theme_1.useVariant)().variant;
-    // Initialize selected option
-    (0, react_1.useEffect)(function () {
-        var initialValue = value || defaultValue;
-        if (initialValue) {
-            var option = options.find(function (opt) { return opt.value === initialValue; });
-            if (option) {
-                setSelectedOption(option);
-            }
-        }
-    }, [value, defaultValue, options]);
+    var currentValue = value !== undefined ? value : internalValue;
+    var selectedOption = options.find(function (opt) { return opt.value === currentValue; }) || null;
     // Update filtered options when search query changes
     (0, react_1.useEffect)(function () {
         if (searchQuery) {
@@ -105,9 +98,32 @@ var Select = function (_a) {
         setFocusedIndex(-1);
     };
     var selectOption = function (option) {
-        setSelectedOption(option);
+        setInternalValue(option.value);
         closeDropdown();
-        onChange === null || onChange === void 0 ? void 0 : onChange(option.value, option);
+        // Trigger native select change
+        if (selectRef.current) {
+            selectRef.current.value = option.value;
+            var nativeEvent = new Event('change', { bubbles: true });
+            selectRef.current.dispatchEvent(nativeEvent);
+        }
+        // Call onChange with value as first argument and event object as second
+        if (onChange) {
+            var eventObject = {
+                target: { value: option.value, name: name || '' }
+            };
+            onChange(option.value, eventObject);
+        }
+    };
+    var handleNativeChange = function (event) {
+        var newValue = event.target.value;
+        var option = options.find(function (opt) { return opt.value === newValue; });
+        setInternalValue(newValue);
+        if (onChange && option) {
+            var eventObject = {
+                target: { value: newValue, name: name || '' }
+            };
+            onChange(newValue, eventObject);
+        }
     };
     var handleKeyDown = function (event) {
         var _a;
@@ -175,11 +191,20 @@ var Select = function (_a) {
         var classes = [
             'custom-select',
             fullWidth && 'fullWidth',
-            ,
+            className,
         ].filter(Boolean);
         return classes.join(' ');
     };
     return (react_1.default.createElement("div", { ref: containerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', " ").concat(getContainerClasses()), style: style },
+        react_1.default.createElement("select", { ref: selectRef, id: id, name: name, value: currentValue, onChange: handleNativeChange, onBlur: onBlur, disabled: disabled, required: required, style: {
+                position: 'absolute',
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: 'none'
+            }, tabIndex: -1 },
+            !label && react_1.default.createElement("option", { value: "" }, "Select an option"),
+            options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })),
         react_1.default.createElement("div", { ref: triggerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', "  ").concat(getTriggerClasses()), onClick: openDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox" },
             react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : label),
             react_1.default.createElement("div", { className: "select-arrow ".concat(isOpen ? 'open' : '') },
@@ -187,7 +212,6 @@ var Select = function (_a) {
                     react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })))),
         react_1.default.createElement("div", { className: "select-dropdown ".concat(isOpen ? 'open' : '', " ") },
             searchable && (react_1.default.createElement("input", { ref: searchInputRef, type: "text", className: "select-search", placeholder: "Search options...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, onKeyDown: handleSearchKeyDown })),
-            react_1.default.createElement("div", { className: "select-options", role: "listbox" }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { className: "select-option no-results" }, "No options found")) : (filteredOptions.map(function (option, index) { return (react_1.default.createElement("button", { key: option.value, type: "button", className: "select-option ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'selected' : '', " ").concat(index === focusedIndex ? 'focused' : ''), onClick: function () { return selectOption(option); }, role: "option", "aria-selected": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value }, option.text)); })))),
-        react_1.default.createElement("input", { type: "hidden", id: id, name: name, value: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || '' })));
+            react_1.default.createElement("div", { className: "select-options", role: "listbox" }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { className: "select-option no-results" }, "No options found")) : (filteredOptions.map(function (option, index) { return (react_1.default.createElement("button", { key: option.value, type: "button", className: "select-option ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'selected' : '', " ").concat(index === focusedIndex ? 'focused' : ''), onClick: function () { return selectOption(option); }, role: "option", "aria-selected": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value }, option.text)); }))))));
 };
 exports.default = Select;

package/ui/text/Text.d.ts

@@ -39,6 +39,7 @@ type TypographyProps = {
     customStyles?: React.CSSProperties;
     onClick?: () => void;
     children?: React.ReactNode;
+    variant?: string;
     size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 };
 declare const Text: React.FC<TypographyProps>;

package/ui/text/Text.js

@@ -1,4 +1,5 @@
 "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++) {
@@ -28,52 +29,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var pi_1 = require("react-icons/pi");
 var getCssVariable_1 = require("../../utils/getCssVariable");
+var componentUtils_1 = require("../../utils/componentUtils");
 var Text = function (_a) {
-    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _b = _a.size, size = _b === void 0 ? 'base' : _b, // default
-    rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "size"]);
-    var Tag = block ? 'div' : 'span';
-    var sizeClass = "".concat(size === 'h1' ? "h1" :
-        size === 'h2' ? "h2" :
-            size === 'h3' ? "h3" :
-                size === 'h4' ? "h4" :
-                    size === 'h5' ? "h5" :
-                        size === 'h6' ? "h6" :
-                            "text-".concat(size));
+    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _b = _a.variant, variant = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'base' : _c, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size"]);
+    // Use the component config hook
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal(__assign({ bg: bg, color: color, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size }, rest)).props;
+    var Tag = mergedProps.block ? 'div' : 'span';
+    var sizeClass = "".concat(mergedProps.size === 'h1' ? "h1" :
+        mergedProps.size === 'h2' ? "h2" :
+            mergedProps.size === 'h3' ? "h3" :
+                mergedProps.size === 'h4' ? "h4" :
+                    mergedProps.size === 'h5' ? "h5" :
+                        mergedProps.size === 'h6' ? "h6" :
+                            "text-".concat(mergedProps.size));
     var bdFontWeight = (0, getCssVariable_1.getCssVariableValue)('bd-font-weight');
-    var mergedStyles = __assign(__assign({ display: block ? 'block' : undefined, fontWeight: bold ? 'bold' : weight ? weight : Number(bdFontWeight), lineHeight: lineHeight, letterSpacing: letterSpacing, textTransform: textTransform, textDecoration: textDecoration, fontFamily: fontFamily, textShadow: textShadow, textAlign: textAlign, whiteSpace: whiteSpace, wordBreak: wordBreak, transform: customStyles === null || customStyles === void 0 ? void 0 : customStyles.transform }, customStyles), (truncate
+    var mergedStyles = __assign(__assign({ display: mergedProps.block ? 'block' : undefined, fontWeight: mergedProps.bold ? 'bold' : mergedProps.weight ? mergedProps.weight : Number(bdFontWeight), lineHeight: mergedProps.lineHeight, letterSpacing: mergedProps.letterSpacing, textTransform: mergedProps.textTransform, textDecoration: mergedProps.textDecoration, fontFamily: mergedProps.fontFamily, textShadow: mergedProps.textShadow, textAlign: mergedProps.textAlign, whiteSpace: mergedProps.whiteSpace, wordBreak: mergedProps.wordBreak, transform: mergedProps.transform }, customStyles), (mergedProps.truncate
         ? {
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: truncate,
+            WebkitLineClamp: mergedProps.truncate,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
         }
         : {}));
     var classNames = [
-        funcss || '',
+        mergedProps.funcss || '',
         sizeClass,
-        color ? " text-".concat(color, " ") : '',
-        align ? " text-".concat(align, " ") : '',
-        monospace ? 'monospace' : '',
-        bg || '',
+        mergedProps.color ? " text-".concat(mergedProps.color, " ") : '',
+        mergedProps.align ? " text-".concat(mergedProps.align, " ") : '',
+        mergedProps.monospace ? 'monospace' : '',
+        mergedProps.bg || '',
         hoverText ? "hover-text-".concat(hoverText) : '',
         hoverBg ? "hover-".concat(hoverBg) : '',
-        light ? 'lightText' : lighter ? 'lighterText' : '',
-        italic ? 'italicText' : '',
-        underline ? 'underlineText' : '',
-        body ? 'body' : '',
-        article ? 'article' : '',
-        emp ? 'emp' : '',
-        bold ? 'bold' : '',
-        uppercase ? 'uppercase' : '',
-        lowercase ? 'lowercase' : '',
-        capitalize ? 'capitalize' : '',
-        opacity ? 'opacity-' + opacity : '',
+        mergedProps.light ? 'lightText' : mergedProps.lighter ? 'lighterText' : '',
+        mergedProps.italic ? 'italicText' : '',
+        mergedProps.underline ? 'underlineText' : '',
+        mergedProps.body ? 'body' : '',
+        mergedProps.article ? 'article' : '',
+        mergedProps.emp ? 'emp' : '',
+        mergedProps.bold ? 'bold' : '',
+        mergedProps.uppercase ? 'uppercase' : '',
+        mergedProps.lowercase ? 'lowercase' : '',
+        mergedProps.capitalize ? 'capitalize' : '',
+        mergedProps.opacity ? 'opacity-' + mergedProps.opacity : '',
     ]
         .filter(Boolean)
         .join(' ');
-    return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
-        quote && (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, mergedProps),
+        mergedProps.quote && (react_1.default.createElement("div", null,
             react_1.default.createElement(pi_1.PiQuotesLight, null))),
         children,
         text));

package/ui/theme/theme.d.ts

@@ -1,15 +1,39 @@
 import React, { ReactNode } from 'react';
 export type ThemeVariant = 'standard' | 'minimal';
 export type ThemeName = 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-green' | 'warm-orange' | 'frosted-glass' | 'midnight-purple' | 'cyber-metal';
+interface ThemeConfig {
+    [key: string]: any;
+}
+interface ProjectData {
+    theme_config?: ThemeConfig;
+    default_variation?: ThemeVariant;
+    name?: string;
+    colors?: any;
+    global?: any;
+    components?: any;
+}
 interface ThemeProviderProps {
     theme: ThemeName;
     projectId: string;
     children: ReactNode;
 }
-interface VariantContextType {
+interface ThemeContextType {
     variant: ThemeVariant;
     setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>;
+    themeConfig: ThemeConfig;
+    projectData: ProjectData | null;
+    isLoading: boolean;
+    isInitialLoad: boolean;
+    error: string | null;
 }
-export declare const useVariant: () => VariantContextType;
+export declare const useTheme: () => ThemeContextType;
+export declare const useVariant: () => {
+    variant: ThemeVariant;
+    setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>;
+};
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;
+export declare const useThemeValue: (key: string) => string | undefined;
+export declare const useComponentConfig: (componentName: string) => any;
+export declare const useColors: () => any;
+export declare const useGlobalConfig: () => any;

package/ui/theme/theme.js

@@ -33,8 +33,44 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVariant = void 0;
+exports.useGlobalConfig = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
@@ -43,21 +79,124 @@ var db;
 if (typeof window !== 'undefined') {
     db = require('../../utils/Firebase').default;
 }
-var VariantContext = (0, react_1.createContext)({
+var ThemeContext = (0, react_1.createContext)({
     variant: 'standard',
-    setVariant: function () {
-        /** noop */
-    },
+    setVariant: function () { },
+    themeConfig: {},
+    projectData: null,
+    isLoading: true,
+    isInitialLoad: true,
+    error: null,
 });
-var useVariant = function () { return (0, react_1.useContext)(VariantContext); };
+var useTheme = function () {
+    var context = (0, react_1.useContext)(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return context;
+};
+exports.useTheme = useTheme;
+// Backward compatibility
+var useVariant = function () {
+    var _a = (0, exports.useTheme)(), variant = _a.variant, setVariant = _a.setVariant;
+    return { variant: variant, setVariant: setVariant };
+};
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
+/*                          THEME CACHE & STORAGE                             */
+/* -------------------------------------------------------------------------- */
+var CACHE_KEY = 'funui_theme_cache';
+var CACHE_EXPIRY = 1000 * 60 * 60; // 1 hour
+var getThemeFromCache = function (projectId) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        var cached = localStorage.getItem("".concat(CACHE_KEY, "_").concat(projectId));
+        if (!cached)
+            return null;
+        var parsed = JSON.parse(cached);
+        var isExpired = Date.now() - parsed.timestamp > CACHE_EXPIRY;
+        if (isExpired) {
+            localStorage.removeItem("".concat(CACHE_KEY, "_").concat(projectId));
+            return null;
+        }
+        return parsed.data;
+    }
+    catch (error) {
+        console.error('Error reading theme cache:', error);
+        return null;
+    }
+};
+var saveThemeToCache = function (projectId, data) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        var cache = {
+            projectId: projectId,
+            data: data,
+            timestamp: Date.now(),
+        };
+        localStorage.setItem("".concat(CACHE_KEY, "_").concat(projectId), JSON.stringify(cache));
+    }
+    catch (error) {
+        console.error('Error saving theme cache:', error);
+    }
+};
+/* -------------------------------------------------------------------------- */
+/*                          SINGLETON LISTENER                                */
+/* -------------------------------------------------------------------------- */
+var activeListener = null;
+var currentProjectId = null;
+var listenerSubscribers = new Set();
+var subscribeToTheme = function (projectId, callback) {
+    listenerSubscribers.add(callback);
+    // If listener already exists for this project, just subscribe
+    if (currentProjectId === projectId && activeListener) {
+        return function () {
+            listenerSubscribers.delete(callback);
+        };
+    }
+    // Clean up old listener if project changed
+    if (activeListener && currentProjectId !== projectId) {
+        activeListener();
+        activeListener = null;
+        currentProjectId = null;
+    }
+    // Create new listener
+    var docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
+    currentProjectId = projectId;
+    var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
+        var data = snapshot.data();
+        if (!data)
+            return;
+        // Save to cache
+        saveThemeToCache(projectId, data);
+        // Notify all subscribers
+        listenerSubscribers.forEach(function (cb) { return cb(data); });
+    }, function (error) {
+        console.error('Theme listener error:', error);
+    });
+    activeListener = unsubscribe;
+    return function () {
+        listenerSubscribers.delete(callback);
+        if (listenerSubscribers.size === 0 && activeListener) {
+            activeListener();
+            activeListener = null;
+            currentProjectId = null;
+        }
+    };
+};
+/* -------------------------------------------------------------------------- */
 /*                                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)(false), projectLoaded = _c[0], setprojectLoaded = _c[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];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -79,39 +218,125 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- Real-time Firestore sync ----------------------- */
+    /* ---------------------- Firebase Theme Sync ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
-            setprojectLoaded(true);
+            setIsLoading(false);
+            setIsInitialLoad(false);
             return;
         }
         var root = document.documentElement;
-        var docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
-        var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
-            var _a;
-            var data = snapshot.data();
-            if (!data)
-                return;
-            var config = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
-            var newVariant = data.default_variation || 'standard';
-            setVariant(newVariant);
-            Object.entries(config).forEach(function (_a) {
-                var key = _a[0], value = _a[1];
-                root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
+        // Step 1: Try to load from cache immediately
+        var cachedTheme = getThemeFromCache(projectId);
+        if (cachedTheme) {
+            applyThemeData(cachedTheme, root);
+            setIsLoading(false);
+            // Still initialLoad true, but we have cached data to show
+        }
+        // Step 2: Fetch fresh data (doesn't block render if we have cache)
+        var fetchInitialData = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var docRef, snapshot, data, err_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, 3, 4]);
+                        docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
+                        return [4 /*yield*/, (0, firestore_1.getDoc)(docRef)];
+                    case 1:
+                        snapshot = _a.sent();
+                        if (snapshot.exists()) {
+                            data = snapshot.data();
+                            applyThemeData(data, root);
+                            saveThemeToCache(projectId, data);
+                        }
+                        return [3 /*break*/, 4];
+                    case 2:
+                        err_1 = _a.sent();
+                        console.error('Error fetching initial theme:', err_1);
+                        setError('Failed to load theme');
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setIsLoading(false);
+                        setIsInitialLoad(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
             });
-            setprojectLoaded(true);
-        }, function (error) {
-            console.error('Realtime theme listener error:', error);
-            setprojectLoaded(true);
+        }); };
+        // Only fetch if no cache
+        if (!cachedTheme) {
+            fetchInitialData();
+        }
+        else {
+            // We have cache, mark as loaded after short delay
+            setTimeout(function () { return setIsInitialLoad(false); }, 100);
+        }
+        // Step 3: Subscribe to real-time updates
+        var unsubscribe = subscribeToTheme(projectId, function (data) {
+            applyThemeData(data, root);
         });
-        return function () { return unsubscribe(); };
+        return unsubscribe;
     }, [projectId]);
+    /* Helper function to apply theme data */
+    var applyThemeData = function (data, root) {
+        var _a;
+        var config = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
+        var newVariant = data.default_variation || 'standard';
+        setVariant(newVariant);
+        setThemeConfig(config);
+        setProjectData(data);
+        // Apply CSS variables
+        Object.entries(config).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
+        });
+    };
+    /* Memoize context value to prevent unnecessary re-renders */
+    var contextValue = (0, react_1.useMemo)(function () { return ({
+        variant: variant,
+        setVariant: setVariant,
+        themeConfig: themeConfig,
+        projectData: projectData,
+        isLoading: isLoading,
+        isInitialLoad: isInitialLoad,
+        error: error,
+    }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
     /* ------------------------------- Render ------------------------------- */
-    return (react_1.default.createElement(VariantContext.Provider, { value: { variant: variant, setVariant: setVariant } },
+    return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
         react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
                 minHeight: '100vh',
-            } }, projectLoaded ? children : "")));
+                // Smooth transition when theme changes
+                transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
+            } }, children)));
 };
 exports.default = ThemeProvider;
+/* -------------------------------------------------------------------------- */
+/*                          HELPER HOOKS                                      */
+/* -------------------------------------------------------------------------- */
+// Hook to get specific theme values
+var useThemeValue = function (key) {
+    var themeConfig = (0, exports.useTheme)().themeConfig;
+    return themeConfig[key];
+};
+exports.useThemeValue = useThemeValue;
+// Hook to get component-specific config
+var useComponentConfig = function (componentName) {
+    var _a;
+    var projectData = (0, exports.useTheme)().projectData;
+    return ((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName]) || {};
+};
+exports.useComponentConfig = useComponentConfig;
+// Hook to get colors
+var useColors = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.colors) || {};
+};
+exports.useColors = useColors;
+// Hook to get global config
+var useGlobalConfig = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.global) || {};
+};
+exports.useGlobalConfig = useGlobalConfig;

package/utils/componentUtils.d.ts

@@ -0,0 +1,48 @@
+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 declare const getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
+/**
+ * Merge component config with local props - only applies config if variant exists
+ */
+export declare const mergeComponentConfig: (config: ComponentConfig, localProps?: ComponentProps) => MergedConfig;
+/**
+ * Hook for easy component config usage - only applies if variant is provided and exists
+ */
+export declare const useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;

package/utils/componentUtils.js

@@ -0,0 +1,114 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
+var theme_1 = require("../ui/theme/theme");
+/**
+ * Universal component config getter
+ */
+var getComponentConfig = function (projectData, componentName, variantName) {
+    var _a;
+    if (variantName === void 0) { variantName = 'default'; }
+    if (!((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName])) {
+        return {
+            componentProps: {},
+            variantExists: false,
+            actualVariant: variantName,
+            availableVariants: [],
+            metadata: {}
+        };
+    }
+    var component = projectData.components[componentName];
+    var availableVariants = Object.keys(component);
+    // Find the best variant match
+    var 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: {}
+            };
+        }
+    }
+    var variantData = component[targetVariant] || {};
+    return {
+        componentProps: variantData.componentProps || {},
+        variantExists: true,
+        actualVariant: targetVariant,
+        availableVariants: availableVariants,
+        metadata: variantData.metadata || {}
+    };
+};
+exports.getComponentConfig = getComponentConfig;
+/**
+ * Merge component config with local props - only applies config if variant exists
+ */
+var mergeComponentConfig = function (config, localProps) {
+    if (localProps === void 0) { localProps = {}; }
+    // Only apply config if variant exists and has actual configuration
+    var 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: __assign(__assign({}, localProps), config.componentProps),
+        // Metadata
+        variant: config.actualVariant,
+        hasConfig: true
+    };
+};
+exports.mergeComponentConfig = mergeComponentConfig;
+/**
+ * Hook for easy component config usage - only applies if variant is provided and exists
+ */
+var useComponentConfiguration = function (componentName, variantName // Make variantName optional
+) {
+    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
+        if (!variantName) {
+            return {
+                props: localProps,
+                variant: '',
+                hasConfig: false
+            };
+        }
+        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 });
+};
+exports.useComponentConfiguration = useComponentConfiguration;