@donkit-ai/design-system 0.3.0 → 0.3.1

package/README.md

@@ -73,7 +73,7 @@ import { Mail } from 'lucide-react';
 
 function MyComponent() {
   return (
-    <Card padding="medium">
+    <Card padding="m">
       <H1>Welcome</H1>
       <P1 secondary>This is a demo</P1>
       <Button
@@ -852,7 +852,7 @@ import { AlertCircle } from 'lucide-react';
 // Card Info (по умолчанию)
 // Информационная карточка без интерактивности
 // Прозрачный фон, только border
-<Card padding="medium" variant="info">
+<Card padding="m" variant="info">
   <H4>Card Title</H4>
   <P1>Information content</P1>
 </Card>
@@ -860,21 +860,21 @@ import { AlertCircle } from 'lucide-react';
 // Card Interactive
 // Интерактивная карточка с hover эффектом
 // При hover меняется фон и border
-<Card padding="large" variant="interactive" onClick={handleClick}>
+<Card padding="l" variant="interactive" onClick={handleClick}>
   <H4>Clickable Card</H4>
   <P1>Interactive content</P1>
 </Card>
 
 // Размеры padding
-<Card padding="small">Small padding</Card>
-<Card padding="medium">Medium padding</Card>
-<Card padding="large">Large padding</Card>
+<Card padding="s">s padding</Card>
+<Card padding="m">m padding</Card>
+<Card padding="l">l padding</Card>
 
 // Card как ссылка (рендерит <a> вместо <div>)
 // При обычном клике: вызывается onClick (preventDefault автоматический)
 // При Cmd/Ctrl+Click или Middle Click: открывается новая вкладка
 <Card
-  padding="medium"
+  padding="m"
   variant="interactive"
   href="/dashboard"
   onClick={() => navigate('/dashboard')}
@@ -884,7 +884,7 @@ import { AlertCircle } from 'lucide-react';
 </Card>
 
 <Card
-  padding="medium"
+  padding="m"
   variant="interactive"
   href="https://example.com"
 >
@@ -894,7 +894,7 @@ import { AlertCircle } from 'lucide-react';
 
 // Disabled Card Link
 <Card
-  padding="medium"
+  padding="m"
   variant="interactive"
   href="/disabled"
   disabled

package/package.json

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

package/src/components/Card.css

@@ -1,4 +1,7 @@
 .ds-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
   background-color: transparent;
   border-radius: var(--radius-s);
   border: 1px solid var(--color-border);

package/src/components/Card.jsx

@@ -3,7 +3,7 @@ import './Card.css';
 
 export function Card({
   children,
-  padding = 'medium',
+  padding = 'm',
   variant = 'info',
   hover = false, // deprecated, use variant="interactive"
   onClick,