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

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @kala-ui/react-app
+
+## 0.1.0-beta.0
+
+### Added
+
+- New package splitting Kala UI along architectural lines: standard UI primitives live in `@kala-ui/react`; this package holds the app-level composites.
+- **Application chrome**: `AppShell`, `Header`, `Sidebar`, `Footer`, `Navigation`, `NavLink` (+ `isActivePath` helper).
+- **Data composites**: `DataTable` (sorting, filtering, pagination, selection, bulk actions, server-side mode), `Dnd` sortable lists/boards (dnd-kit).
+- **Charts**: theme-aware ApexCharts wrappers — `AreaChart`, `BarChart`, `LineChart`, `DonutChart`, `RadialBarChart`, `SparklineChart`.
+- **Widgets**: `MetricCard`, `SessionCard`, `UserMenuDropdown`, `SocialLoginButton`, `SocialLoginButtons`.
+- Utilities-only stylesheet (`@kala-ui/react-app/styles`) — theme, tokens, preflight and helpers ship once via `@kala-ui/react/styles`.
+- React Server Component support: every component module is emitted with a `"use client"` banner; `dist/lib` stays server-safe.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kala UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# @kala-ui/react-app
+
+App-level composite components for [Kala UI](https://github.com/krr2020/kala-ui) — opinionated, multi-component application patterns built on the `@kala-ui/react` primitives.
+
+## What's inside
+
+- **Application chrome** — `AppShell`, `Header`, `Sidebar`, `Footer`, `Navigation`, `NavLink`
+- **Data-heavy composites** — `DataTable` (sorting / filtering / pagination / selection / server-side), `Dnd` (dnd-kit sortable lists and boards)
+- **Charts** — `AreaChart`, `BarChart`, `LineChart`, `DonutChart`, `RadialBarChart`, `SparklineChart` (ApexCharts wrappers, theme-aware)
+- **Dashboard & domain widgets** — `MetricCard`, `SessionCard`, `UserMenuDropdown`, `SocialLoginButton(s)`
+
+## Installation
+
+```bash
+pnpm add @kala-ui/react-app @kala-ui/react
+```
+
+Import the core stylesheet first, then this package's utilities:
+
+```css
+@import "@kala-ui/react/styles";
+@import "@kala-ui/react-app/styles";
+```
+
+## Usage
+
+```tsx
+import { Button, ThemeProvider } from "@kala-ui/react";
+import { AppShell, DataTable } from "@kala-ui/react-app";
+```
+
+See the repository README and [THEMING.md](https://github.com/krr2020/kala-ui/blob/main/THEMING.md) for theming, dark mode and framework integration.
+
+## License
+
+MIT

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+export interface AppShellProps extends React.ComponentProps<"div"> {
+    /** Header configuration */
+    header?: {
+        height: number | string;
+    };
+    /**
+     * Navbar configuration. The navbar sits off-canvas below `breakpoint`
+     * and reserves Main's left padding from it upward.
+     */
+    navbar?: {
+        width: number | string;
+        breakpoint?: "sm" | "md" | "lg" | "xl";
+    };
+    /** Aside configuration. Mirrors the navbar on the right edge. */
+    aside?: {
+        width: number | string;
+        breakpoint?: "sm" | "md" | "lg" | "xl";
+    };
+    /** Footer configuration */
+    footer?: {
+        height: number | string;
+    };
+    /** Padding for the main content */
+    padding?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+}
+declare function AppShellBase({ children, className, header, navbar, aside, footer, padding, ref, ...props }: AppShellProps): React.JSX.Element;
+export declare const AppShell: typeof AppShellBase & {
+    Header: typeof AppShellHeader;
+    Navbar: typeof AppShellNavbar;
+    Main: typeof AppShellMain;
+    Aside: typeof AppShellAside;
+    Footer: typeof AppShellFooter;
+};
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare function AppShellHeader({ ref, className, withBorder, ...props }: AppShellHeaderProps): React.JSX.Element | null;
+export interface AppShellNavbarProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare function AppShellNavbar({ ref, className, withBorder, ...props }: AppShellNavbarProps): React.JSX.Element | null;
+export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare function AppShellAside({ ref, className, withBorder, ...props }: AppShellAsideProps): React.JSX.Element | null;
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+}
+declare function AppShellMain({ ref, className, ...props }: AppShellMainProps): React.JSX.Element;
+export interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+}
+declare function AppShellFooter({ ref, className, withBorder, ...props }: AppShellFooterProps): React.JSX.Element | null;
+export {};

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@kala-ui/react/box";
+import { cn } from "@kala-ui/react/lib/utils";
+import * as React from "react";
+const AppShellContext = React.createContext({});
+function AppShellBase({ children, className, header, navbar, aside, footer, padding = "md", ref, ...props }) {
+    // Convert padding to Tailwind class or CSS value
+    const _paddingClasses = {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    };
+    const cssVars = {
+        "--app-shell-header-height": typeof header?.height === "number"
+            ? `${header.height}px`
+            : (header?.height ?? "0px"),
+        "--app-shell-footer-height": typeof footer?.height === "number"
+            ? `${footer.height}px`
+            : (footer?.height ?? "0px"),
+        "--app-shell-navbar-width": typeof navbar?.width === "number"
+            ? `${navbar.width}px`
+            : (navbar?.width ?? "0px"),
+        "--app-shell-aside-width": typeof aside?.width === "number"
+            ? `${aside.width}px`
+            : (aside?.width ?? "0px"),
+    };
+    return (_jsx(AppShellContext.Provider, { value: { header, navbar, aside, footer, padding }, children: _jsx(Box, { ref: ref, className: cn("flex min-h-screen flex-col bg-background text-foreground", className), style: cssVars, ...props, children: children }) }));
+}
+export const AppShell = Object.assign(AppShellBase, {
+    Header: AppShellHeader,
+    Navbar: AppShellNavbar,
+    Main: AppShellMain,
+    Aside: AppShellAside,
+    Footer: AppShellFooter,
+});
+function AppShellHeader({ ref, className, withBorder = true, ...props }) {
+    const { header } = React.useContext(AppShellContext);
+    if (!header)
+        return null;
+    return (_jsx(Box, { as: "header", ref: ref, className: cn("fixed top-0 left-0 right-0 z-50 flex items-center bg-background px-4", withBorder && "border-b", className), style: { height: "var(--app-shell-header-height)" }, ...props }));
+}
+function AppShellNavbar({ ref, className, withBorder = true, ...props }) {
+    const { navbar } = React.useContext(AppShellContext);
+    if (!navbar)
+        return null;
+    // Off-canvas below the configured breakpoint, docked from it upward.
+    const variant = `${navbar.breakpoint ?? "md"}:`;
+    return (_jsx(Box, { as: "nav", ref: ref, className: cn("fixed left-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out", withBorder && "border-r", "-translate-x-full", `${variant}translate-x-0`, className), style: {
+            width: "var(--app-shell-navbar-width)",
+            top: "var(--app-shell-header-height)",
+            height: "calc(100vh - var(--app-shell-header-height))",
+        }, ...props }));
+}
+function AppShellAside({ ref, className, withBorder = true, ...props }) {
+    const { aside } = React.useContext(AppShellContext);
+    if (!aside)
+        return null;
+    const variant = `${aside.breakpoint ?? "md"}:`;
+    return (_jsx(Box, { as: "aside", ref: ref, className: cn("fixed right-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out", withBorder && "border-l", "translate-x-full", `${variant}translate-x-0`, className), style: {
+            width: "var(--app-shell-aside-width)",
+            top: "var(--app-shell-header-height)",
+            height: "calc(100vh - var(--app-shell-header-height))",
+        }, ...props }));
+}
+function AppShellMain({ ref, className, ...props }) {
+    const { header, navbar, aside, footer, padding } = React.useContext(AppShellContext);
+    const paddingClasses = {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    };
+    return (_jsx(Box, { as: "main", ref: ref, className: cn("flex-1 transition-all duration-300 ease-in-out", padding && paddingClasses[padding], header && "pt-[var(--app-shell-header-height)]", footer && "pb-[var(--app-shell-footer-height)]", 
+        // Side offsets only reserve space while the fixed panels are
+        // actually docked (breakpoint and up).
+        navbar &&
+            `${navbar.breakpoint ?? "md"}:pl-[var(--app-shell-navbar-width)]`, aside &&
+            `${aside.breakpoint ?? "md"}:pr-[var(--app-shell-aside-width)]`, className), ...props }));
+}
+function AppShellFooter({ ref, className, withBorder = true, ...props }) {
+    const { footer } = React.useContext(AppShellContext);
+    if (!footer)
+        return null;
+    return (_jsx(Box, { as: "footer", ref: ref, className: cn("fixed bottom-0 left-0 right-0 z-50 flex items-center bg-background px-4", withBorder && "border-t", className), style: { height: "var(--app-shell-footer-height)" }, ...props }));
+}

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1 @@
+export * from "./app-shell";

package/dist/components/app-shell/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./app-shell.js";

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

@@ -0,0 +1,6 @@
+/**
+ * Area Chart Component
+ * Beautiful area charts with gradient fills, perfect for time series and trends
+ */
+import type { AreaChartProps } from "./chart.types";
+export declare function AreaChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, stacked, dataLabels, yAxisLabel, referenceLines, isLoading, emptyMessage, options: customOptions, }: AreaChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,172 @@
+"use client";
+/**
+ * Area Chart Component
+ * Beautiful area charts with gradient fills, perfect for time series and trends
+ */
+"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 AreaChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, curve = "smooth", stacked = false, dataLabels = false, yAxisLabel, referenceLines = [], 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: "area",
+                stacked,
+                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: dataLabels,
+            },
+            stroke: {
+                curve,
+                width: 2,
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.7,
+                    opacityTo: 0.2,
+                    stops: [0, 90, 100],
+                },
+            },
+            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",
+                    },
+                },
+            },
+            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)",
+                    },
+                },
+            }),
+            annotations: {
+                yaxis: referenceLines.map((line) => ({
+                    y: line.value,
+                    borderColor: line.color || themeColors.destructive[0],
+                    strokeDashArray: line.dashArray || 3,
+                    label: {
+                        text: line.label || "",
+                        style: {
+                            color: "var(--destructive-foreground)",
+                            background: line.color || themeColors.destructive[0],
+                        },
+                    },
+                })),
+            },
+            ...customOptions,
+        };
+        return options;
+    }, [
+        colors,
+        themeColors,
+        categories,
+        toolbar,
+        animations,
+        curve,
+        stacked,
+        dataLabels,
+        yAxisLabel,
+        title,
+        subtitle,
+        referenceLines,
+        customOptions,
+    ]);
+    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "area", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Bar Chart Component
+ * Vertical and horizontal bar charts for comparing values across categories
+ */
+import type { BarChartProps } from "./chart.types";
+export declare function BarChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, horizontal, stacked, dataLabels, barWidth, isLoading, emptyMessage, options: customOptions, }: BarChartProps): import("react").JSX.Element;

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

@@ -0,0 +1,153 @@
+"use client";
+/**
+ * Bar Chart Component
+ * Vertical and horizontal bar charts for comparing values across categories
+ */
+"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 BarChart({ series, categories, colors, height = 350, width = "100%", className, title, subtitle, toolbar = false, animations = true, horizontal = false, stacked = false, dataLabels = false, barWidth = 70, 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: "bar",
+                stacked,
+                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,
+            plotOptions: {
+                bar: {
+                    horizontal,
+                    borderRadius: 4,
+                    columnWidth: `${barWidth}%`,
+                    barHeight: `${barWidth}%`,
+                    dataLabels: {
+                        position: horizontal ? "top" : "center",
+                    },
+                },
+            },
+            dataLabels: {
+                enabled: dataLabels,
+                style: {
+                    fontSize: "12px",
+                    colors: ["var(--foreground)"],
+                },
+            },
+            stroke: {
+                show: true,
+                width: 1,
+                colors: ["transparent"],
+            },
+            xaxis: {
+                categories,
+                labels: {
+                    style: {
+                        colors: "var(--muted-foreground)",
+                        fontSize: "12px",
+                    },
+                },
+                axisBorder: {
+                    color: "var(--border)",
+                },
+                axisTicks: {
+                    color: "var(--border)",
+                },
+            },
+            yaxis: {
+                labels: {
+                    style: {
+                        colors: "var(--muted-foreground)",
+                        fontSize: "12px",
+                    },
+                    formatter: (value) => value.toLocaleString(),
+                },
+            },
+            grid: {
+                borderColor: "var(--border)",
+                strokeDashArray: 3,
+            },
+            tooltip: {
+                theme: getTooltipTheme(),
+                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,
+        horizontal,
+        stacked,
+        dataLabels,
+        barWidth,
+        toolbar,
+        animations,
+        title,
+        subtitle,
+        customOptions,
+    ]);
+    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "bar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+}

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

@@ -0,0 +1,36 @@
+/**
+ * Chart Skeleton Component
+ * Provides a loading placeholder that matches chart components structure
+ * including chart area, legend, and optional table below
+ */
+export interface ChartSkeletonProps {
+    /**
+     * 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;
+    /**
+     * Custom CSS class
+     */
+    className?: string;
+}
+export declare function ChartSkeleton({ height, showLegend, legendCount, showTable, tableRows, tableColumns, className, }: ChartSkeletonProps): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Chart Skeleton Component
+ * Provides a loading placeholder that matches chart components structure
+ * including chart area, legend, and optional table below
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton } from "@kala-ui/react/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@kala-ui/react/table";
+export function ChartSkeleton({ height = 350, showLegend = true, legendCount = 4, showTable = false, tableRows = 5, tableColumns = 3, className, }) {
+    return (_jsxs("div", { className: cn("w-full space-y-4", className), children: [_jsx("div", { className: "w-full rounded-lg border bg-card kala-surface-card", style: { height: `${height}px` }, children: _jsx("div", { className: "flex items-center justify-center h-full", children: _jsx(Skeleton, { className: "h-full w-full" }) }) }), showLegend && (_jsx("div", { className: "flex gap-4 justify-center mt-4", children: Array.from({ length: legendCount }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3 w-3 rounded-full" }), _jsx(Skeleton, { className: "h-4 w-16" })] }, `legend-${i}`))) })), showTable && (_jsx("div", { className: "mt-6", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: Array.from({ length: tableColumns }).map((_, index) => (_jsx(TableHead, { children: _jsx(Skeleton, { className: "h-4 w-24" }) }, `header-${index}`))) }) }), _jsx(TableBody, { children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx(TableRow, { className: "border-0", children: Array.from({ length: tableColumns }).map((_, colIndex) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`))) })] }) }))] }));
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Base Chart Component
+ * React component for ApexCharts with built-in loading and empty states
+ */
+import type { Props } from "react-apexcharts";
+import type { ChartSkeletonConfig } from "./chart.types";
+export interface ChartProps extends Props {
+    className?: string;
+    isLoading?: boolean;
+    isEmpty?: boolean;
+    emptyMessage?: string;
+    skeletonConfig?: ChartSkeletonConfig;
+    skeleton?: React.ReactNode;
+}
+/**
+ * Get tooltip theme from DOM safely (SSR-compatible)
+ */
+declare function getTooltipTheme(): "dark" | "light";
+/**
+ * Base Chart Component - use this as the foundation for all charts
+ * Provides consistent styling, loading skeleton, and empty state
+ */
+export declare function Chart({ className, isLoading, isEmpty, emptyMessage, skeletonConfig, skeleton, ...props }: ChartProps): import("react").JSX.Element;
+export { ChartSkeleton } from "./chart-skeleton";
+export { getTooltipTheme };