@donkit-ai/design-system 0.2.18 → 0.3.0

package/README.md

@@ -37,19 +37,22 @@ 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** - переключатель для включения/выключения опций (xs, small, medium, large)
-- **Checkbox** - чекбокс для выбора опций (xs, small, medium, large)
-- **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом)
+- **Button** - кнопки с вариантами (primary, secondary, ghost) и размерами (xs, s, m, l). Поддерживает `href` для рендера как ссылка
+- **Tabs** - вкладки с состоянием selected в четырех размерах (xs, s, m, l). Поддерживает `href` для рендера как ссылка
+- **Input** - текстовые поля с поддержкой иконок, ошибок и подсказок (xs, s, m)
+- **Textarea** - многострочное текстовое поле (xs, s, m)
+- **Select** - выпадающий список с кастомным дизайном (xs, s, m)
+- **Stepper** - числовое поле с кнопками +/- для изменения значения (xs, s, m)
+- **Toggle** - переключатель для включения/выключения опций (xs, s, m, l)
+- **Checkbox** - чекбокс для выбора опций (xs, s, m, l)
+- **Radio** - радиокнопка для выбора одного варианта из группы (xs, s, m, l)
+- **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом). Поддерживает `href` для рендера как ссылка
 - **Typography** - H1-H4, P1-P3 компоненты
 - **Code** - inline и block код с monospace шрифтом
 - **Link** - ссылки акцентным цветом, при hover цвет меняется и появляется подчеркивание
-- **Badge** - бейджи для статусов (success, error, warning, accent) в двух размерах (small, medium)
+- **Badge** - бейджи для статусов (success, error, warning, accent) в двух размерах (s, m)
 - **Modal** - модальные окна с header и footer
-- **Select** - выпадающий список с кастомным дизайном (small, medium)
+- **Select** - выпадающий список с кастомным дизайном (s, m)
 
 ## Использование в проекте
 
@@ -75,7 +78,7 @@ function MyComponent() {
       <P1 secondary>This is a demo</P1>
       <Button
         variant="primary"
-        size="medium"
+        size="m"
         icon={<Mail size={24} strokeWidth={1.5} />}
       >
         Send Email
@@ -113,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="s"`)
+  - Small табы (`size="s"`)
   - Modal (иконка закрытия)
   - Accordion, CodeAccordion
 
 - **24px (m)** - стандартные элементы
-  - Medium кнопки (`size="medium"`, по умолчанию)
+  - Medium кнопки (`size="m"`, по умолчанию)
+  - Medium табы (`size="m"`)
   - Input (иконки в полях ввода)
   - Alert (иконки статусов)
   - Select (иконка выпадающего списка)
 
 - **28px (l)** - крупные элементы
-  - Large кнопки (`size="large"`)
+  - Large кнопки (`size="l"`)
+  - Large табы (`size="l"`)
 
 - **48px (xl)** - очень крупные элементы
 
@@ -139,7 +147,7 @@ import { Mail, Search, Eye, EyeOff, AlertCircle, Check, X } from 'lucide-react';
 import { iconSizes } from '@donkit-ai/design-system';
 
 // Small button / Tabs / Modal
-<Button size="small" icon={<Mail size={iconSizes.s} strokeWidth={1.5} />}>
+<Button size="s" icon={<Mail size={iconSizes.s} strokeWidth={1.5} />}>
   Send
 </Button>
 <Tab icon={<AlertCircle size={iconSizes.s} strokeWidth={1.5} />}>
@@ -147,7 +155,7 @@ import { iconSizes } from '@donkit-ai/design-system';
 </Tab>
 
 // Medium button / Input / Alert
-<Button size="medium" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
+<Button size="m" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
   Search
 </Button>
 <Input
@@ -160,7 +168,7 @@ import { iconSizes } from '@donkit-ai/design-system';
 />
 
 // Large button
-<Button size="large" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
+<Button size="l" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
   Send Email
 </Button>
 
@@ -334,20 +342,23 @@ document.documentElement.setAttribute('data-theme', 'light');
 <Button variant="ghost">Ghost</Button>
 
 // Размеры с соответствующими иконками
-<Button size="small" icon={<Mail size={20} strokeWidth={1.5} />}>
+<Button size="xs" icon={<Mail size={16} strokeWidth={1.5} />}>
+  Extra Small
+</Button>
+<Button size="s" icon={<Mail size={20} strokeWidth={1.5} />}>
   Small
 </Button>
-<Button size="medium" icon={<Mail size={24} strokeWidth={1.5} />}>
+<Button size="m" icon={<Mail size={24} strokeWidth={1.5} />}>
   Medium
 </Button>
-<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+<Button size="l" icon={<Mail size={28} strokeWidth={1.5} />}>
   Large
 </Button>
 
 // С fullWidth
 <Button
   variant="primary"
-  size="medium"
+  size="m"
   icon={<Mail size={24} strokeWidth={1.5} />}
   fullWidth
 >
@@ -364,7 +375,7 @@ import { Tabs, Tab } from '@donkit-ai/design-system';
 import { AlertCircle } from 'lucide-react';
 
 // Basic tabs
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected={selectedTab === 'tab1'} onClick={() => setSelectedTab('tab1')}>
     Overview
   </Tab>
@@ -376,8 +387,9 @@ import { AlertCircle } from 'lucide-react';
   </Tab>
 </Tabs>
 
-// With icons (всегда 20px для Tabs)
-<Tabs size="small">
+// With icons (размер иконки соответствует размеру таба)
+// xs: 16px, small: 20px, medium: 24px, large: 28px
+<Tabs size="s">
   <Tab
     selected={selectedTab === 'alerts'}
     onClick={() => setSelectedTab('alerts')}
@@ -391,7 +403,7 @@ import { AlertCircle } from 'lucide-react';
 </Tabs>
 
 // Disabled tab
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected>Active</Tab>
   <Tab disabled>Disabled</Tab>
 </Tabs>
@@ -399,7 +411,7 @@ import { AlertCircle } from 'lucide-react';
 // As links (с href) - рендерит <a> вместо <button>
 // При обычном клике: вызывается onClick (preventDefault автоматический)
 // При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
-<Tabs size="medium">
+<Tabs size="m">
   <Tab selected href="/overview" onClick={() => navigate('/overview')}>
     Overview
   </Tab>
@@ -417,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 состояния
 
@@ -427,7 +439,7 @@ import { AlertCircle } from 'lucide-react';
 // Basic input
 <Input
   label="Email"
-  size="medium"
+  size="m"
   type="email"
   placeholder="email@example.com"
   hint="We'll never share your email"
@@ -436,7 +448,7 @@ import { AlertCircle } from 'lucide-react';
 // Left icon (informational) - size small
 <Input
   label="Search"
-  size="small"
+  size="s"
   icon={<Search size={20} strokeWidth={1.5} />}
   placeholder="Search..."
 />
@@ -444,7 +456,7 @@ import { AlertCircle } from 'lucide-react';
 // Left icon - size medium
 <Input
   label="Search"
-  size="medium"
+  size="m"
   icon={<Search size={24} strokeWidth={1.5} />}
   placeholder="Search..."
 />
@@ -452,7 +464,7 @@ import { AlertCircle } from 'lucide-react';
 // Right icon (action with hover) - size medium
 <Input
   label="Password"
-  size="medium"
+  size="m"
   type={showPassword ? 'text' : 'password'}
   iconRight={showPassword ? <EyeOff size={24} strokeWidth={1.5} /> : <Eye size={24} strokeWidth={1.5} />}
   onIconRightClick={() => setShowPassword(!showPassword)}
@@ -476,7 +488,7 @@ import { AlertCircle } from 'lucide-react';
 ```jsx
 <Select
   label="Choose option"
-  size="medium"
+  size="m"
   value={value}
   onChange={setValue}
   options={[
@@ -495,7 +507,7 @@ import { AlertCircle } from 'lucide-react';
 // Basic stepper
 <Stepper
   label="Quantity"
-  size="medium"
+  size="m"
   value={quantity}
   onChange={setQuantity}
   min={1}
@@ -506,7 +518,7 @@ import { AlertCircle } from 'lucide-react';
 // Small size
 <Stepper
   label="Price"
-  size="small"
+  size="s"
   value={price}
   onChange={setPrice}
   min={0}
@@ -539,7 +551,7 @@ import { AlertCircle } from 'lucide-react';
 - `min` - минимальное значение (default: 0)
 - `max` - максимальное значение (default: 100)
 - `step` - шаг изменения (default: 1)
-- `size` - размер: "small" или "medium" (default: "medium")
+- `size` - размер: "s" или "m" (default: "medium")
 - `label` - подпись поля
 - `hint` - подсказка под полем
 - `error` - текст ошибки (показывается вместо hint)
@@ -571,7 +583,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Small size (20px)
 <Toggle
-  size="small"
+  size="s"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Auto-save"
@@ -579,7 +591,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Medium size (24px, default)
 <Toggle
-  size="medium"
+  size="m"
   checked={darkMode}
   onChange={setDarkMode}
   label="Dark mode"
@@ -587,7 +599,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Large size (28px)
 <Toggle
-  size="large"
+  size="l"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Enable feature"
@@ -651,7 +663,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Small size (20px)
 <Checkbox
-  size="small"
+  size="s"
   checked={isEnabled}
   onChange={setIsEnabled}
   label="Enable feature"
@@ -659,7 +671,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Medium size (24px, default)
 <Checkbox
-  size="medium"
+  size="m"
   checked={isSubscribed}
   onChange={setIsSubscribed}
   label="Subscribe to newsletter"
@@ -667,7 +679,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Large size (28px)
 <Checkbox
-  size="large"
+  size="l"
   checked={isAccepted}
   onChange={setIsAccepted}
   label="I accept the terms"
@@ -709,6 +721,129 @@ import { AlertCircle } from 'lucide-react';
 - Невыбранное состояние: фон `--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="s"
+  checked={size === 'small'}
+  onChange={() => setSize('small')}
+  name="size"
+  value="small"
+  label="Small"
+/>
+
+// Medium size (24px, default)
+<Radio
+  size="m"
+  checked={size === 'medium'}
+  onChange={() => setSize('medium')}
+  name="size"
+  value="medium"
+  label="Medium"
+/>
+
+// Large size (28px)
+<Radio
+  size="l"
+  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
 
 Карточки бывают двух типов:
@@ -734,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
 
@@ -768,15 +937,15 @@ import { AlertCircle } from 'lucide-react';
 
 ```jsx
 // Medium size (default)
-<Badge variant="success" size="medium">Success</Badge>
-<Badge variant="error" size="medium">Error</Badge>
-<Badge variant="warning" size="medium">Warning</Badge>
-<Badge variant="info" size="medium">Info</Badge>
+<Badge variant="success" size="m">Success</Badge>
+<Badge variant="error" size="m">Error</Badge>
+<Badge variant="warning" size="m">Warning</Badge>
+<Badge variant="info" size="m">Info</Badge>
 
 // Small size
-<Badge variant="success" size="small">Success</Badge>
-<Badge variant="error" size="small">Error</Badge>
-<Badge variant="warning" size="small">Warning</Badge>
+<Badge variant="success" size="s">Success</Badge>
+<Badge variant="error" size="s">Error</Badge>
+<Badge variant="warning" size="s">Warning</Badge>
 
 // Variants
 <Badge variant="default">Default</Badge>
@@ -803,16 +972,16 @@ import { AlertCircle } from 'lucide-react';
 <Modal
   title="Modal Title"
   onClose={handleClose}
-  size="medium"
+  size="m"
 >
   <P1>Modal content here...</P1>
   <Input label="Name" placeholder="Enter name" />
 
   <ModalFooter>
-    <Button variant="secondary" size="medium" onClick={handleClose}>
+    <Button variant="secondary" size="m" onClick={handleClose}>
       Cancel
     </Button>
-    <Button variant="primary" size="medium">
+    <Button variant="primary" size="m">
       Submit
     </Button>
   </ModalFooter>

package/package.json

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

package/src/components/Badge.css

@@ -7,14 +7,14 @@
 }
 
 /* Sizes */
-.ds-badge--small {
+.ds-badge--s {
   padding: 0 4px;
   font-size: var(--font-size-p3);
   letter-spacing: var(--letter-spacing-p3);
   border-radius: var(--radius-xs);
 }
 
-.ds-badge--medium {
+.ds-badge--m {
   padding: 2px var(--space-xs);
   font-size: var(--font-size-p2);
   letter-spacing: var(--letter-spacing-p2);

package/src/components/Badge.jsx

@@ -4,7 +4,7 @@ import './Badge.css';
 export function Badge({
   children,
   variant = 'default',
-  size = 'medium',
+  size = 'm',
   role,
   ...props
 }) {

package/src/components/Button.css

@@ -61,21 +61,28 @@
 }
 
 /* Sizes */
-.ds-button--small {
+.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--s {
   height: var(--height-s);
   padding: 0 calc(var(--height-s) / 2);
   font-size: var(--font-size-p2);
   border-radius: var(--radius-xs);
 }
 
-.ds-button--medium {
+.ds-button--m {
   height: var(--height-m);
   padding: 0 calc(var(--height-m) / 2);
   font-size: var(--font-size-p1);
   border-radius: var(--radius-s);
 }
 
-.ds-button--large {
+.ds-button--l {
   height: var(--height-l);
   padding: 0 calc(var(--height-l) / 2);
   font-size: var(--font-size-h4);

package/src/components/Button.jsx

@@ -4,7 +4,7 @@ import './Button.css';
 export function Button({
   children,
   variant = 'primary',
-  size = 'medium',
+  size = 'm',
   fullWidth = false,
   icon,
   disabled = false,

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,22 +13,28 @@
   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;
 }
 
-.ds-card--small {
+.ds-card--s {
   padding: var(--space-s);
 }
 
-.ds-card--medium {
+.ds-card--m {
   padding: var(--space-m);
 }
 
-.ds-card--large {
+.ds-card--l {
   padding: var(--space-l);
 }

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 (