cynx-ui 1.3.21 → 1.3.23

package/components/Select.jsx

@@ -2,6 +2,13 @@ import { useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } fr
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X } from 'lucide-react';
 
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, searchHeight: 22, searchFont: 10.5, itemMinHeight: 18, itemPadding: '3px 5px' },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, searchHeight: 26, searchFont: 11.5, itemMinHeight: 22, itemPadding: '4.5px 7px' },
+  md: { height: 32, fontSize: 13, paddingH: 10, searchHeight: 32, searchFont: 12.5, itemMinHeight: 28, itemPadding: '8px 10px' },
+  lg: { height: 36, fontSize: 14, paddingH: 14, searchHeight: 34, searchFont: 13, itemMinHeight: 32, itemPadding: '9px 12px' },
+};
+
 const KEYFRAMES = `
 @keyframes selFadeInDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
 @keyframes selFadeInUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@@ -158,9 +165,10 @@ export default function Select({
 
   const selectedValues = multi ? (Array.isArray(value) ? value : []) : (value !== undefined && value !== null ? [value] : []);
 
-  const heightVal = size === 'xs' ? 24 : size === 'sm' ? 28 : 32;
-  const paddingVal = size === 'xs' ? '0 6px' : size === 'sm' ? '0 8px' : '0 10px';
-  const fontSizeVal = size === 'xs' ? '11px' : size === 'sm' ? '11.5px' : '13px';
+  const s = SIZES[size] || SIZES.md;
+  const heightVal = s.height;
+  const paddingVal = `0 ${s.paddingH}px`;
+  const fontSizeVal = `${s.fontSize}px`;
 
   let radiusVal = rounded
     ? (typeof rounded === 'string'
@@ -168,7 +176,7 @@ export default function Select({
         : typeof rounded === 'number'
           ? `${rounded}px`
           : '6px')
-    : (size === 'xs' ? '4px' : size === 'sm' ? '6px' : 'var(--rmd,var(--rads, 8px))');
+    : (s.height <= 26 ? '4px' : s.height <= 28 ? '6px' : 'var(--rmd,var(--rads, 8px))');
 
   return (
     <div
@@ -310,13 +318,13 @@ export default function Select({
                 style={{
                   width: '100%',
                   boxSizing: 'border-box',
-                  padding: size === 'xs' ? '2px 5px' : size === 'sm' ? '3px 6px' : '7px 10px',
-                  height: size === 'xs' ? 22 : size === 'sm' ? 26 : 32,
+                  padding: s.height <= 26 ? '2px 5px' : s.height <= 28 ? '3px 6px' : '7px 10px',
+                  height: s.searchHeight,
                   background: 'var(--sf2,var(--grey-1, #f5f5f8))',
                   border: '1.5px solid var(--bd2,var(--border, #e2e8f0))',
-                  borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                  borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                   fontFamily: 'var(--f,var(--sans, inherit))',
-                  fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
+                  fontSize: `${s.searchFont}px`,
                   lineHeight: 1,
                   color: 'var(--t,var(--primary-text, #0f172a))',
                   outline: 'none',
@@ -339,13 +347,13 @@ export default function Select({
                     display: 'flex',
                     alignItems: 'center',
                     gap: 6,
-                    minHeight: size === 'xs' ? 18 : size === 'sm' ? 22 : 28,
-                    padding: size === 'xs' ? '3px 5px' : size === 'sm' ? '4.5px 7px' : '8px 10px',
-                    borderRadius: size === 'xs' ? '3px' : size === 'sm' ? '4px' : 'var(--rmd,var(--rads, 8px))',
+                    minHeight: s.itemMinHeight,
+                    padding: s.itemPadding,
+                    borderRadius: s.height <= 26 ? '3px' : s.height <= 28 ? '4px' : 'var(--rmd,var(--rads, 8px))',
                     cursor: opt.disabled ? 'not-allowed' : 'pointer',
                     color: isSelected(opt.value) ? 'var(--accent, #f99e2c)' : 'var(--t,var(--primary-text, #0f172a))',
                     background: isSelected(opt.value) ? 'var(--pd,var(--accent-bg, rgba(249,158,44,.1)))' : undefined,
-                    fontSize: size === 'xs' ? '10.5px' : size === 'sm' ? '11.5px' : '12.5px',
+                    fontSize: `${s.searchFont}px`,
                     fontWeight: 400,
                     transition: 'background .1s',
                     userSelect: 'none',

package/components/TimePicker.jsx

@@ -2,38 +2,27 @@ import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react
 import { createPortal } from 'react-dom';
 import { Clock, ChevronDown, ChevronUp, Check, X, Globe, List, Sliders } from 'lucide-react';
 
+const SIZES = {
+  xs: { height: 24, fontSize: 11, paddingH: 6, iconPadLeft: 22, noIconPadLeft: 6, clockSize: 12 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8, iconPadLeft: 26, noIconPadLeft: 8, clockSize: 13 },
+  md: { height: 32, fontSize: 13, paddingH: 10, iconPadLeft: 28, noIconPadLeft: 10, clockSize: 14 },
+  lg: { height: 36, fontSize: 14, paddingH: 14, iconPadLeft: 32, noIconPadLeft: 12, clockSize: 16 },
+};
+
 const STYLES = `
-@keyframes cynxTimePickerPopIn {
-  0% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+@keyframes cynxTimePickerFadeInDown {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
-
-@keyframes cynxTimePickerPopOut {
-  0% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
+@keyframes cynxTimePickerFadeInUp {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .cynx-timepicker-drop {
-  animation: cynxTimePickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   will-change: opacity, transform;
 }
 
-.cynx-timepicker-drop.closing {
-  animation: cynxTimePickerPopOut 0.14s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
 .cynx-timepicker-cell {
   transition: background-color 0.12s ease, color 0.12s ease;
 }
@@ -176,7 +165,7 @@ export function TimePicker({
   timezone = 'Asia/Tashkent',
   label,
   placeholder,
-  size = 'sm',                 // 'xs' | 'sm' | 'md'
+  size = 'md',                 // 'xs' | 'sm' | 'md' | 'lg'
   disabled = false,
   readOnly = false,
   style = {},
@@ -184,8 +173,6 @@ export function TimePicker({
 }) {
   const displayClockIcon = showIcon && !hideIcon;
   const [open, setOpen] = useState(false);
-  const [rendered, setRendered] = useState(false);
-  const [closing, setClosing] = useState(false);
 
   const [activeVariant, setActiveVariant] = useState(variant);
   const [mode, setMode] = useState(format);
@@ -196,7 +183,7 @@ export function TimePicker({
   const dropRef = useRef(null);
   const isTypingRef = useRef(false);
 
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 230 });
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 230, openUp: false });
 
   ensureStyles();
 
@@ -204,22 +191,42 @@ export function TimePicker({
   useEffect(() => { setMode(format); }, [format]);
   useEffect(() => { setTz(timezone); }, [timezone]);
 
+  const calcPos = useCallback(() => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const dropW = mode === '12h' ? 290 : 230;
+    const dropEl = dropRef.current;
+    const dropH = dropEl ? dropEl.offsetHeight : 230;
+    const spaceBelow = window.innerHeight - r.bottom;
+    const spaceAbove = r.top;
+    const openUp = spaceBelow < Math.min(dropH, 230) + 12 && spaceAbove > spaceBelow;
+
+    let top;
+    if (openUp) {
+      top = Math.max(8, r.top - (dropEl ? dropEl.offsetHeight : dropH) - 4);
+    } else {
+      top = Math.min(window.innerHeight - 40, r.bottom + 4);
+    }
+
+    let left = r.left;
+    if (left + dropW > window.innerWidth - 8) {
+      left = Math.max(8, window.innerWidth - dropW - 8);
+    }
+    if (left < 8) left = 8;
+
+    setPos({ top, left, width: Math.max(r.width, dropW), openUp });
+  }, [mode]);
+
   const openPicker = useCallback(() => {
     if (disabled || readOnly) return;
-    setRendered(true);
-    setClosing(false);
+    calcPos();
     setOpen(true);
-  }, [disabled, readOnly]);
+  }, [disabled, readOnly, calcPos]);
 
   const closePicker = useCallback(() => {
     if (!open) return;
-    setClosing(true);
     setOpen(false);
     setShowTzPicker(false);
-    setTimeout(() => {
-      setRendered(false);
-      setClosing(false);
-    }, 140);
   }, [open]);
 
   const togglePicker = useCallback(() => {
@@ -250,33 +257,15 @@ export function TimePicker({
     }
   }, [value, mode, showSeconds, formatOutput]);
 
-  const calcPos = useCallback(() => {
-    if (!btnRef.current) return;
-    const r = btnRef.current.getBoundingClientRect();
-    const dropW = mode === '12h' ? 290 : 230;
-    const dropH = dropRef.current ? dropRef.current.offsetHeight : 230;
-
-    let left = r.left;
-    if (left + dropW > window.innerWidth - 12) {
-      left = Math.max(12, r.right - dropW);
-    }
-    if (left < 12) left = 12;
-
-    let top = r.bottom + 4;
-    if (top + dropH > window.innerHeight - 12 && r.top - 4 - dropH > 12) {
-      top = r.top - 4 - dropH;
-    }
-
-    setPos({ top, left, width: Math.max(r.width, dropW) });
-  }, [mode]);
-
   useLayoutEffect(() => {
-    if (!rendered) return;
-    calcPos();
-  }, [rendered, calcPos]);
+    if (open) {
+      calcPos();
+      requestAnimationFrame(calcPos);
+    }
+  }, [open, calcPos]);
 
   useEffect(() => {
-    if (!rendered || closing) return;
+    if (!open) return;
     function onDown(e) {
       const inBtn = btnRef.current && btnRef.current.contains(e.target);
       const inDrop = dropRef.current && dropRef.current.contains(e.target);
@@ -284,18 +273,15 @@ export function TimePicker({
         closePicker();
       }
     }
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', onDown, true);
-    }, 0);
+    document.addEventListener('mousedown', onDown, true);
     window.addEventListener('scroll', calcPos, true);
     window.addEventListener('resize', calcPos);
     return () => {
-      clearTimeout(timer);
       document.removeEventListener('mousedown', onDown, true);
       window.removeEventListener('scroll', calcPos, true);
       window.removeEventListener('resize', calcPos);
     };
-  }, [rendered, closing, calcPos, closePicker]);
+  }, [open, closePicker, calcPos]);
 
   const emitChange = (parsedObj, useMode = mode) => {
     const formatted = formatOutput(parsedObj, useMode);
@@ -518,10 +504,11 @@ export function TimePicker({
   const fullMinutesList = Array.from({ length: 60 }, (_, i) => i);
 
 
+  const s = SIZES[size] || SIZES.md;
   const inputHeight = style?.height
     ? (typeof style.height === 'number' ? `${style.height}px` : style.height)
-    : (size === 'xs' ? '24px' : (size === 'sm' ? '32px' : '38px'));
-  const fontSize = (size === 'xs' || (style?.height && parseInt(style.height) <= 26)) ? '.72rem' : (size === 'sm' ? '.78rem' : '.85rem');
+    : `${s.height}px`;
+  const fontSize = `${s.fontSize}px`;
 
   return (
     <div
@@ -559,7 +546,7 @@ export function TimePicker({
               transition: 'color .15s ease',
             }}
           >
-            <Clock size={size === 'sm' ? 14 : 16} />
+            <Clock size={s.clockSize} />
           </button>
         )}
 
@@ -581,8 +568,8 @@ export function TimePicker({
             maxWidth: '100%',
             boxSizing: 'border-box',
             height: inputHeight,
-            paddingLeft: displayClockIcon ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
-            paddingRight: size === 'xs' ? 18 : 26,
+            paddingLeft: displayClockIcon ? s.iconPadLeft : s.noIconPadLeft,
+            paddingRight: s.height <= 26 ? 18 : 26,
             border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd, var(--border, #d7d8e0))'}`,
             borderRadius: 'var(--rads, 8px)',
             fontSize: fontSize,
@@ -603,47 +590,51 @@ export function TimePicker({
           }}
         />
 
-        <div style={{ position: 'absolute', right: 8, display: 'flex', alignItems: 'center' }}>
-          {inputValue && !disabled && !readOnly ? (
-            <button
-              type="button"
-              onClick={clearTime}
+        <div style={{ position: 'absolute', right: 8, display: 'flex', alignItems: 'center', gap: 4 }}>
+          {inputValue && !disabled && !readOnly && (
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                clearTime();
+              }}
               title="Очистить"
               style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--t2, var(--muted, #9b9daa))',
-                padding: 2,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                transition: 'color .14s ease',
+                cursor: 'pointer',
+                color: 'var(--t2, var(--muted, #9b9daa))',
+                padding: '0 2px',
+                flexShrink: 0,
               }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--danger, #f64747)'}
               onMouseLeave={e => e.currentTarget.style.color = 'var(--t2, var(--muted, #9b9daa))'}
             >
-              <X size={13} />
-            </button>
-          ) : (
-            <ChevronDown
-              size={13}
-              style={{
-                color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
-                transform: open ? 'rotate(180deg)' : 'none',
-                transition: 'transform .2s ease, color .15s ease',
-                pointerEvents: 'none',
-              }}
-            />
+              <X size={12} />
+            </span>
           )}
+          <ChevronDown
+            size={12}
+            style={{
+              flexShrink: 0,
+              color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
+              transition: 'transform .2s ease',
+              transform: open ? 'rotate(180deg)' : undefined,
+              cursor: 'pointer',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              togglePicker();
+            }}
+          />
         </div>
       </div>
 
       {/* PORTAL DROPDOWN POPUP */}
-      {rendered && createPortal(
+      {open && createPortal(
         <div
           ref={dropRef}
-          className={`cynx-timepicker-drop ${closing ? 'closing' : ''}`}
+          className="cynx-timepicker-drop"
           style={{
             position: 'fixed',
             top: pos.top,
@@ -660,6 +651,7 @@ export function TimePicker({
             fontSize: '.78rem',
             userSelect: 'none',
             fontFamily: 'var(--sans, inherit)',
+            animation: `${pos.openUp ? 'cynxTimePickerFadeInUp' : 'cynxTimePickerFadeInDown'} .15s ease`,
           }}
         >
           {/* Header Bar: Variant Switcher */}

package/components/UptimeBar.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 
 const card = {
   background: 'var(--surface,#fff)',
@@ -7,64 +7,26 @@ const card = {
   boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
 };
 
-const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
-function formatDate(date) {
-  return `${MONTHS[date.getMonth()]} ${date.getDate()}`;
-}
-
 export default function UptimeBar({
-  title = 'Uptime',
+  title,
   subtitle,
-  successValues = [],
-  failedValues = [],
-  totalSlots = 90,
-  greenColor = 'var(--success, #27ae60)',
-  redColor = 'var(--danger, #f64747)',
-  emptyColor = 'var(--grey-1, #f5f5f8)',
-  barHeight = 28,
-  barRadius = 3,
+  items = [],
+  value,
   leftLabel,
   rightLabel,
+  legend,
   showDot = true,
-  dotColor,
+  dotColor = 'var(--success, #27ae60)',
+  barHeight = 28,
+  barRadius = 3,
+  emptyColor = 'var(--grey-1, #f5f5f8)',
   style,
+  renderTooltip,
 }) {
   const [hovered, setHovered] = useState(null);
   const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
   const containerRef = useRef(null);
 
-  const bars = useMemo(() => {
-    const len = Math.max(successValues.length, failedValues.length, totalSlots);
-    const result = [];
-    const stepS = successValues.length / len;
-    const stepF = failedValues.length / len;
-    for (let i = 0; i < len; i++) {
-      const si = Math.min(Math.floor(i * stepS), successValues.length - 1);
-      const fi = Math.min(Math.floor(i * stepF), failedValues.length - 1);
-      const s = successValues[si] || 0;
-      const f = failedValues[fi] || 0;
-      result.push({ success: s, failed: f });
-    }
-    return result;
-  }, [successValues, failedValues, totalSlots]);
-
-  const dates = useMemo(() => {
-    const result = [];
-    const now = new Date();
-    for (let i = 0; i < bars.length; i++) {
-      const d = new Date(now);
-      d.setDate(d.getDate() - (bars.length - 1 - i));
-      result.push(d);
-    }
-    return result;
-  }, [bars.length]);
-
-  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
-  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
-  const totalAll = totalSuccess + totalFailed;
-  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
-
   function handleMouseEnter(e, idx) {
     const rect = e.currentTarget.getBoundingClientRect();
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -75,126 +37,99 @@ export default function UptimeBar({
     setHovered(idx);
   }
 
+  // Smart tooltip shift so edge items are never clipped
+  const tooltipShift = hovered !== null
+    ? (hovered > items.length - 8 ? '-92%' : hovered < 8 ? '-8%' : '-50%')
+    : '-50%';
+
   return (
     <div ref={containerRef} style={{ ...card, padding: '14px 18px 14px', position: 'relative', ...style }}>
       {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          {showDot && (
-            <span style={{
-              width: 8, height: 8, borderRadius: '50%',
-              background: dotColor || greenColor, flexShrink: 0,
-            }} />
+      {(title || subtitle || (Array.isArray(legend) && legend.length > 0)) && (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            {showDot && (
+              <span style={{
+                width: 8, height: 8, borderRadius: '50%',
+                background: dotColor, flexShrink: 0,
+              }} />
+            )}
+            {title && (
+              <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', letterSpacing: '-.01em' }}>
+                {title}
+              </span>
+            )}
+            {subtitle && (
+              <span style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>
+                {subtitle}
+              </span>
+            )}
+          </div>
+          {/* Legend */}
+          {Array.isArray(legend) && legend.length > 0 && (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              {legend.map((item, idx) => (
+                <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <span style={{ width: 7, height: 7, borderRadius: 2, background: item.color, flexShrink: 0 }} />
+                  <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{item.label}</span>
+                </div>
+              ))}
+            </div>
           )}
-          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', letterSpacing: '-.01em' }}>{title}</span>
-          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{subtitle}</span>}
-        </div>
-        {/* Legend */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <LegendDot color={greenColor} label="Success" />
-          <LegendDot color={redColor} label="Failed" />
-          <LegendDot color={emptyColor} label="None" />
         </div>
-      </div>
+      )}
 
-      {/* Bars */}
+      {/* Bars: purely renders precomputed items */}
       <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
-        {bars.map((b, i) => {
-          const total = b.success + b.failed;
-          const hasData = total > 0;
-          const successPct = hasData ? (b.success / total) * 100 : 0;
-          const failedPct = hasData ? (b.failed / total) * 100 : 0;
-
-          return (
-            <div
-              key={i}
-              onMouseEnter={(e) => handleMouseEnter(e, i)}
-              onMouseLeave={() => setHovered(null)}
-              style={{
-                flex: 1,
-                height: '100%',
-                borderRadius: barRadius,
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                background: hasData ? 'transparent' : emptyColor,
-              }}
-            >
-              {hasData && (
-                <>
-                  {/* Failed on bottom */}
-                  {b.failed > 0 && (
-                    <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />
-                  )}
-                  {/* Success on top */}
-                  {b.success > 0 && (
-                    <div style={{ height: `${successPct}%`, background: greenColor }} />
-                  )}
-                </>
-              )}
-            </div>
-          );
-        })}
+        {items.map((item, i) => (
+          <div
+            key={item.id || i}
+            onMouseEnter={(e) => handleMouseEnter(e, i)}
+            onMouseLeave={() => setHovered(null)}
+            style={{
+              flex: 1,
+              height: '100%',
+              borderRadius: barRadius,
+              background: item.color || emptyColor,
+            }}
+          />
+        ))}
       </div>
 
-      {/* Tooltip */}
-      {hovered !== null && (
+      {/* Tooltip: renders caller content only */}
+      {hovered !== null && items[hovered] && (renderTooltip || items[hovered].tooltip) && (
         <div style={{
           position: 'absolute',
           left: tooltipPos.x,
           top: tooltipPos.y,
-          transform: 'translate(-50%, -100%)',
+          transform: `translate(${tooltipShift}, -100%)`,
           background: 'var(--surface,#fff)',
           border: '1px solid var(--border, #e2e8f0)',
           borderRadius: 'var(--rads, 8px)',
           boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
           padding: '8px 12px',
           pointerEvents: 'none',
-          zIndex: 100,
+          zIndex: 1000,
           whiteSpace: 'nowrap',
         }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500, marginBottom: 4 }}>
-            {formatDate(dates[hovered])}
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {bars[hovered].success > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
-                {bars[hovered].success} success login{bars[hovered].success !== 1 ? 's' : ''}
-                {bars[hovered].failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].failed > 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
-                {bars[hovered].failed} failed login{bars[hovered].failed !== 1 ? 's' : ''}
-                {bars[hovered].success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
-              </div>
-            )}
-            {bars[hovered].success === 0 && bars[hovered].failed === 0 && (
-              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted, #797b8d)' }}>
-                No logins
-              </div>
-            )}
-          </div>
+          {renderTooltip
+            ? renderTooltip(items[hovered], hovered)
+            : typeof items[hovered].tooltip === 'function'
+            ? items[hovered].tooltip(items[hovered], hovered)
+            : items[hovered].tooltip}
         </div>
       )}
 
       {/* Footer */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
-          {uptimePercent}%
-        </span>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{leftLabel}</span>
+        {value && (
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: dotColor, fontFamily: 'var(--mono, ui-monospace, monospace)' }}>
+            {value}
+          </span>
+        )}
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel}</span>
       </div>
     </div>
   );
 }
-
-function LegendDot({ color, label }) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
-      <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
-    </div>
-  );
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.3.21",
+  "version": "1.3.23",
   "type": "module",
   "exports": {
     ".": "./index.js"