wssf-kage-ui 0.1.1 → 0.1.3

package/dist/esm/TimePicker/index.js

@@ -0,0 +1,327 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import "./style.less";
+
+// ============ 时间工具函数 ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var formatTime = function formatTime(hour, minute, second, format) {
+  var h12 = hour % 12 || 12;
+  var period = hour < 12 ? 'AM' : 'PM';
+  return format.replace('HH', String(hour).padStart(2, '0')).replace('H', String(hour)).replace('hh', String(h12).padStart(2, '0')).replace('h', String(h12)).replace('mm', String(minute).padStart(2, '0')).replace('m', String(minute)).replace('ss', String(second).padStart(2, '0')).replace('s', String(second)).replace('A', period).replace('a', period.toLowerCase());
+};
+var parseTime = function parseTime(timeStr, format) {
+  if (!timeStr) return null;
+  var is12Hour = format.includes('h');
+  var hasSecond = format.includes('s');
+  var parts = timeStr.split(':');
+  if (parts.length < 2) return null;
+  var hour = parseInt(parts[0], 10);
+  var minute = parseInt(parts[1], 10);
+  var second = hasSecond && parts.length > 2 ? parseInt(parts[2], 10) : 0;
+
+  // 处理 12 小时制
+  if (is12Hour) {
+    var isPM = timeStr.toLowerCase().includes('pm');
+    if (isPM && hour < 12) hour += 12;
+    if (!isPM && hour === 12) hour = 0;
+  }
+  if (isNaN(hour) || isNaN(minute) || isNaN(second)) return null;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) return null;
+  return {
+    hour: hour,
+    minute: minute,
+    second: second
+  };
+};
+
+// ============ TimePicker Props ============
+
+// ============ TimePicker Component ============
+export var TimePicker = function TimePicker(_ref) {
+  var controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请选择时间' : _ref$placeholder,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? 'HH:mm:ss' : _ref$format,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    status = _ref.status,
+    _ref$hourStep = _ref.hourStep,
+    hourStep = _ref$hourStep === void 0 ? 1 : _ref$hourStep,
+    _ref$minuteStep = _ref.minuteStep,
+    minuteStep = _ref$minuteStep === void 0 ? 1 : _ref$minuteStep,
+    _ref$secondStep = _ref.secondStep,
+    secondStep = _ref$secondStep === void 0 ? 1 : _ref$secondStep,
+    disabledHours = _ref.disabledHours,
+    disabledMinutes = _ref.disabledMinutes,
+    disabledSeconds = _ref.disabledSeconds,
+    _ref$hideDisabledOpti = _ref.hideDisabledOptions,
+    hideDisabledOptions = _ref$hideDisabledOpti === void 0 ? false : _ref$hideDisabledOpti,
+    _ref$use12Hours = _ref.use12Hours,
+    use12Hours = _ref$use12Hours === void 0 ? false : _ref$use12Hours,
+    onChange = _ref.onChange,
+    onOpenChange = _ref.onOpenChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var showSecond = format.includes('s');
+  var actualFormat = use12Hours && !format.includes('h') ? format.replace('HH', 'hh') + ' A' : format;
+
+  // 解析初始值
+  var parseInitialValue = function parseInitialValue(val) {
+    if (!val) return null;
+    if (_typeof(val) === 'object') return val;
+    return parseTime(val, actualFormat);
+  };
+  var _useState = useState(parseInitialValue(defaultValue)),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
+  var containerRef = useRef(null);
+  var hourRef = useRef(null);
+  var minuteRef = useRef(null);
+  var secondRef = useRef(null);
+  var value = controlledValue !== undefined ? parseInitialValue(controlledValue) : internalValue;
+
+  // 打开/关闭面板
+  var setOpen = useCallback(function (open) {
+    if (disabled) return;
+    setIsOpen(open);
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(open);
+  }, [disabled, onOpenChange]);
+
+  // 点击外部关闭
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      return document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [setOpen]);
+
+  // 滚动到选中项
+  useEffect(function () {
+    if (isOpen && value) {
+      setTimeout(function () {
+        var scrollToValue = function scrollToValue(ref, targetValue) {
+          if (ref.current) {
+            var item = ref.current.querySelector("[data-value=\"".concat(targetValue, "\"]"));
+            if (item) {
+              ref.current.scrollTop = item.offsetTop - ref.current.offsetHeight / 2 + item.offsetHeight / 2;
+            }
+          }
+        };
+        scrollToValue(hourRef, value.hour);
+        scrollToValue(minuteRef, value.minute);
+        if (showSecond) {
+          scrollToValue(secondRef, value.second);
+        }
+      }, 0);
+    }
+  }, [isOpen, value, showSecond]);
+
+  // 生成选项列表
+  var generateOptions = useCallback(function (max, step, disabledFn, currentHour, currentMinute) {
+    var options = [];
+    for (var i = 0; i < max; i += step) {
+      var isDisabled = false;
+      if (disabledFn) {
+        if (typeof disabledFn === 'function') {
+          var _disabled = [];
+          if (disabledFn.length === 0) {
+            _disabled = disabledFn();
+          } else if (disabledFn.length === 1) {
+            _disabled = disabledFn(currentHour);
+          } else {
+            _disabled = disabledFn(currentHour, currentMinute);
+          }
+          isDisabled = Array.isArray(_disabled) && _disabled.includes(i);
+        }
+      }
+      if (!hideDisabledOptions || !isDisabled) {
+        options.push(i);
+      }
+    }
+    return options;
+  }, [hideDisabledOptions]);
+
+  // 小时选项
+  var hourOptions = useMemo(function () {
+    var max = use12Hours ? 12 : 24;
+    var options = generateOptions(max, hourStep);
+    if (use12Hours && !options.includes(12)) {
+      options.push(12);
+    }
+    if (disabledHours) {
+      var _disabled2 = disabledHours();
+      return options.filter(function (h) {
+        return !_disabled2.includes(h);
+      });
+    }
+    return options;
+  }, [use12Hours, hourStep, disabledHours, generateOptions]);
+
+  // 分钟选项
+  var minuteOptions = useMemo(function () {
+    var options = generateOptions(60, minuteStep);
+    if (disabledMinutes && value) {
+      var _disabled3 = disabledMinutes(value.hour);
+      return options.filter(function (m) {
+        return !_disabled3.includes(m);
+      });
+    }
+    return options;
+  }, [minuteStep, disabledMinutes, value, generateOptions]);
+
+  // 秒选项
+  var secondOptions = useMemo(function () {
+    var options = generateOptions(60, secondStep);
+    if (disabledSeconds && value) {
+      var _disabled4 = disabledSeconds(value.hour, value.minute);
+      return options.filter(function (s) {
+        return !_disabled4.includes(s);
+      });
+    }
+    return options;
+  }, [secondStep, disabledSeconds, value, generateOptions]);
+
+  // 选择时间
+  var handleSelectTime = useCallback(function (type, val) {
+    var _value$hour, _value$minute, _value$second;
+    var newValue = _defineProperty({
+      hour: (_value$hour = value === null || value === void 0 ? void 0 : value.hour) !== null && _value$hour !== void 0 ? _value$hour : 0,
+      minute: (_value$minute = value === null || value === void 0 ? void 0 : value.minute) !== null && _value$minute !== void 0 ? _value$minute : 0,
+      second: (_value$second = value === null || value === void 0 ? void 0 : value.second) !== null && _value$second !== void 0 ? _value$second : 0
+    }, type, val);
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    var timeString = formatTime(newValue.hour, newValue.minute, newValue.second, actualFormat);
+    onChange === null || onChange === void 0 || onChange(newValue, timeString);
+  }, [value, controlledValue, actualFormat, onChange]);
+
+  // 清除
+  var handleClear = useCallback(function (e) {
+    e.stopPropagation();
+    if (controlledValue === undefined) {
+      setInternalValue(null);
+    }
+    onChange === null || onChange === void 0 || onChange(null, '');
+  }, [controlledValue, onChange]);
+
+  // 当前时间
+  var handleNow = useCallback(function () {
+    var now = new Date();
+    var newValue = {
+      hour: now.getHours(),
+      minute: now.getMinutes(),
+      second: now.getSeconds()
+    };
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    var timeString = formatTime(newValue.hour, newValue.minute, newValue.second, actualFormat);
+    onChange === null || onChange === void 0 || onChange(newValue, timeString);
+    setOpen(false);
+  }, [controlledValue, actualFormat, onChange, setOpen]);
+  var classNames = ['kage-timepicker', "kage-timepicker-".concat(size), disabled && 'kage-timepicker-disabled', status && "kage-timepicker-status-".concat(status), isOpen && 'kage-timepicker-open', className].filter(Boolean).join(' ');
+  var displayValue = value ? formatTime(value.hour, value.minute, value.second, actualFormat) : '';
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "kage-timepicker-input",
+      onClick: function onClick() {
+        return setOpen(!isOpen);
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "kage-timepicker-value ".concat(!value ? 'kage-timepicker-placeholder' : ''),
+        children: value ? displayValue : placeholder
+      }), allowClear && value && !disabled && /*#__PURE__*/_jsx("span", {
+        className: "kage-timepicker-clear",
+        onClick: handleClear,
+        children: "\xD7"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "kage-timepicker-icon",
+        children: "\uD83D\uDD50"
+      })]
+    }), isOpen && /*#__PURE__*/_jsxs("div", {
+      className: "kage-timepicker-panel",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-timepicker-panel-inner",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "kage-timepicker-column",
+          ref: hourRef,
+          children: hourOptions.map(function (hour) {
+            return /*#__PURE__*/_jsx("div", {
+              "data-value": hour,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.hour) === hour ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('hour', hour);
+              },
+              children: String(hour).padStart(2, '0')
+            }, hour);
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "kage-timepicker-column",
+          ref: minuteRef,
+          children: minuteOptions.map(function (minute) {
+            return /*#__PURE__*/_jsx("div", {
+              "data-value": minute,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.minute) === minute ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('minute', minute);
+              },
+              children: String(minute).padStart(2, '0')
+            }, minute);
+          })
+        }), showSecond && /*#__PURE__*/_jsx("div", {
+          className: "kage-timepicker-column",
+          ref: secondRef,
+          children: secondOptions.map(function (second) {
+            return /*#__PURE__*/_jsx("div", {
+              "data-value": second,
+              className: "kage-timepicker-cell ".concat((value === null || value === void 0 ? void 0 : value.second) === second ? 'kage-timepicker-cell-selected' : ''),
+              onClick: function onClick() {
+                return handleSelectTime('second', second);
+              },
+              children: String(second).padStart(2, '0')
+            }, second);
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "kage-timepicker-footer",
+        children: /*#__PURE__*/_jsx("button", {
+          className: "kage-timepicker-now",
+          onClick: handleNow,
+          children: "\u6B64\u523B"
+        })
+      })]
+    })]
+  });
+};
+export default TimePicker;

package/dist/esm/TimePicker/style.less

@@ -0,0 +1,384 @@
+// TimePicker 时间选择器样式
+
+@prefix: kage-timepicker;
+
+// 颜色变量
+@timepicker-bg: #fff;
+@timepicker-border: #d9d9d9;
+@timepicker-hover-border: #6366f1;
+@timepicker-focus-border: #6366f1;
+@timepicker-focus-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+@timepicker-disabled-bg: #f5f5f5;
+@timepicker-disabled-color: rgba(0, 0, 0, 0.25);
+@timepicker-placeholder-color: rgba(0, 0, 0, 0.35);
+@timepicker-panel-bg: #fff;
+@timepicker-panel-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+@timepicker-cell-hover-bg: rgba(0, 0, 0, 0.04);
+@timepicker-cell-selected-bg: #e0e7ff;
+@timepicker-cell-selected-color: #4f46e5;
+
+// ============ 容器 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 输入框 ============
+.@{prefix}-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+  background: @timepicker-bg;
+  border: 1px solid @timepicker-border;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: @timepicker-hover-border;
+  }
+}
+
+.@{prefix}-open .@{prefix}-input {
+  border-color: @timepicker-focus-border;
+  box-shadow: @timepicker-focus-shadow;
+}
+
+.@{prefix}-value {
+  flex: 1;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 1.5;
+}
+
+.@{prefix}-placeholder {
+  color: @timepicker-placeholder-color;
+}
+
+.@{prefix}-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.35);
+  background: rgba(0, 0, 0, 0.06);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: 1;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.65);
+    background: rgba(0, 0, 0, 0.12);
+  }
+}
+
+.@{prefix}-icon {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+}
+
+// ============ 尺寸变体 ============
+.@{prefix}-large .@{prefix}-input {
+  padding: 10px 14px;
+  font-size: 16px;
+}
+
+.@{prefix}-small .@{prefix}-input {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+// ============ 状态变体 ============
+.@{prefix}-status-error .@{prefix}-input {
+  border-color: #ff4d4f;
+
+  &:hover {
+    border-color: #ff7875;
+  }
+}
+
+.@{prefix}-status-warning .@{prefix}-input {
+  border-color: #faad14;
+
+  &:hover {
+    border-color: #ffc53d;
+  }
+}
+
+.@{prefix}-disabled {
+  .@{prefix}-input {
+    background: @timepicker-disabled-bg;
+    border-color: @timepicker-border;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @timepicker-border;
+    }
+  }
+
+  .@{prefix}-value {
+    color: @timepicker-disabled-color;
+  }
+
+  .@{prefix}-icon {
+    color: @timepicker-disabled-color;
+  }
+}
+
+// ============ 面板 ============
+.@{prefix}-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 1050;
+  width: auto;
+  background: @timepicker-panel-bg;
+  border-radius: 8px;
+  box-shadow: @timepicker-panel-shadow;
+  overflow: hidden;
+  animation: timepickerSlideDown 0.2s ease;
+}
+
+@keyframes timepickerSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.@{prefix}-panel-inner {
+  display: flex;
+  gap: 0;
+}
+
+// ============ 时间列 ============
+.@{prefix}-column {
+  flex: 1;
+  width: 64px;
+  max-height: 224px;
+  overflow-y: auto;
+  border-right: 1px solid #f0f0f0;
+
+  &:last-child {
+    border-right: none;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+.@{prefix}-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.88);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: @timepicker-cell-hover-bg;
+  }
+}
+
+.@{prefix}-cell-selected {
+  background: @timepicker-cell-selected-bg;
+  color: @timepicker-cell-selected-color;
+  font-weight: 600;
+
+  &:hover {
+    background: @timepicker-cell-selected-bg;
+  }
+}
+
+.@{prefix}-cell-disabled {
+  color: @timepicker-disabled-color;
+  cursor: not-allowed;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+// ============ 底部 ============
+.@{prefix}-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 12px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.@{prefix}-now {
+  padding: 4px 12px;
+  font-size: 13px;
+  color: #6366f1;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(99, 102, 241, 0.08);
+  }
+
+  &:active {
+    background: rgba(99, 102, 241, 0.15);
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-input {
+    background: #1f1f1f;
+    border-color: #434343;
+    color: rgba(255, 255, 255, 0.88);
+
+    &:hover {
+      border-color: #6366f1;
+    }
+  }
+
+  .@{prefix}-open .@{prefix}-input {
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+
+  .@{prefix}-value {
+    color: rgba(255, 255, 255, 0.88);
+  }
+
+  .@{prefix}-placeholder {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  .@{prefix}-clear {
+    color: rgba(255, 255, 255, 0.35);
+    background: rgba(255, 255, 255, 0.08);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.65);
+      background: rgba(255, 255, 255, 0.15);
+    }
+  }
+
+  .@{prefix}-icon {
+    color: rgba(255, 255, 255, 0.35);
+  }
+
+  .@{prefix}-disabled {
+    .@{prefix}-input {
+      background: rgba(255, 255, 255, 0.04);
+      border-color: #434343;
+    }
+
+    .@{prefix}-value,
+    .@{prefix}-icon {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-panel {
+    background: #1f1f1f;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+  }
+
+  .@{prefix}-column {
+    border-right-color: #434343;
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.2);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+
+  .@{prefix}-cell {
+    color: rgba(255, 255, 255, 0.88);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-cell-selected {
+    background: rgba(99, 102, 241, 0.3);
+    color: #a5b4fc;
+
+    &:hover {
+      background: rgba(99, 102, 241, 0.3);
+    }
+  }
+
+  .@{prefix}-cell-disabled {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .@{prefix}-footer {
+    border-top-color: #434343;
+  }
+
+  .@{prefix}-now {
+    color: #a5b4fc;
+
+    &:hover {
+      background: rgba(99, 102, 241, 0.2);
+    }
+
+    &:active {
+      background: rgba(99, 102, 241, 0.3);
+    }
+  }
+
+  .@{prefix}-status-error .@{prefix}-input {
+    border-color: #a61d24;
+
+    &:hover {
+      border-color: #cf1322;
+    }
+  }
+
+  .@{prefix}-status-warning .@{prefix}-input {
+    border-color: #ad6800;
+
+    &:hover {
+      border-color: #d48806;
+    }
+  }
+}
+