@donkit-ai/design-system 0.2.12 → 0.2.13

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: 32 }
 ```
 
 **Соответствие размеров компонентам:**
@@ -115,6 +115,8 @@ import { iconSizes } from '@donkit-ai/design-system';
 - **28px (l)** - крупные элементы
   - Large кнопки (`size="large"`)
 
+- **32px (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. Переключение темы

package/package.json

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

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: 32px
  */
 export const iconSizes = {
   xs: 16,
   s: 20,
   m: 24,
   l: 28,
+  xl: 32,
 };

package/src/styles/tokens.css

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