@vrobots/storybook 0.1.73 → 0.2.0

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.0",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -40,6 +40,7 @@
         "@storybook/addon-docs": "^10.2.16",
         "@storybook/addon-vitest": "^10.2.16",
         "@storybook/react-vite": "^10.2.16",
+        "@storybook/test": "^8.6.15",
         "@types/node": "^24.10.1",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",

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/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/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.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,6 +40,7 @@
     "@storybook/addon-docs": "^10.2.16",
     "@storybook/addon-vitest": "^10.2.16",
     "@storybook/react-vite": "^10.2.16",
+    "@storybook/test": "^8.6.15",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",