@donkit-ai/design-system 0.2.12 → 0.2.14

package/README.md

@@ -94,7 +94,7 @@ function MyComponent() {
 ```javascript
 import { iconSizes } from '@donkit-ai/design-system';
 
-// iconSizes = { xs: 16, s: 20, m: 24, l: 28 }
+// iconSizes = { xs: 16, s: 20, m: 24, l: 28, xl: 48 }
 ```
 
 **Соответствие размеров компонентам:**
@@ -115,6 +115,8 @@ import { iconSizes } from '@donkit-ai/design-system';
 - **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
 
+- **48px (xl)** - очень крупные элементы
+
 **Всегда используется `strokeWidth={1.5}`** для единообразия дизайна.
 
 #### Примеры использования
@@ -148,6 +150,9 @@ import { iconSizes } from '@donkit-ai/design-system';
 <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. Переключение темы
@@ -377,6 +382,20 @@ import { AlertCircle } from 'lucide-react';
   <Tab selected>Active</Tab>
   <Tab disabled>Disabled</Tab>
 </Tabs>
+
+// As links (с href) - рендерит <a> вместо <button>
+// Поддерживает открытие в новой вкладке и работает с роутингом
+<Tabs size="medium">
+  <Tab selected href="/overview">
+    Overview
+  </Tab>
+  <Tab href="/details">
+    Details
+  </Tab>
+  <Tab href="/settings">
+    Settings
+  </Tab>
+</Tabs>
 ```
 
 **Стили:**

package/package.json

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

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,31 @@ 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) {
+    return (
+      <a
+        role="tab"
+        aria-current={selected ? 'page' : undefined}
+        aria-disabled={disabled ? 'true' : undefined}
+        className={className}
+        href={disabled ? undefined : href}
+        onClick={disabled ? (e) => e.preventDefault() : onClick}
+        {...props}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  // Render as button (default)
   return (
     <button
       role="tab"
@@ -34,8 +59,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/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/styles/iconSizes.js

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

package/src/styles/tokens.css

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