# Switch

A versatile switch toggle component with customizable styles and states for user interaction.

### **Import**
```tsx
import { Switch } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Switch } from '../../../Form/Switch/Switch';

export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;
```

### **shadow**
Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.

- **Type:** `Shadow | Elevation | ViewProps`
- **Default:** `[object Object]`

```tsx
import React from 'react';
import { Switch } from '../../../Form/Switch/Switch';

export const ShadowSwitch = () => (
  <Switch
    id="shadowCheckbox"
    name="shadowCheckbox"
    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
    isChecked
  />
);
```

### **ChildSwitch**

```tsx
import React, { useState } from 'react';
import { Switch } from '../../../Form/Switch/Switch';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const ChildSwitch = () => {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (checked: boolean) => {
    setIsChecked(checked);
  };

  return (
    <Vertical gap={16}>
      <Text>Switch with content: {isChecked ? 'ON' : 'OFF'}</Text>

      <Switch
        id="child"
        name="child"
        isChecked={isChecked}
        onChange={handleChange}
        activeChild={
          <Text color="white" size="xs">
            On
          </Text>
        }
        inActiveChild={
          <Text color="white" size="xs">
            Off
          </Text>
        }
      />

      <Switch
        id="child-md"
        name="child-md"
        size="md"
        isChecked={isChecked}
        onChange={handleChange}
        activeChild={
          <Text color="white" size="xs">
            On
          </Text>
        }
        inActiveChild={
          <Text color="white" size="xs">
            Off
          </Text>
        }
      />

      <Switch
        id="child-lg"
        name="child-lg"
        size="lg"
        isChecked={isChecked}
        onChange={handleChange}
        activeChild={
          <Text color="white" size="xs">
            On
          </Text>
        }
        inActiveChild={
          <Text color="white" size="xs">
            Off
          </Text>
        }
      />
    </Vertical>
  );
};
```

### **ColorScheme**

```tsx
import React from 'react';

import { Switch } from '../Switch';

export const ColorSwitch = () => <Switch name="name" isChecked />;
```

### **Default**

```tsx
import React from 'react';
import { Switch } from '../../../Form/Switch/Switch';

export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;
```

### **DisabledInput**

```tsx
import React from 'react';

import { Switch } from '../Switch';

export const DisabledSwitch = () => {
  return <Switch name="disabled" isDisabled />;
};
```

### **FormSwitch**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Vertical } from 'app-studio';

import { Label } from '../../Label/Label';
import { Switch } from '../Switch';

export const FormSwitch = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    alert(event.target.elements.toggleFormik.checked);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10}>
        <Label> Without Formik</Label>
        <Switch id="toggleFormik" name="toggleFormik" />
        <Button type="submit">Submit</Button>
      </Vertical>
    </form>
  );
};
```

### **ReadOnlyInput**

```tsx
import React from 'react';

import { Switch } from '../Switch';

export const ReadOnlySwitch = () => {
  return <Switch name="disabled" value="Sarah Jane" isChecked isReadOnly />;
};
```

### **Shadow**

```tsx
import React from 'react';
import { Switch } from '../../../Form/Switch/Switch';

export const ShadowSwitch = () => (
  <Switch
    id="shadowCheckbox"
    name="shadowCheckbox"
    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
    isChecked
  />
);
```

### **SizeInput**

```tsx
import React from 'react';
import { Vertical } from 'app-studio';

import { Switch } from '../Switch';

export const SizeSwitch = () => {
  return (
    <Vertical gap={10}>
      <Switch name="xs" size="xs" isChecked />
      <Switch name="sm" size="sm" isChecked />
      <Switch name="md" size="md" isChecked />
      <Switch name="lg" size="lg" isChecked />
      <Switch name="xl" size="xl" isChecked />
    </Vertical>
  );
};
```

### **StylesInput**

```tsx
import React from 'react';
import { Button } from '../../../Button/Button';

import { Horizontal } from 'app-studio';

import { Switch } from '../Switch';

export const StyledSwitch = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(`Hello, ${formData.get('surname')}`);
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <Switch
          name="surname"
          label="Surname"
          variant="none"
          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
          views={{
            slider: {
              borderRadius: 8,
              borderColor: 'theme-primary',
              borderStyle: 'solid',
              borderWidth: 1,
            },
            circle: { backgroundColor: 'theme-primary' },
          }}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};
```

### **DesignSystem**

```tsx
/**
 * Switch Examples - Design System
 *
 * Showcases the Switch component following the design guidelines:
 * - Typography: Inter/Geist font, specific sizes/weights
 * - Spacing: 4px grid system
 * - Colors: Neutral palette with semantic colors
 * - Rounded corners: Consistent border radius
 * - Transitions: Subtle animations
 */

import React from 'react';
import { Switch } from '../Switch';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Text } from 'app-studio';
import { View } from 'app-studio';

export const DesignSystemSwitches = () => (
  <Vertical gap={24}>
    {/* Size Variants */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Size Variants
      </Text>
      <Vertical gap={16}>
        <Horizontal gap={24} alignItems="center">
          <View width="80px">
            <Text>XS</Text>
          </View>
          <Switch size="xs" />
          <Switch size="xs" isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="80px">
            <Text>SM</Text>
          </View>
          <Switch size="sm" />
          <Switch size="sm" isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="80px">
            <Text>MD</Text>
          </View>
          <Switch size="md" />
          <Switch size="md" isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="80px">
            <Text>LG</Text>
          </View>
          <Switch size="lg" />
          <Switch size="lg" isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="80px">
            <Text>XL</Text>
          </View>
          <Switch size="xl" />
          <Switch size="xl" isChecked />
        </Horizontal>
      </Vertical>
    </View>

    {/* States */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        States
      </Text>
      <Vertical gap={16}>
        <Horizontal gap={24} alignItems="center">
          <View width="120px">
            <Text>Default</Text>
          </View>
          <Switch />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="120px">
            <Text>Checked</Text>
          </View>
          <Switch isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="120px">
            <Text>Disabled</Text>
          </View>
          <Switch isDisabled />
          <Switch isDisabled isChecked />
        </Horizontal>

        <Horizontal gap={24} alignItems="center">
          <View width="120px">
            <Text>Read-only</Text>
          </View>
          <Switch isReadOnly />
          <Switch isReadOnly isChecked />
        </Horizontal>
      </Vertical>
    </View>

    {/* With Labels */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Labels
      </Text>
      <Vertical gap={16}>
        <Switch label="Label on the right (Default)" labelPosition="right" />

        <Switch label="Label on the left" labelPosition="left" />

        <Switch label="Checked with label" isChecked />

        <Switch label="Disabled with label" isDisabled />
      </Vertical>
    </View>

    {/* With Content */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        With Content
      </Text>
      <Vertical gap={16}>
        <Switch
          activeChild={
            <Text color="white" size="xs">
              ON
            </Text>
          }
          inActiveChild={
            <Text color="white" size="xs">
              OFF
            </Text>
          }
          size="md"
        />

        <Switch
          activeChild={
            <Text color="white" size="xs">
              ON
            </Text>
          }
          inActiveChild={
            <Text color="white" size="xs">
              OFF
            </Text>
          }
          size="md"
          isChecked
        />
      </Vertical>
    </View>

    {/* Custom Styling */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Custom Styling
      </Text>
      <Vertical gap={16}>
        <Switch
          views={{
            slider: {
              backgroundColor: 'color-purple-500',
            },
            circle: {
              backgroundColor: 'color-white',
            },
          }}
          isChecked
        />

        <Switch
          views={{
            slider: {
              borderWidth: '2px',
              borderStyle: 'solid',
              borderColor: 'color-gray-300',
              backgroundColor: 'transparent',
            },
            circle: {
              backgroundColor: 'color-gray-700',
            },
          }}
        />

        <Switch
          shadow={{
            boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
          }}
          views={{
            slider: {
              backgroundColor: 'color-blue-500',
              transition: 'all 0.3s ease',
              _hover: {
                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
              },
            },
          }}
          isChecked
        />
      </Vertical>
    </View>

    {/* Form Example */}
    <View>
      <Text marginBottom={8} fontWeight="600">
        Form Example
      </Text>
      <View
        padding={16}
        backgroundColor="color-gray-50"
        borderRadius="8px"
        borderWidth="1px"
        borderStyle="solid"
        borderColor="color-gray-200"
      >
        <Vertical gap={16}>
          <Text fontWeight="600">Notification Settings</Text>

          <Switch label="Email notifications" isChecked />

          <Switch label="Push notifications" isChecked />

          <Switch label="SMS notifications" />

          <Switch label="Weekly digest" isChecked />
        </Vertical>
      </View>
    </View>
  </Vertical>
);
```

### **Index**

```tsx
export * from './ChildSwitch';
export * from './ColorScheme';
export * from './Default';
export * from './designSystem';
export * from './DisabledInput';
export * from './FormSwitch';
export * from './ReadOnlyInput';
export * from './Shadow';
export * from './SizeInput';
export * from './StylesInput';
```