@kala-ui/react 0.0.1-beta.1

package/dist/src/components/table/table.test.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "./table";
+import { TableSkeleton } from "./table-skeleton";
+describe("Table", () => {
+    it("should render table", () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Cell" }) }) }) }));
+        const table = screen.getByRole("table");
+        expect(table).toBeInTheDocument();
+    });
+    it("should render table with caption", () => {
+        render(_jsxs(Table, { children: [_jsx(TableCaption, { children: "Table caption" }), _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Cell" }) }) })] }));
+        expect(screen.getByText("Table caption")).toBeInTheDocument();
+    });
+    it("should render table with header", () => {
+        render(_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHead, { children: "Header" }) }) }), _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Cell" }) }) })] }));
+        expect(screen.getByText("Header")).toBeInTheDocument();
+    });
+    it("should render table with footer", () => {
+        render(_jsxs(Table, { children: [_jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Cell" }) }) }), _jsx(TableFooter, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Footer" }) }) })] }));
+        expect(screen.getByText("Footer")).toBeInTheDocument();
+    });
+    it("should apply custom className to table", () => {
+        const { container } = render(_jsx(Table, { className: "custom-table", children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Cell" }) }) }) }));
+        const table = container.querySelector('[data-slot="table"]');
+        expect(table).toHaveClass("custom-table");
+    });
+    it("should render multiple rows", () => {
+        render(_jsx(Table, { children: _jsxs(TableBody, { children: [_jsx(TableRow, { children: _jsx(TableCell, { children: "Row 1" }) }), _jsx(TableRow, { children: _jsx(TableCell, { children: "Row 2" }) }), _jsx(TableRow, { children: _jsx(TableCell, { children: "Row 3" }) })] }) }));
+        expect(screen.getByText("Row 1")).toBeInTheDocument();
+        expect(screen.getByText("Row 2")).toBeInTheDocument();
+        expect(screen.getByText("Row 3")).toBeInTheDocument();
+    });
+});
+describe("TableSkeleton", () => {
+    it("renders table skeleton", () => {
+        render(_jsx(TableSkeleton, {}));
+        expect(screen.getByRole("table")).toBeInTheDocument();
+    });
+    it("renders default number of rows (5)", () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const rows = container.querySelectorAll("tbody tr");
+        expect(rows).toHaveLength(5);
+    });
+    it("renders default number of columns (4)", () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const firstRowCells = container.querySelectorAll("tbody tr:first-child td");
+        expect(firstRowCells).toHaveLength(4);
+    });
+    it("renders custom number of rows", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 10 }));
+        const rows = container.querySelectorAll("tbody tr");
+        expect(rows).toHaveLength(10);
+    });
+    it("renders custom number of columns", () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 6 }));
+        const firstRowCells = container.querySelectorAll("tbody tr:first-child td");
+        expect(firstRowCells).toHaveLength(6);
+    });
+    it("renders provided headers", () => {
+        const headers = ["Name", "Email", "Role", "Status"];
+        render(_jsx(TableSkeleton, { headers: headers, columns: 4 }));
+        headers.forEach((header) => {
+            expect(screen.getByText(header)).toBeInTheDocument();
+        });
+    });
+    it("renders skeleton for missing headers", () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 3 }));
+        const headerSkeletons = container.querySelectorAll('thead th [class*="h-4"]');
+        expect(headerSkeletons.length).toBeGreaterThan(0);
+    });
+    it("adds actions column when showActions is true", () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 3, showActions: true }));
+        expect(screen.getByText("Actions")).toBeInTheDocument();
+        const firstRowCells = container.querySelectorAll("tbody tr:first-child td");
+        expect(firstRowCells).toHaveLength(4); // 3 + 1 actions column
+    });
+    it("does not add actions column by default", () => {
+        render(_jsx(TableSkeleton, { columns: 3 }));
+        expect(screen.queryByText("Actions")).not.toBeInTheDocument();
+    });
+    it("renders skeletons in each cell", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 2, columns: 2 }));
+        const skeletons = container.querySelectorAll('[class*="animate-pulse"]');
+        expect(skeletons.length).toBeGreaterThan(0);
+    });
+    it("has border and rounded styling", () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass("border");
+        expect(wrapper).toHaveClass("rounded-lg");
+    });
+    it("has shadow styling", () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass("shadow-sm");
+    });
+    it("has bg-card background", () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass("bg-card");
+    });
+    it("renders single row", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 1, columns: 3 }));
+        const rows = container.querySelectorAll("tbody tr");
+        expect(rows).toHaveLength(1);
+    });
+    it("renders many rows", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 20, columns: 3 }));
+        const rows = container.querySelectorAll("tbody tr");
+        expect(rows).toHaveLength(20);
+    });
+    it("renders single column", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 1 }));
+        const firstRowCells = container.querySelectorAll("tbody tr:first-child td");
+        expect(firstRowCells).toHaveLength(1);
+    });
+    it("renders many columns", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 10 }));
+        const firstRowCells = container.querySelectorAll("tbody tr:first-child td");
+        expect(firstRowCells).toHaveLength(10);
+    });
+    it("generates unique keys for rows", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 2 }));
+        const rows = container.querySelectorAll("tbody tr");
+        const keys = Array.from(rows).map((row) => row.getAttribute("data-key") || "");
+        new Set(keys);
+        // All rows should be rendered (even if keys aren't in data attributes, React handles internally)
+        expect(rows).toHaveLength(3);
+    });
+    it("generates unique keys for cells", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 2, columns: 3 }));
+        const cells = container.querySelectorAll("tbody td");
+        // Should have 2 rows × 3 columns = 6 cells
+        expect(cells).toHaveLength(6);
+    });
+    it("works with partial headers", () => {
+        render(_jsx(TableSkeleton, { headers: ["Col1", "Col2"], columns: 2 }));
+        expect(screen.getByText("Col1")).toBeInTheDocument();
+        expect(screen.getByText("Col2")).toBeInTheDocument();
+    });
+    it("renders variable width skeletons", () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 5, columns: 3 }));
+        const skeletons = container.querySelectorAll('tbody td [class*="h-4"]');
+        // Each skeleton should have inline style with width
+        const hasVariableWidths = Array.from(skeletons).some((skeleton) => {
+            const style = skeleton.getAttribute("style");
+            return style?.includes("width");
+        });
+        expect(hasVariableWidths).toBe(true);
+    });
+    it("combines headers with actions column", () => {
+        const headers = ["Name", "Email"];
+        render(_jsx(TableSkeleton, { headers: headers, columns: 2, showActions: true }));
+        expect(screen.getByText("Name")).toBeInTheDocument();
+        expect(screen.getByText("Email")).toBeInTheDocument();
+        expect(screen.getByText("Actions")).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=table.test.js.map

package/dist/src/components/table/table.test.js.map

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

package/dist/src/components/table/table.types.d.ts

@@ -0,0 +1,62 @@
+import type * as React from "react";
+export interface TableSkeletonConfig {
+    /**
+     * Number of skeleton rows to show (default: 5)
+     */
+    rows?: number;
+    /**
+     * Number of skeleton columns to show (default: 4)
+     */
+    columns?: number;
+    /**
+     * Column headers to show (optional - shows actual headers or skeletons)
+     */
+    headers?: string[];
+    /**
+     * Column widths to match actual table layout (prevents CLS)
+     */
+    columnWidths?: string[];
+    /**
+     * Whether to show action column
+     */
+    showActions?: boolean;
+    /**
+     * Whether to show selection checkboxes
+     */
+    showCheckboxes?: boolean;
+    /**
+     * Whether header should be sticky
+     */
+    stickyHeader?: boolean;
+}
+export interface TableProps extends React.ComponentProps<"table"> {
+    /**
+     * Show loading skeleton instead of content
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton rows to show when loading (default: 5) - DEPRECATED: Use skeletonConfig
+     */
+    loadingRows?: number;
+    /**
+     * Number of skeleton columns to show when loading (default: 4) - DEPRECATED: Use skeletonConfig
+     */
+    loadingColumns?: number;
+    /**
+     * Show actions column in skeleton (default: false) - DEPRECATED: Use skeletonConfig
+     */
+    loadingShowActions?: boolean;
+    /**
+     * Headers to show in skeleton (optional) - DEPRECATED: Use skeletonConfig
+     */
+    loadingHeaders?: string[];
+    /**
+     * Skeleton configuration for advanced control (preferred)
+     */
+    skeletonConfig?: TableSkeletonConfig;
+    /**
+     * Custom skeleton override
+     */
+    skeleton?: React.ReactNode;
+}
+//# sourceMappingURL=table.types.d.ts.map

package/dist/src/components/table/table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,mBAAmB;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IAChE;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}

package/dist/src/components/table/table.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.types.js.map

package/dist/src/components/table/table.types.js.map

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

package/dist/src/components/table-skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export type { TableSkeletonProps } from './table-skeleton';
+export { TableSkeleton } from './table-skeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/table-skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/table-skeleton/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/components/table-skeleton/index.js

@@ -0,0 +1,2 @@
+export { TableSkeleton } from './table-skeleton';
+//# sourceMappingURL=index.js.map

package/dist/src/components/table-skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table-skeleton/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/src/components/table-skeleton/table-skeleton.d.ts

@@ -0,0 +1,20 @@
+export interface TableSkeletonProps {
+    /**
+     * Number of rows to display
+     */
+    rows?: number;
+    /**
+     * Number of columns to display
+     */
+    columns?: number;
+    /**
+     * Column headers (optional)
+     */
+    headers?: string[];
+    /**
+     * Whether to show action column
+     */
+    showActions?: boolean;
+}
+export declare function TableSkeleton({ rows, columns, headers, showActions, }: TableSkeletonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-skeleton.d.ts.map

package/dist/src/components/table-skeleton/table-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/table-skeleton/table-skeleton.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAQ,EACR,OAAW,EACX,OAAO,EACP,WAAmB,GACpB,EAAE,kBAAkB,2CAwCpB"}

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+export function TableSkeleton({ rows = 5, columns = 4, headers, showActions = false, }) {
+    const totalColumns = showActions ? columns + 1 : columns;
+    const displayHeaders = headers || Array(columns).fill('');
+    return (_jsx("div", { className: "bg-card border rounded-lg shadow-sm", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [displayHeaders.map((header, index) => (_jsx(TableHead, { children: header || _jsx(Skeleton, { className: "h-4 w-24" }) }, `header-${header || index}-${crypto.randomUUID()}`))), showActions && _jsx(TableHead, { children: "Actions" }, "actions-header")] }) }), _jsx(TableBody, { children: Array.from({ length: rows }).map(() => {
+                        const rowId = crypto.randomUUID();
+                        return (_jsx(TableRow, { children: Array.from({ length: totalColumns }).map(() => {
+                                const cellId = crypto.randomUUID();
+                                return (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4", style: { width: `${Math.floor(Math.random() * 40 + 60)}%` } }) }, cellId));
+                            }) }, rowId));
+                    }) })] }) }));
+}
+//# sourceMappingURL=table-skeleton.js.map

package/dist/src/components/table-skeleton/table-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.js","sourceRoot":"","sources":["../../../../src/components/table-skeleton/table-skeleton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAqBzF,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,GAAG,CAAC,EACR,OAAO,GAAG,CAAC,EACX,OAAO,EACP,WAAW,GAAG,KAAK,GACA;IACnB,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACzD,MAAM,cAAc,GAAG,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAE1D,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,YAClD,MAAC,KAAK,eACJ,KAAC,WAAW,cACV,MAAC,QAAQ,eACN,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,KAAC,SAAS,cACP,MAAM,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,IAD9B,UAAU,MAAM,IAAI,KAAK,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAEtD,CACb,CAAC,EACD,WAAW,IAAI,KAAC,SAAS,2BAAK,gBAAgB,CAAoB,IAC1D,GACC,EACd,KAAC,SAAS,cACP,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;wBACrC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;wBAClC,OAAO,CACL,KAAC,QAAQ,cACN,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;gCAC7C,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;gCACnC,OAAO,CACL,KAAC,SAAS,cACR,KAAC,QAAQ,IACP,SAAS,EAAC,KAAK,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAC3D,IAJY,MAAM,CAKV,CACb,CAAC;4BACJ,CAAC,CAAC,IAXW,KAAK,CAYT,CACZ,CAAC;oBACJ,CAAC,CAAC,GACQ,IACN,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/src/components/table-skeleton/table-skeleton.stories.d.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/react';
+import { TableSkeleton } from './table-skeleton';
+declare const meta: {
+    title: string;
+    component: typeof TableSkeleton;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        rows: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        columns: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        showActions: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithHeaders: Story;
+export declare const WithActions: Story;
+export declare const FewRows: Story;
+export declare const ManyColumns: Story;
+export declare const ManyRows: Story;
+export declare const RecommendedPattern: Story;
+export declare const StandaloneUsage: Story;
+export declare const ComparisonDemo: Story;
+//# sourceMappingURL=table-skeleton.stories.d.ts.map

package/dist/src/components/table-skeleton/table-skeleton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/table-skeleton/table-skeleton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KA6ChC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyE5B,CAAC"}

package/dist/src/components/table-skeleton/table-skeleton.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../button/button';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
+import { TableSkeleton } from './table-skeleton';
+const meta = {
+    title: 'Components/TableSkeleton',
+    component: TableSkeleton,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: 'A skeleton loading state for tables. Can be used standalone or automatically via the Table component\'s `isLoading` prop.',
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        rows: {
+            control: { type: 'number', min: 1, max: 20 },
+            description: 'Number of skeleton rows',
+        },
+        columns: {
+            control: { type: 'number', min: 1, max: 10 },
+            description: 'Number of skeleton columns',
+        },
+        showActions: {
+            control: 'boolean',
+            description: 'Show actions column',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        rows: 5,
+        columns: 4,
+    },
+};
+export const WithHeaders = {
+    args: {
+        rows: 5,
+        columns: 4,
+        headers: ['Name', 'Email', 'Role', 'Status'],
+    },
+};
+export const WithActions = {
+    args: {
+        rows: 5,
+        columns: 3,
+        headers: ['Product', 'Price', 'Stock'],
+        showActions: true,
+    },
+};
+export const FewRows = {
+    args: {
+        rows: 2,
+        columns: 3,
+        headers: ['Item', 'Quantity', 'Total'],
+    },
+};
+export const ManyColumns = {
+    args: {
+        rows: 5,
+        columns: 8,
+    },
+};
+export const ManyRows = {
+    args: {
+        rows: 15,
+        columns: 4,
+        headers: ['ID', 'Name', 'Date', 'Status'],
+    },
+};
+// Demonstrate the recommended pattern: using Table with isLoading prop
+export const RecommendedPattern = {
+    render: () => {
+        const [isLoading, setIsLoading] = useState(true);
+        const data = [
+            { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin' },
+            { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
+            { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
+        ];
+        return (_jsxs("div", { children: [_jsx("div", { className: "mb-4", children: _jsx(Button, { onClick: () => setIsLoading(!isLoading), children: isLoading ? 'Show Data' : 'Show Loading' }) }), _jsxs(Table, { isLoading: isLoading, loadingRows: 3, loadingColumns: 4, loadingHeaders: ['ID', 'Name', 'Email', 'Role'], children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "ID" }), _jsx(TableHead, { children: "Name" }), _jsx(TableHead, { children: "Email" }), _jsx(TableHead, { children: "Role" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.email }), _jsx(TableCell, { children: row.role })] }, row.id))) })] })] }));
+    },
+};
+export const StandaloneUsage = {
+    render: () => (_jsxs("div", { children: [_jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: "For advanced use cases, you can use TableSkeleton directly:" }), _jsx(TableSkeleton, { rows: 4, columns: 5, headers: ['Col 1', 'Col 2', 'Col 3', 'Col 4', 'Col 5'] })] })),
+};
+export const ComparisonDemo = {
+    render: () => {
+        const [showPattern1, setShowPattern1] = useState(false);
+        const [showPattern2, setShowPattern2] = useState(false);
+        const data = [
+            { id: 1, name: 'Product A', price: '$29.99', stock: '50' },
+            { id: 2, name: 'Product B', price: '$49.99', stock: '30' },
+        ];
+        return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pattern 1: Using Table isLoading prop (Recommended)" }), _jsx(Button, { onClick: () => setShowPattern1(!showPattern1), className: "mb-4", children: "Toggle Loading" }), _jsxs(Table, { isLoading: showPattern1, loadingRows: 2, loadingColumns: 3, loadingHeaders: ['Product', 'Price', 'Stock'], children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Price" }), _jsx(TableHead, { children: "Stock" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.price }), _jsx(TableCell, { children: row.stock })] }, row.id))) })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Pattern 2: Manual conditional rendering" }), _jsx(Button, { onClick: () => setShowPattern2(!showPattern2), className: "mb-4", children: "Toggle Loading" }), showPattern2 ? (_jsx(TableSkeleton, { rows: 2, columns: 3, headers: ['Product', 'Price', 'Stock'] })) : (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Product" }), _jsx(TableHead, { children: "Price" }), _jsx(TableHead, { children: "Stock" })] }) }), _jsx(TableBody, { children: data.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.name }), _jsx(TableCell, { children: row.price }), _jsx(TableCell, { children: row.stock })] }, row.id))) })] }))] })] }));
+    },
+};
+//# sourceMappingURL=table-skeleton.stories.js.map

package/dist/src/components/table-skeleton/table-skeleton.stories.js.map

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

package/dist/src/components/table-skeleton/table-skeleton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-skeleton.test.d.ts.map

package/dist/src/components/table-skeleton/table-skeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.test.d.ts","sourceRoot":"","sources":["../../../../src/components/table-skeleton/table-skeleton.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/table-skeleton/table-skeleton.test.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { TableSkeleton } from './table-skeleton';
+describe('TableSkeleton', () => {
+    it('renders table skeleton', () => {
+        render(_jsx(TableSkeleton, {}));
+        expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+    it('renders default number of rows (5)', () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows).toHaveLength(5);
+    });
+    it('renders default number of columns (4)', () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const firstRowCells = container.querySelectorAll('tbody tr:first-child td');
+        expect(firstRowCells).toHaveLength(4);
+    });
+    it('renders custom number of rows', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 10 }));
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows).toHaveLength(10);
+    });
+    it('renders custom number of columns', () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 6 }));
+        const firstRowCells = container.querySelectorAll('tbody tr:first-child td');
+        expect(firstRowCells).toHaveLength(6);
+    });
+    it('renders provided headers', () => {
+        const headers = ['Name', 'Email', 'Role', 'Status'];
+        render(_jsx(TableSkeleton, { headers: headers, columns: 4 }));
+        headers.forEach((header) => {
+            expect(screen.getByText(header)).toBeInTheDocument();
+        });
+    });
+    it('renders skeleton for missing headers', () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 3 }));
+        const headerSkeletons = container.querySelectorAll('thead th [class*="h-4"]');
+        expect(headerSkeletons.length).toBeGreaterThan(0);
+    });
+    it('adds actions column when showActions is true', () => {
+        const { container } = render(_jsx(TableSkeleton, { columns: 3, showActions: true }));
+        expect(screen.getByText('Actions')).toBeInTheDocument();
+        const firstRowCells = container.querySelectorAll('tbody tr:first-child td');
+        expect(firstRowCells).toHaveLength(4); // 3 + 1 actions column
+    });
+    it('does not add actions column by default', () => {
+        render(_jsx(TableSkeleton, { columns: 3 }));
+        expect(screen.queryByText('Actions')).not.toBeInTheDocument();
+    });
+    it('renders skeletons in each cell', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 2, columns: 2 }));
+        const skeletons = container.querySelectorAll('[class*="animate-pulse"]');
+        expect(skeletons.length).toBeGreaterThan(0);
+    });
+    it('has border and rounded styling', () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass('border');
+        expect(wrapper).toHaveClass('rounded-lg');
+    });
+    it('has shadow styling', () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass('shadow-sm');
+    });
+    it('has bg-card background', () => {
+        const { container } = render(_jsx(TableSkeleton, {}));
+        const wrapper = container.firstChild;
+        expect(wrapper).toHaveClass('bg-card');
+    });
+    it('renders single row', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 1, columns: 3 }));
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows).toHaveLength(1);
+    });
+    it('renders many rows', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 20, columns: 3 }));
+        const rows = container.querySelectorAll('tbody tr');
+        expect(rows).toHaveLength(20);
+    });
+    it('renders single column', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 1 }));
+        const firstRowCells = container.querySelectorAll('tbody tr:first-child td');
+        expect(firstRowCells).toHaveLength(1);
+    });
+    it('renders many columns', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 10 }));
+        const firstRowCells = container.querySelectorAll('tbody tr:first-child td');
+        expect(firstRowCells).toHaveLength(10);
+    });
+    it('generates unique keys for rows', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 3, columns: 2 }));
+        const rows = container.querySelectorAll('tbody tr');
+        const keys = Array.from(rows).map(row => row.getAttribute('data-key') || '');
+        const uniqueKeys = new Set(keys);
+        // All rows should be rendered (even if keys aren't in data attributes, React handles internally)
+        expect(rows).toHaveLength(3);
+    });
+    it('generates unique keys for cells', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 2, columns: 3 }));
+        const cells = container.querySelectorAll('tbody td');
+        // Should have 2 rows × 3 columns = 6 cells
+        expect(cells).toHaveLength(6);
+    });
+    it('works with partial headers', () => {
+        render(_jsx(TableSkeleton, { headers: ['Col1', 'Col2'], columns: 2 }));
+        expect(screen.getByText('Col1')).toBeInTheDocument();
+        expect(screen.getByText('Col2')).toBeInTheDocument();
+    });
+    it('renders variable width skeletons', () => {
+        const { container } = render(_jsx(TableSkeleton, { rows: 5, columns: 3 }));
+        const skeletons = container.querySelectorAll('tbody td [class*="h-4"]');
+        // Each skeleton should have inline style with width
+        const hasVariableWidths = Array.from(skeletons).some((skeleton) => {
+            const style = skeleton.getAttribute('style');
+            return style?.includes('width');
+        });
+        expect(hasVariableWidths).toBe(true);
+    });
+    it('combines headers with actions column', () => {
+        const headers = ['Name', 'Email'];
+        render(_jsx(TableSkeleton, { headers: headers, columns: 2, showActions: true }));
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Email')).toBeInTheDocument();
+        expect(screen.getByText('Actions')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=table-skeleton.test.js.map