@kala-ui/react-app 0.1.0-beta.0

package/dist/components/charts/radial-bar-chart.js

@@ -0,0 +1,115 @@
+"use client";
+/**
+ * Radial Bar Chart Component
+ * Circular progress bars for showing percentages and completion rates
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@kala-ui/react/lib/utils";
+import { useMemo } from "react";
+import { Chart, getTooltipTheme } from "./chart.js";
+import { useThemeAwareChart } from "./use-theme-aware-chart.js";
+import { getDefaultChartOptions } from "./utils.js";
+export function RadialBarChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, dataLabels = true, hollowSize = "50%", isLoading, emptyMessage, options: customOptions, }) {
+    const { colors: themeColors } = useThemeAwareChart();
+    const isEmpty = !isLoading && (series.length === 0 || labels.length === 0);
+    const chartOptions = useMemo(() => {
+        const baseOptions = getDefaultChartOptions();
+        // Use theme-aware colors if not provided
+        const chartColors = colors || themeColors.mixed;
+        const options = {
+            ...baseOptions,
+            chart: {
+                ...baseOptions.chart,
+                type: "radialBar",
+                animations: {
+                    enabled: animations,
+                    speed: 800,
+                },
+            },
+            colors: chartColors,
+            plotOptions: {
+                radialBar: {
+                    hollow: {
+                        size: hollowSize,
+                    },
+                    track: {
+                        background: "var(--muted)",
+                        strokeWidth: "100%",
+                    },
+                    dataLabels: {
+                        show: dataLabels,
+                        name: {
+                            fontSize: "14px",
+                            color: "var(--muted-foreground)",
+                            offsetY: -10,
+                        },
+                        value: {
+                            fontSize: "24px",
+                            fontWeight: 700,
+                            color: "var(--foreground)",
+                            offsetY: 5,
+                            formatter: (value) => `${value}%`,
+                        },
+                        total: {
+                            show: series.length > 1,
+                            label: "Total",
+                            fontSize: "14px",
+                            color: "var(--muted-foreground)",
+                            formatter: (w) => {
+                                const total = w.globals.series.reduce((a, b) => a + b, 0) /
+                                    w.globals.series.length;
+                                return `${Math.round(total)}%`;
+                            },
+                        },
+                    },
+                },
+            },
+            labels,
+            legend: {
+                show: series.length > 1,
+                position: "bottom",
+                horizontalAlign: "center",
+                labels: {
+                    colors: "var(--foreground)",
+                },
+            },
+            tooltip: {
+                theme: getTooltipTheme(),
+            },
+            ...(title && {
+                title: {
+                    text: title,
+                    style: {
+                        fontSize: "16px",
+                        fontWeight: "600",
+                        color: "var(--foreground)",
+                    },
+                },
+            }),
+            ...(subtitle && {
+                subtitle: {
+                    text: subtitle,
+                    style: {
+                        fontSize: "12px",
+                        color: "var(--muted-foreground)",
+                    },
+                },
+            }),
+            ...customOptions,
+        };
+        return options;
+    }, [
+        colors,
+        themeColors,
+        series,
+        labels,
+        dataLabels,
+        hollowSize,
+        animations,
+        title,
+        subtitle,
+        customOptions,
+    ]);
+    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+}

package/dist/components/charts/theme-utils.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Chart Theme Utilities
+ *
+ * Charts resolve their colors from the live CSS custom properties (design
+ * tokens), so a host that overrides `--primary`, `--border`, … flows into
+ * every chart automatically — no JS palette to keep in sync. Tinted/shaded
+ * ramp stops are built with `color-mix`. When resolution is impossible
+ * (SSR, jsdom, unsupported syntax) each color falls back to a curated hex.
+ */
+/**
+ * Chart color palette type
+ */
+export type ColorPalette = string[];
+/**
+ * Color scheme configuration for different themes
+ */
+export interface ThemeColorScheme {
+    primary: ColorPalette;
+    success: ColorPalette;
+    warning: ColorPalette;
+    destructive: ColorPalette;
+    info: ColorPalette;
+    mixed: ColorPalette;
+    grid: string;
+    axisLabels: string;
+    tooltipBg: string;
+    tooltipText: string;
+}
+export type ChartThemeName = "light" | "dark" | "neutral" | "accent";
+/**
+ * Get theme-aware chart colors, resolved from the active CSS tokens.
+ * @param theme - Optional theme override, otherwise detects from DOM.
+ * When an explicit theme differs from the DOM state there is no matching
+ * stylesheet to resolve against, so the curated fallbacks are returned.
+ */
+export declare function getChartColors(theme?: ChartThemeName): ThemeColorScheme;
+/**
+ * Get default chart options with theme-aware colors
+ * @param theme - Optional theme override
+ */
+export declare function getThemeAwareChartOptions(theme?: ChartThemeName): {
+    grid: {
+        borderColor: string;
+        strokeDashArray: number;
+        xaxis: {
+            lines: {
+                show: boolean;
+            };
+        };
+    };
+    tooltip: {
+        theme: "dark" | "light";
+    };
+    legend: {
+        labels: {
+            colors: string;
+        };
+    };
+};
+/**
+ * Create a theme-aware chart instance
+ * Use this to get colors that will update when theme changes
+ */
+export declare function createThemeAwareChart(): {
+    /**
+     * Get current colors
+     */
+    getColors: () => ThemeColorScheme;
+    /**
+     * Update colors based on current theme
+     */
+    updateColors: () => boolean;
+    /**
+     * Get current theme
+     */
+    getTheme: () => ChartThemeName;
+};

package/dist/components/charts/theme-utils.js

@@ -0,0 +1,243 @@
+"use client";
+/**
+ * Chart Theme Utilities
+ *
+ * Charts resolve their colors from the live CSS custom properties (design
+ * tokens), so a host that overrides `--primary`, `--border`, … flows into
+ * every chart automatically — no JS palette to keep in sync. Tinted/shaded
+ * ramp stops are built with `color-mix`. When resolution is impossible
+ * (SSR, jsdom, unsupported syntax) each color falls back to a curated hex.
+ */
+/**
+ * Curated fallback palettes, used whenever CSS resolution is unavailable.
+ * These mirror the default token values per theme.
+ */
+const FALLBACK = {
+    light: {
+        primary: ["#3b82f6", "#60a5fa", "#93c5fd", "#bfdbfe"],
+        success: ["#10b981", "#34d399", "#6ee7b7", "#a7f3d0"],
+        warning: ["#f59e0b", "#fbbf24", "#fcd34d", "#fde68a"],
+        destructive: ["#ef4444", "#f87171", "#fca5a5", "#fecaca"],
+        info: ["#0ea5e9", "#38bdf8", "#7dd3fc", "#bae6fd"],
+        mixed: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#0ea5e9", "#6b7280"],
+        grid: "#e5e7eb",
+        axisLabels: "#6b7280",
+        tooltipBg: "#ffffff",
+        tooltipText: "#171717",
+    },
+    dark: {
+        primary: ["#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8"],
+        success: ["#34d399", "#10b981", "#059669", "#047857"],
+        warning: ["#fbbf24", "#f59e0b", "#d97706", "#b45309"],
+        destructive: ["#f87171", "#ef4444", "#dc2626", "#b91c1c"],
+        info: ["#38bdf8", "#0ea5e9", "#0284c7", "#0369a1"],
+        mixed: ["#60a5fa", "#34d399", "#fbbf24", "#f87171", "#38bdf8", "#a1a1aa"],
+        grid: "#374151",
+        axisLabels: "#a1a1aa",
+        tooltipBg: "#1e293b",
+        tooltipText: "#fafafa",
+    },
+    neutral: {
+        primary: ["#171717", "#262626", "#404040", "#525252"],
+        success: ["#22c55e", "#16a34a", "#15803d", "#166534"],
+        warning: ["#f59e0b", "#d97706", "#b45309", "#92400e"],
+        destructive: ["#ef4444", "#dc2626", "#b91c1c", "#991b1b"],
+        info: ["#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"],
+        mixed: ["#171717", "#22c55e", "#f59e0b", "#ef4444", "#3b82f6", "#737373"],
+        grid: "#e5e5e5",
+        axisLabels: "#737373",
+        tooltipBg: "#ffffff",
+        tooltipText: "#171717",
+    },
+    accent: {
+        primary: ["#3b82f6", "#60a5fa", "#93c5fd", "#bfdbfe"],
+        success: ["#10b981", "#34d399", "#6ee7b7", "#a7f3d0"],
+        warning: ["#f59e0b", "#fbbf24", "#fcd34d", "#fde68a"],
+        destructive: ["#ef4444", "#f87171", "#fca5a5", "#fecaca"],
+        info: ["#0ea5e9", "#38bdf8", "#7dd3fc", "#bae6fd"],
+        mixed: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#0ea5e9", "#6b7280"],
+        grid: "#e5e7eb",
+        axisLabels: "#737373",
+        tooltipBg: "#ffffff",
+        tooltipText: "#171717",
+    },
+};
+/**
+ * Get current theme from DOM
+ */
+function getCurrentTheme() {
+    // Chart components call this during render; on the server there is no DOM.
+    if (typeof document === "undefined")
+        return "light";
+    if (document.documentElement.classList.contains("dark")) {
+        return document.documentElement.classList.contains("accent")
+            ? "accent"
+            : "dark";
+    }
+    if (document.documentElement.classList.contains("neutral")) {
+        return "neutral";
+    }
+    if (document.documentElement.classList.contains("accent")) {
+        return "accent";
+    }
+    return "light";
+}
+/*
+ * Resolution cache. Keyed by the requested CSS color; invalidated whenever
+ * the theme class list on <html> changes (the standard way themes switch).
+ */
+const resolutionCache = new Map();
+let cacheKey = null;
+/**
+ * Resolve any CSS color expression (var(), color-mix(), …) to a concrete
+ * color string via a detached probe element. Returns `fallback` when there
+ * is no DOM or the expression cannot be resolved (SSR, test environments).
+ */
+function resolveColor(cssColor, fallback) {
+    if (typeof document === "undefined")
+        return fallback;
+    const classKey = document.documentElement.className;
+    if (cacheKey !== classKey) {
+        resolutionCache.clear();
+        cacheKey = classKey;
+    }
+    const cached = resolutionCache.get(cssColor);
+    if (cached !== undefined)
+        return cached;
+    let resolved = "";
+    try {
+        const probe = document.createElement("div");
+        probe.style.display = "none";
+        probe.style.color = cssColor;
+        document.body.appendChild(probe);
+        resolved = getComputedStyle(probe).color;
+        document.body.removeChild(probe);
+    }
+    catch {
+        resolved = "";
+    }
+    // Unresolved expressions come back empty or unresolved-with-var(); both
+    // mean the runtime can't compute the color — use the curated fallback.
+    if (!resolved || resolved.includes("var("))
+        resolved = fallback;
+    resolutionCache.set(cssColor, resolved);
+    return resolved;
+}
+/**
+ * Light-surface ramp: base color, then progressively lighter tints.
+ */
+function tintRamp(base, fallback) {
+    return [
+        resolveColor(base, fallback[0]),
+        resolveColor(`color-mix(in oklab, ${base}, white 30%)`, fallback[1]),
+        resolveColor(`color-mix(in oklab, ${base}, white 55%)`, fallback[2]),
+        resolveColor(`color-mix(in oklab, ${base}, white 75%)`, fallback[3]),
+    ];
+}
+/**
+ * Dark-surface ramp: lighter than base, base, then progressively darker shades.
+ */
+function shadeRamp(base, fallback) {
+    return [
+        resolveColor(`color-mix(in oklab, ${base}, white 25%)`, fallback[0]),
+        resolveColor(base, fallback[1]),
+        resolveColor(`color-mix(in oklab, ${base}, black 15%)`, fallback[2]),
+        resolveColor(`color-mix(in oklab, ${base}, black 35%)`, fallback[3]),
+    ];
+}
+/**
+ * Build the token-driven color scheme for a theme.
+ */
+function buildScheme(theme) {
+    const fallback = FALLBACK[theme];
+    const isDark = theme === "dark";
+    const ramp = isDark ? shadeRamp : tintRamp;
+    return {
+        primary: ramp("var(--primary)", fallback.primary),
+        success: ramp("var(--success)", fallback.success),
+        warning: ramp("var(--warning)", fallback.warning),
+        destructive: ramp("var(--destructive)", fallback.destructive),
+        info: ramp("var(--info)", fallback.info),
+        mixed: [
+            resolveColor("var(--primary)", fallback.mixed[0]),
+            resolveColor("var(--success)", fallback.mixed[1]),
+            resolveColor("var(--warning)", fallback.mixed[2]),
+            resolveColor("var(--destructive)", fallback.mixed[3]),
+            resolveColor("var(--info)", fallback.mixed[4]),
+            resolveColor("var(--muted-foreground)", fallback.mixed[5]),
+        ],
+        grid: resolveColor("color-mix(in oklab, var(--border), transparent 45%)", fallback.grid),
+        axisLabels: resolveColor("var(--muted-foreground)", fallback.axisLabels),
+        tooltipBg: resolveColor("var(--popover)", fallback.tooltipBg),
+        tooltipText: resolveColor("var(--popover-foreground)", fallback.tooltipText),
+    };
+}
+/**
+ * Get theme-aware chart colors, resolved from the active CSS tokens.
+ * @param theme - Optional theme override, otherwise detects from DOM.
+ * When an explicit theme differs from the DOM state there is no matching
+ * stylesheet to resolve against, so the curated fallbacks are returned.
+ */
+export function getChartColors(theme) {
+    const activeTheme = theme || getCurrentTheme();
+    if (theme && theme !== getCurrentTheme())
+        return FALLBACK[theme];
+    return buildScheme(activeTheme);
+}
+/**
+ * Get default chart options with theme-aware colors
+ * @param theme - Optional theme override
+ */
+export function getThemeAwareChartOptions(theme) {
+    const colors = getChartColors(theme);
+    const tooltipTheme = getCurrentTheme() === "dark" ? "dark" : "light";
+    return {
+        grid: {
+            borderColor: colors.grid,
+            strokeDashArray: 3,
+            xaxis: {
+                lines: {
+                    show: false,
+                },
+            },
+        },
+        tooltip: {
+            theme: tooltipTheme,
+        },
+        legend: {
+            labels: {
+                colors: colors.axisLabels,
+            },
+        },
+    };
+}
+/**
+ * Create a theme-aware chart instance
+ * Use this to get colors that will update when theme changes
+ */
+export function createThemeAwareChart() {
+    let currentTheme = getCurrentTheme();
+    let colors = getChartColors(currentTheme);
+    return {
+        /**
+         * Get current colors
+         */
+        getColors: () => colors,
+        /**
+         * Update colors based on current theme
+         */
+        updateColors: () => {
+            const newTheme = getCurrentTheme();
+            if (newTheme !== currentTheme) {
+                currentTheme = newTheme;
+                colors = getChartColors(currentTheme);
+                return true; // Theme changed
+            }
+            return false; // Theme unchanged
+        },
+        /**
+         * Get current theme
+         */
+        getTheme: () => currentTheme,
+    };
+}

package/dist/components/charts/use-theme-aware-chart.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme-Aware Chart Hook
+ * Custom hook to manage theme-aware charts with automatic re-renders on theme changes
+ */
+/**
+ * Hook to get theme-aware chart colors with automatic re-renders on theme changes
+ * This hook listens for theme changes and triggers component re-renders to update chart colors
+ */
+export declare function useThemeAwareChart(): {
+    colors: import("./theme-utils").ThemeColorScheme;
+    theme: "accent" | "dark" | "light" | "neutral";
+};

package/dist/components/charts/use-theme-aware-chart.js

@@ -0,0 +1,68 @@
+"use client";
+/**
+ * Theme-Aware Chart Hook
+ * Custom hook to manage theme-aware charts with automatic re-renders on theme changes
+ */
+import { useEffect, useState } from "react";
+import { getChartColors } from "./theme-utils.js";
+/**
+ * Hook to get theme-aware chart colors with automatic re-renders on theme changes
+ * This hook listens for theme changes and triggers component re-renders to update chart colors
+ */
+export function useThemeAwareChart() {
+    const [theme, setTheme] = useState(() => {
+        // Detect initial theme from DOM
+        if (typeof document === "undefined")
+            return "light";
+        if (document.documentElement.classList.contains("dark")) {
+            return document.documentElement.classList.contains("accent")
+                ? "accent"
+                : "dark";
+        }
+        if (document.documentElement.classList.contains("neutral")) {
+            return "neutral";
+        }
+        if (document.documentElement.classList.contains("accent")) {
+            return "accent";
+        }
+        return "light";
+    });
+    const colors = getChartColors(theme);
+    useEffect(() => {
+        // Listen for theme changes by observing DOM class changes
+        if (typeof document === "undefined")
+            return;
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" &&
+                    mutation.attributeName === "class") {
+                    const element = document.documentElement;
+                    const classList = element.classList;
+                    let newTheme = "light";
+                    if (classList.contains("dark")) {
+                        newTheme = classList.contains("accent") ? "accent" : "dark";
+                    }
+                    else if (classList.contains("neutral")) {
+                        newTheme = "neutral";
+                    }
+                    else if (classList.contains("accent")) {
+                        newTheme = "accent";
+                    }
+                    setTheme(newTheme);
+                }
+            });
+        });
+        // Observe the document element for class changes (theme changes)
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return {
+        colors,
+        theme,
+    };
+}

package/dist/components/charts/utils.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Chart Utilities
+ * Helper functions and default configurations for charts
+ */
+import type { ApexOptions } from "apexcharts";
+/**
+ * Get default chart options that match our design system
+ * @param theme - Optional theme override, otherwise detects from DOM
+ */
+export declare function getDefaultChartOptions(theme?: "light" | "dark" | "neutral" | "accent"): ApexOptions;
+/**
+ * Default color palette matching design tokens
+ * @param theme - Optional theme override, otherwise detects from DOM
+ * @deprecated Use getChartColors() instead for theme-aware colors
+ */
+export declare function defaultColors(theme?: "light" | "dark" | "neutral" | "accent"): {
+    primary: import("./theme-utils").ColorPalette;
+    success: import("./theme-utils").ColorPalette;
+    warning: import("./theme-utils").ColorPalette;
+    destructive: import("./theme-utils").ColorPalette;
+    info: import("./theme-utils").ColorPalette;
+    mixed: import("./theme-utils").ColorPalette;
+};
+/**
+ * Format number with appropriate units
+ */
+export declare function formatNumber(value: number): string;
+/**
+ * Format currency values
+ */
+export declare function formatCurrency(value: number, currency?: string): string;
+/**
+ * Format percentage values
+ */
+export declare function formatPercentage(value: number, decimals?: number): string;
+/**
+ * Generate gradient colors for area charts
+ */
+export declare function createGradient(_color: string, opacity?: number): {
+    type: "gradient";
+    gradient: {
+        shadeIntensity: number;
+        opacityFrom: number;
+        opacityTo: number;
+        stops: number[];
+    };
+};
+/**
+ * Get responsive breakpoints for charts
+ */
+export declare function getResponsiveOptions(): ApexResponsive[];
+interface ApexResponsive {
+    breakpoint: number;
+    options: ApexOptions;
+}
+export {};