feat(Toggle): add new Toggle, ToggleGroup component

.changeset/famous-bugs-guess.md

@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': minor
+---
+
+add new `ToggleGroup` component

.changeset/tricky-files-cheat.md

@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': minor
+---
+
+add new `Toggle` component

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

@@ -116,26 +116,26 @@ export const popup = componentStyle({
 // width/height directly for 1:1 direct manipulation (no transition).
 export const resizeHandle = componentStyle({
     position: 'absolute',
+    zIndex: 1,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 1,
     touchAction: 'none',
 
     selectors: {
         // Vertical sheets (left/right) → col-resize, full height.
         '&[data-side="left"], &[data-side="right"]': {
             top: 0,
             bottom: 0,
-            width: vars.size.dimension[300],
             cursor: 'col-resize',
+            width: vars.size.dimension[300],
         },
         // Horizontal sheets (top/bottom) → row-resize, full width.
         '&[data-side="top"], &[data-side="bottom"]': {
-            left: 0,
             right: 0,
-            height: vars.size.dimension[300],
+            left: 0,
             cursor: 'row-resize',
+            height: vars.size.dimension[300],
         },
         // Inner edge placement: handle sits on the side facing the viewport center.
         // The grip bar's thin axis pins to the sheet's exposed edge (the drag boundary),
@@ -158,8 +158,8 @@ export const resizeHandle = componentStyle({
 export const resizeHandleGrip = componentStyle([
     interaction(),
     {
-        backgroundColor: vars.color.foreground.hint[100],
         borderRadius: vars.size.borderRadius[300],
+        backgroundColor: vars.color.foreground.hint[100],
 
         selectors: {
             '&[data-side="left"], &[data-side="right"]': {

packages/core/src/components/toggle-group/index.ts

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

packages/core/src/components/toggle-group/toggle-group.css.ts

@@ -0,0 +1,19 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import { componentRecipe } from '~/styles/mixins/layer-style.css';
+import { vars } from '~/styles/themes.css';
+
+export const root = componentRecipe({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: vars.size.space['050'],
+    },
+
+    defaultVariants: { size: 'md' },
+    variants: {
+        size: { sm: {}, md: {}, lg: {}, xl: {} },
+    },
+});
+
+export type RootVariants = NonNullable<RecipeVariants<typeof root>>;

packages/core/src/components/toggle-group/toggle-group.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HeartIcon } from '@vapor-ui/icons';
+
+import { ToggleGroup } from '.';
+import { Grid } from '../grid';
+import { Toggle } from '../toggle';
+import { VStack } from '../v-stack';
+
+export default {
+    title: 'ToggleGroup',
+    component: ToggleGroup,
+    argTypes: {
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['sm', 'md', 'lg', 'xl'],
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+    },
+} satisfies Meta<typeof ToggleGroup>;
+
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Default: Story = {
+    render: (args) => {
+        return (
+            <ToggleGroup {...args}>
+                <Toggle value="item1">
+                    <HeartIcon />
+                </Toggle>
+                <Toggle value="item2">
+                    <HeartIcon />
+                </Toggle>
+                <Toggle value="item3">
+                    <HeartIcon />
+                </Toggle>
+
+                <Toggle value="item4">
+                    <HeartIcon />
+                </Toggle>
+                <Toggle value="item5">
+                    <HeartIcon />
+                </Toggle>
+                <Toggle value="item6">
+                    <HeartIcon />
+                </Toggle>
+            </ToggleGroup>
+        );
+    },
+};
+
+export const TestBed: Story = {
+    render: (args) => {
+        return (
+            <Grid.Root templateColumns="repeat(2, 1fr)" templateRows="auto" $css={{ gap: '$100' }}>
+                <Grid.Item>
+                    <VStack $css={{ gap: '$100', alignItems: 'flex-start' }}>
+                        {renderCases({ size: 'sm' })}
+                        {renderCases({ size: 'md' })}
+                        {renderCases({ size: 'lg' })}
+                        {renderCases({ size: 'xl' })}
+                    </VStack>
+                </Grid.Item>
+
+                <Grid.Item>
+                    <VStack $css={{ gap: '$100', alignItems: 'flex-start' }}>
+                        {renderCases({ size: 'sm', disabled: true })}
+                        {renderCases({ size: 'md', disabled: true })}
+                        {renderCases({ size: 'lg', disabled: true })}
+                        {renderCases({ size: 'xl', disabled: true })}
+                    </VStack>
+                </Grid.Item>
+
+                <ToggleGroup {...args} value={['item3', 'item4']}>
+                    <Toggle value="item1">
+                        <HeartIcon />
+                    </Toggle>
+                    <Toggle value="item2" variant="accent">
+                        <HeartIcon />
+                    </Toggle>
+                    <Toggle value="item3">
+                        <HeartIcon />
+                    </Toggle>
+
+                    <Toggle value="item4" variant="accent">
+                        <HeartIcon />
+                    </Toggle>
+                    <Toggle value="item5">
+                        <HeartIcon />
+                    </Toggle>
+                    <Toggle value="item6" variant="accent">
+                        <HeartIcon />
+                    </Toggle>
+                </ToggleGroup>
+            </Grid.Root>
+        );
+    },
+};
+
+const renderCases = ({ size, disabled }: ToggleGroup.Props) => {
+    return (
+        <ToggleGroup size={size} value={['item3']} disabled={disabled}>
+            <Toggle value="item1">
+                <HeartIcon />
+            </Toggle>
+            <Toggle value="item2">
+                <HeartIcon />
+            </Toggle>
+            <Toggle value="item3">
+                <HeartIcon />
+            </Toggle>
+        </ToggleGroup>
+    );
+};

packages/core/src/components/toggle-group/toggle-group.test.tsx

@@ -0,0 +1,195 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'vitest-axe';
+
+import { ToggleGroup } from '.';
+import { Toggle } from '../toggle';
+
+const ToggleGroupTest = (props: ToggleGroup.Props) => (
+    <ToggleGroup {...props}>
+        <Toggle value="a" aria-label="a" />
+        <Toggle value="b" aria-label="b" />
+        <Toggle value="c" aria-label="c" />
+    </ToggleGroup>
+);
+
+describe('<ToggleGroup>', () => {
+    it('should have no a11y violations', async () => {
+        const rendered = render(<ToggleGroupTest />);
+        const result = await axe(rendered.container);
+
+        expect(result).toHaveNoViolations();
+    });
+
+    it('should press a toggle when clicked', async () => {
+        const rendered = render(<ToggleGroupTest />);
+        const toggleA = rendered.getByRole('button', { name: 'a' });
+
+        await userEvent.click(toggleA);
+
+        expect(toggleA).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('should unpress the previously pressed toggle when another is clicked', async () => {
+        const rendered = render(<ToggleGroupTest />);
+        const toggleA = rendered.getByRole('button', { name: 'a' });
+        const toggleB = rendered.getByRole('button', { name: 'b' });
+
+        await userEvent.click(toggleA);
+        await userEvent.click(toggleB);
+
+        expect(toggleA).toHaveAttribute('aria-pressed', 'false');
+        expect(toggleB).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    describe('prop: defaultValue', () => {
+        it('should mark the matching toggle as pressed', () => {
+            const rendered = render(<ToggleGroupTest defaultValue={['b']} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+
+            expect(toggleA).toHaveAttribute('aria-pressed', 'false');
+            expect(toggleB).toHaveAttribute('aria-pressed', 'true');
+        });
+    });
+
+    describe('prop: value', () => {
+        it('should reflect the controlled value', () => {
+            const rendered = render(<ToggleGroupTest value={['c']} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleC = rendered.getByRole('button', { name: 'c' });
+
+            expect(toggleA).toHaveAttribute('aria-pressed', 'false');
+            expect(toggleC).toHaveAttribute('aria-pressed', 'true');
+        });
+
+        it('should not change pressed state without onValueChange update', async () => {
+            const rendered = render(<ToggleGroupTest value={[]} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+
+            await userEvent.click(toggleA);
+
+            expect(toggleA).toHaveAttribute('aria-pressed', 'false');
+        });
+    });
+
+    describe('prop: onValueChange', () => {
+        it('should call onValueChange with the new value array when clicked', async () => {
+            const onValueChange = vi.fn();
+            const rendered = render(<ToggleGroupTest onValueChange={onValueChange} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+
+            await userEvent.click(toggleA);
+
+            expect(onValueChange).toHaveBeenCalledTimes(1);
+            expect(onValueChange).toHaveBeenCalledWith(['a'], expect.anything());
+        });
+
+        it('should call onValueChange with an empty array when the pressed toggle is clicked again', async () => {
+            const onValueChange = vi.fn();
+            const rendered = render(
+                <ToggleGroupTest defaultValue={['a']} onValueChange={onValueChange} />,
+            );
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+
+            await userEvent.click(toggleA);
+
+            expect(toggleA).toHaveAttribute('aria-pressed', 'false');
+            expect(onValueChange).toHaveBeenCalledTimes(1);
+            expect(onValueChange).toHaveBeenCalledWith([], expect.anything());
+        });
+    });
+
+    describe('prop: multiple', () => {
+        it('should allow multiple toggles to be pressed at the same time', async () => {
+            const rendered = render(<ToggleGroupTest multiple />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+
+            await userEvent.click(toggleA);
+            await userEvent.click(toggleB);
+
+            expect(toggleA).toHaveAttribute('aria-pressed', 'true');
+            expect(toggleB).toHaveAttribute('aria-pressed', 'true');
+        });
+
+        it('should call onValueChange with the new value array when multiple toggles are pressed', async () => {
+            const onValueChange = vi.fn();
+            const rendered = render(<ToggleGroupTest multiple onValueChange={onValueChange} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+
+            await userEvent.click(toggleA);
+            await userEvent.click(toggleB);
+
+            expect(onValueChange).toHaveBeenCalledTimes(2);
+            expect(onValueChange).toHaveBeenNthCalledWith(1, ['a'], expect.anything());
+            expect(onValueChange).toHaveBeenNthCalledWith(2, ['a', 'b'], expect.anything());
+        });
+    });
+
+    describe('prop: disabled', () => {
+        it('should disable all toggles', () => {
+            const rendered = render(<ToggleGroupTest disabled />);
+            const toggles = rendered.getAllByRole('button');
+
+            toggles.forEach((toggle) => {
+                expect(toggle).toBeDisabled();
+            });
+        });
+
+        it('should not call onValueChange when a toggle is clicked', async () => {
+            const onValueChange = vi.fn();
+            const rendered = render(<ToggleGroupTest disabled onValueChange={onValueChange} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+
+            await userEvent.click(toggleA);
+
+            expect(onValueChange).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('keyboard navigation', () => {
+        it('should focus the next toggle when pressing ArrowRight', async () => {
+            const rendered = render(<ToggleGroupTest />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+
+            toggleA.focus();
+            await userEvent.keyboard('[ArrowRight]');
+
+            expect(toggleB).toHaveFocus();
+        });
+
+        it('should focus the previous toggle when pressing ArrowLeft', async () => {
+            const rendered = render(<ToggleGroupTest />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+
+            toggleB.focus();
+            await userEvent.keyboard('[ArrowLeft]');
+
+            expect(toggleA).toHaveFocus();
+        });
+
+        it('should focus multiple toggles when pressing ArrowRight multiple times', async () => {
+            const onValueChange = vi.fn();
+            const rendered = render(<ToggleGroupTest multiple onValueChange={onValueChange} />);
+            const toggleA = rendered.getByRole('button', { name: 'a' });
+            const toggleB = rendered.getByRole('button', { name: 'b' });
+            const toggleC = rendered.getByRole('button', { name: 'c' });
+
+            toggleA.focus();
+            await userEvent.keyboard('[ArrowRight]');
+            await userEvent.keyboard('[Space]');
+            await userEvent.keyboard('[ArrowRight]');
+            await userEvent.keyboard('[Space]');
+
+            expect(toggleB).toHaveAttribute('aria-pressed', 'true');
+            expect(toggleC).toHaveAttribute('aria-pressed', 'true');
+            expect(onValueChange).toHaveBeenCalledTimes(2);
+            expect(onValueChange).toHaveBeenNthCalledWith(1, ['b'], expect.anything());
+            expect(onValueChange).toHaveBeenNthCalledWith(2, ['b', 'c'], expect.anything());
+        });
+    });
+});