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

package/dist/components/charts/chart.js

@@ -0,0 +1,48 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Base Chart Component
+ * React component for ApexCharts with built-in loading and empty states
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { lazy, Suspense } from "react";
+import { ChartSkeleton } from "./chart-skeleton.js";
+// apexcharts touches `window` at module scope, so importing it statically
+// crashes any SSR framework on the first render — and the root barrel
+// transitively imports every chart. Loaded lazily instead: the module only
+// evaluates in the browser, and the tree stays SSR-safe.
+const ReactApexChart = lazy(() => import("react-apexcharts"));
+/**
+ * Get tooltip theme from DOM safely (SSR-compatible)
+ */
+function getTooltipTheme() {
+    if (typeof document === "undefined")
+        return "light";
+    return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+/**
+ * Base Chart Component - use this as the foundation for all charts
+ * Provides consistent styling, loading skeleton, and empty state
+ */
+export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data available", skeletonConfig, skeleton, ...props }) {
+    // Render skeleton if loading
+    if (isLoading) {
+        if (skeleton) {
+            return _jsx(_Fragment, { children: skeleton });
+        }
+        return _jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className });
+    }
+    // Render empty state when no data
+    if (isEmpty) {
+        // Height may arrive as a number (px) or a CSS length string ("20rem",
+        // "50%") — appending px to a string double-unitizes it.
+        const configuredHeight = skeletonConfig?.height ?? props.height ?? 350;
+        const height = typeof configuredHeight === "number"
+            ? `${configuredHeight}px`
+            : configuredHeight;
+        return (_jsxs("div", { className: cn("w-full flex flex-col items-center justify-center text-center rounded-lg border bg-card text-muted-foreground", className), style: { height }, children: [_jsxs("svg", { className: "mb-3 h-10 w-10 opacity-40", fill: "none", role: "img", "aria-label": "Chart empty state", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("title", { children: "No chart data" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 13h2v8H3zM9 9h2v12H9zM15 5h2v16h-2zM21 1h2v20h-2z" })] }), _jsx("p", { className: "text-sm", children: emptyMessage })] }));
+    }
+    return (_jsx("div", { className: cn("w-full", className), children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...props }) }) }));
+}
+export { ChartSkeleton } from "./chart-skeleton.js";
+export { getTooltipTheme };

package/dist/components/charts/chart.types.d.ts

@@ -0,0 +1,196 @@
+/**
+ * Chart Component Types
+ * Type definitions for ApexCharts-based chart components
+ */
+import type { ApexOptions } from "apexcharts";
+/**
+ * Base chart props shared across all chart types
+ */
+export interface BaseChartProps {
+    /** Chart height in pixels */
+    height?: number;
+    /** Chart width (100% by default) */
+    width?: string | number;
+    /** Custom CSS classes */
+    className?: string;
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Show/hide toolbar */
+    toolbar?: boolean;
+    /** Enable/disable animations */
+    animations?: boolean;
+    /** Custom ApexCharts options (merged with defaults) */
+    options?: Partial<ApexOptions>;
+    /** Show loading skeleton instead of chart */
+    isLoading?: boolean;
+    /** Message shown when data is empty (default: "No data available") */
+    emptyMessage?: string;
+}
+/**
+ * Series data point for single value charts
+ */
+export interface ChartDataPoint {
+    /** X-axis value (date, category, etc.) */
+    x: string | number;
+    /** Y-axis value */
+    y: number;
+    /** Optional fill color for this point */
+    fillColor?: string;
+    /** Optional stroke color for this point */
+    strokeColor?: string;
+}
+/**
+ * Series configuration for charts
+ */
+export interface ChartSeries {
+    /** Series name */
+    name: string;
+    /** Series data points */
+    data: number[] | ChartDataPoint[];
+    /** Series color (hex or CSS variable) */
+    color?: string;
+    /** Series type (for mixed charts) */
+    type?: "line" | "area" | "bar" | "column";
+}
+/**
+ * Area Chart specific props
+ */
+export interface AreaChartProps extends BaseChartProps {
+    /** Chart series data */
+    series: ChartSeries[];
+    /** X-axis categories (if not using data points) */
+    categories?: string[];
+    /** Chart colors */
+    colors?: string[];
+    /** Curve style */
+    curve?: "smooth" | "straight" | "stepline";
+    /** Enable stacked mode */
+    stacked?: boolean;
+    /** Show data labels */
+    dataLabels?: boolean;
+    /** Y-axis label */
+    yAxisLabel?: string;
+    /** Reference lines (e.g., limits, targets) */
+    referenceLines?: ReferenceLine[];
+}
+/**
+ * Line Chart specific props
+ */
+export interface LineChartProps extends BaseChartProps {
+    /** Chart series data */
+    series: ChartSeries[];
+    /** X-axis categories */
+    categories?: string[];
+    /** Chart colors */
+    colors?: string[];
+    /** Curve style */
+    curve?: "smooth" | "straight" | "stepline";
+    /** Line width */
+    strokeWidth?: number;
+    /** Show markers on data points */
+    markers?: boolean;
+    /** Y-axis label */
+    yAxisLabel?: string;
+}
+/**
+ * Bar Chart specific props
+ */
+export interface BarChartProps extends BaseChartProps {
+    /** Chart series data */
+    series: ChartSeries[];
+    /** X-axis categories */
+    categories: string[];
+    /** Chart colors */
+    colors?: string[];
+    /** Horizontal bars */
+    horizontal?: boolean;
+    /** Enable stacked mode */
+    stacked?: boolean;
+    /** Show data labels */
+    dataLabels?: boolean;
+    /** Bar width percentage */
+    barWidth?: number;
+}
+/**
+ * Donut/Pie Chart specific props
+ */
+export interface DonutChartProps extends BaseChartProps {
+    /** Chart labels */
+    labels: string[];
+    /** Chart data values */
+    series: number[];
+    /** Chart colors */
+    colors?: string[];
+    /** Show as donut (true) or pie (false) */
+    donut?: boolean;
+    /** Donut hole size (10-90) */
+    donutSize?: number;
+    /** Show data labels */
+    dataLabels?: boolean;
+    /** Show legend */
+    legend?: boolean;
+}
+/**
+ * Radial Bar Chart specific props
+ */
+export interface RadialBarChartProps extends BaseChartProps {
+    /** Series labels */
+    labels: string[];
+    /** Series values (percentages 0-100) */
+    series: number[];
+    /** Chart colors */
+    colors?: string[];
+    /** Show data labels */
+    dataLabels?: boolean;
+    /** Hollow size percentage */
+    hollowSize?: string;
+}
+/**
+ * Reference line configuration
+ */
+export interface ReferenceLine {
+    /** Y-axis value for the line */
+    value: number;
+    /** Line color */
+    color?: string;
+    /** Line style */
+    dashArray?: number;
+    /** Line label */
+    label?: string;
+}
+/**
+ * Theme configuration for charts
+ */
+export interface ChartTheme {
+    /** Color palette */
+    palette: "palette1" | "palette2" | "palette3" | "palette4" | "palette5";
+    /** Light or dark mode */
+    mode: "light" | "dark";
+    /** Monochrome colors */
+    monochrome?: {
+        enabled: boolean;
+        color: string;
+        shadeTo: "light" | "dark";
+        shadeIntensity: number;
+    };
+}
+/**
+ * Chart Skeleton Configuration
+ * Configuration for chart loading states
+ */
+export interface ChartSkeletonConfig {
+    /** Height of the chart area (default: 350) */
+    height?: number;
+    /** Show legend skeleton (default: true) */
+    showLegend?: boolean;
+    /** Number of legend items to show (default: 4) */
+    legendCount?: number;
+    /** Show table skeleton below chart */
+    showTable?: boolean;
+    /** Number of table rows to show (default: 5) */
+    tableRows?: number;
+    /** Number of table columns to show (default: 3) */
+    tableColumns?: number;
+}

package/dist/components/charts/chart.types.js

@@ -0,0 +1,6 @@
+"use client";
+/**
+ * Chart Component Types
+ * Type definitions for ApexCharts-based chart components
+ */
+export {};

package/dist/components/charts/donut-chart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Donut/Pie Chart Component
+ * Circular charts for showing proportions and percentages
+ */
+import type { DonutChartProps } from "./chart.types";
+export declare function DonutChart({ series, labels, colors, height, width, className, title, subtitle, animations, donut, donutSize, dataLabels, legend, isLoading, emptyMessage, options: customOptions, }: DonutChartProps): import("react").JSX.Element;
+export declare function PieChart(props: DonutChartProps): import("react").JSX.Element;

package/dist/components/charts/donut-chart.js

@@ -0,0 +1,146 @@
+"use client";
+/**
+ * Donut/Pie Chart Component
+ * Circular charts for showing proportions and percentages
+ */
+"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 DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, 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: donut ? "donut" : "pie",
+                animations: {
+                    enabled: animations,
+                    speed: 800,
+                },
+            },
+            colors: chartColors,
+            labels,
+            dataLabels: {
+                enabled: dataLabels,
+                style: {
+                    fontSize: "14px",
+                    fontWeight: 600,
+                    colors: ["var(--primary-foreground)"],
+                },
+                dropShadow: {
+                    enabled: false,
+                },
+            },
+            plotOptions: {
+                pie: {
+                    ...(donut && {
+                        donut: {
+                            size: `${donutSize}%`,
+                            labels: {
+                                show: true,
+                                name: {
+                                    show: true,
+                                    fontSize: "16px",
+                                    fontWeight: 600,
+                                    color: "var(--foreground)",
+                                },
+                                value: {
+                                    show: true,
+                                    fontSize: "24px",
+                                    fontWeight: 700,
+                                    color: "var(--foreground)",
+                                    formatter: (value) => parseInt(value, 10).toLocaleString(),
+                                },
+                                total: {
+                                    show: true,
+                                    label: "Total",
+                                    fontSize: "14px",
+                                    color: "var(--muted-foreground)",
+                                    formatter: (w) => {
+                                        return w.globals.seriesTotals
+                                            .reduce((a, b) => a + b, 0)
+                                            .toLocaleString();
+                                    },
+                                },
+                            },
+                        },
+                    }),
+                },
+            },
+            legend: {
+                show: legend,
+                position: "bottom",
+                horizontalAlign: "center",
+                labels: {
+                    colors: "var(--foreground)",
+                },
+            },
+            tooltip: {
+                theme: getTooltipTheme(),
+                y: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            responsive: [
+                {
+                    breakpoint: 480,
+                    options: {
+                        chart: {
+                            height: 300,
+                        },
+                        legend: {
+                            position: "bottom",
+                        },
+                    },
+                },
+            ],
+            ...(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,
+        labels,
+        donut,
+        donutSize,
+        dataLabels,
+        legend,
+        animations,
+        title,
+        subtitle,
+        customOptions,
+    ]);
+    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: donut ? "donut" : "pie", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+}
+// Convenience alias for Pie charts
+export function PieChart(props) {
+    return _jsx(DonutChart, { ...props, donut: false });
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Charts Package
+ * ApexCharts-based chart components for data visualization
+ */
+export { AreaChart } from "./area-chart";
+export { BarChart } from "./bar-chart";
+export { Chart, ChartSkeleton } from "./chart";
+export * from "./chart.types";
+export { DonutChart, PieChart } from "./donut-chart";
+export { LineChart } from "./line-chart";
+export { RadialBarChart } from "./radial-bar-chart";
+export * from "./theme-utils";
+export { useThemeAwareChart } from "./use-theme-aware-chart";
+export * from "./utils";

package/dist/components/charts/index.js

@@ -0,0 +1,15 @@
+"use client";
+/**
+ * Charts Package
+ * ApexCharts-based chart components for data visualization
+ */
+export { AreaChart } from "./area-chart.js";
+export { BarChart } from "./bar-chart.js";
+export { Chart, ChartSkeleton } from "./chart.js";
+export * from "./chart.types.js";
+export { DonutChart, PieChart } from "./donut-chart.js";
+export { LineChart } from "./line-chart.js";
+export { RadialBarChart } from "./radial-bar-chart.js";
+export * from "./theme-utils.js";
+export { useThemeAwareChart } from "./use-theme-aware-chart.js";
+export * from "./utils.js";

package/dist/components/charts/line-chart.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Line Chart Component
+ * Clean line charts for trends and time series data
+ */
+import type { LineChartProps } from "./chart.types";
+export declare function LineChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, strokeWidth, markers, yAxisLabel, isLoading, emptyMessage, options: customOptions, }: LineChartProps): import("react").JSX.Element;

package/dist/components/charts/line-chart.js

@@ -0,0 +1,158 @@
+"use client";
+/**
+ * Line Chart Component
+ * Clean line charts for trends and time series data
+ */
+"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";
+/**
+ * Check if series data is empty (no series or all series have empty data arrays)
+ */
+function isSeriesEmpty(series) {
+    if (series.length === 0)
+        return true;
+    return series.every((s) => !s.data || (Array.isArray(s.data) && s.data.length === 0));
+}
+export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, isLoading, emptyMessage, options: customOptions, }) {
+    const { colors: themeColors } = useThemeAwareChart();
+    const isEmpty = !isLoading && isSeriesEmpty(series);
+    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: "line",
+                toolbar: {
+                    show: toolbar,
+                    tools: {
+                        download: true,
+                        selection: true,
+                        zoom: true,
+                        zoomin: true,
+                        zoomout: true,
+                        pan: true,
+                        reset: true,
+                    },
+                },
+                animations: {
+                    enabled: animations,
+                    speed: 800,
+                },
+            },
+            colors: chartColors,
+            dataLabels: {
+                enabled: false,
+            },
+            stroke: {
+                curve,
+                width: strokeWidth,
+            },
+            markers: {
+                size: markers ? 4 : 0,
+                strokeWidth: 2,
+                strokeOpacity: 0.9,
+                strokeColors: chartColors,
+                fillOpacity: 1,
+                hover: {
+                    size: 6,
+                },
+            },
+            xaxis: {
+                categories,
+                labels: {
+                    style: {
+                        colors: "var(--muted-foreground)",
+                        fontSize: "12px",
+                    },
+                },
+                axisBorder: {
+                    color: "var(--border)",
+                },
+                axisTicks: {
+                    color: "var(--border)",
+                },
+            },
+            yaxis: {
+                ...(yAxisLabel && {
+                    title: {
+                        text: yAxisLabel,
+                        style: {
+                            color: "var(--muted-foreground)",
+                            fontSize: "12px",
+                        },
+                    },
+                }),
+                labels: {
+                    style: {
+                        colors: "var(--muted-foreground)",
+                        fontSize: "12px",
+                    },
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            grid: {
+                borderColor: "var(--border)",
+                strokeDashArray: 3,
+            },
+            tooltip: {
+                theme: getTooltipTheme(),
+                x: {
+                    show: true,
+                },
+                y: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            legend: {
+                position: "top",
+                horizontalAlign: "right",
+                labels: {
+                    colors: "var(--foreground)",
+                },
+            },
+            ...(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,
+        categories,
+        curve,
+        strokeWidth,
+        markers,
+        yAxisLabel,
+        toolbar,
+        animations,
+        title,
+        subtitle,
+        customOptions,
+    ]);
+    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "line", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+}

package/dist/components/charts/radial-bar-chart.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Radial Bar Chart Component
+ * Circular progress bars for showing percentages and completion rates
+ */
+import type { RadialBarChartProps } from "./chart.types";
+export declare function RadialBarChart({ series, labels, colors, height, width, className, title, subtitle, animations, dataLabels, hollowSize, isLoading, emptyMessage, options: customOptions, }: RadialBarChartProps): import("react").JSX.Element;