components-test-pb 0.1.0 → 0.1.3

package/dist/Components/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableProps } from './Table.types.js';
+export declare const Table: FC<TableProps>;

package/dist/Components/Table/Table.js

@@ -0,0 +1,8 @@
+import { useTable } from './useTable.js';
+import { renderTable } from './renderTable.js';
+import { useTableStyles } from './useTableStyles.styles.js';
+export const Table = (props) => {
+    const state = useTable(props);
+    useTableStyles(state);
+    return renderTable(state);
+};

package/dist/Components/Table/Table.types.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableSlots = {
+    root: NonNullable<Slot<'table'>>;
+};
+export type TableProps = ComponentProps<TableSlots> & {
+    size?: 'small' | 'medium';
+    sortable?: boolean;
+};
+export type TableState = ComponentState<TableSlots> & Required<Pick<TableProps, 'size' | 'sortable'>>;

package/dist/Components/Table/Table.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/TableBody.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableBodyProps } from './TableBody.types.js';
+export declare const TableBody: FC<TableBodyProps>;

package/dist/Components/Table/TableBody.js

@@ -0,0 +1,8 @@
+import { useTableBody } from './useTableBody.js';
+import { renderTableBody } from './renderTableBody.js';
+import { useTableBodyStyles } from './useTableBodyStyles.styles.js';
+export const TableBody = (props) => {
+    const state = useTableBody(props);
+    useTableBodyStyles(state);
+    return renderTableBody(state);
+};

package/dist/Components/Table/TableBody.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableBodySlots = {
+    root: NonNullable<Slot<'tbody'>>;
+};
+export type TableBodyProps = ComponentProps<TableBodySlots>;
+export type TableBodyState = ComponentState<TableBodySlots>;

package/dist/Components/Table/TableBody.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/TableCell.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableCellProps } from './TableCell.types.js';
+export declare const TableCell: FC<TableCellProps>;

package/dist/Components/Table/TableCell.js

@@ -0,0 +1,8 @@
+import { useTableCell } from './useTableCell.js';
+import { renderTableCell } from './renderTableCell.js';
+import { useTableCellStyles } from './useTableCellStyles.styles.js';
+export const TableCell = (props) => {
+    const state = useTableCell(props);
+    useTableCellStyles(state);
+    return renderTableCell(state);
+};

package/dist/Components/Table/TableCell.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableCellSlots = {
+    root: NonNullable<Slot<'td'>>;
+};
+export type TableCellProps = ComponentProps<TableCellSlots>;
+export type TableCellState = ComponentState<TableCellSlots>;

package/dist/Components/Table/TableCell.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableHeaderProps } from './TableHeader.types.js';
+export declare const TableHeader: FC<TableHeaderProps>;

package/dist/Components/Table/TableHeader.js

@@ -0,0 +1,8 @@
+import { useTableHeader } from './useTableHeader.js';
+import { renderTableHeader } from './renderTableHeader.js';
+import { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
+export const TableHeader = (props) => {
+    const state = useTableHeader(props);
+    useTableHeaderStyles(state);
+    return renderTableHeader(state);
+};

package/dist/Components/Table/TableHeader.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableHeaderSlots = {
+    root: NonNullable<Slot<'thead'>>;
+};
+export type TableHeaderProps = ComponentProps<TableHeaderSlots>;
+export type TableHeaderState = ComponentState<TableHeaderSlots>;

package/dist/Components/Table/TableHeader.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/TableHeaderCell.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableHeaderCellProps } from './TableHeaderCell.types.js';
+export declare const TableHeaderCell: FC<TableHeaderCellProps>;

package/dist/Components/Table/TableHeaderCell.js

@@ -0,0 +1,8 @@
+import { useTableHeaderCell } from './useTableHeaderCell.js';
+import { renderTableHeaderCell } from './renderTableHeaderCell.js';
+import { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
+export const TableHeaderCell = (props) => {
+    const state = useTableHeaderCell(props);
+    useTableHeaderCellStyles(state);
+    return renderTableHeaderCell(state);
+};

package/dist/Components/Table/TableHeaderCell.types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableHeaderCellSlots = {
+    root: NonNullable<Slot<'th'>>;
+};
+export type TableHeaderCellProps = ComponentProps<TableHeaderCellSlots> & {
+    sortDirection?: 'ascending' | 'descending';
+};
+export type TableHeaderCellState = ComponentState<TableHeaderCellSlots> & {
+    sortDirection?: 'ascending' | 'descending';
+};

package/dist/Components/Table/TableHeaderCell.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/TableRow.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableRowProps } from './TableRow.types.js';
+export declare const TableRow: FC<TableRowProps>;

package/dist/Components/Table/TableRow.js

@@ -0,0 +1,8 @@
+import { useTableRow } from './useTableRow.js';
+import { renderTableRow } from './renderTableRow.js';
+import { useTableRowStyles } from './useTableRowStyles.styles.js';
+export const TableRow = (props) => {
+    const state = useTableRow(props);
+    useTableRowStyles(state);
+    return renderTableRow(state);
+};

package/dist/Components/Table/TableRow.types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+export type TableRowSlots = {
+    root: NonNullable<Slot<'tr'>>;
+};
+export type TableRowProps = ComponentProps<TableRowSlots> & {
+    appearance?: 'none' | 'brand';
+};
+export type TableRowState = ComponentState<TableRowSlots> & Required<Pick<TableRowProps, 'appearance'>>;

package/dist/Components/Table/TableRow.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Table/index.d.ts

@@ -0,0 +1,30 @@
+export type { TableSlots, TableProps, TableState } from './Table.types.js';
+export { Table } from './Table.js';
+export { useTable } from './useTable.js';
+export { renderTable } from './renderTable.js';
+export { useTableStyles } from './useTableStyles.styles.js';
+export type { TableHeaderSlots, TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
+export { TableHeader } from './TableHeader.js';
+export { useTableHeader } from './useTableHeader.js';
+export { renderTableHeader } from './renderTableHeader.js';
+export { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
+export type { TableBodySlots, TableBodyProps, TableBodyState } from './TableBody.types.js';
+export { TableBody } from './TableBody.js';
+export { useTableBody } from './useTableBody.js';
+export { renderTableBody } from './renderTableBody.js';
+export { useTableBodyStyles } from './useTableBodyStyles.styles.js';
+export type { TableRowSlots, TableRowProps, TableRowState } from './TableRow.types.js';
+export { TableRow } from './TableRow.js';
+export { useTableRow } from './useTableRow.js';
+export { renderTableRow } from './renderTableRow.js';
+export { useTableRowStyles } from './useTableRowStyles.styles.js';
+export type { TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
+export { TableHeaderCell } from './TableHeaderCell.js';
+export { useTableHeaderCell } from './useTableHeaderCell.js';
+export { renderTableHeaderCell } from './renderTableHeaderCell.js';
+export { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
+export type { TableCellSlots, TableCellProps, TableCellState } from './TableCell.types.js';
+export { TableCell } from './TableCell.js';
+export { useTableCell } from './useTableCell.js';
+export { renderTableCell } from './renderTableCell.js';
+export { useTableCellStyles } from './useTableCellStyles.styles.js';

package/dist/Components/Table/index.js

@@ -0,0 +1,24 @@
+export { Table } from './Table.js';
+export { useTable } from './useTable.js';
+export { renderTable } from './renderTable.js';
+export { useTableStyles } from './useTableStyles.styles.js';
+export { TableHeader } from './TableHeader.js';
+export { useTableHeader } from './useTableHeader.js';
+export { renderTableHeader } from './renderTableHeader.js';
+export { useTableHeaderStyles } from './useTableHeaderStyles.styles.js';
+export { TableBody } from './TableBody.js';
+export { useTableBody } from './useTableBody.js';
+export { renderTableBody } from './renderTableBody.js';
+export { useTableBodyStyles } from './useTableBodyStyles.styles.js';
+export { TableRow } from './TableRow.js';
+export { useTableRow } from './useTableRow.js';
+export { renderTableRow } from './renderTableRow.js';
+export { useTableRowStyles } from './useTableRowStyles.styles.js';
+export { TableHeaderCell } from './TableHeaderCell.js';
+export { useTableHeaderCell } from './useTableHeaderCell.js';
+export { renderTableHeaderCell } from './renderTableHeaderCell.js';
+export { useTableHeaderCellStyles } from './useTableHeaderCellStyles.styles.js';
+export { TableCell } from './TableCell.js';
+export { useTableCell } from './useTableCell.js';
+export { renderTableCell } from './renderTableCell.js';
+export { useTableCellStyles } from './useTableCellStyles.styles.js';

package/dist/Components/Table/renderTable.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableState } from './Table.types.js';
+export declare const renderTable: (state: TableState) => Element;

package/dist/Components/Table/renderTable.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTable = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/renderTableBody.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableBodyState } from './TableBody.types.js';
+export declare const renderTableBody: (state: TableBodyState) => Element;

package/dist/Components/Table/renderTableBody.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTableBody = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/renderTableCell.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableCellState } from './TableCell.types.js';
+export declare const renderTableCell: (state: TableCellState) => Element;

package/dist/Components/Table/renderTableCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTableCell = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/renderTableHeader.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableHeaderState } from './TableHeader.types.js';
+export declare const renderTableHeader: (state: TableHeaderState) => Element;

package/dist/Components/Table/renderTableHeader.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTableHeader = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/renderTableHeaderCell.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableHeaderCellState } from './TableHeaderCell.types.js';
+export declare const renderTableHeaderCell: (state: TableHeaderCellState) => Element;

package/dist/Components/Table/renderTableHeaderCell.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTableHeaderCell = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/renderTableRow.d.ts

@@ -0,0 +1,3 @@
+import type { Element } from '../../Types/utils/types.js';
+import type { TableRowState } from './TableRow.types.js';
+export declare const renderTableRow: (state: TableRowState) => Element;

package/dist/Components/Table/renderTableRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "jsx-framework-test-pb/jsx-runtime";
+export const renderTableRow = (state) => {
+    const Root = state.components.root;
+    const { as: _as, ...rootProps } = state.root;
+    return _jsx(Root, { ...rootProps });
+};

package/dist/Components/Table/useTable.d.ts

@@ -0,0 +1,2 @@
+import type { TableProps, TableState } from './Table.types.js';
+export declare const useTable: (props: TableProps) => TableState;

package/dist/Components/Table/useTable.js

@@ -0,0 +1,9 @@
+export const useTable = (props) => {
+    const { size, sortable, ...rest } = props;
+    return {
+        size: size ?? 'medium',
+        sortable: sortable ?? false,
+        components: { root: 'table' },
+        root: { ...rest },
+    };
+};

package/dist/Components/Table/useTableBody.d.ts

@@ -0,0 +1,2 @@
+import type { TableBodyProps, TableBodyState } from './TableBody.types.js';
+export declare const useTableBody: (props: TableBodyProps) => TableBodyState;

package/dist/Components/Table/useTableBody.js

@@ -0,0 +1,6 @@
+export const useTableBody = (props) => {
+    return {
+        components: { root: 'tbody' },
+        root: { ...props },
+    };
+};

package/dist/Components/Table/useTableBodyStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableBodySlots, TableBodyState } from './TableBody.types.js';
+export declare const tableBodyClassNames: SlotClassNames<TableBodySlots>;
+export declare const useTableBodyStyles: (state: TableBodyState) => TableBodyState;

package/dist/Components/Table/useTableBodyStyles.styles.js

@@ -0,0 +1,12 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+export const tableBodyClassNames = {
+    root: 'TableBody'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'table-row-group',
+});
+export const useTableBodyStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(tableBodyClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/dist/Components/Table/useTableCell.d.ts

@@ -0,0 +1,2 @@
+import type { TableCellProps, TableCellState } from './TableCell.types.js';
+export declare const useTableCell: (props: TableCellProps) => TableCellState;

package/dist/Components/Table/useTableCell.js

@@ -0,0 +1,6 @@
+export const useTableCell = (props) => {
+    return {
+        components: { root: 'td' },
+        root: { ...props },
+    };
+};

package/dist/Components/Table/useTableCellStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableCellSlots, TableCellState } from './TableCell.types.js';
+export declare const tableCellClassNames: SlotClassNames<TableCellSlots>;
+export declare const useTableCellStyles: (state: TableCellState) => TableCellState;

package/dist/Components/Table/useTableCellStyles.styles.js

@@ -0,0 +1,17 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
+export const tableCellClassNames = {
+    root: 'TableCell'
+};
+const useRootBaseClassName = makeResetStyles({
+    textAlign: 'left',
+    paddingTop: Tokens.spacingS,
+    paddingBottom: Tokens.spacingS,
+    paddingLeft: Tokens.spacingM,
+    paddingRight: Tokens.spacingM,
+});
+export const useTableCellStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(tableCellClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/dist/Components/Table/useTableHeader.d.ts

@@ -0,0 +1,2 @@
+import type { TableHeaderProps, TableHeaderState } from './TableHeader.types.js';
+export declare const useTableHeader: (props: TableHeaderProps) => TableHeaderState;

package/dist/Components/Table/useTableHeader.js

@@ -0,0 +1,6 @@
+export const useTableHeader = (props) => {
+    return {
+        components: { root: 'thead' },
+        root: { ...props },
+    };
+};

package/dist/Components/Table/useTableHeaderCell.d.ts

@@ -0,0 +1,2 @@
+import type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types.js';
+export declare const useTableHeaderCell: (props: TableHeaderCellProps) => TableHeaderCellState;

package/dist/Components/Table/useTableHeaderCell.js

@@ -0,0 +1,12 @@
+export const useTableHeaderCell = (props) => {
+    const { sortDirection, ...rest } = props;
+    const root = { ...rest };
+    if (sortDirection) {
+        root['aria-sort'] = sortDirection;
+    }
+    return {
+        sortDirection,
+        components: { root: 'th' },
+        root,
+    };
+};

package/dist/Components/Table/useTableHeaderCellStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types.js';
+export declare const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots>;
+export declare const useTableHeaderCellStyles: (state: TableHeaderCellState) => TableHeaderCellState;

package/dist/Components/Table/useTableHeaderCellStyles.styles.js

@@ -0,0 +1,27 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
+export const tableHeaderCellClassNames = {
+    root: 'TableHeaderCell'
+};
+const useRootBaseClassName = makeResetStyles({
+    fontWeight: Tokens.fontWeightSemibold,
+    textAlign: 'left',
+    paddingTop: Tokens.spacingS,
+    paddingBottom: Tokens.spacingS,
+    paddingLeft: Tokens.spacingM,
+    paddingRight: Tokens.spacingM,
+});
+const useRootStyles = makeStyles({
+    ascending: {
+        cursor: 'pointer',
+    },
+    descending: {
+        cursor: 'pointer',
+    },
+});
+export const useTableHeaderCellStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(tableHeaderCellClassNames.root, rootBaseClassName, state.sortDirection && rootStyles[state.sortDirection], state.root.className);
+    return state;
+};

package/dist/Components/Table/useTableHeaderStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableHeaderSlots, TableHeaderState } from './TableHeader.types.js';
+export declare const tableHeaderClassNames: SlotClassNames<TableHeaderSlots>;
+export declare const useTableHeaderStyles: (state: TableHeaderState) => TableHeaderState;

package/dist/Components/Table/useTableHeaderStyles.styles.js

@@ -0,0 +1,12 @@
+import { makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+export const tableHeaderClassNames = {
+    root: 'TableHeader'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'table-header-group',
+});
+export const useTableHeaderStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    state.root.className = mergeClasses(tableHeaderClassNames.root, rootBaseClassName, state.root.className);
+    return state;
+};

package/dist/Components/Table/useTableRow.d.ts

@@ -0,0 +1,2 @@
+import type { TableRowProps, TableRowState } from './TableRow.types.js';
+export declare const useTableRow: (props: TableRowProps) => TableRowState;

package/dist/Components/Table/useTableRow.js

@@ -0,0 +1,8 @@
+export const useTableRow = (props) => {
+    const { appearance, ...rest } = props;
+    return {
+        appearance: appearance ?? 'none',
+        components: { root: 'tr' },
+        root: { ...rest },
+    };
+};

package/dist/Components/Table/useTableRowStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableRowSlots, TableRowState } from './TableRow.types.js';
+export declare const tableRowClassNames: SlotClassNames<TableRowSlots>;
+export declare const useTableRowStyles: (state: TableRowState) => TableRowState;

package/dist/Components/Table/useTableRowStyles.styles.js

@@ -0,0 +1,31 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
+export const tableRowClassNames = {
+    root: 'TableRow'
+};
+const useRootBaseClassName = makeResetStyles({
+    borderBottom: `${Tokens.strokeWidthThin} solid ${Tokens.colorNeutralStroke1}`,
+    transitionDuration: Tokens.durationNormal,
+    transitionProperty: 'background',
+    transitionTimingFunction: Tokens.curveEasy,
+});
+const useRootStyles = makeStyles({
+    none: {
+        ':hover': {
+            backgroundColor: Tokens.colorNeutralBackground1Hover,
+        },
+    },
+    brand: {
+        backgroundColor: Tokens.colorBrandBackground,
+        color: Tokens.colorBrandForeground1,
+        ':hover': {
+            backgroundColor: Tokens.colorBrandBackgroundHover,
+        },
+    },
+});
+export const useTableRowStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(tableRowClassNames.root, rootBaseClassName, rootStyles[state.appearance], state.root.className);
+    return state;
+};

package/dist/Components/Table/useTableStyles.styles.d.ts

@@ -0,0 +1,4 @@
+import { SlotClassNames } from '../../Types/compose/types.js';
+import { TableSlots, TableState } from './Table.types.js';
+export declare const tableClassNames: SlotClassNames<TableSlots>;
+export declare const useTableStyles: (state: TableState) => TableState;

package/dist/Components/Table/useTableStyles.styles.js

@@ -0,0 +1,22 @@
+import { makeStyles, makeResetStyles, mergeClasses } from 'css-engine-test-pb';
+import { Tokens } from '../../Theme/tokens.js';
+export const tableClassNames = {
+    root: 'Table'
+};
+const useRootBaseClassName = makeResetStyles({
+    borderCollapse: 'collapse',
+    width: '100%',
+    fontFamily: Tokens.fontFamilyBase,
+    fontSize: Tokens.fontSize300,
+    lineHeight: Tokens.lineHeight300,
+});
+const useRootStyles = makeStyles({
+    small: {},
+    medium: {},
+});
+export const useTableStyles = (state) => {
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = mergeClasses(tableClassNames.root, rootBaseClassName, rootStyles[state.size], state.root.className);
+    return state;
+};

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { Text, useText, renderText, useTextStyles } from './Components/Text/inde
 export type { TextSlots, TextProps, TextPresetProps, TextState } from './Components/Text/index.js';
 export { Button, useButton, renderButton, useButtonStyles } from './Components/Button/index.js';
 export type { ButtonSlots, ButtonProps, ButtonBaseProps, ButtonState } from './Components/Button/index.js';
+export { Table, useTable, renderTable, useTableStyles, TableHeader, useTableHeader, renderTableHeader, useTableHeaderStyles, TableBody, useTableBody, renderTableBody, useTableBodyStyles, TableRow, useTableRow, renderTableRow, useTableRowStyles, TableHeaderCell, useTableHeaderCell, renderTableHeaderCell, useTableHeaderCellStyles, TableCell, useTableCell, renderTableCell, useTableCellStyles } from './Components/Table/index.js';
+export type { TableSlots, TableProps, TableState, TableHeaderSlots, TableHeaderProps, TableHeaderState, TableBodySlots, TableBodyProps, TableBodyState, TableRowSlots, TableRowProps, TableRowState, TableHeaderCellSlots, TableHeaderCellProps, TableHeaderCellState, TableCellSlots, TableCellProps, TableCellState } from './Components/Table/index.js';
 export * from './Types/compose/index.js';
 export * from './Types/utils/index.js';
 export { useARIAButtonProps } from './utilities/index.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { Text, useText, renderText, useTextStyles } from './Components/Text/index.js';
 export { Button, useButton, renderButton, useButtonStyles } from './Components/Button/index.js';
+export { Table, useTable, renderTable, useTableStyles, TableHeader, useTableHeader, renderTableHeader, useTableHeaderStyles, TableBody, useTableBody, renderTableBody, useTableBodyStyles, TableRow, useTableRow, renderTableRow, useTableRowStyles, TableHeaderCell, useTableHeaderCell, renderTableHeaderCell, useTableHeaderCellStyles, TableCell, useTableCell, renderTableCell, useTableCellStyles } from './Components/Table/index.js';
 export * from './Types/compose/index.js';
 export * from './Types/utils/index.js';
 export { useARIAButtonProps } from './utilities/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Components/Table/Table.tsx

@@ -0,0 +1,13 @@
+import type { FC } from '../../Types/utils/types.js';
+import type { TableProps } from './Table.types.js';
+import { useTable } from './useTable.js';
+import { renderTable } from './renderTable.js';
+import { useTableStyles } from './useTableStyles.styles.js';
+
+export const Table: FC<TableProps> = (props) => {
+    const state = useTable(props);
+
+    useTableStyles(state);
+
+    return renderTable(state);
+};

package/src/Components/Table/Table.types.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, ComponentState, Slot } from '../../Types/compose/types.js';
+
+export type TableSlots = {
+    root: NonNullable<Slot<'table'>>;
+};
+
+export type TableProps = ComponentProps<TableSlots> & {
+    size?: 'small' | 'medium';
+    sortable?: boolean;
+};
+
+export type TableState = ComponentState<TableSlots> &
+    Required<Pick<TableProps, 'size' | 'sortable'>>;