feat: перенос быстрой пачки компонентов 0.1.0

src/Toggle/Toggle.module.scss

@@ -0,0 +1,65 @@
+@import '../tokens/tokens';
+
+.wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 6px 0;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.track {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 11px;
+  background: $gray-300;
+  transition: background .18s;
+  flex-shrink: 0;
+}
+
+.thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: $white;
+  box-shadow: $sh-1;
+  transition: transform .18s;
+}
+
+.input:checked + .track {
+  background: $gold-500;
+}
+
+.input:checked + .track .thumb {
+  transform: translateX(18px);
+}
+
+.input:focus-visible + .track {
+  box-shadow: 0 0 0 3px rgba(212, 160, 30, .25);
+}
+
+// Только чтение: приглушаем переключатель и подпись.
+.input:disabled + .track {
+  opacity: .5;
+  cursor: default;
+}
+
+.input:disabled ~ .text {
+  color: $gray-400;
+}
+
+.text {
+  font-size: 13px;
+  color: $gray-700;
+}

src/Toggle/Toggle.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styles from './Toggle.module.scss';
+import { useFormReadOnly } from '../FormMode';
+
+interface IToggleProps {
+  id?: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  /** Подпись справа от переключателя (да/нет-поля). */
+  onLabel?: string;
+  /** Только чтение (режим согласующего). */
+  readOnly?: boolean;
+}
+
+/** Переключатель да/нет (SharePoint Boolean). */
+export const Toggle: React.FC<IToggleProps> = ({ id, checked, onChange, onLabel, readOnly }) => {
+  const contextReadOnly = useFormReadOnly();
+  const effectiveReadOnly = readOnly ?? contextReadOnly;
+  return (
+    <label className={styles.wrap}>
+      <input
+        id={id}
+        type="checkbox"
+        className={styles.input}
+        checked={checked}
+        disabled={effectiveReadOnly}
+        onChange={(e) => onChange(e.target.checked)}
+      />
+      <span className={styles.track}>
+        <span className={styles.thumb} />
+      </span>
+      {onLabel && <span className={styles.text}>{onLabel}</span>}
+    </label>
+  );
+};