cynx-ui 1.2.26 → 1.2.28

package/components/ActionsMenu.jsx

@@ -77,10 +77,10 @@ export function ActionsMenu({ items, align = 'right' }) {
         style={{
           width: 30, height: 30, borderRadius: 'var(--rads,8px)',
           border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
-          background: '#fff',
+          background: 'var(--surface,#fff)',
           cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
           color: isOpen ? 'var(--accent)' : 'var(--muted,#797b8d)', transition: 'all .14s',
-          boxShadow: isOpen ? '0 0 0 3px rgba(249,158,44,.12)' : '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
+          boxShadow: isOpen ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
         }}
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
@@ -93,9 +93,9 @@ export function ActionsMenu({ items, align = 'right' }) {
           ref={menuRef}
           style={{
             position: 'fixed', zIndex: 8100, minWidth: 180, padding: 5,
-            background: '#fff', border: '1.5px solid var(--border-light,#e2e8f0)',
+            background: 'var(--surface,#fff)', border: '1.5px solid var(--border-light,#e2e8f0)',
             borderRadius: 'var(--rads,8px)',
-            boxShadow: '0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06)',
+            boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
             animation: closing
               ? 'actionsClose .14s ease forwards'
               : 'actionsDrop .14s cubic-bezier(.16,1,.3,1)',
@@ -116,7 +116,7 @@ export function ActionsMenu({ items, align = 'right' }) {
                   fontWeight: 500,
                 }}
                 onMouseEnter={e => {
-                  e.currentTarget.style.background = item.variant === 'danger' ? 'rgba(246,71,71,.08)' : item.variant === 'warning' ? 'rgba(249,158,44,.08)' : 'var(--grey-1,#f5f5f8)';
+                  e.currentTarget.style.background = item.variant === 'danger' ? 'var(--dd, rgba(246,71,71,.08))' : item.variant === 'warning' ? 'var(--pd, rgba(249,158,44,.08))' : 'var(--grey-1,#f5f5f8)';
                 }}
                 onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}
               >

package/components/ActivityCard.jsx

@@ -79,8 +79,8 @@ export default function ActivityCard({
 
   return (
     <div ref={containerRef} style={{
-      background: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
       padding: '14px 18px', position: 'relative', ...style,
     }}>
       {/* Header */}
@@ -134,9 +134,9 @@ export default function ActivityCard({
       {hovered !== null && (
         <div style={{
           position: 'absolute', left: tooltipPos.x, top: tooltipPos.y,
-          transform: 'translate(-50%, -100%)', background: '#fff',
+          transform: 'translate(-50%, -100%)', background: 'var(--surface,#fff)',
           border: '1px solid var(--border)', borderRadius: 'var(--rads, 8px)',
-          boxShadow: '0 4px 12px rgba(0,0,0,.12)', padding: '10px 14px',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))', padding: '10px 14px',
           pointerEvents: 'none', zIndex: 100, whiteSpace: 'nowrap',
           animation: 'hoverCardIn .15s ease',
         }}>
@@ -161,7 +161,7 @@ export default function ActivityCard({
           <div style={{
             position: 'absolute', left: '50%', bottom: -5,
             transform: 'translateX(-50%) rotate(45deg)',
-            width: 8, height: 8, background: '#fff',
+            width: 8, height: 8, background: 'var(--surface,#fff)',
             borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
           }} />
         </div>

package/components/Badge.jsx

@@ -1,24 +1,24 @@
 const VARIANTS = {
-  ok:       { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'rgba(39,174,96,.2)', dot: 'var(--success,#27ae60)' },
-  err:      { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'rgba(246,71,71,.2)', dot: 'var(--danger,#f64747)' },
+  ok:       { bg: 'var(--success-bg,rgba(39,174,96,.1))', color: 'var(--success,#27ae60)', border: 'var(--sd, rgba(39,174,96,.2))', dot: 'var(--success,#27ae60)' },
+  err:      { bg: 'var(--danger-bg,rgba(246,71,71,.1))', color: 'var(--danger,#f64747)', border: 'var(--dd, rgba(246,71,71,.2))', dot: 'var(--danger,#f64747)' },
   warn:     { bg: 'var(--accent-bg,rgba(249,158,44,.1))', color: 'var(--accent,#f99e2c)', border: 'var(--accent-border,rgba(249,158,44,.25))', dot: 'var(--accent,#f99e2c)' },
-  blue:     { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'rgba(39,130,228,.2)', dot: 'var(--blue,#2782e4)' },
+  blue:     { bg: 'var(--blue-bg,rgba(39,130,228,.1))', color: 'var(--blue,#2782e4)', border: 'var(--infd, rgba(39,130,228,.2))', dot: 'var(--blue,#2782e4)' },
   dim:      { bg: 'var(--grey-1,#f5f5f8)', color: 'var(--grey-4,#797b8d)', border: 'var(--border,#d7d8e0)', dot: 'var(--grey-4,#797b8d)' },
   purple:   { bg: 'rgba(139,92,246,.1)', color: '#8b5cf6', border: 'rgba(139,92,246,.2)', dot: '#8b5cf6' },
   teal:     { bg: 'rgba(20,184,166,.1)', color: '#14b8a6', border: 'rgba(20,184,166,.2)', dot: '#14b8a6' },
   pink:     { bg: 'rgba(236,72,153,.1)', color: '#ec4899', border: 'rgba(236,72,153,.2)', dot: '#ec4899' },
   ghost:    { bg: 'transparent', color: 'var(--t2,var(--grey-4,#797b8d))', border: 'var(--bd,var(--border,#d7d8e0))', dot: 'var(--t3,var(--grey-4,#797b8d))' },
-  paid:     { bg: 'rgba(30,41,59,.08)', color: '#1e293b', border: 'rgba(30,41,59,.15)', dot: '#1e293b' },
-  invoiced: { bg: 'rgba(120,120,130,.08)', color: '#787882', border: 'rgba(120,120,130,.15)', dot: '#787882' },
-  verified: { bg: 'rgba(34,197,94,.08)', color: '#22c55e', border: 'rgba(34,197,94,.15)', dot: '#22c55e' },
+  paid:     { bg: 'var(--pd, rgba(30,41,59,.08))', color: 'var(--t, #1e293b)', border: 'var(--accent-border, rgba(30,41,59,.15))', dot: 'var(--t, #1e293b)' },
+  invoiced: { bg: 'rgba(120,120,130,.08)', color: 'var(--t2, #787882)', border: 'rgba(120,120,130,.15)', dot: 'var(--t2, #787882)' },
+  verified: { bg: 'var(--sd, rgba(34,197,94,.08))', color: 'var(--s, #22c55e)', border: 'var(--sd, rgba(34,197,94,.15))', dot: 'var(--s, #22c55e)' },
   partial:  { bg: 'rgba(100,100,110,.08)', color: '#64646e', border: 'rgba(100,100,110,.15)', dot: '#64646e' },
-  deleted:  { bg: 'rgba(239,68,68,.08)', color: '#ef4444', border: 'rgba(239,68,68,.15)', dot: '#ef4444' },
-  update:   { bg: 'rgba(249,115,22,.08)', color: '#f97316', border: 'rgba(249,115,22,.15)', dot: '#f97316' },
-  ready:    { bg: 'rgba(234,179,8,.08)', color: '#eab308', border: 'rgba(234,179,8,.15)', dot: '#eab308' },
-  new:      { bg: 'rgba(59,130,246,.08)', color: '#3b82f6', border: 'rgba(59,130,246,.15)', dot: '#3b82f6' },
-  active:   { bg: 'transparent', color: '#22c55e', border: 'none', dot: '#22c55e', noPad: true },
-  inactive: { bg: 'transparent', color: '#ef4444', border: 'none', dot: '#ef4444', noPad: true },
-  pending:  { bg: 'transparent', color: '#d97706', border: 'none', dot: '#d97706', noPad: true, pulse: true },
+  deleted:  { bg: 'var(--dd, rgba(239,68,68,.08))', color: 'var(--d, #ef4444)', border: 'var(--dd, rgba(239,68,68,.15))', dot: 'var(--d, #ef4444)' },
+  update:   { bg: 'var(--wd, rgba(249,115,22,.08))', color: 'var(--w, #f97316)', border: 'var(--wd, rgba(249,115,22,.15))', dot: 'var(--w, #f97316)' },
+  ready:    { bg: 'var(--wd, rgba(234,179,8,.08))', color: 'var(--w, #eab308)', border: 'var(--wd, rgba(234,179,8,.15))', dot: 'var(--w, #eab308)' },
+  new:      { bg: 'var(--infd, rgba(59,130,246,.08))', color: 'var(--inf, #3b82f6)', border: 'var(--infd, rgba(59,130,246,.15))', dot: 'var(--inf, #3b82f6)' },
+  active:   { bg: 'transparent', color: 'var(--s, #22c55e)', border: 'none', dot: 'var(--s, #22c55e)', noPad: true },
+  inactive: { bg: 'transparent', color: 'var(--d, #ef4444)', border: 'none', dot: 'var(--d, #ef4444)', noPad: true },
+  pending:  { bg: 'transparent', color: 'var(--w, #d97706)', border: 'none', dot: 'var(--w, #d97706)', noPad: true, pulse: true },
 };
 
 const SHAPES = {

package/components/BrandingCard.jsx

@@ -57,7 +57,7 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
         display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         padding: '10px 12px', borderRadius: 'var(--rads)',
         border: '1px solid var(--border-light)', background: 'var(--surface)',
-        boxShadow: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)',
+        boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
         ...cardStyle,
       }}>
         {(hasExisting || previewUrl) ? (
@@ -76,9 +76,9 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
           </div>
         )}
         <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-          <Button variant="ghost" size="xs" type="button" icon={<Pencil size={11} />} onClick={() => setEditOpen(true)} style={cardStyle ? { background: '#fff', color: '#333' } : undefined}>Edit</Button>
+          <Button variant="ghost" size="xs" type="button" icon={<Pencil size={11} />} onClick={() => setEditOpen(true)} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--t, #333)' } : undefined}>Edit</Button>
           {hasExisting && (
-            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: '#fff', color: 'var(--danger)' } : { color: 'var(--danger)' }}
+            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--danger)' } : { color: 'var(--danger)' }}
               onClick={handleRemove} disabled={saving}>Remove</Button>
           )}
         </div>

package/components/Button.jsx

@@ -2,7 +2,7 @@ import { Spinner } from './Spinner';
 
 const VARIANTS = {
   default: {
-    background: '#fff',
+    background: 'var(--surface,#fff)',
     color: 'var(--def-btn-text,#0f111c)',
     border: '1px solid var(--bd,#d7d8e0)',
     hoverBg: 'var(--grey-1,#f5f5f8)',
@@ -10,7 +10,7 @@ const VARIANTS = {
   },
   primary: {
     background: 'var(--accent,#f99e2c)',
-    color: '#fff',
+    color: 'var(--def-btn-text,#fff)',
     border: '1px solid transparent',
     hoverBg: 'var(--accent-hover,#e68d1f)',
     hoverShadow: '0 2px 8px rgba(249,158,44,.35)',
@@ -18,29 +18,29 @@ const VARIANTS = {
   secondary: {
     background: 'var(--blue-bg,rgba(39,130,228,.1))',
     color: 'var(--blue,#2782e4)',
-    border: '1px solid rgba(39,130,228,.2)',
-    hoverBg: 'rgba(39,130,228,.18)',
+    border: '1px solid var(--infd, rgba(39,130,228,.2))',
+    hoverBg: 'var(--infd, rgba(39,130,228,.18))',
     hoverShadow: '0 2px 8px rgba(39,130,228,.25)',
   },
   danger: {
     background: 'var(--danger-bg,rgba(246,71,71,.1))',
     color: 'var(--danger,#f64747)',
-    border: '1px solid rgba(246,71,71,.2)',
-    hoverBg: 'rgba(246,71,71,.18)',
+    border: '1px solid var(--dd, rgba(246,71,71,.2))',
+    hoverBg: 'var(--dd, rgba(246,71,71,.18))',
     hoverShadow: '0 2px 8px rgba(246,71,71,.25)',
   },
   success: {
     background: 'var(--success-bg,rgba(39,174,96,.1))',
     color: 'var(--success,#27ae60)',
-    border: '1px solid rgba(39,174,96,.2)',
-    hoverBg: 'rgba(39,174,96,.18)',
+    border: '1px solid var(--sd, rgba(39,174,96,.2))',
+    hoverBg: 'var(--sd, rgba(39,174,96,.18))',
     hoverShadow: '0 2px 8px rgba(39,174,96,.25)',
   },
   warning: {
     background: 'var(--accent-bg,rgba(249,158,44,.1))',
     color: 'var(--accent,#f99e2c)',
     border: '1px solid var(--accent-border,rgba(249,158,44,.25))',
-    hoverBg: 'rgba(249,158,44,.18)',
+    hoverBg: 'var(--pd, rgba(249,158,44,.18))',
     hoverShadow: '0 2px 8px rgba(249,158,44,.25)',
   },
   ghost: {

package/components/CircularProgress.jsx

@@ -13,7 +13,7 @@ export default function CircularProgress({
   size = 'md',
   customSize,
   color = 'var(--blue)',
-  trackColor = '#e0e0e4',
+  trackColor = 'var(--bd2, #e0e0e4)',
   label = '',
   showPercent = true,
   animated = true,

package/components/Confirm.jsx

@@ -37,13 +37,13 @@ export function ConfirmRoot() {
       <div style={{
         background: 'var(--surface)', border: '1px solid var(--border)',
         borderRadius: 14, width: '100%', maxWidth: 400,
-        boxShadow: '0 20px 60px rgba(0,0,0,.4)',
+        boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.4))',
         animation: `${closing ? 'modalClose' : 'modalPop'} .25s cubic-bezier(.4,0,.2,1) forwards`,
       }}>
         <div style={{ padding: '20px 20px 0', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
           <div style={{
             width: 36, height: 36, borderRadius: '50%', flexShrink: 0,
-            background: state.danger ? 'rgba(246,71,71,.1)' : 'rgba(249,158,44,.1)',
+            background: state.danger ? 'var(--dd, rgba(246,71,71,.1))' : 'var(--pd, rgba(249,158,44,.1))',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}>
             <AlertTriangle size={17} color={state.danger ? 'var(--danger)' : 'var(--warning)'} />
@@ -64,7 +64,7 @@ export function ConfirmRoot() {
           background: 'var(--grey-1)', borderRadius: '0 0 14px 14px',
         }}>
           <Button variant="ghost" size="sm" onClick={() => answer(false)}>Cancel</Button>
-          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger)', color: '#fff', border: 'none' } : {}} onClick={() => answer(true)}>
+          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger)', color: 'var(--def-btn-text,#fff)', border: 'none' } : {}} onClick={() => answer(true)}>
             {state.confirmLabel || 'Confirm'}
           </Button>
         </div>

package/components/DatePicker.jsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 
 // DatePicker — reusable date picker component
@@ -24,19 +25,41 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   const [open,    setOpen]    = useState(false);
   const [view,    setView]    = useState('day');    // 'day' | 'month' | 'year'
   const [cursor,  setCursor]  = useState(() => value ? new Date(value) : new Date());
+  const [pos,     setPos]     = useState({ top: 0, left: 0, width: 0 });
   const ref = useRef(null);
+  const btnRef = useRef(null);
+  const dropRef = useRef(null);
 
   // Close on outside click
   useEffect(() => {
     if (!open) return;
-    function close(e) { if (!ref.current?.contains(e.target)) { setOpen(false); setView('day'); } }
-    document.addEventListener('mousedown', close);
-    return () => document.removeEventListener('mousedown', close);
+    function close(e) {
+      if (ref.current?.contains(e.target)) return;
+      if (dropRef.current?.contains(e.target)) return;
+      setOpen(false); setView('day');
+    }
+    document.addEventListener('mousedown', close, true);
+    return () => document.removeEventListener('mousedown', close, true);
   }, [open]);
 
   // Sync cursor when value changes externally
   useEffect(() => { if (value) setCursor(new Date(value)); }, [value]);
 
+  // Compute button position when dropdown opens
+  useEffect(() => {
+    if (!open || !btnRef.current) return;
+    function updatePos() {
+      if (btnRef.current) {
+        const r = btnRef.current.getBoundingClientRect();
+        setPos({ top: r.bottom + 6, left: r.left, width: Math.max(r.width, 252) });
+      }
+    }
+    updatePos();
+    window.addEventListener('scroll', updatePos, true);
+    window.addEventListener('resize', updatePos);
+    return () => { window.removeEventListener('scroll', updatePos, true); window.removeEventListener('resize', updatePos); };
+  }, [open]);
+
   function pick(date) {
     onChange?.(date);
     setOpen(false);
@@ -99,7 +122,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
                 : new Date(y, m + 1, c.day);
               return (
                 <div key={i} onClick={() => { pick(date); }}
-                  style={{ textAlign: 'center', padding: '6px 2px', fontSize: '.78rem', color: 'var(--muted)', cursor: 'pointer', borderRadius: 6, transition: 'background .12s' }}
+                  style={{ textAlign: 'center', padding: '6px 2px', fontSize: '.78rem', color: 'var(--muted)', cursor: 'pointer', borderRadius: 'var(--radxs, 6px)', transition: 'background .12s' }}
                   onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
                   onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                   {c.day}
@@ -118,9 +141,9 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
               <div key={i} onClick={() => !dis && pick(date)} style={{
                 position: 'relative', textAlign: 'center', padding: '6px 2px',
                 fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
-                borderRadius: 6, cursor: dis ? 'not-allowed' : 'pointer',
+                borderRadius: 'var(--radxs, 6px)', cursor: dis ? 'not-allowed' : 'pointer',
                 background: sel ? 'var(--accent)' : 'transparent',
-                color: sel ? '#fff' : dis ? 'var(--border)' : today ? 'var(--accent)' : 'var(--primary-text)',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : today ? 'var(--accent)' : 'var(--primary-text)',
                 border: today && !sel ? '1.5px solid var(--accent)' : '1.5px solid transparent',
                 transition: 'background .12s, color .12s',
               }}
@@ -151,8 +174,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
           const sel = value && value.getFullYear() === y && value.getMonth() === i;
           return (
             <div key={i} onClick={() => { const c = new Date(cursor); c.setMonth(i); setCursor(c); setView('day'); }}
-              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 6, fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
-                background: sel ? 'var(--accent)' : 'transparent', color: sel ? '#fff' : 'var(--primary-text)',
+              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 'var(--radxs, 6px)', fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
+                background: sel ? 'var(--accent)' : 'transparent', color: sel ? 'var(--def-btn-text,#fff)' : 'var(--primary-text)',
                 transition: 'background .12s', }}
               onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
               onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
@@ -174,8 +197,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
           const sel = value && value.getFullYear() === yr;
           return (
             <div key={yr} onClick={() => { const c = new Date(cursor); c.setFullYear(yr); setCursor(c); setView('month'); }}
-              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 6, fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
-                background: sel ? 'var(--accent)' : 'transparent', color: sel ? '#fff' : 'var(--primary-text)',
+              style={{ textAlign: 'center', padding: '10px 4px', borderRadius: 'var(--radxs, 6px)', fontSize: '.82rem', fontWeight: 600, cursor: 'pointer',
+                background: sel ? 'var(--accent)' : 'transparent', color: sel ? 'var(--def-btn-text,#fff)' : 'var(--primary-text)',
                 transition: 'background .12s', }}
               onMouseEnter={e => { if (!sel) e.currentTarget.style.background = 'var(--grey-1)'; }}
               onMouseLeave={e => { if (!sel) e.currentTarget.style.background = 'transparent'; }}>
@@ -196,7 +219,7 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
   return (
     <div ref={ref} style={{ position: 'relative', display: 'inline-block', ...style }}>
       {/* Trigger */}
-      <button type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
+      <button ref={btnRef} type="button" onClick={() => !disabled && setOpen(o => !o)} style={{
         display: 'flex', alignItems: 'center', gap: 7,
         padding: '5px 10px', borderRadius: 'var(--rads)',
         border: '1px solid var(--border)', background: 'var(--surface)',
@@ -220,28 +243,28 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
         )}
       </button>
 
-      {/* Dropdown */}
-      {open && (
-        <div style={{
-          position: 'absolute', top: 'calc(100% + 6px)', left: 0, zIndex: 999,
+      {/* Dropdown via portal */}
+      {open && createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9000,
           background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 10, boxShadow: 'var(--shadow-lg)',
-          padding: '10px 12px', width: 252,
+          borderRadius: 'var(--rad, 10px)', boxShadow: 'var(--shadow-lg)',
+          padding: '10px 12px',
           animation: 'dp-in .12s ease',
         }}>
           {/* Calendar header */}
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
-            <button type="button" onClick={() => nav(-1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
+            <button type="button" onClick={() => nav(-1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 'var(--radxs, 6px)', color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}>
               <ChevronLeft size={15} />
             </button>
-            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text)', padding: '4px 8px', borderRadius: 6, fontFamily: 'var(--sans)' }}
+            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans)' }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}>
               {headerLabel}
             </button>
-            <button type="button" onClick={() => nav(1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
+            <button type="button" onClick={() => nav(1)} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, borderRadius: 'var(--radxs, 6px)', color: 'var(--muted)', display: 'flex', alignItems: 'center' }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}>
               <ChevronRight size={15} />
@@ -253,7 +276,8 @@ export function DatePicker({ value, onChange, placeholder = 'Select date', badge
           {view === 'month' && renderMonths()}
           {view === 'year'  && renderYears()}
 
-        </div>
+        </div>,
+        document.body
       )}
 
       <style>{`@keyframes dp-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }`}</style>

package/components/Dropdown.jsx

@@ -99,7 +99,7 @@ export default function Dropdown({ value, onChange, options, placeholder = 'Sele
           width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
           padding: '8px 11px', background: 'var(--input-bg)',
           border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
-          boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+          boxShadow: open ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow)',
           borderRadius: 'var(--rads)', cursor: disabled ? 'not-allowed' : 'pointer',
           color: selected ? 'var(--primary-text)' : 'var(--muted)',
           fontSize: '.82rem', fontFamily: 'var(--sans)', transition: 'all .14s',

package/components/HoverCard.jsx

@@ -49,11 +49,11 @@ export default function HoverCard({ trigger, children, position = 'top', width =
           transform: 'translateX(-50%)',
           zIndex: 9999,
           minWidth: width,
-          background: '#fff',
+          background: 'var(--surface,#fff)',
           border: '1px solid var(--border)',
           borderRadius: 'var(--rads, 8px)',
           padding: '10px 14px',
-          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
           pointerEvents: 'none',
           animation: 'hoverCardIn .15s ease',
           ...style,
@@ -63,7 +63,7 @@ export default function HoverCard({ trigger, children, position = 'top', width =
             position: 'absolute', left: '50%',
             [position === 'top' ? 'bottom' : 'top']: -5,
             transform: 'translateX(-50%) rotate(45deg)',
-            width: 8, height: 8, background: '#fff',
+            width: 8, height: 8, background: 'var(--surface,#fff)',
             borderRight: '1px solid var(--border)',
             borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
             borderTop: position === 'top' ? '1px solid var(--border)' : 'none',

package/components/Input.jsx

@@ -114,9 +114,9 @@ export default function Input({
             outline: 'none',
             transition: 'border-color .14s, box-shadow .14s',
             boxShadow: error
-              ? '0 0 0 3px rgba(246,71,71,.12), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+              ? 'var(--dd, rgba(246,71,71,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
               : focused
-              ? '0 0 0 3px rgba(249,158,44,.12), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
+              ? 'var(--pd, rgba(249,158,44,.12)), var(--shadow,0 1px 3px rgba(20,22,41,.1))'
               : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
             opacity: props.disabled ? 0.5 : 1,
             cursor: props.disabled ? 'not-allowed' : undefined,

package/components/LineProgress.jsx

@@ -13,7 +13,7 @@ export default function LineProgress({
   size = 'md',
   customSize,
   color = 'var(--blue)',
-  trackColor = '#e0e0e4',
+  trackColor = 'var(--bd2, #e0e0e4)',
   label = '',
   showPercent = true,
   animated = true,

package/components/Modal.jsx

@@ -43,9 +43,9 @@ const STYLES = `
   width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 12px;
   display: flex; align-items: center; justify-content: center;
 }
-.confirm-icon.danger { background: rgba(246,71,71,.1); }
-.confirm-icon.warning { background: rgba(249,158,44,.1); }
-.confirm-icon.info { background: rgba(39,130,228,.1); }
+.confirm-icon.danger { background: var(--dd, rgba(246,71,71,.1)); }
+.confirm-icon.warning { background: var(--pd, rgba(249,158,44,.1)); }
+.confirm-icon.info { background: var(--infd, rgba(39,130,228,.1)); }
 
 /* Modal scale */
 @keyframes modalIn {
@@ -149,7 +149,7 @@ export function Modal({ open, onClose, onBeforeClose, title, children, footer, m
         style={{
           background: 'var(--surface)', border: '1px solid var(--border)',
           borderRadius: 14, width: '100%', maxWidth, maxHeight: '60vh',
-          boxShadow: '0 20px 60px rgba(0,0,0,.25)',
+          boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.25))',
           overflow: 'hidden', display: 'flex', flexDirection: 'column',
           animation: `${closing ? 'modalCardOut' : 'modalCardIn'} .26s cubic-bezier(.4,0,.2,1) forwards`,
         }}
@@ -196,7 +196,7 @@ export function Confirm({ open, onClose, onConfirm, title, message, variant = 'd
         <div className={`confirm-icon ${variant}`} style={{
           width: 48, height: 48, borderRadius: '50%', margin: '0 auto 12px',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          background: variant === 'danger' ? 'rgba(246,71,71,.1)' : variant === 'warning' ? 'rgba(249,158,44,.1)' : 'rgba(39,130,228,.1)',
+          background: variant === 'danger' ? 'var(--dd, rgba(246,71,71,.1))' : variant === 'warning' ? 'var(--pd, rgba(249,158,44,.1))' : 'var(--infd, rgba(39,130,228,.1))',
         }}>{icon}</div>
         <div style={{ fontSize: '.9rem', fontWeight: 700, marginBottom: 8 }}>{title}</div>
         {message && <div style={{ fontSize: '.8rem', color: 'var(--muted)', lineHeight: 1.5 }}>{message}</div>}

package/components/MultiSelect.jsx

@@ -132,7 +132,7 @@ export default function MultiSelect({ value = [], onChange, options = [], placeh
         border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`,
         borderRadius: 'var(--rads)',
         background: 'var(--surface)',
-        boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+        boxShadow: open ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow)',
         cursor: 'pointer', fontSize: '.8rem', fontFamily: 'var(--sans)',
         transition: 'border-color .15s, box-shadow .15s',
       }}

package/components/SearchableDropdown.jsx

@@ -63,7 +63,7 @@ export function SearchableDropdown({ value, onChange, options = [], placeholder
         border: `1px solid ${open ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 'var(--rads)',
         background: 'var(--surface)', color: selected ? 'var(--primary-text)' : 'var(--muted)',
         cursor: 'pointer', fontSize: '.8rem', fontFamily: 'var(--sans)',
-        transition: 'border-color .15s', boxShadow: open ? '0 0 0 3px rgba(249,158,44,.12)' : 'var(--shadow)',
+        transition: 'border-color .15s', boxShadow: open ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow)',
       }}
       onMouseEnter={e => { if (!open) e.currentTarget.style.borderColor = 'var(--accent)'; }}
       onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border)'; }}>

package/components/Select.jsx

@@ -139,7 +139,7 @@ export default function Select({
           color: 'var(--t,var(--primary-text))',
           outline: 'none',
           transition: 'border-color var(--tr,.15s), box-shadow var(--tr,.15s)',
-          boxShadow: open ? '0 0 0 3px rgba(37,99,235,.1)' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
+          boxShadow: open ? 'var(--infd, rgba(37,99,235,.1))' : 'var(--shadow,0 1px 3px rgba(20,22,41,.1))',
         }}
       >
         <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }}>
@@ -278,7 +278,7 @@ export default function Select({
                           left: 3.5,
                           width: 4.5,
                           height: 7,
-                          border: 'solid #fff',
+                          border: 'solid var(--def-btn-text,#fff)',
                           borderWidth: '0 1.5px 1.5px 0',
                           transform: 'rotate(45deg)',
                         }} />

package/components/Skeleton.jsx

@@ -70,7 +70,7 @@ export function SkeletonCard({ rows = 3, style = {} }) {
       border: '1px solid var(--border-light, #ebebf0)',
       borderRadius: 'var(--rad, 10px)',
       padding: '14px 16px',
-      boxShadow: '0 1px 3px rgba(0,0,0,.04)',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.04))',
       ...style,
     }}>
       <div style={{

package/components/StatBarCard.jsx

@@ -5,8 +5,8 @@ export default function StatBarCard({ title, icon, items, style }) {
 
   return (
     <div style={{
-      background: '#fff', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
       padding: '12px 14px', minWidth: 220, ...style,
     }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>

package/components/StatsBar.jsx

@@ -39,7 +39,7 @@ const groupStyle = {
   borderRadius: 7,
   border: '1px solid var(--border)',
   background: 'var(--surface)',
-  boxShadow: '0 1px 2px rgba(0,0,0,.05)',
+  boxShadow: 'var(--shadow, 0 1px 2px rgba(0,0,0,.05))',
 };
 
 export default function StatsBar({ total = 0, active = 0, blocked = 0, actions = 0, type }) {
@@ -57,8 +57,8 @@ export default function StatsBar({ total = 0, active = 0, blocked = 0, actions =
         </div>
         <div style={sep} />
         <div style={itemStyle}>
-          <span style={iconWrap('#22c55e')}><Users size={10} /></span>
-          {dot('#22c55e')}
+          <span style={iconWrap('var(--s, #22c55e)')}><Users size={10} /></span>
+          {dot('var(--s, #22c55e)')}
           <span>{active}</span>
         </div>
       </div>
@@ -66,20 +66,20 @@ export default function StatsBar({ total = 0, active = 0, blocked = 0, actions =
       {/* Status group */}
       <div style={groupStyle}>
         <div style={itemStyle}>
-          <span style={iconWrap('#ef4444')}><ShieldAlert size={10} /></span>
-          {dot('#ef4444')}
+          <span style={iconWrap('var(--d, #ef4444)')}><ShieldAlert size={10} /></span>
+          {dot('var(--d, #ef4444)')}
           <span>{blocked}</span>
         </div>
         <div style={sep} />
         <div style={itemStyle}>
-          <span style={iconWrap('#f59e0b')}><Activity size={10} /></span>
-          {dot('#f59e0b')}
+          <span style={iconWrap('var(--w, #f59e0b)')}><Activity size={10} /></span>
+          {dot('var(--w, #f59e0b)')}
           <span>{actions}</span>
         </div>
         <div style={sep} />
         <div style={itemStyle}>
-          <span style={iconWrap('#94a3b8')}><WifiOff size={10} /></span>
-          {dot('#94a3b8')}
+          <span style={iconWrap('var(--t3, #94a3b8)')}><WifiOff size={10} /></span>
+          {dot('var(--t3, #94a3b8)')}
           <span>{total - active}</span>
         </div>
       </div>

package/components/StatsCard.jsx

@@ -9,7 +9,7 @@ const BASE = {
   borderRadius: 'var(--rad,10px)',
   background: 'var(--surface,#fff)',
   border: '1px solid var(--border)',
-  boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+  boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
   minWidth: 0,
   transition: 'border-color .15s',
 };
@@ -26,14 +26,14 @@ export default function StatsCard({
   variant = 'default',
   icon,
   iconColor = 'var(--blue)',
-  iconBg = 'rgba(39,130,228,.1)',
+  iconBg = 'var(--infd, rgba(39,130,228,.1))',
   title,
   value,
   subtitle,
   percent,
   percentColor,
   progressSize = 'sm',
-  progressTrackColor = '#e8e8ec',
+  progressTrackColor = 'var(--bd2, #e8e8ec)',
   headRight,
   className = '',
   style = {},

package/components/TabBar.jsx

@@ -72,8 +72,8 @@ export default function TabBar({ tabs, active, onChange, capitalize = false, pad
                 padding: padding || '5px 12px',
                 border: 'none',
                 borderRadius: 'var(--radxs, 6px)',
-                background: isActive ? '#fff' : 'transparent',
-                boxShadow: isActive ? '0 1px 2px rgba(0,0,0,.06)' : 'none',
+                background: isActive ? 'var(--surface,#fff)' : 'transparent',
+                boxShadow: isActive ? 'var(--shadow, 0 1px 2px rgba(0,0,0,.06))' : 'none',
                 fontSize: '.75rem', fontWeight: isActive ? 600 : 500,
                 color: isActive ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
                 cursor: 'pointer',

package/components/Tabs.jsx

@@ -11,8 +11,8 @@ export function Tabs({ tabs, value, onChange, style }) {
             padding: '5px 12px',
             border: 'none',
             borderRadius: 'var(--radxs, 6px)',
-            background: active ? '#fff' : 'transparent',
-            boxShadow: active ? '0 1px 2px rgba(0,0,0,.06)' : 'none',
+            background: active ? 'var(--surface,#fff)' : 'transparent',
+            boxShadow: active ? 'var(--shadow, 0 1px 2px rgba(0,0,0,.06))' : 'none',
             fontSize: '.75rem', fontWeight: active ? 600 : 500,
             color: active ? 'var(--primary-text, #0f111c)' : 'var(--muted, #9b9daa)',
             cursor: 'pointer',

package/components/Toggle.jsx

@@ -5,13 +5,13 @@ const SIZES = {
 };
 
 const COLORS = {
-  primary: '#f99e2c',
-  success: '#27ae60',
-  warning: '#f59e0b',
-  danger:  '#f64747',
+  primary: 'var(--accent, #f99e2c)',
+  success: 'var(--s, #27ae60)',
+  warning: 'var(--w, #f59e0b)',
+  danger:  'var(--d, #f64747)',
 };
 
-const OFF_COLOR = '#d7d8e0';
+const OFF_COLOR = 'var(--bd, #d7d8e0)';
 
 export default function Toggle({
   checked = false,
@@ -46,7 +46,7 @@ export default function Toggle({
         position:'relative', width: s.w, height: s.h, borderRadius: s.r,
         background: trackBg, flexShrink: 0,
         transition: 'background .25s ease',
-        boxShadow: '0 1px 3px rgba(20,22,41,.1)',
+        boxShadow: 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
       }}>
         <span style={{
           position:'absolute', top:'50%',
@@ -55,8 +55,8 @@ export default function Toggle({
             : 'translateY(-50%) scale(1)',
           left: checked ? s.on : s.off,
           width: s.dot, height: s.dot,
-          background: '#fff', borderRadius: '50%',
-          boxShadow: '0 1px 3px rgba(0,0,0,.25)',
+          background: 'var(--surface,#fff)', borderRadius: '50%',
+          boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.25))',
           transition: 'left .3s cubic-bezier(.34,1.56,.64,1), transform .2s ease',
           willChange: 'left',
         }} />

package/components/UptimeBar.jsx

@@ -1,10 +1,10 @@
 import { useMemo, useState, useRef } from 'react';
 
 const card = {
-  background: '#fff',
+  background: 'var(--surface,#fff)',
   border: '1px solid var(--border)',
   borderRadius: 'var(--rad)',
-  boxShadow: '0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)',
+  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'];
@@ -144,10 +144,10 @@ export default function UptimeBar({
           left: tooltipPos.x,
           top: tooltipPos.y,
           transform: 'translate(-50%, -100%)',
-          background: '#fff',
+          background: 'var(--surface,#fff)',
           border: '1px solid var(--border)',
           borderRadius: 'var(--rads)',
-          boxShadow: '0 4px 12px rgba(0,0,0,.12)',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
           padding: '8px 12px',
           pointerEvents: 'none',
           zIndex: 100,

package/package.json

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