feat(Interaction): new Interaction component

apps/storybook/.storybook/main.ts

@@ -8,7 +8,10 @@ const require = createRequire(import.meta.url);
 
 const config: StorybookConfig = {
     stories: ['../../../packages/**!(node_modules|dist)/src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-    addons: [getAbsolutePath('@storybook/addon-docs')],
+    addons: [
+        getAbsolutePath('@storybook/addon-docs'),
+        getAbsolutePath('storybook-addon-pseudo-states'),
+    ],
 
     core: {
         builder: getAbsolutePath('@storybook/builder-vite'),

apps/storybook/package.json

@@ -27,6 +27,7 @@
         "eslint": "catalog:",
         "globals": "^16.5.0",
         "storybook": "^9.1.20",
+        "storybook-addon-pseudo-states": "9.1.20",
         "typescript": "catalog:",
         "typescript-eslint": "^8.59.4",
         "vite": "^7.3.3"

packages/core/src/components/button/button.css.ts

@@ -1,7 +1,6 @@
 import { createVar } from '@vanilla-extract/css';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
-import { interaction } from '~/styles/mixins/interactions.css';
 import { componentRecipe } from '~/styles/mixins/layer-style.css';
 import { when } from '~/styles/mixins/logical-states';
 import { typography } from '~/styles/mixins/typography.css';
@@ -17,8 +16,6 @@ const variables = {
 
 export const root = componentRecipe({
     base: [
-        interaction(),
-
         {
             display: 'inline-flex',
             alignItems: 'center',

packages/core/src/components/button/button.tsx

@@ -7,6 +7,7 @@ import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VaporUIComponentProps } from '~/utils/types';
 
+import { Interaction } from '../interaction';
 import type { ButtonVariants } from './button.css';
 import * as styles from './button.css';
 
@@ -22,11 +23,13 @@ export const Button = forwardRef<HTMLElement, Button.Props>((props, ref) => {
     ]);
 
     return (
-        <BaseButton
-            ref={ref}
-            className={cn(styles.root(variantsProps), className)}
-            {...otherProps}
-        />
+        <Interaction>
+            <BaseButton
+                ref={ref}
+                className={cn(styles.root(variantsProps), className)}
+                {...otherProps}
+            />
+        </Interaction>
     );
 });
 Button.displayName = 'Button';

packages/core/src/components/checkbox/checkbox.css.ts

@@ -1,7 +1,6 @@
 import { createVar } from '@vanilla-extract/css';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
-import { interaction } from '~/styles/mixins/interactions.css';
 import { componentRecipe, componentStyle } from '~/styles/mixins/layer-style.css';
 import { when } from '~/styles/mixins/logical-states';
 import { vars } from '~/styles/themes.css';
@@ -10,7 +9,6 @@ const boxShadowColor = createVar('box-shadow-color');
 
 export const root = componentRecipe({
     base: [
-        interaction(),
         {
             position: 'relative',
 

packages/core/src/components/checkbox/checkbox.tsx

@@ -14,6 +14,7 @@ import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VaporUIComponentProps } from '~/utils/types';
 
+import { Interaction } from '../interaction';
 import type { RootVariants } from './checkbox.css';
 import * as styles from './checkbox.css';
 
@@ -58,7 +59,11 @@ export const CheckboxRoot = forwardRef<HTMLElement, CheckboxRoot.Props>((props,
         },
     });
 
-    return <CheckboxProvider value={{ size, indeterminate }}>{root}</CheckboxProvider>;
+    return (
+        <CheckboxProvider value={{ size, indeterminate }}>
+            <Interaction>{root}</Interaction>
+        </CheckboxProvider>
+    );
 });
 CheckboxRoot.displayName = 'Checkbox.Root';
 

packages/core/src/components/interaction/index.ts

@@ -0,0 +1 @@
+export * from './interaction';

packages/core/src/components/interaction/interaction.css.ts

@@ -0,0 +1,94 @@
+import { createGlobalVar } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import { componentRecipe, componentStyle } from '~/styles/mixins/layer-style.css';
+import { vars } from '~/styles/themes.css';
+
+const variables = {
+    ratio: createGlobalVar('ratio'),
+    opacity: createGlobalVar('overlay-opacity'),
+};
+
+export const overlay = componentStyle({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transition: 'opacity 150ms ease',
+    opacity: variables.opacity,
+    border: 'none',
+    borderRadius: 'inherit',
+    backgroundColor: vars.color.gray[900],
+    pointerEvents: 'none',
+    width: '100%',
+    height: '100%',
+});
+
+export const root = componentRecipe({
+    base: {
+        position: 'relative',
+        selectors: {
+            '&:focus': { outline: 'none' },
+            '&:focus-visible': { outline: 'none' },
+        },
+        vars: {
+            [variables.ratio]: '0.08',
+            [variables.opacity]: '0',
+        },
+    },
+    defaultVariants: { scale: 'normal', type: 'default' },
+    variants: {
+        scale: {
+            normal: {},
+            light: { vars: { [variables.ratio]: '0.04' } },
+        },
+        type: {
+            default: {
+                selectors: {
+                    '&:active': {
+                        vars: { [variables.opacity]: calc.multiply(variables.ratio, 2) },
+                    },
+                    '&:focus-visible': {
+                        outline: `2px solid ${vars.color.foreground.normal[200]}`,
+                        outlineOffset: '2px',
+                    },
+                },
+                '@media': {
+                    '(hover: hover)': {
+                        selectors: {
+                            '&:hover': { vars: { [variables.opacity]: variables.ratio } },
+                            '&:active': {
+                                vars: { [variables.opacity]: calc.multiply(variables.ratio, 2) },
+                            },
+                        },
+                    },
+                },
+            },
+            form: {
+                transition: 'box-shadow 150ms cubic-bezier(.4,0,.2,1)',
+                selectors: {
+                    '&:focus': {
+                        boxShadow: `inset 0 0 0 0.0625rem ${vars.color.border.primary}`,
+                    },
+                },
+                '@media': {
+                    '(hover: hover)': {
+                        selectors: {
+                            '&:hover:not(:focus)': {
+                                boxShadow: `inset 0 0 0 0.0625rem color-mix(in srgb, ${vars.color.gray[900]} 32%, transparent)`,
+                            },
+                        },
+                    },
+                },
+            },
+            roving: {
+                selectors: {
+                    '&[data-highlighted]': { vars: { [variables.opacity]: '0.08' } },
+                    '&[data-highlighted]:active': { vars: { [variables.opacity]: '0.16' } },
+                },
+            },
+        },
+    },
+});
+
+export type InteractionVariants = NonNullable<RecipeVariants<typeof root>>;

packages/core/src/components/interaction/interaction.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '../box';
+import { VStack } from '../v-stack';
+import { Interaction } from './interaction';
+
+export default {
+    title: 'Interaction',
+    component: Interaction,
+    argTypes: {
+        scale: { control: 'inline-radio', options: ['normal', 'light'] },
+        type: { control: 'inline-radio', options: ['default', 'form', 'roving'] },
+    },
+} as Meta<typeof Interaction>;
+
+type Story = StoryObj<typeof Interaction>;
+
+export const Default: Story = {
+    render: (args) => (
+        <Interaction {...args}>
+            <Box $css={{ display: 'inline-block', padding: '16px', border: '1px solid' }}>
+                Interactive button
+            </Box>
+        </Interaction>
+    ),
+};
+
+export const TestBed: Story = {
+    parameters: {
+        pseudo: {
+            hover: ['#default-hover', '#light-hover', '#form-hover'],
+            focus: '#form-focus',
+            focusVisible: '#default-focus-visible',
+            active: ['#default-active', '#roving-active'],
+        },
+    },
+    render: (args) => {
+        const boxCss = { display: 'inline-block', padding: '16px', border: '1px solid' } as const;
+        return (
+            <VStack $css={{ gap: '$200' }}>
+                <Interaction {...args}>
+                    <Box $css={boxCss}>default / rest</Box>
+                </Interaction>
+                <Interaction {...args}>
+                    <Box id="default-hover" $css={boxCss}>
+                        default / hover
+                    </Box>
+                </Interaction>
+                <Interaction {...args}>
+                    <Box id="default-focus-visible" $css={boxCss}>
+                        default / focus-visible
+                    </Box>
+                </Interaction>
+                <Interaction {...args}>
+                    <Box id="default-active" $css={boxCss}>
+                        default / active
+                    </Box>
+                </Interaction>
+
+                <Interaction scale="light">
+                    <Box $css={boxCss}>light / rest</Box>
+                </Interaction>
+                <Interaction scale="light">
+                    <Box id="light-hover" $css={boxCss}>
+                        light / hover
+                    </Box>
+                </Interaction>
+
+                <Interaction type="form">
+                    <input type="text" placeholder="form / rest" />
+                </Interaction>
+                <Interaction type="form">
+                    <input id="form-hover" type="text" placeholder="form / hover" />
+                </Interaction>
+                <Interaction type="form">
+                    <input id="form-focus" type="text" placeholder="form / focus" />
+                </Interaction>
+
+                <Interaction type="roving">
+                    <Box $css={boxCss}>roving / rest</Box>
+                </Interaction>
+                <Interaction type="roving">
+                    <Box data-highlighted $css={boxCss}>
+                        roving / highlighted
+                    </Box>
+                </Interaction>
+                <Interaction type="roving">
+                    <Box id="roving-active" data-highlighted $css={boxCss}>
+                        roving / highlighted + active
+                    </Box>
+                </Interaction>
+            </VStack>
+        );
+    },
+};

packages/core/src/components/interaction/interaction.test.tsx

@@ -0,0 +1,70 @@
+import { createRef } from 'react';
+
+import { render } from '@testing-library/react';
+import { axe } from 'vitest-axe';
+
+import { Interaction } from './interaction';
+
+describe('Interaction', () => {
+    it('should have no a11y violations', async () => {
+        const rendered = render(
+            <Interaction>
+                <button>Test Interaction</button>
+            </Interaction>,
+        );
+        const result = await axe(rendered.container);
+
+        expect(result).toHaveNoViolations();
+    });
+
+    it('should forward refs correctly', () => {
+        const ref = createRef<HTMLDivElement>();
+        render(
+            <Interaction ref={ref}>
+                <button>Test Interaction</button>
+            </Interaction>,
+        );
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+
+    it('should apply custom class names', () => {
+        const customClassName = 'custom-interaction';
+        const rendered = render(
+            <Interaction data-testid="interaction" className={customClassName}>
+                <button>Test Interaction</button>
+            </Interaction>,
+        );
+        const interactionElement = rendered.queryByTestId('interaction');
+
+        expect(interactionElement).toHaveClass(customClassName);
+    });
+
+    it('should render children correctly', () => {
+        const rendered = render(
+            <Interaction data-testid="interaction">
+                <button>Child Element</button>
+            </Interaction>,
+        );
+        const childElement = rendered.getByText('Child Element');
+        const interactionElement = rendered.queryByTestId('interaction');
+
+        expect(childElement).toBeInTheDocument();
+        expect(interactionElement).toBeInTheDocument();
+    });
+
+    describe('prop: type', () => {
+        it('should not render children when type is form', () => {
+            const rendered = render(
+                <Interaction data-testid="interaction" type="form">
+                    <button>Child Element</button>
+                </Interaction>,
+            );
+
+            const interactionElement = rendered.queryByTestId('interaction');
+
+            expect(interactionElement).toBeNull();
+            expect(interactionElement).not.toBeInTheDocument();
+        });
+    });
+});