@12-apps/ui 1.5.0 → 1.5.1

package/src/components/form/Toggle/Toggle.test.stories.tsx

@@ -1,1159 +0,0 @@
-import { Box, Paper, useTheme } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Heart, Pause,Play, Settings, Star } from 'lucide-react';
-import React, { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { Toggle } from './Toggle';
-
-const meta: Meta<typeof Toggle> = {
-  title: 'Form/Toggle/Tests',
-  component: Toggle,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-    docs: { source: { type: 'code' } },
-  },
-  tags: ['autodocs', 'test', 'component:Toggle'],
-};
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-// Basic Interaction Tests
-export const BasicInteraction: Story = {
-  render: function BasicInteractionRender() {
-    const [selected, setSelected] = useState(false);
-    const handleChange = fn(() => setSelected(!selected));
-
-    return (
-      <div data-testid="basic-interaction-container">
-        <Toggle
-          data-testid="basic-toggle"
-          selected={selected}
-          onChange={handleChange}
-          value="test-toggle"
-        >
-          Click Me
-        </Toggle>
-        <div data-testid="selection-state" aria-live="polite">
-          {selected ? 'Selected' : 'Not Selected'}
-        </div>
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const toggle = canvas.getByTestId('basic-toggle');
-    const stateDiv = canvas.getByTestId('selection-state');
-
-    // Verify initial state
-    expect(stateDiv).toHaveTextContent('Not Selected');
-    expect(toggle).toHaveAttribute('aria-pressed', 'false');
-
-    // Click to select
-    await userEvent.click(toggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Selected');
-      expect(toggle).toHaveAttribute('aria-pressed', 'true');
-    });
-
-    // Click to deselect
-    await userEvent.click(toggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Not Selected');
-      expect(toggle).toHaveAttribute('aria-pressed', 'false');
-    });
-  },
-};
-
-// Form Interaction Tests
-export const FormInteraction: Story = {
-  render: function FormInteractionRender() {
-    const [formData, setFormData] = useState({
-      notifications: false,
-      marketing: true,
-      newsletter: false,
-    });
-
-    const handleSubmit = fn((e: React.FormEvent) => {
-      e.preventDefault();
-      // Form submitted with data: formData
-    });
-
-    return (
-      <form onSubmit={handleSubmit} data-testid="toggle-form">
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 300 }}>
-          <Toggle
-            data-testid="notifications-toggle"
-            selected={formData.notifications}
-            onChange={() =>
-              setFormData((prev) => ({ ...prev, notifications: !prev.notifications }))
-            }
-            value="notifications"
-            icon={<Star size={16} />}
-          >
-            Notifications
-          </Toggle>
-
-          <Toggle
-            data-testid="marketing-toggle"
-            selected={formData.marketing}
-            onChange={() => setFormData((prev) => ({ ...prev, marketing: !prev.marketing }))}
-            value="marketing"
-            variant="outline"
-            color="secondary"
-          >
-            Marketing Emails
-          </Toggle>
-
-          <Toggle
-            data-testid="newsletter-toggle"
-            selected={formData.newsletter}
-            onChange={() => setFormData((prev) => ({ ...prev, newsletter: !prev.newsletter }))}
-            value="newsletter"
-            variant="soft"
-            color="success"
-          >
-            Newsletter
-          </Toggle>
-
-          <button type="submit" data-testid="submit-button">
-            Save Preferences
-          </button>
-
-          <div data-testid="form-state" aria-live="polite">
-            {JSON.stringify(formData)}
-          </div>
-        </Box>
-      </form>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const notificationsToggle = canvas.getByTestId('notifications-toggle');
-    const marketingToggle = canvas.getByTestId('marketing-toggle');
-    const newsletterToggle = canvas.getByTestId('newsletter-toggle');
-    const submitButton = canvas.getByTestId('submit-button');
-    const formState = canvas.getByTestId('form-state');
-
-    // Verify initial form state
-    expect(formState).toHaveTextContent(
-      '{"notifications":false,"marketing":true,"newsletter":false}',
-    );
-    expect(notificationsToggle).toHaveAttribute('aria-pressed', 'false');
-    expect(marketingToggle).toHaveAttribute('aria-pressed', 'true');
-    expect(newsletterToggle).toHaveAttribute('aria-pressed', 'false');
-
-    // Toggle notifications on
-    await userEvent.click(notificationsToggle);
-    await waitFor(() => {
-      expect(formState).toHaveTextContent(
-        '{"notifications":true,"marketing":true,"newsletter":false}',
-      );
-    });
-
-    // Toggle marketing off
-    await userEvent.click(marketingToggle);
-    await waitFor(() => {
-      expect(formState).toHaveTextContent(
-        '{"notifications":true,"marketing":false,"newsletter":false}',
-      );
-    });
-
-    // Toggle newsletter on
-    await userEvent.click(newsletterToggle);
-    await waitFor(() => {
-      expect(formState).toHaveTextContent(
-        '{"notifications":true,"marketing":false,"newsletter":true}',
-      );
-    });
-
-    // Test form submission
-    await userEvent.click(submitButton);
-    // Verify no errors occurred
-    expect(formState).toBeInTheDocument();
-  },
-};
-
-// Keyboard Navigation Tests
-export const KeyboardNavigation: Story = {
-  render: function KeyboardNavigationRender() {
-    const [selectedStates, setSelectedStates] = useState({
-      toggle1: false,
-      toggle2: false,
-      toggle3: false,
-    });
-
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 300 }}>
-        <div
-          data-testid="keyboard-instructions"
-          role="region"
-          aria-label="Keyboard Navigation Test"
-        >
-          Use Tab to navigate, Space/Enter to toggle
-        </div>
-
-        <Toggle
-          data-testid="keyboard-toggle-1"
-          selected={selectedStates.toggle1}
-          onChange={() => setSelectedStates((prev) => ({ ...prev, toggle1: !prev.toggle1 }))}
-          value="toggle1"
-        >
-          First Toggle
-        </Toggle>
-
-        <Toggle
-          data-testid="keyboard-toggle-2"
-          selected={selectedStates.toggle2}
-          onChange={() => setSelectedStates((prev) => ({ ...prev, toggle2: !prev.toggle2 }))}
-          value="toggle2"
-          variant="outline"
-        >
-          Second Toggle
-        </Toggle>
-
-        <Toggle
-          data-testid="keyboard-toggle-3"
-          selected={selectedStates.toggle3}
-          onChange={() => setSelectedStates((prev) => ({ ...prev, toggle3: !prev.toggle3 }))}
-          value="toggle3"
-          disabled
-        >
-          Disabled Toggle
-        </Toggle>
-
-        <div data-testid="keyboard-state" aria-live="polite">
-          {JSON.stringify(selectedStates)}
-        </div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const toggle1 = canvas.getByTestId('keyboard-toggle-1');
-    const toggle2 = canvas.getByTestId('keyboard-toggle-2');
-    const toggle3 = canvas.getByTestId('keyboard-toggle-3');
-    const stateDiv = canvas.getByTestId('keyboard-state');
-
-    // Test Tab navigation
-    await userEvent.click(toggle1);
-    await waitFor(() => expect(toggle1).toHaveFocus());
-
-    await userEvent.tab();
-    await waitFor(() => expect(toggle2).toHaveFocus());
-
-    // Disabled toggle won't receive focus as it has tabindex="-1"
-    // This is expected behavior for disabled MUI ToggleButtons
-    await userEvent.tab();
-    // Focus should skip the disabled toggle
-    await waitFor(() => expect(document.activeElement).not.toBe(toggle3));
-
-    // Test Space key activation
-    await userEvent.click(toggle1);
-    expect(stateDiv).toHaveTextContent('{"toggle1":false,"toggle2":false,"toggle3":false}');
-
-    await userEvent.keyboard(' ');
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('{"toggle1":true,"toggle2":false,"toggle3":false}');
-    });
-
-    // Test Enter key activation
-    await userEvent.click(toggle2);
-    await userEvent.keyboard('{Enter}');
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('{"toggle1":true,"toggle2":true,"toggle3":false}');
-    });
-
-    // Test disabled toggle doesn't respond
-    await userEvent.click(toggle3);
-    await userEvent.keyboard(' ');
-    await userEvent.keyboard('{Enter}');
-    // State should remain unchanged
-    expect(stateDiv).toHaveTextContent('{"toggle1":true,"toggle2":true,"toggle3":false}');
-  },
-};
-
-// Screen Reader Tests
-export const ScreenReader: Story = {
-  render: function ScreenReaderRender() {
-    const [settings, setSettings] = useState({
-      darkMode: false,
-      highContrast: false,
-      screenReader: true,
-    });
-
-    return (
-      <Box
-        sx={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 300 }}
-        role="group"
-        aria-labelledby="accessibility-settings"
-      >
-        <h3 id="accessibility-settings">Accessibility Settings</h3>
-
-        <Toggle
-          data-testid="dark-mode-toggle"
-          selected={settings.darkMode}
-          onChange={() => setSettings((prev) => ({ ...prev, darkMode: !prev.darkMode }))}
-          value="darkMode"
-          aria-describedby="dark-mode-description"
-        >
-          Dark Mode
-        </Toggle>
-        <div id="dark-mode-description" className="sr-only">
-          Enable dark theme for reduced eye strain
-        </div>
-
-        <Toggle
-          data-testid="high-contrast-toggle"
-          selected={settings.highContrast}
-          onChange={() => setSettings((prev) => ({ ...prev, highContrast: !prev.highContrast }))}
-          value="highContrast"
-          aria-describedby="high-contrast-description"
-          variant="outline"
-        >
-          High Contrast
-        </Toggle>
-        <div id="high-contrast-description" className="sr-only">
-          Increase contrast for better visibility
-        </div>
-
-        <Toggle
-          data-testid="screen-reader-toggle"
-          selected={settings.screenReader}
-          onChange={() => setSettings((prev) => ({ ...prev, screenReader: !prev.screenReader }))}
-          value="screenReader"
-          aria-describedby="screen-reader-description"
-          variant="soft"
-          color="success"
-        >
-          Screen Reader Support
-        </Toggle>
-        <div id="screen-reader-description" className="sr-only">
-          Enable enhanced screen reader compatibility
-        </div>
-
-        <div data-testid="accessibility-status" role="status" aria-live="polite" aria-atomic="true">
-          Settings:{' '}
-          {Object.entries(settings)
-            .filter(([, enabled]) => enabled)
-            .map(([key]) => key)
-            .join(', ') || 'None selected'}
-        </div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const darkModeToggle = canvas.getByTestId('dark-mode-toggle');
-    const highContrastToggle = canvas.getByTestId('high-contrast-toggle');
-    const screenReaderToggle = canvas.getByTestId('screen-reader-toggle');
-    const statusDiv = canvas.getByTestId('accessibility-status');
-
-    // Verify ARIA attributes
-    // MUI ToggleButton uses role="button" internally
-    expect(darkModeToggle).toHaveAttribute('aria-pressed', 'false');
-    expect(darkModeToggle).toHaveAttribute('aria-describedby', 'dark-mode-description');
-
-    expect(highContrastToggle).toHaveAttribute('aria-pressed', 'false');
-    expect(screenReaderToggle).toHaveAttribute('aria-pressed', 'true');
-
-    // Test status updates
-    expect(statusDiv).toHaveTextContent('Settings: screenReader');
-
-    await userEvent.click(darkModeToggle);
-    await waitFor(() => {
-      expect(darkModeToggle).toHaveAttribute('aria-pressed', 'true');
-      expect(statusDiv).toHaveTextContent('Settings: darkMode, screenReader');
-    });
-
-    await userEvent.click(highContrastToggle);
-    await waitFor(() => {
-      expect(statusDiv).toHaveTextContent('Settings: darkMode, highContrast, screenReader');
-    });
-  },
-};
-
-// Focus Management Tests
-export const FocusManagement: Story = {
-  render: function FocusManagementRender() {
-    const [activeToggle, setActiveToggle] = useState<string | null>(null);
-    const [toggleStates, setToggleStates] = useState({
-      media: false,
-      social: false,
-      notifications: false,
-    });
-
-    const handleFocus = (toggleName: string) => {
-      setActiveToggle(toggleName);
-    };
-
-    const handleBlur = () => {
-      setActiveToggle(null);
-    };
-
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 300 }}>
-        <div data-testid="focus-indicator" aria-live="polite">
-          Focused: {activeToggle || 'None'}
-        </div>
-
-        <Toggle
-          data-testid="media-toggle"
-          selected={toggleStates.media}
-          onChange={() => setToggleStates((prev) => ({ ...prev, media: !prev.media }))}
-          onFocus={() => handleFocus('Media Controls')}
-          onBlur={handleBlur}
-          value="media"
-          icon={<Play size={16} />}
-        >
-          Media Controls
-        </Toggle>
-
-        <Toggle
-          data-testid="social-toggle"
-          selected={toggleStates.social}
-          onChange={() => setToggleStates((prev) => ({ ...prev, social: !prev.social }))}
-          onFocus={() => handleFocus('Social Sharing')}
-          onBlur={handleBlur}
-          value="social"
-          variant="outline"
-          color="secondary"
-          icon={<Heart size={16} />}
-        >
-          Social Sharing
-        </Toggle>
-
-        <Toggle
-          data-testid="notifications-toggle"
-          selected={toggleStates.notifications}
-          onChange={() =>
-            setToggleStates((prev) => ({ ...prev, notifications: !prev.notifications }))
-          }
-          onFocus={() => handleFocus('Notifications')}
-          onBlur={handleBlur}
-          value="notifications"
-          variant="soft"
-          color="warning"
-        >
-          Notifications
-        </Toggle>
-
-        <div data-testid="toggle-states">{JSON.stringify(toggleStates)}</div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const mediaToggle = canvas.getByTestId('media-toggle');
-    const socialToggle = canvas.getByTestId('social-toggle');
-    const notificationsToggle = canvas.getByTestId('notifications-toggle');
-    const focusIndicator = canvas.getByTestId('focus-indicator');
-
-    // Test focus events
-    expect(focusIndicator).toHaveTextContent('Focused: None');
-
-    await userEvent.click(mediaToggle);
-    await userEvent.click(mediaToggle);
-    await waitFor(() => waitFor(() => {
-      expect(focusIndicator).toHaveTextContent('Focused: Media Controls');
-    }))
-
-    await userEvent.click(socialToggle);
-    await waitFor(() => waitFor(() => {
-      expect(focusIndicator).toHaveTextContent('Focused: Social Sharing');
-    }))
-
-    await userEvent.click(notificationsToggle);
-    await waitFor(() => waitFor(() => {
-      expect(focusIndicator).toHaveTextContent('Focused: Notifications');
-    }))
-
-    // Test blur by clicking outside
-    await userEvent.click(focusIndicator);
-    await waitFor(() => {
-      expect(focusIndicator).toHaveTextContent('Focused: None');
-    });
-  },
-};
-
-// Responsive Design Tests
-export const ResponsiveDesign: Story = {
-  render: function ResponsiveDesignRender() {
-    const [mobileSelected, setMobileSelected] = useState(false);
-    const [tabletSelected, setTabletSelected] = useState(false);
-    const [desktopSelected, setDesktopSelected] = useState(false);
-
-    return (
-      <Box data-testid="responsive-container">
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
-          <h4>Mobile View (xs)</h4>
-          <Box sx={{ width: 320, border: '1px solid #ccc', p: 2 }}>
-            <Toggle
-              data-testid="mobile-toggle"
-              selected={mobileSelected}
-              onChange={() => setMobileSelected(!mobileSelected)}
-              size="sm"
-              fullWidth
-              value="mobile"
-            >
-              Mobile Toggle
-            </Toggle>
-          </Box>
-        </Box>
-
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
-          <h4>Tablet View (md)</h4>
-          <Box sx={{ width: 768, border: '1px solid #ccc', p: 2 }}>
-            <Toggle
-              data-testid="tablet-toggle"
-              selected={tabletSelected}
-              onChange={() => setTabletSelected(!tabletSelected)}
-              size="md"
-              value="tablet"
-              icon={<Star size={16} />}
-            >
-              Tablet Toggle
-            </Toggle>
-          </Box>
-        </Box>
-
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}>
-          <h4>Desktop View (lg)</h4>
-          <Box sx={{ width: 1024, border: '1px solid #ccc', p: 2 }}>
-            <Toggle
-              data-testid="desktop-toggle"
-              selected={desktopSelected}
-              onChange={() => setDesktopSelected(!desktopSelected)}
-              size="lg"
-              value="desktop"
-              variant="outline"
-              color="primary"
-              icon={<Settings size={18} />}
-            >
-              Desktop Toggle
-            </Toggle>
-          </Box>
-        </Box>
-
-        <div data-testid="responsive-state">
-          Mobile: {mobileSelected.toString()}, Tablet: {tabletSelected.toString()}, Desktop:{' '}
-          {desktopSelected.toString()}
-        </div>
-      </Box>
-    );
-  },
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: { name: 'Mobile', styles: { width: '375px', height: '667px' } },
-        tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
-        desktop: { name: 'Desktop', styles: { width: '1024px', height: '768px' } },
-      },
-      defaultViewport: 'desktop',
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const mobileToggle = canvas.getByTestId('mobile-toggle');
-    const tabletToggle = canvas.getByTestId('tablet-toggle');
-    const desktopToggle = canvas.getByTestId('desktop-toggle');
-    const stateDiv = canvas.getByTestId('responsive-state');
-
-    // Test toggles work in all viewport sizes
-    expect(stateDiv).toHaveTextContent('Mobile: false, Tablet: false, Desktop: false');
-
-    await userEvent.click(mobileToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Mobile: true, Tablet: false, Desktop: false');
-    });
-
-    await userEvent.click(tabletToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Mobile: true, Tablet: true, Desktop: false');
-    });
-
-    await userEvent.click(desktopToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Mobile: true, Tablet: true, Desktop: true');
-    });
-  },
-};
-
-// Theme Variations Tests
-export const ThemeVariations: Story = {
-  render: function ThemeVariationsRender() {
-    const theme = useTheme();
-    const [selected, setSelected] = useState(false);
-
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-        <div data-testid="theme-info">Current theme mode: {theme.palette.mode}</div>
-
-        <Paper elevation={0} sx={{ p: 2, backgroundColor: 'background.default' }}>
-          <h4>Light Theme</h4>
-          <Toggle
-            data-testid="light-theme-toggle"
-            selected={selected}
-            onChange={() => setSelected(!selected)}
-            value="light"
-          >
-            Light Theme Toggle
-          </Toggle>
-        </Paper>
-
-        <Paper elevation={2} sx={{ p: 2, backgroundColor: 'background.paper' }}>
-          <h4>Paper Background</h4>
-          <Toggle
-            data-testid="paper-theme-toggle"
-            selected={selected}
-            onChange={() => setSelected(!selected)}
-            value="paper"
-            variant="outline"
-            color="secondary"
-          >
-            Paper Theme Toggle
-          </Toggle>
-        </Paper>
-
-        <Box
-          sx={{
-            p: 2,
-            backgroundColor: 'primary.main',
-            color: 'primary.contrastText',
-            borderRadius: 1,
-          }}
-        >
-          <h4>Primary Background</h4>
-          <Toggle
-            data-testid="primary-theme-toggle"
-            selected={selected}
-            onChange={() => setSelected(!selected)}
-            value="primary"
-            variant="soft"
-            color="secondary"
-          >
-            Contrast Toggle
-          </Toggle>
-        </Box>
-
-        <div data-testid="theme-state">Selected: {selected.toString()}</div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const lightToggle = canvas.getByTestId('light-theme-toggle');
-    const paperToggle = canvas.getByTestId('paper-theme-toggle');
-    const primaryToggle = canvas.getByTestId('primary-theme-toggle');
-    const stateDiv = canvas.getByTestId('theme-state');
-
-    // Test all theme variants work
-    expect(stateDiv).toHaveTextContent('Selected: false');
-
-    await userEvent.click(lightToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Selected: true');
-    });
-
-    // Test other toggles sync with state
-    await userEvent.click(paperToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Selected: false');
-    });
-
-    await userEvent.click(primaryToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('Selected: true');
-    });
-  },
-};
-
-// Visual States Tests
-export const VisualStates: Story = {
-  render: function VisualStatesRender() {
-    const [states, setStates] = useState({
-      normal: false,
-      hover: false,
-      focus: false,
-      active: false,
-      selected: true,
-      disabled: false,
-    });
-
-    return (
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
-          gap: 2,
-        }}
-      >
-        <Box>
-          <h4>Normal State</h4>
-          <Toggle
-            data-testid="normal-toggle"
-            selected={states.normal}
-            onChange={() => setStates((prev) => ({ ...prev, normal: !prev.normal }))}
-            value="normal"
-          >
-            Normal Toggle
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h4>Hover State</h4>
-          <Toggle
-            data-testid="hover-toggle"
-            selected={states.hover}
-            onChange={() => setStates((prev) => ({ ...prev, hover: !prev.hover }))}
-            value="hover"
-            color="secondary"
-          >
-            Hover Toggle
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h4>Focus State</h4>
-          <Toggle
-            data-testid="focus-toggle"
-            selected={states.focus}
-            onChange={() => setStates((prev) => ({ ...prev, focus: !prev.focus }))}
-            value="focus"
-            variant="outline"
-            color="success"
-          >
-            Focus Toggle
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h4>Selected State</h4>
-          <Toggle
-            data-testid="selected-toggle"
-            selected={states.selected}
-            onChange={() => setStates((prev) => ({ ...prev, selected: !prev.selected }))}
-            value="selected"
-            color="warning"
-          >
-            Selected Toggle
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h4>Disabled State</h4>
-          <Toggle
-            data-testid="disabled-toggle"
-            selected={states.disabled}
-            disabled
-            value="disabled"
-          >
-            Disabled Toggle
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h4>Glass Effect</h4>
-          <Toggle data-testid="glass-toggle" selected={false} glass value="glass" color="primary">
-            Glass Toggle
-          </Toggle>
-        </Box>
-
-        <div data-testid="visual-states">{JSON.stringify(states)}</div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const normalToggle = canvas.getByTestId('normal-toggle');
-    const hoverToggle = canvas.getByTestId('hover-toggle');
-    const focusToggle = canvas.getByTestId('focus-toggle');
-    const selectedToggle = canvas.getByTestId('selected-toggle');
-    const disabledToggle = canvas.getByTestId('disabled-toggle');
-    const glassToggle = canvas.getByTestId('glass-toggle');
-
-    // Test visual states render correctly
-    expect(normalToggle).toBeInTheDocument();
-    expect(hoverToggle).toBeInTheDocument();
-    expect(focusToggle).toBeInTheDocument();
-    expect(selectedToggle).toHaveAttribute('aria-pressed', 'true');
-    expect(disabledToggle).toBeDisabled();
-    expect(glassToggle).toBeInTheDocument();
-
-    // Test interactions
-    await userEvent.click(normalToggle);
-    expect(normalToggle).toHaveAttribute('aria-pressed', 'true');
-
-    // Test hover simulation
-    await userEvent.hover(hoverToggle);
-    await userEvent.click(hoverToggle);
-    expect(hoverToggle).toHaveAttribute('aria-pressed', 'true');
-
-    // Test focus
-    await userEvent.click(focusToggle);
-    await waitFor(() => expect(focusToggle).toHaveFocus());
-    await userEvent.keyboard(' ');
-    expect(focusToggle).toHaveAttribute('aria-pressed', 'true');
-  },
-};
-
-// Performance Tests
-export const Performance: Story = {
-  render: function PerformanceRender() {
-    const [toggles, setToggles] = useState(
-      Array(50)
-        .fill(false)
-        .map((_, index) => ({ id: index, selected: false })),
-    );
-
-    const toggleHandler = fn((id: number) => {
-      setToggles((prev) =>
-        prev.map((toggle) =>
-          toggle.id === id ? { ...toggle, selected: !toggle.selected } : toggle,
-        ),
-      );
-    });
-
-    return (
-      <Box data-testid="performance-container">
-        <div data-testid="performance-info">Rendering {toggles.length} Toggle components</div>
-
-        <Box
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
-            gap: 1,
-            maxHeight: 400,
-            overflowY: 'auto',
-          }}
-        >
-          {toggles.map((toggle) => (
-            <Toggle
-              key={toggle.id}
-              data-testid={`perf-toggle-${toggle.id}`}
-              selected={toggle.selected}
-              onChange={() => toggleHandler(toggle.id)}
-              value={`toggle-${toggle.id}`}
-              size="sm"
-            >
-              #{toggle.id}
-            </Toggle>
-          ))}
-        </Box>
-
-        <div data-testid="selected-count">Selected: {toggles.filter((t) => t.selected).length}</div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const performanceInfo = canvas.getByTestId('performance-info');
-    const selectedCount = canvas.getByTestId('selected-count');
-
-    // Verify all toggles rendered
-    expect(performanceInfo).toHaveTextContent('Rendering 50 Toggle components');
-    expect(selectedCount).toHaveTextContent('Selected: 0');
-
-    // Test rapid interactions
-    const firstToggle = canvas.getByTestId('perf-toggle-0');
-    const secondToggle = canvas.getByTestId('perf-toggle-1');
-    const thirdToggle = canvas.getByTestId('perf-toggle-2');
-
-    await userEvent.click(firstToggle);
-    await userEvent.click(secondToggle);
-    await userEvent.click(thirdToggle);
-
-    await waitFor(() => {
-      expect(selectedCount).toHaveTextContent('Selected: 3');
-    });
-  },
-};
-
-// Edge Cases Tests
-export const EdgeCases: Story = {
-  render: function EdgeCasesRender() {
-    const [states, setStates] = useState({
-      empty: false,
-      longText: false,
-      specialChars: false,
-      numbers: false,
-    });
-
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, maxWidth: 600 }}>
-        <h4>Edge Cases Testing</h4>
-
-        <Box>
-          <h5>Empty Content</h5>
-          <Toggle
-            data-testid="empty-toggle"
-            selected={states.empty}
-            onChange={() => setStates((prev) => ({ ...prev, empty: !prev.empty }))}
-            value=""
-            icon={<Star size={16} />}
-          />
-        </Box>
-
-        <Box>
-          <h5>Very Long Text</h5>
-          <Toggle
-            data-testid="long-text-toggle"
-            selected={states.longText}
-            onChange={() => setStates((prev) => ({ ...prev, longText: !prev.longText }))}
-            value="very-long-text"
-            sx={{ maxWidth: 300 }}
-          >
-            This is a very long toggle button text that should wrap properly and maintain good
-            usability even when the content exceeds normal expectations
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h5>Special Characters & Emojis</h5>
-          <Toggle
-            data-testid="special-chars-toggle"
-            selected={states.specialChars}
-            onChange={() => setStates((prev) => ({ ...prev, specialChars: !prev.specialChars }))}
-            value="special-chars"
-          >
-            🌟 Special &amp; &quot;Chars&quot; &lt;&gt;&amp;{'{}'} 测试 العربية
-          </Toggle>
-        </Box>
-
-        <Box>
-          <h5>Numeric Values</h5>
-          <Toggle
-            data-testid="numeric-toggle"
-            selected={states.numbers}
-            onChange={() => setStates((prev) => ({ ...prev, numbers: !prev.numbers }))}
-            value={42}
-          >
-            Numeric Value: 42
-          </Toggle>
-        </Box>
-
-        <div data-testid="edge-cases-state">{JSON.stringify(states)}</div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const emptyToggle = canvas.getByTestId('empty-toggle');
-    const longTextToggle = canvas.getByTestId('long-text-toggle');
-    const specialCharsToggle = canvas.getByTestId('special-chars-toggle');
-    const numericToggle = canvas.getByTestId('numeric-toggle');
-    const stateDiv = canvas.getByTestId('edge-cases-state');
-
-    // Test empty content toggle (icon only)
-    expect(emptyToggle).toBeInTheDocument();
-    await userEvent.click(emptyToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('"empty":true');
-    });
-
-    // Test long text toggle
-    expect(longTextToggle).toBeInTheDocument();
-    await userEvent.click(longTextToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('"longText":true');
-    });
-
-    // Test special characters
-    expect(specialCharsToggle).toHaveTextContent('🌟 Special & "Chars" <>&{} 测试 العربية');
-    await userEvent.click(specialCharsToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('"specialChars":true');
-    });
-
-    // Test numeric value
-    expect(numericToggle).toHaveTextContent('Numeric Value: 42');
-    await userEvent.click(numericToggle);
-    await waitFor(() => {
-      expect(stateDiv).toHaveTextContent('"numbers":true');
-    });
-  },
-};
-
-// Integration Tests
-export const Integration: Story = {
-  render: function IntegrationRender() {
-    const [preferences, setPreferences] = useState({
-      theme: 'light',
-      notifications: true,
-      autoSave: false,
-      analytics: false,
-    });
-
-    const [player, setPlayer] = useState({
-      isPlaying: false,
-      isMuted: false,
-      repeat: false,
-    });
-
-    return (
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-        <Box>
-          <h4>User Preferences Integration</h4>
-          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
-            <Toggle
-              data-testid="theme-toggle"
-              selected={preferences.theme === 'dark'}
-              onChange={() =>
-                setPreferences((prev) => ({
-                  ...prev,
-                  theme: prev.theme === 'light' ? 'dark' : 'light',
-                }))
-              }
-              value="theme"
-              variant="outline"
-              color="neutral"
-            >
-              Dark Mode
-            </Toggle>
-
-            <Toggle
-              data-testid="notifications-pref-toggle"
-              selected={preferences.notifications}
-              onChange={() =>
-                setPreferences((prev) => ({
-                  ...prev,
-                  notifications: !prev.notifications,
-                }))
-              }
-              value="notifications"
-              color="warning"
-            >
-              Notifications
-            </Toggle>
-
-            <Toggle
-              data-testid="autosave-toggle"
-              selected={preferences.autoSave}
-              onChange={() =>
-                setPreferences((prev) => ({
-                  ...prev,
-                  autoSave: !prev.autoSave,
-                }))
-              }
-              value="autoSave"
-              variant="soft"
-              color="success"
-            >
-              Auto Save
-            </Toggle>
-
-            <Toggle
-              data-testid="analytics-toggle"
-              selected={preferences.analytics}
-              onChange={() =>
-                setPreferences((prev) => ({
-                  ...prev,
-                  analytics: !prev.analytics,
-                }))
-              }
-              value="analytics"
-              variant="soft"
-              color="secondary"
-            >
-              Analytics
-            </Toggle>
-          </Box>
-        </Box>
-
-        <Box>
-          <h4>Media Player Integration</h4>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Toggle
-              data-testid="play-pause-toggle"
-              selected={player.isPlaying}
-              onChange={() =>
-                setPlayer((prev) => ({
-                  ...prev,
-                  isPlaying: !prev.isPlaying,
-                }))
-              }
-              value="playPause"
-              icon={player.isPlaying ? <Pause size={16} /> : <Play size={16} />}
-              color="primary"
-              size="lg"
-            />
-
-            <Toggle
-              data-testid="mute-toggle"
-              selected={player.isMuted}
-              onChange={() =>
-                setPlayer((prev) => ({
-                  ...prev,
-                  isMuted: !prev.isMuted,
-                }))
-              }
-              value="mute"
-              variant="outline"
-              color="secondary"
-            >
-              {player.isMuted ? 'Unmute' : 'Mute'}
-            </Toggle>
-
-            <Toggle
-              data-testid="repeat-toggle"
-              selected={player.repeat}
-              onChange={() =>
-                setPlayer((prev) => ({
-                  ...prev,
-                  repeat: !prev.repeat,
-                }))
-              }
-              value="repeat"
-              variant="soft"
-              color="neutral"
-            >
-              Repeat
-            </Toggle>
-          </Box>
-        </Box>
-
-        <div data-testid="integration-state">
-          Preferences: {JSON.stringify(preferences)}
-          Player: {JSON.stringify(player)}
-        </div>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const themeToggle = canvas.getByTestId('theme-toggle');
-    const notificationsToggle = canvas.getByTestId('notifications-pref-toggle');
-    const playToggle = canvas.getByTestId('play-pause-toggle');
-    const muteToggle = canvas.getByTestId('mute-toggle');
-    const stateDiv = canvas.getByTestId('integration-state');
-
-    // Test integration between multiple toggle components
-    expect(stateDiv.textContent).toContain('theme":"light');
-    expect(stateDiv.textContent).toContain('notifications":true');
-    expect(stateDiv.textContent).toContain('isPlaying":false');
-
-    // Test theme toggle affects preferences
-    await userEvent.click(themeToggle);
-    await waitFor(() => {
-      expect(stateDiv.textContent).toContain('theme":"dark');
-    });
-
-    // Test notifications toggle
-    await userEvent.click(notificationsToggle);
-    await waitFor(() => {
-      expect(stateDiv.textContent).toContain('notifications":false');
-    });
-
-    // Test media player controls
-    await userEvent.click(playToggle);
-    await waitFor(() => {
-      expect(stateDiv.textContent).toContain('isPlaying":true');
-    });
-
-    await userEvent.click(muteToggle);
-    await waitFor(() => {
-      expect(stateDiv.textContent).toContain('isMuted":true');
-    });
-  },
-};