funuicss 3.6.20 → 3.7.1

package/ui/table/Table.js

@@ -95,7 +95,7 @@ function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, trCss = _a.trCss, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick", "trCss"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
@@ -188,28 +188,26 @@ function Table(_a) {
     }, [selectedField, selectedValue]);
     return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
         data &&
-            React.createElement("div", { className: "padding bb" },
+            React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter round-edge mb-2", style: { overflow: "show" } },
                 React.createElement(RowFlex_1.default, { gap: 0.5, justify: 'space-between' },
                     title ?
                         React.createElement("div", null,
                             showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600 })),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 })),
                             title &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: title || "", size: 'h6' })))
+                                    React.createElement(Text_1.default, { text: title || "", size: 'h6', lineHeight: '0.8' })))
                         :
                             React.createElement(React.Fragment, null, showTotal && data &&
                                 React.createElement("div", null,
-                                    React.createElement(Text_1.default, { text: 'Records: ', size: 'sm' }),
-                                    React.createElement(Text_1.default, { text: filteredData.length, weight: 600, color: 'primary' }))),
+                                    React.createElement(Text_1.default, { text: "".concat(filteredData.length, " Records"), size: 'sm', weight: 500 }))),
                     data ?
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
                                 !selectedField && !showSearch && filterableFields &&
                                     React.createElement("div", null,
-                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
+                                        React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full bg', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
                                                 { text: 'All*', value: '' }
                                             ], (filterableFields || []).map(function (field) { return ({
@@ -217,7 +215,7 @@ function Table(_a) {
                                                 value: field
                                             }); }), true) })),
                                 selectedField && !showSearch && filterableFields && (React.createElement("div", { className: '' },
-                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full', fullWidth: true, value: selectedValue || '', onChange: function (e) {
+                                    React.createElement(Select_1.default, { rounded: true, searchable: true, funcss: 'min-w-300 w-full bg', fullWidth: true, value: selectedValue || '', onChange: function (e) {
                                             if (e === 'clear_all') {
                                                 setSelectedField('');
                                             }
@@ -238,21 +236,21 @@ function Table(_a) {
                                 showSearch ?
                                     React.createElement(Flex_1.default, { gap: 0.5, wrap: 'nowrap', alignItems: 'center' },
                                         React.createElement("div", { className: 'animated slide-up' },
-                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
+                                            React.createElement(Input_1.default, { borderless: true, funcss: 'min-w-300 bg', fullWidth: true, rounded: true, value: searchQuery, onChange: function (e) { return setsearchQuery(e.target.value); }, label: "Search..." })),
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
                                                     filterableFields ? React.createElement(io5_1.IoFilterOutline, { className: 'pointer' })
                                                         :
                                                             React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
-                                                    React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
+                                                    React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
                                     :
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement(ToolTip_1.default, null,
                                                 React.createElement(ci_1.CiSearch, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(true); } }),
-                                                React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Search Data" })))))
+                                                React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Search Data" })))))
                         : '',
-                    React.createElement(React.Fragment, null,
+                    React.createElement(React.Fragment, null, (right || !hideExport) &&
                         React.createElement(RowFlex_1.default, { gap: 0.5 },
                             right && right,
                             !hideExport &&
@@ -260,7 +258,7 @@ function Table(_a) {
                                     React.createElement(ToolTip_1.default, null,
                                         React.createElement(Circle_1.default, { bg: 'lighter', bordered: true, onClick: Export },
                                             React.createElement(pi_1.PiExportThin, null)),
-                                        React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
+                                        React.createElement(Tip_1.default, { tip: "top", animation: "Opacity", duration: 1, content: "Export Data" }))))))),
         React.createElement("main", { style: { overflow: "auto", width: "100%" } },
             React.createElement("table", __assign({ className: "table  ".concat(bordered ? 'border' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
                     height: height ? height + "px" : "",
@@ -269,8 +267,7 @@ function Table(_a) {
                 } }, rest),
                 data &&
                     (data === null || data === void 0 ? void 0 : data.titles) &&
-                    React.createElement(Head_1.default, null, data.titles.map(function (mdoc) { return (React.createElement("th", { key: mdoc },
-                        React.createElement(Text_1.default, { text: mdoc, weight: 500, funcss: 'text-secondary' }))); })),
+                    React.createElement(Head_1.default, null, data.titles.map(function (mdoc, index) { return (React.createElement("th", { key: mdoc, className: "text-secondary \n                ".concat(index === 0 ? "first_table_data" : "", " \n                ").concat(index === (data.titles.length - 1) ? "last_table_data" : "", " \n                ") }, mdoc)); })),
                 head && React.createElement(Head_1.default, null, head),
                 body && React.createElement(Body_1.default, null, body),
                 data &&
@@ -278,7 +275,7 @@ function Table(_a) {
                         var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
                         var shouldSlice = !searchQuery || results.length > 10;
                         return (shouldSlice ? results.slice(startIndex, endIndex) : results)
-                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
+                            .map(function (mdoc, index) { return (React.createElement("tr", { className: "animated slide-up  ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
                             data.fields.map(function (fdoc, findex) {
                                 var _a;
                                 return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));

package/ui/text/Text.js

@@ -28,59 +28,99 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 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.variant, variant = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'base' : _c, margin = _a.margin, padding = _a.padding, 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", "margin", "padding"]);
-    // Use the component config hook
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
+    // Only use component config if variant is provided and not empty
+    var shouldUseConfig = variant !== undefined && variant !== '';
+    // Use the component config hook only when needed
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', shouldUseConfig ? variant : undefined).mergeWithLocal;
+    // Create local props object
+    var localProps = __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, margin: margin, padding: padding }, rest);
     // 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, margin: margin, padding: padding }, rest)).props;
+    var mergedProps = (shouldUseConfig
+        ? mergeWithLocal(localProps)
+        : { props: localProps }).props;
+    // Extract final values - local props take precedence, handle empty strings properly
+    var final = {
+        bg: bg !== undefined ? bg : mergedProps.bg,
+        color: color !== undefined ? color : mergedProps.color,
+        funcss: funcss !== undefined ? funcss : mergedProps.funcss,
+        emp: emp !== undefined ? emp : mergedProps.emp,
+        bold: bold !== undefined ? bold : mergedProps.bold,
+        block: block !== undefined ? block : mergedProps.block,
+        body: body !== undefined ? body : mergedProps.body,
+        article: article !== undefined ? article : mergedProps.article,
+        light: light !== undefined ? light : mergedProps.light,
+        lighter: lighter !== undefined ? lighter : mergedProps.lighter,
+        italic: italic !== undefined ? italic : mergedProps.italic,
+        weight: weight !== undefined ? weight : mergedProps.weight,
+        underline: underline !== undefined ? underline : mergedProps.underline,
+        align: align !== undefined ? align : mergedProps.align,
+        lineHeight: lineHeight !== undefined ? lineHeight : mergedProps.lineHeight,
+        letterSpacing: letterSpacing !== undefined ? letterSpacing : mergedProps.letterSpacing,
+        uppercase: uppercase !== undefined ? uppercase : mergedProps.uppercase,
+        lowercase: lowercase !== undefined ? lowercase : mergedProps.lowercase,
+        capitalize: capitalize !== undefined ? capitalize : mergedProps.capitalize,
+        textDecoration: textDecoration !== undefined ? textDecoration : mergedProps.textDecoration,
+        textTransform: textTransform !== undefined ? textTransform : mergedProps.textTransform,
+        whiteSpace: whiteSpace !== undefined ? whiteSpace : mergedProps.whiteSpace,
+        wordBreak: wordBreak !== undefined ? wordBreak : mergedProps.wordBreak,
+        fontFamily: fontFamily !== undefined ? fontFamily : mergedProps.fontFamily,
+        truncate: truncate !== undefined ? truncate : mergedProps.truncate,
+        textShadow: textShadow !== undefined ? textShadow : mergedProps.textShadow,
+        textAlign: textAlign !== undefined ? textAlign : mergedProps.textAlign,
+        monospace: monospace !== undefined ? monospace : mergedProps.monospace,
+        quote: quote !== undefined ? quote : mergedProps.quote,
+        opacity: opacity !== undefined ? opacity : mergedProps.opacity,
+        size: size !== undefined ? size : mergedProps.size,
+        margin: margin !== undefined ? margin : mergedProps.margin,
+        padding: padding !== undefined ? padding : mergedProps.padding,
+    };
     // If margin is provided, force block display
-    var shouldBeBlock = mergedProps.block || !!mergedProps.margin;
+    var shouldBeBlock = final.block || !!final.margin;
     var Tag = shouldBeBlock ? '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: shouldBeBlock ? '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, margin: mergedProps.margin, padding: mergedProps.padding }, customStyles), (mergedProps.truncate
+    var sizeClass = "".concat(final.size === 'h1' ? "h1" :
+        final.size === 'h2' ? "h2" :
+            final.size === 'h3' ? "h3" :
+                final.size === 'h4' ? "h4" :
+                    final.size === 'h5' ? "h5" :
+                        final.size === 'h6' ? "h6" :
+                            "text-".concat(final.size));
+    var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), (final.truncate
         ? {
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: mergedProps.truncate,
+            WebkitLineClamp: final.truncate,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
         }
         : {}));
     var classNames = [
-        mergedProps.funcss || '',
+        final.funcss || '',
         sizeClass,
-        mergedProps.color ? " text-".concat(mergedProps.color, " ") : '',
-        mergedProps.align ? " text-".concat(mergedProps.align, " ") : '',
-        mergedProps.monospace ? 'monospace' : '',
-        mergedProps.bg || '',
+        final.color ? " text-".concat(final.color, " ") : '',
+        final.align ? " text-".concat(final.align, " ") : '',
+        final.monospace ? 'monospace' : '',
+        final.bg || '',
         hoverText ? "hover-text-".concat(hoverText) : '',
         hoverBg ? "hover-".concat(hoverBg) : '',
-        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 : '',
+        final.light ? 'lightText' : final.lighter ? 'lighterText' : '',
+        final.italic ? 'italicText' : '',
+        final.underline ? 'underlineText' : '',
+        final.body ? 'body' : '',
+        final.article ? 'article' : '',
+        final.emp ? 'emp' : '',
+        final.bold ? 'bold' : '',
+        final.uppercase ? 'uppercase' : '',
+        final.lowercase ? 'lowercase' : '',
+        final.capitalize ? 'capitalize' : '',
+        final.opacity ? 'opacity-' + final.opacity : '',
     ]
         .filter(Boolean)
         .join(' ');
-    return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, mergedProps),
-        mergedProps.quote && (react_1.default.createElement("div", null,
+    return (react_1.default.createElement(Tag, __assign({ id: id, className: classNames, style: mergedStyles }, rest),
+        final.quote && (react_1.default.createElement("div", null,
             react_1.default.createElement(pi_1.PiQuotesLight, null))),
         children,
         text));

package/ui/theme/theme.d.ts

@@ -4,6 +4,10 @@ export type ThemeName = 'light' | 'dark' | 'dark-blue' | 'light-gray' | 'pastel-
 interface ThemeConfig {
     [key: string]: any;
 }
+interface Variable {
+    name: string;
+    value: any;
+}
 interface ProjectData {
     theme_config?: {
         colors?: Record<string, string>;
@@ -12,6 +16,7 @@ interface ProjectData {
     };
     components?: Record<string, any>;
     default_variation?: ThemeVariant;
+    variables?: Variable[];
     name?: string;
     project_id?: string;
     version?: number;
@@ -38,6 +43,11 @@ export declare const useVariant: () => {
     variant: ThemeVariant;
     setVariant: React.Dispatch<React.SetStateAction<ThemeVariant>>;
 };
+export declare const getVariable: (name: string) => {
+    name: string;
+    value: any;
+} | undefined;
+export declare const getAllVariables: () => Variable[];
 declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;
 export declare const useThemeValue: (key: string) => string | undefined;
@@ -49,3 +59,5 @@ export declare const useProjectData: () => ProjectData | null;
 export declare const useColor: (colorName: string) => string | undefined;
 export declare const useTypographyValue: (property: string) => string | undefined;
 export declare const useComponentVariant: (componentName: string, variantName?: string) => any;
+export declare const useVariables: () => Variable[];
+export declare const useVariable: (name: string) => any;

package/ui/theme/theme.js

@@ -70,7 +70,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
+exports.useVariable = exports.useVariables = exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.getAllVariables = exports.getVariable = exports.useVariant = exports.useTheme = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
@@ -97,53 +97,64 @@ var useVariant = function () {
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
-/*                          CDN THEME LOADER                                  */
+/*                          LOCAL FILE MANAGEMENT                             */
 /* -------------------------------------------------------------------------- */
-var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
-    var publicResponse, data, error_1, publicUrl, response, data, error_2;
+var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+    var response, data, error_1;
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
                 _a.trys.push([0, 4, , 5]);
-                return [4 /*yield*/, fetch("/funui.json", {
+                return [4 /*yield*/, fetch('/funui.json', {
                         cache: 'no-cache',
                     })];
             case 1:
-                publicResponse = _a.sent();
-                if (!publicResponse.ok) return [3 /*break*/, 3];
-                return [4 /*yield*/, publicResponse.json()];
+                response = _a.sent();
+                if (!response.ok) return [3 /*break*/, 3];
+                return [4 /*yield*/, response.json()];
             case 2:
                 data = _a.sent();
-                console.log('✅ Loaded theme from public folder');
+                console.log('✅ Loaded theme from local file');
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
                 error_1 = _a.sent();
-                console.log('No theme in public folder, checking Firebase Storage...');
+                console.log('No local theme file found');
                 return [3 /*break*/, 5];
-            case 5:
-                _a.trys.push([5, 10, , 11]);
+            case 5: return [2 /*return*/, null];
+        }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
+/*                          CDN THEME LOADER                                  */
+/* -------------------------------------------------------------------------- */
+var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var publicUrl, response, data, error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 5, , 6]);
                 publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
                 return [4 /*yield*/, fetch(publicUrl, {
                         cache: 'no-cache',
                     })];
-            case 6:
+            case 1:
                 response = _a.sent();
-                if (!response.ok) return [3 /*break*/, 8];
+                if (!response.ok) return [3 /*break*/, 3];
                 return [4 /*yield*/, response.json()];
-            case 7:
+            case 2:
                 data = _a.sent();
                 console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
-            case 8:
+            case 3:
                 console.error('Firebase Storage fetch failed:', response.status, response.statusText);
-                _a.label = 9;
-            case 9: return [3 /*break*/, 11];
-            case 10:
+                _a.label = 4;
+            case 4: return [3 /*break*/, 6];
+            case 5:
                 error_2 = _a.sent();
                 console.error('Error loading from Firebase Storage:', error_2);
-                return [3 /*break*/, 11];
-            case 11: return [2 /*return*/, null];
+                return [3 /*break*/, 6];
+            case 6: return [2 /*return*/, null];
         }
     });
 }); };
@@ -155,7 +166,6 @@ var applyTypographyVariables = function (typography, root) {
         return;
     Object.entries(typography).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        // Convert flat keys to CSS custom property format
         var cssVarName = "--".concat(key.replace(/_/g, '-'));
         root.style.setProperty(cssVarName, value);
     });
@@ -165,7 +175,6 @@ var applyColorVariables = function (colors, root) {
         return;
     Object.entries(colors).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        // Convert flat keys to CSS custom property format
         var cssVarName = "--".concat(key.replace(/_/g, '-'));
         root.style.setProperty(cssVarName, value);
     });
@@ -173,15 +182,12 @@ var applyColorVariables = function (colors, root) {
 var applyThemeConfig = function (themeConfig, root) {
     if (!themeConfig)
         return;
-    // Apply colors if they exist
     if (themeConfig.colors) {
         applyColorVariables(themeConfig.colors, root);
     }
-    // Apply typography if it exists
     if (themeConfig.typography) {
         applyTypographyVariables(themeConfig.typography, root);
     }
-    // Apply any other theme config properties
     Object.entries(themeConfig).forEach(function (_a) {
         var key = _a[0], value = _a[1];
         if (key !== 'colors' && key !== 'typography' && typeof value === 'string') {
@@ -191,6 +197,23 @@ var applyThemeConfig = function (themeConfig, root) {
     });
 };
 /* -------------------------------------------------------------------------- */
+/*                          VARIABLES HELPER                                  */
+/* -------------------------------------------------------------------------- */
+var cachedProjectData = null;
+var getVariable = function (name) {
+    if (!(cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables)) {
+        console.warn('No variables available. Make sure ThemeProvider is mounted.');
+        return undefined;
+    }
+    var variable = cachedProjectData.variables.find(function (v) { return v.name === name; });
+    return variable;
+};
+exports.getVariable = getVariable;
+var getAllVariables = function () {
+    return (cachedProjectData === null || cachedProjectData === void 0 ? void 0 : cachedProjectData.variables) || [];
+};
+exports.getAllVariables = getAllVariables;
+/* -------------------------------------------------------------------------- */
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
@@ -223,7 +246,7 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync ----------------------- */
+    /* ---------------------- CDN Theme Sync with Local File ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
             setIsLoading(false);
@@ -232,51 +255,68 @@ var ThemeProvider = function (_a) {
         }
         var root = document.documentElement;
         var pollTimer;
-        var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var cdnTheme, newVersion, err_1;
+        var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var localTheme, localVersion, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 2, 3, 4]);
-                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
+                        _a.trys.push([0, 3, 4, 5]);
+                        return [4 /*yield*/, loadLocalTheme()];
                     case 1:
+                        localTheme = _a.sent();
+                        localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
+                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
+                    case 2:
                         cdnTheme = _a.sent();
+                        cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
-                            newVersion = cdnTheme.version || Date.now();
-                            if (!currentVersion || newVersion !== currentVersion) {
-                                // Apply theme data to CSS variables and state
+                            // Compare versions and use the newer one
+                            if (cdnVersion !== localVersion) {
+                                console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
+                                console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
+                            }
+                            // Always use CDN theme if available
+                            if (!currentVersion || cdnVersion !== currentVersion) {
                                 applyThemeData(cdnTheme, root);
-                                setCurrentVersion(newVersion);
-                                console.log('✅ Theme updated from CDN');
+                                setCurrentVersion(cdnVersion);
+                                console.log('✅ Theme loaded from CDN');
                             }
                             else {
-                                console.log('✓ Theme unchanged');
+                                console.log('✓ Theme up to date');
                             }
                             setError(null);
                         }
+                        else if (localTheme) {
+                            // CDN not available but we have local
+                            console.log('⚠️ Using local theme (CDN unavailable)');
+                            applyThemeData(localTheme, root);
+                            setCurrentVersion(localVersion);
+                            setError(null);
+                        }
                         else {
-                            console.warn('⚠️ No theme found in CDN');
-                            setError('Theme not found in CDN');
+                            // No theme available anywhere
+                            console.warn('⚠️ No theme found');
+                            setError('Theme not found');
                         }
-                        return [3 /*break*/, 4];
-                    case 2:
-                        err_1 = _a.sent();
-                        console.error('Error loading theme from CDN:', err_1);
-                        setError('Failed to load theme from CDN');
-                        return [3 /*break*/, 4];
+                        return [3 /*break*/, 5];
                     case 3:
+                        err_1 = _a.sent();
+                        console.error('Error syncing theme:', err_1);
+                        setError('Failed to sync theme');
+                        return [3 /*break*/, 5];
+                    case 4:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 4: return [2 /*return*/];
+                    case 5: return [2 /*return*/];
                 }
             });
         }); };
-        // Initial load
-        fetchFromCDN();
+        // Initial sync
+        syncTheme();
         // Poll for updates every 5 minutes
         pollTimer = setInterval(function () {
-            fetchFromCDN();
+            syncTheme();
         }, 5 * 60 * 1000);
         return function () {
             clearInterval(pollTimer);
@@ -289,6 +329,8 @@ var ThemeProvider = function (_a) {
         setVariant(newVariant);
         setThemeConfig(themeConfig);
         setProjectData(data);
+        // Cache for variable access
+        cachedProjectData = data;
         // Apply all theme config to CSS variables
         applyThemeConfig(themeConfig, root);
     };
@@ -346,22 +388,32 @@ var useProjectData = function () {
     return projectData;
 };
 exports.useProjectData = useProjectData;
-// Get specific color value
 var useColor = function (colorName) {
     var colors = (0, exports.useColors)();
     return colors[colorName];
 };
 exports.useColor = useColor;
-// Get specific typography value
 var useTypographyValue = function (property) {
     var typography = (0, exports.useTypography)();
     return typography[property];
 };
 exports.useTypographyValue = useTypographyValue;
-// Get component variant
 var useComponentVariant = function (componentName, variantName) {
     if (variantName === void 0) { variantName = 'default'; }
     var componentConfig = (0, exports.useComponentConfig)(componentName);
     return componentConfig[variantName] || {};
 };
 exports.useComponentVariant = useComponentVariant;
+// Hook to access variables
+var useVariables = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.variables) || [];
+};
+exports.useVariables = useVariables;
+// Hook to get a specific variable
+var useVariable = function (name) {
+    var variables = (0, exports.useVariables)();
+    var variable = variables.find(function (v) { return v.name === name; });
+    return variable === null || variable === void 0 ? void 0 : variable.value;
+};
+exports.useVariable = useVariable;