cynx-lib 1.3.28

package/ui/components/TimePicker.jsx

@@ -0,0 +1,1069 @@
+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 cynxTimePickerFadeInDown {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes cynxTimePickerFadeInUp {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.cynx-timepicker-drop {
+  will-change: opacity, transform;
+}
+
+.cynx-timepicker-cell {
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.cynx-timepicker-cell:hover {
+  background-color: var(--hover-bg, var(--grey-1, #f5f5f8));
+}
+
+.cynx-timepicker-stepper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 28px;
+  border-radius: var(--rads, 8px);
+  border: 1px solid var(--bd, var(--border, #d7d8e0));
+  background: var(--grey-1, #f5f5f8);
+  color: var(--t1, var(--primary-text, #1a1a2e));
+  cursor: pointer;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+
+.cynx-timepicker-stepper-btn:hover {
+  background: var(--surface, #ffffff);
+  border-color: var(--accent, #f99e2c);
+  color: var(--accent, #f99e2c);
+}
+
+.cynx-timepicker-stepper-btn:active {
+  background: var(--accent-bg, rgba(249,158,44,0.08));
+}
+`;
+
+const STYLE_ID = 'cynx-timepicker-styles';
+
+function ensureStyles() {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById(STYLE_ID)) return;
+  const tag = document.createElement('style');
+  tag.id = STYLE_ID;
+  tag.textContent = STYLES;
+  document.head.appendChild(tag);
+}
+
+const COMMON_TIMEZONES = [
+  { value: 'system', label: 'Системное время (Local)' },
+  { value: 'Asia/Tashkent', label: 'Ташкент (UTC+5)' },
+  { value: 'America/New_York', label: 'Нью-Йорк (UTC-5)' },
+  { value: 'Europe/London', label: 'Лондон (UTC+0)' },
+  { value: 'Asia/Tokyo', label: 'Токио (UTC+9)' },
+  { value: 'UTC', label: 'UTC' },
+];
+
+function pad(n) {
+  return String(n).padStart(2, '0');
+}
+
+function to12h(h24) {
+  const h = parseInt(h24, 10);
+  if (isNaN(h)) return { h12: '12', ampm: 'AM' };
+  const ampm = h >= 12 ? 'PM' : 'AM';
+  let h12 = h % 12;
+  if (h12 === 0) h12 = 12;
+  return { h12: pad(h12), ampm };
+}
+
+function to24h(h12, ampm) {
+  let h = parseInt(h12, 10);
+  if (isNaN(h)) return '00';
+  if (ampm === 'PM' && h < 12) h += 12;
+  if (ampm === 'AM' && h === 12) h = 0;
+  return pad(h);
+}
+
+function parseTime(val, is12h, showSeconds) {
+  if (!val || typeof val !== 'string') return { h24: '00', h12: '12', m: '00', s: '00', ampm: 'AM' };
+  
+  let str = val.trim();
+  let ampm = 'AM';
+  if (/pm/i.test(str)) { ampm = 'PM'; str = str.replace(/pm/i, '').trim(); }
+  else if (/am/i.test(str)) { ampm = 'AM'; str = str.replace(/am/i, '').trim(); }
+
+  let p0 = 0, p1 = 0, p2 = 0;
+
+  if (str.includes(':')) {
+    const parts = str.split(':').map(p => p.trim());
+    p0 = parseInt(parts[0], 10) || 0;
+    p1 = parseInt(parts[1], 10) || 0;
+    p2 = parseInt(parts[2], 10) || 0;
+  } else if (/^\d{3,6}$/.test(str)) {
+    p0 = parseInt(str.slice(0, 2), 10) || 0;
+    p1 = parseInt(str.slice(2, 4), 10) || 0;
+    p2 = parseInt(str.slice(4, 6), 10) || 0;
+  } else {
+    p0 = parseInt(str, 10) || 0;
+  }
+
+  let h24 = '00';
+  let h12 = '12';
+
+  if (is12h) {
+    if (p0 > 12) {
+      h24 = pad(Math.min(23, Math.max(0, p0)));
+      const conv = to12h(h24);
+      h12 = conv.h12;
+      ampm = conv.ampm;
+    } else {
+      let hNum = Math.min(12, Math.max(1, p0));
+      h12 = pad(hNum);
+      h24 = to24h(h12, ampm);
+    }
+  } else {
+    let hNum = Math.min(23, Math.max(0, p0));
+    h24 = pad(hNum);
+    const conv = to12h(h24);
+    h12 = conv.h12;
+    ampm = conv.ampm;
+  }
+
+  const m = pad(Math.min(59, Math.max(0, p1)));
+  const s = pad(Math.min(59, Math.max(0, p2)));
+
+  return { h24, h12, m, s, ampm };
+}
+
+export function TimePicker({
+  value = '',
+  onChange,
+  variant = 'list',            // 'stepper' (+/- buttons) | 'list' (full 00..59 scrollable list)
+  showVariantToggle = false,   // Default false: clean list mode by default!
+  format = '24h',             // '24h' | '12h'
+  showSeconds = false,
+  showIcon = false,            // Default false: clock icon hidden by default, set showIcon={true} to display
+  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',
+  label,
+  placeholder,
+  size = 'md',                 // 'xs' | 'sm' | 'md' | 'lg'
+  disabled = false,
+  readOnly = false,
+  style = {},
+  className = '',
+}) {
+  const displayClockIcon = showIcon && !hideIcon;
+  const [open, setOpen] = useState(false);
+
+  const [activeVariant, setActiveVariant] = useState(variant);
+  const [mode, setMode] = useState(format);
+  const [tz, setTz] = useState(timezone);
+  const [showTzPicker, setShowTzPicker] = useState(false);
+
+  const btnRef = useRef(null);
+  const dropRef = useRef(null);
+  const isTypingRef = useRef(false);
+
+  const [pos, setPos] = useState({ top: 0, left: 0, width: 230, openUp: false });
+
+  ensureStyles();
+
+  useEffect(() => { setActiveVariant(variant); }, [variant]);
+  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;
+    calcPos();
+    setOpen(true);
+  }, [disabled, readOnly, calcPos]);
+
+  const closePicker = useCallback(() => {
+    if (!open) return;
+    setOpen(false);
+    setShowTzPicker(false);
+  }, [open]);
+
+  const togglePicker = useCallback(() => {
+    if (open) closePicker();
+    else openPicker();
+  }, [open, closePicker, openPicker]);
+
+  const formatOutput = useCallback((parsedObj, useMode = mode) => {
+    const { h24, h12, m, s, ampm } = parsedObj;
+    if (useMode === '12h') {
+      return showSeconds ? `${h12}:${m}:${s} ${ampm}` : `${h12}:${m} ${ampm}`;
+    }
+    return showSeconds ? `${h24}:${m}:${s}` : `${h24}:${m}`;
+  }, [mode, showSeconds]);
+
+  const parsed = parseTime(value, mode === '12h', showSeconds);
+  const [inputValue, setInputValue] = useState(() => value ? formatOutput(parsed) : '');
+
+  // Keep inputValue in sync with props ONLY when user is NOT actively typing!
+  useEffect(() => {
+    if (!isTypingRef.current) {
+      if (value) {
+        const p = parseTime(value, mode === '12h', showSeconds);
+        setInputValue(formatOutput(p));
+      } else {
+        setInputValue('');
+      }
+    }
+  }, [value, mode, showSeconds, formatOutput]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      calcPos();
+      requestAnimationFrame(calcPos);
+    }
+  }, [open, calcPos]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      const inBtn = btnRef.current && btnRef.current.contains(e.target);
+      const inDrop = dropRef.current && dropRef.current.contains(e.target);
+      if (!inBtn && !inDrop) {
+        closePicker();
+      }
+    }
+    document.addEventListener('mousedown', onDown, true);
+    window.addEventListener('scroll', calcPos, true);
+    window.addEventListener('resize', calcPos);
+    return () => {
+      document.removeEventListener('mousedown', onDown, true);
+      window.removeEventListener('scroll', calcPos, true);
+      window.removeEventListener('resize', calcPos);
+    };
+  }, [open, closePicker, calcPos]);
+
+  const emitChange = (parsedObj, useMode = mode) => {
+    const formatted = formatOutput(parsedObj, useMode);
+    setInputValue(formatted);
+    if (onChange) {
+      onChange(formatted, {
+        hours: parseInt(parsedObj.h24, 10),
+        minutes: parseInt(parsedObj.m, 10),
+        seconds: parseInt(parsedObj.s, 10),
+        ampm: parsedObj.ampm,
+        format: useMode,
+        timezone: tz,
+        variant: activeVariant,
+      });
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (
+      ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key) ||
+      e.ctrlKey || e.metaKey || e.altKey
+    ) {
+      return;
+    }
+    const allowed = mode === '12h' ? /^[0-9:\sAPMapm]$/ : /^[0-9:]$/;
+    if (!allowed.test(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  const handleInputChange = (e) => {
+    let raw = e.target.value;
+    isTypingRef.current = true;
+
+    // 1. Strict filter: allow ONLY digits and colon (and AM/PM in 12h)
+    if (mode === '12h') {
+      raw = raw.replace(/[^0-9:\sAPMapm]/g, '');
+    } else {
+      raw = raw.replace(/[^0-9:]/g, '');
+    }
+
+    // 2. Single-digit hour shortcut (e.g. typing "3" -> "03:")
+    if (mode === '24h' && /^[3-9]$/.test(raw)) {
+      raw = '0' + raw + ':';
+    } else if (mode === '12h' && /^[2-9]$/.test(raw) && !/pm|am/i.test(raw)) {
+      raw = '0' + raw + ':';
+    }
+
+    // 3. Auto-append 1st colon after 2 hour digits + cap hour max (23 in 24h, 12 in 12h)
+    if (/^\d{2}$/.test(raw) && !inputValue.endsWith(':')) {
+      const hNum = parseInt(raw, 10);
+      if (mode === '24h' && hNum > 23) raw = '23:';
+      else if (mode === '12h' && hNum > 12) raw = '12:';
+      else raw = raw + ':';
+    }
+
+    // 4. Minutes tens digit validation: first digit of minute (after 1st colon) CANNOT be > 5!
+    if (/^\d{2}:[6-9]/.test(raw)) {
+      raw = raw.replace(/^(\d{2}:)[6-9]/, '$15');
+    }
+
+    // 5. Auto-append 2nd colon after 2 minute digits if showSeconds is true (e.g. "16:16" -> "16:16:")
+    if (showSeconds && /^\d{2}:\d{2}$/.test(raw) && !inputValue.endsWith(':')) {
+      const mNum = parseInt(raw.slice(3, 5), 10);
+      if (mNum > 59) raw = raw.slice(0, 3) + '59:';
+      else raw = raw + ':';
+    }
+
+    // 6. Seconds tens digit validation (if showSeconds): first digit of second CANNOT be > 5!
+    if (showSeconds && /^\d{2}:\d{2}:[6-9]/.test(raw)) {
+      raw = raw.replace(/^(\d{2}:\d{2}:)[6-9]/, '$15');
+    }
+
+    // 7. Prevent 3rd minute digit when showSeconds is FALSE! (e.g. "16:166" -> "16:16")
+    if (!showSeconds && /^\d{2}:\d{3,}/.test(raw)) {
+      raw = raw.slice(0, 5);
+    }
+
+    // 8. Prevent 3rd second digit when showSeconds is TRUE! (e.g. "16:16:666" -> "16:16:66")
+    if (showSeconds && /^\d{2}:\d{2}:\d{3,}/.test(raw)) {
+      raw = raw.slice(0, 8);
+    }
+
+    // 9. Strict Max length capping
+    const maxLen = mode === '12h' ? (showSeconds ? 11 : 8) : (showSeconds ? 8 : 5);
+    if (raw.length > maxLen) {
+      raw = raw.slice(0, maxLen);
+    }
+
+    e.target.value = raw;
+    setInputValue(raw);
+
+    if (!raw) {
+      if (onChange) onChange('', { hours: null, minutes: null, seconds: null, ampm: null, format: mode, timezone: tz, variant: activeVariant });
+      return;
+    }
+
+    // Emit change if raw matches a complete valid time pattern
+    if (/^\d{1,2}:\d{1,2}(:\d{1,2})?(\s*[ap]m)?$/i.test(raw) || /^\d{4}$/.test(raw)) {
+      const p = parseTime(raw, mode === '12h', showSeconds);
+      const formatted = formatOutput(p);
+      if (onChange) {
+        onChange(formatted, {
+          hours: parseInt(p.h24, 10),
+          minutes: parseInt(p.m, 10),
+          seconds: parseInt(p.s, 10),
+          ampm: p.ampm,
+          format: mode,
+          timezone: tz,
+          variant: activeVariant,
+        });
+      }
+    }
+  };
+
+  const handleInputBlur = () => {
+    isTypingRef.current = false;
+    if (!inputValue) return;
+    const p = parseTime(inputValue, mode === '12h', showSeconds);
+    emitChange(p);
+  };
+
+  // Stepper Up/Down (+/-) handlers
+  const stepHour = (delta) => {
+    isTypingRef.current = false;
+    let curH = mode === '12h' ? parseInt(parsed.h12, 10) : parseInt(parsed.h24, 10);
+    if (isNaN(curH)) curH = mode === '12h' ? 12 : 0;
+
+    if (mode === '12h') {
+      let nextH12 = curH + delta;
+      let nextAmPm = parsed.ampm;
+      if (nextH12 > 12) { nextH12 = 1; }
+      else if (nextH12 < 1) { nextH12 = 12; }
+      const h12 = pad(nextH12);
+      const h24 = to24h(h12, nextAmPm);
+      emitChange({ ...parsed, h12, h24, ampm: nextAmPm });
+    } else {
+      let nextH24 = (curH + delta + 24) % 24;
+      const h24 = pad(nextH24);
+      const { h12, ampm } = to12h(h24);
+      emitChange({ ...parsed, h24, h12, ampm });
+    }
+  };
+
+  const stepMinute = (delta) => {
+    isTypingRef.current = false;
+    let curM = parseInt(parsed.m, 10);
+    if (isNaN(curM)) curM = 0;
+    let nextM = (curM + delta + 60) % 60;
+    const m = pad(nextM);
+    emitChange({ ...parsed, m });
+  };
+
+  const stepSecond = (delta) => {
+    isTypingRef.current = false;
+    let curS = parseInt(parsed.s, 10);
+    if (isNaN(curS)) curS = 0;
+    let nextS = (curS + delta + 60) % 60;
+    const s = pad(nextS);
+    emitChange({ ...parsed, s });
+  };
+
+  // List direct selection handlers
+  const selectH24 = (hNum) => {
+    isTypingRef.current = false;
+    const h24 = pad(hNum);
+    const { h12, ampm } = to12h(h24);
+    emitChange({ ...parsed, h24, h12, ampm });
+  };
+
+  const selectH12 = (hNum12) => {
+    isTypingRef.current = false;
+    const h12 = pad(hNum12);
+    const h24 = to24h(h12, parsed.ampm);
+    emitChange({ ...parsed, h24, h12 });
+  };
+
+  const selectMin = (mNum) => {
+    isTypingRef.current = false;
+    const m = pad(mNum);
+    emitChange({ ...parsed, m });
+  };
+
+  const selectSec = (sNum) => {
+    isTypingRef.current = false;
+    const s = pad(sNum);
+    emitChange({ ...parsed, s });
+  };
+
+  const toggleAmPm = (targetAmPm) => {
+    isTypingRef.current = false;
+    const ampm = targetAmPm;
+    const h24 = to24h(parsed.h12, ampm);
+    emitChange({ ...parsed, ampm, h24 });
+  };
+
+  const switchMode = (newMode) => {
+    isTypingRef.current = false;
+    setMode(newMode);
+    emitChange(parsed, newMode);
+  };
+
+  const clearTime = (e) => {
+    e?.stopPropagation();
+    isTypingRef.current = false;
+    setInputValue('');
+    if (onChange) onChange('', { hours: null, minutes: null, seconds: null, ampm: null, format: mode, timezone: tz, variant: activeVariant });
+    closePicker();
+  };
+
+  const defaultPlaceholder = showPlaceholder
+    ? (mode === '12h'
+        ? (showSeconds ? 'hh:mm:ss AM' : 'hh:mm AM')
+        : (showSeconds ? 'HH:MM:SS' : 'HH:MM'))
+    : '';
+  const ph = placeholder !== undefined ? placeholder : defaultPlaceholder;
+
+  const hours24List = Array.from({ length: 24 }, (_, i) => i);
+  const hours12List = Array.from({ length: 12 }, (_, i) => i + 1);
+  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)
+    : `${s.height}px`;
+  const fontSize = `${s.fontSize}px`;
+
+  return (
+    <div
+      className={`cynx-timepicker-wrap ${className}`}
+      style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}
+    >
+      {label && (
+        <label
+          style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted, #797b8d))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}
+        >
+          {label}
+        </label>
+      )}
+
+      {/* Input Trigger Field */}
+      <div ref={btnRef} style={{ position: 'relative', display: 'flex', alignItems: 'center', width: '100%', boxSizing: 'border-box', minWidth: 0 }}>
+        {displayClockIcon && (
+          <button
+            type="button"
+            onClick={togglePicker}
+            disabled={disabled || readOnly}
+            title="Выбрать время"
+            style={{
+              position: 'absolute',
+              left: 10,
+              background: 'none',
+              border: 'none',
+              cursor: (disabled || readOnly) ? 'default' : 'pointer',
+              padding: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: open ? 'var(--accent, #f99e2c)' : 'var(--t2, var(--muted, #9b9daa))',
+              zIndex: 1,
+              transition: 'color .15s ease',
+            }}
+          >
+            <Clock size={s.clockSize} />
+          </button>
+        )}
+
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onBlur={handleInputBlur}
+          onFocus={openPicker}
+          maxLength={mode === '12h' ? (showSeconds ? 11 : 8) : (showSeconds ? 8 : 5)}
+          placeholder={ph}
+          disabled={disabled}
+          readOnly={readOnly}
+          style={{
+            display: 'flex',
+            width: '100%',
+            minWidth: 0,
+            maxWidth: '100%',
+            boxSizing: 'border-box',
+            height: inputHeight,
+            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,
+            background: disabled ? 'var(--grey-1, #f5f5f8)' : 'var(--input-bg, var(--surface, #ffffff))',
+            color: 'var(--t1, var(--primary-text, #1a1a2e))',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+            letterSpacing: '0.03em',
+            fontWeight: 600,
+            fontVariantNumeric: 'tabular-nums',
+            textAlign: 'left',
+            outline: 'none',
+            boxShadow: open
+              ? '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: disabled ? 0.5 : 1,
+            cursor: disabled ? 'not-allowed' : undefined,
+            transition: 'border-color .14s, box-shadow .14s',
+          }}
+        />
+
+        <div style={{ position: 'absolute', right: 8, display: 'flex', alignItems: 'center', gap: 4 }}>
+          {inputValue && !disabled && !readOnly && (
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                clearTime();
+              }}
+              title="Очистить"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                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={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 */}
+      {open && createPortal(
+        <div
+          ref={dropRef}
+          className="cynx-timepicker-drop"
+          style={{
+            position: 'fixed',
+            top: pos.top,
+            left: pos.left,
+            zIndex: 999999,
+            background: 'var(--surface, #ffffff)',
+            border: '1px solid var(--border, var(--bd, #d7d8e0))',
+            borderRadius: 'var(--rad, 10px)',
+            boxShadow: 'var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.15))',
+            padding: 10,
+            width: mode === '12h' ? 290 : 240,
+            maxWidth: 'calc(100vw - 24px)',
+            boxSizing: 'border-box',
+            fontSize: '.78rem',
+            userSelect: 'none',
+            fontFamily: 'var(--sans, inherit)',
+            animation: `${pos.openUp ? 'cynxTimePickerFadeInUp' : 'cynxTimePickerFadeInDown'} .15s ease`,
+          }}
+        >
+          {/* 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, #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, #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 6px',
+                    borderRadius: 4,
+                    border: 'none',
+                    fontSize: '.68rem',
+                    fontWeight: activeVariant === 'stepper' ? 700 : 500,
+                    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',
+                    alignItems: 'center',
+                    gap: 3,
+                  }}
+                >
+                  <Sliders size={11} /> Спиннер
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => setActiveVariant('list')}
+                  className="cynx-timepicker-cell"
+                  style={{
+                    padding: '2px 6px',
+                    borderRadius: 4,
+                    border: 'none',
+                    fontSize: '.68rem',
+                    fontWeight: activeVariant === 'list' ? 700 : 500,
+                    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',
+                    alignItems: 'center',
+                    gap: 3,
+                  }}
+                >
+                  <List size={11} /> Список
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* 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, #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, #f5f5f8))', padding: 2, borderRadius: 6, border: '1px solid var(--border-light, var(--border, #e2e8f0))' }}>
+                <button
+                  type="button"
+                  onClick={() => switchMode('24h')}
+                  className="cynx-timepicker-cell"
+                  style={{
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    border: 'none',
+                    fontSize: '.68rem',
+                    fontWeight: mode === '24h' ? 700 : 500,
+                    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',
+                  }}
+                >
+                  24h
+                </button>
+                <button
+                  type="button"
+                  onClick={() => switchMode('12h')}
+                  className="cynx-timepicker-cell"
+                  style={{
+                    padding: '2px 8px',
+                    borderRadius: 4,
+                    border: 'none',
+                    fontSize: '.68rem',
+                    fontWeight: mode === '12h' ? 700 : 500,
+                    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
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Optional Timezone Selector Header */}
+          {showTimezoneSelect && (
+            <div style={{ marginBottom: 8 }}>
+              <button
+                type="button"
+                onClick={() => setShowTzPicker(prev => !prev)}
+                className="cynx-timepicker-cell"
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  padding: '4px 8px',
+                  borderRadius: 6,
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
+                  background: 'var(--grey-1, var(--surface-hover, #f5f5f8))',
+                  fontSize: '.68rem',
+                  color: 'var(--fg, var(--t1, #0f172a))',
+                  cursor: 'pointer',
+                  fontWeight: 500,
+                }}
+              >
+                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <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, #797b8d))" />
+              </button>
+
+              {showTzPicker && (
+                <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}
+                      type="button"
+                      onClick={() => { setTz(t.value); setShowTzPicker(false); }}
+                      className="cynx-timepicker-cell"
+                      style={{
+                        padding: '4px 6px',
+                        borderRadius: 4,
+                        border: 'none',
+                        textAlign: 'left',
+                        fontSize: '.68rem',
+                        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,
+                      }}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* 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"
+                  onClick={() => {
+                    const newP = parseTime(p, mode === '12h', showSeconds);
+                    emitChange(newP);
+                  }}
+                  className="cynx-timepicker-cell"
+                  style={{
+                    padding: '3px 6px',
+                    borderRadius: 4,
+                    fontSize: '.68rem',
+                    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,
+                  }}
+                >
+                  {p}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {/* AM / PM Segment Selector (Only for 12h mode) */}
+          {mode === '12h' && (
+            <div style={{ display: 'flex', gap: 6, marginBottom: 8, justifyContent: 'center' }}>
+              <button
+                type="button"
+                onClick={() => toggleAmPm('AM')}
+                className="cynx-timepicker-cell"
+                style={{
+                  flex: 1,
+                  padding: '4px 0',
+                  borderRadius: 6,
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
+                  fontSize: '.75rem',
+                  fontWeight: parsed.ampm === 'AM' ? 700 : 500,
+                  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
+              </button>
+              <button
+                type="button"
+                onClick={() => toggleAmPm('PM')}
+                className="cynx-timepicker-cell"
+                style={{
+                  flex: 1,
+                  padding: '4px 0',
+                  borderRadius: 6,
+                  border: '1px solid var(--border-light, var(--border, #e2e8f0))',
+                  fontSize: '.75rem',
+                  fontWeight: parsed.ampm === 'PM' ? 700 : 500,
+                  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
+              </button>
+            </div>
+          )}
+
+          {/* VARIANT 1: STEPPER MODE (Up/Down +/- Buttons) */}
+          {activeVariant === 'stepper' ? (
+            <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, #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, #f99e2c)' }}>
+                  {mode === '12h' ? parsed.h12 : parsed.h24}
+                </div>
+                <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepHour(-1)} title="-1 Час">
+                  <ChevronDown size={14} />
+                </button>
+              </div>
+
+              {/* Minutes Stepper */}
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+                <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, #f99e2c)' }}>
+                  {parsed.m}
+                </div>
+                <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepMinute(-1)} title="-1 Мин">
+                  <ChevronDown size={14} />
+                </button>
+              </div>
+
+              {/* Seconds Stepper */}
+              {showSeconds && (
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+                  <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, #f99e2c)' }}>
+                    {parsed.s}
+                  </div>
+                  <button type="button" className="cynx-timepicker-stepper-btn" onClick={() => stepSecond(-1)} title="-1 Сек">
+                    <ChevronDown size={14} />
+                  </button>
+                </div>
+              )}
+            </div>
+          ) : (
+            /* VARIANT 2: LIST MODE (Full List 00..59) */
+            <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, #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 => {
+                    const isSelected = mode === '12h' ? parsed.h12 === pad(hNum) : parsed.h24 === pad(hNum);
+                    return (
+                      <button
+                        key={hNum}
+                        type="button"
+                        onClick={() => (mode === '12h' ? selectH12(hNum) : selectH24(hNum))}
+                        className="cynx-timepicker-cell"
+                        style={{
+                          padding: '3px 6px',
+                          borderRadius: 4,
+                          border: 'none',
+                          textAlign: 'center',
+                          fontSize: '.75rem',
+                          cursor: 'pointer',
+                          fontWeight: isSelected ? 700 : 400,
+                          background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
+                        }}
+                      >
+                        {pad(hNum)}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Minutes Column: FULL LIST 00 to 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);
+                    const isSelected = parsed.m === mStr;
+                    return (
+                      <button
+                        key={mNum}
+                        type="button"
+                        onClick={() => selectMin(mNum)}
+                        className="cynx-timepicker-cell"
+                        style={{
+                          padding: '3px 6px',
+                          borderRadius: 4,
+                          border: 'none',
+                          textAlign: 'center',
+                          fontSize: '.75rem',
+                          cursor: 'pointer',
+                          fontWeight: isSelected ? 700 : 400,
+                          background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
+                        }}
+                      >
+                        {mStr}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Seconds Column (if showSeconds): FULL LIST 00 to 59! */}
+              {showSeconds && (
+                <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);
+                      const isSelected = parsed.s === sStr;
+                      return (
+                        <button
+                          key={sNum}
+                          type="button"
+                          onClick={() => selectSec(sNum)}
+                          className="cynx-timepicker-cell"
+                          style={{
+                            padding: '3px 6px',
+                            borderRadius: 4,
+                            border: 'none',
+                            textAlign: 'center',
+                            fontSize: '.75rem',
+                            cursor: 'pointer',
+                            fontWeight: isSelected ? 700 : 400,
+                            background: isSelected ? 'var(--accent, #f99e2c)' : 'transparent',
+                            color: isSelected ? '#ffffff' : 'var(--fg, var(--t1, #0f172a))',
+                          }}
+                        >
+                          {sStr}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Footer Actions */}
+          <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, #f64747)', fontSize: '.7rem', fontWeight: 500 }}
+            >
+              Сбросить
+            </button>
+            <button
+              type="button"
+              onClick={closePicker}
+              className="cynx-timepicker-cell"
+              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>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
+
+export default TimePicker;