@vectara/vectara-ui 0.0.2

package/lib/components/table/Table.js

@@ -0,0 +1,117 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { VuiCheckbox, VuiTextInput } from "../form";
+import { VuiSpacer } from "../spacer/Spacer";
+import { VuiTableRowActions } from "./TableRowActions";
+import { VuiTableCell } from "./TableCell";
+import { VuiTableHeaderCell } from "./TableHeaderCell";
+import { VuiTablePagination } from "./TablePagination";
+import { VuiTablePager } from "./TablePager";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiText } from "../typography/Text";
+import { VuiTableBulkActions } from "./TableBulkActions";
+import { VuiSpinner } from "../spinner/Spinner";
+import { VuiTableContent } from "./TableContent";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+// Type guard to determine type of pagination.
+const isComplexPagination = (pagination) => {
+    return pagination.onSelectPage !== undefined;
+};
+const extractId = (row, idField) => {
+    return typeof idField === "function" ? idField(row) : row[idField];
+};
+// https://github.com/typescript-eslint/typescript-eslint/issues/4062
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+export const VuiTable = (_a) => {
+    var { isLoading, idField, columns, rows, actions, actionsTestIdProvider, pagination, selection, search, customControls, onSort, onReload, content, className, fluid } = _a, rest = __rest(_a, ["isLoading", "idField", "columns", "rows", "actions", "actionsTestIdProvider", "pagination", "selection", "search", "customControls", "onSort", "onReload", "content", "className", "fluid"]);
+    const [rowBeingActedUpon, setRowBeingActedUpon] = useState(undefined);
+    const { bulkActions, onSelectRow, selectedRows } = selection || {};
+    const { searchValue, searchPlaceholder, onSearchChange } = search || {};
+    const isEmpty = !isLoading && rows.length === 0;
+    // The user interacts with the table rows by selecting them or performing actions on them.
+    // This is only allowed if there is no “content” (which is an error or similar state that
+    // replaces the rows), and if it’s not in a loading state or empty state.
+    const isInteractive = Boolean(!content && !isLoading && !isEmpty);
+    const allRowsSelected = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) === rows.length;
+    const selectedIds = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.reduce((acc, row) => {
+        acc[extractId(row, idField)] = true;
+        return acc;
+    }, {})) || {};
+    const hasSearch = searchValue !== undefined && onSearchChange;
+    const hasBulkActions = bulkActions !== undefined;
+    const columnCount = columns.length + (onSelectRow ? 1 : 0) + (actions ? 1 : 0);
+    const classes = classNames("vuiTable", {
+        "vuiTable--fluid": fluid
+    }, className);
+    let tableContent;
+    if (content) {
+        tableContent = _jsx(VuiTableContent, Object.assign({ colSpan: columnCount }, { children: content }));
+    }
+    else if (isLoading) {
+        tableContent = (_jsxs(VuiTableContent, Object.assign({ colSpan: columnCount }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiSpinner, { size: "xs" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: "Loading" }) }) }))] })));
+    }
+    else if (searchValue && isEmpty) {
+        tableContent = (_jsx(VuiTableContent, Object.assign({ colSpan: columnCount }, { children: _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, { children: _jsx("p", { children: "No matches found" }) }) })) })));
+    }
+    else {
+        tableContent = rows.map((row) => {
+            var _a, _b;
+            const rowId = extractId(row, idField);
+            return (_jsxs("tr", Object.assign({ className: rowBeingActedUpon === row ? "vuiTableRow-isBeingActedUpon" : undefined }, { children: [onSelectRow && (_jsx("td", { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { checked: (_a = selectedIds[rowId]) !== null && _a !== void 0 ? _a : false, onChange: () => {
+                                    if (selectedIds[rowId]) {
+                                        delete selectedIds[rowId];
+                                    }
+                                    else {
+                                        selectedIds[rowId] = true;
+                                    }
+                                    const selectedRowIds = Object.keys(selectedIds);
+                                    // Map selected row IDs to selected rows.
+                                    const selectedRows = selectedRowIds.map((id) => rows.find((row) => row.id === id));
+                                    onSelectRow(selectedRows);
+                                } }) }) })), columns.map((column) => {
+                        const { name, render, className } = column;
+                        return (_jsx("td", Object.assign({ className: className }, { children: _jsx(VuiTableCell, { children: render ? render(row) : row[column.name] }) }), name));
+                    }), actions && (_jsx("td", { children: _jsx(VuiTableRowActions, { row: row, actions: actions, onToggle: (isSelected) => {
+                                if (isSelected) {
+                                    setRowBeingActedUpon(row);
+                                }
+                                else {
+                                    setRowBeingActedUpon(undefined);
+                                }
+                            }, testId: (_b = actionsTestIdProvider === null || actionsTestIdProvider === void 0 ? void 0 : actionsTestIdProvider(row)) !== null && _b !== void 0 ? _b : undefined }) }))] }), rowId));
+        });
+    }
+    return (_jsxs(_Fragment, { children: [(hasSearch ||
+                customControls ||
+                (hasBulkActions && selectedRows && selectedRows.length > 0) ||
+                Boolean(onReload)) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ spacing: "s", justifyContent: "spaceBetween", alignItems: "center" }, { children: [selectedRows && selectedRows.length > 0 && hasBulkActions && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiTableBulkActions, { selectedRows: selectedRows, actions: bulkActions }) }))), hasSearch && (_jsx(VuiFlexItem, Object.assign({ grow: 1, shrink: false }, { children: _jsx(VuiTextInput, { placeholder: searchPlaceholder, fullWidth: true, value: searchValue, onChange: (event) => onSearchChange(event.target.value), "data-testid": search === null || search === void 0 ? void 0 : search["data-testid"] }) }))), customControls && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: customControls }))), onReload && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonSecondary, Object.assign({ color: "neutral", onClick: () => onReload() }, { children: "Reload" })) })))] })), _jsx(VuiSpacer, { size: "s" })] })), _jsxs("table", Object.assign({ className: classes }, rest, { children: [_jsx("thead", { children: _jsxs("tr", { children: [onSelectRow && (_jsx("th", Object.assign({ className: "vuiTableHeaderSelect" }, { children: _jsx(VuiTableCell, { children: _jsx(VuiCheckbox, { disabled: !isInteractive, checked: isInteractive ? allRowsSelected : false, onChange: () => {
+                                                let newSelectedRows;
+                                                if (allRowsSelected) {
+                                                    newSelectedRows = [];
+                                                }
+                                                else {
+                                                    newSelectedRows = rows.reduce((acc, row) => {
+                                                        acc.push(row);
+                                                        return acc;
+                                                    }, []);
+                                                }
+                                                onSelectRow(newSelectedRows);
+                                            } }) }) }))), columns.map((column) => {
+                                    const { name, header, width } = column;
+                                    const styles = width ? { width } : undefined;
+                                    return (_jsx("th", Object.assign({ style: styles }, { children: _jsx(VuiTableHeaderCell, { name: name, header: header, onSort: onSort }) }), name));
+                                }), actions && _jsx("th", { className: "vuiTableHeaderActions" })] }) }), _jsx("tbody", { children: tableContent })] })), !pagination ? undefined : isComplexPagination(pagination) ? (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePagination, Object.assign({ isDisabled: !isInteractive }, pagination))] })) : (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xs" }), _jsx(VuiTablePager, Object.assign({ isDisabled: !isInteractive }, pagination))] }))] }));
+};

package/lib/components/table/TableBulkActions.d.ts

@@ -0,0 +1,7 @@
+import { Action } from "./TableRowActions";
+import { Row } from "./types";
+export type Props<T> = {
+    selectedRows: any;
+    actions: Action<T>[];
+};
+export declare const VuiTableBulkActions: <T extends Row>({ selectedRows, actions }: Props<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/table/TableBulkActions.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { BiCaretDown } from "react-icons/bi";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+import { VuiPopover } from "../popover/Popover";
+import { VuiIcon } from "../icon/Icon";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+export const VuiTableBulkActions = ({ selectedRows, actions }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    let content;
+    if (actions.length === 1) {
+        content = (_jsx(VuiButtonSecondary, Object.assign({ color: "neutral", size: "m", onClick: () => actions[0].onClick && actions[0].onClick(selectedRows) }, { children: actions[0].label })));
+    }
+    else {
+        content = (_jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), button: _jsxs(VuiButtonSecondary, Object.assign({ color: "neutral", size: "m", icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }, { children: [selectedRows.length, " selected"] })) }, { children: _jsx(VuiOptionsList, { onSelectOption: () => {
+                    setIsOpen(false);
+                }, options: actions.map((_a) => {
+                    var { href } = _a, action = __rest(_a, ["href"]);
+                    return (Object.assign(Object.assign({}, action), { href: href === null || href === void 0 ? void 0 : href(selectedRows), value: selectedRows }));
+                }), size: "m" }) })));
+    }
+    return content;
+};

package/lib/components/table/TableCell.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    children: React.ReactNode;
+};
+export declare const VuiTableCell: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/TableCell.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const VuiTableCell = ({ children }) => {
+    return _jsx("div", Object.assign({ className: "vuiTableCell" }, { children: children }));
+};

package/lib/components/table/TableContent.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    colSpan: number;
+    children: React.ReactNode;
+};
+export declare const VuiTableContent: ({ colSpan, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/TableContent.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiSpacer } from "../spacer/Spacer";
+export const VuiTableContent = ({ colSpan, children }) => {
+    return (_jsx("tr", Object.assign({ className: "vuiTableRow--inert" }, { children: _jsxs("td", Object.assign({ className: "vuiTableContent", colSpan: colSpan }, { children: [_jsx(VuiSpacer, { size: "m" }), _jsx(VuiFlexContainer, Object.assign({ justifyContent: "center", alignItems: "center", spacing: "xs" }, { children: children })), _jsx(VuiSpacer, { size: "m" })] })) })));
+};

package/lib/components/table/TableHeaderCell.d.ts

@@ -0,0 +1,9 @@
+export type Props = {
+    name: string;
+    header: {
+        isSortable?: boolean;
+        render?: () => React.ReactNode;
+    };
+    onSort?: (column: string, direction: "asc" | "desc") => void;
+};
+export declare const VuiTableHeaderCell: ({ name, header, onSort }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/components/table/TableHeaderCell.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BiChevronDown } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+export const VuiTableHeaderCell = ({ name, header, onSort }) => {
+    return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "xxs", alignItems: "center", justifyContent: "start" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: header.render ? header.render() : name })), onSort && header.isSortable && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "s" }, { children: _jsx(BiChevronDown, {}) })) })))] })));
+};

package/lib/components/table/TablePager.d.ts

@@ -0,0 +1,9 @@
+export type Pager = {
+    onSelectPreviousPage?: () => void;
+    onSelectNextPage?: () => void;
+};
+type Props = Pager & {
+    isDisabled?: boolean;
+};
+export declare const VuiTablePager: ({ onSelectPreviousPage, onSelectNextPage, isDisabled }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/TablePager.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiButtonTertiary } from "../button/ButtonTertiary";
+import { VuiIcon } from "../icon/Icon";
+export const VuiTablePager = ({ onSelectPreviousPage, onSelectNextPage, isDisabled }) => {
+    return (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "start", alignItems: "center", spacing: "none" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiLeftArrowAlt, {}) }), color: "neutral", size: "s", onClick: () => onSelectPreviousPage === null || onSelectPreviousPage === void 0 ? void 0 : onSelectPreviousPage(), isDisabled: isDisabled || !onSelectPreviousPage }, { children: "Previous" })) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiRightArrowAlt, {}) }), iconSide: "right", color: "neutral", size: "s", onClick: () => onSelectNextPage === null || onSelectNextPage === void 0 ? void 0 : onSelectNextPage(), isDisabled: isDisabled || !onSelectNextPage }, { children: "Next" })) }))] })));
+};

package/lib/components/table/TablePagination.d.ts

@@ -0,0 +1,10 @@
+export type Pagination = {
+    currentPage: number;
+    numPages: number;
+    onSelectPage: (page: number) => void;
+};
+type Props = Pagination & {
+    isDisabled?: boolean;
+};
+export declare const VuiTablePagination: ({ currentPage, numPages, onSelectPage, isDisabled }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/table/TablePagination.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiButtonTertiary } from "../button/ButtonTertiary";
+import { VuiIcon } from "../icon/Icon";
+import { createPagination } from "./createPagination";
+import classNames from "classnames";
+export const VuiTablePagination = ({ currentPage, numPages, onSelectPage, isDisabled }) => {
+    const { items, activeIndex } = createPagination(currentPage, numPages);
+    const manyPagesTokenClasses = classNames("vuiTableManyPagesToken", {
+        "vuiTableManyPagesToken-isDisabled": isDisabled
+    });
+    return (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "start", alignItems: "center", spacing: "none" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiLeftArrowAlt, {}) }), color: "neutral", size: "s", onClick: () => onSelectPage(currentPage - 1), isDisabled: isDisabled || currentPage === 1 }, { children: "Previous" })) })), items.map((item, index) => {
+                const isActive = index === activeIndex;
+                return (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: item === "..." ? (_jsx("div", Object.assign({ className: manyPagesTokenClasses }, { children: item }))) : (_jsx(VuiButtonTertiary, Object.assign({ color: isActive ? "primary" : "neutral", isInert: isActive, isSelected: isActive, size: "s", onClick: () => onSelectPage(item), isDisabled: isDisabled }, { children: item }))) }), index));
+            }), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiButtonTertiary, Object.assign({ icon: _jsx(VuiIcon, { children: _jsx(BiRightArrowAlt, {}) }), iconSide: "right", color: "neutral", size: "s", onClick: () => onSelectPage(currentPage + 1), isDisabled: isDisabled || currentPage === numPages }, { children: "Next" })) }))] })));
+};

package/lib/components/table/TableRowActions.d.ts

@@ -0,0 +1,15 @@
+import { Row } from "./types";
+export type Action<T> = {
+    label: string;
+    isDisabled?: (row: T) => boolean;
+    onClick?: (row: T) => void;
+    href?: (row: T) => string | undefined;
+    testId?: string;
+};
+export type Props<T> = {
+    row: any;
+    actions: Action<T>[];
+    onToggle: (isSelected: boolean) => void;
+    testId?: string;
+};
+export declare const VuiTableRowActions: <T extends Row>({ row, actions, onToggle, testId }: Props<T>) => import("react/jsx-runtime").JSX.Element | null;

package/lib/components/table/TableRowActions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { BiCaretDown } from "react-icons/bi";
+import { VuiOptionsList } from "../optionsList/OptionsList";
+import { VuiPopover } from "../popover/Popover";
+import { VuiIcon } from "../icon/Icon";
+import { VuiButtonSecondary } from "../button/ButtonSecondary";
+export const VuiTableRowActions = ({ row, actions, onToggle, testId }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    // Filter out disabled actions.
+    const actionOptions = actions.reduce((acc, action) => {
+        const { label, isDisabled, onClick, href, testId } = action;
+        if (!(isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(row))) {
+            acc.push({ label, onClick, href: href === null || href === void 0 ? void 0 : href(row), value: row, testId });
+        }
+        return acc;
+    }, []);
+    if (!actionOptions.length) {
+        return null;
+    }
+    const content = (_jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => {
+            setIsOpen(!isOpen);
+            onToggle(!isOpen);
+        }, button: _jsx(VuiButtonSecondary, { color: "neutral", size: "xs", icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }), "data-testid": testId }) }, { children: _jsx(VuiOptionsList, { onSelectOption: () => {
+                setIsOpen(false);
+                onToggle(false);
+            }, options: actionOptions, size: "m" }) })));
+    return _jsx("div", Object.assign({ className: "vuiTableActions" }, { children: content }));
+};

package/lib/components/table/_index.scss

@@ -0,0 +1,70 @@
+.vuiTable {
+  width: 100%;
+  table-layout: fixed;
+
+  thead {
+    border-bottom: 1px solid $borderColor;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid $borderColorLight;
+
+    &.vuiTableRow-isBeingActedUpon,
+    &:not(.vuiTableRow--inert):hover {
+      background-color: $colorLightShade;
+    }
+
+    &:last-child {
+      border-bottom: 1px solid $borderColor;
+    }
+  }
+
+  th {
+    font-size: $fontSizeStandard;
+    font-weight: $fontWeightBold;
+    padding: $sizeXxs;
+  }
+
+  td {
+    font-size: $fontSizeStandard;
+    padding: $sizeXxs;
+    vertical-align: middle;
+    word-break: break-word;
+  }
+}
+
+.vuiTable--fluid {
+  table-layout: auto;
+}
+
+.vuiTableCell {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.vuiTableActions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.vuiTableManyPagesToken {
+  padding: 0 $sizeXs;
+}
+
+.vuiTableManyPagesToken-isDisabled {
+  opacity: 0.5;
+}
+
+.vuiTableHeaderSelect {
+  width: 32px;
+}
+
+.vuiTableHeaderActions {
+  width: 42px;
+}
+
+.vuiTableContent {
+  height: 80px;
+}

package/lib/components/table/createPagination.d.ts

@@ -0,0 +1,4 @@
+export declare const createPagination: (currentPage: number, numPages: number) => {
+    items: (number | "...")[];
+    activeIndex: number | undefined;
+};

package/lib/components/table/createPagination.js

@@ -0,0 +1,44 @@
+const MAX_PAGES = 5;
+const TRUNCATION_LIMIT = 3;
+export const createPagination = (currentPage, numPages) => {
+    if (numPages <= MAX_PAGES) {
+        // Renders as: [1] 2 3 4 5
+        return {
+            items: Array.from({ length: numPages }, (_, i) => i + 1),
+            activeIndex: currentPage - 1
+        };
+    }
+    let activeIndex;
+    // Pagination always begins with the first page.
+    const items = [1];
+    if (currentPage > TRUNCATION_LIMIT && currentPage <= numPages - TRUNCATION_LIMIT) {
+        // Renders as: 1 ... [15] ... 60
+        activeIndex = 2;
+        items.push("...");
+        items.push(currentPage);
+        items.push("...");
+    }
+    else if (currentPage > TRUNCATION_LIMIT) {
+        // Renders as: 1 ... [4] 5 6
+        // Renders as: 1 ... 4 [5] 6
+        const lastIndex = MAX_PAGES - 1;
+        activeIndex = lastIndex - (numPages - currentPage);
+        items.push("...");
+        items.push(numPages - 2);
+        items.push(numPages - 1);
+    }
+    else if (currentPage <= numPages - TRUNCATION_LIMIT) {
+        // Renders as: 1 [2] 3 ... 6
+        // Renders as: 1 2 [3] ... 6
+        activeIndex = currentPage - 1;
+        items.push(2);
+        items.push(3);
+        items.push("...");
+    }
+    // Pagination always ends with the last page.
+    items.push(numPages);
+    return {
+        items,
+        activeIndex
+    };
+};

package/lib/components/table/createPagination.test.d.ts

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

package/lib/components/table/createPagination.test.js

@@ -0,0 +1,32 @@
+import { createPagination } from "./createPagination";
+describe("createPagination", () => {
+    describe("when numPages <= 5", () => {
+        test("returns page numbers if numPages === 5", () => {
+            expect(createPagination(1, 5)).toEqual({ items: [1, 2, 3, 4, 5], activeIndex: 0 });
+        });
+        test("returns page numbers if numPages < 5", () => {
+            expect(createPagination(3, 3)).toEqual({ items: [1, 2, 3], activeIndex: 2 });
+        });
+    });
+    describe("when numPages > 5", () => {
+        describe("and page is within 2 pages of the first and last page", () => {
+            test("truncates last couples pages when on page 1", () => {
+                expect(createPagination(1, 6)).toEqual({ items: [1, 2, 3, "...", 6], activeIndex: 0 });
+            });
+            test("truncates last couples pages when on page 2", () => {
+                expect(createPagination(2, 6)).toEqual({ items: [1, 2, 3, "...", 6], activeIndex: 1 });
+            });
+            test("truncates first couples pages when on page 4", () => {
+                expect(createPagination(4, 6)).toEqual({ items: [1, "...", 4, 5, 6], activeIndex: 2 });
+            });
+            test("truncates first couples pages when on page 5", () => {
+                expect(createPagination(5, 6)).toEqual({ items: [1, "...", 4, 5, 6], activeIndex: 3 });
+            });
+        });
+        describe("and page is beyond 2 pages of the first and last page", () => {
+            test("truncates frist and last couples pages", () => {
+                expect(createPagination(15, 50)).toEqual({ items: [1, "...", 15, "...", 50], activeIndex: 2 });
+            });
+        });
+    });
+});

package/lib/components/table/types.d.ts

@@ -0,0 +1 @@
+export type Row = Record<string, any>;

package/lib/components/table/types.js

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

package/lib/components/tabs/Tab.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+};
+export declare const VuiTab: ({ children, className, href, onClick, isActive, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tabs/Tab.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useVuiContext } from "../context/Context";
+export const VuiTab = (_a) => {
+    var { children, className, href, onClick, isActive = false } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "isActive"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames(className, "vuiTab", {
+        "vuiTab-isActive": isActive
+    });
+    const content = _jsx("div", Object.assign({ className: "vuiTab__inner" }, { children: children }));
+    if (href) {
+        return createLink(Object.assign({ className: classes, href,
+            onClick, children: content }, rest));
+    }
+    return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: content })));
+};

package/lib/components/tabs/TabbedRoutes.d.ts

@@ -0,0 +1,15 @@
+import { TabSize } from "./types";
+type Props = {
+    tabs: Array<{
+        href: string;
+        title: string;
+        render?: (tabLink: React.ReactNode) => React.ReactNode;
+        component: React.ReactNode;
+        testId?: string;
+    }>;
+    size?: TabSize;
+    sideContent?: React.ReactNode;
+    children?: React.ReactNode;
+};
+export declare const VuiTabbedRoutes: ({ tabs, size, sideContent, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tabs/TabbedRoutes.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { VuiTabs } from "./Tabs";
+import { VuiTab } from "./Tab";
+import { VuiSpacer } from "../spacer/Spacer";
+import { useVuiContext } from "../context/Context";
+export const VuiTabbedRoutes = ({ tabs, size, sideContent, children }) => {
+    const { getPath } = useVuiContext();
+    return (_jsxs(_Fragment, { children: [_jsx(VuiTabs, Object.assign({ append: sideContent, size: size }, { children: tabs.map(({ href, title, render, testId }, index) => {
+                    const isActive = getPath().includes(href);
+                    const tabLink = (_jsx(VuiTab, Object.assign({ href: href, isActive: isActive, "data-testid": testId }, { children: title }), index));
+                    if (render)
+                        return render(tabLink);
+                    return tabLink;
+                }) })), _jsx(VuiSpacer, { size: "m" }), children] }));
+};

package/lib/components/tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { TabSize } from "./types";
+type Props = {
+    children: React.ReactNode;
+    append?: React.ReactNode;
+    className?: string;
+    size?: TabSize;
+    fullWidth?: boolean;
+};
+export declare const VuiTabs: ({ children, className, append, size, fullWidth }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/tabs/Tabs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiTabs = ({ children, className, append, size = "s", fullWidth }) => {
+    const classes = classNames(className, "vuiTabs", `vuiTabs--${size}`, {
+        "vuiTabs--fullWidth": fullWidth
+    });
+    return (_jsxs("div", Object.assign({ className: classes }, { children: [_jsx("div", Object.assign({ className: "vuiTabs__tabs" }, { children: children })), append && _jsx("div", Object.assign({ className: "vuiTabs__appendedContent" }, { children: append }))] })));
+};