@tangible/ui 0.0.1

package/components/StepIndicator/types.d.ts

@@ -0,0 +1,68 @@
+import type { IconName } from '../../icons/registry';
+import type { Size } from '../../types';
+export type { Size };
+/**
+ * Step status states.
+ * - `not-started`: Empty ring (value = 0)
+ * - `in-progress`: Ring with progress fill (0 < value < 100)
+ * - `complete`: Solid filled circle with checkmark (value = 100)
+ * - `locked`: Ring with lock icon (overrides value-based inference)
+ */
+export type StepStatus = 'not-started' | 'in-progress' | 'complete' | 'locked';
+export type StepIndicatorProps = {
+    /**
+     * Progress value (0-100).
+     *
+     * Status is inferred from value by default:
+     * - `value = 0` → not-started
+     * - `0 < value < 100` → in-progress
+     * - `value >= 100` → complete
+     *
+     * Use the `status` prop to override inference (e.g., for locked steps).
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Override the inferred status.
+     *
+     * By default, status is derived from `value`. Set this explicitly for:
+     * - `'locked'` — Shows lock icon regardless of value
+     * - Force a specific state when value doesn't reflect actual status
+     */
+    status?: StepStatus;
+    /**
+     * Custom icon to display instead of the default status icons.
+     *
+     * - Shows for `not-started` and `in-progress` states
+     * - `complete` always shows checkmark (completion is universal)
+     * - `locked` always shows lock (access restriction is universal)
+     *
+     * Use for content-type indicators like quizzes, readings, videos.
+     * @example icon="lms/question-mark"
+     */
+    icon?: IconName;
+    /**
+     * Size of the indicator.
+     * - `'xs'`: 16px circle
+     * - `'sm'`: 24px circle (default)
+     * - `'md'`: 32px circle
+     * - `'lg'`: 40px circle
+     * @default 'sm'
+     */
+    size?: Size;
+    /**
+     * Show percentage text in center (only visible for in-progress status).
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * Accessible label for the indicator.
+     * Used as aria-label when the indicator conveys unique information.
+     * If omitted, defaults to "Step status: {status}".
+     */
+    label?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};

package/components/StepIndicator/types.js

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

package/components/StepList/StepList.d.ts

@@ -0,0 +1,12 @@
+import type { StepListProps, StepListItemProps } from './types';
+declare function StepListItem(props: StepListItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepListItem {
+    var displayName: string;
+}
+type StepListCompound = {
+    (props: StepListProps): React.JSX.Element;
+    displayName?: string;
+    Item: typeof StepListItem;
+};
+export declare const StepList: StepListCompound;
+export {};

package/components/StepList/StepList.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { cx } from '../../utils/cx.js';
+import { StepListContext, useStepListContext } from './StepListContext.js';
+import { StepIndicator } from '../StepIndicator/index.js';
+// =============================================================================
+// StepList (Root)
+// =============================================================================
+function StepListRoot(props) {
+    const { ariaLabel, ariaLabelledBy, ariaCurrent = 'step', current, onSelect, children, className, } = props;
+    // Dev warning for missing nav label
+    if (import.meta.env.DEV && !ariaLabel && !ariaLabelledBy) {
+        console.warn('StepList: Navigation landmark requires a label. ' +
+            'Provide either `ariaLabel` or `ariaLabelledBy` prop for screen reader users.');
+    }
+    const rootClassName = cx('tui-steplist', className);
+    // Memoize context value to prevent unnecessary re-renders of all items
+    const contextValue = useMemo(() => ({ current, ariaCurrent, onSelect }), [current, ariaCurrent, onSelect]);
+    return (_jsx(StepListContext.Provider, { value: contextValue, children: _jsx("nav", { className: rootClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: _jsx("ul", { role: "list", className: "tui-steplist__list", children: children }) }) }));
+}
+// =============================================================================
+// StepList.Item
+// =============================================================================
+function StepListItem(props) {
+    const { value, status = 'not-started', progress, icon, href, disabled = false, children, className, } = props;
+    const { current, ariaCurrent, onSelect } = useStepListContext();
+    const isCurrent = current === value;
+    // Compute StepIndicator value based on status and progress
+    const indicatorValue = status === 'complete'
+        ? 100
+        : status === 'in-progress'
+            ? progress ?? 50
+            : 0;
+    const handleClick = (event) => {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        onSelect?.(value);
+    };
+    const itemClassName = cx('tui-steplist__item', isCurrent && 'is-current', disabled && 'is-disabled', `is-status-${status}`, className);
+    // Shared content for both anchor and button variants
+    const content = (_jsxs(_Fragment, { children: [_jsx(StepIndicator, { value: indicatorValue, status: status, icon: icon, size: "xs", className: "tui-steplist__indicator" }), _jsx("span", { className: "tui-steplist__content", children: children })] }));
+    // Render as anchor if href provided (and not disabled)
+    // Disabled anchors have href removed to prevent navigation
+    if (href && !disabled) {
+        return (_jsx("li", { children: _jsx("a", { href: href, className: itemClassName, "aria-current": isCurrent ? ariaCurrent : undefined, onClick: handleClick, children: content }) }));
+    }
+    // Render disabled anchor as span-like element (no href = not navigable)
+    if (href && disabled) {
+        return (_jsx("li", { children: _jsx("a", { className: itemClassName, "aria-current": isCurrent ? ariaCurrent : undefined, "aria-disabled": "true", tabIndex: -1, role: "link", onClick: handleClick, children: content }) }));
+    }
+    // Otherwise render as button
+    return (_jsx("li", { children: _jsx("button", { type: "button", className: itemClassName, "aria-current": isCurrent ? ariaCurrent : undefined, disabled: disabled, onClick: handleClick, children: content }) }));
+}
+StepListItem.displayName = 'StepList.Item';
+export const StepList = StepListRoot;
+StepList.displayName = 'StepList';
+StepList.Item = StepListItem;

package/components/StepList/StepListContext.d.ts

@@ -0,0 +1,3 @@
+import type { StepListContextValue } from './types';
+export declare const StepListContext: import("react").Context<StepListContextValue | null>;
+export declare function useStepListContext(): StepListContextValue;

package/components/StepList/StepListContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const StepListContext = createContext(null);
+export function useStepListContext() {
+    const context = useContext(StepListContext);
+    if (!context) {
+        throw new Error('StepList.Item must be used within a StepList');
+    }
+    return context;
+}

package/components/StepList/index.d.ts

@@ -0,0 +1,2 @@
+export { StepList } from './StepList';
+export type { StepListProps, StepListItemProps, StepStatus, } from './types';

package/components/StepList/index.js

@@ -0,0 +1 @@
+export { StepList } from './StepList.js';

package/components/StepList/types.d.ts

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+import type { StepStatus } from '../StepIndicator/types';
+import type { IconName } from '../../icons/registry';
+export type { StepStatus };
+export type StepListProps = {
+    /**
+     * Accessible label for the navigation landmark.
+     * Use either `ariaLabel` or `ariaLabelledBy`, not both.
+     */
+    ariaLabel?: string;
+    /**
+     * ID of a visible heading that labels the navigation.
+     * Use either `ariaLabel` or `ariaLabelledBy`, not both.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * What `aria-current` value to use for the current item.
+     * - `'step'`: For step-by-step progressions (default)
+     * - `'page'`: For page navigation
+     * @default 'step'
+     */
+    ariaCurrent?: 'step' | 'page';
+    /**
+     * Value of the currently active step.
+     * The matching StepList.Item will receive `aria-current` and current styling.
+     */
+    current?: string;
+    /**
+     * Callback when a step is selected (clicked or activated).
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * StepList.Item children.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};
+export type StepListItemProps = {
+    /**
+     * Unique identifier for this step.
+     * Used to determine if this item is current and passed to `onSelect` callback.
+     */
+    value: string;
+    /**
+     * Step status — determines the indicator appearance.
+     * - `'not-started'`: Empty ring
+     * - `'in-progress'`: Ring with progress fill
+     * - `'complete'`: Filled circle with checkmark
+     * - `'locked'`: Ring with lock icon
+     * @default 'not-started'
+     */
+    status?: StepStatus;
+    /**
+     * Progress value (0-100), only used when `status='in-progress'`.
+     */
+    progress?: number;
+    /**
+     * Custom icon to display in the indicator.
+     * - Only shown for `not-started` status
+     * - `complete` always shows checkmark, `locked` always shows lock
+     * - `in-progress` shows progress ring (icon ignored)
+     * @example icon="lms/question-mark"
+     */
+    icon?: IconName;
+    /**
+     * URL to navigate to. When provided, renders as an anchor element.
+     */
+    href?: string;
+    /**
+     * Prevent interaction with this step.
+     * - Buttons: uses native `disabled` attribute
+     * - Anchors: uses `aria-disabled="true"` + `tabIndex={-1}` + prevents click
+     */
+    disabled?: boolean;
+    /**
+     * Step label/content.
+     */
+    children: ReactNode;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+};
+export type StepListContextValue = {
+    current: string | undefined;
+    ariaCurrent: 'step' | 'page';
+    onSelect: ((value: string) => void) | undefined;
+};

package/components/StepList/types.js

@@ -0,0 +1,4 @@
+// =============================================================================
+// StepList Types
+// =============================================================================
+export {};

package/components/Table/BulkActionsBar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type BulkActionsBarProps = {
+    count: number;
+    onClear?: () => void;
+    clearLabel?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    /** ID of the table element this toolbar controls */
+    'aria-controls'?: string;
+};
+export declare function BulkActionsBar({ count, onClear, clearLabel, children, className, 'aria-controls': ariaControls, }: BulkActionsBarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/components/Table/BulkActionsBar.js

@@ -0,0 +1,9 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cx } from '../../utils/cx.js';
+export function BulkActionsBar({ count, onClear, clearLabel = 'Clear', children, className, 'aria-controls': ariaControls, }) {
+    if (count === 0)
+        return null;
+    const label = `Bulk actions for ${count} selected row${count === 1 ? '' : 's'}`;
+    return (_jsxs("div", { role: "toolbar", "aria-label": label, "aria-controls": ariaControls, className: cx('tui-table__bulkActions', className), children: [_jsxs("span", { className: "tui-table__bulkActions__count", role: "status", children: [count, " selected"] }), _jsxs("div", { className: "tui-table__bulkActions__actions", children: [children, onClear && (_jsx("button", { type: "button", onClick: onClear, className: "tui-table__bulkActions__clear tui-button is-style-outline is-size-xs", children: clearLabel }))] })] }));
+}

package/components/Table/DataTable.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { ColumnDef, SortingState, Table as TanTable, RowSelectionState, Updater } from '@tanstack/react-table';
+type RowId = string | number;
+type BulkSelectionRenderArgs<T> = {
+    selectedRows: T[];
+    selectedRowIds: RowId[];
+    clearSelection: () => void;
+    selectedCount?: number;
+};
+export type DataTableProps<T> = {
+    data: T[];
+    columns: ColumnDef<T, unknown>[];
+    className?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    defaultSorting?: SortingState;
+    loading?: boolean;
+    loadingMessage?: React.ReactNode;
+    emptyMessage?: React.ReactNode;
+    renderPagination?: (table: TanTable<T>) => React.ReactNode;
+    paginationMode?: 'simple' | 'ends' | 'full' | 'smart';
+    paginationMaxNumbers?: number;
+    paginationNavStyle?: 'text' | 'icon';
+    pageSizeOptions?: number[];
+    initialPageSize?: number;
+    enableRowSelection?: boolean;
+    getRowId?: (row: T, index: number) => string | number;
+    getRowLabelForSelection?: (row: T, index: number) => string;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (updater: Updater<RowSelectionState>) => void;
+    onSelectionChange?: (selectedRows: T[], selectedIds: (string | number)[]) => void;
+    renderBulkBar?: (args: BulkSelectionRenderArgs<T>) => React.ReactNode;
+};
+export declare function DataTable<T>({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting, loading, loadingMessage, emptyMessage, renderPagination, paginationMode, paginationMaxNumbers, paginationNavStyle, pageSizeOptions, initialPageSize, enableRowSelection, getRowId, getRowLabelForSelection, onSelectionChange, renderBulkBar, rowSelection, onRowSelectionChange, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Table/DataTable.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cx } from '../../utils/cx.js';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { BulkActionsBar } from './BulkActionsBar.js';
+import { Pagination } from './Pagination.js';
+export function DataTable({ data, columns, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultSorting = [], loading = false, loadingMessage = 'Loading...', emptyMessage = 'No results', renderPagination, paginationMode = 'smart', paginationMaxNumbers = 7, paginationNavStyle = 'text', pageSizeOptions = [10, 20, 50], initialPageSize, 
+// selection
+enableRowSelection = false, getRowId, getRowLabelForSelection, onSelectionChange, renderBulkBar, rowSelection, onRowSelectionChange, }) {
+    const tableId = React.useId();
+    const [sorting, setSorting] = React.useState(defaultSorting);
+    const [uncontrolledRowSelection, setUncontrolledRowSelection] = React.useState({});
+    // Anchor row for shift-range selection (ref to avoid recreating selectionColumn)
+    const lastSelectedRowIdRef = React.useRef(null);
+    const isSelectionControlled = typeof rowSelection !== 'undefined';
+    const rowSelectionState = isSelectionControlled ? rowSelection : uncontrolledRowSelection;
+    const handleRowSelectionChange = React.useCallback((updater) => {
+        if (!isSelectionControlled) {
+            setUncontrolledRowSelection(prev => typeof updater === 'function' ? updater(prev) : updater);
+        }
+        onRowSelectionChange?.(updater);
+    }, [isSelectionControlled, onRowSelectionChange]);
+    const defaultPageSize = initialPageSize ?? pageSizeOptions[0] ?? 10;
+    // build columns, inject selection column only when enabled
+    const selectionColumn = React.useMemo(() => ({
+        id: '__select',
+        size: 32,
+        header: ({ table }) => {
+            const isAllSelected = table.getIsAllPageRowsSelected();
+            const isSomeSelected = table.getIsSomePageRowsSelected();
+            const isIndeterminate = isSomeSelected && !isAllSelected;
+            return (_jsx("input", { type: "checkbox", "aria-label": "Select all rows on this page", "aria-checked": isIndeterminate ? 'mixed' : isAllSelected, checked: isAllSelected, ref: (el) => {
+                    if (el)
+                        el.indeterminate = isIndeterminate;
+                }, onChange: table.getToggleAllPageRowsSelectedHandler() }));
+        },
+        cell: ({ row, table }) => {
+            const idx = row.index;
+            const original = row.original;
+            const labelText = getRowLabelForSelection?.(original, idx) ?? `Select row ${idx + 1}`;
+            const handleChange = (e) => {
+                const willSelect = e.target.checked;
+                const isShift = e.nativeEvent.shiftKey;
+                if (isShift && lastSelectedRowIdRef.current) {
+                    const visibleRows = table.getRowModel().rows;
+                    const idxOf = (id) => visibleRows.findIndex((r) => r.id === id);
+                    const a = idxOf(lastSelectedRowIdRef.current);
+                    const b = idxOf(row.id);
+                    if (a !== -1 && b !== -1) {
+                        const [start, end] = a < b ? [a, b] : [b, a];
+                        table.setRowSelection((prev) => {
+                            const next = { ...prev };
+                            for (let i = start; i <= end; i++) {
+                                const id = visibleRows[i].id;
+                                if (willSelect)
+                                    next[id] = true;
+                                else
+                                    delete next[id];
+                            }
+                            return next;
+                        });
+                    }
+                }
+                else {
+                    row.toggleSelected(willSelect);
+                }
+                lastSelectedRowIdRef.current = row.id;
+            };
+            const isSelected = row.getIsSelected();
+            const isSomeSelected = row.getIsSomeSelected();
+            return (_jsx("input", { type: "checkbox", "aria-label": labelText, "aria-checked": isSomeSelected ? 'mixed' : isSelected, checked: isSelected, ref: (el) => {
+                    if (el)
+                        el.indeterminate = isSomeSelected;
+                }, onChange: handleChange }));
+        },
+        enableSorting: false,
+        enableHiding: false,
+    }), [getRowLabelForSelection]);
+    const effectiveColumns = React.useMemo(() => {
+        if (!enableRowSelection)
+            return columns;
+        return [selectionColumn, ...columns];
+    }, [enableRowSelection, columns, selectionColumn]);
+    const table = useReactTable({
+        data,
+        columns: effectiveColumns,
+        state: {
+            sorting,
+            rowSelection: rowSelectionState,
+        },
+        onSortingChange: setSorting,
+        onRowSelectionChange: handleRowSelectionChange,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getRowId: getRowId
+            ? (row, index) => String(getRowId(row, index))
+            : undefined, // may be undefined, tanstack handles it
+        enableRowSelection,
+        initialState: {
+            pagination: {
+                pageSize: defaultPageSize,
+            },
+        },
+    });
+    // Clear range anchor when pagination or sorting changes
+    const currentPageIndex = table.getState().pagination.pageIndex;
+    const currentSorting = table.getState().sorting;
+    React.useEffect(() => {
+        lastSelectedRowIdRef.current = null;
+    }, [currentPageIndex, currentSorting]);
+    const rows = table.getRowModel().rows;
+    const isEmpty = !loading && rows.length === 0;
+    // Derive selection with stable references for callback
+    const selectedRowModel = table.getSelectedRowModel();
+    const selectedRows = React.useMemo(() => selectedRowModel.rows.map((r) => r.original), [selectedRowModel.rows]);
+    const selectedRowIds = React.useMemo(() => Object.entries(rowSelectionState)
+        .filter(([, selected]) => selected)
+        .map(([id]) => id), [rowSelectionState]);
+    const selectedCount = selectedRows.length;
+    // Notify parent of selection changes (skip initial mount)
+    const hasMountedRef = React.useRef(false);
+    const onSelectionChangeRef = React.useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    React.useEffect(() => {
+        if (!hasMountedRef.current) {
+            hasMountedRef.current = true;
+            return;
+        }
+        onSelectionChangeRef.current?.(selectedRows, selectedRowIds);
+    }, [selectedRows, selectedRowIds]);
+    // pagination visibility
+    const pageCount = table.getPageCount();
+    const showPager = !isEmpty && pageCount > 1;
+    // bulk bar visibility
+    const showBulkBar = enableRowSelection && selectedRows.length > 0;
+    // Live region announcement for sort/page changes
+    const [announcement, setAnnouncement] = React.useState('');
+    const prevPageRef = React.useRef(currentPageIndex);
+    const prevSortRef = React.useRef(currentSorting);
+    React.useEffect(() => {
+        // Skip initial mount
+        if (prevPageRef.current === currentPageIndex && prevSortRef.current === currentSorting) {
+            return;
+        }
+        if (prevPageRef.current !== currentPageIndex) {
+            setAnnouncement(`Page ${currentPageIndex + 1} of ${pageCount}`);
+        }
+        else if (prevSortRef.current !== currentSorting && currentSorting.length > 0) {
+            const sort = currentSorting[0];
+            const col = columns.find(c => 'accessorKey' in c && c.accessorKey === sort.id);
+            const colName = col && typeof col.header === 'string' ? col.header : sort.id;
+            setAnnouncement(`Sorted by ${colName}, ${sort.desc ? 'descending' : 'ascending'}`);
+        }
+        prevPageRef.current = currentPageIndex;
+        prevSortRef.current = currentSorting;
+    }, [currentPageIndex, currentSorting, pageCount, columns]);
+    return (_jsxs("div", { className: cx('tui-table-container', className), children: [_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "tui-visually-hidden", children: announcement }), showBulkBar && (renderBulkBar ? (renderBulkBar({
+                selectedRows,
+                selectedRowIds,
+                clearSelection: () => table.resetRowSelection(),
+                selectedCount
+            })) : (_jsx(BulkActionsBar, { count: selectedCount, onClear: () => table.resetRowSelection(), "aria-controls": tableId }))), _jsxs("table", { id: tableId, className: "tui-table", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-busy": loading || undefined, children: [_jsx("thead", { className: "tui-table__head", children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { className: "tui-table__row tui-table__row--head", children: headerGroup.headers.map((header) => {
+                                const canSort = header.column.getCanSort();
+                                const sortDirection = header.column.getIsSorted();
+                                const headerDef = header.column.columnDef.header;
+                                const headerContent = flexRender(headerDef, header.getContext());
+                                // Use header string for aria-label, fallback to column id
+                                const headerLabel = typeof headerDef === 'string' ? headerDef : header.id;
+                                return (_jsx("th", { className: "tui-table__cell tui-table__cell--head", "aria-sort": canSort
+                                        ? sortDirection === 'asc'
+                                            ? 'ascending'
+                                            : sortDirection === 'desc'
+                                                ? 'descending'
+                                                : 'none'
+                                        : undefined, children: canSort ? (_jsxs("button", { className: "tui-table__sortButton", onClick: header.column.getToggleSortingHandler(), "aria-label": `Sort by ${headerLabel}`, children: [headerContent, _jsx("span", { className: "tui-table__sortButton__icon", "aria-hidden": "true", children: sortDirection === 'asc'
+                                                    ? '▲'
+                                                    : sortDirection === 'desc'
+                                                        ? '▼'
+                                                        : '' })] })) : (headerContent) }, header.id));
+                            }) }, headerGroup.id))) }), _jsx("tbody", { className: "tui-table__body", "aria-live": loading ? 'polite' : undefined, children: loading ? (_jsx("tr", { className: "tui-table__row tui-table__row--loading", children: _jsx("td", { className: "tui-table__cell tui-table__cell--body", colSpan: table.getAllLeafColumns().length, children: loadingMessage }) })) : isEmpty ? (_jsx("tr", { className: "tui-table__row tui-table__row--empty", children: _jsx("td", { className: "tui-table__cell tui-table__cell--body", colSpan: table.getAllLeafColumns().length, role: "status", children: emptyMessage }) })) : (rows.map((row) => (_jsx("tr", { className: cx('tui-table__row', 'tui-table__row--body', row.getIsSelected() && 'is-selected'), "data-selected": row.getIsSelected() ? 'true' : 'false', children: row.getVisibleCells().map((cell) => (_jsx("td", { className: "tui-table__cell tui-table__cell--body", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }), renderPagination
+                ? renderPagination(table)
+                : (_jsx(Pagination, { table: table, mode: paginationMode, showPager: showPager, maxNumbers: paginationMaxNumbers, navStyle: paginationNavStyle, pageSizeOptions: pageSizeOptions }))] }));
+}

package/components/Table/Pagination.d.ts

@@ -0,0 +1,13 @@
+import type { Table } from '@tanstack/react-table';
+import type { PagerMode } from '../Pager';
+type Props<T> = {
+    table: Table<T>;
+    pageSizeOptions?: number[];
+    showPager?: boolean;
+    className?: string;
+    mode?: PagerMode;
+    maxNumbers?: number;
+    navStyle?: 'text' | 'icon';
+};
+export declare function Pagination<T>({ table, pageSizeOptions, showPager, className, mode, maxNumbers, navStyle, }: Props<T>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/components/Table/Pagination.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../utils/cx.js';
+import { Pager } from '../Pager/index.js';
+export function Pagination({ table, pageSizeOptions = [10, 20, 50], showPager = true, className, mode = 'smart', maxNumbers = 7, navStyle = 'text', }) {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const pageCount = Math.max(1, table.getPageCount());
+    const currentPage = Math.min(pageCount, Math.max(1, pageIndex + 1));
+    // Hide if no rows
+    if (table.getRowModel().rows.length === 0) {
+        return null;
+    }
+    return (_jsx(Pager, { currentPage: currentPage, totalPages: pageCount, onPageChange: (page) => table.setPageIndex(page - 1), pageSize: pageSize, pageSizeOptions: pageSizeOptions, onPageSizeChange: (size) => table.setPageSize(size), mode: mode, maxNumbers: maxNumbers, navStyle: navStyle, hidden: !showPager, className: cx('tui-table__pagination', className) }));
+}

package/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps } from './DataTable';

package/components/Table/index.js

@@ -0,0 +1 @@
+export { DataTable } from './DataTable.js';

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { TabsProps, TabsListProps, TabProps, TabPanelProps } from './types';
+type TabsCompound = {
+    (props: TabsProps): React.JSX.Element;
+    displayName?: string;
+    List: typeof TabsList;
+    Tab: typeof Tab;
+    Panel: typeof TabPanel;
+};
+declare function TabsList({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsList {
+    var displayName: string;
+}
+declare function Tab({ value, icon, disabled, className, children }: TabProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Tab {
+    var displayName: string;
+}
+declare function TabPanel({ value, className, children }: TabPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabPanel {
+    var displayName: string;
+}
+export declare const Tabs: TabsCompound;
+export {};