cynx-ui 1.3.13 → 1.3.15

package/components/TimePicker.jsx

@@ -1,1078 +1,1078 @@
-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 STYLES = `
-@keyframes cynxTimePickerPopIn {
-  0% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes cynxTimePickerPopOut {
-  0% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.96);
-  }
-}
-
-.cynx-timepicker-drop {
-  animation: cynxTimePickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  will-change: opacity, transform;
-}
-
-.cynx-timepicker-drop.closing {
-  animation: cynxTimePickerPopOut 0.14s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.cynx-timepicker-cell {
-  transition: background-color 0.12s ease, color 0.12s ease;
-}
-
-.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);
-  color: var(--accent);
-}
-
-.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
-  showTimezoneSelect = false,   // Minimal default: false
-  showPlaceholder = false,      // Minimal default: false
-  timezone = 'Asia/Tashkent',
-  label,
-  placeholder,
-  size = 'sm',                 // 'xs' | 'sm' | 'md'
-  disabled = false,
-  readOnly = false,
-  style = {},
-  className = '',
-}) {
-  const displayClockIcon = showIcon && !hideIcon;
-  const [open, setOpen] = useState(false);
-  const [rendered, setRendered] = useState(false);
-  const [closing, setClosing] = useState(false);
-
-  const [activeVariant, setActiveVariant] = useState(variant);
-  const [mode, setMode] = useState(format);
-  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 });
-
-  ensureStyles();
-
-  useEffect(() => { setActiveVariant(variant); }, [variant]);
-  useEffect(() => { setMode(format); }, [format]);
-  useEffect(() => { setTz(timezone); }, [timezone]);
-
-  const openPicker = useCallback(() => {
-    if (disabled || readOnly) return;
-    setRendered(true);
-    setClosing(false);
-    setOpen(true);
-  }, [disabled, readOnly]);
-
-  const closePicker = useCallback(() => {
-    if (!open) return;
-    setClosing(true);
-    setOpen(false);
-    setShowTzPicker(false);
-    setTimeout(() => {
-      setRendered(false);
-      setClosing(false);
-    }, 140);
-  }, [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]);
-
-  const calcPos = useCallback(() => {
-    if (!btnRef.current) return;
-    const r = btnRef.current.getBoundingClientRect();
-    const dropW = mode === '12h' ? 290 : 230;
-    const dropH = dropRef.current ? dropRef.current.offsetHeight : 230;
-
-    let left = r.left;
-    if (left + dropW > window.innerWidth - 12) {
-      left = Math.max(12, r.right - dropW);
-    }
-    if (left < 12) left = 12;
-
-    let top = r.bottom + 4;
-    if (top + dropH > window.innerHeight - 12 && r.top - 4 - dropH > 12) {
-      top = r.top - 4 - dropH;
-    }
-
-    setPos({ top, left, width: Math.max(r.width, dropW) });
-  }, [mode]);
-
-  useLayoutEffect(() => {
-    if (!rendered) return;
-    calcPos();
-  }, [rendered, calcPos]);
-
-  useEffect(() => {
-    if (!rendered || closing) 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();
-      }
-    }
-    const timer = setTimeout(() => {
-      document.addEventListener('mousedown', onDown, true);
-    }, 0);
-    window.addEventListener('scroll', calcPos, true);
-    window.addEventListener('resize', calcPos);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('mousedown', onDown, true);
-      window.removeEventListener('scroll', calcPos, true);
-      window.removeEventListener('resize', calcPos);
-    };
-  }, [rendered, closing, calcPos, closePicker]);
-
-  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 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)
-    : (size === 'xs' ? '24px' : (size === 'sm' ? '32px' : '38px'));
-  const fontSize = (size === 'xs' || (style?.height && parseInt(style.height) <= 26)) ? '.72rem' : (size === 'sm' ? '.78rem' : '.85rem');
-
-  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))', 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)' : 'var(--t2, var(--muted, #9b9daa))',
-              zIndex: 1,
-              transition: 'color .15s ease',
-            }}
-          >
-            <Clock size={size === 'sm' ? 14 : 16} />
-          </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 ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
-            paddingRight: size === 'xs' ? 18 : 26,
-            border: `1px solid ${open ? 'var(--accent)' : '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' }}>
-          {inputValue && !disabled && !readOnly ? (
-            <button
-              type="button"
-              onClick={clearTime}
-              title="Очистить"
-              style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--t2, var(--muted, #9b9daa))',
-                padding: 2,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                transition: 'color .14s ease',
-              }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--danger, #f64747)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--t2, var(--muted, #9b9daa))'}
-            >
-              <X size={13} />
-            </button>
-          ) : (
-            <ChevronDown
-              size={13}
-              style={{
-                color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
-                transform: open ? 'rotate(180deg)' : 'none',
-                transition: 'transform .2s ease, color .15s ease',
-                pointerEvents: 'none',
-              }}
-            />
-          )}
-        </div>
-      </div>
-
-      {/* PORTAL DROPDOWN POPUP */}
-      {rendered && createPortal(
-        <div
-          ref={dropRef}
-          className={`cynx-timepicker-drop ${closing ? 'closing' : ''}`}
-          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)',
-          }}
-        >
-          {/* 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' }}>
-                Режим
-              </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))' }}>
-                <button
-                  type="button"
-                  onClick={() => setActiveVariant('stepper')}
-                  className="cynx-timepicker-cell"
-                  style={{
-                    padding: '2px 8px',
-                    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))',
-                    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 8px',
-                    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))',
-                    boxShadow: activeVariant === 'list' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                  }}
-                >
-                  <List size={11} /> Список (00-59)
-                </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))' }}>
-              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1))', 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))' }}>
-                <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))' : 'transparent',
-                    color: mode === '24h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
-                    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))' : 'transparent',
-                    color: mode === '12h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
-                    boxShadow: mode === '12h' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
-                    cursor: 'pointer',
-                  }}
-                >
-                  12h AM/PM
-                </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))',
-                  background: 'var(--grey-1, var(--surface-hover))',
-                  fontSize: '.68rem',
-                  color: 'var(--fg, var(--t1))',
-                  cursor: 'pointer',
-                  fontWeight: 500,
-                }}
-              >
-                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                  <Globe size={12} color="var(--accent, var(--blue))" />
-                  {COMMON_TIMEZONES.find(t => t.value === tz)?.label || tz}
-                </span>
-                <ChevronDown size={12} color="var(--muted, var(--t2))" />
-              </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 }}>
-                  {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, var(--blue))' : 'transparent',
-                        color: tz === t.value ? '#ffffff' : 'var(--fg, var(--t1))',
-                        cursor: 'pointer',
-                        fontWeight: tz === t.value ? 600 : 400,
-                      }}
-                    >
-                      {t.label}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </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 => (
-                <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))',
-                    background: inputValue === p ? 'var(--accent, var(--blue))' : 'var(--grey-1, var(--surface-hover))',
-                    color: inputValue === p ? '#ffffff' : 'var(--fg, var(--t1))',
-                    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))',
-                  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))',
-                  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))',
-                  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))',
-                  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))' }}>
-                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
-                </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))' }}>
-                  {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))' }}>Мин (0-59)</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))' }}>
-                  {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))' }}>Сек (0-59)</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))' }}>
-                    {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))', marginBottom: 4, textAlign: 'center' }}>
-                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
-                </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, var(--blue))' : 'transparent',
-                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
-                        }}
-                      >
-                        {pad(hNum)}
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              {/* 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={{ 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, var(--blue))' : 'transparent',
-                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
-                        }}
-                      >
-                        {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))', marginBottom: 4, textAlign: 'center' }}>Сек (00-59)</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, var(--blue))' : 'transparent',
-                            color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
-                          }}
-                        >
-                          {sStr}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Footer Actions */}
-          <div style={{ marginTop: 8, paddingTop: 6, borderTop: '1px solid var(--border-light, var(--border))', 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 }}
-            >
-              Сбросить
-            </button>
-            <button
-              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 }}
-            >
-              <Check size={12} /> Готово
-            </button>
-          </div>
-        </div>,
-        document.body
-      )}
-    </div>
-  );
-}
-
-export default TimePicker;
+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 STYLES = `
+@keyframes cynxTimePickerPopIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes cynxTimePickerPopOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.96);
+  }
+}
+
+.cynx-timepicker-drop {
+  animation: cynxTimePickerPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  will-change: opacity, transform;
+}
+
+.cynx-timepicker-drop.closing {
+  animation: cynxTimePickerPopOut 0.14s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.cynx-timepicker-cell {
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+
+.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);
+  color: var(--accent);
+}
+
+.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
+  showTimezoneSelect = false,   // Minimal default: false
+  showPlaceholder = false,      // Minimal default: false
+  timezone = 'Asia/Tashkent',
+  label,
+  placeholder,
+  size = 'sm',                 // 'xs' | 'sm' | 'md'
+  disabled = false,
+  readOnly = false,
+  style = {},
+  className = '',
+}) {
+  const displayClockIcon = showIcon && !hideIcon;
+  const [open, setOpen] = useState(false);
+  const [rendered, setRendered] = useState(false);
+  const [closing, setClosing] = useState(false);
+
+  const [activeVariant, setActiveVariant] = useState(variant);
+  const [mode, setMode] = useState(format);
+  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 });
+
+  ensureStyles();
+
+  useEffect(() => { setActiveVariant(variant); }, [variant]);
+  useEffect(() => { setMode(format); }, [format]);
+  useEffect(() => { setTz(timezone); }, [timezone]);
+
+  const openPicker = useCallback(() => {
+    if (disabled || readOnly) return;
+    setRendered(true);
+    setClosing(false);
+    setOpen(true);
+  }, [disabled, readOnly]);
+
+  const closePicker = useCallback(() => {
+    if (!open) return;
+    setClosing(true);
+    setOpen(false);
+    setShowTzPicker(false);
+    setTimeout(() => {
+      setRendered(false);
+      setClosing(false);
+    }, 140);
+  }, [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]);
+
+  const calcPos = useCallback(() => {
+    if (!btnRef.current) return;
+    const r = btnRef.current.getBoundingClientRect();
+    const dropW = mode === '12h' ? 290 : 230;
+    const dropH = dropRef.current ? dropRef.current.offsetHeight : 230;
+
+    let left = r.left;
+    if (left + dropW > window.innerWidth - 12) {
+      left = Math.max(12, r.right - dropW);
+    }
+    if (left < 12) left = 12;
+
+    let top = r.bottom + 4;
+    if (top + dropH > window.innerHeight - 12 && r.top - 4 - dropH > 12) {
+      top = r.top - 4 - dropH;
+    }
+
+    setPos({ top, left, width: Math.max(r.width, dropW) });
+  }, [mode]);
+
+  useLayoutEffect(() => {
+    if (!rendered) return;
+    calcPos();
+  }, [rendered, calcPos]);
+
+  useEffect(() => {
+    if (!rendered || closing) 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();
+      }
+    }
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', onDown, true);
+    }, 0);
+    window.addEventListener('scroll', calcPos, true);
+    window.addEventListener('resize', calcPos);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', onDown, true);
+      window.removeEventListener('scroll', calcPos, true);
+      window.removeEventListener('resize', calcPos);
+    };
+  }, [rendered, closing, calcPos, closePicker]);
+
+  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 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)
+    : (size === 'xs' ? '24px' : (size === 'sm' ? '32px' : '38px'));
+  const fontSize = (size === 'xs' || (style?.height && parseInt(style.height) <= 26)) ? '.72rem' : (size === 'sm' ? '.78rem' : '.85rem');
+
+  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))', 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)' : 'var(--t2, var(--muted, #9b9daa))',
+              zIndex: 1,
+              transition: 'color .15s ease',
+            }}
+          >
+            <Clock size={size === 'sm' ? 14 : 16} />
+          </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 ? (size === 'xs' ? 22 : 28) : (size === 'xs' ? 6 : 10),
+            paddingRight: size === 'xs' ? 18 : 26,
+            border: `1px solid ${open ? 'var(--accent)' : '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' }}>
+          {inputValue && !disabled && !readOnly ? (
+            <button
+              type="button"
+              onClick={clearTime}
+              title="Очистить"
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--t2, var(--muted, #9b9daa))',
+                padding: 2,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'color .14s ease',
+              }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--danger, #f64747)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--t2, var(--muted, #9b9daa))'}
+            >
+              <X size={13} />
+            </button>
+          ) : (
+            <ChevronDown
+              size={13}
+              style={{
+                color: open ? 'var(--accent)' : 'var(--t2, var(--muted, #9b9daa))',
+                transform: open ? 'rotate(180deg)' : 'none',
+                transition: 'transform .2s ease, color .15s ease',
+                pointerEvents: 'none',
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* PORTAL DROPDOWN POPUP */}
+      {rendered && createPortal(
+        <div
+          ref={dropRef}
+          className={`cynx-timepicker-drop ${closing ? 'closing' : ''}`}
+          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)',
+          }}
+        >
+          {/* 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' }}>
+                Режим
+              </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))' }}>
+                <button
+                  type="button"
+                  onClick={() => setActiveVariant('stepper')}
+                  className="cynx-timepicker-cell"
+                  style={{
+                    padding: '2px 8px',
+                    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))',
+                    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 8px',
+                    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))',
+                    boxShadow: activeVariant === 'list' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 3,
+                  }}
+                >
+                  <List size={11} /> Список (00-59)
+                </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))' }}>
+              <span style={{ fontSize: '.68rem', fontWeight: 700, color: 'var(--fg, var(--t1))', 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))' }}>
+                <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))' : 'transparent',
+                    color: mode === '24h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    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))' : 'transparent',
+                    color: mode === '12h' ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                    boxShadow: mode === '12h' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                    cursor: 'pointer',
+                  }}
+                >
+                  12h AM/PM
+                </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))',
+                  background: 'var(--grey-1, var(--surface-hover))',
+                  fontSize: '.68rem',
+                  color: 'var(--fg, var(--t1))',
+                  cursor: 'pointer',
+                  fontWeight: 500,
+                }}
+              >
+                <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                  <Globe size={12} color="var(--accent, var(--blue))" />
+                  {COMMON_TIMEZONES.find(t => t.value === tz)?.label || tz}
+                </span>
+                <ChevronDown size={12} color="var(--muted, var(--t2))" />
+              </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 }}>
+                  {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, var(--blue))' : 'transparent',
+                        color: tz === t.value ? '#ffffff' : 'var(--fg, var(--t1))',
+                        cursor: 'pointer',
+                        fontWeight: tz === t.value ? 600 : 400,
+                      }}
+                    >
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </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 => (
+                <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))',
+                    background: inputValue === p ? 'var(--accent, var(--blue))' : 'var(--grey-1, var(--surface-hover))',
+                    color: inputValue === p ? '#ffffff' : 'var(--fg, var(--t1))',
+                    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))',
+                  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))',
+                  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))',
+                  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))',
+                  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))' }}>
+                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
+                </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))' }}>
+                  {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))' }}>Мин (0-59)</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))' }}>
+                  {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))' }}>Сек (0-59)</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))' }}>
+                    {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))', marginBottom: 4, textAlign: 'center' }}>
+                  {mode === '12h' ? 'Час (1-12)' : 'Час (0-23)'}
+                </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, var(--blue))' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                        }}
+                      >
+                        {pad(hNum)}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* 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={{ 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, var(--blue))' : 'transparent',
+                          color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                        }}
+                      >
+                        {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))', marginBottom: 4, textAlign: 'center' }}>Сек (00-59)</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, var(--blue))' : 'transparent',
+                            color: isSelected ? '#ffffff' : 'var(--fg, var(--t1))',
+                          }}
+                        >
+                          {sStr}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Footer Actions */}
+          <div style={{ marginTop: 8, paddingTop: 6, borderTop: '1px solid var(--border-light, var(--border))', 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 }}
+            >
+              Сбросить
+            </button>
+            <button
+              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 }}
+            >
+              <Check size={12} /> Готово
+            </button>
+          </div>
+        </div>,
+        document.body
+      )}
+    </div>
+  );
+}
+
+export default TimePicker;