funuicss 3.6.19 → 3.7.0

package/ui/chart/Line.js

@@ -11,12 +11,56 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var recharts_1 = require("recharts");
+var componentUtils_1 = require("../../utils/componentUtils");
+// Parse string to object utility
+var parseIfString = function (value, fallback) {
+    if (typeof value === 'string') {
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.error('Failed to parse JSON string:', error);
+            return fallback;
+        }
+    }
+    return value;
+};
 // CSS var resolver
 var getCssVar = function (varName) {
     var _a;
@@ -32,34 +76,191 @@ var resolveStrokeColor = function (color) {
         return color;
     return getCssVar(color) || color;
 };
-// Tooltip
+// Default Tooltip
 var CustomTooltip = function (_a) {
-    var active = _a.active, payload = _a.payload, label = _a.label;
+    var active = _a.active, payload = _a.payload, label = _a.label, formatter = _a.formatter;
     if (active && payload && payload.length) {
-        return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
-            react_1.default.createElement("div", { className: "text-bold" }, label),
-            payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: { lineHeight: 1 } },
-                entry.name,
-                ": ",
-                react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
+        return (react_1.default.createElement("div", { className: "card raised round-edge p-2 text-sm", style: {
+                maxWidth: '300px'
+            } },
+            react_1.default.createElement("div", { className: "text-bold mb-1" }, label),
+            payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: {
+                    lineHeight: 1.4,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px'
+                } },
+                react_1.default.createElement("div", { style: {
+                        width: '12px',
+                        height: '12px',
+                        backgroundColor: entry.color,
+                        borderRadius: '2px'
+                    } }),
+                react_1.default.createElement("span", { style: { fontWeight: 500 } },
+                    entry.name,
+                    ":"),
+                react_1.default.createElement("span", { style: { fontWeight: 600, color: 'var(--text-color, #1a202c)' } }, formatter ? formatter(entry.value, entry.name, entry) : entry.value))); })));
     }
     return null;
 };
 var Lines = function (_a) {
-    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval;
-    var gradientId = id || 'colorUv';
-    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
-        react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
+    var _b;
+    var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _c = _a.showGrid, showGrid = _c === void 0 ? true : _c, _d = _a.horizontalLines, horizontalLines = _d === void 0 ? false : _d, _e = _a.showLegend, showLegend = _e === void 0 ? true : _e, _f = _a.showXAxis, showXAxis = _f === void 0 ? true : _f, _g = _a.showYAxis, showYAxis = _g === void 0 ? false : _g, _h = _a.showTooltip, showTooltip = _h === void 0 ? true : _h, funcss = _a.funcss, _j = _a.curveType, curveType = _j === void 0 ? 'monotone' : _j, _k = _a.height, height = _k === void 0 ? "100%" : _k, _l = _a.width, width = _l === void 0 ? '100%' : _l, _m = _a.margin, margin = _m === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _m, _o = _a.xAxisProps, xAxisProps = _o === void 0 ? {} : _o, _p = _a.yAxisProps, yAxisProps = _p === void 0 ? {} : _p, tooltipFormatter = _a.tooltipFormatter, _q = _a.legendProps, legendProps = _q === void 0 ? {} : _q, _r = _a.tooltipProps, tooltipProps = _r === void 0 ? {} : _r, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval, _s = _a.variant, variant = _s === void 0 ? '' : _s, xAxisLabel = _a.xAxisLabel, yAxisLabel = _a.yAxisLabel, _t = _a.tickLine, tickLine = _t === void 0 ? true : _t, _u = _a.axisLine, axisLine = _u === void 0 ? true : _u, gridStroke = _a.gridStroke, _v = _a.gridStrokeDasharray, gridStrokeDasharray = _v === void 0 ? "3 3" : _v, customTooltip = _a.customTooltip, _w = _a.animation, animation = _w === void 0 ? true : _w, _x = _a.animationDuration, animationDuration = _x === void 0 ? 500 : _x, _y = _a.isAnimationActive, isAnimationActive = _y === void 0 ? true : _y, syncId = _a.syncId, chartBackground = _a.chartBackground, borderRadius = _a.borderRadius, padding = _a.padding, _z = _a.shadow, shadow = _z === void 0 ? false : _z, aspect = _a.aspect, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
+    // Use component configuration with variant support
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('AreaChart', variant).mergeWithLocal;
+    // Create local props object
+    var localProps = {
+        data: data,
+        id: id,
+        series: series,
+        fromColor: fromColor,
+        toColor: toColor,
+        dy: dy,
+        showGrid: showGrid,
+        horizontalLines: horizontalLines,
+        showLegend: showLegend,
+        showXAxis: showXAxis,
+        showYAxis: showYAxis,
+        showTooltip: showTooltip,
+        funcss: funcss,
+        curveType: curveType,
+        height: height,
+        width: width,
+        margin: margin,
+        xAxisProps: xAxisProps,
+        yAxisProps: yAxisProps,
+        tooltipFormatter: tooltipFormatter,
+        legendProps: legendProps,
+        tooltipProps: tooltipProps,
+        rotateLabel: rotateLabel,
+        xLabelSize: xLabelSize,
+        yLabelSize: yLabelSize,
+        xInterval: xInterval,
+        yInterval: yInterval,
+        xAxisLabel: xAxisLabel,
+        yAxisLabel: yAxisLabel,
+        tickLine: tickLine,
+        axisLine: axisLine,
+        gridStroke: gridStroke,
+        gridStrokeDasharray: gridStrokeDasharray,
+        customTooltip: customTooltip,
+        animation: animation,
+        animationDuration: animationDuration,
+        isAnimationActive: isAnimationActive,
+        syncId: syncId,
+        chartBackground: chartBackground,
+        borderRadius: borderRadius,
+        padding: padding,
+        shadow: shadow,
+        aspect: aspect,
+        minHeight: minHeight,
+        maxHeight: maxHeight,
+        minWidth: minWidth,
+        maxWidth: maxWidth
+    };
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Parse data and series if they're strings
+    var parsedData = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.data, []); }, [mergedProps.data]);
+    var parsedSeries = (0, react_1.useMemo)(function () { return parseIfString(mergedProps.series, []); }, [mergedProps.series]);
+    // Extract final values
+    var final = (0, react_1.useMemo)(function () { return ({
+        data: parsedData,
+        id: mergedProps.id,
+        series: parsedSeries,
+        fromColor: mergedProps.fromColor,
+        toColor: mergedProps.toColor,
+        dy: mergedProps.dy,
+        showGrid: mergedProps.showGrid,
+        horizontalLines: mergedProps.horizontalLines,
+        showLegend: mergedProps.showLegend,
+        showXAxis: mergedProps.showXAxis,
+        showYAxis: mergedProps.showYAxis,
+        showTooltip: mergedProps.showTooltip,
+        funcss: mergedProps.funcss,
+        curveType: mergedProps.curveType,
+        height: mergedProps.height,
+        width: mergedProps.width,
+        margin: mergedProps.margin,
+        xAxisProps: mergedProps.xAxisProps,
+        yAxisProps: mergedProps.yAxisProps,
+        tooltipFormatter: mergedProps.tooltipFormatter,
+        legendProps: mergedProps.legendProps,
+        tooltipProps: mergedProps.tooltipProps,
+        rotateLabel: mergedProps.rotateLabel,
+        xLabelSize: mergedProps.xLabelSize,
+        yLabelSize: mergedProps.yLabelSize,
+        xInterval: mergedProps.xInterval,
+        yInterval: mergedProps.yInterval,
+        xAxisLabel: mergedProps.xAxisLabel,
+        yAxisLabel: mergedProps.yAxisLabel,
+        tickLine: mergedProps.tickLine,
+        axisLine: mergedProps.axisLine,
+        gridStroke: mergedProps.gridStroke,
+        gridStrokeDasharray: mergedProps.gridStrokeDasharray,
+        customTooltip: mergedProps.customTooltip,
+        animation: mergedProps.animation,
+        animationDuration: mergedProps.animationDuration,
+        isAnimationActive: mergedProps.isAnimationActive,
+        syncId: mergedProps.syncId,
+        chartBackground: mergedProps.chartBackground,
+        borderRadius: mergedProps.borderRadius,
+        padding: mergedProps.padding,
+        shadow: mergedProps.shadow,
+        aspect: mergedProps.aspect,
+        minHeight: mergedProps.minHeight,
+        maxHeight: mergedProps.maxHeight,
+        minWidth: mergedProps.minWidth,
+        maxWidth: mergedProps.maxWidth
+    }); }, [parsedData, parsedSeries, mergedProps]);
+    var baseGradientId = final.id || 'areaChartGradient';
+    var TooltipComponent = final.customTooltip || CustomTooltip;
+    // Generate per-series gradients
+    var gradients = (0, react_1.useMemo)(function () {
+        return final.series.map(function (s, index) {
+            if (!s.fromColor && !s.toColor)
+                return null;
+            var gradientId = "".concat(baseGradientId, "-").concat(index);
+            var startColor = resolveStrokeColor(s.fromColor || s.color || final.fromColor);
+            var endColor = resolveStrokeColor(s.toColor || final.toColor);
+            return (react_1.default.createElement("linearGradient", { key: gradientId, id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
+                react_1.default.createElement("stop", { offset: "5%", stopColor: startColor, stopOpacity: 0.8 }),
+                react_1.default.createElement("stop", { offset: "95%", stopColor: endColor, stopOpacity: 0 })));
+        });
+    }, [final.series, baseGradientId, final.fromColor, final.toColor]);
+    // Default gradient for series without custom gradients
+    var defaultGradient = (0, react_1.useMemo)(function () { return (react_1.default.createElement("linearGradient", { id: baseGradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
+        react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(final.fromColor || 'primary'), stopOpacity: 0.8 }),
+        react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(final.toColor || 'primary200'), stopOpacity: 0 }))); }, [baseGradientId, final.fromColor, final.toColor]);
+    var containerStyle = (0, react_1.useMemo)(function () { return ({
+        height: final.height,
+        width: final.width,
+        minHeight: final.minHeight,
+        maxHeight: final.maxHeight,
+        minWidth: final.minWidth,
+        maxWidth: final.maxWidth,
+        background: final.chartBackground,
+        borderRadius: final.borderRadius,
+        padding: final.padding,
+        boxShadow: final.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1)' : undefined,
+    }); }, [final]);
+    return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle },
+        react_1.default.createElement(recharts_1.AreaChart, { data: final.data, margin: final.margin, syncId: final.syncId },
             react_1.default.createElement("defs", null,
-                react_1.default.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
-                    react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
-                    react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
-            showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
-            !showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
-            showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: xInterval || 0, padding: { left: 10, right: 10 }, fontSize: xLabelSize || "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: rotateLabel || -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
-            showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval || 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "0.8rem" }, yAxisProps))),
-            react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
-            showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
-            series.map(function (s, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#".concat(gradientId, ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
+                defaultGradient,
+                gradients),
+            final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
+            !final.showGrid && final.horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, horizontal: true, vertical: false, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
+            final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_b = final.dy) !== null && _b !== void 0 ? _b : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
+            final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: final.yInterval, strokeWidth: final.horizontalLines ? 0 : 0.2, fontSize: final.yLabelSize || "0.8rem", tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? { value: final.yAxisLabel, angle: -90, position: 'insideLeft' } : undefined }, final.yAxisProps))),
+            final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
+            final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
+            final.series.map(function (s, index) {
+                var hasCustomGradient = s.fromColor || s.toColor;
+                var gradientId = hasCustomGradient
+                    ? "".concat(baseGradientId, "-").concat(index)
+                    : baseGradientId;
+                return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || index, type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
+            }))));
 };
 exports.default = Lines;

package/ui/sidebar/SideBar.js

@@ -129,7 +129,7 @@ function SideBar(_a) {
                                         window.location.href = link.uri;
                                     }
                                 }, key: link.uri },
-                                react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2  sidebar-link text-left  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
+                                react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2  sidebar-link text-left  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter text-primary border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter text-primary" : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),

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;