@kala-ui/react 0.0.1-beta.1

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

@@ -0,0 +1,193 @@
+/**
+ * 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>;
+}
+/**
+ * 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;
+}
+//# sourceMappingURL=chart.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/chart.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+/**
+ * Chart Component Types
+ * Type definitions for ApexCharts-based chart components
+ */
+export {};
+//# sourceMappingURL=chart.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart.types.js","sourceRoot":"","sources":["../../../../src/components/charts/chart.types.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

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

@@ -0,0 +1,8 @@
+/**
+ * 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, options: customOptions, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function PieChart(props: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=donut-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/donut-chart.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,wBAAgB,UAAU,CAAC,EAC1B,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAY,EACZ,KAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAiB,EACjB,KAAY,EACZ,SAAc,EACd,UAAiB,EACjB,MAAa,EACb,OAAO,EAAE,aAAa,GACtB,EAAE,eAAe,2CAiJjB;AAGD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,eAAe,2CAE9C"}

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

@@ -0,0 +1,147 @@
+/**
+ * Donut/Pie Chart Component
+ * Circular charts for showing proportions and percentages
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../lib/utils";
+import { Chart } from "./chart";
+import { getDefaultChartOptions } from "./utils";
+import { useThemeAwareChart } from "./use-theme-aware-chart";
+export function DonutChart({ series, labels, colors, height = 350, width = "100%", className, title, subtitle, animations = true, donut = true, donutSize = 65, dataLabels = true, legend = true, options: customOptions, }) {
+    const { colors: themeColors } = useThemeAwareChart();
+    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: ["#fff"],
+                },
+                dropShadow: {
+                    enabled: false,
+                },
+            },
+            plotOptions: {
+                pie: {
+                    ...(donut && {
+                        donut: {
+                            size: `${donutSize}%`,
+                            labels: {
+                                show: true,
+                                name: {
+                                    show: true,
+                                    fontSize: "16px",
+                                    fontWeight: 600,
+                                    color: "hsl(var(--foreground))",
+                                },
+                                value: {
+                                    show: true,
+                                    fontSize: "24px",
+                                    fontWeight: 700,
+                                    color: "hsl(var(--foreground))",
+                                    formatter: (value) => parseInt(value, 10).toLocaleString(),
+                                },
+                                total: {
+                                    show: true,
+                                    label: "Total",
+                                    fontSize: "14px",
+                                    color: "hsl(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: "hsl(var(--foreground))",
+                },
+            },
+            tooltip: {
+                theme: document.documentElement.classList.contains("dark")
+                    ? "dark"
+                    : "light",
+                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: "hsl(var(--foreground))",
+                    },
+                },
+            }),
+            ...(subtitle && {
+                subtitle: {
+                    text: subtitle,
+                    style: {
+                        fontSize: "12px",
+                        color: "hsl(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 }));
+}
+// Convenience alias for Pie charts
+export function PieChart(props) {
+    return _jsx(DonutChart, { ...props, donut: false });
+}
+//# sourceMappingURL=donut-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"donut-chart.js","sourceRoot":"","sources":["../../../../src/components/charts/donut-chart.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+/**
+ * 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 { DonutChart, PieChart } from "./donut-chart";
+export { LineChart } from "./line-chart";
+export { RadialBarChart } from "./radial-bar-chart";
+export * from "./chart.types";
+export * from "./utils";
+export * from "./theme-utils";
+export { useThemeAwareChart } from "./use-theme-aware-chart";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/src/components/charts/index.js

@@ -0,0 +1,15 @@
+/**
+ * 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 { DonutChart, PieChart } from "./donut-chart";
+export { LineChart } from "./line-chart";
+export { RadialBarChart } from "./radial-bar-chart";
+export * from "./chart.types";
+export * from "./utils";
+export * from "./theme-utils";
+export { useThemeAwareChart } from "./use-theme-aware-chart";
+//# sourceMappingURL=index.js.map

package/dist/src/components/charts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/charts/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

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

@@ -0,0 +1,7 @@
+/**
+ * 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, options: customOptions, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=line-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/line-chart.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAIpD,wBAAgB,SAAS,CAAC,EACzB,MAAM,EACN,UAAU,EACV,MAAM,EACN,MAAY,EACZ,KAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAe,EACf,UAAiB,EACjB,KAAgB,EAChB,WAAe,EACf,OAAc,EACd,UAAU,EACV,OAAO,EAAE,aAAa,GACtB,EAAE,cAAc,2CAwJhB"}

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

@@ -0,0 +1,151 @@
+/**
+ * Line Chart Component
+ * Clean line charts for trends and time series data
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cn } from "../../lib/utils";
+import { Chart } from "./chart";
+import { getDefaultChartOptions } from "./utils";
+import { useThemeAwareChart } from "./use-theme-aware-chart";
+export function LineChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", strokeWidth = 2, markers = true, yAxisLabel, options: customOptions, }) {
+    const { colors: themeColors } = useThemeAwareChart();
+    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: "hsl(var(--muted-foreground))",
+                        fontSize: "12px",
+                    },
+                },
+                axisBorder: {
+                    color: "hsl(var(--border))",
+                },
+                axisTicks: {
+                    color: "hsl(var(--border))",
+                },
+            },
+            yaxis: {
+                ...(yAxisLabel && {
+                    title: {
+                        text: yAxisLabel,
+                        style: {
+                            color: "hsl(var(--muted-foreground))",
+                            fontSize: "12px",
+                        },
+                    },
+                }),
+                labels: {
+                    style: {
+                        colors: "hsl(var(--muted-foreground))",
+                        fontSize: "12px",
+                    },
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            grid: {
+                borderColor: "hsl(var(--border))",
+                strokeDashArray: 3,
+            },
+            tooltip: {
+                theme: document.documentElement.classList.contains("dark")
+                    ? "dark"
+                    : "light",
+                x: {
+                    show: true,
+                },
+                y: {
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            legend: {
+                position: "top",
+                horizontalAlign: "right",
+                labels: {
+                    colors: "hsl(var(--foreground))",
+                },
+            },
+            ...(title && {
+                title: {
+                    text: title,
+                    style: {
+                        fontSize: "16px",
+                        fontWeight: "600",
+                        color: "hsl(var(--foreground))",
+                    },
+                },
+            }),
+            ...(subtitle && {
+                subtitle: {
+                    text: subtitle,
+                    style: {
+                        fontSize: "12px",
+                        color: "hsl(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 }));
+}
+//# sourceMappingURL=line-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line-chart.js","sourceRoot":"","sources":["../../../../src/components/charts/line-chart.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+/**
+ * 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, options: customOptions, }: RadialBarChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=radial-bar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radial-bar-chart.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/radial-bar-chart.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAQH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAIzD,wBAAgB,cAAc,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,MAAM,EACN,MAAY,EACZ,KAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,UAAiB,EACjB,UAAiB,EACjB,UAAkB,EAClB,OAAO,EAAE,aAAa,GACtB,EAAE,mBAAmB,2CAiHrB"}