@donkit-ai/design-system 0.2.11 → 0.2.13

package/README.md

@@ -89,53 +89,70 @@ function MyComponent() {
 
 #### Размеры иконок
 
-**Важно:** Размеры иконок фиксированные (не адаптивные) и зависят от контекста использования:
+Размеры иконок стандартизированы с помощью констант:
 
-- **20px** - компактные элементы
+```javascript
+import { iconSizes } from '@donkit-ai/design-system';
+
+// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl: 32 }
+```
+
+**Соответствие размеров компонентам:**
+
+- **16px (xs)** - очень мелкие элементы
+- **20px (s)** - компактные элементы
   - Small кнопки (`size="small"`)
   - Tabs (вкладки)
   - Modal (иконка закрытия)
+  - Accordion, CodeAccordion
 
-- **24px** - стандартные элементы
+- **24px (m)** - стандартные элементы
   - Medium кнопки (`size="medium"`, по умолчанию)
   - Input (иконки в полях ввода)
   - Alert (иконки статусов)
+  - Select (иконка выпадающего списка)
 
-- **28px** - крупные элементы
+- **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
 
+- **32px (xl)** - очень крупные элементы
+
 **Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
 
 #### Примеры использования
 
 ```javascript
 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={20} strokeWidth={1.5} />}>
+<Button size="small" icon={<Mail size={iconSizes.s} strokeWidth={1.5} />}>
   Send
 </Button>
-<Tab icon={<AlertCircle size={20} strokeWidth={1.5} />}>
+<Tab icon={<AlertCircle size={iconSizes.s} strokeWidth={1.5} />}>
   Alerts
 </Tab>
 
 // Medium button / Input / Alert
-<Button size="medium" icon={<Search size={24} strokeWidth={1.5} />}>
+<Button size="medium" icon={<Search size={iconSizes.m} strokeWidth={1.5} />}>
   Search
 </Button>
 <Input
-  icon={<Search size={24} strokeWidth={1.5} />}
+  icon={<Search size={iconSizes.m} strokeWidth={1.5} />}
   placeholder="Search..."
 />
 <Alert
   type="success"
-  icon={<Check size={24} strokeWidth={1.5} />}
+  icon={<Check size={iconSizes.m} strokeWidth={1.5} />}
 />
 
 // Large button
-<Button size="large" icon={<Mail size={28} strokeWidth={1.5} />}>
+<Button size="large" icon={<Mail size={iconSizes.l} strokeWidth={1.5} />}>
   Send Email
 </Button>
+
+// Extra Large icons
+<Mail size={iconSizes.xl} strokeWidth={1.5} />
 ```
 
 ### 3. Переключение темы
@@ -154,9 +171,9 @@ document.documentElement.setAttribute('data-theme', 'light');
 
 #### Базовые примитивы
 - `--color-white`: #FFFAFA
-- `--color-white-65/50/40/20/15/13/06`: rgba с прозрачностью 65%, 50%, 40%, 20%, 15%, 13%, 6%
+- `--color-white-95/92/65/50/40/20/15/13/06`: rgba с прозрачностью 95%, 92%, 65%, 50%, 40%, 20%, 15%, 13%, 6%
 - `--color-black`: #0E0F11
-- `--color-black-65/60/50/40/20/10/08/04`: rgba с прозрачностью 65%, 60%, 50%, 40%, 20%, 10%, 8%, 4%
+- `--color-black-95/65/60/50/40/20/10/08/04`: rgba с прозрачностью 95%, 65%, 60%, 50%, 40%, 20%, 10%, 8%, 4%
 - `--color-red`: #EA6464
 - `--color-red-90`: rgba с прозрачностью 90%
 
@@ -170,7 +187,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - `--color-border` - границы
 - `--color-border-hover` - границы при hover (Dark: white-40, Light: black-40)
 - `--color-border-selected` - границы выбранного элемента (Dark: white-50, Light: black-50)
-- `--color-txt-icon-1` - основной текст/иконки (100%)
+- `--color-txt-icon-1` - основной текст/иконки (Dark: white-92, Light: black-95)
 - `--color-txt-icon-2` - вторичный текст/иконки (65%)
 - `--color-accent` - акцентный цвет
 - `--color-accent-hover` - акцент при hover
@@ -203,7 +220,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - `--font-size-h1`: 32px → 40px → 40px
 - `--font-size-h2`: 28px → 36px → 36px
 - `--font-size-h3`: 24px → 28px → 28px
-- `--font-size-h4`: 18px → 20px → 20px
+- `--font-size-h4`: 20px → 24px → 24px
 - `--font-size-p1`: 16px → 18px → 18px
 - `--font-size-p2`: 14px → 16px → 16px
 - `--font-size-p3`: 12px → 14px → 14px
@@ -214,7 +231,7 @@ document.documentElement.setAttribute('data-theme', 'light');
 - Меньше 14px → +6% (0.06em)
 
 Адаптивные значения трекинга:
-- `--letter-spacing-h4`: 0.02em → 0 → 0 (18px / 20px / 20px)
+- `--letter-spacing-h4`: 0 → 0 → 0 (20px / 24px / 24px - без трекинга)
 - `--letter-spacing-p1`: 0.02em → 0.02em → 0.02em (16px / 18px / 18px)
 - `--letter-spacing-p2`: 0.04em → 0.02em → 0.02em (14px / 16px / 16px)
 - `--letter-spacing-p3`: 0.06em → 0.04em → 0.04em (12px / 14px / 14px)

package/package.json

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

package/src/components/Accordion.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Accordion.css';
 
 export function Accordion({
@@ -20,7 +21,7 @@ export function Accordion({
       >
         <span className="ds-accordion__title">{title}</span>
         <ChevronDown
-          size={20}
+          size={iconSizes.s}
           strokeWidth={1.5}
           className={`ds-accordion__icon ${isExpanded ? 'ds-accordion__icon--expanded' : ''}`}
         />

package/src/components/Alert.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Info, CheckCircle, AlertTriangle, XCircle, X } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Alert.css';
 
 const ICON_MAP = {
@@ -24,7 +25,7 @@ export function Alert({
     <div className={`ds-alert ds-alert--${variant} ${!title ? 'ds-alert--no-title' : ''}`} role={alertRole} {...props}>
       {Icon && (
         <div className="ds-alert__icon">
-          <Icon size={24} strokeWidth={1.5} />
+          <Icon size={iconSizes.m} strokeWidth={1.5} />
         </div>
       )}
       <div className="ds-alert__content">
@@ -38,7 +39,7 @@ export function Alert({
           onClick={onClose}
           aria-label="Close alert"
         >
-          <X size={24} strokeWidth={1.5} />
+          <X size={iconSizes.m} strokeWidth={1.5} />
         </button>
       )}
     </div>

package/src/components/CodeAccordion.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './CodeAccordion.css';
 
 export function CodeAccordion({
@@ -20,7 +21,7 @@ export function CodeAccordion({
       >
         <span className="ds-code-accordion__title">{title}</span>
         <ChevronDown
-          size={20}
+          size={iconSizes.s}
           strokeWidth={1.5}
           className={`ds-code-accordion__icon ${isExpanded ? 'ds-code-accordion__icon--expanded' : ''}`}
         />

package/src/components/Modal.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { X } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import { Button } from './Button';
 import './Modal.css';
 
@@ -52,7 +53,7 @@ export function Modal({
               <Button
                 variant="ghost"
                 size="small"
-                icon={<X size={20} strokeWidth={1.5} />}
+                icon={<X size={iconSizes.s} strokeWidth={1.5} />}
                 onClick={onClose}
                 aria-label="Close modal"
               />

package/src/components/Select.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ChevronDown } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Select.css';
 
 export function Select({
@@ -52,7 +53,7 @@ export function Select({
   }, [isOpen]);
 
   const selectedOption = options.find(opt => opt.value === value);
-  const iconSize = size === 'small' ? 20 : 24;
+  const iconSize = 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.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Minus, Plus } from 'lucide-react';
+import { iconSizes } from '../styles/iconSizes';
 import './Stepper.css';
 
 export function Stepper({
@@ -56,7 +57,7 @@ export function Stepper({
     disabled && 'ds-stepper--disabled',
   ].filter(Boolean).join(' ');
 
-  const iconSize = size === 'small' ? 20 : 24;
+  const iconSize = size === 'small' ? iconSizes.s : iconSizes.m;
 
   return (
     <div className={className}>

package/src/components/Tooltip.css

@@ -25,14 +25,14 @@
 .ds-tooltip--top {
   bottom: calc(100% + 8px);
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)));
 }
 
 .ds-tooltip--top::after {
   content: '';
   position: absolute;
   top: 100%;
-  left: 50%;
+  left: calc(50% + var(--arrow-offset, 0px));
   transform: translateX(-50%);
   border: 4px solid transparent;
   border-top-color: var(--color-border);
@@ -42,7 +42,7 @@
   content: '';
   position: absolute;
   top: 100%;
-  left: 50%;
+  left: calc(50% + var(--arrow-offset, 0px));
   transform: translateX(-50%);
   border: 3px solid transparent;
   border-top-color: var(--color-bg);
@@ -53,14 +53,14 @@
 .ds-tooltip--bottom {
   top: calc(100% + 8px);
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(calc(-50% + var(--tooltip-offset-x, 0px)));
 }
 
 .ds-tooltip--bottom::after {
   content: '';
   position: absolute;
   bottom: 100%;
-  left: 50%;
+  left: calc(50% + var(--arrow-offset, 0px));
   transform: translateX(-50%);
   border: 4px solid transparent;
   border-bottom-color: var(--color-border);
@@ -70,7 +70,7 @@
   content: '';
   position: absolute;
   bottom: 100%;
-  left: 50%;
+  left: calc(50% + var(--arrow-offset, 0px));
   transform: translateX(-50%);
   border: 3px solid transparent;
   border-bottom-color: var(--color-bg);

package/src/components/Tooltip.jsx

@@ -9,6 +9,7 @@ export function Tooltip({
 }) {
   const [isVisible, setIsVisible] = useState(false);
   const [computedPosition, setComputedPosition] = useState(position || 'top');
+  const [offset, setOffset] = useState({ x: 0, arrowOffset: 0 });
   const wrapperRef = useRef(null);
   const tooltipRef = useRef(null);
 
@@ -50,6 +51,36 @@ export function Tooltip({
     }
   }, [isVisible, position]);
 
+  // Check viewport boundaries and adjust position
+  useEffect(() => {
+    if (isVisible && tooltipRef.current && wrapperRef.current) {
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const PADDING = 8; // minimum distance from viewport edge
+
+      let xOffset = 0;
+      let arrowShift = 0;
+
+      // For top/bottom positions, check horizontal overflow
+      if (computedPosition === 'top' || computedPosition === 'bottom') {
+        // Check if tooltip overflows on the right
+        if (tooltipRect.right > viewportWidth - PADDING) {
+          xOffset = viewportWidth - PADDING - tooltipRect.right;
+          arrowShift = -xOffset; // arrow moves opposite direction
+        }
+        // Check if tooltip overflows on the left
+        else if (tooltipRect.left < PADDING) {
+          xOffset = PADDING - tooltipRect.left;
+          arrowShift = -xOffset; // arrow moves opposite direction
+        }
+      }
+
+      setOffset({ x: xOffset, arrowOffset: arrowShift });
+    } else {
+      setOffset({ x: 0, arrowOffset: 0 });
+    }
+  }, [isVisible, computedPosition]);
+
   if (!content) return children;
 
   return (
@@ -66,6 +97,10 @@ export function Tooltip({
           ref={tooltipRef}
           className={`ds-tooltip ds-tooltip--${computedPosition}`}
           role="tooltip"
+          style={{
+            '--tooltip-offset-x': `${offset.x}px`,
+            '--arrow-offset': `${offset.arrowOffset}px`,
+          }}
         >
           {content}
         </div>

package/src/index.js

@@ -1,5 +1,6 @@
 // Styles
 export * from './styles/tokens.css';
+export { iconSizes } from './styles/iconSizes';
 
 // Components
 export { Button } from './components/Button';

package/src/styles/iconSizes.js

@@ -0,0 +1,15 @@
+/**
+ * Icon sizes matching CSS variables
+ * --icon-xs: 16px
+ * --icon-s: 20px
+ * --icon-m: 24px
+ * --icon-l: 28px
+ * --icon-xl: 32px
+ */
+export const iconSizes = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+  xl: 32,
+};

package/src/styles/tokens.css

@@ -11,6 +11,7 @@
     /* Color primitives - white */
     --color-white: #FFFAFA;
     --color-white-95: rgba(255, 250, 250, 0.95);
+    --color-white-92: rgba(255, 250, 250, 0.92);
     --color-white-65: rgba(255, 250, 250, 0.65);
     --color-white-50: rgba(255, 250, 250, 0.5);
     --color-white-40: rgba(255, 250, 250, 0.4);
@@ -67,7 +68,7 @@
     --color-border: var(--color-white-20);
     --color-border-hover: var(--color-white-40);
     --color-border-selected: var(--color-white-50);
-    --color-txt-icon-1: var(--color-white-95);
+    --color-txt-icon-1: var(--color-white-92);
     --color-txt-icon-2: var(--color-white-65);
     --color-accent: var(--color-red);
     --color-accent-hover: var(--color-red-90);
@@ -173,6 +174,13 @@
     --height-s: 32px;
     --height-m: 44px;
     --height-l: 56px;
+
+    /* Icon sizes */
+    --icon-xs: 16px;
+    --icon-s: 20px;
+    --icon-m: 24px;
+    --icon-l: 28px;
+    --icon-xl: 32px;
   }
 
   :root {
@@ -188,7 +196,7 @@
     --font-size-h1: 32px;
     --font-size-h2: 28px;
     --font-size-h3: 24px;
-    --font-size-h4: 18px;
+    --font-size-h4: 20px;
     --font-size-p1: 16px;
     --font-size-p2: 14px;
     --font-size-p3: 12px;
@@ -197,7 +205,7 @@
     --letter-spacing-h1: 0;
     --letter-spacing-h2: 0;
     --letter-spacing-h3: 0;
-    --letter-spacing-h4: 0.02em; /* 18px → +2% */
+    --letter-spacing-h4: 0; /* 20px → no tracking */
     --letter-spacing-p1: 0.02em; /* 16px → +2% */
     --letter-spacing-p2: 0.04em; /* 14px → +4% */
     --letter-spacing-p3: 0.06em; /* 12px → +6% */
@@ -209,12 +217,12 @@
       --font-size-h1: 40px;
       --font-size-h2: 36px;
       --font-size-h3: 28px;
-      --font-size-h4: 20px;
+      --font-size-h4: 24px;
       --font-size-p1: 18px;
       --font-size-p2: 16px;
       --font-size-p3: 14px;
 
-      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-h4: 0; /* 24px → no tracking */
       --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
       --letter-spacing-p3: 0.04em; /* 14px → +4% */
@@ -227,12 +235,12 @@
       --font-size-h1: 40px;
       --font-size-h2: 36px;
       --font-size-h3: 28px;
-      --font-size-h4: 20px;
+      --font-size-h4: 24px;
       --font-size-p1: 18px;
       --font-size-p2: 16px;
       --font-size-p3: 14px;
 
-      --letter-spacing-h4: 0; /* 20px → no tracking */
+      --letter-spacing-h4: 0; /* 24px → no tracking */
       --letter-spacing-p1: 0.02em; /* 18px → +2% */
       --letter-spacing-p2: 0.02em; /* 16px → +2% */
       --letter-spacing-p3: 0.04em; /* 14px → +4% */