@lamenna/lxp-react 0.0.1 → 0.1.0

package/dist/components/Button/Button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { buttonConfig, } from "@lamenna/lxp-shared-components";
+import { buttonConfig } from "@lamenna/lxp-shared-components";
 export const Button = ({ children, variant = "primary", size = "md", disabled = false, className, id, ariaLabel, testID, onClick, }) => {
     const variantConfig = buttonConfig.variants[variant];
     const sizeConfig = buttonConfig.sizes[size];
@@ -10,5 +10,5 @@ export const Button = ({ children, variant = "primary", size = "md", disabled =
         opacity: disabled ? 0.6 : 1,
         cursor: disabled ? "not-allowed" : "pointer",
     };
-    return (React.createElement("button", { style: styles, onClick: onClick, disabled: disabled, className: className, id: id, "aria-label": ariaLabel, "data-testid": testID }, children));
+    return (React.createElement("button", { style: styles, type: "button", onClick: onClick, disabled: disabled, className: className, id: id, "aria-label": ariaLabel, "data-testid": testID }, children));
 };

package/dist/components/Button/__tests__/button.test.d.ts

@@ -4,4 +4,4 @@
  * This test suite validates the React implementation of the Button component,
  * ensuring it properly renders and responds to user interactions.
  */
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/dist/components/Button/__tests__/button.test.js

@@ -4,91 +4,94 @@
  * This test suite validates the React implementation of the Button component,
  * ensuring it properly renders and responds to user interactions.
  */
-import '@testing-library/jest-dom';
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Button } from '../Button';
-describe('Button Component (React)', () => {
-    describe('Rendering', () => {
-        it('should render a button element', () => {
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "../Button";
+import { buttonConfig } from "@lamenna/lxp-shared-components";
+describe("Button Component (React)", () => {
+    describe("Rendering", () => {
+        it("should render a button element", () => {
             render(React.createElement(Button, null, "Click me"));
-            const button = screen.getByRole('button');
+            const button = screen.getByRole("button");
             expect(button).toBeInTheDocument();
         });
-        it('should display button text', () => {
+        it("should display button text", () => {
             render(React.createElement(Button, null, "Test Button"));
-            expect(screen.getByText('Test Button')).toBeInTheDocument();
+            expect(screen.getByText("Test Button")).toBeInTheDocument();
         });
-        it('should apply primary variant by default', () => {
+        it("should apply primary variant styles by default", () => {
             render(React.createElement(Button, null, "Primary"));
-            const button = screen.getByRole('button');
-            expect(button).toHaveClass('button-primary');
+            const button = screen.getByRole("button");
+            expect(button).toHaveStyle(`background-color: ${buttonConfig.variants.primary.backgroundColor}`);
+            expect(button).toHaveStyle(`color: ${buttonConfig.variants.primary.color}`);
         });
-        it('should apply secondary variant when specified', () => {
+        it("should apply secondary variant styles when specified", () => {
             render(React.createElement(Button, { variant: "secondary" }, "Secondary"));
-            const button = screen.getByRole('button');
-            expect(button).toHaveClass('button-secondary');
+            const button = screen.getByRole("button");
+            expect(button).toHaveStyle(`background-color: ${buttonConfig.variants.secondary.backgroundColor}`);
+            expect(button).toHaveStyle(`color: ${buttonConfig.variants.secondary.color}`);
         });
-        it('should apply size classes correctly', () => {
+        it("should apply size styles correctly", () => {
             const { rerender } = render(React.createElement(Button, { size: "sm" }, "Small"));
-            expect(screen.getByRole('button')).toHaveClass('button-sm');
+            expect(screen.getByRole("button")).toHaveStyle(`height: ${buttonConfig.sizes.sm.height}`);
             rerender(React.createElement(Button, { size: "md" }, "Medium"));
-            expect(screen.getByRole('button')).toHaveClass('button-md');
+            expect(screen.getByRole("button")).toHaveStyle(`height: ${buttonConfig.sizes.md.height}`);
             rerender(React.createElement(Button, { size: "lg" }, "Large"));
-            expect(screen.getByRole('button')).toHaveClass('button-lg');
+            expect(screen.getByRole("button")).toHaveStyle(`height: ${buttonConfig.sizes.lg.height}`);
         });
     });
-    describe('Interactions', () => {
-        it('should handle click events', () => {
+    describe("Interactions", () => {
+        it("should handle click events", () => {
             const onClick = jest.fn();
             render(React.createElement(Button, { onClick: onClick }, "Click me"));
-            const button = screen.getByRole('button');
+            const button = screen.getByRole("button");
             fireEvent.click(button);
             expect(onClick).toHaveBeenCalledTimes(1);
         });
-        it('should not trigger onClick when disabled', () => {
+        it("should not trigger onClick when disabled", () => {
             const onClick = jest.fn();
             render(React.createElement(Button, { onClick: onClick, disabled: true }, "Disabled"));
-            const button = screen.getByRole('button');
+            const button = screen.getByRole("button");
             fireEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();
         });
-        it('should have disabled attribute when disabled', () => {
+        it("should have disabled attribute when disabled", () => {
             render(React.createElement(Button, { disabled: true }, "Disabled"));
-            const button = screen.getByRole('button');
+            const button = screen.getByRole("button");
             expect(button).toBeDisabled();
         });
     });
-    describe('Accessibility', () => {
-        it('should support aria-label', () => {
+    describe("Accessibility", () => {
+        it("should support aria-label", () => {
             render(React.createElement(Button, { ariaLabel: "Close dialog" }, "\u00D7"));
-            const button = screen.getByLabelText('Close dialog');
+            const button = screen.getByLabelText("Close dialog");
             expect(button).toBeInTheDocument();
         });
-        it('should be keyboard accessible', () => {
+        it("should be keyboard accessible", () => {
             const onClick = jest.fn();
             render(React.createElement(Button, { onClick: onClick }, "Press me"));
-            const button = screen.getByRole('button');
-            fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
+            const button = screen.getByRole("button");
+            fireEvent.keyDown(button, { key: "Enter", code: "Enter" });
             // Button should handle Enter key (default behavior)
             expect(button).toBeInTheDocument();
         });
-        it('should have proper role attribute', () => {
+        it("should have proper role attribute", () => {
             render(React.createElement(Button, null, "Action"));
-            const button = screen.getByRole('button');
-            expect(button).toHaveAttribute('type', 'button');
+            const button = screen.getByRole("button");
+            expect(button).toHaveAttribute("type", "button");
         });
     });
-    describe('CSS Classes', () => {
-        it('should apply custom className', () => {
+    describe("CSS Classes", () => {
+        it("should apply custom className", () => {
             render(React.createElement(Button, { className: "custom-class" }, "Custom"));
-            const button = screen.getByRole('button');
-            expect(button).toHaveClass('custom-class');
+            const button = screen.getByRole("button");
+            expect(button).toHaveClass("custom-class");
         });
-        it('should apply id when provided', () => {
+        it("should apply id when provided", () => {
             render(React.createElement(Button, { id: "test-button" }, "ID Button"));
-            const button = screen.getByRole('button');
-            expect(button).toHaveAttribute('id', 'test-button');
+            const button = screen.getByRole("button");
+            expect(button).toHaveAttribute("id", "test-button");
         });
     });
 });

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type BaseTableProps, type TableAction } from "@lamenna/lxp-shared-components";
+export interface TableProps extends BaseTableProps {
+    /**
+     * Optional custom renderer for the actions column. When omitted, a
+     * simple default button layout is used.
+     */
+    renderActions?: (row: any, actions: TableAction[]) => React.ReactNode;
+}
+export declare const Table: React.FC<TableProps>;

package/dist/components/Table/Table.js

@@ -0,0 +1,253 @@
+import React, { useMemo, useState } from "react";
+import { tableConfig, tableThemeConfig, } from "@lamenna/lxp-shared-components";
+const getCellContent = (column, row) => {
+    const rawValue = row[column.key];
+    if (column.render) {
+        return column.render(rawValue, row);
+    }
+    if (rawValue && typeof rawValue === "object") {
+        const { line1, line2, text, name } = rawValue;
+        const primary = line1 ?? text ?? name;
+        const secondary = line2;
+        if (primary || secondary) {
+            return (React.createElement("div", null,
+                primary && React.createElement("div", null, primary),
+                secondary && (React.createElement("div", { style: { fontSize: "0.75rem", color: "#6B7280" } }, secondary))));
+        }
+    }
+    return rawValue ?? "";
+};
+export const Table = ({ columns, data, actions = [], renderActions, selectable = false, showPagination = true, showSearch = true, loading = false, theme = "tera", title = tableConfig.defaultTitle, serverSide = false, totalCount, currentPage, pageSize, pageSizeOptions, emptyState, onSelectionChange, onPageChange, onPageSizeChange, onSearch, enableRowClick = false, onRowClick, }) => {
+    const themeStyles = tableThemeConfig[theme];
+    const [localPage, setLocalPage] = useState(currentPage ?? 1);
+    const [localPageSize, setLocalPageSize] = useState(pageSize ?? tableConfig.defaultPageSize);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [selectedRows, setSelectedRows] = useState([]);
+    const effectivePage = currentPage ?? localPage;
+    const effectivePageSize = pageSize ?? localPageSize;
+    const effectivePageSizeOptions = pageSizeOptions ?? tableConfig.defaultPageSizeOptions;
+    const filteredData = useMemo(() => {
+        if (!showSearch || !searchTerm.trim())
+            return data;
+        const term = searchTerm.toLowerCase();
+        return data.filter((row) => Object.values(row).some((value) => String(typeof value === "object" && value !== null
+            ? value.line1 ?? value.line2 ?? ""
+            : value ?? "")
+            .toLowerCase()
+            .includes(term)));
+    }, [data, searchTerm, showSearch]);
+    const pagedData = useMemo(() => {
+        if (!showPagination || serverSide)
+            return filteredData;
+        const start = (effectivePage - 1) * effectivePageSize;
+        return filteredData.slice(start, start + effectivePageSize);
+    }, [
+        filteredData,
+        showPagination,
+        serverSide,
+        effectivePage,
+        effectivePageSize,
+    ]);
+    const totalItems = serverSide
+        ? totalCount ?? filteredData.length
+        : filteredData.length;
+    const totalPages = showPagination
+        ? Math.max(1, Math.ceil(totalItems / effectivePageSize))
+        : 1;
+    const handleToggleRow = (index) => {
+        const nextSelection = selectedRows.includes(index)
+            ? selectedRows.filter((i) => i !== index)
+            : [...selectedRows, index];
+        setSelectedRows(nextSelection);
+        onSelectionChange?.(nextSelection);
+    };
+    const handleSearchChange = (value) => {
+        setSearchTerm(value);
+        if (onSearch) {
+            onSearch({
+                page: effectivePage,
+                pageSize: effectivePageSize,
+                searchTerm: value,
+                filters: {},
+            });
+        }
+    };
+    const handlePageChangeInternal = (nextPage) => {
+        if (nextPage < 1 || nextPage > totalPages)
+            return;
+        if (currentPage == null) {
+            setLocalPage(nextPage);
+        }
+        onPageChange?.({
+            page: nextPage,
+            pageSize: effectivePageSize,
+            searchTerm,
+            filters: {},
+        });
+    };
+    const handlePageSizeChangeInternal = (nextSize) => {
+        if (pageSize == null) {
+            setLocalPageSize(nextSize);
+            setLocalPage(1);
+        }
+        onPageSizeChange?.({
+            page: 1,
+            pageSize: nextSize,
+            searchTerm,
+            filters: {},
+        });
+    };
+    const defaultRenderActions = (row, rowActions) => {
+        if (!rowActions || rowActions.length === 0)
+            return null;
+        return (React.createElement("div", { style: { display: "flex", gap: "0.5rem" } }, rowActions.map((action, index) => {
+            const isDisabled = action.disabled ? action.disabled(row) : false;
+            let background = "#E5E7EB";
+            let color = "#374151";
+            if (action.variant === "primary") {
+                background = "#DBEAFE";
+                color = "#1D4ED8";
+            }
+            else if (action.variant === "secondary") {
+                background = "#EDE9FE";
+                color = "#5B21B6";
+            }
+            else if (action.variant === "danger") {
+                background = "#FEE2E2";
+                color = "#B91C1C";
+            }
+            return (React.createElement("button", { key: `action-${index}`, type: "button", onClick: () => !isDisabled && action.action(row), disabled: isDisabled, style: {
+                    padding: "4px 12px",
+                    borderRadius: "9999px",
+                    border: "none",
+                    background,
+                    color,
+                    fontSize: "0.75rem",
+                    cursor: isDisabled ? "not-allowed" : "pointer",
+                    opacity: isDisabled ? 0.5 : 1,
+                } }, action.label));
+        })));
+    };
+    const renderBody = () => {
+        if (loading) {
+            return (React.createElement("tr", null,
+                React.createElement("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions.length ? 1 : 0), style: { padding: "1.5rem", textAlign: "center" } }, tableConfig.loadingMessage)));
+        }
+        if (!pagedData.length) {
+            const message = emptyState?.message ??
+                (emptyState?.showDefault ?? true
+                    ? tableConfig.emptyMessage
+                    : undefined);
+            return (React.createElement("tr", null,
+                React.createElement("td", { colSpan: columns.length + (selectable ? 1 : 0) + (actions.length ? 1 : 0), style: {
+                        padding: "1.5rem",
+                        textAlign: "center",
+                        color: themeStyles.emptyStateTextColor,
+                    } }, message)));
+        }
+        return pagedData.map((row, rowIndex) => {
+            const globalIndex = serverSide
+                ? rowIndex
+                : (effectivePage - 1) * effectivePageSize + rowIndex;
+            const isSelected = selectedRows.includes(globalIndex);
+            return (React.createElement("tr", { key: globalIndex, onClick: enableRowClick
+                    ? () => {
+                        onRowClick?.(row, globalIndex);
+                    }
+                    : undefined, style: {
+                    backgroundColor: "#FFFFFF",
+                    borderBottom: `1px solid ${themeStyles.borderColor}`,
+                    cursor: enableRowClick ? "pointer" : "default",
+                    minHeight: tableConfig.rowMinHeight,
+                } },
+                selectable && (React.createElement("td", { style: {
+                        width: tableConfig.selectionColumnWidth,
+                        padding: "0.75rem",
+                    } },
+                    React.createElement("input", { type: "checkbox", checked: isSelected, onChange: () => handleToggleRow(globalIndex) }))),
+                columns.map((column) => (React.createElement("td", { key: column.key, style: {
+                        padding: "0.75rem 1rem",
+                        fontSize: "0.875rem",
+                        textAlign: column.align ?? "left",
+                    } }, getCellContent(column, row)))),
+                actions.length > 0 && (React.createElement("td", { style: { padding: "0.75rem 1rem", textAlign: "right" } }, (renderActions ?? defaultRenderActions)(row, actions)))));
+        });
+    };
+    return (React.createElement("div", { style: {
+            border: `1px solid ${themeStyles.borderColor}`,
+            borderRadius: "0.5rem",
+            backgroundColor: "#FFFFFF",
+            fontFamily: themeStyles.fontFamily,
+        } },
+        React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "1rem 1.25rem",
+                borderBottom: `1px solid ${themeStyles.borderColor}`,
+            } },
+            React.createElement("div", null,
+                React.createElement("h3", { style: {
+                        margin: 0,
+                        fontSize: "1rem",
+                        fontWeight: tableConfig.headerFontWeight,
+                    } }, title),
+                totalItems > 0 && (React.createElement("span", { style: { fontSize: "0.875rem", color: "#6B7280" } },
+                    "(",
+                    totalItems,
+                    ")"))),
+            showSearch && (React.createElement("input", { type: "search", placeholder: "Search...", value: searchTerm, onChange: (e) => handleSearchChange(e.target.value), style: {
+                    padding: "0.5rem 0.75rem",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #D1D5DB",
+                    fontSize: "0.875rem",
+                    minWidth: "200px",
+                } }))),
+        React.createElement("div", { style: { overflowX: "auto" } },
+            React.createElement("table", { style: { width: "100%", borderCollapse: "collapse" } },
+                React.createElement("thead", null,
+                    React.createElement("tr", { style: {
+                            backgroundColor: themeStyles.headerBackground,
+                            borderBottom: `1px solid ${themeStyles.borderColor}`,
+                        } },
+                        selectable && (React.createElement("th", { style: {
+                                width: tableConfig.selectionColumnWidth,
+                                padding: "0.75rem",
+                            } })),
+                        columns.map((column) => (React.createElement("th", { key: column.key, style: {
+                                padding: "0.75rem 1rem",
+                                fontSize: "0.75rem",
+                                textAlign: column.align ?? "left",
+                                textTransform: "uppercase",
+                                letterSpacing: "0.05em",
+                                color: themeStyles.headerTextColor,
+                            } }, column.label))),
+                        actions.length > 0 && (React.createElement("th", { style: {
+                                padding: "0.75rem 1rem",
+                                textAlign: "right",
+                            } }, "Actions")))),
+                React.createElement("tbody", null, renderBody()))),
+        showPagination && totalPages > 1 && (React.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                padding: "0.75rem 1.25rem",
+                borderTop: `1px solid ${themeStyles.borderColor}`,
+                fontSize: "0.875rem",
+            } },
+            React.createElement("div", null,
+                "Page ",
+                effectivePage,
+                " of ",
+                totalPages),
+            React.createElement("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.75rem",
+                } },
+                React.createElement("label", null,
+                    React.createElement("span", { style: { marginRight: "0.25rem" } }, "Rows per page"),
+                    React.createElement("select", { value: effectivePageSize, onChange: (e) => handlePageSizeChangeInternal(Number(e.target.value)) }, effectivePageSizeOptions.map((size) => (React.createElement("option", { key: size, value: size }, size))))),
+                React.createElement("button", { type: "button", onClick: () => handlePageChangeInternal(effectivePage - 1), disabled: effectivePage === 1 }, "Previous"),
+                React.createElement("button", { type: "button", onClick: () => handlePageChangeInternal(effectivePage + 1), disabled: effectivePage === totalPages }, "Next"))))));
+};

package/dist/components/Table/__tests__/table.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/Table/__tests__/table.test.js

@@ -0,0 +1,44 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Table } from "../Table";
+describe("Table Component (React)", () => {
+    const columns = [
+        { key: "name", label: "Name" },
+        { key: "email", label: "Email" },
+    ];
+    const data = [
+        { id: 1, name: "John Doe", email: "john@example.com" },
+        { id: 2, name: "Jane Smith", email: "jane@example.com" },
+    ];
+    it("renders header and rows", () => {
+        render(React.createElement(Table, { columns: columns, data: data, title: "Users", showPagination: false }));
+        expect(screen.getByText("Users")).toBeInTheDocument();
+        expect(screen.getByText("John Doe")).toBeInTheDocument();
+        expect(screen.getByText("jane@example.com")).toBeInTheDocument();
+    });
+    it("applies theme data attribute and font family", () => {
+        const { container } = render(React.createElement(Table, { columns: columns, data: data, theme: "cynk", showPagination: false }));
+        const root = container.firstChild;
+        expect(root.style.fontFamily).toContain("Inter");
+    });
+    it("handles row click when enabled", () => {
+        const handleRowClick = jest.fn();
+        render(React.createElement(Table, { columns: columns, data: data, enableRowClick: true, onRowClick: handleRowClick, showPagination: false }));
+        const row = screen.getByText("John Doe").closest("tr");
+        expect(row).not.toBeNull();
+        if (row) {
+            fireEvent.click(row);
+        }
+        expect(handleRowClick).toHaveBeenCalledTimes(1);
+        expect(handleRowClick).toHaveBeenCalledWith(expect.objectContaining({ name: "John Doe" }), 0);
+    });
+    it("renders actions and calls action handler", () => {
+        const actionFn = jest.fn();
+        render(React.createElement(Table, { columns: columns, data: data, actions: [{ label: "View", action: actionFn, variant: "primary" }], showPagination: false }));
+        const button = screen.getAllByText("View")[0];
+        fireEvent.click(button);
+        expect(actionFn).toHaveBeenCalledTimes(1);
+        expect(actionFn).toHaveBeenCalledWith(expect.objectContaining({ name: "John Doe" }));
+    });
+});

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import React, { type ReactNode } from "react";
+import { type CompanyTheme } from "@lamenna/lxp-shared-components";
+interface ThemeContextValue {
+    theme: CompanyTheme;
+    setTheme: (theme: CompanyTheme) => void;
+    toggleTheme: () => void;
+}
+export declare const useTheme: () => ThemeContextValue;
+export interface ThemeProviderProps {
+    /**
+     * Controlled theme value. When provided, the component becomes controlled
+     * and `setTheme` / `toggleTheme` will update internal state but the final
+     * theme is driven by this prop.
+     */
+    theme?: CompanyTheme;
+    /**
+     * Default theme to use when `theme` is not provided (uncontrolled mode).
+     */
+    defaultTheme?: CompanyTheme;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export {};

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,22 @@
+import React, { createContext, useContext, useMemo, useState, } from "react";
+import { themeConfig, defaultTheme, } from "@lamenna/lxp-shared-components";
+const ThemeContext = createContext(undefined);
+export const useTheme = () => {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return ctx;
+};
+export const ThemeProvider = ({ theme: controlledTheme, defaultTheme: defaultThemeProp = defaultTheme, children, className, }) => {
+    const [uncontrolledTheme, setUncontrolledTheme] = useState(controlledTheme ?? defaultThemeProp);
+    const currentTheme = controlledTheme ?? uncontrolledTheme;
+    const value = useMemo(() => ({
+        theme: currentTheme,
+        setTheme: (next) => setUncontrolledTheme(next),
+        toggleTheme: () => setUncontrolledTheme((prev) => (prev === "tera" ? "cynk" : "tera")),
+    }), [currentTheme]);
+    const themeStyles = themeConfig[currentTheme];
+    return (React.createElement(ThemeContext.Provider, { value: value },
+        React.createElement("div", { className: className, "data-theme": currentTheme, style: { fontFamily: themeStyles.fontFamily } }, children)));
+};

package/dist/components/ThemeProvider/__tests__/theme-provider.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/components/ThemeProvider/__tests__/theme-provider.test.js

@@ -0,0 +1,20 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ThemeProvider, useTheme } from "../ThemeProvider";
+const Consumer = () => {
+    const { theme } = useTheme();
+    return React.createElement("div", { "data-testid": "theme-consumer" }, theme);
+};
+describe("ThemeProvider (React)", () => {
+    it("provides default theme when none is specified", () => {
+        render(React.createElement(ThemeProvider, null,
+            React.createElement(Consumer, null)));
+        expect(screen.getByTestId("theme-consumer")).toHaveTextContent("tera");
+    });
+    it("respects initial theme prop", () => {
+        render(React.createElement(ThemeProvider, { defaultTheme: "cynk" },
+            React.createElement(Consumer, null)));
+        expect(screen.getByTestId("theme-consumer")).toHaveTextContent("cynk");
+    });
+});

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface ThemeSwitcherProps {
+    className?: string;
+    showLabels?: boolean;
+}
+export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;

package/dist/components/ThemeSwitcher/ThemeSwitcher.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { useTheme } from "../ThemeProvider/ThemeProvider";
+export const ThemeSwitcher = ({ className = "", showLabels = true, }) => {
+    const { theme, toggleTheme } = useTheme();
+    const nextThemeLabel = theme === "tera" ? "Cynk" : "Tera";
+    return (React.createElement("button", { type: "button", onClick: toggleTheme, className: className, title: `Switch to ${nextThemeLabel} theme`, style: {
+            padding: "8px 16px",
+            borderRadius: "6px",
+            border: "1px solid #E5E7EB",
+            background: "#FFFFFF",
+            color: "#111827",
+            cursor: "pointer",
+            fontSize: "0.875rem",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+        } }, showLabels ? (React.createElement("span", null, theme === "tera" ? "Tera theme" : "Cynk theme")) : (React.createElement("span", null, theme === "tera" ? "T" : "C"))));
+};

package/dist/index.d.ts

@@ -1 +1,4 @@
 export * from "./components/Button/Button";
+export * from "./components/ThemeProvider/ThemeProvider";
+export * from "./components/ThemeSwitcher/ThemeSwitcher";
+export * from "./components/Table/Table";

package/dist/index.js

@@ -1 +1,4 @@
 export * from "./components/Button/Button";
+export * from "./components/ThemeProvider/ThemeProvider";
+export * from "./components/ThemeSwitcher/ThemeSwitcher";
+export * from "./components/Table/Table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lamenna/lxp-react",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "React components for LXP",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,20 +11,20 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^19.0.0"
   },
   "dependencies": {
-    "@lamenna/lxp-core": "0.0.1",
-    "@lamenna/lxp-tokens": "0.0.1",
-    "@lamenna/lxp-shared-components": "0.0.1"
+    "@lamenna/lxp-core": "0.1.0",
+    "@lamenna/lxp-tokens": "0.1.0",
+    "@lamenna/lxp-shared-components": "0.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.0",
-    "react": "^18.2.0",
-    "typescript": "^5.3.3"
+    "@types/react": "^19.0.0",
+    "react": "^19.2.3",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "build": "tsc",