@hi-ui/time-picker 5.0.0-experimental.0 → 5.0.0-experimental.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/lib/cjs/Input.js +5 -2
  3. package/lib/cjs/PopContent.js +4 -2
  4. package/lib/cjs/TimePicker.js +65 -20
  5. package/lib/cjs/styles/index.scss.js +1 -1
  6. package/lib/esm/Input.js +5 -2
  7. package/lib/esm/PopContent.js +4 -2
  8. package/lib/esm/TimePicker.js +65 -20
  9. package/lib/esm/styles/index.scss.js +1 -1
  10. package/lib/types/Input.d.ts +4 -0
  11. package/lib/types/PopContent.d.ts +2 -0
  12. package/lib/types/TimePicker.d.ts +6 -1
  13. package/package.json +9 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @hi-ui/time-picker
2
2
 
3
+ ## 5.0.0-experimental.2
4
+
5
+ ### Minor Changes
6
+
7
+ - 59cef699f: feat: 组件语义化样式改造，增加 styles 和 classNames 属性 (5.0)
8
+
9
+ ### Patch Changes
10
+
11
+ - eb17c4697: style: 修复 UI/样式问题 (5.0)
12
+ - Updated dependencies [7f204c892]
13
+ - Updated dependencies [eb17c4697]
14
+ - Updated dependencies [eb17c4697]
15
+ - Updated dependencies [c407744fe]
16
+ - Updated dependencies [59cef699f]
17
+ - @hi-ui/icons@5.0.0-experimental.1
18
+ - @hi-ui/core@5.0.0-experimental.1
19
+ - @hi-ui/button@5.0.0-experimental.1
20
+ - @hi-ui/popper@5.0.0-experimental.1
21
+ - @hi-ui/use-merge-semantic@5.0.0-experimental.0
22
+
23
+ ## 5.0.0-experimental.1
24
+
25
+ ### Patch Changes
26
+
27
+ - 8f23e9322: style: 表单类组件统一调整后缀颜色、placeholder 颜色 (5.0)
28
+ - 900c6c2f0: style: 统一修改表单类组件 filled 背景色为 g100 (5.0)
29
+ - 发布 hiui experimental 版本
30
+ - f8321b72f: fix(time-picker): 修复清空后无法选中 00:00:00 问题 & 设置默认宽度 100% (5.0)
31
+
3
32
  ## 5.0.0-experimental.0
4
33
 
5
34
  ### Major Changes
package/lib/cjs/Input.js CHANGED
@@ -42,7 +42,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
42
42
  disabled = props.disabled,
43
43
  onValidChange = props.onValidChange,
44
44
  isFitContent = props.isFitContent,
45
- size = props.size;
45
+ size = props.size,
46
+ classNameProp = props.className,
47
+ styleProp = props.style;
46
48
  var i18n = core.useLocaleContext();
47
49
  var toText = i18n.get('timePicker.to');
48
50
  var componentClass = React.useMemo(function () {
@@ -151,7 +153,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
151
153
  };
152
154
  }, [value]);
153
155
  return /*#__PURE__*/React__default["default"].createElement("div", {
154
- className: classname.cx(componentClass, componentClass + "--size-" + size, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx))
156
+ className: classname.cx(componentClass, componentClass + "--size-" + size, classNameProp, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx)),
157
+ style: styleProp
155
158
  }, renderInput(cacheValue[0], 0), type === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
156
159
  className: componentClass + "__range-separator"
157
160
  }, toText), type === 'range' && renderInput(cacheValue[1], 1));
package/lib/cjs/PopContent.js CHANGED
@@ -19,6 +19,7 @@ var getRange = require('./utils/getRange.js');
19
19
  var Panel = require('./Panel.js');
20
20
  var analysisFormat = require('./utils/analysisFormat.js');
21
21
  var getFormatDefault = require('./utils/getFormatDefault.js');
22
+ var classname = require('@hi-ui/classname');
22
23
  var TimePicker = require('./TimePicker.js');
23
24
  var useFilter = require('./hooks/useFilter.js');
24
25
  function _interopDefaultCompat(e) {
@@ -47,7 +48,8 @@ var PopContent = function PopContent(props) {
47
48
  originalDisabledSeconds = _props$disabledSecond === void 0 ? DefaultDisabledFunc : _props$disabledSecond,
48
49
  _props$disabledMinute = props.disabledMinutes,
49
50
  originalDisabledMinutes = _props$disabledMinute === void 0 ? DefaultDisabledFunc : _props$disabledMinute,
50
- style = props.style;
51
+ style = props.style,
52
+ classNameProp = props.className;
51
53
  // 将值统一转化为函数
52
54
  // 由于 pop content 会被 date-picker 直接调用，故而在此多做一次兼容处理
53
55
  var _useFilter = useFilter.useFilter({
@@ -180,7 +182,7 @@ var PopContent = function PopContent(props) {
180
182
  }));
181
183
  }, [componentClass, hourStep, secondStep, minuteStep, customDisabledHours, customDisabledMinute, customDisabledSeconds, prefix, format, value, panelType, type, _onChange]);
182
184
  return /*#__PURE__*/React__default["default"].createElement("div", {
183
- className: componentClass,
185
+ className: classname.cx(componentClass, classNameProp),
184
186
  style: style
185
187
  }, renderPanel(0), type === 'range' && /*#__PURE__*/React__default["default"].createElement("div", {
186
188
  className: componentClass + "__separator"
package/lib/cjs/TimePicker.js CHANGED
@@ -18,6 +18,7 @@ var React = require('react');
18
18
  var classname = require('@hi-ui/classname');
19
19
  var env = require('@hi-ui/env');
20
20
  var core = require('@hi-ui/core');
21
+ var useMergeSemantic = require('@hi-ui/use-merge-semantic');
21
22
  var Input = require('./Input.js');
22
23
  var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
23
24
  var popper = require('@hi-ui/popper');
@@ -63,6 +64,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
63
64
  _a$role = _a.role,
64
65
  role = _a$role === void 0 ? _role : _a$role,
65
66
  className = _a.className,
67
+ style = _a.style,
68
+ classNamesProp = _a.classNames,
69
+ stylesProp = _a.styles,
66
70
  controlledValue = _a.value,
67
71
  _a$hourStep = _a.hourStep,
68
72
  hourStep = _a$hourStep === void 0 ? 1 : _a$hourStep,
@@ -98,10 +102,27 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
98
102
  label = _a.label,
99
103
  _a$showIndicator = _a.showIndicator,
100
104
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
101
- restProps = tslib.__rest(_a, ["prefixCls", "role", "className", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
105
+ restProps = tslib.__rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
102
106
  var _useGlobalContext = core.useGlobalContext(),
103
- globalSize = _useGlobalContext.size;
107
+ globalSize = _useGlobalContext.size,
108
+ timePickerConfig = _useGlobalContext.timePicker;
104
109
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
110
+ var _useMergeSemantic = useMergeSemantic.useMergeSemantic({
111
+ classNamesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.classNames, classNamesProp],
112
+ stylesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.styles, stylesProp],
113
+ info: {
114
+ props: Object.assign(Object.assign({}, restProps), {
115
+ type: type,
116
+ format: format,
117
+ appearance: appearance,
118
+ disabled: disabled,
119
+ size: size,
120
+ invalid: invalid
121
+ })
122
+ }
123
+ }),
124
+ classNames = _useMergeSemantic.classNames,
125
+ styles = _useMergeSemantic.styles;
105
126
  var i18n = core.useLocaleContext();
106
127
  var confirmText = i18n.get('timePicker.ok');
107
128
  var nowText = i18n.get('timePicker.now');
@@ -206,12 +227,14 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
206
227
  var _useState5 = React.useState(false),
207
228
  focus = _useState5[0],
208
229
  setFocus = _useState5[1];
209
- var cls = classname.cx(prefixCls, className, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
230
+ var cls = classname.cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
210
231
  var functionButtons = React.useMemo(function () {
211
232
  return /*#__PURE__*/React__default["default"].createElement("div", {
212
- className: prefixCls + "__pop-function-buttons"
233
+ className: classname.cx(prefixCls + "__pop-function-buttons", classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons),
234
+ style: styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons
213
235
  }, /*#__PURE__*/React__default["default"].createElement(button.Button, {
214
- className: prefixCls + "__pop-confirm-btn",
236
+ className: classname.cx(prefixCls + "__pop-confirm-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn),
237
+ style: styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn,
215
238
  type: 'primary',
216
239
  size: 'sm',
217
240
  disabled: !isInputValid,
@@ -220,7 +243,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
220
243
  if (validChecker(cacheValue)) {
221
244
  if (cacheValue.join('') !== value.join('')) {
222
245
  onChange([].concat(cacheValue));
223
- } else if ((controlledValue === undefined || controlledValue === null) && (uncontrolledValue === undefined || uncontrolledValue === null)) {
246
+ } else if (cacheValue.join('') === '' && value.join('') === '') {
247
+ // 清空后打开面板时，面板会显示 00:00:00（getFormatDefault），但 cacheValue 仍为空；
248
+ // 用户点击确定时应应用面板当前显示的默认时间
224
249
  var defaultValue;
225
250
  if (['HH', 'mm', 'ss'].includes(format)) {
226
251
  defaultValue = ['00'];
@@ -230,13 +255,26 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
230
255
  defaultValue = ['00:00:00'];
231
256
  }
232
257
  onChange(type === 'single' ? defaultValue : [defaultValue[0], defaultValue[0]]);
258
+ } else if (
259
+ // 仅当当前值为空时才应用默认时间，避免「此刻」选中后再次打开点确定被置为 00:00:00
260
+ cacheValue.join('') === '' && value.join('') === '' && (controlledValue === undefined || controlledValue === null) && (uncontrolledValue === undefined || uncontrolledValue === null)) {
261
+ var _defaultValue;
262
+ if (['HH', 'mm', 'ss'].includes(format)) {
263
+ _defaultValue = ['00'];
264
+ } else if (['HH:mm', 'mm:ss'].includes(format)) {
265
+ _defaultValue = ['00:00'];
266
+ } else {
267
+ _defaultValue = ['00:00:00'];
268
+ }
269
+ onChange(type === 'single' ? _defaultValue : [_defaultValue[0], _defaultValue[0]]);
233
270
  }
234
271
  }
235
272
  showPopperRef.current = false;
236
273
  setShowPopper(false);
237
274
  }
238
275
  }, confirmText), type === 'single' && !isInSingleValueFormat && ( /*#__PURE__*/React__default["default"].createElement(button.Button, {
239
- className: prefixCls + "__pop-now-btn",
276
+ className: classname.cx(prefixCls + "__pop-now-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn),
277
+ style: styles === null || styles === void 0 ? void 0 : styles.popNowBtn,
240
278
  appearance: "text",
241
279
  type: "primary",
242
280
  size: "sm",
@@ -247,11 +285,12 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
247
285
  setShowPopper(false);
248
286
  }
249
287
  }, nowText)));
250
- }, [prefixCls, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
288
+ }, [prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons, classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn, classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn, styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons, styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn, styles === null || styles === void 0 ? void 0 : styles.popNowBtn, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
251
289
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
252
290
  ref: useMergeRefs.useMergeRefs(ref, setAttachEl),
253
291
  role: role,
254
- className: cls
292
+ className: cls,
293
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
255
294
  }, restProps, {
256
295
  onMouseEnter: function onMouseEnter() {
257
296
  setFocus(true);
@@ -260,11 +299,14 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
260
299
  setFocus(false);
261
300
  }
262
301
  }), /*#__PURE__*/React__default["default"].createElement("div", {
263
- className: prefixCls + "__input-wrapper"
264
- }, prefix ? /*#__PURE__*/React__default["default"].createElement("span", {
265
- className: prefixCls + "__prefix"
266
- }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React__default["default"].createElement("div", {
267
- className: prefixCls + "__label",
302
+ className: classname.cx(prefixCls + "__input-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.inputWrapper),
303
+ style: styles === null || styles === void 0 ? void 0 : styles.inputWrapper
304
+ }, prefix ? ( /*#__PURE__*/React__default["default"].createElement("span", {
305
+ className: classname.cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
306
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
307
+ }, prefix)) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React__default["default"].createElement("div", {
308
+ className: classname.cx(prefixCls + "__label", classNames === null || classNames === void 0 ? void 0 : classNames.label),
309
+ style: styles === null || styles === void 0 ? void 0 : styles.label,
268
310
  onClick: function onClick() {
269
311
  showPopperRef.current = !showPopperRef.current;
270
312
  setShowPopper(function (pre) {
@@ -272,6 +314,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
272
314
  });
273
315
  }
274
316
  }, label, cacheValue[0] && '：')) : null, appearance !== 'contained' || appearance === 'contained' && cacheValue[0] ? ( /*#__PURE__*/React__default["default"].createElement(Input.Input, {
317
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
318
+ style: styles === null || styles === void 0 ? void 0 : styles.input,
275
319
  size: size,
276
320
  isFitContent: appearance === 'unset',
277
321
  ref: inputRef,
@@ -294,7 +338,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
294
338
  setShowPopper(true);
295
339
  }
296
340
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
297
- className: prefixCls + "__function-button",
341
+ className: classname.cx(prefixCls + "__function-button", classNames === null || classNames === void 0 ? void 0 : classNames.functionButton),
342
+ style: styles === null || styles === void 0 ? void 0 : styles.functionButton,
298
343
  onClick: function onClick() {
299
344
  showPopperRef.current = !showPopperRef.current;
300
345
  setShowPopper(function (pre) {
@@ -302,7 +347,8 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
302
347
  });
303
348
  }
304
349
  }, showPopper || focus && cacheValue[0] ? ( /*#__PURE__*/React__default["default"].createElement(icons.CloseCircleFilled, {
305
- className: prefixCls + "__close-button",
350
+ className: classname.cx(prefixCls + "__close-button", classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
351
+ style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
306
352
  onClick: function onClick(evt) {
307
353
  evt.stopPropagation();
308
354
  onCacheChange(type === 'single' ? [''] : ['', '']);
@@ -324,10 +370,9 @@ var TimePicker = /*#__PURE__*/React.forwardRef(function (_a, ref) {
324
370
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
325
371
  },
326
372
  preload: true
327
- }), /*#__PURE__*/React__default["default"].createElement(PopContent.PopContent
328
- // itemHeight={itemHeight}
329
- // fullDisplayItemNumber={fullDisplayItemNumber}
330
- , {
373
+ }), /*#__PURE__*/React__default["default"].createElement(PopContent.PopContent, {
374
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.popContent,
375
+ style: styles === null || styles === void 0 ? void 0 : styles.popContent,
331
376
  // itemHeight={itemHeight}
332
377
  // fullDisplayItemNumber={fullDisplayItemNumber}
333
378
  type: type,
package/lib/cjs/styles/index.scss.js CHANGED
@@ -12,7 +12,7 @@
12
12
  Object.defineProperty(exports, '__esModule', {
13
13
  value: true
14
14
  });
15
- var css_248z = ".hi-v5-time-picker {-webkit-box-sizing: border-box;box-sizing: border-box;border: var(--hi-v5-border-size-normal, 1px solid) transparent;border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-box-shadow: 0 0 0 2px transparent;box-shadow: 0 0 0 2px transparent;}.hi-v5-time-picker__input-wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-time-picker__prefix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-6, 12px);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-time-picker--appearance-line {position: relative;z-index: 0;background: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-time-picker--appearance-line:not(.hi-v5-time-picker--disabled):not(.hi-v5-time-picker--input-not-valid):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker--appearance-filled {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-filled:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-time-picker--appearance-unset:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-unset.hi-v5-time-picker--active {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-borderless {border: none;}.hi-v5-time-picker--appearance-contained {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-700, #60636b);white-space: nowrap;}.hi-v5-time-picker--disabled .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input-wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button:hover, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input__wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input__wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset, .hi-v5-time-picker--appearance-contained {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__input-wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--size-xs {line-height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-6, 24px);}.hi-v5-time-picker--size-xs:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-sm {line-height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-7, 28px);}.hi-v5-time-picker--size-sm:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-md {line-height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker--size-md:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker--size-lg {line-height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);height: var(--hi-v5-height-10, 40px);}.hi-v5-time-picker--size-lg:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background: transparent;}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover {background: transparent;}.hi-v5-time-picker--input-not-valid, .hi-v5-time-picker--input-not-valid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__pop-function-buttons {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-4, 8px);border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}.hi-v5-time-picker__pop-function-buttons .hi-v5-time-picker__pop-now-btn {-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__function-button {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--disabled {cursor: not-allowed;background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--disabled .hi-v5-time-picker__input-wrapper {pointer-events: none;}.hi-v5-time-picker--disabled .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__close-button:not(.hi-v5-time-picker--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__input__range-separator {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__selector {cursor: pointer;position: relative;z-index: 0;width: 52px;color: #91959e;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__selector:hover .hi-v5-time-picker__selector__shortcut {opacity: 1;}.hi-v5-time-picker__selector .hi-v5-time-picker__selector__item {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__selector--position-left {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector--position-right {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-time-picker__selector__item:hover {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--disabled {opacity: 0.2;cursor: not-allowed;background: transparent;}.hi-v5-time-picker__selector__demarcate {-webkit-margin-before: var(--hi-v5-spacing-2, 4px);margin-block-start: var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker__selector__demarcate:first-of-type {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-time-picker__selector__scroll-part {overflow-y: auto;-webkit-box-sizing: content-box;box-sizing: content-box;scroll-behavior: smooth;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */padding: 0 0 200px 0;width: 100%;position: relative;z-index: 0;}.hi-v5-time-picker__selector__scroll-part::-webkit-scrollbar {display: none; /* Chrome Safari */}.hi-v5-time-picker__selector__shortcut {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-3, 12px);opacity: 0;}.hi-v5-time-picker__panel {padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-5, 10px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;}.hi-v5-time-picker__panel__selector-container {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;z-index: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__panel__selector-content {position: relative;}.hi-v5-time-picker__panel__indicator {position: absolute;inset-block-start: 0;pointer-events: none;background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));z-index: -1;width: 52px;height: var(--hi-v5-height-8, 32px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__panel__indicator--left {inset-inline-start: 0;}.hi-v5-time-picker__panel__indicator--right {inset-inline-end: 0;}.hi-v5-time-picker__panel__indicator--middle {inset-inline-start: 0;}.hi-v5-time-picker__input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-time-picker__input--disabled {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input--not-valid {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__input--range .hi-v5-time-picker__input__interact-area {text-align: start;}.hi-v5-time-picker__input--fit-content .hi-v5-time-picker__input__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker__input__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;z-index: 0;width: 100%;height: 30px;line-height: 30px;}.hi-v5-time-picker__input__shadow-text {display: inline-block;font-size: inherit;font-weight: inherit;font-family: inherit;color: transparent;}.hi-v5-time-picker__input__interact-area {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 0;color: inherit;border: none;outline: none;height: 100%;font-size: inherit;background: transparent;font-weight: inherit;font-family: inherit;position: absolute;inset-inline-start: 0;inset-block-start: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-time-picker__input__interact-area:disabled {background: transparent;}.hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__pop-content {display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;position: relative;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;min-width: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__pop-content__separator {width: 1px;background-color: var(--hi-v5-color-gray-200, #edeff2);-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}";
15
+ var css_248z = ".hi-v5-time-picker {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;border: var(--hi-v5-border-size-normal, 1px solid) transparent;border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-box-shadow: 0 0 0 2px transparent;box-shadow: 0 0 0 2px transparent;}.hi-v5-time-picker__input-wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-time-picker__prefix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-6, 12px);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-time-picker--appearance-line {position: relative;z-index: 0;background: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-time-picker--appearance-line:not(.hi-v5-time-picker--disabled):not(.hi-v5-time-picker--input-not-valid):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker--appearance-filled {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-filled:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-unset:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-unset.hi-v5-time-picker--active {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-borderless {border: none;}.hi-v5-time-picker--appearance-contained {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-700, #60636b);white-space: nowrap;}.hi-v5-time-picker--disabled .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input-wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button:hover, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input__wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input__wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-time-picker--appearance-unset, .hi-v5-time-picker--appearance-contained {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__input-wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--size-xs {line-height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-6, 24px);}.hi-v5-time-picker--size-xs:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-sm {line-height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-7, 28px);}.hi-v5-time-picker--size-sm:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-md {line-height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker--size-md:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker--size-lg {line-height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);height: var(--hi-v5-height-10, 40px);}.hi-v5-time-picker--size-lg:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background: transparent;}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover {background: transparent;}.hi-v5-time-picker--input-not-valid, .hi-v5-time-picker--input-not-valid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__pop-function-buttons {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-4, 8px);border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}.hi-v5-time-picker__pop-function-buttons .hi-v5-time-picker__pop-now-btn {-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__function-button {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-time-picker--disabled {cursor: not-allowed;background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--disabled .hi-v5-time-picker__input-wrapper {pointer-events: none;}.hi-v5-time-picker--disabled .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__close-button:not(.hi-v5-time-picker--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__input__range-separator {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__selector {cursor: pointer;position: relative;z-index: 0;width: 52px;color: #91959e;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__selector:hover .hi-v5-time-picker__selector__shortcut {opacity: 1;}.hi-v5-time-picker__selector .hi-v5-time-picker__selector__item {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__selector--position-left {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector--position-right {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-time-picker__selector__item:hover {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--disabled {opacity: 0.2;cursor: not-allowed;background: transparent;}.hi-v5-time-picker__selector__demarcate {-webkit-margin-before: var(--hi-v5-spacing-2, 4px);margin-block-start: var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker__selector__demarcate:first-of-type {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-time-picker__selector__scroll-part {overflow-y: auto;-webkit-box-sizing: content-box;box-sizing: content-box;scroll-behavior: smooth;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */padding: 0 0 200px 0;width: 100%;position: relative;z-index: 0;}.hi-v5-time-picker__selector__scroll-part::-webkit-scrollbar {display: none; /* Chrome Safari */}.hi-v5-time-picker__selector__shortcut {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-3, 12px);opacity: 0;}.hi-v5-time-picker__panel {padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-5, 10px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;}.hi-v5-time-picker__panel__selector-container {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;z-index: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__panel__selector-content {position: relative;}.hi-v5-time-picker__panel__indicator {position: absolute;inset-block-start: 0;pointer-events: none;background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));z-index: -1;width: 52px;height: var(--hi-v5-height-8, 32px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__panel__indicator--left {inset-inline-start: 0;}.hi-v5-time-picker__panel__indicator--right {inset-inline-end: 0;}.hi-v5-time-picker__panel__indicator--middle {inset-inline-start: 0;}.hi-v5-time-picker__input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-time-picker__input--disabled {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input--not-valid {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__input--range .hi-v5-time-picker__input__interact-area {text-align: start;}.hi-v5-time-picker__input--fit-content .hi-v5-time-picker__input__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker__input__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;z-index: 0;width: 100%;height: 30px;line-height: 30px;}.hi-v5-time-picker__input__shadow-text {display: inline-block;font-size: inherit;font-weight: inherit;font-family: inherit;color: transparent;}.hi-v5-time-picker__input__interact-area {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 0;color: inherit;border: none;outline: none;height: 100%;font-size: inherit;background: transparent;font-weight: inherit;font-family: inherit;position: absolute;inset-inline-start: 0;inset-block-start: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-time-picker__input__interact-area:disabled {background: transparent;}.hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__pop-content {display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;position: relative;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;min-width: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__pop-content__separator {width: 1px;background-color: var(--hi-v5-color-gray-200, #edeff2);-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}";
16
16
  var __styleInject__ = require('@hi-ui/style-inject')["default"];
17
17
  __styleInject__(css_248z);
18
18
  exports["default"] = css_248z;
package/lib/esm/Input.js CHANGED
@@ -30,7 +30,9 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
30
30
  disabled = props.disabled,
31
31
  onValidChange = props.onValidChange,
32
32
  isFitContent = props.isFitContent,
33
- size = props.size;
33
+ size = props.size,
34
+ classNameProp = props.className,
35
+ styleProp = props.style;
34
36
  var i18n = useLocaleContext();
35
37
  var toText = i18n.get('timePicker.to');
36
38
  var componentClass = useMemo(function () {
@@ -139,7 +141,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, ref) {
139
141
  };
140
142
  }, [value]);
141
143
  return /*#__PURE__*/React.createElement("div", {
142
- className: cx(componentClass, componentClass + "--size-" + size, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx))
144
+ className: cx(componentClass, componentClass + "--size-" + size, classNameProp, (_cx = {}, _cx[componentClass + "--not-valid"] = !judgeIsValid(cacheValue), _cx[componentClass + "--range"] = type === 'range', _cx[componentClass + "--disabled"] = disabled, _cx[componentClass + "--fit-content"] = isFitContent, _cx)),
145
+ style: styleProp
143
146
  }, renderInput(cacheValue[0], 0), type === 'range' && /*#__PURE__*/React.createElement("div", {
144
147
  className: componentClass + "__range-separator"
145
148
  }, toText), type === 'range' && renderInput(cacheValue[1], 1));
package/lib/esm/PopContent.js CHANGED
@@ -13,6 +13,7 @@ import { getRange } from './utils/getRange.js';
13
13
  import { Panel } from './Panel.js';
14
14
  import { analysisFormat } from './utils/analysisFormat.js';
15
15
  import { getFormatDefault } from './utils/getFormatDefault.js';
16
+ import { cx } from '@hi-ui/classname';
16
17
  import { timePickerPrefix } from './TimePicker.js';
17
18
  import { useFilter } from './hooks/useFilter.js';
18
19
  var DefaultDisabledFunc = function DefaultDisabledFunc() {
@@ -35,7 +36,8 @@ var PopContent = function PopContent(props) {
35
36
  originalDisabledSeconds = _props$disabledSecond === void 0 ? DefaultDisabledFunc : _props$disabledSecond,
36
37
  _props$disabledMinute = props.disabledMinutes,
37
38
  originalDisabledMinutes = _props$disabledMinute === void 0 ? DefaultDisabledFunc : _props$disabledMinute,
38
- style = props.style;
39
+ style = props.style,
40
+ classNameProp = props.className;
39
41
  // 将值统一转化为函数
40
42
  // 由于 pop content 会被 date-picker 直接调用，故而在此多做一次兼容处理
41
43
  var _useFilter = useFilter({
@@ -168,7 +170,7 @@ var PopContent = function PopContent(props) {
168
170
  }));
169
171
  }, [componentClass, hourStep, secondStep, minuteStep, customDisabledHours, customDisabledMinute, customDisabledSeconds, prefix, format, value, panelType, type, _onChange]);
170
172
  return /*#__PURE__*/React.createElement("div", {
171
- className: componentClass,
173
+ className: cx(componentClass, classNameProp),
172
174
  style: style
173
175
  }, renderPanel(0), type === 'range' && /*#__PURE__*/React.createElement("div", {
174
176
  className: componentClass + "__separator"
package/lib/esm/TimePicker.js CHANGED
@@ -12,6 +12,7 @@ import React, { forwardRef, useState, useMemo, useCallback, useRef, useEffect }
12
12
  import { getPrefixCls, cx } from '@hi-ui/classname';
13
13
  import { __DEV__ } from '@hi-ui/env';
14
14
  import { useGlobalContext, useLocaleContext } from '@hi-ui/core';
15
+ import { useMergeSemantic } from '@hi-ui/use-merge-semantic';
15
16
  import { Input } from './Input.js';
16
17
  import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
17
18
  import { Popper } from '@hi-ui/popper';
@@ -50,6 +51,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
50
51
  _a$role = _a.role,
51
52
  role = _a$role === void 0 ? _role : _a$role,
52
53
  className = _a.className,
54
+ style = _a.style,
55
+ classNamesProp = _a.classNames,
56
+ stylesProp = _a.styles,
53
57
  controlledValue = _a.value,
54
58
  _a$hourStep = _a.hourStep,
55
59
  hourStep = _a$hourStep === void 0 ? 1 : _a$hourStep,
@@ -85,10 +89,27 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
85
89
  label = _a.label,
86
90
  _a$showIndicator = _a.showIndicator,
87
91
  showIndicator = _a$showIndicator === void 0 ? true : _a$showIndicator,
88
- restProps = __rest(_a, ["prefixCls", "role", "className", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
92
+ restProps = __rest(_a, ["prefixCls", "role", "className", "style", "classNames", "styles", "value", "hourStep", "minuteStep", "secondStep", "format", "type", "appearance", "defaultValue", "disabled", "disabledHours", "disabledSeconds", "disabledMinutes", "onChange", "placeholder", "inputReadonly", "overlay", "size", "invalid", "prefix", "label", "showIndicator"]);
89
93
  var _useGlobalContext = useGlobalContext(),
90
- globalSize = _useGlobalContext.size;
94
+ globalSize = _useGlobalContext.size,
95
+ timePickerConfig = _useGlobalContext.timePicker;
91
96
  var size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : globalSize) !== null && _b !== void 0 ? _b : 'md';
97
+ var _useMergeSemantic = useMergeSemantic({
98
+ classNamesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.classNames, classNamesProp],
99
+ stylesList: [timePickerConfig === null || timePickerConfig === void 0 ? void 0 : timePickerConfig.styles, stylesProp],
100
+ info: {
101
+ props: Object.assign(Object.assign({}, restProps), {
102
+ type: type,
103
+ format: format,
104
+ appearance: appearance,
105
+ disabled: disabled,
106
+ size: size,
107
+ invalid: invalid
108
+ })
109
+ }
110
+ }),
111
+ classNames = _useMergeSemantic.classNames,
112
+ styles = _useMergeSemantic.styles;
92
113
  var i18n = useLocaleContext();
93
114
  var confirmText = i18n.get('timePicker.ok');
94
115
  var nowText = i18n.get('timePicker.now');
@@ -193,12 +214,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
193
214
  var _useState5 = useState(false),
194
215
  focus = _useState5[0],
195
216
  setFocus = _useState5[1];
196
- var cls = cx(prefixCls, className, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
217
+ var cls = cx(prefixCls, className, classNames === null || classNames === void 0 ? void 0 : classNames.root, prefixCls + "--appearance-" + appearance, (_cx = {}, _cx[prefixCls + "--active"] = showPopper && !disabled, _cx[prefixCls + "--disabled"] = disabled, _cx[prefixCls + "--input-not-valid"] = !isInputValid || invalid, _cx[prefixCls + "--size-" + size] = true, _cx[prefixCls + "--has-value"] = cacheValue[0], _cx));
197
218
  var functionButtons = useMemo(function () {
198
219
  return /*#__PURE__*/React.createElement("div", {
199
- className: prefixCls + "__pop-function-buttons"
220
+ className: cx(prefixCls + "__pop-function-buttons", classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons),
221
+ style: styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons
200
222
  }, /*#__PURE__*/React.createElement(Button, {
201
- className: prefixCls + "__pop-confirm-btn",
223
+ className: cx(prefixCls + "__pop-confirm-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn),
224
+ style: styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn,
202
225
  type: 'primary',
203
226
  size: 'sm',
204
227
  disabled: !isInputValid,
@@ -207,7 +230,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
207
230
  if (validChecker(cacheValue)) {
208
231
  if (cacheValue.join('') !== value.join('')) {
209
232
  onChange([].concat(cacheValue));
210
- } else if ((controlledValue === undefined || controlledValue === null) && (uncontrolledValue === undefined || uncontrolledValue === null)) {
233
+ } else if (cacheValue.join('') === '' && value.join('') === '') {
234
+ // 清空后打开面板时，面板会显示 00:00:00（getFormatDefault），但 cacheValue 仍为空；
235
+ // 用户点击确定时应应用面板当前显示的默认时间
211
236
  var defaultValue;
212
237
  if (['HH', 'mm', 'ss'].includes(format)) {
213
238
  defaultValue = ['00'];
@@ -217,13 +242,26 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
217
242
  defaultValue = ['00:00:00'];
218
243
  }
219
244
  onChange(type === 'single' ? defaultValue : [defaultValue[0], defaultValue[0]]);
245
+ } else if (
246
+ // 仅当当前值为空时才应用默认时间，避免「此刻」选中后再次打开点确定被置为 00:00:00
247
+ cacheValue.join('') === '' && value.join('') === '' && (controlledValue === undefined || controlledValue === null) && (uncontrolledValue === undefined || uncontrolledValue === null)) {
248
+ var _defaultValue;
249
+ if (['HH', 'mm', 'ss'].includes(format)) {
250
+ _defaultValue = ['00'];
251
+ } else if (['HH:mm', 'mm:ss'].includes(format)) {
252
+ _defaultValue = ['00:00'];
253
+ } else {
254
+ _defaultValue = ['00:00:00'];
255
+ }
256
+ onChange(type === 'single' ? _defaultValue : [_defaultValue[0], _defaultValue[0]]);
220
257
  }
221
258
  }
222
259
  showPopperRef.current = false;
223
260
  setShowPopper(false);
224
261
  }
225
262
  }, confirmText), type === 'single' && !isInSingleValueFormat && ( /*#__PURE__*/React.createElement(Button, {
226
- className: prefixCls + "__pop-now-btn",
263
+ className: cx(prefixCls + "__pop-now-btn", classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn),
264
+ style: styles === null || styles === void 0 ? void 0 : styles.popNowBtn,
227
265
  appearance: "text",
228
266
  type: "primary",
229
267
  size: "sm",
@@ -234,11 +272,12 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
234
272
  setShowPopper(false);
235
273
  }
236
274
  }, nowText)));
237
- }, [prefixCls, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
275
+ }, [prefixCls, classNames === null || classNames === void 0 ? void 0 : classNames.popFunctionButtons, classNames === null || classNames === void 0 ? void 0 : classNames.popConfirmBtn, classNames === null || classNames === void 0 ? void 0 : classNames.popNowBtn, styles === null || styles === void 0 ? void 0 : styles.popFunctionButtons, styles === null || styles === void 0 ? void 0 : styles.popConfirmBtn, styles === null || styles === void 0 ? void 0 : styles.popNowBtn, isInputValid, confirmText, type, isInSingleValueFormat, nowText, validChecker, cacheValue, value, controlledValue, uncontrolledValue, onChange, onCacheChange, format]);
238
276
  return /*#__PURE__*/React.createElement("div", Object.assign({
239
277
  ref: useMergeRefs(ref, setAttachEl),
240
278
  role: role,
241
- className: cls
279
+ className: cls,
280
+ style: Object.assign(Object.assign({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
242
281
  }, restProps, {
243
282
  onMouseEnter: function onMouseEnter() {
244
283
  setFocus(true);
@@ -247,11 +286,14 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
247
286
  setFocus(false);
248
287
  }
249
288
  }), /*#__PURE__*/React.createElement("div", {
250
- className: prefixCls + "__input-wrapper"
251
- }, prefix ? /*#__PURE__*/React.createElement("span", {
252
- className: prefixCls + "__prefix"
253
- }, prefix) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React.createElement("div", {
254
- className: prefixCls + "__label",
289
+ className: cx(prefixCls + "__input-wrapper", classNames === null || classNames === void 0 ? void 0 : classNames.inputWrapper),
290
+ style: styles === null || styles === void 0 ? void 0 : styles.inputWrapper
291
+ }, prefix ? ( /*#__PURE__*/React.createElement("span", {
292
+ className: cx(prefixCls + "__prefix", classNames === null || classNames === void 0 ? void 0 : classNames.prefix),
293
+ style: styles === null || styles === void 0 ? void 0 : styles.prefix
294
+ }, prefix)) : null, appearance === 'contained' && label ? ( /*#__PURE__*/React.createElement("div", {
295
+ className: cx(prefixCls + "__label", classNames === null || classNames === void 0 ? void 0 : classNames.label),
296
+ style: styles === null || styles === void 0 ? void 0 : styles.label,
255
297
  onClick: function onClick() {
256
298
  showPopperRef.current = !showPopperRef.current;
257
299
  setShowPopper(function (pre) {
@@ -259,6 +301,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
259
301
  });
260
302
  }
261
303
  }, label, cacheValue[0] && '：')) : null, appearance !== 'contained' || appearance === 'contained' && cacheValue[0] ? ( /*#__PURE__*/React.createElement(Input, {
304
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
305
+ style: styles === null || styles === void 0 ? void 0 : styles.input,
262
306
  size: size,
263
307
  isFitContent: appearance === 'unset',
264
308
  ref: inputRef,
@@ -281,7 +325,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
281
325
  setShowPopper(true);
282
326
  }
283
327
  })) : null, /*#__PURE__*/React.createElement("div", {
284
- className: prefixCls + "__function-button",
328
+ className: cx(prefixCls + "__function-button", classNames === null || classNames === void 0 ? void 0 : classNames.functionButton),
329
+ style: styles === null || styles === void 0 ? void 0 : styles.functionButton,
285
330
  onClick: function onClick() {
286
331
  showPopperRef.current = !showPopperRef.current;
287
332
  setShowPopper(function (pre) {
@@ -289,7 +334,8 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
289
334
  });
290
335
  }
291
336
  }, showPopper || focus && cacheValue[0] ? ( /*#__PURE__*/React.createElement(CloseCircleFilled, {
292
- className: prefixCls + "__close-button",
337
+ className: cx(prefixCls + "__close-button", classNames === null || classNames === void 0 ? void 0 : classNames.closeButton),
338
+ style: styles === null || styles === void 0 ? void 0 : styles.closeButton,
293
339
  onClick: function onClick(evt) {
294
340
  evt.stopPropagation();
295
341
  onCacheChange(type === 'single' ? [''] : ['', '']);
@@ -311,10 +357,9 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
311
357
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
312
358
  },
313
359
  preload: true
314
- }), /*#__PURE__*/React.createElement(PopContent
315
- // itemHeight={itemHeight}
316
- // fullDisplayItemNumber={fullDisplayItemNumber}
317
- , {
360
+ }), /*#__PURE__*/React.createElement(PopContent, {
361
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.popContent,
362
+ style: styles === null || styles === void 0 ? void 0 : styles.popContent,
318
363
  // itemHeight={itemHeight}
319
364
  // fullDisplayItemNumber={fullDisplayItemNumber}
320
365
  type: type,
package/lib/esm/styles/index.scss.js CHANGED
@@ -8,6 +8,6 @@
8
8
  * LICENSE file in the root directory of this source tree.
9
9
  */
10
10
  import __styleInject__ from '@hi-ui/style-inject';
11
- var css_248z = ".hi-v5-time-picker {-webkit-box-sizing: border-box;box-sizing: border-box;border: var(--hi-v5-border-size-normal, 1px solid) transparent;border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-box-shadow: 0 0 0 2px transparent;box-shadow: 0 0 0 2px transparent;}.hi-v5-time-picker__input-wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-time-picker__prefix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-6, 12px);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-time-picker--appearance-line {position: relative;z-index: 0;background: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-time-picker--appearance-line:not(.hi-v5-time-picker--disabled):not(.hi-v5-time-picker--input-not-valid):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker--appearance-filled {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-filled:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-time-picker--appearance-unset:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-unset.hi-v5-time-picker--active {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-borderless {border: none;}.hi-v5-time-picker--appearance-contained {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-700, #60636b);white-space: nowrap;}.hi-v5-time-picker--disabled .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input-wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button:hover, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input__wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input__wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset, .hi-v5-time-picker--appearance-contained {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__input-wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--size-xs {line-height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-6, 24px);}.hi-v5-time-picker--size-xs:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-sm {line-height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-7, 28px);}.hi-v5-time-picker--size-sm:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-md {line-height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker--size-md:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker--size-lg {line-height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);height: var(--hi-v5-height-10, 40px);}.hi-v5-time-picker--size-lg:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background: transparent;}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover {background: transparent;}.hi-v5-time-picker--input-not-valid, .hi-v5-time-picker--input-not-valid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__pop-function-buttons {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-4, 8px);border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}.hi-v5-time-picker__pop-function-buttons .hi-v5-time-picker__pop-now-btn {-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__function-button {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--disabled {cursor: not-allowed;background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--disabled .hi-v5-time-picker__input-wrapper {pointer-events: none;}.hi-v5-time-picker--disabled .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__close-button:not(.hi-v5-time-picker--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__input__range-separator {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__selector {cursor: pointer;position: relative;z-index: 0;width: 52px;color: #91959e;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__selector:hover .hi-v5-time-picker__selector__shortcut {opacity: 1;}.hi-v5-time-picker__selector .hi-v5-time-picker__selector__item {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__selector--position-left {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector--position-right {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-time-picker__selector__item:hover {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--disabled {opacity: 0.2;cursor: not-allowed;background: transparent;}.hi-v5-time-picker__selector__demarcate {-webkit-margin-before: var(--hi-v5-spacing-2, 4px);margin-block-start: var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker__selector__demarcate:first-of-type {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-time-picker__selector__scroll-part {overflow-y: auto;-webkit-box-sizing: content-box;box-sizing: content-box;scroll-behavior: smooth;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */padding: 0 0 200px 0;width: 100%;position: relative;z-index: 0;}.hi-v5-time-picker__selector__scroll-part::-webkit-scrollbar {display: none; /* Chrome Safari */}.hi-v5-time-picker__selector__shortcut {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-3, 12px);opacity: 0;}.hi-v5-time-picker__panel {padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-5, 10px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;}.hi-v5-time-picker__panel__selector-container {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;z-index: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__panel__selector-content {position: relative;}.hi-v5-time-picker__panel__indicator {position: absolute;inset-block-start: 0;pointer-events: none;background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));z-index: -1;width: 52px;height: var(--hi-v5-height-8, 32px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__panel__indicator--left {inset-inline-start: 0;}.hi-v5-time-picker__panel__indicator--right {inset-inline-end: 0;}.hi-v5-time-picker__panel__indicator--middle {inset-inline-start: 0;}.hi-v5-time-picker__input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-time-picker__input--disabled {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input--not-valid {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__input--range .hi-v5-time-picker__input__interact-area {text-align: start;}.hi-v5-time-picker__input--fit-content .hi-v5-time-picker__input__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker__input__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;z-index: 0;width: 100%;height: 30px;line-height: 30px;}.hi-v5-time-picker__input__shadow-text {display: inline-block;font-size: inherit;font-weight: inherit;font-family: inherit;color: transparent;}.hi-v5-time-picker__input__interact-area {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 0;color: inherit;border: none;outline: none;height: 100%;font-size: inherit;background: transparent;font-weight: inherit;font-family: inherit;position: absolute;inset-inline-start: 0;inset-block-start: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-time-picker__input__interact-area:disabled {background: transparent;}.hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__pop-content {display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;position: relative;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;min-width: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__pop-content__separator {width: 1px;background-color: var(--hi-v5-color-gray-200, #edeff2);-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}";
11
+ var css_248z = ".hi-v5-time-picker {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;border: var(--hi-v5-border-size-normal, 1px solid) transparent;border-radius: var(--hi-v5-border-radius-lg, 6px);-webkit-box-shadow: 0 0 0 2px transparent;box-shadow: 0 0 0 2px transparent;}.hi-v5-time-picker__input-wrapper {height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-time-picker__prefix {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;margin-right: var(--hi-v5-spacing-6, 12px);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-negative: 0;flex-shrink: 0;color: var(--hi-v5-color-gray-800, #1a1d26);font-size: inherit;text-align: center;}.hi-v5-time-picker--appearance-line {position: relative;z-index: 0;background: var(--hi-v5-color-static-white, #fff);border-color: var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-time-picker--appearance-line:not(.hi-v5-time-picker--disabled):not(.hi-v5-time-picker--input-not-valid):hover {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker--appearance-filled {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-filled:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-time-picker--appearance-unset:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-unset.hi-v5-time-picker--active {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-borderless {border: none;}.hi-v5-time-picker--appearance-contained {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-700, #60636b);white-space: nowrap;}.hi-v5-time-picker--disabled .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__label {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover {background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__label,.hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input-wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__function-button:hover, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__function-button:hover {color: var(--hi-v5-color-primary-800, var(--hi-v5-color-brandblue-800, #051879));}.hi-v5-time-picker--appearance-contained.hi-v5-time-picker--has-value .hi-v5-time-picker__input__wrapper, .hi-v5-time-picker--appearance-contained:not(.hi-v5-time-picker--disabled):hover .hi-v5-time-picker__input__wrapper {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-time-picker--appearance-contained .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-time-picker--appearance-unset, .hi-v5-time-picker--appearance-contained {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input-wrapper, .hi-v5-time-picker--appearance-contained .hi-v5-time-picker__input-wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker--size-xs {line-height: var(--hi-v5-height-6, 24px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-6, 24px);}.hi-v5-time-picker--size-xs:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-sm {line-height: var(--hi-v5-height-7, 28px);font-size: var(--hi-v5-text-size-sm, 0.75rem);height: var(--hi-v5-height-7, 28px);}.hi-v5-time-picker--size-sm:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-time-picker--size-md {line-height: var(--hi-v5-height-8, 32px);font-size: var(--hi-v5-text-size-md, 0.875rem);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker--size-md:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker--size-lg {line-height: var(--hi-v5-height-10, 40px);font-size: var(--hi-v5-text-size-lg, 1rem);height: var(--hi-v5-height-10, 40px);}.hi-v5-time-picker--size-lg:not(.hi-v5-time-picker--appearance-borderless) {padding: 0 var(--hi-v5-spacing-8, 16px);}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active {border-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));background: transparent;}.hi-v5-time-picker--appearance-line.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover, .hi-v5-time-picker--appearance-filled.hi-v5-time-picker--active:not(.hi-v5-time-picker--disabled):hover {background: transparent;}.hi-v5-time-picker--input-not-valid, .hi-v5-time-picker--input-not-valid:hover {border-color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__pop-function-buttons {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;padding: var(--hi-v5-spacing-5, 10px) var(--hi-v5-spacing-4, 8px);border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-200, #edeff2);-webkit-box-align: center;-ms-flex-align: center;align-items: center;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}.hi-v5-time-picker__pop-function-buttons .hi-v5-time-picker__pop-now-btn {-webkit-margin-start: 0;margin-inline-start: 0;-webkit-margin-end: var(--hi-v5-spacing-6, 12px);margin-inline-end: var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__function-button {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);font-size: var(--hi-v5-text-size-lg, 1rem);cursor: pointer;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-time-picker--disabled {cursor: not-allowed;background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker--disabled .hi-v5-time-picker__input-wrapper {pointer-events: none;}.hi-v5-time-picker--disabled .hi-v5-time-picker__function-button {color: var(--hi-v5-color-gray-500, #babcc2);}.hi-v5-time-picker__close-button:not(.hi-v5-time-picker--disabled):hover {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__input__range-separator {padding: 0 var(--hi-v5-spacing-6, 12px);}.hi-v5-time-picker__selector {cursor: pointer;position: relative;z-index: 0;width: 52px;color: #91959e;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__selector:hover .hi-v5-time-picker__selector__shortcut {opacity: 1;}.hi-v5-time-picker__selector .hi-v5-time-picker__selector__item {border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__selector--position-left {-webkit-margin-end: var(--hi-v5-spacing-2, 4px);margin-inline-end: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector--position-right {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);}.hi-v5-time-picker__selector__item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-time-picker__selector__item:hover {background: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-time-picker__selector__item.hi-v5-time-picker__selector__item--disabled {opacity: 0.2;cursor: not-allowed;background: transparent;}.hi-v5-time-picker__selector__demarcate {-webkit-margin-before: var(--hi-v5-spacing-2, 4px);margin-block-start: var(--hi-v5-spacing-2, 4px);height: var(--hi-v5-height-8, 32px);}.hi-v5-time-picker__selector__demarcate:first-of-type {-webkit-margin-before: 0;margin-block-start: 0;}.hi-v5-time-picker__selector__scroll-part {overflow-y: auto;-webkit-box-sizing: content-box;box-sizing: content-box;scroll-behavior: smooth;scrollbar-width: none; /* firefox */-ms-overflow-style: none; /* IE 10+ */padding: 0 0 200px 0;width: 100%;position: relative;z-index: 0;}.hi-v5-time-picker__selector__scroll-part::-webkit-scrollbar {display: none; /* Chrome Safari */}.hi-v5-time-picker__selector__shortcut {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: var(--hi-v5-height-3, 12px);opacity: 0;}.hi-v5-time-picker__panel {padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-5, 10px);-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;}.hi-v5-time-picker__panel__selector-container {display: -webkit-box;display: -ms-flexbox;display: flex;position: relative;z-index: 0;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__panel__selector-content {position: relative;}.hi-v5-time-picker__panel__indicator {position: absolute;inset-block-start: 0;pointer-events: none;background: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));z-index: -1;width: 52px;height: var(--hi-v5-height-8, 32px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-time-picker__panel__indicator--left {inset-inline-start: 0;}.hi-v5-time-picker__panel__indicator--right {inset-inline-end: 0;}.hi-v5-time-picker__panel__indicator--middle {inset-inline-start: 0;}.hi-v5-time-picker__input {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-time-picker__input--disabled {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input--not-valid {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-time-picker__input--range .hi-v5-time-picker__input__interact-area {text-align: start;}.hi-v5-time-picker__input--fit-content .hi-v5-time-picker__input__wrapper {width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;}.hi-v5-time-picker__input__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;position: relative;z-index: 0;width: 100%;height: 30px;line-height: 30px;}.hi-v5-time-picker__input__shadow-text {display: inline-block;font-size: inherit;font-weight: inherit;font-family: inherit;color: transparent;}.hi-v5-time-picker__input__interact-area {-webkit-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 0;color: inherit;border: none;outline: none;height: 100%;font-size: inherit;background: transparent;font-weight: inherit;font-family: inherit;position: absolute;inset-inline-start: 0;inset-block-start: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.hi-v5-time-picker__input__interact-area:disabled {background: transparent;}.hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-webkit-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-moz-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::-ms-input-placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker--appearance-unset .hi-v5-time-picker__input__interact-area::placeholder {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-time-picker__pop-content {display: -webkit-box;display: -ms-flexbox;display: flex;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;position: relative;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;min-width: 100%;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-time-picker__pop-content__separator {width: 1px;background-color: var(--hi-v5-color-gray-200, #edeff2);-webkit-border-start: none;border-inline-start: none;-webkit-border-end: none;border-inline-end: none;}";
12
12
  __styleInject__(css_248z);
13
13
  export { css_248z as default };
package/lib/types/Input.d.ts CHANGED
@@ -13,6 +13,10 @@ interface InputProps extends ExtendType {
13
13
  onValidChange: (isValid: boolean) => void;
14
14
  isFitContent: boolean;
15
15
  size: 'xs' | 'sm' | 'md' | 'lg';
16
+ /** 语义化：根节点类名 */
17
+ className?: string;
18
+ /** 语义化：根节点样式 */
19
+ style?: React.CSSProperties;
16
20
  }
17
21
  export interface InputRef {
18
22
  /**
package/lib/types/PopContent.d.ts CHANGED
@@ -9,6 +9,8 @@ interface PopContentProps extends ExtendType {
9
9
  type: TimePickerType;
10
10
  panelType?: TimePickerPanelType;
11
11
  style?: React.CSSProperties;
12
+ /** 语义化：根节点类名 */
13
+ className?: string;
12
14
  }
13
15
  export declare const PopContent: FC<PopContentProps>;
14
16
  export {};
package/lib/types/TimePicker.d.ts CHANGED
@@ -1,11 +1,16 @@
1
1
  import React from 'react';
2
2
  import { HiBaseHTMLProps } from '@hi-ui/core';
3
+ import type { ComponentSemantic, SemanticClassNamesType, SemanticStylesType } from '@hi-ui/use-merge-semantic';
3
4
  import { TimePickerStep, TimePickerType, TimePickerFormat, TimePickerFilterProps, TimePickerValue } from './@types';
4
5
  import { PopperOverlayProps } from '@hi-ui/popper';
5
6
  export declare const timePickerPrefix: string;
6
7
  export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement | null>>;
7
8
  type ExtendType = Omit<HiBaseHTMLProps<'div'>, 'placeholder' | 'value' | 'onChange'> & TimePickerFilterProps & TimePickerStep;
8
- export interface TimePickerProps extends ExtendType {
9
+ export type TimePickerSemanticName = 'root' | 'inputWrapper' | 'prefix' | 'label' | 'input' | 'functionButton' | 'closeButton' | 'popContent' | 'popFunctionButtons' | 'popConfirmBtn' | 'popNowBtn';
10
+ export type TimePickerSemanticClassNames = SemanticClassNamesType<TimePickerProps, TimePickerSemanticName>;
11
+ export type TimePickerSemanticStyles = SemanticStylesType<TimePickerProps, TimePickerSemanticName>;
12
+ export type TimePickerSemantic = ComponentSemantic<TimePickerSemanticClassNames, TimePickerSemanticStyles>;
13
+ export interface TimePickerProps extends ExtendType, TimePickerSemantic {
9
14
  /**
10
15
  * 选择器类型
11
16
  * @default 'single'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hi-ui/time-picker",
3
- "version": "5.0.0-experimental.0",
3
+ "version": "5.0.0-experimental.2",
4
4
  "description": "A sub-package for @hi-ui/hiui.",
5
5
  "keywords": [],
6
6
  "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -45,23 +45,24 @@
45
45
  "url": "https://github.com/XiaoMi/hiui/issues"
46
46
  },
47
47
  "dependencies": {
48
- "@hi-ui/button": "^5.0.0-experimental.0",
48
+ "@hi-ui/button": "^5.0.0-experimental.1",
49
49
  "@hi-ui/classname": "^5.0.0-experimental.0",
50
50
  "@hi-ui/env": "^5.0.0-experimental.0",
51
- "@hi-ui/icons": "^5.0.0-experimental.0",
52
- "@hi-ui/popper": "^5.0.0-experimental.0",
51
+ "@hi-ui/icons": "^5.0.0-experimental.1",
52
+ "@hi-ui/popper": "^5.0.0-experimental.1",
53
53
  "@hi-ui/use-merge-refs": "^5.0.0-experimental.0",
54
54
  "@hi-ui/use-uncontrolled-state": "^5.0.0-experimental.0",
55
- "dayjs": "^1.10.7"
55
+ "dayjs": "^1.10.7",
56
+ "@hi-ui/use-merge-semantic": "^5.0.0-experimental.0"
56
57
  },
57
58
  "peerDependencies": {
58
- "@hi-ui/core": ">=5.0.0-experimental.0",
59
+ "@hi-ui/core": ">=5.0.0-experimental.1",
59
60
  "react": ">=16.8.6",
60
61
  "react-dom": ">=16.8.6"
61
62
  },
62
63
  "devDependencies": {
63
- "@hi-ui/core": "^5.0.0-experimental.0",
64
- "@hi-ui/core-css": "^5.0.0-experimental.0",
64
+ "@hi-ui/core": "^5.0.0-experimental.1",
65
+ "@hi-ui/core-css": "^5.0.0-experimental.2",
65
66
  "react": "^17.0.1",
66
67
  "react-dom": "^17.0.1"
67
68
  }