@donkit-ai/design-system 0.2.13 → 0.2.15

package/README.md

@@ -37,8 +37,8 @@ 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)
 - **Card** - карточки двух типов: info (информационная, прозрачный фон) и interactive (интерактивная с hover эффектом)
@@ -81,6 +81,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. Иконки
@@ -94,7 +105,7 @@ function MyComponent() {
 ```javascript
 import { iconSizes } from '@donkit-ai/design-system';
 
-// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl: 32 }
+// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl: 48 }
 ```
 
 **Соответствие размеров компонентам:**
@@ -115,7 +126,7 @@ import { iconSizes } from '@donkit-ai/design-system';
 - **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
 
-- **32px (xl)** - очень крупные элементы
+- **48px (xl)** - очень крупные элементы
 
 **Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
 
@@ -382,6 +393,21 @@ import { AlertCircle } from 'lucide-react';
   <Tab selected>Active</Tab>
   <Tab disabled>Disabled</Tab>
 </Tabs>
+
+// As links (с href) - рендерит <a> вместо <button>
+// При обычном клике: вызывается onClick (preventDefault автоматический)
+// При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
+<Tabs size="medium">
+  <Tab selected href="/overview" onClick={() => navigate('/overview')}>
+    Overview
+  </Tab>
+  <Tab href="/details" onClick={() => navigate('/details')}>
+    Details
+  </Tab>
+  <Tab href="/settings" onClick={() => navigate('/settings')}>
+    Settings
+  </Tab>
+</Tabs>
 ```
 
 **Стили:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "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/Card.css

@@ -8,10 +8,10 @@
 .ds-card--interactive {
   cursor: pointer;
   background-color: var(--color-item-bg);
+  border: none;
 }
 
 .ds-card--interactive:hover {
-  border-color: var(--color-border-hover);
   background-color: var(--color-item-bg-hover);
 }
 

package/src/components/Tabs.css

@@ -17,6 +17,7 @@
   color: var(--color-txt-icon-1);
   transition: border-color var(--transition-normal), background-color var(--transition-normal);
   white-space: nowrap;
+  text-decoration: none;
 }
 
 /* Variants */
@@ -25,7 +26,7 @@
   color: var(--color-txt-icon-2);
 }
 
-.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled) {
+.ds-tab--ghost:hover:not(.ds-tab--selected):not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-item-bg-hover);
   color: var(--color-txt-icon-1);
 }
@@ -58,9 +59,11 @@
   gap: var(--space-s);
 }
 
-.ds-tab:disabled {
+.ds-tab:disabled,
+.ds-tab[aria-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .ds-tab-icon {

package/src/components/Tabs.jsx

@@ -14,7 +14,7 @@ export function Tabs({ children, size = 'medium', variant = 'ghost', ...props })
   );
 }
 
-export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, ...props }) {
+export function Tab({ children, selected = false, onClick, size = 'medium', variant = 'ghost', disabled = false, icon, href, ...props }) {
   const isIconOnly = icon && !children;
 
   const className = [
@@ -25,6 +25,47 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
     isIconOnly && 'ds-tab--icon-only',
   ].filter(Boolean).join(' ');
 
+  const content = (
+    <>
+      {icon && <span className="ds-tab-icon">{icon}</span>}
+      {children}
+    </>
+  );
+
+  // 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"
+        aria-current={selected ? 'page' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        className={className}
+        href={disabled ? undefined : href}
+        onClick={handleClick}
+        {...props}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  // Render as button (default)
   return (
     <button
       role="tab"
@@ -34,8 +75,7 @@ export function Tab({ children, selected = false, onClick, size = 'medium', vari
       disabled={disabled}
       {...props}
     >
-      {icon && <span className="ds-tab-icon">{icon}</span>}
-      {children}
+      {content}
     </button>
   );
 }

package/src/styles/iconSizes.js

@@ -4,12 +4,12 @@
  * --icon-s: 20px
  * --icon-m: 24px
  * --icon-l: 28px
- * --icon-xl: 32px
+ * --icon-xl: 48px
  */
 export const iconSizes = {
   xs: 16,
   s: 20,
   m: 24,
   l: 28,
-  xl: 32,
+  xl: 48,
 };

package/src/styles/tokens.css

@@ -180,7 +180,7 @@
     --icon-s: 20px;
     --icon-m: 24px;
     --icon-l: 28px;
-    --icon-xl: 32px;
+    --icon-xl: 48px;
   }
 
   :root {