@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/charts/FunnelChart/FunnelChart.js

@@ -72,7 +72,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
     const containerWidth = typeof width === "number" ? `${width}px` : width;
     // Return empty state if no valid data
     if (stages.length === 0) {
-        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm", children: "No data available" }) }));
+        return (jsx("div", { className: cn(theme.baseStyle, className), style: { width: containerWidth, height: containerHeight }, role: "img", "aria-label": "Empty funnel chart - no data available", ...props, children: jsx("div", { className: "flex items-center justify-center h-full text-[var(--color-text-muted)] text-base", children: "No data available" }) }));
     }
     const viewBoxWidth = 150;
     const viewBoxHeight = 100;
@@ -356,9 +356,9 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: cn("text-sm font-semibold whitespace-nowrap", labelPosition === "inside"
+                            : {}), children: [jsx("div", { className: cn("text-base font-semibold whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white drop-shadow-md"
-                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-xs whitespace-nowrap", labelPosition === "inside"
+                                    : "text-[var(--color-text-primary)]"), children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: cn("text-sm whitespace-nowrap", labelPosition === "inside"
                                     ? "text-white/90 drop-shadow-md"
                                     : "text-[var(--color-text-secondary)]"), children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "vertical" &&
@@ -376,7 +376,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: [jsx("div", { className: "text-sm font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-xs text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
+                            : {}), children: [jsx("div", { className: "text-base font-semibold text-white drop-shadow-md whitespace-nowrap text-center", children: stage.name }), (showValues || showPercentages) && (jsxs("div", { className: "text-sm text-white/90 drop-shadow-md whitespace-nowrap text-center", children: [showValues && formatDisplayValue(stage.value), showValues && showPercentages && " • ", showPercentages && `${stage.percentage.toFixed(0)}%`] }))] }, `label-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -394,7 +394,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "vertical" &&
                 showDropoff &&
                 stages.map((stage, index) => {
@@ -411,7 +411,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs("span", { className: "text-xs text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
+                            : {}), children: jsxs("span", { className: "text-sm text-[var(--color-danger)] font-medium", children: ["-", stage.dropoff.toFixed(1), "%"] }) }, `dropoff-${stage.name}`));
                 }), orientation === "horizontal" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -430,7 +430,7 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: ["\u2193 ", stage.conversionRate.toFixed(1), "%"] }) }, `conversion-${stage.name}`));
                 }), orientation === "vertical" &&
                 showConversionRate &&
                 stages.map((stage, index) => {
@@ -448,14 +448,14 @@ const FunnelChart = ({ data, height = 400, width = 600, showPercentages = true,
                                 animate: "visible",
                                 custom: index,
                             }
-                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "ghost", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
+                            : {}), children: jsxs(Badge, { color: isGoodConversion ? "success" : "warning", variant: "soft", size: "sm", pill: true, children: [stage.conversionRate.toFixed(0), "%"] }) }, `conversion-${stage.name}`));
                 }), showSummary && summaryPosition !== "none" && stages.length > 1 && (jsxs(motion.div, { className: cn("absolute bg-[var(--color-background)] rounded-lg shadow-sm border border-[var(--color-border)] px-3 py-2 pointer-events-none", getSummaryPositionClasses(summaryPosition)), ...(animate
                     ? {
                         variants: summaryVariants,
                         initial: "hidden",
                         animate: "visible",
                     }
-                    : {}), children: [jsx("div", { className: "text-xs text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-lg font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
+                    : {}), children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)] mb-1", children: "Overall Conversion" }), jsxs("div", { className: "text-xl font-bold text-[var(--color-text-primary)]", children: [overallConversion, "%"] }), jsxs("div", { className: "text-sm text-[var(--color-text-muted)] mt-1", children: [formatDisplayValue(stages[0].value), " \u2192", " ", formatDisplayValue(stages[stages.length - 1].value)] })] })), jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "area" })] }));
 };
 FunnelChart.displayName = "FunnelChart";
 

package/dist/components/charts/Heatmap/Heatmap.theme.js

@@ -10,7 +10,7 @@ const heatmapTheme = {
     // Base cell styles (individual cells add opacity via inline styles)
     cellBaseStyle: "relative w-full h-full cursor-pointer border border-transparent transition-all duration-500 animate-[flicker_0.6s_ease-out_forwards]",
     // Axis labels using CSS variables for dark mode support
-    axisLabelStyle: "text-xs text-[var(--color-text-secondary)] font-medium select-none",
+    axisLabelStyle: "text-sm text-[var(--color-text-secondary)] font-medium select-none",
     // Legend using correct CSS variables
     legendStyle: "w-full space-y-1.5 mt-3",
 };

package/dist/components/charts/Heatmap/HeatmapCell.js

@@ -88,7 +88,7 @@ className, onClick, onHover, onMouseMove, onLeave, children, }) => {
                 e.preventDefault();
                 onClick(data);
             }
-        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-xs font-medium text-gray-700 dark:text-gray-300", children: children })) }));
+        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
 };
 const HeatmapCell = React__default.memo(HeatmapCellInner);
 

package/dist/components/charts/Heatmap/HeatmapLegend.js

@@ -11,7 +11,7 @@ minValue = 0, maxValue = 100, labels = {
     const gradientStyle = {
         background: `linear-gradient(to right, color-mix(in srgb, ${color} 20%, transparent), ${color})`
     };
-    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
+    return (jsxs("div", { className: cn(heatmapTheme.legendStyle, className), children: [jsx("div", { className: "w-full h-1.5 rounded-full", style: gradientStyle }), jsxs("div", { className: "flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]", children: [jsx("div", { children: labels.min }), jsx("div", { children: labels.max })] })] }));
 };
 
 export { HeatmapLegend };

package/dist/components/charts/RadarChart/RadarChart.theme.js

@@ -13,11 +13,11 @@ const radarChartTheme = {
     // Axis spoke stroke color (gray-300 equivalent)
     axisColor: "#d1d5db",
     // Axis label classes (applied to <text> elements via className)
-    labelStyle: "text-xs fill-[#6b7280] select-none",
+    labelStyle: "text-sm fill-[#6b7280] select-none",
     // Legend container
     legendStyle: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2",
     // Individual legend item
-    legendItemStyle: "flex items-center gap-2 text-sm",
+    legendItemStyle: "flex items-center gap-2 text-base",
     // Colored dot in legend
     legendDotStyle: "w-2.5 h-2.5 rounded-full shrink-0",
     // Legend label text

package/dist/components/charts/ScatterPlot/ScatterPlot.js

@@ -201,7 +201,7 @@ showGrid = SCATTER_PLOT_DEFAULTS.showGrid, showXAxis = SCATTER_PLOT_DEFAULTS.sho
                                 }
                                 handleMouseInteraction();
                             }, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }, index));
-                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-xs fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
+                    }), jsx(XAxis, { show: showXAxis, data: xAxisData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: innerWidth / (xAxisData.length - 1), categoryGap: 0, alignWithEdge: true, className: cn(axisClassName) }), xLabel && showXAxis && (jsx("text", { x: margin.left + innerWidth / 2, y: dimensions.height - 5, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", children: xLabel })), yLabel && showYAxis && (jsx("text", { x: 15, y: margin.top + innerHeight / 2, textAnchor: "middle", className: "text-sm fill-[var(--color-text-secondary)]", transform: `rotate(-90 15 ${margin.top + innerHeight / 2})`, children: yLabel }))] }), categories.length > 0 && (jsx("div", { className: theme.legendContainerStyle, children: categories.map((cat, index) => (jsxs("div", { className: theme.legendItemStyle, children: [jsx("div", { className: theme.legendDotStyle, style: { backgroundColor: getCategoryColor(chartColors, index) } }), jsx("span", { className: theme.legendLabelStyle, children: cat })] }, cat))) })), showTooltip && (jsx(ChartTooltip, { active: !!tooltipData, position: tooltipData ? { x: tooltipData.x, y: tooltipData.y } : { x: 0, y: 0 }, tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, chartType: "scatter" }))] }));
 };
 ScatterPlot.displayName = 'ScatterPlot';
 

package/dist/components/charts/ScatterPlot/ScatterPlot.theme.js

@@ -4,7 +4,7 @@
 const scatterPlotTheme = {
     containerStyle: 'relative inline-flex flex-col items-center w-full',
     svgStyle: 'overflow-visible',
-    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-sm',
+    emptyStateStyle: 'flex items-center justify-center h-full text-[var(--color-text-muted)] text-base',
     // Grid styles
     gridLineStyle: 'stroke-[var(--color-border)]',
     // Axis styles
@@ -17,7 +17,7 @@ const scatterPlotTheme = {
     legendContainerStyle: 'flex flex-wrap gap-3 mt-4 justify-center',
     legendItemStyle: 'flex items-center gap-2',
     legendDotStyle: 'w-3 h-3 rounded-full',
-    legendLabelStyle: 'text-sm text-[var(--color-text-secondary)]',
+    legendLabelStyle: 'text-base text-[var(--color-text-secondary)]',
     // Default category colors using CSS variables
     colors: [
         'var(--color-primary)',

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -65,7 +65,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
     });
     // Early return for invalid data
     if (!isValid) {
-        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-sm font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-sm text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
+        return (jsxs("div", { className: cn("chart-container flex flex-col items-center justify-center p-6 border border-border rounded-lg text-2xl", className), role: "alert", "aria-live": "polite", ...props, children: [jsxs("div", { className: "flex flex-col items-center gap-4 mb-1", children: [jsx(ExclamationTriangleIcon, { className: "size-6 text-[var(--color-danger)]" }), jsx("div", { className: "text-base font-semibold text-[var(--color-text-secondary)]", children: "Invalid Chart Data" })] }), jsx("p", { className: "text-base text-[var(--color-text-secondary)]/70 mb-2", children: ((_a = validation.errors[0]) === null || _a === void 0 ? void 0 : _a.message) ||
                         "Unable to render chart due to data validation errors" })] }));
     }
     // Early return for empty data
@@ -282,7 +282,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                     } }, key));
             }) }, categoryIndex));
     };
-    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-xs text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
+    return (jsx(ChartErrorBoundary, { className: className, showErrorDetails: process.env.NODE_ENV === "development", children: jsxs("div", { ref: containerRef, className: cn("chart-container w-full h-full", className), ...chartAccessibilityProps, onMouseEnter: handleMouseInteraction, onMouseMove: handleMouseInteraction, ...props, children: [descriptionProps && jsx("div", { ...descriptionProps }), showValidationWarnings && hasWarnings && (jsxs("div", { className: "absolute top-2 left-2 right-2 z-10 p-2 bg-[var(--color-warning-50)] border border-[var(--color-warning-200)] rounded text-sm text-[var(--color-warning)] shadow-sm", children: [jsx("strong", { children: "Chart Warnings:" }), jsx("ul", { className: "mt-1", children: validation.warnings.map((warning, index) => (jsxs("li", { children: ["\u2022 ", warning.message] }, index))) })] })), jsxs("svg", { width: "100%", height: "100%", viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: [jsx(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }), jsx(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                                 if (stackOffset === "expand")
                                     return `${value}%`;
                                 if (Math.abs(value) >= 1000)

package/dist/components/charts/shared/ChartErrorBoundary/ChartErrorBoundary.js

@@ -39,7 +39,7 @@ class ChartErrorBoundary extends Component {
                 return this.props.fallback;
             }
             // Default error UI
-            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-sm font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-sm text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-xs text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-xs font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-xs", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-xs bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
+            return (jsxs("div", { className: cn("flex flex-col items-center justify-center p-6 border border-danger-200 bg-danger-50 rounded-lg text-center", this.props.className), role: "alert", "aria-live": "polite", children: [jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsx("svg", { className: "w-5 h-5 text-danger-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }), jsx("h3", { className: "text-base font-medium text-danger-800", children: "Chart Error" })] }), jsx("p", { className: "text-base text-danger-600 mb-3", children: "Unable to render chart due to an error" }), this.props.showErrorDetails && this.state.error && (jsxs("details", { className: "w-full", children: [jsx("summary", { className: "text-sm text-danger-500 cursor-pointer hover:text-danger-700 mb-2", children: "Show error details" }), jsxs("div", { className: "text-left bg-danger-100 p-3 rounded border text-sm font-mono text-danger-800 overflow-auto max-h-32", children: [jsx("div", { className: "font-semibold mb-1", children: "Error:" }), jsx("div", { className: "mb-2", children: this.state.error.message }), ((_a = this.state.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) && (jsxs(Fragment, { children: [jsx("div", { className: "font-semibold mb-1", children: "Component Stack:" }), jsx("pre", { className: "whitespace-pre-wrap text-sm", children: this.state.errorInfo.componentStack })] }))] })] })), jsx("button", { onClick: () => this.setState({ hasError: false, error: undefined, errorInfo: undefined }), className: "mt-3 px-3 py-1 text-sm bg-danger-600 text-white rounded hover:bg-danger-700 transition-colors", children: "Try Again" })] }));
         }
         return this.props.children;
     }

package/dist/components/charts/shared/ChartLegend/ChartLegend.types.d.ts

@@ -1,4 +1,16 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item for chart legend entries
+ */
+export interface ChartLegendPayloadItem {
+    value?: string;
+    type?: string;
+    id?: string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 export interface ChartLegendProps {
     content?: ReactNode;
     wrapperStyle?: React.CSSProperties;
@@ -9,7 +21,7 @@ export interface ChartLegendProps {
     className?: string;
 }
 export interface ChartLegendContentProps {
-    payload?: any[];
+    payload?: ChartLegendPayloadItem[];
     nameKey?: string;
     className?: string;
 }

package/dist/components/charts/shared/ChartLegend/ChartLegendContent.js

@@ -11,7 +11,7 @@ const ChartLegendContent = ({ payload = [], nameKey = 'name', className, ...prop
     return (jsx("div", { className: `flex flex-wrap gap-4 ${className || ''}`, ...props, children: payload.map((entry, index) => {
             const name = entry[nameKey] || entry.dataKey || `Series ${index + 1}`;
             const color = entry.color || '#8884d8';
-            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-sm text-gray-600", children: name })] }, index));
+            return (jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-3 h-3 rounded", style: { backgroundColor: color } }), jsx("span", { className: "text-base text-gray-600", children: String(name) })] }, index));
         }) }));
 };
 

package/dist/components/charts/shared/ChartText/ChartText.js

@@ -11,7 +11,7 @@ const ChartText = ({ children, textAnchor = "start", dominantBaseline = "auto",
     const theme = chartTextTheme;
     // Truncate text if needed
     const truncateText = (text, maxWidth) => {
-        // Rough estimate: 6px per character for text-sm
+        // Rough estimate: 6px per character for text-base
         if (!maxWidth || text.length <= maxWidth / 6) {
             return text;
         }

package/dist/components/charts/shared/ChartText/ChartText.theme.js

@@ -3,7 +3,7 @@
  * Uses fixed Tailwind styling for consistency across charts
  */
 const chartTextTheme = {
-    baseStyle: "transition-all duration-200 text-xs  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
+    baseStyle: "transition-all duration-200 text-sm  text-[var(--color-text-secondary)]/80 fill-[var(--color-text-secondary)]/80 font-medium select-none",
 };
 
 export { chartTextTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.theme.js

@@ -5,14 +5,14 @@
  */
 const chartTooltipTheme = {
     baseStyle: "fixed z-50 text-[var(--color-text-primary)] rounded-[var(--tooltip-radius)] px-3 py-2 shadow-lg pointer-events-none glass-effect",
-    contentStyle: "whitespace-nowrap text-sm",
+    contentStyle: "whitespace-nowrap text-base",
     multiSeriesContainerStyle: "text-left",
-    categoryStyle: "text-xs font-semibold mb-1 text-[var(--color-text-primary)]",
+    categoryStyle: "text-sm font-semibold mb-1 text-[var(--color-text-primary)]",
     seriesContainerStyle: "space-y-0.5",
     seriesRowStyle: "flex items-center justify-between gap-3",
     dotStyle: "size-2 rounded-[calc(var(--radius-base)*0.75)]",
-    labelStyle: "text-xs opacity-90 text-[var(--color-text-secondary)]",
-    valueStyle: "text-xs font-semibold text-[var(--color-text-primary)]",
+    labelStyle: "text-sm opacity-90 text-[var(--color-text-secondary)]",
+    valueStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
 };
 
 export { chartTooltipTheme };

package/dist/components/charts/shared/ChartTooltip/ChartTooltip.types.d.ts

@@ -1,4 +1,15 @@
 import { ReactNode } from 'react';
+/**
+ * Individual payload item from chart data
+ */
+export interface ChartTooltipPayloadItem {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    dataKey?: string;
+    payload?: Record<string, unknown>;
+    [key: string]: unknown;
+}
 /**
  * ChartTooltip theme configuration
  */
@@ -30,7 +41,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
     contentStyle?: React.CSSProperties;
     itemStyle?: React.CSSProperties;
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     className?: string;
     position?: {
@@ -42,7 +53,7 @@ export interface ChartTooltipProps extends Omit<React.HTMLAttributes<HTMLDivElem
 }
 export interface ChartTooltipContentProps {
     active?: boolean;
-    payload?: any[];
+    payload?: ChartTooltipPayloadItem[];
     label?: string | number;
     labelKey?: string;
     nameKey?: string;

package/dist/components/core/Accordion/Accordion.animations.d.ts

@@ -1,8 +1,13 @@
-import { Variants } from 'motion/react';
+import type { Variants } from 'motion/react';
 /**
  * Accordion animation variants for smooth, staggered open/close transitions
  */
 export declare const accordionAnimations: Variants;
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+export declare const createTriggerIconVariants: (rotation: number) => Variants;
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */

package/dist/components/core/Accordion/Accordion.animations.js

@@ -19,6 +19,20 @@ const accordionAnimations = {
         }
     }
 };
+/**
+ * Factory for trigger icon rotation variants.
+ * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
+ */
+const createTriggerIconVariants = (rotation) => ({
+    closed: {
+        rotate: 0,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+    open: {
+        rotate: rotation,
+        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
+    },
+});
 /**
  * Content animation variants for subtle slide-in effect after container expands
  */
@@ -42,4 +56,4 @@ const accordionContentAnimations = {
     }
 };
 
-export { accordionAnimations, accordionContentAnimations };
+export { accordionAnimations, accordionContentAnimations, createTriggerIconVariants };

package/dist/components/core/Accordion/Accordion.d.ts

@@ -7,5 +7,5 @@ export declare const Accordion: {
 } & {
     Item: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Accordion.types").AccordionBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Accordion/Accordion.js

@@ -3,7 +3,7 @@ import { useContext, createContext, useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { accordionTheme } from './Accordion.theme.js';
 import { AccordionTrigger } from './AccordionTrigger.js';
-import { AccordionContent } from './AccordionContent.js';
+import { AccordionBody } from './AccordionBody.js';
 import { AccordionItem } from './AccordionItem.js';
 
 // Create context for the main Accordion component
@@ -50,7 +50,7 @@ AccordionRoot.displayName = "Accordion";
 const Accordion = Object.assign(AccordionRoot, {
     Item: AccordionItem,
     Trigger: AccordionTrigger,
-    Content: AccordionContent,
+    Body: AccordionBody,
 });
 
 export { Accordion, useAccordionContext };

package/dist/components/core/Accordion/Accordion.theme.d.ts

@@ -2,8 +2,8 @@ export interface AccordionTheme {
     baseStyle: string;
     baseStyleStacked: string;
     triggerStyle: string;
-    contentStyle: string;
-    contentInnerStyle: string;
+    bodyStyle: string;
+    bodyInnerStyle: string;
     itemStyle: string;
     itemStyleStacked: string;
 }

package/dist/components/core/Accordion/Accordion.theme.js

@@ -1,18 +1,18 @@
 const accordionTheme = {
     // Base container styles for separated variant (default)
-    baseStyle: "w-full max-w-xl",
+    baseStyle: "w-full",
     // Base container styles for stacked variant (unified card)
-    baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
+    baseStyleStacked: "w-full border border-[var(--color-border)] rounded-[var(--form-radius)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-radius)] bg-white dark:bg-[var(--color-background-secondary)] overflow-hidden mb-2 last-of-type:mb-0",
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center justify-between px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] [&[data-state=open]>svg]:rotate-180 cursor-pointer focus:outline-none transition-all flex justify-between",
-    // Content styles (shared across variants)
-    contentStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[500px] accordion-content overflow-hidden",
-    // Content inner wrapper styles
-    contentInnerStyle: "p-4 pb-2.5 pt-0",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)]",
+    // Body styles (shared across variants)
+    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
+    // Body inner wrapper styles
+    bodyInnerStyle: "p-4 pb-2.5 pt-0",
 };
 
 export { accordionTheme };

package/dist/components/core/Accordion/Accordion.types.d.ts

@@ -53,7 +53,8 @@ export interface AccordionContextValue {
     theme: AccordionThemeOverrides & {
         baseStyle: string;
         triggerStyle: string;
-        contentStyle: string;
+        bodyStyle: string;
+        bodyInnerStyle: string;
     };
 }
 /**
@@ -89,11 +90,33 @@ export interface AccordionItemContextValue {
 export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
     children: React.ReactNode;
     className?: string;
+    /**
+     * Override the default indicator (chevron) icon.
+     * Set to `null` to hide it entirely.
+     */
+    chevron?: React.ReactNode | null;
+    /**
+     * Rotation degrees applied to the chevron icon when open.
+     * Default: 45 (for PlusIcon). Use 180 for a chevron-down, 90 for a right-arrow, 0 for none.
+     */
+    chevronRotation?: number;
+    /**
+     * Position of the chevron icon.
+     * - `"right"` (default): pushed to the far right after children.
+     * - `"left"`: appears before children.
+     * No effect when `chevron` is explicitly provided.
+     * @default "right"
+     */
+    chevronPosition?: "left" | "right";
+    /**
+     * @deprecated Use `chevronRotation` instead.
+     */
+    iconRotation?: number;
 }
 /**
- * Content props
+ * Body props
  */
-export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     className?: string;
 }
@@ -104,7 +127,8 @@ export interface AccordionThemeOverrides {
     baseStyle?: string;
     baseStyleStacked?: string;
     triggerStyle?: string;
-    contentStyle?: string;
+    bodyStyle?: string;
+    bodyInnerStyle?: string;
     itemStyle?: string;
     itemStyleStacked?: string;
 }

package/dist/components/core/Accordion/AccordionBody.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AccordionBodyProps } from "./Accordion.types";
+export declare const AccordionBody: React.ForwardRefExoticComponent<AccordionBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Accordion/{AccordionContent.js → AccordionBody.js}

@@ -6,7 +6,7 @@ import { useAccordionItemContext } from './AccordionItem.js';
 import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { accordionAnimations, accordionContentAnimations } from './Accordion.animations.js';
 
-const AccordionContent = React__default.forwardRef(({ children, className, ...rest }, ref) => {
+const AccordionBody = React__default.forwardRef(({ children, className, ...rest }, ref) => {
     const { theme } = useAccordionContext();
     const { isOpen, contentId, triggerId } = useAccordionItemContext();
     const shouldReduceMotion = useReducedMotion();
@@ -14,8 +14,8 @@ const AccordionContent = React__default.forwardRef(({ children, className, ...re
     const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
     // Filter out conflicting props to avoid type issues
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, onTransitionEnd, onTransitionStart, ...safeProps } = rest;
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.contentStyle, className), "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: "p-4 pt-0", variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
+    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { ref: ref, id: contentId, role: "region", "aria-labelledby": triggerId, className: theme === null || theme === void 0 ? void 0 : theme.bodyStyle, "data-state": isOpen ? "open" : "closed", "aria-hidden": !isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, ...safeProps, children: jsx(motion.div, { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyInnerStyle, className), variants: accordionContentAnimations, initial: "collapsed", animate: "open", exit: "collapsed", transition: instantTransition, children: children }) })) }));
 });
-AccordionContent.displayName = "AccordionContent";
+AccordionBody.displayName = "Accordion.Body";
 
-export { AccordionContent };
+export { AccordionBody };

package/dist/components/core/Accordion/AccordionItem.js

@@ -9,7 +9,7 @@ const AccordionItemContext = createContext(undefined);
 const useAccordionItemContext = () => {
     const ctx = useContext(AccordionItemContext);
     if (!ctx)
-        throw new Error("Accordion.Trigger and Accordion.Content must be used within Accordion.Item");
+        throw new Error("Accordion.Trigger and Accordion.Body must be used within Accordion.Item");
     return ctx;
 };
 const AccordionItem = React__default.forwardRef(({ children, className, value, ...props }, ref) => {
@@ -52,6 +52,6 @@ const AccordionItem = React__default.forwardRef(({ children, className, value, .
     const itemStyleClass = variant === "stacked" ? theme === null || theme === void 0 ? void 0 : theme.itemStyleStacked : theme === null || theme === void 0 ? void 0 : theme.itemStyle;
     return (jsx(AccordionItemContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(itemStyleClass, className), "data-state": isOpen ? "open" : "closed", "data-variant": variant, "data-value": value, ...props, children: children }) }));
 });
-AccordionItem.displayName = "AccordionItem";
+AccordionItem.displayName = "Accordion.Item";
 
 export { AccordionItem, useAccordionItemContext };

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -1,19 +1,31 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useAccordionContext } from './Accordion.js';
 import { useAccordionItemContext } from './AccordionItem.js';
 import { motion } from 'motion/react';
 import { PlusIcon } from '@heroicons/react/24/outline';
+import { createTriggerIconVariants } from './Accordion.animations.js';
 
-const AccordionTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const AccordionTrigger = React__default.forwardRef(({ children, className, chevron, chevronRotation, iconRotation, chevronPosition = "right", ...props }, ref) => {
+    var _a;
     const { theme } = useAccordionContext();
     const { isOpen, toggle, triggerId, contentId } = useAccordionItemContext();
-    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [children, jsx(motion.div, { animate: { rotate: isOpen ? 45 : 0 }, transition: {
-                    duration: 0.2,
-                    ease: [0.4, 0.0, 0.2, 1]
-                }, className: "flex items-center justify-center", children: jsx(PlusIcon, { className: "size-4", strokeWidth: 2 }) })] }));
+    const resolvedChevronRotation = (_a = chevronRotation !== null && chevronRotation !== void 0 ? chevronRotation : iconRotation) !== null && _a !== void 0 ? _a : 45;
+    // Resolve the indicator icon
+    const defaultChevronIcon = jsx(PlusIcon, { className: "size-4", strokeWidth: 2 });
+    const resolvedChevron = chevron === null
+        ? null
+        : chevron !== undefined
+            ? chevron
+            : chevronPosition === "left"
+                ? null // rendered in the left slot instead
+                : defaultChevronIcon;
+    // When chevronPosition="left", render the default animated chevron before children
+    const useDefaultOnLeft = chevron !== null && chevronPosition === "left" && chevron === undefined;
+    const animatedChevron = (rotation, extraClass) => (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(rotation), className: cn("flex items-center justify-center shrink-0", extraClass), children: defaultChevronIcon }));
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });
-AccordionTrigger.displayName = "AccordionTrigger";
+AccordionTrigger.displayName = "Accordion.Trigger";
 
 export { AccordionTrigger };

package/dist/components/core/Accordion/index.d.ts

@@ -1,4 +1,4 @@
 import { Accordion } from "./Accordion";
-import { AccordionProps, AccordionTriggerProps, AccordionContentProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
+import { AccordionProps, AccordionTriggerProps, AccordionBodyProps, AccordionItemProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides } from "./Accordion.types";
 export { Accordion };
-export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };
+export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionBodyProps, AccordionContextValue, AccordionItemContextValue, AccordionThemeOverrides, };

package/dist/components/core/Alert/Alert.animations.d.ts

@@ -0,0 +1,11 @@
+import { Variants } from "motion/react";
+/**
+ * Alert entrance/exit animation variants
+ * Entrance: slide down from -8px + fade in
+ * Exit: fade out + collapse height
+ */
+export declare const alertVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no slide or collapse
+ */
+export declare const reducedMotionAlertVariants: Variants;