@kala-ui/react-app 0.1.0-beta.4 → 0.1.0-beta.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @kala-ui/react-app
 
+## 0.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [5ecd609]
+- Updated dependencies [ed367cc]
+  - @kala-ui/react@0.1.0-beta.4
+
 ## 0.1.0-beta.4
 
 ### Patch Changes

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

@@ -1,30 +1,11 @@
 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;
+import type { AppShellAsideProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarProps, AppShellProps } from "./app-shell.types";
+declare function AppShellBase({ children, className, style, slotStyles: slotStylesRaw, header, navbar, aside, footer, padding, ref, ...props }: AppShellProps): React.JSX.Element;
+declare function AppShellHeader({ ref, className, withBorder, slotStyles: slotStylesRaw, ...props }: AppShellHeaderProps): React.JSX.Element | null;
+declare function AppShellNavbar({ ref, className, withBorder, slotStyles: slotStylesRaw, ...props }: AppShellNavbarProps): React.JSX.Element | null;
+declare function AppShellAside({ ref, className, withBorder, slotStyles: slotStylesRaw, ...props }: AppShellAsideProps): React.JSX.Element | null;
+declare function AppShellMain({ ref, className, slotStyles: slotStylesRaw, ...props }: AppShellMainProps): React.JSX.Element;
+declare function AppShellFooter({ ref, className, withBorder, slotStyles: slotStylesRaw, ...props }: AppShellFooterProps): React.JSX.Element | null;
 export declare const AppShell: typeof AppShellBase & {
     Header: typeof AppShellHeader;
     Navbar: typeof AppShellNavbar;
@@ -32,23 +13,4 @@ export declare const AppShell: typeof AppShellBase & {
     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 {};
+export type { AppShellAsideProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarProps, AppShellProps, } from "./app-shell.types";

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

@@ -1,19 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@kala-ui/react/box";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
 import * as React from "react";
+import { appShellStyles } from "../../config/app-shell.js";
 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",
-    };
+function AppShellBase({ children, className, style, slotStyles: slotStylesRaw, header, navbar, aside, footer, padding = "md", ref, ...props }) {
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
     const cssVars = {
         "--app-shell-header-height": typeof header?.height === "number"
             ? `${header.height}px`
@@ -28,64 +23,68 @@ function AppShellBase({ children, className, header, navbar, aside, footer, padd
             ? `${aside.width}px`
             : (aside?.width ?? "0px"),
     };
-    return (_jsx(AppShellContext.Provider, { "data-kala-component": "app-shell-base", 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 }) }));
+    const root = applySlot(cn(appShellStyles.base, className), slotStyles?.root);
+    return (_jsx(AppShellContext.Provider, { "data-kala-component": "app-shell-base", value: { header, navbar, aside, footer, padding }, children: _jsx(Box, { "data-kala-component": "app-shell", ref: ref, className: root.className, style: { ...cssVars, ...root.style }, ...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 }) {
+// --- Subcomponents ---
+function AppShellHeader({ ref, className, withBorder = true, slotStyles: slotStylesRaw, ...props }) {
     const { header } = React.useContext(AppShellContext);
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
     if (!header)
         return null;
-    return (_jsx(Box, { "data-kala-component": "app-shell-header", 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 }));
+    const part = applySlot(cn(appShellStyles.header, withBorder && appShellStyles.headerBorder, className), slotStyles?.header);
+    return (_jsx(Box, { "data-kala-component": "app-shell-header", as: "header", ref: ref, className: part.className, style: { height: "var(--app-shell-header-height)", ...part.style }, ...props }));
 }
-function AppShellNavbar({ ref, className, withBorder = true, ...props }) {
+function AppShellNavbar({ ref, className, withBorder = true, slotStyles: slotStylesRaw, ...props }) {
     const { navbar } = React.useContext(AppShellContext);
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
     if (!navbar)
         return null;
-    // Off-canvas below the configured breakpoint, docked from it upward.
     const variant = `${navbar.breakpoint ?? "md"}:`;
-    return (_jsx(Box, { "data-kala-component": "app-shell-navbar", 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: {
+    const part = applySlot(cn(appShellStyles.navbar, withBorder && appShellStyles.navbarBorder, "-translate-x-full", `${variant}translate-x-0`, className), slotStyles?.navbar);
+    return (_jsx(Box, { "data-kala-component": "app-shell-navbar", as: "nav", ref: ref, className: part.className, style: {
             width: "var(--app-shell-navbar-width)",
             top: "var(--app-shell-header-height)",
             height: "calc(100vh - var(--app-shell-header-height))",
+            ...part.style,
         }, ...props }));
 }
-function AppShellAside({ ref, className, withBorder = true, ...props }) {
+function AppShellAside({ ref, className, withBorder = true, slotStyles: slotStylesRaw, ...props }) {
     const { aside } = React.useContext(AppShellContext);
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
     if (!aside)
         return null;
     const variant = `${aside.breakpoint ?? "md"}:`;
-    return (_jsx(Box, { "data-kala-component": "app-shell-aside", 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: {
+    const part = applySlot(cn(appShellStyles.aside, withBorder && appShellStyles.asideBorder, "translate-x-full", `${variant}translate-x-0`, className), slotStyles?.aside);
+    return (_jsx(Box, { "data-kala-component": "app-shell-aside", as: "aside", ref: ref, className: part.className, style: {
             width: "var(--app-shell-aside-width)",
             top: "var(--app-shell-header-height)",
             height: "calc(100vh - var(--app-shell-header-height))",
+            ...part.style,
         }, ...props }));
 }
-function AppShellMain({ ref, className, ...props }) {
+function AppShellMain({ ref, className, slotStyles: slotStylesRaw, ...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, { "data-kala-component": "app-shell-main", 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 }));
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
+    const part = applySlot(cn(appShellStyles.main, padding && appShellStyles.padding[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), slotStyles?.main);
+    return (_jsx(Box, { "data-kala-component": "app-shell-main", as: "main", ref: ref, className: part.className, style: part.style, ...props }));
 }
-function AppShellFooter({ ref, className, withBorder = true, ...props }) {
+function AppShellFooter({ ref, className, withBorder = true, slotStyles: slotStylesRaw, ...props }) {
     const { footer } = React.useContext(AppShellContext);
+    const slotStyles = useSlotStyles("app-shell", slotStylesRaw);
     if (!footer)
         return null;
-    return (_jsx(Box, { "data-kala-component": "app-shell-footer", 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 }));
+    const part = applySlot(cn(appShellStyles.footer, withBorder && appShellStyles.footerBorder, className), slotStyles?.footer);
+    return (_jsx(Box, { "data-kala-component": "app-shell-footer", as: "footer", ref: ref, className: part.className, style: { height: "var(--app-shell-footer-height)", ...part.style }, ...props }));
 }
+export const AppShell = Object.assign(AppShellBase, {
+    Header: AppShellHeader,
+    Navbar: AppShellNavbar,
+    Main: AppShellMain,
+    Aside: AppShellAside,
+    Footer: AppShellFooter,
+});

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

@@ -0,0 +1,45 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export interface AppShellProps extends React.ComponentProps<"div"> {
+    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?: {
+        height: number | string;
+    };
+    padding?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    /** Per-part overrides: root, header, navbar, aside, main, footer. */
+    slotStyles?: SlotStyles;
+}
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+    slotStyles?: SlotStyles;
+}
+export interface AppShellNavbarProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+    slotStyles?: SlotStyles;
+}
+export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+    slotStyles?: SlotStyles;
+}
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    slotStyles?: SlotStyles;
+}
+export interface AppShellFooterProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    withBorder?: boolean;
+    slotStyles?: SlotStyles;
+}

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

@@ -0,0 +1,2 @@
+"use client";
+export {};

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

@@ -1 +1,2 @@
 export * from "./app-shell";
+export type { AppShellAsideProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarProps, AppShellProps, } from "./app-shell.types";

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

@@ -3,4 +3,4 @@
  * 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;
+export declare function AreaChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, curve, stacked, dataLabels, yAxisLabel, referenceLines, slotStyles, isLoading, emptyMessage, options: customOptions, }: AreaChartProps): import("react").JSX.Element;

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

@@ -7,9 +7,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
+import { getDefaultChartOptions } from "./chart-utils.js";
 /**
  * Check if series data is empty (no series or all series have empty data arrays)
  */
@@ -18,7 +19,7 @@ function isSeriesEmpty(series) {
         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, }) {
+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 = [], slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && isSeriesEmpty(series);
     const chartOptions = useMemo(() => {
@@ -168,5 +169,5 @@ export function AreaChart({ series, categories, colors, height = 350, width = "1
         referenceLines,
         customOptions,
     ]);
-    return (_jsx(Chart, { "data-kala-component": "charts-area-chart", className: cn("w-full", className), options: chartOptions, series: series, type: "area", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-area-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "area", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

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

@@ -3,4 +3,4 @@
  * 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;
+export declare function BarChart({ series, categories, colors, height, width, className, title, subtitle, toolbar, animations, horizontal, stacked, dataLabels, barWidth, slotStyles, isLoading, emptyMessage, options: customOptions, }: BarChartProps): import("react").JSX.Element;

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

@@ -7,9 +7,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@kala-ui/react/lib/utils";
 import { useMemo } from "react";
+import { chartStyles } from "../../config/charts.js";
 import { Chart, getTooltipTheme } from "./chart.js";
 import { useThemeAwareChart } from "./use-theme-aware-chart.js";
-import { getDefaultChartOptions } from "./utils.js";
+import { getDefaultChartOptions } from "./chart-utils.js";
 /**
  * Check if series data is empty (no series or all series have empty data arrays)
  */
@@ -18,7 +19,7 @@ function isSeriesEmpty(series) {
         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, }) {
+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, slotStyles, isLoading, emptyMessage, options: customOptions, }) {
     const { colors: themeColors } = useThemeAwareChart();
     const isEmpty = !isLoading && isSeriesEmpty(series);
     const chartOptions = useMemo(() => {
@@ -149,5 +150,5 @@ export function BarChart({ series, categories, colors, height = 350, width = "10
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { "data-kala-component": "charts-bar-chart", className: cn("w-full", className), options: chartOptions, series: series, type: "bar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-bar-chart", className: cn(chartStyles.root, className), slotStyles: slotStyles, options: chartOptions, series: series, type: "bar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

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

@@ -4,33 +4,12 @@
  * 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

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";
+import { chartSkeletonStyles } from "../../config/charts.js";
 export function ChartSkeleton({ height = 350, showLegend = true, legendCount = 4, showTable = false, tableRows = 5, tableColumns = 3, className, }) {
-    return (_jsxs("div", { "data-kala-component": "charts-chart-skeleton", 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}`))) })] }) }))] }));
+    return (_jsxs("div", { "data-kala-component": "charts-chart-skeleton", className: cn(chartSkeletonStyles.root, className), children: [_jsx("div", { className: chartSkeletonStyles.frame, style: { height: `${height}px` }, children: _jsx("div", { className: chartSkeletonStyles.frameInner, children: _jsx(Skeleton, { className: chartSkeletonStyles.frameFill }) }) }), showLegend && (_jsx("div", { className: chartSkeletonStyles.legendRow, children: Array.from({ length: legendCount }).map((_, i) => (_jsxs("div", { className: chartSkeletonStyles.legendItem, children: [_jsx(Skeleton, { className: chartSkeletonStyles.legendDot }), _jsx(Skeleton, { className: chartSkeletonStyles.legendLabel })] }, `legend-${i}`))) })), showTable && (_jsx("div", { className: chartSkeletonStyles.tableWrap, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: Array.from({ length: tableColumns }).map((_, index) => (_jsx(TableHead, { children: _jsx(Skeleton, { className: chartSkeletonStyles.tableHead }) }, `header-${index}`))) }) }), _jsx(TableBody, { children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx(TableRow, { className: chartSkeletonStyles.tableRow, children: Array.from({ length: tableColumns }).map((_, colIndex) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: chartSkeletonStyles.tableCell }) }, `cell-${rowIndex}-${colIndex}`))) }, `row-${rowIndex}`))) })] }) }))] }));
 }

package/dist/components/charts/chart-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 {};

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

@@ -0,0 +1,135 @@
+"use client";
+/**
+ * Chart Utilities
+ * Helper functions and default configurations for charts
+ */
+import { getChartColors, getThemeAwareChartOptions } from "./theme-utils.js";
+/**
+ * Get default chart options that match our design system
+ * @param theme - Optional theme override, otherwise detects from DOM
+ */
+export function getDefaultChartOptions(theme) {
+    const themeColors = getChartColors(theme);
+    const themeOptions = getThemeAwareChartOptions(theme);
+    return {
+        chart: {
+            fontFamily: "inherit",
+            foreColor: "var(--muted-foreground)",
+            background: "transparent",
+            toolbar: {
+                show: false,
+            },
+            zoom: {
+                enabled: false,
+            },
+        },
+        grid: {
+            borderColor: themeColors.grid,
+            strokeDashArray: 3,
+            xaxis: {
+                lines: {
+                    show: false,
+                },
+            },
+        },
+        dataLabels: {
+            enabled: false,
+        },
+        tooltip: {
+            theme: themeOptions.tooltip.theme,
+        },
+        legend: {
+            labels: {
+                colors: themeOptions.legend.labels.colors,
+            },
+        },
+    };
+}
+/**
+ * Default color palette matching design tokens
+ * @param theme - Optional theme override, otherwise detects from DOM
+ * @deprecated Use getChartColors() instead for theme-aware colors
+ */
+export function defaultColors(theme) {
+    const colors = getChartColors(theme);
+    return {
+        primary: colors.primary,
+        success: colors.success,
+        warning: colors.warning,
+        destructive: colors.destructive,
+        info: colors.info,
+        mixed: colors.mixed,
+    };
+}
+/**
+ * Format number with appropriate units
+ */
+export function formatNumber(value) {
+    if (value >= 1000000) {
+        return `${(value / 1000000).toFixed(1)}M`;
+    }
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(1)}K`;
+    }
+    return value.toFixed(0);
+}
+/**
+ * Format currency values
+ */
+export function formatCurrency(value, currency = "USD") {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+    }).format(value);
+}
+/**
+ * Format percentage values
+ */
+export function formatPercentage(value, decimals = 1) {
+    return `${value.toFixed(decimals)}%`;
+}
+/**
+ * Generate gradient colors for area charts
+ */
+export function createGradient(_color, opacity = 0.7) {
+    return {
+        type: "gradient",
+        gradient: {
+            shadeIntensity: 1,
+            opacityFrom: opacity,
+            opacityTo: opacity * 0.3,
+            stops: [0, 90, 100],
+        },
+    };
+}
+/**
+ * Get responsive breakpoints for charts
+ */
+export function getResponsiveOptions() {
+    return [
+        {
+            breakpoint: 768,
+            options: {
+                chart: {
+                    height: 300,
+                },
+                legend: {
+                    position: "bottom",
+                },
+            },
+        },
+        {
+            breakpoint: 480,
+            options: {
+                chart: {
+                    height: 250,
+                },
+                legend: {
+                    show: false,
+                },
+            },
+        },
+    ];
+}

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

@@ -11,6 +11,8 @@ export interface ChartProps extends Props {
     emptyMessage?: string;
     skeletonConfig?: ChartSkeletonConfig;
     skeleton?: React.ReactNode;
+    /** Per-part overrides: root, empty, emptyIcon, emptyText. */
+    slotStyles?: import("@kala-ui/react/lib/slot-styles").SlotStyles;
 }
 /**
  * Get tooltip theme from DOM safely (SSR-compatible)
@@ -20,6 +22,6 @@ 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 declare function Chart({ className, isLoading, isEmpty, emptyMessage, skeletonConfig, skeleton, slotStyles: slotStylesRaw, ...props }: ChartProps): import("react").JSX.Element;
 export { ChartSkeleton } from "./chart-skeleton";
 export { getTooltipTheme };

package/dist/components/charts/chart.js

@@ -4,8 +4,11 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Base Chart Component
  * React component for ApexCharts with built-in loading and empty states
  */
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
 import { lazy, Suspense } from "react";
+import { chartStyles } from "../../config/charts.js";
 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
@@ -24,7 +27,10 @@ function getTooltipTheme() {
  * 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 }) {
+export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data available", skeletonConfig, skeleton, slotStyles: slotStylesRaw, ...props }) {
+    const slotStyles = useSlotStyles("charts", slotStylesRaw);
+    const { "data-kala-component": _marker, ...chartProps } = props;
+    const markerProps = { "data-kala-component": _marker };
     // Render skeleton if loading
     if (isLoading) {
         if (skeleton) {
@@ -32,6 +38,9 @@ export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data a
         }
         return (_jsx(ChartSkeleton, { "data-kala-component": "charts-chart", ...(skeletonConfig || {}), className: className }));
     }
+    const emptyPart = applySlot(chartStyles.empty, slotStyles?.empty);
+    const emptyIcon = applySlot(chartStyles.emptyIcon, slotStyles?.emptyIcon);
+    const emptyText = applySlot(chartStyles.emptyText, slotStyles?.emptyText);
     // Render empty state when no data
     if (isEmpty) {
         // Height may arrive as a number (px) or a CSS length string ("20rem",
@@ -40,9 +49,10 @@ export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data a
         const height = typeof configuredHeight === "number"
             ? `${configuredHeight}px`
             : configuredHeight;
-        return (_jsxs("div", { "data-kala-component": "charts-chart", 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 (_jsxs("div", { "data-kala-component": "charts-chart", className: cn(emptyPart.className, className), style: { height, ...emptyPart.style }, children: [_jsxs("svg", { className: emptyIcon.className, 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: emptyText.className, children: emptyMessage })] }));
     }
-    return (_jsx("div", { "data-kala-component": "charts-chart", className: cn("w-full", className), children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...props }) }) }));
+    const root = applySlot(cn(chartStyles.root, className), slotStyles?.root);
+    return (_jsx("div", { "data-kala-component": _marker ?? "charts-chart", className: root.className, style: root.style, children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...chartProps }) }) }));
 }
 export { ChartSkeleton } from "./chart-skeleton.js";
 export { getTooltipTheme };