cynx-ui 1.2.48 → 1.3.0

package/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 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(--grey-1, var(--surface-hover));
+}
+
+.cynx-timepicker-stepper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 28px;
+  border-radius: var(--rads, 6px);
+  border: 1px solid var(--border-light, var(--border));
+  background: var(--grey-1, var(--surface-hover));
+  color: var(--fg, var(--t1));
+  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, var(--bg));
+  border-color: var(--accent, var(--blue));
+  color: var(--accent, var(--blue));
+}
+
+.cynx-timepicker-stepper-btn:active {
+  background: var(--accent-bg, rgba(37,99,235,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
+  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 = mode === '12h'
+    ? (showSeconds ? 'hh:mm:ss AM' : 'hh:mm AM')
+    : (showSeconds ? 'HH:MM:SS' : 'HH:MM');
+  const ph = 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 = size === 'sm' ? '32px' : '38px';
+  const fontSize = 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(--blue))' : 'var(--muted, var(--t2))',
+              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 ? 28 : 10,
+            paddingRight: 26,
+            border: `1px solid ${open ? 'var(--accent, var(--blue))' : 'var(--border-light, var(--border))'}`,
+            borderRadius: 'var(--rads, 6px)',
+            fontSize: fontSize,
+            background: disabled ? 'var(--grey-1, var(--surface-hover))' : 'var(--bg, var(--surface))',
+            color: 'var(--fg, var(--t1, var(--primary-text)))',
+            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(37, 99, 235, 0.12))' : 'var(--shadow, none)',
+            transition: 'all .15s cubic-bezier(.16,1,.3,1)',
+          }}
+        />
+
+        <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(--muted, var(--t2))',
+                padding: 2,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                transition: 'color .14s ease',
+              }}
+              onMouseEnter={e => e.currentTarget.style.color = 'var(--danger)'}
+              onMouseLeave={e => e.currentTarget.style.color = 'var(--muted, var(--t2))'}
+            >
+              <X size={13} />
+            </button>
+          ) : (
+            <ChevronDown
+              size={13}
+              style={{
+                color: open ? 'var(--accent, var(--blue))' : 'var(--muted, var(--t2))',
+                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, var(--bg))',
+            border: '1px solid var(--border-light, var(--border))',
+            borderRadius: 'var(--rad, 10px)',
+            boxShadow: 'var(--shadow-lg, var(--shadow))',
+            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;

package/index.js

@@ -28,6 +28,7 @@ import { ConfirmRoot as _ConfirmRoot, confirm as _confirm } from './components/C
 import { SearchableDropdown as _SearchableDropdown } from './components/SearchableDropdown.jsx';
 import { Pagination as _Pagination } from './components/Pagination.jsx';
 import { DatePicker as _DatePicker } from './components/DatePicker.jsx';
+import { TimePicker as _TimePicker } from './components/TimePicker.jsx';
 import { ActionsMenu as _ActionsMenu } from './components/ActionsMenu.jsx';
 import { BrandingCard as _BrandingCard } from './components/BrandingCard.jsx';
 import { Dropzone as _Dropzone } from './components/Dropzone.jsx';
@@ -72,6 +73,7 @@ export const confirm = _confirm;
 export const SearchableDropdown = _SearchableDropdown;
 export const Pagination = _Pagination;
 export const DatePicker = _DatePicker;
+export const TimePicker = _TimePicker;
 export const ActionsMenu = _ActionsMenu;
 export const BrandingCard = _BrandingCard;
 export const Dropzone = _Dropzone;

package/package.json

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