feat: ⚡ add new Switch component to ui-kit

internal/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Link from 'next/link'
+import Link from 'next/link';
 import styles from './Navigation.module.css';
 
 const pages = [
@@ -23,12 +23,13 @@ const pages = [
   'payment',
   'radio',
   'select',
+  'switch',
   'tag',
   'tag-input',
   'table',
   'tooltip',
   'typography',
-]
+];
 
 const Navigation = () => (
   <div className={styles.navigation}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macpaw/macpaw-ui",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "main": "lib/ui.js",
   "scripts": {
     "dev": "next -p 1234",

pages/switch.mdx

@@ -0,0 +1,55 @@
+import { Switch, FormRow } from '../src/ui';
+
+# Switch
+
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error>Some label</Switch>
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+
+```
+<FormRow variety>
+  <h3>Default</h3>
+  <Switch />
+</FormRow>
+
+<FormRow variety>
+  <h3>Disabled</h3>
+  <Switch disabled />
+</FormRow>
+
+<FormRow variety>
+  <h3>Error</h3>
+  <Switch error />
+</FormRow>
+
+<FormRow variety>
+  <h3>With handler</h3>
+  <Switch onChange={() => alert('Value is change')} />
+</FormRow>
+
+<FormRow variety>
+  <h3>With Label</h3>
+  <Switch>change settings</Switch>
+</FormRow>
+```

src/Switch/Switch.scss

@@ -0,0 +1,72 @@
+.switch {
+  display: inline-flex;
+  position: relative;
+  user-select: none;
+  align-items: center;
+
+  &.-error {
+    color: var(--color-error);
+
+    .switch-track {
+      box-shadow: 0 0 0 2px var(--color-error);
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+    width: 106%;
+    height: 106%;
+    margin: 0;
+    left: -3%;
+    top: -3%;
+
+    &:checked + .switch-track {
+      background-color: var(--color-primary);
+    }
+
+    &:checked + .switch-track .switch-thumb {
+      transform: translateX(16px);
+    }
+
+    &:focus + .switch-track {
+      border-color: var(--color-secondary);
+      box-shadow: 0 0 0 3px var(--color-outline);
+    }
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+
+    &[disabled] + .switch-track {
+      background-color: var(--color-black-16);
+    }
+  }
+
+  .switch-track {
+    width: 32px;
+    height: 16px;
+    border-radius: 10px;
+    background-color: var(--color-black-16);
+    position: relative;
+    display: inline-flex;
+    transition: 0.1s background-color ease-in-out;
+
+    & + * {
+      margin-left: 8px;
+    }
+  }
+
+  .switch-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: var(--color-white);
+    display: inline-flex;
+    margin: 2px;
+    transform: translateX(0);
+    transition: 0.1s transform ease-in-out;
+  }
+}

src/Switch/Switch.tsx

@@ -0,0 +1,22 @@
+import React, { FC, InputHTMLAttributes, PropsWithChildren } from 'react';
+import cx from 'clsx';
+
+export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+const Switch: FC<PropsWithChildren<SwitchProps>> = (props) => {
+  const { className, style, children, error, ...other } = props;
+
+  return (
+    <span className={cx('switch', className, error && '-error')} style={style}>
+      <input type="checkbox" {...other} />
+      <span className="switch-track">
+        <span className="switch-thumb" />
+      </span>
+      {!!children && <span>{children}</span>}
+    </span>
+  );
+};
+
+export default Switch;

src/ui.js

@@ -37,3 +37,4 @@ export { default as Table } from './Table/Table';
 export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as TableRow } from './TableRow/TableRow';
 export { default as TagInput, TagInputListItem } from './TagInput/TagInput';
+export { default as Switch } from './Switch/Switch';

src/ui.scss

@@ -36,3 +36,4 @@
 @import './Tooltip/Tooltip.scss';
 @import './Typography/Typography.scss';
 @import './TagInput/TagInput.scss';
+@import './Switch/Switch.scss';