@donkit-ai/design-system 0.2.17 → 0.2.19

package/README.md

@@ -37,12 +37,16 @@ npm install @donkit-ai/design-system@latest
 
 ## Компоненты
 
-- **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 эффектом)
+- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (xs, small, medium, large). Поддерживает `href` для рендера как ссылка
+- **Tabs** - вкладки с состоянием selected в четырех размерах (xs, small, medium, large). Поддерживает `href` для рендера как ссылка
+- **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (xs, small, medium)
+- **Textarea** - многострочное текстовое поле (xs, small, medium)
+- **Select** - выпадающий список с кастомным дизайном (xs, small, medium)
+- **Stepper** - числовое поле с кнопками +/- для изменения значения (xs, small, medium)
+- **Toggle** - переключатель для включения/выключения опций (xs, small, medium, large)
+- **Checkbox** - чекбокс для выбора опций (xs, small, medium, large)
+- **Radio** - радиокнопка для выбора одного варианта из группы (xs, small, medium, large)
+- **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом). Поддерживает `href` для рендера как ссылка
 - **Typography** - H1-H4, P1-P3 компоненты
 - **Code** - inline и block код с monospace шрифтом
 - **Link** - ссылки акцентным цветом, при hover цвет меняется и появляется подчеркивание
@@ -112,20 +116,25 @@ import { iconSizes } from '@donkit-ai/design-system';
 **Соответствие размеров компонентам:**
 
 - **16px (xs)** - очень мелкие элементы
+  - Extra Small кнопки (`size="xs"`)
+  - Extra Small табы (`size="xs"`)
+
 - **20px (s)** - компактные элементы
   - Small кнопки (`size="small"`)
-  - Tabs (вкладки)
+  - Small табы (`size="small"`)
   - Modal (иконка закрытия)
   - Accordion, CodeAccordion
 
 - **24px (m)** - стандартные элементы
   - Medium кнопки (`size="medium"`, по умолчанию)
+  - Medium табы (`size="medium"`)
   - Input (иконки в полях ввода)
   - Alert (иконки статусов)
   - Select (иконка выпадающего списка)
 
 - **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
+  - Large табы (`size="large"`)
 
 - **48px (xl)** - очень крупные элементы
 
@@ -333,6 +342,9 @@ document.documentElement.setAttribute('data-theme', 'light');
 <Button variant="ghost">Ghost</Button>
 
 // Размеры с соответствующими иконками
+<Button size="xs" icon={<Mail size={16} strokeWidth={1.5} />}>
+  Extra Small
+</Button>
 <Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
   Small
 </Button>
@@ -375,7 +387,8 @@ import { AlertCircle } from 'lucide-react';
   </Tab>
 </Tabs>
 
-// With icons (всегда 20px для Tabs)
+// With icons (размер иконки соответствует размеру таба)
+// xs: 16px, small: 20px, medium: 24px, large: 28px
 <Tabs size="small">
   <Tab
     selected={selectedTab === 'alerts'}
@@ -416,7 +429,7 @@ import { AlertCircle } from 'lucide-react';
 - Hover: фон `--color-item-bg-hover`, текст `--color-txt-icon-1`
 - Default: текст `--color-txt-icon-2`
 
-**Размеры:** small, medium, large
+**Размеры:** xs, small, medium, large
 
 **Дополнительно:** поддержка иконок и disabled состояния
 
@@ -550,7 +563,7 @@ import { AlertCircle } from 'lucide-react';
 
 ### Toggle
 
-Переключатель для включения/выключения опций. Высота совпадает с другими элементами интерфейса.
+Переключатель для включения/выключения опций. Размеры привязаны к размерам иконок.
 
 ```jsx
 // Basic toggle
@@ -560,7 +573,15 @@ import { AlertCircle } from 'lucide-react';
   label="Enable notifications"
 />
 
-// Small size
+// Extra Small size (16px)
+<Toggle
+  size="xs"
+  checked={isCompact}
+  onChange={setIsCompact}
+  label="Compact mode"
+/>
+
+// Small size (20px)
 <Toggle
   size="small"
   checked={isEnabled}
@@ -568,7 +589,7 @@ import { AlertCircle } from 'lucide-react';
   label="Auto-save"
 />
 
-// Medium size (default)
+// Medium size (24px, default)
 <Toggle
   size="medium"
   checked={darkMode}
@@ -576,6 +597,14 @@ import { AlertCircle } from 'lucide-react';
   label="Dark mode"
 />
 
+// Large size (28px)
+<Toggle
+  size="large"
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Enable feature"
+/>
+
 // Without label (for tables/cards where context is clear)
 <Toggle
   checked={isEnabled}
@@ -601,17 +630,220 @@ import { AlertCircle } from 'lucide-react';
 **Параметры:**
 - `checked` - состояние переключателя (true/false)
 - `onChange` - функция обработки изменения состояния, получает новое значение (boolean)
-- `size` - размер: "small" или "medium" (default: "medium")
+- `size` - размер: "xs", "small", "medium" или "large" (default: "medium")
 - `label` - текст подписи (опционально)
 - `disabled` - отключить переключатель
 - `id` - пользовательский ID (по умолчанию генерируется автоматически)
 
 **Стиль:**
-- Высота совпадает с Input, Select, Stepper (`--height-s` / `--height-m`)
+- Размеры привязаны к иконкам: xs (16px), small (20px), medium (24px), large (28px)
 - Ширина трека: 1.75x от высоты
 - Включенное состояние: фон `--color-status-success`, border `--color-status-success` (зеленый)
 - Выключенное состояние: фон `--color-item-bg`, border `--color-border`, hover `--color-border-hover`
 
+### Checkbox
+
+Чекбокс для выбора опций. Размеры привязаны к размерам иконок.
+
+```jsx
+// Basic checkbox
+<Checkbox
+  checked={isAccepted}
+  onChange={setIsAccepted}
+  label="Accept terms and conditions"
+/>
+
+// Extra Small size (16px)
+<Checkbox
+  size="xs"
+  checked={isCompact}
+  onChange={setIsCompact}
+  label="Compact view"
+/>
+
+// Small size (20px)
+<Checkbox
+  size="small"
+  checked={isEnabled}
+  onChange={setIsEnabled}
+  label="Enable feature"
+/>
+
+// Medium size (24px, default)
+<Checkbox
+  size="medium"
+  checked={isSubscribed}
+  onChange={setIsSubscribed}
+  label="Subscribe to newsletter"
+/>
+
+// Large size (28px)
+<Checkbox
+  size="large"
+  checked={isAccepted}
+  onChange={setIsAccepted}
+  label="I accept the terms"
+/>
+
+// Without label (for tables/lists where context is clear)
+<Checkbox
+  checked={isSelected}
+  onChange={setIsSelected}
+/>
+
+// Disabled states
+<Checkbox
+  checked={false}
+  onChange={() => {}}
+  label="Disabled unchecked"
+  disabled
+/>
+
+<Checkbox
+  checked={true}
+  onChange={() => {}}
+  label="Disabled checked"
+  disabled
+/>
+```
+
+**Параметры:**
+- `checked` - состояние чекбокса (true/false)
+- `onChange` - функция обработки изменения состояния, получает новое значение (boolean)
+- `size` - размер: "xs", "small", "medium" или "large" (default: "medium")
+- `label` - текст подписи (опционально)
+- `disabled` - отключить чекбокс
+- `id` - пользовательский ID (по умолчанию генерируется автоматически)
+
+**Стиль:**
+- Размеры привязаны к иконкам: xs (16px), small (20px), medium (24px), large (28px)
+- Выбранное состояние: фон `--color-status-success`, border `--color-status-success` (зеленый)
+- Невыбранное состояние: фон `--color-item-bg`, border `--color-border`, hover `--color-border-hover`
+- Иконка галочки (Check) белого цвета при checked
+
+### Radio
+
+Радиокнопка для выбора одного варианта из группы. Размеры привязаны к размерам иконок.
+
+```jsx
+// Basic radio
+<Radio
+  checked={selectedOption === 'option1'}
+  onChange={() => setSelectedOption('option1')}
+  name="options"
+  value="option1"
+  label="Option 1"
+/>
+
+// Extra Small size (16px)
+<Radio
+  size="xs"
+  checked={size === 'xs'}
+  onChange={() => setSize('xs')}
+  name="size"
+  value="xs"
+  label="Extra Small"
+/>
+
+// Small size (20px)
+<Radio
+  size="small"
+  checked={size === 'small'}
+  onChange={() => setSize('small')}
+  name="size"
+  value="small"
+  label="Small"
+/>
+
+// Medium size (24px, default)
+<Radio
+  size="medium"
+  checked={size === 'medium'}
+  onChange={() => setSize('medium')}
+  name="size"
+  value="medium"
+  label="Medium"
+/>
+
+// Large size (28px)
+<Radio
+  size="large"
+  checked={size === 'large'}
+  onChange={() => setSize('large')}
+  name="size"
+  value="large"
+  label="Large"
+/>
+
+// Radio group example
+<div>
+  <Radio
+    checked={paymentMethod === 'card'}
+    onChange={() => setPaymentMethod('card')}
+    name="payment"
+    value="card"
+    label="Credit Card"
+  />
+  <Radio
+    checked={paymentMethod === 'paypal'}
+    onChange={() => setPaymentMethod('paypal')}
+    name="payment"
+    value="paypal"
+    label="PayPal"
+  />
+  <Radio
+    checked={paymentMethod === 'bank'}
+    onChange={() => setPaymentMethod('bank')}
+    name="payment"
+    value="bank"
+    label="Bank Transfer"
+  />
+</div>
+
+// Without label (for tables/lists where context is clear)
+<Radio
+  checked={isSelected}
+  onChange={() => setIsSelected(true)}
+  name="selection"
+  value="item1"
+/>
+
+// Disabled states
+<Radio
+  checked={false}
+  onChange={() => {}}
+  name="disabled-group"
+  value="disabled1"
+  label="Disabled unchecked"
+  disabled
+/>
+
+<Radio
+  checked={true}
+  onChange={() => {}}
+  name="disabled-group"
+  value="disabled2"
+  label="Disabled checked"
+  disabled
+/>
+```
+
+**Параметры:**
+- `checked` - состояние радиокнопки (true/false)
+- `onChange` - функция обработки изменения состояния, получает новое значение (boolean)
+- `name` - имя группы радиокнопок (обязательно для группировки)
+- `value` - значение радиокнопки
+- `size` - размер: "xs", "small", "medium" или "large" (default: "medium")
+- `label` - текст подписи (опционально)
+- `disabled` - отключить радиокнопку
+- `id` - пользовательский ID (по умолчанию генерируется автоматически)
+
+**Стиль:**
+- Размеры привязаны к иконкам: xs (16px), small (20px), medium (24px), large (28px)
+- Выбранное состояние: фон `--color-status-success`, border `--color-status-success` (зеленый), белая точка внутри
+- Невыбранное состояние: фон `--color-item-bg`, border `--color-border`, hover `--color-border-hover`
+- Круглая форма (border-radius: 50%)
+
 ### Card
 
 Карточки бывают двух типов:
@@ -637,11 +869,45 @@ import { AlertCircle } from 'lucide-react';
 <Card padding="small">Small padding</Card>
 <Card padding="medium">Medium padding</Card>
 <Card padding="large">Large padding</Card>
+
+// Card как ссылка (рендерит <a> вместо <div>)
+// При обычном клике: вызывается onClick (preventDefault автоматический)
+// При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
+<Card
+  padding="medium"
+  variant="interactive"
+  href="/dashboard"
+  onClick={() => navigate('/dashboard')}
+>
+  <H4>Dashboard</H4>
+  <P1>Go to dashboard page</P1>
+</Card>
+
+<Card
+  padding="medium"
+  variant="interactive"
+  href="https://example.com"
+>
+  <H4>External Link</H4>
+  <P1>Visit external site</P1>
+</Card>
+
+// Disabled Card Link
+<Card
+  padding="medium"
+  variant="interactive"
+  href="/disabled"
+  disabled
+>
+  <H4>Disabled</H4>
+  <P1>This card is disabled</P1>
+</Card>
 ```
 
 **Стиль:**
 - **variant="info"** (по умолчанию): прозрачный фон, border `--color-border`
-- **variant="interactive"**: фон `--color-item-bg`, при hover фон `--color-item-bg-hover` и border `--color-border-hover`, курсор pointer
+- **variant="interactive"**: фон `--color-item-bg`, при hover фон `--color-item-bg-hover`, курсор pointer
+- Поддержка `href` для рендера как ссылка с умной обработкой кликов
 
 ### Code
 

package/package.json

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

package/src/components/Button.css

@@ -61,6 +61,13 @@
 }
 
 /* Sizes */
+.ds-button--xs {
+  height: var(--height-xs);
+  padding: 0 calc(var(--height-xs) / 2);
+  font-size: var(--font-size-p3);
+  border-radius: var(--radius-xs);
+}
+
 .ds-button--small {
   height: var(--height-s);
   padding: 0 calc(var(--height-s) / 2);

package/src/components/Card.css

@@ -3,6 +3,8 @@
   border-radius: var(--radius-s);
   border: 1px solid var(--color-border);
   transition: border-color var(--transition-normal), background-color var(--transition-normal);
+  text-decoration: none;
+  color: inherit;
 }
 
 .ds-card--interactive {
@@ -11,10 +13,16 @@
   border: none;
 }
 
-.ds-card--interactive:hover {
+.ds-card--interactive:hover:not([aria-disabled="true"]) {
   background-color: var(--color-item-bg-hover);
 }
 
+.ds-card[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .ds-card--none {
   padding: 0;
 }

package/src/components/Card.jsx

@@ -7,10 +7,12 @@ export function Card({
   variant = 'info',
   hover = false, // deprecated, use variant="interactive"
   onClick,
+  href,
+  disabled = false,
   ...props
 }) {
   const cardVariant = hover ? 'interactive' : variant;
-  const isInteractive = cardVariant === 'interactive' || onClick;
+  const isInteractive = cardVariant === 'interactive' || onClick || href;
 
   const className = [
     'ds-card',
@@ -18,10 +20,41 @@ export function Card({
     isInteractive && 'ds-card--interactive',
   ].filter(Boolean).join(' ');
 
+  // 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-disabled={disabled ? 'true' : undefined}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Render as button if interactive with onClick
   const Element = isInteractive && onClick ? 'button' : 'div';
   const interactiveProps = isInteractive && onClick ? {
     type: 'button',
     onClick,
+    disabled,
   } : {};
 
   return (

package/src/components/Checkbox.css

@@ -0,0 +1,88 @@
+.ds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+  cursor: pointer;
+}
+
+.ds-checkbox--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-checkbox__box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: 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;
+  border-radius: 4px;
+}
+
+.ds-checkbox__input:checked + .ds-checkbox__box {
+  background-color: var(--color-status-success);
+  border-color: var(--color-status-success);
+}
+
+.ds-checkbox__input:not(:checked) + .ds-checkbox__box:hover {
+  border-color: var(--color-border-hover);
+}
+
+.ds-checkbox__icon {
+  color: var(--color-white);
+}
+
+.ds-checkbox__label {
+  font-size: var(--font-size-p1);
+  color: var(--color-txt-icon-1);
+  user-select: none;
+}
+
+/* Extra Small */
+.ds-checkbox--xs .ds-checkbox__box {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+}
+
+.ds-checkbox--xs .ds-checkbox__label {
+  font-size: var(--font-size-p3);
+}
+
+/* Small */
+.ds-checkbox--small .ds-checkbox__box {
+  width: var(--icon-s);
+  height: var(--icon-s);
+}
+
+.ds-checkbox--small .ds-checkbox__label {
+  font-size: var(--font-size-p2);
+}
+
+/* Medium */
+.ds-checkbox--medium .ds-checkbox__box {
+  width: var(--icon-m);
+  height: var(--icon-m);
+}
+
+.ds-checkbox--medium .ds-checkbox__label {
+  font-size: var(--font-size-p1);
+}
+
+/* Large */
+.ds-checkbox--large .ds-checkbox__box {
+  width: var(--icon-l);
+  height: var(--icon-l);
+}
+
+.ds-checkbox--large .ds-checkbox__label {
+  font-size: var(--font-size-p1);
+}

package/src/components/Checkbox.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+import './Checkbox.css';
+
+export function Checkbox({
+  checked = false,
+  onChange,
+  size = 'medium',
+  disabled = false,
+  label,
+  id,
+  ...props
+}) {
+  const checkboxId = id || `checkbox-${React.useId()}`;
+
+  const className = [
+    'ds-checkbox',
+    `ds-checkbox--${size}`,
+    disabled && 'ds-checkbox--disabled',
+  ].filter(Boolean).join(' ');
+
+  const iconSize = size === 'xs' ? 10 : size === 'small' ? 14 : size === 'large' ? 20 : 16;
+
+  return (
+    <label className={className} htmlFor={checkboxId}>
+      <input
+        type="checkbox"
+        id={checkboxId}
+        className="ds-checkbox__input"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        {...props}
+      />
+      <span className="ds-checkbox__box">
+        {checked && (
+          <Check
+            size={iconSize}
+            strokeWidth={2.5}
+            className="ds-checkbox__icon"
+          />
+        )}
+      </span>
+      {label && <span className="ds-checkbox__label">{label}</span>}
+    </label>
+  );
+}

package/src/components/Input.css

@@ -58,6 +58,13 @@
 }
 
 /* Sizes */
+.ds-input--xs {
+  height: var(--height-xs);
+  padding: 0 calc(var(--height-xs) / 4);
+  font-size: var(--font-size-p3);
+  border-radius: var(--radius-xs);
+}
+
 .ds-input--small {
   height: var(--height-s);
   padding: 0 calc(var(--height-s) / 4);
@@ -72,6 +79,10 @@
   border-radius: var(--radius-s);
 }
 
+.ds-input--with-icon.ds-input--xs {
+  padding-left: calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4);
+}
+
 .ds-input--with-icon.ds-input--small {
   padding-left: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
@@ -80,6 +91,10 @@
   padding-left: calc(var(--height-m) / 4 + 24px + var(--height-m) / 4);
 }
 
+.ds-input--with-icon-right.ds-input--xs {
+  padding-right: calc(var(--height-xs) / 4 + 16px + var(--height-xs) / 4);
+}
+
 .ds-input--with-icon-right.ds-input--small {
   padding-right: calc(var(--height-s) / 4 + 20px + var(--height-s) / 4);
 }
@@ -96,6 +111,10 @@
   pointer-events: none;
 }
 
+.ds-input-icon--xs {
+  left: 6px;
+}
+
 .ds-input-icon--small {
   left: 8px;
 }
@@ -121,6 +140,10 @@
   color: var(--color-txt-icon-1);
 }
 
+.ds-input-icon-right--xs {
+  right: 6px;
+}
+
 .ds-input-icon-right--small {
   right: 8px;
 }

package/src/components/Radio.css

@@ -0,0 +1,115 @@
+.ds-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-s);
+  cursor: pointer;
+}
+
+.ds-radio--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ds-radio__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ds-radio__circle {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: 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;
+  border-radius: 50%;
+}
+
+.ds-radio__input:checked + .ds-radio__circle {
+  background-color: var(--color-status-success);
+  border-color: var(--color-status-success);
+}
+
+.ds-radio__input:not(:checked) + .ds-radio__circle:hover {
+  border-color: var(--color-border-hover);
+}
+
+.ds-radio__dot {
+  background-color: var(--color-white);
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity var(--transition-normal);
+}
+
+.ds-radio__input:checked + .ds-radio__circle .ds-radio__dot {
+  opacity: 1;
+}
+
+.ds-radio__label {
+  font-size: var(--font-size-p1);
+  color: var(--color-txt-icon-1);
+  user-select: none;
+}
+
+/* Extra Small */
+.ds-radio--xs .ds-radio__circle {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+}
+
+.ds-radio--xs .ds-radio__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.ds-radio--xs .ds-radio__label {
+  font-size: var(--font-size-p3);
+}
+
+/* Small */
+.ds-radio--small .ds-radio__circle {
+  width: var(--icon-s);
+  height: var(--icon-s);
+}
+
+.ds-radio--small .ds-radio__dot {
+  width: 8px;
+  height: 8px;
+}
+
+.ds-radio--small .ds-radio__label {
+  font-size: var(--font-size-p2);
+}
+
+/* Medium */
+.ds-radio--medium .ds-radio__circle {
+  width: var(--icon-m);
+  height: var(--icon-m);
+}
+
+.ds-radio--medium .ds-radio__dot {
+  width: 10px;
+  height: 10px;
+}
+
+.ds-radio--medium .ds-radio__label {
+  font-size: var(--font-size-p1);
+}
+
+/* Large */
+.ds-radio--large .ds-radio__circle {
+  width: var(--icon-l);
+  height: var(--icon-l);
+}
+
+.ds-radio--large .ds-radio__dot {
+  width: 12px;
+  height: 12px;
+}
+
+.ds-radio--large .ds-radio__label {
+  font-size: var(--font-size-p1);
+}

package/src/components/Radio.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import './Radio.css';
+
+export function Radio({
+  checked = false,
+  onChange,
+  size = 'medium',
+  disabled = false,
+  label,
+  name,
+  value,
+  id,
+  ...props
+}) {
+  const radioId = id || `radio-${React.useId()}`;
+
+  const className = [
+    'ds-radio',
+    `ds-radio--${size}`,
+    disabled && 'ds-radio--disabled',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <label className={className} htmlFor={radioId}>
+      <input
+        type="radio"
+        id={radioId}
+        className="ds-radio__input"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        name={name}
+        value={value}
+        {...props}
+      />
+      <span className="ds-radio__circle">
+        <span className="ds-radio__dot" />
+      </span>
+      {label && <span className="ds-radio__label">{label}</span>}
+    </label>
+  );
+}

package/src/components/Select.css

@@ -60,6 +60,13 @@
 }
 
 /* Sizes */
+.ds-select-trigger--xs {
+  height: var(--height-xs);
+  padding: 0 calc(var(--height-xs) / 4);
+  font-size: var(--font-size-p3);
+  border-radius: var(--radius-xs);
+}
+
 .ds-select-trigger--small {
   height: var(--height-s);
   padding: 0 calc(var(--height-s) / 4);

package/src/components/Select.jsx

@@ -53,7 +53,7 @@ export function Select({
   }, [isOpen]);
 
   const selectedOption = options.find(opt => opt.value === value);
-  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
+  const iconSize = size === 'xs' ? iconSizes.xs : size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={`ds-select-wrapper ${fullWidth ? 'ds-select-wrapper--full' : ''} ${disabled ? 'ds-select-wrapper--disabled' : ''}`}>

package/src/components/Stepper.css

@@ -98,6 +98,22 @@
 
 /* Sizes */
 
+/* Extra Small */
+.ds-stepper--xs {
+  height: var(--height-xs);
+}
+
+.ds-stepper--xs .ds-stepper-button {
+  width: var(--height-xs);
+  padding: 0;
+}
+
+.ds-stepper--xs .ds-stepper-input {
+  font-size: var(--font-size-p3);
+  letter-spacing: var(--letter-spacing-p3);
+  padding: 0 var(--space-xs);
+}
+
 /* Small */
 .ds-stepper--small {
   height: var(--height-s);

package/src/components/Stepper.jsx

@@ -57,7 +57,7 @@ export function Stepper({
     disabled && 'ds-stepper--disabled',
   ].filter(Boolean).join(' ');
 
-  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
+  const iconSize = size === 'xs' ? iconSizes.xs : size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={className}>

package/src/components/Tabs.css

@@ -37,6 +37,13 @@
 }
 
 /* Sizes */
+.ds-tab--xs {
+  height: var(--height-xs);
+  padding: 0 calc(var(--height-xs) / 2);
+  font-size: var(--font-size-p3);
+  border-radius: var(--radius-xs);
+}
+
 .ds-tab--small {
   height: var(--height-s);
   padding: 0 calc(var(--height-s) / 2);

package/src/components/Textarea.css

@@ -87,6 +87,12 @@
 }
 
 /* Sizes */
+.ds-textarea--xs {
+  padding: var(--space-xs);
+  font-size: var(--font-size-p3);
+  border-radius: var(--radius-xs);
+}
+
 .ds-textarea--small {
   padding: var(--space-xs) var(--space-s);
   font-size: var(--font-size-p2);

package/src/components/Toggle.css

@@ -48,21 +48,42 @@
   user-select: none;
 }
 
+/* Extra Small */
+.ds-toggle--xs .ds-toggle__track {
+  width: calc(var(--icon-xs) * 1.75);
+  height: var(--icon-xs);
+  border-radius: calc(var(--icon-xs) / 2);
+  padding: 2px;
+}
+
+.ds-toggle--xs .ds-toggle__thumb {
+  width: calc(var(--icon-xs) - 4px);
+  height: calc(var(--icon-xs) - 4px);
+}
+
+.ds-toggle--xs .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+  transform: translateX(calc(var(--icon-xs) * 0.75));
+}
+
+.ds-toggle--xs .ds-toggle__label {
+  font-size: var(--font-size-p3);
+}
+
 /* 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;
+  width: calc(var(--icon-s) * 1.75);
+  height: var(--icon-s);
+  border-radius: calc(var(--icon-s) / 2);
+  padding: 2px;
 }
 
 .ds-toggle--small .ds-toggle__thumb {
-  width: calc(var(--height-s) - 8px);
-  height: calc(var(--height-s) - 8px);
+  width: calc(var(--icon-s) - 4px);
+  height: calc(var(--icon-s) - 4px);
 }
 
 .ds-toggle--small .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--height-s) * 0.75));
+  transform: translateX(calc(var(--icon-s) * 0.75));
 }
 
 .ds-toggle--small .ds-toggle__label {
@@ -71,21 +92,42 @@
 
 /* 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;
+  width: calc(var(--icon-m) * 1.75);
+  height: var(--icon-m);
+  border-radius: calc(var(--icon-m) / 2);
+  padding: 2px;
 }
 
 .ds-toggle--medium .ds-toggle__thumb {
-  width: calc(var(--height-m) - 10px);
-  height: calc(var(--height-m) - 10px);
+  width: calc(var(--icon-m) - 4px);
+  height: calc(var(--icon-m) - 4px);
 }
 
 .ds-toggle--medium .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
-  transform: translateX(calc(var(--height-m) * 0.75));
+  transform: translateX(calc(var(--icon-m) * 0.75));
 }
 
 .ds-toggle--medium .ds-toggle__label {
   font-size: var(--font-size-p1);
 }
+
+/* Large */
+.ds-toggle--large .ds-toggle__track {
+  width: calc(var(--icon-l) * 1.75);
+  height: var(--icon-l);
+  border-radius: calc(var(--icon-l) / 2);
+  padding: 3px;
+}
+
+.ds-toggle--large .ds-toggle__thumb {
+  width: calc(var(--icon-l) - 6px);
+  height: calc(var(--icon-l) - 6px);
+}
+
+.ds-toggle--large .ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
+  transform: translateX(calc(var(--icon-l) * 0.75));
+}
+
+.ds-toggle--large .ds-toggle__label {
+  font-size: var(--font-size-p1);
+}

package/src/components/Tooltip.jsx

@@ -12,6 +12,7 @@ export function Tooltip({
   const [offset, setOffset] = useState({ x: 0, arrowOffset: 0 });
   const wrapperRef = useRef(null);
   const tooltipRef = useRef(null);
+  const isTouchDevice = useRef(false);
 
   useEffect(() => {
     if (isVisible && !position && wrapperRef.current && tooltipRef.current) {
@@ -81,14 +82,51 @@ export function Tooltip({
     }
   }, [isVisible, computedPosition]);
 
+  // Close tooltip when clicking outside (for touch interfaces)
+  useEffect(() => {
+    if (!isVisible) return;
+
+    const handleClickOutside = (event) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setIsVisible(false);
+      }
+    };
+
+    document.addEventListener('touchstart', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, [isVisible]);
+
+  const handleTouchStart = () => {
+    isTouchDevice.current = true;
+    setIsVisible((prev) => !prev);
+  };
+
+  const handleMouseEnter = () => {
+    // Ignore mouse events on touch devices
+    if (!isTouchDevice.current) {
+      setIsVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    // Ignore mouse events on touch devices
+    if (!isTouchDevice.current) {
+      setIsVisible(false);
+    }
+  };
+
   if (!content) return children;
 
   return (
     <div
       ref={wrapperRef}
       className="ds-tooltip-wrapper"
-      onMouseEnter={() => setIsVisible(true)}
-      onMouseLeave={() => setIsVisible(false)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onTouchStart={handleTouchStart}
       {...props}
     >
       {children}

package/src/index.js

@@ -20,3 +20,5 @@ export { Accordion } from './components/Accordion';
 export { CodeAccordion } from './components/CodeAccordion';
 export { Tooltip } from './components/Tooltip';
 export { Toggle } from './components/Toggle';
+export { Checkbox } from './components/Checkbox';
+export { Radio } from './components/Radio';

package/src/styles/tokens.css

@@ -171,6 +171,7 @@
     /* =====================================
      * 5) Component heights
      * ===================================*/
+    --height-xs: 24px;
     --height-s: 32px;
     --height-m: 44px;
     --height-l: 56px;