@vrobots/storybook 0.1.73 → 0.2.1

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './src/components';
 export * as utils from './src/utils';
 export * from './src/hooks';
+export { default as system } from './src/theme/system';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './src/components';
 export * as utils from './src/utils';
 export * from './src/hooks';
+export { default as system } from './src/theme/system';

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.73",
+    "version": "0.2.1",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -21,8 +21,10 @@
         "@chakra-ui/react": "^3.32.0",
         "@emotion/react": "^11.14.0",
         "@storybook/addon-themes": "^10.2.16",
+        "@tanstack/react-table": "^8.21.3",
         "axios": "^1.13.4",
         "motion": "^12.34.0",
+        "next": "^16.2.4",
         "next-themes": "^0.4.6",
         "owasp-password-strength-test": "^1.3.0",
         "react": "^19.2.0",

package/dist/src/components/Breadcrumbs.js

@@ -5,9 +5,9 @@ export const Breadcrumbs = React.forwardRef(({ breadcrumbs }, ref) => {
     if (!!breadcrumbs) {
         const crumbs = breadcrumbs.map(({ title, nav, color: itemColor, onClick }, key) => {
             if (!!nav) {
-                return (_jsxs(HStack, { children: [_jsx(Text, { as: 'button', color: itemColor || 'blue.500', whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', cursor: 'pointer', truncate: true, onClick: () => onClick?.(nav), children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
+                return (_jsxs(HStack, { children: [_jsx(Text, { as: 'button', color: itemColor || 'neu.accent', whiteSpace: 'nowrap', wordBreak: 'break-word', fontSize: 'sm', cursor: 'pointer', p: 1, truncate: true, onClick: () => onClick?.(nav), children: title }), _jsx(Text, { ml: 2, mr: 2, fontSize: 'sm', children: ">" })] }, `${title}-${key}`));
             }
-            return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: 'gray.500', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
+            return (_jsx(Text, { whiteSpace: 'nowrap', wordBreak: 'break-word', color: 'neu.muted', fontSize: 'sm', truncate: true, children: title }, `${title}-${key}`));
         });
         return (_jsx(HStack, { width: '100%', flex: `0 1 auto`, ref: ref, children: crumbs }));
     }

package/dist/src/components/Display.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import { forwardRef } from "react";
-import { useColorMode } from "./ui/color-mode";
 import { useHeader } from './Header';
 export const Display = forwardRef((props, ref) => {
-    const { colorMode } = useColorMode();
-    const bgColor = colorMode === 'light' ? 'gray.50' : 'gray.800';
     const { ref: headerRef } = useHeader();
-    return (_jsx(Box, { ref: ref, maxHeight: `calc(100vh - ${headerRef.current?.offsetHeight || 0}px)`, width: '100%', overflow: 'scroll', bgColor: bgColor, children: props.children }));
+    return (_jsx(Box, { ref: ref, maxHeight: `calc(100vh - ${headerRef.current?.offsetHeight || 0}px)`, width: '100%', overflow: 'scroll', bgColor: 'neu.bg', children: props.children }));
 });
 Display.displayName = 'Display';

package/dist/src/components/Header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { defaultSystem, Grid, GridItem, Text } from '@chakra-ui/react';
+import { Grid, GridItem, Text } from '@chakra-ui/react';
 import { forwardRef } from 'react';
 import { Logo } from './Logo';
 import { useColorMode } from './ui/color-mode';
@@ -31,10 +31,8 @@ export const Header = forwardRef(({}, ref) => {
     const { appName, logo, menu, version, defaultPath } = useHeader();
     const { colorMode } = useColorMode();
     const selectedLogo = logo[colorMode];
-    const borderColors = { ...defaultSystem }._config.theme?.semanticTokens?.colors.border.DEFAULT.value;
-    const borderColor = colorMode === 'light' ? borderColors._light : borderColors._dark;
-    return (_jsxs(Grid, { id: 'header', width: '100%', position: 'relative', zIndex: 2, backgroundColor: colorMode === 'light' ? 'white' : 'black', borderBottom: `1px solid ${borderColor}`, templateColumns: {
+    return (_jsxs(Grid, { id: 'header', width: '100%', position: 'relative', zIndex: 2, backgroundColor: 'neu.surface', borderBottom: '1px solid', borderColor: 'neu.border', boxShadow: 'neuRaised', templateColumns: {
             base: 'repeat(12, 1fr)',
-        }, ref: ref, children: [_jsxs(GridItem, { colSpan: 6, pt: { base: '0', lg: '8px' }, pb: { base: '0', lg: '8px' }, children: [_jsx(Logo, { defaultPath: defaultPath, alt: appName, src: selectedLogo }), _jsx(Text, { position: 'absolute', fontSize: 'xx-small', bottom: 0, left: 0, ml: 1, color: 'gray.500', children: !!version && _jsxs("em", { children: ["v. ", version] }) })] }), _jsx(GridItem, { colSpan: 6, alignItems: 'center', justifyContent: 'flex-end', pr: 2, display: 'flex', children: menu })] }));
+        }, ref: ref, children: [_jsxs(GridItem, { colSpan: 6, pt: { base: '0', lg: '8px' }, pb: { base: '0', lg: '8px' }, children: [_jsx(Logo, { defaultPath: defaultPath, alt: appName, src: selectedLogo }), _jsx(Text, { position: 'absolute', fontSize: 'xx-small', bottom: 0, left: 0, ml: 1, color: 'neu.muted', children: !!version && _jsxs("em", { children: ["v. ", version] }) })] }), _jsx(GridItem, { colSpan: 6, alignItems: 'center', justifyContent: 'flex-end', pr: 2, display: 'flex', children: menu })] }));
 });
 Header.displayName = 'Header';

package/dist/src/components/Sidebar.js

@@ -5,7 +5,6 @@ import { useColorMode } from "./ui/color-mode";
 import { LuMenu } from "react-icons/lu";
 import { motion } from "motion/react";
 import { useBreakpoint, useIsMobile } from "../hooks";
-import { COLOR_GRAY_200, COLOR_GRAY_800 } from "../constants";
 export const SidebarContext = React.createContext({});
 export const SidebarProvider = (props) => {
     const [isOpen, setIsOpen] = React.useState(props?.isOpen || false);
@@ -50,7 +49,6 @@ export const Sidebar = forwardRef((props, ref) => {
         transition: { duration: 0.2 }
     };
     const action = isMobile ? sidebar.isOpen ? open : close : {};
-    const borderColor = colorMode === 'light' ? COLOR_GRAY_200 : COLOR_GRAY_800;
     React.useEffect(() => {
         setMounted(true);
     }, []);
@@ -65,8 +63,9 @@ export const Sidebar = forwardRef((props, ref) => {
                 overflow: 'hidden',
                 height: 'inherit',
                 width: sidebar.isOpen ? width[breakpoint || 'base'] : '0',
-                backgroundColor: colorMode === 'light' ? 'white' : 'black',
-                borderRight: `1px solid ${borderColor}`,
+                backgroundColor: 'var(--chakra-colors-neu-surface)',
+                borderRight: '1px solid var(--chakra-colors-neu-border)',
+                boxShadow: 'var(--chakra-shadows-neuRaised)',
             }, ...action, ref: ref, children: _jsx(Box, { width: width[breakpoint || 'base'], children: sidebar.menu }) }) }));
 });
 Sidebar.displayName = 'Sidebar';

package/dist/src/components/VerifyAction.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Dialog, Portal, Text } from '@chakra-ui/react';
 export const VerifyAction = ({ isOpen, heading, subheading, onCancel, onProceed }) => {
-    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: onCancel, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { children: [_jsx(Dialog.Header, { mb: 0, children: _jsx(Dialog.Title, { mb: 0, children: heading }) }), _jsx(Text, { ml: 6, children: subheading }), _jsx(Dialog.Body, {}), _jsxs(Dialog.Footer, { children: [_jsx(Dialog.ActionTrigger, { asChild: true, children: _jsx(Button, { variant: 'subtle', children: "Close" }) }), _jsx(Button, { ml: 1, onClick: onProceed, colorPalette: 'red', children: "Proceed" })] })] }) })] }) }));
+    return (_jsx(Dialog.Root, { open: isOpen, onOpenChange: onCancel, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { backdropFilter: 'blur(2px)' }), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { layerStyle: 'neuRaised', borderWidth: '1px', borderColor: 'neu.border', children: [_jsx(Dialog.Header, { mb: 0, children: _jsx(Dialog.Title, { mb: 0, children: heading }) }), _jsx(Text, { ml: 6, color: 'neu.muted', children: subheading }), _jsx(Dialog.Body, {}), _jsxs(Dialog.Footer, { children: [_jsx(Dialog.ActionTrigger, { asChild: true, children: _jsx(Button, { variant: 'subtle', children: "Close" }) }), _jsx(Button, { ml: 1, onClick: onProceed, colorPalette: 'red', "aria-label": 'Proceed with destructive action', children: "Proceed" })] })] }) })] }) }));
 };

package/dist/src/components/form/FileUploader.js

@@ -54,6 +54,6 @@ const FileUploader = ({ title, description, buttonLabel, helperText, accept, mul
         const droppedFiles = Array.from(event.dataTransfer.files ?? []);
         handleFiles(droppedFiles);
     };
-    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || `Upload ${multiple ? 'File/s' : 'a File'}` }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { mt: 4, p: 6, borderWidth: "2px", borderStyle: "dashed", borderColor: isDragging ? "teal.500" : "border.emphasized", borderRadius: "md", bg: isDragging ? "teal.subtle" : "bg.muted", textAlign: "center", transition: "background 0.2s ease, border-color 0.2s ease", onDragEnter: handleDrag(true), onDragOver: handleDrag(true), onDragLeave: handleDrag(false), onDrop: handleDrop, children: [_jsxs(Text, { fontWeight: "medium", children: ["Drag and drop ", multiple ? 'file/s' : 'a file', " here"] }), _jsx(Text, { fontSize: "sm", color: "fg.muted", mt: 1, children: "or click the button below to browse from your device" }), _jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: handleFileInputChange }), _jsx(Button, { mt: 4, onClick: () => fileInputRef.current?.click(), children: buttonLabel || `Choose ${multiple ? 'File/s' : 'a File'}` }), !!helperText && (_jsx(Text, { fontSize: "xs", color: "fg.muted", mt: 3, children: helperText }))] }), files.length > 0 && (_jsxs(Box, { mt: 4, mb: 4, children: [_jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: 2, children: ["Selected ", multiple ? 'File/s' : 'a File'] }), _jsx(List.Root, { gap: "1", children: files.map((file, index) => (_jsx(List.Item, { children: `${file.name} ${!!uploadPercentages[index] ? '-' + uploadPercentages[index] + '%' : ''}` }, `${file.name}-${file.size}`))) })] })), children] }) }));
+    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || `Upload ${multiple ? 'File/s' : 'a File'}` }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { mt: 4, p: 6, borderWidth: "2px", borderStyle: "dashed", borderColor: isDragging ? "neu.accent" : "neu.border", borderRadius: "md", bg: isDragging ? "neu.surface" : "neu.bg", textAlign: "center", transition: "background 0.2s ease, border-color 0.2s ease", onDragEnter: handleDrag(true), onDragOver: handleDrag(true), onDragLeave: handleDrag(false), onDrop: handleDrop, children: [_jsxs(Text, { fontWeight: "medium", children: ["Drag and drop ", multiple ? 'file/s' : 'a file', " here"] }), _jsx(Text, { fontSize: "sm", color: "neu.muted", mt: 1, children: "or click the button below to browse from your device" }), _jsx("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept, multiple: multiple, onChange: handleFileInputChange }), _jsx(Button, { mt: 4, onClick: () => fileInputRef.current?.click(), children: buttonLabel || `Choose ${multiple ? 'File/s' : 'a File'}` }), !!helperText && (_jsx(Text, { fontSize: "xs", color: "neu.muted", mt: 3, children: helperText }))] }), files.length > 0 && (_jsxs(Box, { mt: 4, mb: 4, children: [_jsxs(Text, { fontSize: "sm", fontWeight: "medium", mb: 2, children: ["Selected ", multiple ? 'File/s' : 'a File'] }), _jsx(List.Root, { gap: "1", children: files.map((file, index) => (_jsx(List.Item, { children: `${file.name} ${!!uploadPercentages[index] ? '-' + uploadPercentages[index] + '%' : ''}` }, `${file.name}-${file.size}`))) })] })), children] }) }));
 };
 export default FileUploader;

package/dist/src/components/form/Login.js

@@ -12,6 +12,6 @@ const Login = ({ title, description, onLogin, ...props }) => {
                                                 }
                                             }), autoFocus: true }), _jsx(Field.ErrorText, { children: errors.emailAddress?.message })] }), _jsxs(Field.Root, { invalid: !!errors.password, children: [_jsx(Field.Label, { children: "Password" }), _jsx(PasswordInput, { ...register("password", {
                                                 required: "Please enter your password",
-                                            }) }), _jsx(Field.ErrorText, { children: errors.password?.message })] })] }), _jsx(Button, { type: "submit", colorScheme: "teal", width: "full", mt: 6, children: "Login" })] })] }) }));
+                                            }) }), _jsx(Field.ErrorText, { children: errors.password?.message })] })] }), _jsx(Button, { type: "submit", width: "full", mt: 6, children: "Login" })] })] }) }));
 };
 export default Login;

package/dist/src/components/form/SecondFactorAuth.js

@@ -5,6 +5,6 @@ const SecondFactorAuth = ({ title, description, onSecondFactorAuth, onResendAuth
     const { register, handleSubmit, formState: { errors }, } = useForm();
     return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Second Factor Auth" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { as: "form", onSubmit: handleSubmit((data) => onSecondFactorAuth(data)), mt: 4, children: [_jsxs(Stack, { gap: "4", children: [_jsxs(Field.Root, { invalid: !!errors.authCode, required: true, children: [_jsx(Field.Label, { children: "Authorization Code" }), _jsx(InputGroup, { endAddon: _jsx(Button, { h: '1.75rem', size: 'sm', variant: 'ghost', onClick: onResendAuthCode, children: "Resend" }), children: _jsx(Input, { type: 'text', placeholder: 'Authorization code', ...register("authCode", {
                                                     required: "Please enter your authorization code",
-                                                }), autoFocus: true }) }), _jsx(Field.ErrorText, { children: errors.authCode?.message })] }), _jsxs(Checkbox.Root, { ...register("rememberDevice"), size: 'sm', children: [_jsx(Checkbox.HiddenInput, {}), _jsx(Checkbox.Control, {}), _jsx(Checkbox.Label, { children: "Remember Device" })] })] }), _jsx(Button, { type: "submit", colorScheme: "teal", width: "full", mt: 6, children: "Submit" })] })] }) }));
+                                                }), autoFocus: true }) }), _jsx(Field.ErrorText, { children: errors.authCode?.message })] }), _jsxs(Checkbox.Root, { ...register("rememberDevice"), size: 'sm', children: [_jsx(Checkbox.HiddenInput, {}), _jsx(Checkbox.Control, {}), _jsx(Checkbox.Label, { children: "Remember Device" })] })] }), _jsx(Button, { type: "submit", width: "full", mt: 6, children: "Submit" })] })] }) }));
 };
 export default SecondFactorAuth;

package/dist/src/components/index.d.ts

@@ -19,3 +19,7 @@ export * from './form/Login';
 export * from './form/SecondFactorAuth';
 export * from './form/FileUploader';
 export { default as Form } from './form';
+export { default as DataTable } from './table/DataTable';
+export * from './table/types';
+export * from './table/components/ColumnText';
+export { default as useDataTable } from './table/hooks/useDataTable';

package/dist/src/components/index.js

@@ -19,3 +19,7 @@ export * from './form/Login';
 export * from './form/SecondFactorAuth';
 export * from './form/FileUploader';
 export { default as Form } from './form';
+export { default as DataTable } from './table/DataTable';
+export * from './table/types';
+export * from './table/components/ColumnText';
+export { default as useDataTable } from './table/hooks/useDataTable';

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

@@ -0,0 +1,16 @@
+import { IColumnFilter, TFilterChange } from "./types";
+export interface IDataTableProps {
+    data: any[];
+    total: number;
+    pageNumber: number;
+    pagesTotal: number;
+    pageSize: number;
+    setPageNumber: React.Dispatch<React.SetStateAction<number>>;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    columns: any[];
+    filters?: IColumnFilter[];
+    onRowClick?: (row: any) => void;
+    onFilterChange?: TFilterChange;
+}
+declare const DataTable: React.FC<IDataTableProps>;
+export default DataTable;

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Table } from "@chakra-ui/react";
+import { useColorMode } from "../ui/color-mode";
+import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+import TableFilter from "./components/TableFilter";
+import { Pagination } from "./components/Pagination";
+const Pager = ({ border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize }) => (_jsx(Box, { p: 2, pt: 6, border: border, borderBottom: 'none', children: _jsx(Pagination, { pagesTotal: pagesTotal, pageNumber: pageNumber, setPageNumber: setPageNumber, pageSize: pageSize, setPageSize: setPageSize, showPageSelector: true }) }));
+const DataTable = ({ data: defaultData, total, pageNumber, pagesTotal, setPageNumber, setPageSize, pageSize, columns, filters = [], onRowClick, onFilterChange, }) => {
+    const [data, setData] = useState(() => [...defaultData]);
+    const { colorMode } = useColorMode();
+    const columnResizeMode = 'onChange';
+    const columnResizeDirection = 'ltr';
+    const isDarkMode = colorMode === 'dark';
+    const border = `1px solid ${isDarkMode ? '#333333' : '#E2E8F0'} !important`;
+    const table = useReactTable({
+        data,
+        columns,
+        columnResizeMode,
+        columnResizeDirection,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const pagerProps = { border, pagesTotal, pageNumber, setPageNumber, pageSize, setPageSize };
+    useEffect(() => {
+        setData([...defaultData]);
+    }, [defaultData, setData]);
+    return (_jsx(Card.Root, { children: _jsxs(Card.Body, { p: 0, children: [_jsx(Pager, { ...pagerProps }), _jsx(Box, { overflow: 'auto', children: _jsxs(Table.Root, { width: '100%', children: [_jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => (_jsx(Table.Row, { children: headerGroup.headers.map(header => (_jsxs(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: [header.isPlaceholder
+                                                ? null
+                                                : flexRender(header.column.columnDef.header, header.getContext()), filters.find((filter) => filter.id === header.id) && !!onFilterChange ? (_jsx(TableFilter, { filter: filters.find(filter => filter.id === header.id), onFilterChange: onFilterChange })) : null] }, header.id))) }, headerGroup.id))) }), _jsxs(Table.Body, { children: [total === 0 ? (_jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: columns.length, textAlign: 'center', children: "No records found" }) })) : null, table.getRowModel().rows.map((row, i) => {
+                                        const isEven = i % 2 === 0;
+                                        const colorEven = isDarkMode ? 'gray.700' : 'gray.50';
+                                        const colorOdd = isDarkMode ? 'gray.600' : 'white';
+                                        const backgroundColor = isEven ? colorEven : colorOdd;
+                                        return (_jsx(Table.Row, { background: backgroundColor, _hover: !!onRowClick ? {
+                                                cursor: 'pointer',
+                                                backgroundColor: 'rgba(107, 160, 252, 0.3) !important',
+                                            } : void 0, onClick: () => onRowClick && onRowClick(row.original), children: row.getVisibleCells().map(cell => (_jsx(Table.Cell, { border: border, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id));
+                                    })] }), _jsx(Table.Footer, { children: table.getFooterGroups().map(footerGroup => (_jsx(Table.Row, { children: footerGroup.headers.map(header => (_jsx(Table.ColumnHeader, { borderLeft: border, borderRight: border, children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, footerGroup.id))) })] }) }), _jsx(Pager, { ...pagerProps })] }) }));
+};
+export default DataTable;

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

@@ -0,0 +1,2 @@
+import { TextProps } from "@chakra-ui/react";
+export default function ColumnText(props: TextProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+export default function ColumnText(props) {
+    return (_jsx(Text, { wordBreak: 'break-word', whiteSpace: 'nowrap', truncate: true, ...props }));
+}

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface PageSizeSelectorProps {
+    sizes: number[];
+    selectedPageSize: number;
+    onSelect: (pageSize: number) => void;
+}
+export declare const PageSizeSelector: React.FC<PageSizeSelectorProps>;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect, HStack, Text } from '@chakra-ui/react';
+import * as React from 'react';
+export const PageSizeSelector = ({ sizes, selectedPageSize, onSelect, }) => {
+    const idKey = React.useId();
+    const handleSetPageSize = (e) => onSelect(Number(e.target.value));
+    return (_jsxs(HStack, { gap: "3", align: "center", children: [_jsx(Text, { fontSize: "sm", fontWeight: "normal", children: "Showing" }), _jsxs(NativeSelect.Root, { size: 'sm', maxW: '75px', children: [_jsx(NativeSelect.Field, { id: `page-size-selector-${idKey}`, value: selectedPageSize, onChange: handleSetPageSize, cursor: 'pointer', children: sizes.map((size, key) => (_jsx("option", { value: size, children: size }, `options-${size}-${key}`))) }), _jsx(NativeSelect.Indicator, {})] })] }));
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface IPaginationProps {
+    pagesTotal: number;
+    pageNumber: number;
+    pageSize: number;
+    showPageSelector?: boolean;
+    setPageSize: React.Dispatch<React.SetStateAction<number>>;
+    setPageNumber: React.Dispatch<React.SetStateAction<number>>;
+}
+export declare const Pagination: React.FC<IPaginationProps>;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Flex, Button, Field, HStack, Text, Grid, GridItem, NumberInput } from '@chakra-ui/react';
+import { PAGE_SIZES } from '../constants';
+import { PageSizeSelector } from './PageSizeSelector';
+import { useBreakpoint } from '../../../hooks';
+const PAGE_LIMIT_MOBILE = 2;
+const PAGE_LIMIT = 4;
+const makeNavButton = (onChange, pageNumber) => function PageButton(page) {
+    return (_jsx(Button, { "aria-label": `page-${page}`, onClick: () => onChange(page.toString()), variant: page === pageNumber ? 'solid' : 'outline', size: 'sm', paddingLeft: '1px !important', paddingRight: '1px !important', marginRight: 1, children: page }, `nav-button-${page}`));
+};
+export const Pagination = ({ pagesTotal, pageNumber, pageSize, showPageSelector, setPageNumber, setPageSize }) => {
+    const [pageInput, setPageInput] = React.useState(pageNumber);
+    const [shouldDebounce, setShouldDebounce] = React.useState(false);
+    const pageInputRef = React.useRef(pageNumber);
+    const breakpoint = useBreakpoint() ?? 'base';
+    const isMobile = ['base', 'sm'].includes(breakpoint);
+    const limit = isMobile ? PAGE_LIMIT_MOBILE : PAGE_LIMIT;
+    const pages = [];
+    for (let i = 0; pagesTotal > i; i++) {
+        pages.push(i + 1);
+    }
+    const handlePages = (pages, limit, pageNumber) => pages.filter(page => {
+        const cp = pageNumber < 4 ? 3 : pageNumber;
+        const rangeA = cp - (limit / 2);
+        const rangeB = cp + (limit / 2);
+        return page >= rangeA && page <= rangeB;
+    });
+    const handleChangePageInput = (shouldDebounce) => (ivalue) => {
+        const value = Number(ivalue) > pagesTotal ? pagesTotal : Number(ivalue);
+        setShouldDebounce(shouldDebounce);
+        setPageInput(value);
+    };
+    React.useEffect(() => {
+        let timeout;
+        if ((pageInputRef.current !== pageInput) && !!pageInput) {
+            pageInputRef.current = pageInput;
+            setShouldDebounce(previousShouldDebounce => {
+                timeout = setTimeout(() => setPageNumber(pageInput), previousShouldDebounce ? 1000 : 0);
+                return false;
+            });
+        }
+        return () => clearTimeout(timeout);
+    }, [pageInput, setShouldDebounce, setPageNumber]);
+    return (_jsxs(Grid, { templateRows: {
+            sm: 'repeat(1, 1fr)',
+        }, templateColumns: {
+            sm: `repeat(1, 1fr)`,
+            md: `repeat(2, 1fr)`,
+        }, children: [showPageSelector ? (_jsx(_Fragment, { children: _jsx(GridItem, { mb: 4, children: _jsxs(Flex, { children: [_jsx(PageSizeSelector, { sizes: PAGE_SIZES, selectedPageSize: pageSize, onSelect: setPageSize }), _jsxs(Text, { fontSize: 'sm', fontWeight: 'normal', ml: 4, mt: 1, children: ["page ", _jsx("strong", { children: pageNumber.toString() }), " of ", _jsx("strong", { children: pagesTotal.toString() })] })] }) }) })) : _jsx(GridItem, { colSpan: 1 }), _jsx(GridItem, { children: _jsx(Field.Root, { children: _jsxs(HStack, { justifyContent: 'right', children: [handlePages(pages, limit, pageNumber).map(makeNavButton(handleChangePageInput(false), pageNumber)), _jsx(Field.Label, { htmlFor: 'pagination', style: { fontSize: 10 }, mt: 2, ml: 4, children: "goto page:" }), _jsxs(NumberInput.Root, { value: String(pageInput), size: 'sm', max: pagesTotal, min: 1, onValueChange: (details) => handleChangePageInput(true)(details.value), children: [_jsx(NumberInput.Input, { id: 'pagination', style: { width: 90 } }), _jsxs(NumberInput.Control, { children: [_jsx(NumberInput.IncrementTrigger, {}), _jsx(NumberInput.DecrementTrigger, {})] })] })] }) }) })] }));
+};

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

@@ -0,0 +1,6 @@
+import { IColumnFilter, TFilterChange } from "../types";
+export interface ITableFilterProps {
+    filter: IColumnFilter;
+    onFilterChange: TFilterChange;
+}
+export default function TableFilter({ filter, onFilterChange, }: ITableFilterProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TableFilterInput from "./TableFilterInput";
+import { Field, IconButton, InputGroup } from "@chakra-ui/react";
+import TableFilterDatePicker from "./TableFilterDatePicker";
+import { FaX } from "react-icons/fa6";
+import { Tooltip } from "../../ui/tooltip";
+export default function TableFilter({ filter, onFilterChange, }) {
+    const handleChangeInput = (event) => {
+        const { value } = event.target;
+        onFilterChange({ ...filter, value });
+    };
+    const handleChangeDate = (date) => {
+        if (date) {
+            onFilterChange({ ...filter, value: new Date(date) });
+        }
+    };
+    const handleClearFilter = () => {
+        onFilterChange({ ...filter, value: undefined });
+    };
+    const ClearFilterButton = () => !!filter.value ? (_jsx(Tooltip, { content: `Clear filter`, positioning: { placement: 'bottom-end' }, showArrow: true, children: _jsx(IconButton, { "aria-label": `Clear filter ${filter.type}`, onClick: handleClearFilter, size: 'sm', variant: 'ghost', children: _jsx(FaX, {}) }) })) : null;
+    if (filter.type === 'string' || filter.type === 'number') {
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterInput, { value: filter.value?.toString() || '', onChange: handleChangeInput }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+    }
+    if (filter.type === 'date') {
+        return (_jsxs(Field.Root, { children: [_jsx(InputGroup, { endElement: _jsx(ClearFilterButton, {}), children: _jsx(TableFilterDatePicker, { selected: filter.value, onChange: (date) => handleChangeDate(date) }) }), _jsx(Field.HelperText, { color: 'gray.300', whiteSpace: 'nowrap', wordBreak: 'break-word', children: filter.helperText })] }));
+    }
+    return null;
+}

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

@@ -0,0 +1,5 @@
+export interface ITableFilterDatePickerProps {
+    selected?: Date | null;
+    onChange: (date: Date | null) => void;
+}
+export default function TableFilterDatePicker({ selected, onChange }: ITableFilterDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "@chakra-ui/react";
+export default function TableFilterDatePicker({ selected, onChange }) {
+    const value = selected ? selected.toISOString().split('T')[0] : '';
+    const handleChange = (e) => {
+        const val = e.target.value;
+        onChange(val ? new Date(val) : null);
+    };
+    return (_jsx(Input, { type: "date", value: value, onChange: handleChange, width: '100%', mt: 2, size: 'md' }));
+}

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

@@ -0,0 +1,2 @@
+import { InputProps } from "@chakra-ui/react";
+export default function TableFilterInput(props: InputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "@chakra-ui/react";
+export default function TableFilterInput(props) {
+    return (_jsx(Input, { width: '100%', mt: 2, ...props }));
+}

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

@@ -0,0 +1,2 @@
+import { type NativeSelectRootProps } from "@chakra-ui/react";
+export default function TableFilterSelect(props: NativeSelectRootProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NativeSelect } from "@chakra-ui/react";
+export default function TableFilterSelect(props) {
+    return (_jsxs(NativeSelect.Root, { width: '100%', ...props, children: [_jsx(NativeSelect.Field, {}), _jsx(NativeSelect.Indicator, {})] }));
+}

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

@@ -0,0 +1,2 @@
+export declare const PAGE_FIRST_PAGE = 1;
+export declare const PAGE_SIZES: number[];

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

@@ -0,0 +1,2 @@
+export const PAGE_FIRST_PAGE = 1;
+export const PAGE_SIZES = [25, 50, 100, 150, 200, 250];

package/dist/src/components/table/hooks/useDataTable.d.ts

@@ -0,0 +1,24 @@
+import { IFilter } from "@vrobots/types";
+import { IColumnFilter } from "../types";
+export interface IUseDataTableArgs {
+    columnFilters: IColumnFilter[];
+    skip: number;
+    limit: number;
+    totalRecords: number;
+    sort?: {
+        [key: string]: 1 | -1;
+    };
+    baseFilter?: IFilter;
+    additionalFilters?: IFilter[];
+    shouldUseQuerystring?: boolean;
+}
+export default function useDataTable(options: IUseDataTableArgs): {
+    pageSize: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    pageNumber: number;
+    pagesTotal: number;
+    setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+    query: import("@vrobots/types").IQuery;
+    filters: IColumnFilter[];
+    onFilterChange: (filter: IColumnFilter) => void;
+};

package/dist/src/components/table/hooks/useDataTable.js

@@ -0,0 +1,14 @@
+import useTableFilters from "./useTableFilters";
+import usePagination from "./usePagination";
+import usePageSize from "./usePageSize";
+export default function useDataTable(options) {
+    const { columnFilters, skip, limit, totalRecords, sort, baseFilter, additionalFilters, shouldUseQuerystring, } = options;
+    const pageSize = usePageSize(limit);
+    const pagination = usePagination(skip, limit, totalRecords, shouldUseQuerystring);
+    const filters = useTableFilters(columnFilters, skip, pageSize.pageSize, pagination.pageNumber, sort, baseFilter, additionalFilters, shouldUseQuerystring);
+    return {
+        ...filters,
+        ...pagination,
+        ...pageSize,
+    };
+}

package/dist/src/components/table/hooks/usePageSize.d.ts

@@ -0,0 +1,4 @@
+export default function usePageSize(defaultLimit: number): {
+    pageSize: number;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+};

package/dist/src/components/table/hooks/usePageSize.js

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+export default function usePageSize(defaultLimit) {
+    const [pageSize, setPageSize] = useState(defaultLimit);
+    return {
+        pageSize,
+        setPageSize,
+    };
+}

package/dist/src/components/table/hooks/usePagination.d.ts

@@ -0,0 +1,5 @@
+export default function usePagination(skip: number, limit: number, totalRecords: number, shouldUseQuerystring?: boolean): {
+    pageNumber: number;
+    pagesTotal: number;
+    setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+};

package/dist/src/components/table/hooks/usePagination.js

@@ -0,0 +1,12 @@
+import { useState } from "react";
+import { PAGE_FIRST_PAGE } from "../constants";
+export default function usePagination(skip, limit, totalRecords, shouldUseQuerystring) {
+    const defaultPageNumber = !!limit ? (skip / limit) + 1 : PAGE_FIRST_PAGE;
+    const [pageNumber, setPageNumber] = useState(defaultPageNumber);
+    const pagesTotal = Math.ceil(totalRecords / limit);
+    return {
+        pageNumber,
+        pagesTotal,
+        setPageNumber,
+    };
+}

package/dist/src/components/table/hooks/useTableFilters.d.ts

@@ -0,0 +1,15 @@
+import { IColumnFilter, TColumnFilterType } from "../types";
+import { IFilter, IQuery } from "@vrobots/types";
+export interface ITableFilter {
+    [key: string]: {
+        type: TColumnFilterType;
+        value: string | number | Date;
+    };
+}
+export default function useTableFilters(columnFilters: IColumnFilter[], skip: number, limit: number, pageNumber: number, sort?: {
+    [key: string]: 1 | -1;
+}, baseFilter?: IFilter, additionalFilters?: IFilter[], shouldUseQuerystring?: boolean): {
+    query: IQuery;
+    filters: IColumnFilter[];
+    onFilterChange: (filter: IColumnFilter) => void;
+};

package/dist/src/components/table/hooks/useTableFilters.js

@@ -0,0 +1,118 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+export default function useTableFilters(columnFilters, skip, limit, pageNumber, sort, baseFilter, additionalFilters, shouldUseQuerystring) {
+    const [filters, setFilters] = useState(columnFilters);
+    const pathname = usePathname();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const refPath = useRef('');
+    const query = useMemo(() => {
+        const coreFilters = filters.filter(filter => typeof filter.value !== 'undefined' && filter.value !== null && filter.value !== '');
+        const dateFilters = coreFilters
+            .filter(filter => filter.type === 'date')
+            .map((filter) => ({
+            logic: 'and',
+            column: filter.accessor,
+            operator: filter.operator,
+            dataType: filter.type,
+            value: new Date(filter?.value).getTime(),
+        }));
+        const nonDateFilters = coreFilters
+            .filter(filter => filter.type !== 'date')
+            .map((filter) => {
+            const filterParts = filter?.value?.toString().split(' ') || [];
+            if (filterParts.length === 1) {
+                return {
+                    logic: 'and',
+                    column: filter.accessor,
+                    operator: filter.operator,
+                    dataType: filter.type,
+                    value: filter?.value,
+                };
+            }
+            else {
+                return {
+                    logic: 'and',
+                    filters: filterParts.map((part) => ({
+                        logic: 'or',
+                        column: filter.accessor,
+                        operator: filter.operator,
+                        dataType: filter.type,
+                        value: part,
+                    })),
+                };
+            }
+        });
+        return {
+            limit,
+            skip: (pageNumber - 1) * limit,
+            filter: {
+                logic: 'and',
+                ...baseFilter,
+                filters: [
+                    ...dateFilters,
+                    ...nonDateFilters,
+                    ...additionalFilters || []
+                ],
+            },
+            sort,
+        };
+    }, [limit, pageNumber, filters, baseFilter, additionalFilters, sort]);
+    const onFilterChange = (filter) => {
+        setFilters((previousFilters) => ([
+            ...previousFilters.filter(f => f.accessor !== filter.accessor),
+            filter,
+        ]));
+    };
+    useEffect(() => {
+        const params = new URLSearchParams(searchParams.toString());
+        const incomingQuery = searchParams.get('query');
+        if (refPath.current === '' && !!incomingQuery) {
+            const query = JSON.parse(incomingQuery);
+            const filters = query?.filter?.filters || [];
+            const updatedFiltersPopulated = filters.map(filter => {
+                const isNestedFilter = Array.isArray(filter.filters);
+                const columnFilter = columnFilters.find(f => f.accessor === filter.column);
+                if (columnFilter && !isNestedFilter) {
+                    return {
+                        ...columnFilter,
+                        value: filter.value,
+                    };
+                }
+                if (isNestedFilter) {
+                    const nestedColumn = filter.filters?.[0]?.column;
+                    const nestedColumnFilter = columnFilters.find(f => f.accessor === nestedColumn);
+                    return {
+                        ...nestedColumnFilter,
+                        value: filter.filters?.map(f => f.value).join(' '),
+                    };
+                }
+                return;
+            })
+                .filter(filter => filter !== null);
+            const update = columnFilters.map(filter => {
+                const updatedFilter = updatedFiltersPopulated.find(f => f.accessor === filter.accessor);
+                if (updatedFilter) {
+                    return updatedFilter;
+                }
+                return filter;
+            });
+            if (update?.length) {
+                setFilters(update);
+            }
+        }
+        else {
+            params.set('query', JSON.stringify(query));
+        }
+        const path = `${pathname}?${params.toString()}`;
+        if (shouldUseQuerystring && refPath.current !== path) {
+            refPath.current = path;
+            router.push(path);
+        }
+    }, [filters, pathname, router, shouldUseQuerystring, searchParams, skip, limit, baseFilter, additionalFilters, sort, columnFilters, query]);
+    return {
+        query,
+        filters,
+        onFilterChange,
+    };
+}

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

@@ -0,0 +1,11 @@
+export type TFilterChange = (filter: IColumnFilter) => void;
+export type TColumnFilterType = 'date' | 'string' | 'number' | 'boolean';
+export type TColumnFilterOperation = '%' | '!%' | '^%' | '%^' | '=' | '!=' | '>' | '>=' | '<' | '<=' | 'null';
+export interface IColumnFilter {
+    id: string;
+    accessor: string;
+    type: TColumnFilterType;
+    operator: TColumnFilterOperation;
+    helperText?: string;
+    value?: string | number | Date;
+}

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

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

package/dist/src/hooks/useSelectedColorSchema.d.ts

@@ -1,5 +1,6 @@
 import { TColor } from "../types";
-export declare const useSelectedColorSchema: (color: TColor) => {
+export declare const useSelectedColorSchema: (_color: TColor) => {
     color: string;
     bgColor: string;
+    boxShadow: string;
 };

package/dist/src/hooks/useSelectedColorSchema.js

@@ -1,8 +1,9 @@
 import { useColorMode } from "../components";
-export const useSelectedColorSchema = (color) => {
+export const useSelectedColorSchema = (_color) => {
     const { colorMode } = useColorMode();
     return {
-        color: colorMode === 'light' ? `${color}.800` : `${color}.400`,
-        bgColor: colorMode === 'light' ? `${color}.200` : `${color}.800`,
+        color: 'neu.text',
+        bgColor: colorMode === 'light' ? 'neu.bg' : 'neu.surface',
+        boxShadow: 'neuInset',
     };
 };

package/dist/src/stories/Breadcrumbs.stories.d.ts

@@ -12,3 +12,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Component: Story;
+export declare const KeyboardFocus: Story;

package/dist/src/stories/Breadcrumbs.stories.js

@@ -1,3 +1,4 @@
+import { expect, userEvent, within } from 'storybook/test';
 import { Breadcrumbs } from '../components/Breadcrumbs';
 const onClick = (nav) => {
     console.log('Breadcrumb clicked:', nav);
@@ -23,3 +24,17 @@ export const Component = {
         breadcrumbs: EXAMPLE_BREADCRUMBS,
     }
 };
+export const KeyboardFocus = {
+    name: 'Keyboard Focus',
+    args: {
+        breadcrumbs: EXAMPLE_BREADCRUMBS,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const links = canvas.getAllByRole('button');
+        for (const link of links) {
+            await userEvent.tab();
+            await expect(link).toHaveFocus();
+        }
+    }
+};

package/dist/src/stories/DataTable.stories.d.ts

@@ -0,0 +1,26 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { IDataTableProps } from '../components/table/DataTable';
+declare const meta: {
+    title: string;
+    component: import("react").FC<IDataTableProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        data: never[];
+        total: number;
+        pageNumber: number;
+        pagesTotal: number;
+        pageSize: number;
+        setPageNumber: import("react").Dispatch<import("react").SetStateAction<number>>;
+        setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+        columns: never[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithRowClick: Story;
+export declare const EmptyState: Story;
+export declare const WithFilters: Story;

package/dist/src/stories/DataTable.stories.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import DataTable from '../components/table/DataTable';
+const noopSetPageNumber = () => undefined;
+const noopSetPageSize = () => undefined;
+const SAMPLE_DATA = [
+    { id: 'P-001', name: 'Alice Johnson', dob: '1985-03-12', provider: 'Dr. Smith', status: 'Active', balance: 125.0 },
+    { id: 'P-002', name: 'Bob Martinez', dob: '1990-07-24', provider: 'Dr. Patel', status: 'Inactive', balance: 0.0 },
+    { id: 'P-003', name: 'Carol White', dob: '1978-11-05', provider: 'Dr. Smith', status: 'Active', balance: 340.5 },
+    { id: 'P-004', name: 'David Brown', dob: '2000-01-30', provider: 'Dr. Lee', status: 'Pending', balance: 75.25 },
+    { id: 'P-005', name: 'Eva Green', dob: '1995-09-18', provider: 'Dr. Patel', status: 'Active', balance: 210.0 },
+];
+const COLUMNS = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'name',
+        header: 'Patient Name',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'dob',
+        header: 'Date of Birth',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'provider',
+        header: 'Provider',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+        cell: (info) => info.getValue(),
+    },
+    {
+        accessorKey: 'balance',
+        header: 'Balance',
+        cell: (info) => `$${info.getValue().toFixed(2)}`,
+    },
+];
+function DataTableDemo(props) {
+    const [pageNumber, setPageNumber] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    return (_jsx(DataTable, { data: SAMPLE_DATA, total: SAMPLE_DATA.length, columns: COLUMNS, pageNumber: pageNumber, pagesTotal: Math.ceil(SAMPLE_DATA.length / pageSize), pageSize: pageSize, setPageNumber: setPageNumber, setPageSize: setPageSize, ...props }));
+}
+const meta = {
+    title: 'Data/DataTable',
+    component: DataTable,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    args: {
+        data: [],
+        total: 0,
+        pageNumber: 1,
+        pagesTotal: 1,
+        pageSize: 25,
+        setPageNumber: noopSetPageNumber,
+        setPageSize: noopSetPageSize,
+        columns: [],
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: () => _jsx(DataTableDemo, {}),
+};
+export const WithRowClick = {
+    args: {},
+    render: () => (_jsx(DataTableDemo, { onRowClick: (row) => alert(`Clicked: ${row.name}`) })),
+};
+export const EmptyState = {
+    args: {},
+    render: () => _jsx(EmptyStateDemo, {}),
+};
+function EmptyStateDemo() {
+    const [pageNumber, setPageNumber] = useState(1);
+    const [pageSize, setPageSize] = useState(25);
+    return (_jsx(DataTable, { data: [], total: 0, columns: COLUMNS, pageNumber: pageNumber, pagesTotal: 0, pageSize: pageSize, setPageNumber: setPageNumber, setPageSize: setPageSize }));
+}
+export const WithFilters = {
+    args: {},
+    render: () => (_jsx(DataTableDemo, { filters: [
+            { id: 'name', accessor: 'name', type: 'string', operator: '%', helperText: 'Search by name' },
+            { id: 'status', accessor: 'status', type: 'string', operator: '=', helperText: 'Filter by status' },
+        ], onFilterChange: (filter) => console.log('Filter changed:', filter) })),
+};

package/dist/src/stories/FileUploader.stories.d.ts

@@ -13,3 +13,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Component: Story;
+export declare const KeyboardFocus: Story;

package/dist/src/stories/FileUploader.stories.js

@@ -1,3 +1,4 @@
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/FileUploader',
@@ -22,3 +23,21 @@ export const Component = {
         onFilesSelected: (files) => console.log(files),
     }
 };
+export const KeyboardFocus = {
+    name: 'Keyboard Focus',
+    args: {
+        title: 'Upload Files',
+        description: 'Drag and drop files in the area below, or choose files from your device.',
+        buttonLabel: 'Browse Files',
+        helperText: 'Accepted: image/*, .pdf',
+        accept: 'image/*',
+        multiple: true,
+        onFilesSelected: (files) => console.log(files),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.tab();
+        const chooseButton = canvas.getByRole('button', { name: /browse files/i });
+        await expect(chooseButton).toHaveFocus();
+    }
+};

package/dist/src/stories/Login.stories.d.ts

@@ -13,3 +13,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Component: Story;
+export declare const KeyboardFocus: Story;

package/dist/src/stories/Login.stories.js

@@ -1,3 +1,4 @@
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/Login',
@@ -18,3 +19,21 @@ export const Component = {
         onLogin: (data) => console.log(data)
     }
 };
+export const KeyboardFocus = {
+    name: 'Keyboard Focus',
+    args: {
+        title: "Login Form",
+        description: "Please enter your credentials to continue",
+        onLogin: (data) => console.log(data)
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.tab();
+        const emailInput = canvas.getByRole('textbox', { name: /email address/i });
+        await expect(emailInput).toHaveFocus();
+        await userEvent.tab();
+        await userEvent.tab();
+        const submitButton = canvas.getByRole('button', { name: /login/i });
+        await expect(submitButton).toHaveFocus();
+    }
+};

package/dist/src/stories/SecondFactorAuth.stories.d.ts

@@ -13,3 +13,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Component: Story;
+export declare const KeyboardFocus: Story;

package/dist/src/stories/SecondFactorAuth.stories.js

@@ -1,3 +1,4 @@
+import { expect, userEvent, within } from 'storybook/test';
 import { Form } from '../components';
 const meta = {
     title: 'Forms/SecondFactorAuth',
@@ -19,3 +20,25 @@ export const Component = {
         onResendAuthCode: () => console.log("Resend auth code")
     }
 };
+export const KeyboardFocus = {
+    name: 'Keyboard Focus',
+    args: {
+        title: "Second FactorAuth Form",
+        description: "Please enter your auth code to continue",
+        onSecondFactorAuth: (data) => console.log(data),
+        onResendAuthCode: () => console.log("Resend auth code")
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.tab();
+        const codeInput = canvas.getByPlaceholderText(/authorization code/i);
+        await expect(codeInput).toHaveFocus();
+        await userEvent.tab();
+        const resendButton = canvas.getByRole('button', { name: /resend/i });
+        await expect(resendButton).toHaveFocus();
+        await userEvent.tab();
+        await userEvent.tab();
+        const submitButton = canvas.getByRole('button', { name: /submit/i });
+        await expect(submitButton).toHaveFocus();
+    }
+};

package/dist/src/stories/VerifyAction.stories.d.ts

@@ -10,3 +10,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Component: Story;
+export declare const KeyboardFocus: Story;

package/dist/src/stories/VerifyAction.stories.js

@@ -1,3 +1,4 @@
+import { expect, userEvent, within } from 'storybook/test';
 import { VerifyAction } from '../components';
 const meta = {
     title: 'Feedback/VerifyAction',
@@ -17,3 +18,22 @@ export const Component = {
         onProceed: () => console.log('proceed')
     }
 };
+export const KeyboardFocus = {
+    name: 'Keyboard Focus — Destructive Action',
+    args: {
+        isOpen: true,
+        heading: 'Are you sure?',
+        subheading: `This action can't be undone!`,
+        onCancel: () => console.log('close dialog'),
+        onProceed: () => console.log('proceed')
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.tab();
+        const closeButton = canvas.getByRole('button', { name: /close/i });
+        await expect(closeButton).toHaveFocus();
+        await userEvent.tab();
+        const proceedButton = canvas.getByRole('button', { name: /proceed/i });
+        await expect(proceedButton).toHaveFocus();
+    }
+};

package/dist/src/theme/system.d.ts

@@ -0,0 +1,2 @@
+declare const system: import("@chakra-ui/react").SystemContext;
+export default system;

package/dist/src/theme/system.js

@@ -0,0 +1,113 @@
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+const config = defineConfig({
+    globalCss: {
+        "html, body": {
+            bg: "neu.bg",
+            color: "neu.text",
+            minHeight: "100%",
+        },
+        ".sb-show-main": {
+            bg: "neu.bg",
+            minHeight: "100vh",
+        },
+        button: {
+            bg: "neu.surface",
+            borderColor: "neu.border",
+            borderWidth: "1px",
+            borderRadius: "14px",
+            boxShadow: "neuRaised",
+            transition: "transform 0.12s ease, box-shadow 0.16s ease, background-color 0.16s ease",
+            _hover: {
+                transform: "translateY(-1px)",
+            },
+            _active: {
+                transform: "translateY(0)",
+                boxShadow: "neuInset",
+            },
+        },
+        "input, textarea, select": {
+            bg: "neu.surface",
+            borderColor: "neu.border",
+            borderWidth: "1px",
+            borderRadius: "12px",
+            boxShadow: "neuInset",
+        },
+        "[data-scope='card'][data-part='root']": {
+            bg: "neu.surface",
+            borderColor: "neu.border",
+            borderWidth: "1px",
+            borderRadius: "20px",
+            boxShadow: "neuRaised",
+        },
+        "button:focus-visible, [role='button']:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible": {
+            outline: "2px solid",
+            outlineColor: "neu.accent",
+            outlineOffset: "2px",
+        },
+        "[data-scope='button'][data-color-palette='red']": {
+            bg: "red.600",
+            color: "white",
+            borderColor: "red.700",
+            boxShadow: "none",
+            _hover: {
+                bg: "red.700",
+            },
+            _active: {
+                bg: "red.800",
+            },
+            _focusVisible: {
+                outlineColor: "red.300",
+            },
+        },
+    },
+    theme: {
+        semanticTokens: {
+            colors: {
+                neu: {
+                    bg: { value: { base: "#e6ebf2", _dark: "#161c24" } },
+                    surface: { value: { base: "#edf2f8", _dark: "#1f2732" } },
+                    text: { value: { base: "#1f2937", _dark: "#e5e7eb" } },
+                    border: { value: { base: "#d7dee8", _dark: "#2a3442" } },
+                    muted: { value: { base: "#64748b", _dark: "#94a3b8" } },
+                    accent: { value: { base: "#2b6cb0", _dark: "#63b3ed" } },
+                },
+            },
+            shadows: {
+                neuRaised: {
+                    value: {
+                        base: "10px 10px 24px rgba(163, 177, 198, 0.58), -10px -10px 24px rgba(255, 255, 255, 0.9)",
+                        _dark: "10px 10px 24px rgba(0, 0, 0, 0.62), -10px -10px 24px rgba(255, 255, 255, 0.04)",
+                    },
+                },
+                neuInset: {
+                    value: {
+                        base: "inset 8px 8px 18px rgba(163, 177, 198, 0.46), inset -8px -8px 18px rgba(255, 255, 255, 0.8)",
+                        _dark: "inset 8px 8px 18px rgba(0, 0, 0, 0.56), inset -8px -8px 18px rgba(255, 255, 255, 0.04)",
+                    },
+                },
+            },
+        },
+        layerStyles: {
+            neuRaised: {
+                value: {
+                    bg: "neu.surface",
+                    borderRadius: "24px",
+                    borderWidth: "1px",
+                    borderColor: "neu.border",
+                    boxShadow: "neuRaised",
+                },
+            },
+            neuInset: {
+                value: {
+                    bg: "neu.surface",
+                    borderRadius: "20px",
+                    borderWidth: "1px",
+                    borderColor: "neu.border",
+                    boxShadow: "neuInset",
+                },
+            },
+        },
+    },
+});
+const system = createSystem(defaultConfig, config);
+export default system;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.73",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,8 +21,10 @@
     "@chakra-ui/react": "^3.32.0",
     "@emotion/react": "^11.14.0",
     "@storybook/addon-themes": "^10.2.16",
+    "@tanstack/react-table": "^8.21.3",
     "axios": "^1.13.4",
     "motion": "^12.34.0",
+    "next": "^16.2.4",
     "next-themes": "^0.4.6",
     "owasp-password-strength-test": "^1.3.0",
     "react": "^19.2.0",