@semcore/time-picker 16.1.13 → 16.1.14-prerelease.12

package/lib/es6/entity/TimePickerEntity.js

@@ -0,0 +1,66 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+class TimePickerEntity {
+  constructor(value = ':',
+  // should be in the format 'HH:mm'
+  is12Hour = false) {
+    _defineProperty(this, "_hours", '');
+    _defineProperty(this, "_minutes", '');
+    _defineProperty(this, "_is12Hour", void 0);
+    _defineProperty(this, "_meridiem", 'AM');
+    const [hours = '', minutes = ''] = value.split(':');
+    this._is12Hour = is12Hour;
+    this._hours = hours;
+    this._minutes = minutes;
+  }
+  get meridiem() {
+    return this._meridiem;
+  }
+  get hours() {
+    return this._is12Hour ? this.formatHoursTo12(this._hours) : this.formatHoursTo24(this._hours);
+  }
+  get minutes() {
+    return this._minutes && this.withLeadingZero(this._minutes);
+  }
+  set is12Hour(newIs12Hour) {
+    this._is12Hour = newIs12Hour;
+  }
+  set hours(newHours) {
+    this._hours = newHours;
+  }
+  set minutes(newMinutes) {
+    this._minutes = newMinutes;
+  }
+  set meridiem(newMeridiem) {
+    this._meridiem = newMeridiem;
+  }
+  withLeadingZero(value) {
+    return String(value).padStart(2, '0');
+  }
+  formatHoursTo12(hours) {
+    const numberHours = Number.parseInt(hours, 10);
+    if (Number.isNaN(numberHours)) return hours;
+    if (numberHours === 0) {
+      return '12';
+    } else if (numberHours > 12) {
+      return this.withLeadingZero(numberHours - 12);
+    }
+    return this.withLeadingZero(numberHours);
+  }
+  formatHoursTo24(hours) {
+    const numberHours = Number.parseInt(hours, 10);
+    if (Number.isNaN(numberHours)) return hours;
+    if (this.meridiem === 'AM') {
+      return this.withLeadingZero(numberHours === 12 ? 0 : numberHours);
+    }
+    return this.withLeadingZero(numberHours < 12 ? numberHours + 12 : numberHours);
+  }
+  toggleMeridiem() {
+    this.meridiem = this._meridiem === 'AM' ? 'PM' : 'AM';
+  }
+  toString() {
+    const hours = this._is12Hour ? this.formatHoursTo24(this.hours) : this.hours;
+    return `${hours}:${this.minutes}`;
+  }
+}
+export default TimePickerEntity;
+//# sourceMappingURL=TimePickerEntity.js.map

package/lib/es6/entity/TimePickerEntity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePickerEntity.js","names":["TimePickerEntity","constructor","value","is12Hour","_defineProperty","hours","minutes","split","_is12Hour","_hours","_minutes","meridiem","_meridiem","formatHoursTo12","formatHoursTo24","withLeadingZero","newIs12Hour","newHours","newMinutes","newMeridiem","String","padStart","numberHours","Number","parseInt","isNaN","toggleMeridiem","toString"],"sources":["../../../src/entity/TimePickerEntity.ts"],"sourcesContent":["import type { TimePickerMeridiem } from '../component/TimePicker/TimePicker.type';\n\nclass TimePickerEntity {\n  private _hours: string = '';\n  private _minutes: string = '';\n  private _is12Hour: boolean;\n  private _meridiem: TimePickerMeridiem = 'AM';\n\n  constructor(\n    value: string = ':', // should be in the format 'HH:mm'\n    is12Hour: boolean = false,\n  ) {\n    const [hours = '', minutes = ''] = value.split(':');\n\n    this._is12Hour = is12Hour;\n    this._hours = hours;\n    this._minutes = minutes;\n  }\n\n  get meridiem() {\n    return this._meridiem;\n  }\n\n  get hours() {\n    return this._is12Hour ? this.formatHoursTo12(this._hours) : this.formatHoursTo24(this._hours);\n  }\n\n  get minutes() {\n    return this._minutes && this.withLeadingZero(this._minutes);\n  }\n\n  set is12Hour(newIs12Hour: boolean) {\n    this._is12Hour = newIs12Hour;\n  }\n\n  set hours(newHours) {\n    this._hours = newHours;\n  }\n\n  set minutes(newMinutes) {\n    this._minutes = newMinutes;\n  }\n\n  private set meridiem(newMeridiem) {\n    this._meridiem = newMeridiem;\n  }\n\n  private withLeadingZero(value: string | number) {\n    return String(value).padStart(2, '0');\n  }\n\n  private formatHoursTo12(hours: string) {\n    const numberHours = Number.parseInt(hours, 10);\n\n    if (Number.isNaN(numberHours)) return hours;\n\n    if (numberHours === 0) {\n      return '12';\n    } else if (numberHours > 12) {\n      return this.withLeadingZero(numberHours - 12);\n    }\n\n    return this.withLeadingZero(numberHours);\n  }\n\n  private formatHoursTo24(hours: string) {\n    const numberHours = Number.parseInt(hours, 10);\n\n    if (Number.isNaN(numberHours)) return hours;\n\n    if (this.meridiem === 'AM') {\n      return this.withLeadingZero(numberHours === 12 ? 0 : numberHours);\n    }\n\n    return this.withLeadingZero(numberHours < 12 ? numberHours + 12 : numberHours);\n  }\n\n  toggleMeridiem() {\n    this.meridiem = this._meridiem === 'AM' ? 'PM' : 'AM';\n  }\n\n  toString() {\n    const hours = this._is12Hour ? this.formatHoursTo24(this.hours) : this.hours;\n\n    return `${hours}:${this.minutes}`;\n  }\n}\n\nexport default TimePickerEntity;\n"],"mappings":"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","ignoreList":[]}

package/lib/es6/index.js

@@ -1,3 +1,3 @@
-export { default } from './TimePicker';
-export * from './TimePicker';
+export { default } from './component/TimePicker/TimePicker';
+export * from './component/TimePicker/TimePicker.type';
 //# sourceMappingURL=index.js.map

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './TimePicker';\nexport * from './TimePicker';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc;AACtC,cAAc,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './component/TimePicker/TimePicker';\nexport * from './component/TimePicker/TimePicker.type';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,mCAAmC;AAC3D,cAAc,wCAAwC","ignoreList":[]}

package/lib/es6/translations/__intergalactic-dynamic-locales.js

@@ -12,20 +12,20 @@ import sv from './sv.json';
 import tr from './tr.json';
 import vi from './vi.json';
 import zh from './zh.json';
-export var localizedMessages = {
-  de: de,
-  en: en,
-  es: es,
-  fr: fr,
-  it: it,
-  ja: ja,
-  ko: ko,
-  nl: nl,
-  pt: pt,
-  tr: tr,
-  vi: vi,
-  zh: zh,
-  pl: pl,
-  sv: sv
+export const localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 //# sourceMappingURL=__intergalactic-dynamic-locales.js.map

package/lib/es6/translations/__intergalactic-dynamic-locales.js.map

@@ -1 +1 @@
-{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pl","pt","sv","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pl from './pl.json';\nimport pt from './pt.json';\nimport sv from './sv.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFL,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA;AACF,CAAC","ignoreList":[]}
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pl","pt","sv","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pl from './pl.json';\nimport pt from './pt.json';\nimport sv from './sv.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,MAAMC,iBAAiB,GAAG;EAC/Bd,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFE,EAAE;EACFE,EAAE;EACFC,EAAE;EACFC,EAAE;EACFL,EAAE;EACFE;AACF,CAAC","ignoreList":[]}

package/lib/esm/component/PickerFormat/PickerFormat.mjs

@@ -0,0 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Component, sstyled, assignProps } from "@semcore/core";
+import { Box, ScreenReaderOnly } from "@semcore/base-components";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import React from "react";
+/*!__reshadow-styles__:"./picker-format.shadow.css"*/
+const style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SPickerFormat_11qxx_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_11qxx_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_11qxx_gg_.__active_11qxx_gg_,.___SPickerFormat_11qxx_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_11qxx_gg_._size_m_11qxx_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_11qxx_gg_._size_m_11qxx_gg_ .___SPickerFormatText_11qxx_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_11qxx_gg_._size_l_11qxx_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0-1px 0 0}.___SPickerFormat_11qxx_gg_._size_l_11qxx_gg_ .___SPickerFormatText_11qxx_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_11qxx_gg_.__disabled_11qxx_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}",
+    /*__inner_css_end__*/
+    "11qxx_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SPickerFormat": "___SPickerFormat_11qxx_gg_",
+    "_disabled": "__disabled_11qxx_gg_",
+    "_active": "__active_11qxx_gg_",
+    "_size_m": "_size_m_11qxx_gg_",
+    "__SPickerFormatText": "___SPickerFormatText_11qxx_gg_",
+    "_size_l": "_size_l_11qxx_gg_"
+  })
+);
+class TimePickerFormat extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      changedFormatNotice: ""
+    });
+    _defineProperty(this, "handleClick", () => {
+      setTimeout(() => {
+        const {
+          meridiem,
+          getI18nText
+        } = this.asProps;
+        this.setState({
+          changedFormatNotice: getI18nText("changedFormatNotice", {
+            meridiem
+          })
+        });
+      }, 0);
+      setTimeout(() => {
+        this.setState({
+          changedFormatNotice: ""
+        });
+      }, 2e3);
+    });
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SPickerFormat = Box;
+    const {
+      Children,
+      meridiem,
+      styles,
+      getI18nText,
+      uid
+    } = this.asProps;
+    const {
+      changedFormatNotice
+    } = this.state;
+    const SPickerFormatText = "span";
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SPickerFormat, _ref2.cn("SPickerFormat", {
+      ...assignProps({
+        "type": "button",
+        "tag": "button",
+        "tabIndex": 0,
+        "onClick": this.handleClick,
+        "aria-describedby": `${uid}_describe`
+      }, _ref)
+    }), Children.origin ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(SPickerFormatText, _ref2.cn("SPickerFormatText", {}), meridiem)), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+      "role": "status",
+      "aria-live": "polite"
+    }), changedFormatNotice), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+      "aria-hidden": "true",
+      "id": `${uid}_describe`
+    }), getI18nText("formatToggler")));
+  }
+}
+_defineProperty(TimePickerFormat, "style", style);
+_defineProperty(TimePickerFormat, "enhance", [uniqueIDEnhancement()]);
+export {
+  TimePickerFormat as default
+};

package/lib/{es6/style/time-picker.shadow.css → esm/component/PickerFormat/picker-format.shadow.css}

@@ -1,45 +1,3 @@
-STimePicker {
-  position: relative;
-  width: auto;
-  outline: none;
-
-  SPickerInput {
-    box-sizing: content-box;
-    text-align: center;
-    z-index: 1;
-    height: 1.5em;
-
-    &[placeholder] {
-      text-overflow: initial;
-    }
-    &:focus {
-      outline: none;
-      background-color: var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2));
-    }
-  }
-}
-
-/*STimePicker[keyboardFocused]:focus {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePicker[disabled] {
-  color: var(--intergalactic-text-secondary, #6c6e79);
-  cursor: default;
-}
-
-SPickerInput[size='m'] {
-  width: 19px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
-SPickerInput[size='l'] {
-  width: 21px;
-  margin: 0 var(--intergalactic-spacing-2x, 8px);
-  padding: 0;
-}
-
 SPickerFormat {
   flex-shrink: 0;
   position: relative;
@@ -100,17 +58,4 @@ SPickerFormat[disabled] {
   cursor: default;
   pointer-events: none;
   border-color: transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf);
-}
-
-/*SPickerFormat[keyboardFocused] {*/
-/*  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));*/
-/*}*/
-
-STimePickerSeparator {
-  color: var(--intergalactic-text-primary, #191b23);
-}
-
-STimePickerSeparator[disabled] {
-  opacity: var(--intergalactic-disabled-opacity, 0.3);
-  pointer-events: none;
-}
+}

package/lib/esm/component/PickerInput/PickerInput.mjs

@@ -0,0 +1,227 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Component, sstyled, assignProps } from "@semcore/core";
+import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
+import Input from "@semcore/input";
+import Select from "@semcore/select";
+import React from "react";
+/*!__reshadow-styles__:"./picker-input.shadow.css"*/
+const style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SPickerInput_1bwib_gg_._size_l_1bwib_gg_,.___SPickerInput_1bwib_gg_._size_m_1bwib_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_1bwib_gg_._size_l_1bwib_gg_{width:21px}",
+    /*__inner_css_end__*/
+    "1bwib_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SPickerInput": "___SPickerInput_1bwib_gg_",
+    "_size_m": "_size_m_1bwib_gg_",
+    "_size_l": "_size_l_1bwib_gg_"
+  })
+);
+function getOptions(minMax, step = 1) {
+  const [min, max] = minMax;
+  const length = Number(((max + 1 - min) / step).toFixed(0));
+  const options = Array(length).fill("");
+  let numValue = min;
+  return options.map((_i, index) => {
+    numValue = index === 0 ? numValue : numValue + step;
+    const value = String(numValue).padStart(2, "0");
+    return /* @__PURE__ */ React.createElement(Select.Option, {
+      value,
+      key: value
+    }, value);
+  });
+}
+class AbstractPickerInput extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      dirtyValue: void 0,
+      visible: false
+    });
+    _defineProperty(this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "parseValueWithMinMax", (value) => {
+      const [min, max] = this.minMax;
+      const numberValue = isNaN(Number(value)) ? min : Number(value);
+      return String(Math.max(min, Math.min(max, numberValue)));
+    });
+    _defineProperty(this, "handleChange", (value, event) => {
+      event.stopPropagation();
+      const inputValue = value.replace(/[^0-9]/g, "");
+      const numberValue = Number(inputValue);
+      if (!Number.isNaN(numberValue)) {
+        this.setState({
+          dirtyValue: inputValue.slice(-2)
+        });
+      }
+    });
+    _defineProperty(this, "handleBlur", (event) => this.submitChanges(event));
+    _defineProperty(this, "handleSelect", (value, event) => {
+      this.dispatchOnChange(value, event);
+    });
+    _defineProperty(this, "handleVisibleChange", (visible) => this.setState({
+      visible
+    }));
+  }
+  dispatchOnChange(value, event) {
+    this.setState({
+      dirtyValue: void 0
+    });
+    this.asProps.$onValueChange(value, this.field, event);
+  }
+  submitChanges(event) {
+    let {
+      dirtyValue
+    } = this.state;
+    if (dirtyValue !== void 0) {
+      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue);
+      this.dispatchOnChange(dirtyValue, event);
+    }
+  }
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SPickerInput = Select.Trigger;
+    const {
+      styles,
+      step,
+      onSelect,
+      time,
+      size,
+      disabled,
+      onVisibleChange,
+      ariaLabel,
+      ...other
+    } = this.asProps;
+    const {
+      dirtyValue,
+      visible
+    } = this.state;
+    const value = dirtyValue === void 0 ? time : dirtyValue;
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(Select, _ref2.cn("Select", {
+      ...other,
+      "interaction": "focus",
+      "size": size,
+      "onChange": callAllEventHandlers(onSelect, this.handleSelect),
+      "onVisibleChange": callAllEventHandlers(onVisibleChange, this.handleVisibleChange),
+      "visible": visible,
+      "value": time,
+      "defaultHighlightedIndex": time ? null : 0
+    }), /* @__PURE__ */ React.createElement(SPickerInput, _ref2.cn("SPickerInput", {
+      ...assignProps({
+        "tag": Input.Value,
+        "ref": this.inputRef,
+        "inputMode": "numeric",
+        "size": size,
+        "disabled": disabled,
+        "neighborLocation": false,
+        "value": value,
+        "aria-label": ariaLabel,
+        "onChange": this.handleChange,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleKeyDown
+      }, _ref)
+    })), /* @__PURE__ */ React.createElement(Select.Menu, {
+      hMax: 180
+    }, getOptions(this.minMax, step)));
+  }
+}
+_defineProperty(AbstractPickerInput, "style", style);
+_defineProperty(AbstractPickerInput, "defaultProps", (_) => ({
+  placeholder: "00",
+  offset: [-8, 4]
+}));
+class Hours extends AbstractPickerInput {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleKeyDown", (event) => {
+      const {
+        currentTarget
+      } = event;
+      if (event.key === "Enter") {
+        this.submitChanges(event);
+      }
+      if (event.key === "ArrowRight") {
+        if (currentTarget.selectionStart && currentTarget.selectionStart >= currentTarget.value.length && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          this.focusNext();
+        }
+      }
+    });
+  }
+  get field() {
+    return "hours";
+  }
+  get minMax() {
+    const {
+      is12Hour
+    } = this.asProps;
+    return is12Hour ? [1, 12] : [0, 23];
+  }
+  focusNext() {
+    if (this.asProps.minutesInputRef.current) {
+      this.setState({
+        visible: false
+      });
+      this.asProps.minutesInputRef.current.focus();
+    }
+  }
+  componentDidUpdate(_, prevState) {
+    const {
+      dirtyValue
+    } = this.state;
+    if (prevState.dirtyValue === void 0 || dirtyValue === void 0) return;
+    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
+      this.focusNext();
+    }
+  }
+}
+_defineProperty(Hours, "defaultProps", (props) => ({
+  ...AbstractPickerInput.defaultProps(props),
+  ml: props.size === "l" ? 3 : void 0
+}));
+class Minutes extends AbstractPickerInput {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "handleKeyDown", (event) => {
+      const {
+        currentTarget
+      } = event;
+      if (event.key === "ArrowLeft") {
+        if (currentTarget.selectionStart && currentTarget.selectionStart <= 0 && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          this.focusPrev();
+        }
+      }
+      if (event.key === "Backspace") {
+        if (currentTarget.value.length === 0) {
+          event.preventDefault();
+          this.focusPrev();
+        }
+      }
+      if (event.key === "Enter") this.submitChanges(event);
+    });
+  }
+  get field() {
+    return "minutes";
+  }
+  get minMax() {
+    return [0, 59];
+  }
+  focusPrev() {
+    if (this.asProps.hoursInputRef.current) {
+      this.setState({
+        visible: false
+      });
+      this.asProps.hoursInputRef.current.focus();
+    }
+  }
+}
+_defineProperty(Minutes, "defaultProps", (props) => ({
+  ...AbstractPickerInput.defaultProps(props),
+  mr: props.size === "l" ? 3 : void 0
+}));
+export {
+  Hours,
+  Minutes
+};

package/lib/esm/component/PickerInput/picker-input.shadow.css

@@ -0,0 +1,11 @@
+SPickerInput[size='m'] {
+  width: 19px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}
+
+SPickerInput[size='l'] {
+  width: 21px;
+  margin: 0 var(--intergalactic-spacing-2x, 8px);
+  padding: 0;
+}