cynx-ui 1.3.19 → 1.3.21

package/components/TimePicker.jsx

@@ -58,8 +58,8 @@ const STYLES = `
 
 .cynx-timepicker-stepper-btn:hover {
   background: var(--surface, #ffffff);
-  border-color: var(--accent);
-  color: var(--accent);
+  border-color: var(--accent, #f99e2c);
+  color: var(--accent, #f99e2c);
 }
 
 .cynx-timepicker-stepper-btn:active {
@@ -170,6 +170,7 @@ export function TimePicker({
   hideIcon = false,            // Legacy prop alias for showIcon = false
   showFormatToggle = false,     // Minimal default: false
   showPresets = false,          // Minimal default: false
+  presets = null,               // Custom presets array e.g. ['09:00', '18:00']
   showTimezoneSelect = false,   // Minimal default: false
   showPlaceholder = false,      // Minimal default: false
   timezone = 'Asia/Tashkent',
@@ -516,8 +517,6 @@ export function TimePicker({
   const hours12List = Array.from({ length: 12 }, (_, i) => i + 1);
   const fullMinutesList = Array.from({ length: 60 }, (_, i) => i);
 
-  const presets24 = ['00:00', '07:00', '08:00', '09:00', '12:00', '18:00', '23:00'];
-  const presets12 = ['07:00 AM', '09:00 AM', '12:00 PM', '03:00 PM', '06:00 PM', '11:00 PM'];
 
   const inputHeight = style?.height
     ? (typeof style.height === 'number' ? `${style.height}px` : style.height)
@@ -531,7 +530,7 @@ export function TimePicker({
     >
       {label && (
         <label
-          style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}
+          style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted, #797b8d))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}
         >
           {label}
         </label>
@@ -555,7 +554,7 @@ export function TimePicker({
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
-              color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
+              color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
               zIndex: 1,
               transition: 'color .15s ease',
             }}
@@ -584,7 +583,7 @@ export function TimePicker({
             height: inputHeight,
             paddingLeft: displayClockIcon ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
             paddingRight: size === 'xs' ? 18 : 26,
-            border: `1px solid ${open ? 'var(--accent)' : 'var(--bd, var(--border, #d7d8e0))'}`,
+            border: `1px solid ${open ? 'var(--accent, #f99e2c)' : 'var(--bd, var(--border, #d7d8e0))'}`,
             borderRadius: 'var(--rads, 8px)',
             fontSize: fontSize,
             background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, var(--surface, #ffffff))',
@@ -630,7 +629,7 @@ export function TimePicker({
             <ChevronDown
               size={13}
               style={{
-                color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
+                color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
                 transform: open ? 'rotate(180deg)' : 'none',
                 transition: 'transform .2s ease, color .15s ease',
                 pointerEvents: 'none',
@@ -665,24 +664,24 @@ export function TimePicker({
         >
           {/* Header Bar: Variant Switcher */}
           {showVariantToggle && (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border))' }}>
-              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1))', textTransform: 'uppercase', letterSpacing: '.05em' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
+              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1, #0f172a))', textTransform: 'uppercase', letterSpacing: '.05em' }}>
                 Режим
               </span>
 
-              <div style={{ display: 'inline-flex', background: 'var(--grey-1, var(--surface-hover))', padding: 2, borderRadius: 6, border: '1px solid var(--border-light, var(--border))' }}>
+              <div style={{ display: 'inline-flex', background: 'var(--grey-1, var(--surface-hover, #f5f5f8))', padding: 2, borderRadius: 6, border: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
                 <button
                   type="button"
                   onClick={() => setActiveVariant('stepper')}
                   className="cynx-timepicker-cell"
                   style={{
-                    padding: '2px 8px',
+                    padding: '2px 6px',
                     borderRadius: 4,
                     border: 'none',
                     fontSize: '.68rem',
                     fontWeight: activeVariant === 'stepper' ? 700 : 500,
-                    background: activeVariant === 'stepper' ? 'var(--surface, var(--bg))' : 'transparent',
-                    color: activeVariant === 'stepper' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    background: activeVariant === 'stepper' ? 'var(--surface, var(--bg, #f8fafc))' : 'transparent',
+                    color: activeVariant === 'stepper' ? 'var(--accent, #f99e2c)' : 'var(--muted, var(--t2, #797b8d))',
                     boxShadow: activeVariant === 'stepper' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                     cursor: 'pointer',
                     display: 'flex',
@@ -690,7 +689,7 @@ export function TimePicker({
                     gap: 3,
                   }}
                 >
-                  <Sliders size={11} /> Спиннер (+/-)
+                  <Sliders size={11} /> Спиннер
                 </button>
 
                 <button
@@ -698,13 +697,13 @@ export function TimePicker({
                   onClick={() => setActiveVariant('list')}
                   className="cynx-timepicker-cell"
                   style={{
-                    padding: '2px 8px',
+                    padding: '2px 6px',
                     borderRadius: 4,
                     border: 'none',
                     fontSize: '.68rem',
                     fontWeight: activeVariant === 'list' ? 700 : 500,
-                    background: activeVariant === 'list' ? 'var(--surface, var(--bg))' : 'transparent',
-                    color: activeVariant === 'list' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    background: activeVariant === 'list' ? 'var(--surface, var(--bg, #f8fafc))' : 'transparent',
+                    color: activeVariant === 'list' ? 'var(--accent, #f99e2c)' : 'var(--muted, var(--t2, #797b8d))',
                     boxShadow: activeVariant === 'list' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                     cursor: 'pointer',
                     display: 'flex',
@@ -712,7 +711,7 @@ export function TimePicker({
                     gap: 3,
                   }}
                 >
-                  <List size={11} /> Список (00-59)
+                  <List size={11} /> Список
                 </button>
               </div>
             </div>
@@ -720,12 +719,12 @@ export function TimePicker({
 
           {/* Optional Format Switcher (24h / 12h) */}
           {showFormatToggle && (
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border))' }}>
-              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1))', textTransform: 'uppercase', letterSpacing: '.05em' }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
+              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1, #0f172a))', textTransform: 'uppercase', letterSpacing: '.05em' }}>
                 Формат
               </span>
 
-              <div style={{ display: 'inline-flex', background: 'var(--grey-1, var(--surface-hover))', padding: 2, borderRadius: 6, border: '1px solid var(--border-light, var(--border))' }}>
+              <div style={{ display: 'inline-flex', background: 'var(--grey-1, var(--surface-hover, #f5f5f8))', padding: 2, borderRadius: 6, border: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
                 <button
                   type="button"
                   onClick={() => switchMode('24h')}
@@ -736,8 +735,8 @@ export function TimePicker({
                     border: 'none',
                     fontSize: '.68rem',
                     fontWeight: mode === '24h' ? 700 : 500,
-                    background: mode === '24h' ? 'var(--surface, var(--bg))' : 'transparent',
-                    color: mode === '24h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    background: mode === '24h' ? 'var(--surface, var(--bg, #f8fafc))' : 'transparent',
+                    color: mode === '24h' ? 'var(--accent, #f99e2c)' : 'var(--muted, var(--t2, #797b8d))',
                     boxShadow: mode === '24h' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                     cursor: 'pointer',
                   }}
@@ -754,13 +753,13 @@ export function TimePicker({
                     border: 'none',
                     fontSize: '.68rem',
                     fontWeight: mode === '12h' ? 700 : 500,
-                    background: mode === '12h' ? 'var(--surface, var(--bg))' : 'transparent',
-                    color: mode === '12h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    background: mode === '12h' ? 'var(--surface, var(--bg, #f8fafc))' : 'transparent',
+                    color: mode === '12h' ? 'var(--accent, #f99e2c)' : 'var(--muted, var(--t2, #797b8d))',
                     boxShadow: mode === '12h' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                     cursor: 'pointer',
                   }}
                 >
-                  12h AM/PM
+                  12h
                 </button>
               </div>
             </div>
@@ -780,23 +779,23 @@ export function TimePicker({
                   width: '100%',
                   padding: '4px 8px',
                   borderRadius: 6,
-                  border: '1px solid var(--border-light, var(--border))',
-                  background: 'var(--grey-1, var(--surface-hover))',
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
+                  background: 'var(--grey-1, var(--surface-hover, #f5f5f8))',
                   fontSize: '.68rem',
-                  color: 'var(--fg, var(--t1))',
+                  color: 'var(--fg, var(--t1, #0f172a))',
                   cursor: 'pointer',
                   fontWeight: 500,
                 }}
               >
                 <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                  <Globe size={12} color="var(--accent, var(--blue))" />
+                  <Globe size={12} color="var(--accent, #f99e2c)" />
                   {COMMON_TIMEZONES.find(t => t.value === tz)?.label || tz}
                 </span>
-                <ChevronDown size={12} color="var(--muted, var(--t2))" />
+                <ChevronDown size={12} color="var(--muted, var(--t2, #797b8d))" />
               </button>
 
               {showTzPicker && (
-                <div style={{ marginTop: 4, background: 'var(--surface, var(--bg))', border: '1px solid var(--border-light, var(--border))', borderRadius: 6, boxShadow: 'var(--shadow)', padding: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <div style={{ marginTop: 4, background: 'var(--surface, var(--bg, #f8fafc))', border: '1px solid var(--border-light, var(--border, #e2e8f0))', borderRadius: 6, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))', padding: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
                   {COMMON_TIMEZONES.map(t => (
                     <button
                       key={t.value}
@@ -809,8 +808,8 @@ export function TimePicker({
                         border: 'none',
                         textAlign: 'left',
                         fontSize: '.68rem',
-                        background: tz === t.value ? 'var(--accent, var(--blue))' : 'transparent',
-                        color: tz === t.value ? '#ffffff' : 'var(--fg, var(--t1))',
+                        background: tz === t.value ? 'var(--accent, #f99e2c)' : 'transparent',
+                        color: tz === t.value ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                         cursor: 'pointer',
                         fontWeight: tz === t.value ? 600 : 400,
                       }}
@@ -823,10 +822,10 @@ export function TimePicker({
             </div>
           )}
 
-          {/* Optional Quick Presets Bar */}
-          {showPresets && (
-            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border))' }}>
-              {(mode === '12h' ? presets12 : presets24).map(p => (
+          {/* Optional Quick Presets Bar (only if presets array passed) */}
+          {Array.isArray(presets) && presets.length > 0 && (
+            <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
+              {presets.map(p => (
                 <button
                   key={p}
                   type="button"
@@ -839,9 +838,9 @@ export function TimePicker({
                     padding: '3px 6px',
                     borderRadius: 4,
                     fontSize: '.68rem',
-                    border: '1px solid var(--border-light, var(--border))',
-                    background: inputValue === p ? 'var(--accent, var(--blue))' : 'var(--grey-1, var(--surface-hover))',
-                    color: inputValue === p ? '#ffffff' : 'var(--fg, var(--t1))',
+                    border: '1px solid var(--border-light, var(--border, #e2e8f0))',
+                    background: inputValue === p ? 'var(--accent, #f99e2c)' : 'var(--grey-1, var(--surface-hover, #f5f5f8))',
+                    color: inputValue === p ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                     cursor: 'pointer',
                     fontWeight: 500,
                   }}
@@ -863,16 +862,16 @@ export function TimePicker({
                   flex: 1,
                   padding: '4px 0',
                   borderRadius: 6,
-                  border: '1px solid var(--border-light, var(--border))',
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
                   fontSize: '.75rem',
                   fontWeight: parsed.ampm === 'AM' ? 700 : 500,
-                  background: parsed.ampm === 'AM' ? 'var(--accent, var(--blue))' : 'var(--grey-1, var(--surface-hover))',
-                  color: parsed.ampm === 'AM' ? '#ffffff' : 'var(--fg, var(--t1))',
+                  background: parsed.ampm === 'AM' ? 'var(--accent, #f99e2c)' : 'var(--grey-1, var(--surface-hover, #f5f5f8))',
+                  color: parsed.ampm === 'AM' ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                   cursor: 'pointer',
                   textAlign: 'center',
                 }}
               >
-                AM (Утро)
+                AM
               </button>
               <button
                 type="button"
@@ -882,16 +881,16 @@ export function TimePicker({
                   flex: 1,
                   padding: '4px 0',
                   borderRadius: 6,
-                  border: '1px solid var(--border-light, var(--border))',
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
                   fontSize: '.75rem',
                   fontWeight: parsed.ampm === 'PM' ? 700 : 500,
-                  background: parsed.ampm === 'PM' ? 'var(--accent, var(--blue))' : 'var(--grey-1, var(--surface-hover))',
-                  color: parsed.ampm === 'PM' ? '#ffffff' : 'var(--fg, var(--t1))',
+                  background: parsed.ampm === 'PM' ? 'var(--accent, #f99e2c)' : 'var(--grey-1, var(--surface-hover, #f5f5f8))',
+                  color: parsed.ampm === 'PM' ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                   cursor: 'pointer',
                   textAlign: 'center',
                 }}
               >
-                PM (Вечер)
+                PM
               </button>
             </div>
           )}
@@ -901,13 +900,13 @@ export function TimePicker({
             <div style={{ display: 'grid', gridTemplateColumns: showSeconds ? '1fr 1fr 1fr' : '1fr 1fr', gap: 10, padding: '4px 0' }}>
               {/* Hours Stepper */}
               <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
-                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))' }}>
-                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
+                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))' }}>
+                  Час
                 </div>
                 <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepHour(1)} title="+1 Час">
                   <ChevronUp size={14} />
                 </button>
-                <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, var(--blue))' }}>
+                <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, #f99e2c)' }}>
                   {mode === '12h' ? parsed.h12 : parsed.h24}
                 </div>
                 <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepHour(-1)} title="-1 Час">
@@ -917,11 +916,11 @@ export function TimePicker({
 
               {/* Minutes Stepper */}
               <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
-                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))' }}>Мин (0-59)</div>
+                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))' }}>Мин</div>
                 <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepMinute(1)} title="+1 Мин">
                   <ChevronUp size={14} />
                 </button>
-                <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, var(--blue))' }}>
+                <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, #f99e2c)' }}>
                   {parsed.m}
                 </div>
                 <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepMinute(-1)} title="-1 Мин">
@@ -932,11 +931,11 @@ export function TimePicker({
               {/* Seconds Stepper */}
               {showSeconds && (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
-                  <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))' }}>Сек (0-59)</div>
+                  <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))' }}>Сек</div>
                   <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepSecond(1)} title="+1 Сек">
                     <ChevronUp size={14} />
                   </button>
-                  <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, var(--blue))' }}>
+                  <div style={{ fontSize: '1.2rem', fontWeight: 700, fontVariantNumeric: 'tabular-nums', padding: '6px 0', color: 'var(--accent, #f99e2c)' }}>
                     {parsed.s}
                   </div>
                   <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepSecond(-1)} title="-1 Сек">
@@ -950,8 +949,8 @@ export function TimePicker({
             <div style={{ display: 'grid', gridTemplateColumns: showSeconds ? '1fr 1fr 1fr' : '1fr 1fr', gap: 6 }}>
               {/* Hours Column */}
               <div>
-                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))', marginBottom: 4, textAlign: 'center' }}>
-                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
+                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))', marginBottom: 4, textAlign: 'center' }}>
+                  Час
                 </div>
                 <div style={{ maxHeight: 150, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2, paddingRight: 2 }}>
                   {(mode === '12h' ? hours12List : hours24List).map(hNum => {
@@ -970,8 +969,8 @@ export function TimePicker({
                           fontSize: '.75rem',
                           cursor: 'pointer',
                           fontWeight: isSelected ? 700 : 400,
-                          background: isSelected ? 'var(--accent, var(--blue))' : 'transparent',
-                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                          background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                         }}
                       >
                         {pad(hNum)}
@@ -983,7 +982,7 @@ export function TimePicker({
 
               {/* Minutes Column: FULL LIST 00 to 59! */}
               <div>
-                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))', marginBottom: 4, textAlign: 'center' }}>Мин (00-59)</div>
+                <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))', marginBottom: 4, textAlign: 'center' }}>Мин</div>
                 <div style={{ maxHeight: 150, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2, paddingRight: 2 }}>
                   {fullMinutesList.map(mNum => {
                     const mStr = pad(mNum);
@@ -1002,8 +1001,8 @@ export function TimePicker({
                           fontSize: '.75rem',
                           cursor: 'pointer',
                           fontWeight: isSelected ? 700 : 400,
-                          background: isSelected ? 'var(--accent, var(--blue))' : 'transparent',
-                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                          background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                         }}
                       >
                         {mStr}
@@ -1016,7 +1015,7 @@ export function TimePicker({
               {/* Seconds Column (if showSeconds): FULL LIST 00 to 59! */}
               {showSeconds && (
                 <div>
-                  <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2))', marginBottom: 4, textAlign: 'center' }}>Сек (00-59)</div>
+                  <div style={{ fontSize: '.65rem', fontWeight: 600, color: 'var(--muted, var(--t2, #797b8d))', marginBottom: 4, textAlign: 'center' }}>Сек</div>
                   <div style={{ maxHeight: 150, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }}>
                     {fullMinutesList.map(sNum => {
                       const sStr = pad(sNum);
@@ -1035,8 +1034,8 @@ export function TimePicker({
                             fontSize: '.75rem',
                             cursor: 'pointer',
                             fontWeight: isSelected ? 700 : 400,
-                            background: isSelected ? 'var(--accent, var(--blue))' : 'transparent',
-                            color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                            background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                            color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
                           }}
                         >
                           {sStr}
@@ -1050,12 +1049,12 @@ export function TimePicker({
           )}
 
           {/* Footer Actions */}
-          <div style={{ marginTop: 8, paddingTop: 6, borderTop: '1px solid var(--border-light, var(--border))', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ marginTop: 8, paddingTop: 6, borderTop: '1px solid var(--border-light, var(--border, #e2e8f0))', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <button
               type="button"
               onClick={clearTime}
               className="cynx-timepicker-cell"
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: '.7rem', fontWeight: 500 }}
+              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger, #f64747)', fontSize: '.7rem', fontWeight: 500 }}
             >
               Сбросить
             </button>
@@ -1063,7 +1062,7 @@ export function TimePicker({
               type="button"
               onClick={closePicker}
               className="cynx-timepicker-cell"
-              style={{ padding: '3px 10px', borderRadius: 4, border: 'none', background: 'var(--accent, var(--blue))', color: '#ffffff', fontSize: '.7rem', cursor: 'pointer', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}
+              style={{ padding: '3px 10px', borderRadius: 4, border: 'none', background: 'var(--accent, #f99e2c)', color: '#ffffff', fontSize: '.7rem', cursor: 'pointer', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}
             >
               <Check size={12} /> Готово
             </button>

package/components/Toast.jsx

@@ -90,8 +90,8 @@ export function Toast({ toasts, remove, position = 'top-right', style = {} }) {
       {toasts.map(t => (
         <div key={t.id} className={`toast ${t.type}`} onClick={() => remove(t.id)}>
           {t.type === 'ok' || t.type === 'success'
-            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success)" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
-            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+            ? <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--success, #27ae60)" strokeWidth="2.5" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>
+            : <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--danger, #f64747)" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
           }
           {t.msg}
         </div>

package/components/UptimeBar.jsx

@@ -2,8 +2,8 @@ import { useMemo, useState, useRef } from 'react';
 
 const card = {
   background: 'var(--surface,#fff)',
-  border: '1px solid var(--border)',
-  borderRadius: 'var(--rad)',
+  border: '1px solid var(--border, #e2e8f0)',
+  borderRadius: 'var(--rad, 10px)',
   boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
 };
 
@@ -19,9 +19,9 @@ export default function UptimeBar({
   successValues = [],
   failedValues = [],
   totalSlots = 90,
-  greenColor = 'var(--success)',
-  redColor = 'var(--danger)',
-  emptyColor = 'var(--grey-1)',
+  greenColor = 'var(--success, #27ae60)',
+  redColor = 'var(--danger, #f64747)',
+  emptyColor = 'var(--grey-1, #f5f5f8)',
   barHeight = 28,
   barRadius = 3,
   leftLabel,
@@ -86,8 +86,8 @@ export default function UptimeBar({
               background: dotColor || greenColor, flexShrink: 0,
             }} />
           )}
-          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
-          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
+          <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 }}>
@@ -145,32 +145,32 @@ export default function UptimeBar({
           top: tooltipPos.y,
           transform: 'translate(-50%, -100%)',
           background: 'var(--surface,#fff)',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--rads)',
+          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,
           whiteSpace: 'nowrap',
         }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+          <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)' }}> ({Math.round((bars[hovered].success / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+                {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)' }}> ({Math.round((bars[hovered].failed / (bars[hovered].success + bars[hovered].failed)) * 100)}%)</span>}
+                {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)' }}>
+              <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted, #797b8d)' }}>
                 No logins
               </div>
             )}
@@ -180,11 +180,11 @@ export default function UptimeBar({
 
       {/* Footer */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || '90 days ago'}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>
+        <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)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel || 'Today'}</span>
       </div>
     </div>
   );
@@ -194,7 +194,7 @@ 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)', fontWeight: 500 }}>{label}</span>
+      <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
     </div>
   );
 }