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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @kala-ui/react-app
 
+## 0.1.0-beta.1
+
+### Minor Changes
+
+- b5cd997: Add stable `data-kala-component` identification attributes to every component root.
+  
+  Every component (and each compound part, e.g. `dialog-content`, `card-header`, `data-table-toolbar`) now renders `data-kala-component="<kebab-name>"` on its root element. This is a guaranteed-stable public API for DevTools debugging, e2e selectors, and targeted consumer CSS overrides.
+  
+  - No styling or behavior changes — the attribute is identification only.
+  - The ad-hoc `data-comp` markers previously used by a few components were migrated to `data-kala-component` (update any selectors that queried `[data-comp='...']`).
+  - shadcn-compatible `data-slot` attributes are unchanged.
+
+### Patch Changes
+
+- Updated dependencies [b5cd997]
+  - @kala-ui/react@0.1.0-beta.1
+
 ## 0.1.0-beta.0
 
 ### Added

package/README.md

@@ -4,18 +4,18 @@ App-level composite components for [Kala UI](https://github.com/krr2020/kala-ui)
 
 ## What's inside
 
-- **Application chrome** — `AppShell`, `Header`, `Sidebar`, `Footer`, `Navigation`, `NavLink`
+- **Application chrome** — `AppShell`, `Header`, `Sidebar`, `Footer`, `Navigation`, `NavLink` (plus the `isActivePath` routing helper from `@kala-ui/react-app/lib/active-path`)
 - **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)
+- **Charts** — `AreaChart`, `BarChart`, `LineChart`, `DonutChart`, `RadialBarChart`, `SparklineChart` (ApexCharts wrappers, theme-aware, lazy-loaded)
 - **Dashboard & domain widgets** — `MetricCard`, `SessionCard`, `UserMenuDropdown`, `SocialLoginButton(s)`
 
 ## Installation
 
 ```bash
-pnpm add @kala-ui/react-app @kala-ui/react
+pnpm add @kala-ui/react-app@beta @kala-ui/react@beta
 ```
 
-Import the core stylesheet first, then this package's utilities:
+Requires React 19.2+. Import the core stylesheet first, then this package's utilities (theme, tokens, preflight and `kala-*` helpers ship once via the core):
 
 ```css
 @import "@kala-ui/react/styles";
@@ -29,6 +29,11 @@ import { Button, ThemeProvider } from "@kala-ui/react";
 import { AppShell, DataTable } from "@kala-ui/react-app";
 ```
 
+Every component has a subpath export (`@kala-ui/react-app/<component>`) plus
+the barrel. All component modules ship a `"use client"` banner, so they import
+cleanly into React Server Component apps — charts lazy-load ApexCharts on the
+client only.
+
 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

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

@@ -28,7 +28,7 @@ function AppShellBase({ children, className, header, navbar, aside, footer, padd
             ? `${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 }) }));
+    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 }) }));
 }
 export const AppShell = Object.assign(AppShellBase, {
     Header: AppShellHeader,
@@ -41,7 +41,7 @@ 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 }));
+    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 }));
 }
 function AppShellNavbar({ ref, className, withBorder = true, ...props }) {
     const { navbar } = React.useContext(AppShellContext);
@@ -49,7 +49,7 @@ function AppShellNavbar({ ref, className, withBorder = true, ...props }) {
         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: {
+    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: {
             width: "var(--app-shell-navbar-width)",
             top: "var(--app-shell-header-height)",
             height: "calc(100vh - var(--app-shell-header-height))",
@@ -60,7 +60,7 @@ function AppShellAside({ ref, className, withBorder = true, ...props }) {
     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: {
+    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: {
             width: "var(--app-shell-aside-width)",
             top: "var(--app-shell-header-height)",
             height: "calc(100vh - var(--app-shell-header-height))",
@@ -76,7 +76,7 @@ function AppShellMain({ ref, className, ...props }) {
         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)]", 
+    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 &&
@@ -87,5 +87,5 @@ 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 }));
+    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 }));
 }

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

@@ -168,5 +168,5 @@ export function AreaChart({ series, categories, colors, height = 350, width = "1
         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 }));
+    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 }));
 }

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

@@ -149,5 +149,5 @@ export function BarChart({ series, categories, colors, height = 350, width = "10
         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 }));
+    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 }));
 }

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

@@ -9,5 +9,5 @@ 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}`))) })] }) }))] }));
+    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}`))) })] }) }))] }));
 }

package/dist/components/charts/chart.js

@@ -30,7 +30,7 @@ export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data a
         if (skeleton) {
             return _jsx(_Fragment, { children: skeleton });
         }
-        return _jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className });
+        return (_jsx(ChartSkeleton, { "data-kala-component": "charts-chart", ...(skeletonConfig || {}), className: className }));
     }
     // Render empty state when no data
     if (isEmpty) {
@@ -40,9 +40,9 @@ export function Chart({ className, isLoading, isEmpty, emptyMessage = "No data a
         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 (_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 (_jsx("div", { className: cn("w-full", className), children: _jsx(Suspense, { fallback: skeleton ?? (_jsx(ChartSkeleton, { ...(skeletonConfig || {}), className: className })), children: _jsx(ReactApexChart, { ...props }) }) }));
+    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 }) }) }));
 }
 export { ChartSkeleton } from "./chart-skeleton.js";
 export { getTooltipTheme };

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

@@ -138,9 +138,9 @@ export function DonutChart({ series, labels, colors, height = 350, width = "100%
         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 }));
+    return (_jsx(Chart, { "data-kala-component": "charts-donut-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 });
+    return (_jsx(DonutChart, { "data-kala-component": "charts-pie-chart", ...props, donut: false }));
 }

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

@@ -154,5 +154,5 @@ export function LineChart({ series, categories, colors, height = 350, width = "1
         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 }));
+    return (_jsx(Chart, { "data-kala-component": "charts-line-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.js

@@ -111,5 +111,5 @@ export function RadialBarChart({ series, labels, colors, height = 350, width = "
         subtitle,
         customOptions,
     ]);
-    return (_jsx(Chart, { className: cn("w-full", className), options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
+    return (_jsx(Chart, { "data-kala-component": "charts-radial-bar-chart", className: cn("w-full", className), options: chartOptions, series: series, type: "radialBar", height: height, width: width, isLoading: isLoading, isEmpty: isEmpty, emptyMessage: emptyMessage }));
 }

package/dist/components/data-table/column-filters.js

@@ -14,7 +14,7 @@ export function ColumnFilters({ filterableColumns, activeFilters, onFilterChange
         return null;
     }
     const hasActiveFilters = activeFilters.length > 0;
-    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [filterableColumns.map((column) => {
+    return (_jsxs("div", { "data-kala-component": "data-table-column-filters", className: "flex flex-wrap items-center gap-2", children: [filterableColumns.map((column) => {
                 const activeFilter = activeFilters.find((f) => f.key === column.key);
                 const filterValue = activeFilter?.value;
                 if (column.type === "select" && column.options) {

package/dist/components/data-table/column-header-filter.js

@@ -64,7 +64,7 @@ export function ColumnHeaderFilter({ column, activeFilters, onFilterChange, onFi
         onFilterRemove(column.key);
         setTextValue("");
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px]", children: _jsx(Text, { size: "xs", weight: "bold", className: "text-primary-foreground", children: column.type === "text" ? "1" : activeCount }) })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", justify: "between", children: [_jsxs(Heading, { size: "h6", weight: "medium", className: "text-sm", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx(Stack, { gap: 2, className: "max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
+    return (_jsxs(Popover, { "data-kala-component": "data-table-column-header-filter", open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0 hover:bg-muted relative", "aria-label": `Filter by ${column.label}`, children: [_jsx(Filter, { className: `h-4 w-4 ${hasActiveFilter ? "text-primary" : "text-muted-foreground"}` }), hasActiveFilter ? (_jsx(Badge, { className: "absolute -top-1 -right-1 h-4 w-4 p-0 flex items-center justify-center text-[10px]", children: _jsx(Text, { size: "xs", weight: "bold", className: "text-primary-foreground", children: column.type === "text" ? "1" : activeCount }) })) : null] }) }), _jsx(PopoverContent, { className: "w-64 p-3", align: "start", children: _jsxs(Stack, { gap: 3, children: [_jsxs(Flex, { align: "center", justify: "between", children: [_jsxs(Heading, { size: "h6", weight: "medium", className: "text-sm", children: ["Filter by ", column.label] }), hasActiveFilter ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: handleClear, className: "h-7 px-2 text-xs text-muted-foreground", children: [_jsx(X, { className: "h-3 w-3 mr-1" }), "Clear"] })) : null] }), column.type === "select" && column.options ? (_jsx(Stack, { gap: 2, className: "max-h-[300px] overflow-y-auto", children: column.options.map((option) => {
                                 const isChecked = selectedValues.includes(option.value);
                                 return (_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Checkbox, { id: `${String(column.key)}-${option.value}`, checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(option.value, checked === true) }), _jsx(Label, { htmlFor: `${String(column.key)}-${option.value}`, className: "text-sm font-normal cursor-pointer flex-1 text-foreground", children: option.label })] }, option.value));
                             }) })) : (_jsxs(Stack, { gap: 2, children: [_jsx(Input, { type: "text", placeholder: column.placeholder || `Filter by ${column.label}`, value: textValue, onChange: (e) => setTextValue(e.target.value), onKeyDown: (e) => {

package/dist/components/data-table/data-table-body-rows.js

@@ -9,7 +9,7 @@ import { Checkbox } from "@kala-ui/react/checkbox";
 import { cn } from "@kala-ui/react/lib/utils";
 import { TableBody, TableCell, TableRow } from "@kala-ui/react/table";
 export function DataTableBodyRows({ displayData, columns, selection, selectedIds, onSelectRow, onRowClick, compact, striped, hoverable, getRowClassName, getRowAttributes, hasPagination, hasFooter, }) {
-    return (_jsx(TableBody, { children: displayData.map((row, rowIndex) => {
+    return (_jsx(TableBody, { "data-kala-component": "data-table-body-rows", children: displayData.map((row, rowIndex) => {
             const isSelectable = !selection?.isRowSelectable || selection.isRowSelectable(row);
             const rowId = selection?.getRowId(row);
             const isSelected = rowId ? selectedIds.has(rowId) : false;

package/dist/components/data-table/data-table-filter-chips.js

@@ -13,7 +13,7 @@ import { X } from "lucide-react";
 export function DataTableFilterChips({ filterConfigs, filterableColumns, onSetFilter, onRemoveFilter, onClearFilters, }) {
     if (filterConfigs.length === 0)
         return null;
-    return (_jsxs(Flex, { align: "center", gap: 2, className: "mb-4 flex-wrap", children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
+    return (_jsxs(Flex, { "data-kala-component": "data-table-filter-chips", align: "center", gap: 2, className: "mb-4 flex-wrap", children: [_jsx(Text, { size: "sm", className: "text-muted-foreground", children: "Active filters:" }), filterConfigs.map((filter) => {
                 const column = filterableColumns.find((fc) => fc.key === filter.key);
                 if (!column)
                     return null;

package/dist/components/data-table/data-table-header-row.js

@@ -13,7 +13,7 @@ import { TableHead, TableHeader, TableRow } from "@kala-ui/react/table";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { ColumnHeaderFilter } from "./column-header-filter.js";
 export function DataTableHeaderRow({ columns, selection, sortConfig, onToggleSort, filterableColumns, filterConfigs, onSetFilter, onRemoveFilter, isAllSelected, isSomeSelected, onSelectAll, stickyHeader, }) {
-    return (_jsx(TableHeader, { className: stickyHeader
+    return (_jsx(TableHeader, { "data-kala-component": "data-table-header-row", className: stickyHeader
             ? "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm [&_tr]:border-0"
             : "[&_tr]:border-0", children: _jsxs(TableRow, { className: "border-0", children: [selection?.enabled && (_jsx(TableHead, { className: stickyHeader
                         ? "w-12 rounded-tl-lg border-b border-border-strong/50"

package/dist/components/data-table/data-table-skeleton.js

@@ -15,7 +15,7 @@ import { Select, SelectTrigger, SelectValue } from "@kala-ui/react/select";
 import { Skeleton } from "@kala-ui/react/skeleton";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@kala-ui/react/table";
 export function DataTableSkeleton({ rows = 5, columns, showSearch = false, showFilters = false, filterCount = 3, showPagination = false, showSelection = false, showBulkActions = false, stickyHeader = true, stickyFooter = false, }) {
-    return (_jsxs("div", { className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { color: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden kala-surface-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
+    return (_jsxs("div", { "data-kala-component": "data-table-skeleton", className: "flex flex-col", children: [showSearch && (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-4 shrink-0", children: [_jsx("div", { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "search", placeholder: "Search...", disabled: true, className: "opacity-50" }) }), showBulkActions && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap min-h-[36px]", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "0 selected" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Edit" }), _jsx(Button, { variant: "outline", size: "sm", disabled: true, className: "opacity-50", children: "Delete" })] }))] })), showFilters && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-4 shrink-0", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Active filters:" }), Array.from({ length: filterCount }).map((_, i) => (_jsxs(Badge, { color: "secondary", className: "gap-1.5 pl-2 pr-1 py-1 bg-primary/10 text-primary border-primary/20", children: [_jsx("span", { className: "text-xs font-medium", children: "Filter: Value" }), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-4 w-4 p-0 hover:bg-primary/20 rounded-sm", children: _jsx(Skeleton, { className: "h-3 w-3" }) })] }, `filter-${i}`))), _jsx(Button, { variant: "ghost", size: "sm", disabled: true, className: "h-7 px-2 text-xs text-muted-foreground hover:text-foreground", children: "Clear all" })] })), _jsx("div", { className: cn("border relative overflow-hidden kala-surface-card", showPagination ? "rounded-t-lg border-b-0" : "rounded-lg", stickyFooter ? "flex-1 min-h-0" : ""), children: _jsx("div", { className: cn("overflow-auto relative", showPagination ? "rounded-t-lg" : "rounded-lg", stickyFooter ? "flex-1 min-h-0 max-h-[70vh]" : "max-h-[600px]"), children: _jsxs("table", { className: "w-full border-separate border-spacing-0 caption-bottom text-sm", children: [_jsx(TableHeader, { className: cn(stickyHeader && "sticky top-0 z-1 bg-muted/95 backdrop-blur-sm", "[&_tr]:border-0"), children: _jsxs(TableRow, { className: "border-0", children: [showSelection && (_jsx(TableHead, { className: cn("w-12 rounded-tl-lg", stickyHeader
                                                 ? "border-b border-border-strong/50"
                                                 : "border-b"), children: _jsx(Checkbox, { disabled: true }) })), columns.map((column, index) => {
                                             const isFirst = !showSelection && index === 0;

package/dist/components/data-table/data-table-toolbar.js

@@ -17,7 +17,7 @@ export function DataTableToolbar({ searchConfig, searchQuery, onSearchChange, bu
     const showRight = toolbarContent || bulkActions;
     if (!showSearch && !showRight)
         return null;
-    return (_jsxs(Flex, { align: "center", justify: "between", gap: 4, className: cn("mb-4 flex-wrap", className), children: [showSearch && (_jsx(Box, { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "text", placeholder: searchConfig?.placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSearchChange(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig?.ariaLabel }) })), showRight && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap", children: [toolbarContent, bulkActions && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap min-h-[36px]", children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: [selectedIdsCount, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant === "destructive"
+    return (_jsxs(Flex, { "data-kala-component": "data-table-toolbar", align: "center", justify: "between", gap: 4, className: cn("mb-4 flex-wrap", className), children: [showSearch && (_jsx(Box, { className: "flex-1 max-w-sm", children: _jsx(Input, { type: "text", placeholder: searchConfig?.placeholder, value: searchQuery, onChange: (e) => onSearchChange(e.target.value), prefixIcon: _jsx(Search, { className: "h-4 w-4" }), suffixIcon: searchQuery ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSearchChange(""), className: "p-1 text-muted-foreground hover:text-foreground h-auto", "aria-label": "Clear search", children: _jsx(X, { className: "h-4 w-4" }) })) : null, "aria-label": searchConfig?.ariaLabel }) })), showRight && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap", children: [toolbarContent, bulkActions && (_jsxs(Flex, { align: "center", gap: 2, className: "flex-wrap min-h-[36px]", children: [_jsxs(Text, { size: "sm", className: "text-muted-foreground", children: [selectedIdsCount, " selected"] }), bulkActions.map((action) => (_jsxs(Button, { variant: action.variant === "destructive"
                                     ? "solid"
                                     : (action.variant ?? "outline"), color: action.variant === "destructive" ? "destructive" : undefined, size: "sm", onClick: () => action.onClick(selectedRows), disabled: selectedIdsCount === 0 || action.disabled, className: selectedIdsCount === 0
                                     ? "opacity-50 cursor-not-allowed"

package/dist/components/data-table/data-table.js

@@ -212,7 +212,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
     // Render loading state
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Stack, { gap: 4, className: className, children: skeleton }));
+            return (_jsx(Stack, { "data-kala-component": "data-table", gap: 4, className: className, children: skeleton }));
         }
         const showSearch = !!searchConfig;
         const showFilters = !!filterableColumns;
@@ -220,7 +220,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
         const showSelection = !!selection?.enabled;
         const showBulkActions = !!bulkActions;
         const skeletonRows = skeletonConfig?.rows ?? loadingConfig?.rows ?? 5;
-        return (_jsx(Stack, { gap: 4, className: className, children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
+        return (_jsx(Stack, { "data-kala-component": "data-table", gap: 4, className: className, children: _jsx(DataTableSkeleton, { rows: skeletonRows, columns: columns, showSearch: showSearch, showFilters: showFilters, showPagination: showPagination, showSelection: showSelection, showBulkActions: showBulkActions, stickyHeader: stickyHeader, stickyFooter: stickyFooter }) }));
     }
     // Compute empty state config
     const emptyConfig = {
@@ -230,7 +230,7 @@ export function DataTable({ data, columns, searchable, pagination, defaultSort,
             : "There is no data to display at the moment.",
         ...emptyState,
     };
-    return (_jsxs(Stack, { className: cn(stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, gap: 0, children: [_jsx(DataTableToolbar, { searchConfig: searchConfig, searchQuery: searchQuery, onSearchChange: setSearchQuery, bulkActions: bulkActions, selectedRows: selectedRows, selectedIdsCount: selectedIds.size, toolbarContent: toolbarContent, hasData: data.length > 0, className: stickyFooter ? "shrink-0" : undefined }), filterableColumns && (_jsx("div", { className: stickyFooter ? "shrink-0" : undefined, children: _jsx(DataTableFilterChips, { filterConfigs: filterConfigs, filterableColumns: filterableColumns, onSetFilter: setFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) })), displayData.length === 0 && !filterConfigs.length && !searchQuery ? (_jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyState?.icon && { icon: emptyState.icon }), ...(emptyState?.action && { action: emptyState.action }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { className: cn("border relative overflow-hidden kala-surface-card", stickyFooter && paginationConfig && displayData.length > 0
+    return (_jsxs(Stack, { "data-kala-component": "data-table", className: cn(stickyFooter ? "h-full min-h-0" : "", className), "aria-label": ariaLabel, role: ariaLabel ? "region" : undefined, gap: 0, children: [_jsx(DataTableToolbar, { searchConfig: searchConfig, searchQuery: searchQuery, onSearchChange: setSearchQuery, bulkActions: bulkActions, selectedRows: selectedRows, selectedIdsCount: selectedIds.size, toolbarContent: toolbarContent, hasData: data.length > 0, className: stickyFooter ? "shrink-0" : undefined }), filterableColumns && (_jsx("div", { className: stickyFooter ? "shrink-0" : undefined, children: _jsx(DataTableFilterChips, { filterConfigs: filterConfigs, filterableColumns: filterableColumns, onSetFilter: setFilter, onRemoveFilter: removeFilter, onClearFilters: clearFilters }) })), displayData.length === 0 && !filterConfigs.length && !searchQuery ? (_jsx(EmptyState, { title: emptyConfig.title, description: emptyConfig.description, ...(emptyState?.icon && { icon: emptyState.icon }), ...(emptyState?.action && { action: emptyState.action }) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { className: cn("border relative overflow-hidden kala-surface-card", stickyFooter && paginationConfig && displayData.length > 0
                             ? "flex-1 min-h-0"
                             : "", bordered && "border-2", paginationConfig && displayData.length > 0
                             ? "rounded-t-lg border-b-0"

package/dist/components/data-table/pagination-nav.js

@@ -19,5 +19,5 @@ export function PaginationNav({ currentPage, totalPages, hasPreviousPage, hasNex
         boundaries: 1,
         onPageChange,
     });
-    return (_jsxs(Flex, { align: "center", justify: "center", wrap: "wrap", gap: 1, children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onPreviousPage, disabled: !hasPreviousPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Previous page" })] }), range.map((item, index) => item === DOTS ? (_jsx(Flex, { align: "center", justify: "center", className: "h-8 w-8", "aria-hidden": true, children: _jsx(MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" }) }, `dots-${index}`)) : (_jsx(Button, { variant: item === currentPage ? "solid" : "outline", size: "sm", onClick: () => onPageChange(item), className: "h-8 w-8 p-0 text-xs", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : undefined, children: item }, item))), _jsxs(Button, { variant: "outline", size: "sm", onClick: onNextPage, disabled: !hasNextPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronRight, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Next page" })] })] }));
+    return (_jsxs(Flex, { "data-kala-component": "data-table-pagination-nav", align: "center", justify: "center", wrap: "wrap", gap: 1, children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onPreviousPage, disabled: !hasPreviousPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Previous page" })] }), range.map((item, index) => item === DOTS ? (_jsx(Flex, { align: "center", justify: "center", className: "h-8 w-8", "aria-hidden": true, children: _jsx(MoreHorizontal, { className: "h-4 w-4 text-muted-foreground" }) }, `dots-${index}`)) : (_jsx(Button, { variant: item === currentPage ? "solid" : "outline", size: "sm", onClick: () => onPageChange(item), className: "h-8 w-8 p-0 text-xs", "aria-label": `Page ${item}`, "aria-current": item === currentPage ? "page" : undefined, children: item }, item))), _jsxs(Button, { variant: "outline", size: "sm", onClick: onNextPage, disabled: !hasNextPage, className: "h-8 w-8 p-0", children: [_jsx(ChevronRight, { className: "h-4 w-4" }), _jsx(Box, { as: "span", className: "sr-only", children: "Next page" })] })] }));
 }

package/dist/components/dnd/dnd.js

@@ -54,7 +54,7 @@ function createDragDropSensors(options = {}) {
 function DragDropContext({ children, sensors: sensorsProp, useSensors: useSensorsOptions, ...props }) {
     const defaultSensors = createDragDropSensors(useSensorsOptions);
     const sensors = sensorsProp ?? defaultSensors;
-    return (_jsx(DndKitContext, { sensors: sensors, ...props, children: children }));
+    return (_jsx(DndKitContext, { "data-kala-component": "dnd-drag-drop-context", sensors: sensors, ...props, children: children }));
 }
 function Droppable({ ref, children, className, id, disabled = false, ...props }) {
     const { isOver, setNodeRef } = useDroppable({
@@ -64,7 +64,7 @@ function Droppable({ ref, children, className, id, disabled = false, ...props })
     const content = typeof children === "function"
         ? children({ isOver, setNodeRef })
         : children;
-    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-droppable", ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
 }
 function Draggable({ ref, children, className, id, disabled = false, ...props }) {
     const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
@@ -79,11 +79,11 @@ function Draggable({ ref, children, className, id, disabled = false, ...props })
             transform: CSS.Translate.toString(transform),
         }
         : undefined;
-    return (_jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-draggable", ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
 }
 function SortableContext({ children, items, strategy = verticalListSortingStrategy, }) {
     const itemIds = React.useMemo(() => items.map((item) => typeof item === "object" && "id" in item ? item.id : item), [items]);
-    return (_jsx(SortableContextKit, { items: itemIds, strategy: strategy, children: children }));
+    return (_jsx(SortableContextKit, { "data-kala-component": "dnd-sortable-context", items: itemIds, strategy: strategy, children: children }));
 }
 const SortableHandleContext = React.createContext(null);
 function SortableItem({ ref, children, className, id, disabled = false, handle = false, ...props }) {
@@ -108,7 +108,7 @@ function SortableItem({ ref, children, className, id, disabled = false, handle =
         transition,
         zIndex: isDragging ? 9999 : undefined,
     };
-    return (_jsx(SortableHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
+    return (_jsx(SortableHandleContext.Provider, { "data-kala-component": "dnd-sortable-item", value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
 }
 function SortableHandle({ ref, children, className, ...props }) {
     const sortable = React.useContext(SortableHandleContext);
@@ -116,10 +116,10 @@ function SortableHandle({ ref, children, className, ...props }) {
         console.warn("SortableHandle must be rendered inside a SortableItem to receive drag listeners.");
     }
     const content = typeof children === "function" ? children(sortable?.listeners) : children;
-    return (_jsx("div", { ref: useMergedRef(ref, sortable?.setActivatorNodeRef), className: cn("cursor-grab active:cursor-grabbing", className), ...(sortable?.attributes ?? {}), ...(sortable?.listeners ?? {}), ...props, children: content }));
+    return (_jsx("div", { "data-kala-component": "dnd-sortable-handle", ref: useMergedRef(ref, sortable?.setActivatorNodeRef), className: cn("cursor-grab active:cursor-grabbing", className), ...(sortable?.attributes ?? {}), ...(sortable?.listeners ?? {}), ...props, children: content }));
 }
 function DragOverlayComponent({ children, className, dropAnimation, ...props }) {
-    return (_jsx(DragOverlay, { dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
+    return (_jsx(DragOverlay, { "data-kala-component": "dnd-drag-overlay-component", dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
 }
 export { createDragDropSensors as useDragDropSensors, DragDropContext, Draggable, DragOverlayComponent, Droppable, 
 // Re-export sensors

package/dist/components/footer/footer.js

@@ -4,5 +4,5 @@ import { cn } from "@kala-ui/react/lib/utils";
 export function Footer({ ref, className, linkSections = [], socialLinks = [], copyright, children, centered = false, ...props }) {
     const currentYear = new Date().getFullYear();
     const copyrightText = copyright || `© ${currentYear} All rights reserved.`;
-    return (_jsx("footer", { ref: ref, "data-comp": "footer", className: cn("w-full bg-muted text-muted-foreground border-t", className), ...props, children: _jsxs("div", { className: "container mx-auto px-4 py-8 md:py-12", children: [centered && children && (_jsx("div", { className: "mb-12 flex flex-col items-center text-center", children: children })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8", children: [linkSections.map((section) => (_jsxs("nav", { "aria-label": `${section.title} links`, children: [_jsx("h3", { className: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4", children: section.title }), _jsx("ul", { className: "space-y-2", children: section.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, className: "text-muted-foreground hover:text-primary transition-colors text-sm", children: link.label }) }, `${link.href}-${link.label}`))) })] }, section.title))), !centered && children && (_jsx("div", { className: "md:col-span-2 lg:col-span-1", children: children }))] }), _jsxs("div", { className: cn("border-t pt-8 flex flex-col gap-4", !centered && "md:flex-row md:justify-between md:items-center", centered && "items-center"), children: [_jsx("div", { className: "text-sm text-muted-foreground order-2 md:order-1", children: copyrightText }), socialLinks.length > 0 && (_jsx("div", { className: "flex items-center gap-4 order-1 md:order-2", children: socialLinks.map((social) => (_jsx("a", { href: social.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-primary transition-colors", "aria-label": social.name, children: social.icon }, social.href))) }))] })] }) }));
+    return (_jsx("footer", { "data-kala-component": "footer", ref: ref, className: cn("w-full bg-muted text-muted-foreground border-t", className), ...props, children: _jsxs("div", { className: "container mx-auto px-4 py-8 md:py-12", children: [centered && children && (_jsx("div", { className: "mb-12 flex flex-col items-center text-center", children: children })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8", children: [linkSections.map((section) => (_jsxs("nav", { "aria-label": `${section.title} links`, children: [_jsx("h3", { className: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4", children: section.title }), _jsx("ul", { className: "space-y-2", children: section.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, className: "text-muted-foreground hover:text-primary transition-colors text-sm", children: link.label }) }, `${link.href}-${link.label}`))) })] }, section.title))), !centered && children && (_jsx("div", { className: "md:col-span-2 lg:col-span-1", children: children }))] }), _jsxs("div", { className: cn("border-t pt-8 flex flex-col gap-4", !centered && "md:flex-row md:justify-between md:items-center", centered && "items-center"), children: [_jsx("div", { className: "text-sm text-muted-foreground order-2 md:order-1", children: copyrightText }), socialLinks.length > 0 && (_jsx("div", { className: "flex items-center gap-4 order-1 md:order-2", children: socialLinks.map((social) => (_jsx("a", { href: social.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-primary transition-colors", "aria-label": social.name, children: social.icon }, social.href))) }))] })] }) }));
 }

package/dist/components/header/header-skeleton.js

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 export function HeaderSkeleton({ showNavigation = true, navItemCount = 4, showSearch = false, showNotifications = false, showUserMenu = true, className, "data-testid": dataTestId, }) {
-    return (_jsxs("header", { "data-testid": dataTestId || "header-skeleton", className: cn("flex items-center justify-between p-4 border-b bg-background", className), children: [_jsx(Skeleton, { className: "h-8 w-32 flex-shrink-0" }), showNavigation && (_jsx("div", { className: "hidden md:flex gap-6 flex-1 mx-8", children: Array.from({ length: navItemCount }).map((_, i) => (_jsx(Skeleton, { className: "h-4 w-20" }, `nav-${i}`))) })), _jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [showSearch && (_jsx(Skeleton, { className: "hidden sm:block h-9 w-64 rounded-full" })), showNotifications && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), showUserMenu && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), _jsx(Skeleton, { className: "h-9 w-9 md:hidden" })] })] }));
+    return (_jsxs("header", { "data-kala-component": "header-skeleton", "data-testid": dataTestId || "header-skeleton", className: cn("flex items-center justify-between p-4 border-b bg-background", className), children: [_jsx(Skeleton, { className: "h-8 w-32 flex-shrink-0" }), showNavigation && (_jsx("div", { className: "hidden md:flex gap-6 flex-1 mx-8", children: Array.from({ length: navItemCount }).map((_, i) => (_jsx(Skeleton, { className: "h-4 w-20" }, `nav-${i}`))) })), _jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [showSearch && (_jsx(Skeleton, { className: "hidden sm:block h-9 w-64 rounded-full" })), showNotifications && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), showUserMenu && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), _jsx(Skeleton, { className: "h-9 w-9 md:hidden" })] })] }));
 }

package/dist/components/header/header.js

@@ -47,7 +47,7 @@ export function Header({ ref, className, logo, navLinks = [], userMenu, userProf
             return next;
         });
     };
-    return (_jsxs(Box, { as: "header", ref: ref, "data-comp": "header", className: cn("w-full bg-popover border-b sticky top-0 z-20 kala-surface-popover", className), ...props, children: [_jsx(Box, { className: "container mx-auto px-3 sm:px-4 lg:px-6 xl:px-8", children: _jsxs(Flex, { align: "center", justify: "between", className: "h-14 sm:h-16 gap-2 sm:gap-4", children: [_jsx(Box, { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx(Flex, { align: "center", gap: variant === "default" ? 3 : 6, className: cn("hidden lg:flex", variant === "default" ? "flex-1" : ""), children: _jsx(Box, { className: cn("flex", variant === "default" ? "mx-auto" : ""), children: _jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: navLinks.map((link) => (_jsx(NavigationMenuItem, { children: link.children ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { className: cn("text-sm lg:text-base", link.active && "text-primary"), children: link.label }), _jsx(NavigationMenuContent, { children: _jsx(Box, { className: "py-2", children: _jsx(List, { divided: false, className: cn("bg-transparent border-none", link.children.length <= 3
+    return (_jsxs(Box, { "data-kala-component": "header", as: "header", ref: ref, className: cn("w-full bg-popover border-b sticky top-0 z-20 kala-surface-popover", className), ...props, children: [_jsx(Box, { className: "container mx-auto px-3 sm:px-4 lg:px-6 xl:px-8", children: _jsxs(Flex, { align: "center", justify: "between", className: "h-14 sm:h-16 gap-2 sm:gap-4", children: [_jsx(Box, { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx(Flex, { align: "center", gap: variant === "default" ? 3 : 6, className: cn("hidden lg:flex", variant === "default" ? "flex-1" : ""), children: _jsx(Box, { className: cn("flex", variant === "default" ? "mx-auto" : ""), children: _jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: navLinks.map((link) => (_jsx(NavigationMenuItem, { children: link.children ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { className: cn("text-sm lg:text-base", link.active && "text-primary"), children: link.label }), _jsx(NavigationMenuContent, { children: _jsx(Box, { className: "py-2", children: _jsx(List, { divided: false, className: cn("bg-transparent border-none", link.children.length <= 3
                                                                         ? "w-[220px]"
                                                                         : "w-[440px] grid grid-cols-2"), children: link.children.map((child) => (_jsx(Box, { as: "li", children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Box, { as: "a", href: child.href, className: cn("block px-4 py-2.5 text-sm font-normal no-underline outline-none transition-colors", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus-visible:bg-accent focus-visible:text-accent-foreground", child.active &&
                                                                                     "text-primary bg-primary/10"), children: child.label }) }) }, child.href))) }) }) })] })) : (_jsx(NavigationMenuLink, { href: link.href, className: cn("px-4 py-2 text-sm lg:text-base", link.active && "text-primary"), "aria-current": link.active ? "page" : undefined, children: link.label })) }, link.href))) }), _jsx(NavigationMenuViewport, {})] }) }) }), _jsxs(Flex, { align: "center", className: "gap-1.5 sm:gap-2 lg:gap-3 shrink-0", children: [searchBar && (_jsx(Box, { className: "hidden lg:block w-48 xl:w-64", children: searchBar })), languageSwitcher && (_jsx(Box, { className: "hidden lg:block", children: languageSwitcher })), themeSwitcher && (_jsx(Box, { className: "hidden lg:block", children: themeSwitcher })), notifications && (_jsx(Box, { className: "hidden lg:block", children: notifications })), userMenu && _jsx(Box, { className: "hidden lg:block", children: userMenu }), onMobileMenuToggle && (_jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-9 w-9 sm:h-10 sm:w-10", onClick: onMobileMenuToggle, "aria-label": "Toggle mobile menu", "aria-expanded": isMobileMenuOpen, children: isMobileMenuOpen ? (_jsx(X, { className: "w-5 h-5 sm:w-6 sm:h-6" })) : (_jsx(Menu, { className: "w-5 h-5 sm:w-6 sm:h-6" })) }))] })] }) }), isMobileMenuOpen &&

package/dist/components/metric-card/metric-card-skeleton.js

@@ -21,7 +21,7 @@ import * as React from "react";
  * ```
  */
 export function MetricCardSkeleton({ variant = "default", showIcon = false, showChange = true, className, "data-testid": dataTestId, }) {
-    return (_jsx(Card, { ref: React.createRef(), "data-testid": dataTestId || "metric-card-skeleton", className: cn(className), children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), variant === "withIcon" || showIcon ? (_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" })) : null] }), _jsx("div", { className: "mb-3", children: _jsx(Skeleton, { className: "h-10 w-32" }) }), (variant === "default" || showChange) && (_jsx("div", { className: "text-sm", children: _jsx(Skeleton, { className: "h-4 w-32" }) }))] }) }));
+    return (_jsx(Card, { "data-kala-component": "metric-card-skeleton", ref: React.createRef(), "data-testid": dataTestId || "metric-card-skeleton", className: cn(className), children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), variant === "withIcon" || showIcon ? (_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" })) : null] }), _jsx("div", { className: "mb-3", children: _jsx(Skeleton, { className: "h-10 w-32" }) }), (variant === "default" || showChange) && (_jsx("div", { className: "text-sm", children: _jsx(Skeleton, { className: "h-4 w-32" }) }))] }) }));
 }
 /**
  * Compound component: MetricCard.Skeleton

package/dist/components/metric-card/metric-card.js

@@ -6,9 +6,9 @@ import { MetricCardSkeleton } from "./metric-card-skeleton.js";
 function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, color = "muted", isLoading = false, skeletonConfig, skeleton, ...props }) {
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(className), ...props, children: skeleton }));
+            return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: cn(className), ...props, children: skeleton }));
         }
-        return _jsx(MetricCardSkeleton, { className: className, ...skeletonConfig });
+        return (_jsx(MetricCardSkeleton, { "data-kala-component": "metric-card", className: className, ...skeletonConfig }));
     }
     const getChangeColor = (changeValue) => {
         if (changeValue > 0)
@@ -50,6 +50,6 @@ function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, cl
         }
     };
     const isColorful = color !== "muted" || className?.includes("bg-");
-    return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(getColorStyles(), className), ...props, children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h6", { className: cn("text-xs font-semibold uppercase tracking-wide", isColorful ? "opacity-90" : "text-muted-foreground"), children: title }), icon && (_jsx("div", { className: isColorful ? "opacity-70" : "text-muted-foreground", "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: "mb-3", children: _jsxs("div", { className: cn("text-4xl font-bold leading-none", isColorful ? "" : "text-card-foreground"), children: [_jsxs("span", { className: "sr-only", children: [title, ":", " ", typeof value === "number" ? value.toLocaleString() : value] }), typeof value === "number" ? value.toLocaleString() : value] }) }), (change !== undefined || subtitle) && (_jsx("div", { className: "text-sm", children: change !== undefined ? (_jsxs("div", { className: cn("flex items-center gap-1", isColorful ? "opacity-90" : getChangeColor(change)), children: [_jsxs("span", { className: "sr-only", children: ["Change: ", getChangeText(change)] }), _jsx("span", { className: "inline-block", "aria-hidden": "true", children: getChangeIcon(change) }), _jsx("span", { children: getChangeText(change) })] })) : subtitle ? (_jsx("div", { className: cn(isColorful ? "opacity-80" : "text-muted-foreground"), children: subtitle })) : null }))] }) }));
+    return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: cn(getColorStyles(), className), ...props, children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h6", { className: cn("text-xs font-semibold uppercase tracking-wide", isColorful ? "opacity-90" : "text-muted-foreground"), children: title }), icon && (_jsx("div", { className: isColorful ? "opacity-70" : "text-muted-foreground", "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: "mb-3", children: _jsxs("div", { className: cn("text-4xl font-bold leading-none", isColorful ? "" : "text-card-foreground"), children: [_jsxs("span", { className: "sr-only", children: [title, ":", " ", typeof value === "number" ? value.toLocaleString() : value] }), typeof value === "number" ? value.toLocaleString() : value] }) }), (change !== undefined || subtitle) && (_jsx("div", { className: "text-sm", children: change !== undefined ? (_jsxs("div", { className: cn("flex items-center gap-1", isColorful ? "opacity-90" : getChangeColor(change)), children: [_jsxs("span", { className: "sr-only", children: ["Change: ", getChangeText(change)] }), _jsx("span", { className: "inline-block", "aria-hidden": "true", children: getChangeIcon(change) }), _jsx("span", { children: getChangeText(change) })] })) : subtitle ? (_jsx("div", { className: cn(isColorful ? "opacity-80" : "text-muted-foreground"), children: subtitle })) : null }))] }) }));
 }
 export { MetricCard };

package/dist/components/nav-link/nav-link.js

@@ -16,7 +16,7 @@ export function NavLink({ ref, className, label, description, icon, rightSection
         }
         onClick?.(e);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: ref, className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active ? "bg-accent text-accent-foreground" : "text-muted-foreground", className), onClick: handleToggle, ...props, children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { "data-kala-component": "nav-link", ref: ref, className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active ? "bg-accent text-accent-foreground" : "text-muted-foreground", className), onClick: handleToggle, ...props, children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
                             !disableRightSectionRotation &&
                             isOpened &&
                             "rotate-90"), children: rightSection || (children && _jsx(ChevronRight, { className: "h-4 w-4" })) }))] }), children && isOpened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));

package/dist/components/navigation/navigation-skeleton.js

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 export function NavigationSkeleton({ orientation = "horizontal", itemCount = 5, showIcons = false, showBadges = false, nested = false, className, "data-testid": dataTestId, }) {
-    return (_jsxs("nav", { "data-testid": dataTestId || "navigation-skeleton", className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-6", className), "aria-label": "Loading navigation", "aria-busy": "true", children: [Array.from({ length: itemCount }).map((_, i) => (_jsxs("div", { className: cn("flex items-center", orientation === "vertical" ? "gap-3 px-3 py-2" : "gap-2"), children: [showIcons && (_jsx(Skeleton, { className: cn("flex-shrink-0", orientation === "vertical" ? "h-5 w-5" : "h-4 w-4") })), _jsx(Skeleton, { className: cn("h-4", orientation === "vertical" ? "w-24 flex-1" : "w-20") }), showBadges && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full ml-auto flex-shrink-0" }))] }, `nav-${i}`))), nested && orientation === "vertical" && (_jsx("div", { className: "ml-8 space-y-2", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [showIcons && _jsx(Skeleton, { className: "h-4 w-4 flex-shrink-0" }), _jsx(Skeleton, { className: "h-4 w-20" })] }, `nested-${i}`))) }))] }));
+    return (_jsxs("nav", { "data-kala-component": "navigation-skeleton", "data-testid": dataTestId || "navigation-skeleton", className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-6", className), "aria-label": "Loading navigation", "aria-busy": "true", children: [Array.from({ length: itemCount }).map((_, i) => (_jsxs("div", { className: cn("flex items-center", orientation === "vertical" ? "gap-3 px-3 py-2" : "gap-2"), children: [showIcons && (_jsx(Skeleton, { className: cn("flex-shrink-0", orientation === "vertical" ? "h-5 w-5" : "h-4 w-4") })), _jsx(Skeleton, { className: cn("h-4", orientation === "vertical" ? "w-24 flex-1" : "w-20") }), showBadges && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full ml-auto flex-shrink-0" }))] }, `nav-${i}`))), nested && orientation === "vertical" && (_jsx("div", { className: "ml-8 space-y-2", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [showIcons && _jsx(Skeleton, { className: "h-4 w-4 flex-shrink-0" }), _jsx(Skeleton, { className: "h-4 w-20" })] }, `nested-${i}`))) }))] }));
 }

package/dist/components/navigation/navigation.js

@@ -22,7 +22,7 @@ export function Navigation({ ref, className, links, orientation = "horizontal",
     }, [isMobileOpen]);
     // Vertical desktop navigation (explicit opt-in via orientation)
     if (orientation === "vertical") {
-        return (_jsx("nav", { "data-comp": "navigation", className: cn(orientation === "vertical"
+        return (_jsx("nav", { "data-kala-component": "navigation", className: cn(orientation === "vertical"
                 ? "hidden md:flex md:flex-col gap-2"
                 : "flex md:hidden flex-col gap-2", className), "aria-label": "Navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                     ? "bg-accent text-accent-foreground"
@@ -30,15 +30,15 @@ export function Navigation({ ref, className, links, orientation = "horizontal",
     }
     // Horizontal on desktop + stacked vertical list on mobile
     if (mobileLayout === "vertical") {
-        return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-comp": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsx("nav", { "data-comp": "navigation", className: cn("flex md:hidden flex-col gap-2", className), "aria-label": "Mobile navigation", children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
+        return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-kala-component": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsx("nav", { "data-kala-component": "navigation", className: cn("flex md:hidden flex-col gap-2", className), "aria-label": "Mobile navigation", children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                             ? "bg-accent text-accent-foreground"
                             : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) })] }));
     }
     // Horizontal desktop + dropdown mobile
-    return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-comp": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsxs("div", { className: "md:hidden", "data-mobile-nav": true, children: [_jsxs("button", { type: "button", onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-kala-component": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsxs("div", { "data-kala-component": "navigation", className: "md:hidden", "data-mobile-nav": true, children: [_jsxs("button", { type: "button", onClick: (e) => {
                             e.stopPropagation();
                             setIsMobileOpen(!isMobileOpen);
-                        }, className: "flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md px-2 py-1", "aria-label": "Toggle mobile navigation", "aria-expanded": isMobileOpen, children: ["Menu", _jsx(ChevronDown, { className: cn("size-4 transition-transform", isMobileOpen && "rotate-180") })] }), isMobileOpen && (_jsx("nav", { "data-comp": "navigation", className: "mt-2 flex flex-col gap-2 bg-popover border rounded-md p-3 text-popover-foreground kala-surface-popover", "aria-label": "Mobile navigation", onClick: (e) => e.stopPropagation(), children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => setIsMobileOpen(false), className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
+                        }, className: "flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md px-2 py-1", "aria-label": "Toggle mobile navigation", "aria-expanded": isMobileOpen, children: ["Menu", _jsx(ChevronDown, { className: cn("size-4 transition-transform", isMobileOpen && "rotate-180") })] }), isMobileOpen && (_jsx("nav", { className: "mt-2 flex flex-col gap-2 bg-popover border rounded-md p-3 text-popover-foreground kala-surface-popover", "aria-label": "Mobile navigation", onClick: (e) => e.stopPropagation(), children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => setIsMobileOpen(false), className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                                 ? "bg-accent text-accent-foreground"
                                 : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }))] })] }));
 }

package/dist/components/session-card/session-card-skeleton.js

@@ -20,7 +20,7 @@ import { Skeleton, SkeletonCircle } from "@kala-ui/react/skeleton";
  * ```
  */
 export function SessionCardSkeleton({ showBadge = false, showRevokeButton = true, className, "data-testid": dataTestId, }) {
-    return (_jsxs(Card, { "data-testid": dataTestId || "session-card-skeleton", className: cn("relative", className), children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-1" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }), showBadge ? (_jsx(Skeleton, { className: "h-5 w-24 rounded-md" })) : (showRevokeButton && _jsx(Skeleton, { className: "h-8 w-16 rounded-md" }))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })] }));
+    return (_jsxs(Card, { "data-kala-component": "session-card-skeleton", "data-testid": dataTestId || "session-card-skeleton", className: cn("relative", className), children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-1" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }), showBadge ? (_jsx(Skeleton, { className: "h-5 w-24 rounded-md" })) : (showRevokeButton && _jsx(Skeleton, { className: "h-8 w-16 rounded-md" }))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })] }));
 }
 /**
  * Compound component: SessionCard.Skeleton

package/dist/components/session-card/session-card.js

@@ -52,9 +52,9 @@ function formatTimestamp(timestamp) {
 export function SessionCard({ session, onRevoke, isRevoking, className, isLoading = false, skeletonConfig, skeleton, ref, ...props }) {
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Card, { "data-comp": "session-card", ref: ref, className: cn("relative", className), ...props, children: skeleton }));
+            return (_jsx(Card, { "data-kala-component": "session-card", ref: ref, className: cn("relative", className), ...props, children: skeleton }));
         }
-        return _jsx(SessionCardSkeleton, { className: className, ...skeletonConfig });
+        return (_jsx(SessionCardSkeleton, { "data-kala-component": "session-card", className: className, ...skeletonConfig }));
     }
     const DeviceIcon = getDeviceIcon(session.device);
     const lastActive = formatTimestamp(session.lastActiveAt);
@@ -63,5 +63,5 @@ export function SessionCard({ session, onRevoke, isRevoking, className, isLoadin
             void onRevoke(session.id);
         }
     };
-    return (_jsxs(Card, { "data-comp": "session-card", ref: ref, className: cn("relative", className), ...props, children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(DeviceIcon, { className: "size-6 text-muted-foreground mt-0.5", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center gap-2 flex-wrap", children: _jsx("h4", { className: "font-semibold text-sm", children: session.browser }) }), _jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [session.os, " \u2022 ", session.device] })] })] }), session.isCurrent ? (_jsx("div", { className: "inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success border border-success/20", children: "Current Session" })) : (onRevoke && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleRevoke, disabled: isRevoking, className: "text-destructive hover:text-destructive hover:bg-destructive/10", "aria-label": "Revoke session", children: isRevoking ? "Revoking..." : "Revoke" })))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5 text-xs text-muted-foreground", children: [session.location && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(MapPin, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.location })] })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Wifi, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.ip })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "size-3.5", "aria-hidden": "true" }), _jsxs("span", { children: ["Last active ", lastActive] })] })] }) })] }));
+    return (_jsxs(Card, { "data-kala-component": "session-card", ref: ref, className: cn("relative", className), ...props, children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(DeviceIcon, { className: "size-6 text-muted-foreground mt-0.5", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center gap-2 flex-wrap", children: _jsx("h4", { className: "font-semibold text-sm", children: session.browser }) }), _jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [session.os, " \u2022 ", session.device] })] })] }), session.isCurrent ? (_jsx("div", { className: "inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success border border-success/20", children: "Current Session" })) : (onRevoke && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleRevoke, disabled: isRevoking, className: "text-destructive hover:text-destructive hover:bg-destructive/10", "aria-label": "Revoke session", children: isRevoking ? "Revoking..." : "Revoke" })))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5 text-xs text-muted-foreground", children: [session.location && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(MapPin, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.location })] })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Wifi, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.ip })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "size-3.5", "aria-hidden": "true" }), _jsxs("span", { children: ["Last active ", lastActive] })] })] }) })] }));
 }

package/dist/components/sidebar/sidebar-skeleton.js

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 export function SidebarSkeleton({ collapsed = false, showHeader = true, showFooter = true, sectionCount = 3, itemsPerSection = 4, className, "data-testid": dataTestId, }) {
-    return (_jsxs("aside", { "data-testid": dataTestId || "sidebar-skeleton", className: cn("flex flex-col h-full bg-popover border-r", collapsed ? "w-16" : "w-64", className), "aria-label": "Loading sidebar", "aria-busy": "true", children: [showHeader && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: collapsed ? (_jsx(Skeleton, { className: "h-8 w-8 mx-auto" })) : (_jsx(Skeleton, { className: "h-8 w-32" })) })), _jsx("div", { className: "flex-1 overflow-y-auto py-4 px-3", children: Array.from({ length: sectionCount }).map((_, sectionIndex) => (_jsxs("div", { className: "mb-6 last:mb-0", children: [!collapsed && _jsx(Skeleton, { className: "h-3 w-20 mb-2 mx-3" }), _jsx("div", { className: "space-y-2", children: Array.from({ length: itemsPerSection }).map((_, itemIndex) => (_jsxs("div", { className: cn("flex items-center px-3 py-2", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }), !collapsed && _jsx(Skeleton, { className: "h-4 flex-1" }), !collapsed && itemIndex === 0 && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" }))] }, itemIndex))) })] }, sectionIndex))) }), showFooter && (_jsx("div", { className: "p-4 border-t", children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }), !collapsed && (_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-1" }), _jsx(Skeleton, { className: "h-3 w-32" })] }))] }) }))] }));
+    return (_jsxs("aside", { "data-kala-component": "sidebar-skeleton", "data-testid": dataTestId || "sidebar-skeleton", className: cn("flex flex-col h-full bg-popover border-r", collapsed ? "w-16" : "w-64", className), "aria-label": "Loading sidebar", "aria-busy": "true", children: [showHeader && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: collapsed ? (_jsx(Skeleton, { className: "h-8 w-8 mx-auto" })) : (_jsx(Skeleton, { className: "h-8 w-32" })) })), _jsx("div", { className: "flex-1 overflow-y-auto py-4 px-3", children: Array.from({ length: sectionCount }).map((_, sectionIndex) => (_jsxs("div", { className: "mb-6 last:mb-0", children: [!collapsed && _jsx(Skeleton, { className: "h-3 w-20 mb-2 mx-3" }), _jsx("div", { className: "space-y-2", children: Array.from({ length: itemsPerSection }).map((_, itemIndex) => (_jsxs("div", { className: cn("flex items-center px-3 py-2", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }), !collapsed && _jsx(Skeleton, { className: "h-4 flex-1" }), !collapsed && itemIndex === 0 && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" }))] }, itemIndex))) })] }, sectionIndex))) }), showFooter && (_jsx("div", { className: "p-4 border-t", children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }), !collapsed && (_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-1" }), _jsx(Skeleton, { className: "h-3 w-32" })] }))] }) }))] }));
 }

package/dist/components/sidebar/sidebar.js

@@ -65,5 +65,5 @@ export function Sidebar({ logo, navSections = [], pathname = "", isOpen = true,
     // switches with the viewport.
     const shellRef = useMergedRef(ref, trapRef);
     const shellClassName = cn("fixed left-0 top-0 z-30 h-full w-64 bg-popover border-r text-foreground transition-transform duration-300 ease-out flex flex-col kala-surface-card", "md:translate-x-0 md:z-10", isOpen ? "animate-slide-in-from-left" : "-translate-x-full", className);
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { className: "fixed inset-0 bg-overlay z-30 md:hidden animate-fade-in transition-opacity duration-200 ease-out", onClick: onClose, "aria-hidden": "true" })), overlayActive ? (_jsx("div", { ref: shellRef, "data-comp": "sidebar", role: "dialog", "aria-modal": "true", "aria-label": "Sidebar", className: shellClassName, ...props, children: sidebarContent })) : (_jsx("aside", { ref: shellRef, "data-comp": "sidebar", className: shellClassName, ...props, children: sidebarContent }))] }));
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { className: "fixed inset-0 bg-overlay z-30 md:hidden animate-fade-in transition-opacity duration-200 ease-out", onClick: onClose, "aria-hidden": "true" })), overlayActive ? (_jsx("div", { ref: shellRef, "data-kala-component": "sidebar", role: "dialog", "aria-modal": "true", "aria-label": "Sidebar", className: shellClassName, ...props, children: sidebarContent })) : (_jsx("aside", { ref: shellRef, "data-kala-component": "sidebar", className: shellClassName, ...props, children: sidebarContent }))] }));
 }

package/dist/components/social-login-button/social-login-button.js

@@ -53,5 +53,5 @@ export function SocialLoginButton({ ref, provider, isLoading = false, label, cla
     const config = providerConfig[provider];
     const displayLabel = label ?? config.label;
     const icon = config.icon;
-    return (_jsxs(Button, { ref: ref, "data-comp": "social-login-button", type: "button", variant: "outline", className: cn("relative transition-colors duration-200 bg-transparent border-input text-foreground", config.color, className), disabled: disabled || isLoading, ...props, children: [isLoading ? (_jsx(Loader2, { className: "w-5 h-5 animate-spin mr-2" })) : provider === "linkedin" ? (_jsx(LinkedInIcon, { className: "w-5 h-5 mr-2" })) : icon ? (_jsx(SimpleIconWrapper, { icon: icon, className: "w-5 h-5 mr-2", label: displayLabel })) : null, _jsx("span", { children: isLoading ? "Redirecting..." : displayLabel })] }));
+    return (_jsxs(Button, { "data-kala-component": "social-login-button", ref: ref, type: "button", variant: "outline", className: cn("relative transition-colors duration-200 bg-transparent border-input text-foreground", config.color, className), disabled: disabled || isLoading, ...props, children: [isLoading ? (_jsx(Loader2, { className: "w-5 h-5 animate-spin mr-2" })) : provider === "linkedin" ? (_jsx(LinkedInIcon, { className: "w-5 h-5 mr-2" })) : icon ? (_jsx(SimpleIconWrapper, { icon: icon, className: "w-5 h-5 mr-2", label: displayLabel })) : null, _jsx("span", { children: isLoading ? "Redirecting..." : displayLabel })] }));
 }

package/dist/components/social-login-buttons/social-login-buttons.js

@@ -14,5 +14,5 @@ const defaultProviders = [
     "linkedin",
 ];
 export function SocialLoginButtons({ onProviderClick, loadingProvider, providers = defaultProviders, className, showDivider = true, dividerText = "Or sign in with", }) {
-    return (_jsxs("div", { "data-comp": "social-login-buttons", className: cn("w-full space-y-3", className), children: [showDivider && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("span", { className: "w-full border-t" }) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase", children: _jsx("span", { className: "bg-background px-2 text-muted-foreground", children: dividerText }) })] })), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: providers.map((provider) => (_jsx(SocialLoginButton, { provider: provider, isLoading: loadingProvider === provider, onClick: () => onProviderClick(provider), disabled: loadingProvider !== undefined && loadingProvider !== provider }, provider))) })] }));
+    return (_jsxs("div", { "data-kala-component": "social-login-buttons", className: cn("w-full space-y-3", className), children: [showDivider && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("span", { className: "w-full border-t" }) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase", children: _jsx("span", { className: "bg-background px-2 text-muted-foreground", children: dividerText }) })] })), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: providers.map((provider) => (_jsx(SocialLoginButton, { provider: provider, isLoading: loadingProvider === provider, onClick: () => onProviderClick(provider), disabled: loadingProvider !== undefined && loadingProvider !== provider }, provider))) })] }));
 }

package/dist/components/sparkline-chart/sparkline-chart.js

@@ -130,5 +130,5 @@ export function SparklineChart({ data, type = "line", color, width = "100%", hei
             data: data,
         },
     ];
-    return (_jsx("div", { className: cn("sparkline-chart", className), children: _jsx(Chart, { options: options, series: series, type: type, height: height, width: width }) }));
+    return (_jsx("div", { "data-kala-component": "sparkline-chart", className: cn("sparkline-chart", className), children: _jsx(Chart, { options: options, series: series, type: type, height: height, width: width }) }));
 }

package/dist/components/user-menu-dropdown/user-menu-dropdown.js

@@ -23,5 +23,5 @@ export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl
     const handleLogoutClick = () => {
         onLogout?.();
     };
-    return (_jsxs(DropdownMenu, { ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: cn("h-auto p-1 rounded-full hover:bg-accent", className), "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: "size-8", children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-sm font-medium", children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex flex-col space-y-1", children: [user.name && (_jsx("p", { className: "text-sm font-medium leading-none", children: user.name })), user.email && (_jsx("p", { className: "text-xs text-muted-foreground leading-none", children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: "mr-2 size-4" }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: "mr-2 size-4" }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: "mr-2 size-4" }), "Logout"] })] })] }));
+    return (_jsxs(DropdownMenu, { "data-kala-component": "user-menu-dropdown", ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: cn("h-auto p-1 rounded-full hover:bg-accent", className), "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: "size-8", children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-sm font-medium", children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex flex-col space-y-1", children: [user.name && (_jsx("p", { className: "text-sm font-medium leading-none", children: user.name })), user.email && (_jsx("p", { className: "text-xs text-muted-foreground leading-none", children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: "mr-2 size-4" }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: "mr-2 size-4" }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: "mr-2 size-4" }), "Logout"] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kala-ui/react-app",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -126,8 +126,8 @@
     "lucide-react": "~1.34.0",
     "react-apexcharts": "~2.1.1",
     "simple-icons": "~16.28.0",
-    "@kala-ui/react": "0.1.0-beta.0",
-    "@kala-ui/react-hooks": "0.1.0-beta.0"
+    "@kala-ui/react-hooks": "0.1.0-beta.0",
+    "@kala-ui/react": "0.1.0-beta.1"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "~4.3.3",