@donkit-ai/design-system 0.2.14 → 0.2.16

package/README.md

@@ -37,10 +37,11 @@ npm install @donkit-ai/design-system@latest
 
 ## Компоненты
 
-- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (small, medium, large)
-- **Tabs** - вкладки с состоянием selected в трех размерах (small, medium, large)
+- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (small, medium, large). Поддерживает `href` для рендера как ссылка
+- **Tabs** - вкладки с состоянием selected в трех размерах (small, medium, large). Поддерживает `href` для рендера как ссылка
 - **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (small, medium)
 - **Stepper** - числовое поле с кнопками +/- для изменения значения (small, medium)
+- **Toggle** - переключатель для включения/выключения опций (small, medium)
 - **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом)
 - **Typography** - H1-H4, P1-P3 компоненты
 - **Code** - inline и block код с monospace шрифтом
@@ -81,6 +82,17 @@ function MyComponent() {
     </Card>
   );
 }
+
+// Button как ссылка (рендерит <a> вместо <button>)
+// При обычном клике: вызывается onClick (preventDefault автоматический)
+// При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
+<Button variant="primary" href="/dashboard" onClick={() => navigate('/dashboard')}>
+  Go to Dashboard
+</Button>
+
+<Button variant="secondary" href="https://example.com">
+  Visit Example
+</Button>
 ```
 
 ### 3. Иконки
@@ -384,15 +396,16 @@ import { AlertCircle } from 'lucide-react';
 </Tabs>
 
 // As links (с href) - рендерит <a> вместо <button>
-// Поддерживает открытие в новой вкладке и работает с роутингом
+// При обычном клике: вызывается onClick (preventDefault автоматический)
+// При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
 <Tabs size="medium">
-  <Tab selected href="/overview">
+  <Tab selected href="/overview" onClick={() => navigate('/overview')}>
     Overview
   </Tab>
-  <Tab href="/details">
+  <Tab href="/details" onClick={() => navigate('/details')}>
     Details
   </Tab>
-  <Tab href="/settings">
+  <Tab href="/settings" onClick={() => navigate('/settings')}>
     Settings
   </Tab>
 </Tabs>
@@ -535,6 +548,70 @@ import { AlertCircle } from 'lucide-react';
 - Small: 16px (Minus, Plus)
 - Medium: 20px (Minus, Plus)
 
+### Toggle
+
+Переключатель для включения/выключения опций. Высота совпадает с другими элементами интерфейса.
+
+```jsx
+// Basic toggle
+<Toggle
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Enable notifications"
+/>
+
+// Small size
+<Toggle
+  size="small"
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Auto-save"
+/>
+
+// Medium size (default)
+<Toggle
+  size="medium"
+  checked={darkMode}
+  onChange={setDarkMode}
+  label="Dark mode"
+/>
+
+// Without label (for tables/cards where context is clear)
+<Toggle
+  checked={isEnabled}
+  onChange={setIsEnabled}
+/>
+
+// Disabled states
+<Toggle
+  checked={false}
+  onChange={() => {}}
+  label="Disabled unchecked"
+  disabled
+/>
+
+<Toggle
+  checked={true}
+  onChange={() => {}}
+  label="Disabled checked"
+  disabled
+/>
+```
+
+**Параметры:**
+- `checked` - состояние переключателя (true/false)
+- `onChange` - функция обработки изменения состояния, получает новое значение (boolean)
+- `size` - размер: "small" или "medium" (default: "medium")
+- `label` - текст подписи (опционально)
+- `disabled` - отключить переключатель
+- `id` - пользовательский ID (по умолчанию генерируется автоматически)
+
+**Стиль:**
+- Высота совпадает с Input, Select, Stepper (`--height-s` / `--height-m`)
+- Ширина трека: 1.75x от высоты
+- Включенное состояние: фон `--color-status-success`, border `--color-status-success` (зеленый)
+- Выключенное состояние: фон `--color-item-bg`, border `--color-border`, hover `--color-border-hover`
+
 ### Card
 
 Карточки бывают двух типов:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "Donkit Design System - minimal design tokens and React components",
   "type": "module",
   "main": "src/index.js",

package/src/components/Button.css

@@ -13,11 +13,14 @@
               border-color var(--transition-normal),
               opacity var(--transition-normal);
   white-space: nowrap;
+  text-decoration: none;
 }
 
-.ds-button:disabled {
+.ds-button:disabled,
+.ds-button[aria-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .ds-button__icon {
@@ -32,7 +35,7 @@
   background-color: var(--color-accent);
 }
 
-.ds-button--primary:hover:not(:disabled) {
+.ds-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-accent-hover);
 }
 
@@ -42,7 +45,7 @@
   border: 1px solid var(--color-border);
 }
 
-.ds-button--secondary:hover:not(:disabled) {
+.ds-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-item-bg-hover);
   border-color: var(--color-border-hover);
 }
@@ -52,7 +55,7 @@
   background-color: transparent;
 }
 
-.ds-button--ghost:hover:not(:disabled) {
+.ds-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-item-bg-hover);
   color: var(--color-txt-icon-1);
 }

package/src/components/Button.jsx

@@ -10,6 +10,7 @@ export function Button({
   disabled = false,
   onClick,
   type = 'button',
+  href,
   'aria-label': ariaLabel,
   ...props
 }) {
@@ -23,6 +24,47 @@ export function Button({
     isIconOnly && 'ds-button--icon-only',
   ].filter(Boolean).join(' ');
 
+  const content = (
+    <>
+      {icon && !isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
+      {children}
+      {isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
+    </>
+  );
+
+  // Render as link if href is provided
+  if (href) {
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      // При Cmd/Ctrl+Click или Middle Click — пусть браузер откроет новую вкладку
+      if (e.metaKey || e.ctrlKey || e.button === 1) {
+        return;
+      }
+
+      // Обычный клик — preventDefault и вызов onClick
+      e.preventDefault();
+      onClick?.(e);
+    };
+
+    return (
+      <a
+        className={className}
+        href={disabled ? undefined : href}
+        onClick={handleClick}
+        aria-label={ariaLabel}
+        aria-disabled={disabled ? 'true' : undefined}
+        {...props}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  // Render as button (default)
   return (
     <button
       type={type}
@@ -32,9 +74,7 @@ export function Button({
       aria-label={ariaLabel}
       {...props}
     >
-      {icon && !isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
-      {children}
-      {isIconOnly && <span className="ds-button__icon" aria-hidden="true">{icon}</span>}
+      {content}
     </button>
   );
 }

package/src/components/Tabs.jsx

@@ -34,6 +34,22 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
 
   // Render as link if href is provided
   if (href) {
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      // При Cmd/Ctrl+Click или Middle Click — пусть браузер откроет новую вкладку
+      if (e.metaKey || e.ctrlKey || e.button === 1) {
+        return;
+      }
+
+      // Обычный клик — preventDefault и вызов onClick
+      e.preventDefault();
+      onClick?.(e);
+    };
+
     return (
       <a
         role="tab"
@@ -41,7 +57,7 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
         aria-disabled={disabled ? 'true' : undefined}
         className={className}
         href={disabled ? undefined : href}
-        onClick={disabled ? (e) => e.preventDefault() : onClick}
+        onClick={handleClick}
         {...props}
       >
         {content}

package/src/components/Toggle.css

@@ -0,0 +1,91 @@
+.ds-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+  cursor: pointer;
+}
+
+.ds-toggle--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-toggle__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-toggle__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--color-item-bg);
+  border: 1px solid var(--color-border);
+  transition: background-color var(--transition-normal), border-color var(--transition-normal);
+  flex-shrink: 0;
+}
+
+.ds-toggle__input:checked + .ds-toggle__track {
+  background-color: var(--color-status-success);
+  border-color: var(--color-status-success);
+}
+
+.ds-toggle__input:not(:checked) + .ds-toggle__track:hover {
+  border-color: var(--color-border-hover);
+}
+
+.ds-toggle__thumb {
+  background-color: var(--color-white);
+  border-radius: 50%;
+  transition: transform var(--transition-normal);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.ds-toggle__label {
+  font-size: var(--font-size-p1);
+  color: var(--color-txt-icon-1);
+  user-select: none;
+}
+
+/* Small */
+.ds-toggle--small .ds-toggle__track {
+  width: calc(var(--height-s) * 1.75);
+  height: var(--height-s);
+  border-radius: calc(var(--height-s) / 2);
+  padding: 3px;
+}
+
+.ds-toggle--small .ds-toggle__thumb {
+  width: calc(var(--height-s) - 8px);
+  height: calc(var(--height-s) - 8px);
+}
+
+.ds-toggle--small .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+  transform: translateX(calc(var(--height-s) * 0.75));
+}
+
+.ds-toggle--small .ds-toggle__label {
+  font-size: var(--font-size-p2);
+}
+
+/* Medium */
+.ds-toggle--medium .ds-toggle__track {
+  width: calc(var(--height-m) * 1.75);
+  height: var(--height-m);
+  border-radius: calc(var(--height-m) / 2);
+  padding: 4px;
+}
+
+.ds-toggle--medium .ds-toggle__thumb {
+  width: calc(var(--height-m) - 10px);
+  height: calc(var(--height-m) - 10px);
+}
+
+.ds-toggle--medium .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+  transform: translateX(calc(var(--height-m) * 0.75));
+}
+
+.ds-toggle--medium .ds-toggle__label {
+  font-size: var(--font-size-p1);
+}

package/src/components/Toggle.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import './Toggle.css';
+
+export function Toggle({
+  checked = false,
+  onChange,
+  size = 'medium',
+  disabled = false,
+  label,
+  id,
+  ...props
+}) {
+  const toggleId = id || `toggle-${React.useId()}`;
+
+  const className = [
+    'ds-toggle',
+    `ds-toggle--${size}`,
+    disabled && 'ds-toggle--disabled',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <label className={className} htmlFor={toggleId}>
+      <input
+        type="checkbox"
+        id={toggleId}
+        className="ds-toggle__input"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        {...props}
+      />
+      <span className="ds-toggle__track">
+        <span className="ds-toggle__thumb" />
+      </span>
+      {label && <span className="ds-toggle__label">{label}</span>}
+    </label>
+  );
+}

package/src/index.js

@@ -19,3 +19,4 @@ export { Tabs, Tab } from './components/Tabs';
 export { Accordion } from './components/Accordion';
 export { CodeAccordion } from './components/CodeAccordion';
 export { Tooltip } from './components/Tooltip';
+export { Toggle } from './components/Toggle';