@semcore/time-picker 16.1.14-prerelease.8 → 16.2.0-prerelease.0

package/lib/esm/PickerInput.mjs

@@ -0,0 +1,263 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, assignProps, Component } 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";
+import { intOrDefault, withLeadingZero } from "./TimePicker.mjs";
+var _excluded = ["styles", "step", "onSelect", "time", "size", "disabled", "onVisibleChange"];
+var MAP_FIELD_TO_TIME = {
+  hours: 0,
+  minutes: 1
+};
+var MAP_SIZE_SELECT = {
+  m: "m",
+  l: "l"
+};
+function getOptions(min, max) {
+  var step = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
+  var length = Number(((max + 1 - min) / step).toFixed(0));
+  var options = Array(length).fill("");
+  var numValue = min;
+  return options.map(function(_i, index) {
+    numValue = index === 0 ? numValue : numValue + step;
+    var value = withLeadingZero(String(numValue));
+    return /* @__PURE__ */ React.createElement(Select.Option, {
+      value,
+      key: value
+    }, value);
+  });
+}
+var defaultPopperOffset = [-8, 4];
+var ItemPicker = /* @__PURE__ */ (function(_Component) {
+  function ItemPicker2() {
+    var _this;
+    _classCallCheck(this, ItemPicker2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ItemPicker2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      dirtyValue: void 0,
+      visible: false
+    });
+    _defineProperty(_this, "parseValueWithMinMax", function(value) {
+      var _this$minMax = _this.minMax(), _this$minMax2 = _slicedToArray(_this$minMax, 2), min = _this$minMax2[0], max = _this$minMax2[1];
+      return String(Math.max(min, Math.min(max, value)));
+    });
+    _defineProperty(_this, "handleChange", function(value, event) {
+      event.stopPropagation();
+      var numberValue = intOrDefault(Number(value), Number.NaN);
+      if (!Number.isNaN(numberValue)) {
+        _this.setState({
+          dirtyValue: value.slice(-2)
+        });
+      }
+    });
+    _defineProperty(_this, "handleBlur", function(event) {
+      return _this.submitChanges(event);
+    });
+    _defineProperty(_this, "handleKeyDown", function() {
+    });
+    _defineProperty(_this, "handleSelect", function(value, event) {
+      _this.dispatchOnChange(value, event);
+    });
+    _defineProperty(_this, "handleVisibleChange", function(visible) {
+      return _this.setState({
+        visible
+      });
+    });
+    _defineProperty(_this, "getAriaLabel", function() {
+      var getI18nText = _this.asProps._getI18nText;
+      if (_this.field === "hours") return getI18nText("hours");
+      if (_this.field === "minutes") return getI18nText("minutes");
+      return void 0;
+    });
+    return _this;
+  }
+  _inherits(ItemPicker2, _Component);
+  return _createClass(ItemPicker2, [{
+    key: "minMax",
+    value: function minMax() {
+      return [];
+    }
+  }, {
+    key: "dispatchOnChange",
+    value: function dispatchOnChange(value, event) {
+      this.setState({
+        dirtyValue: void 0
+      });
+      this.asProps.$onValueChange(value, this.field, event);
+    }
+  }, {
+    key: "submitChanges",
+    value: function submitChanges(event) {
+      var dirtyValue = this.state.dirtyValue;
+      if (dirtyValue !== void 0) {
+        if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue);
+        this.dispatchOnChange(dirtyValue, event);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SPickerInput = Select.Trigger;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, step = _this$asProps.step, onSelect = _this$asProps.onSelect, time = _this$asProps.time, size = _this$asProps.size, disabled = _this$asProps.disabled, onVisibleChange = _this$asProps.onVisibleChange, other = _objectWithoutProperties(_this$asProps, _excluded);
+      var _this$state = this.state, dirtyValue = _this$state.dirtyValue, visible = _this$state.visible;
+      var timeValue = time[MAP_FIELD_TO_TIME[this.field]];
+      var value = dirtyValue === void 0 ? timeValue : dirtyValue;
+      var _this$minMax3 = this.minMax(), _this$minMax4 = _slicedToArray(_this$minMax3, 2), min = _this$minMax4[0], max = _this$minMax4[1];
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(Select, _ref2.cn("Select", _objectSpread(_objectSpread({}, other), {}, {
+        "interaction": "focus",
+        "size": size ? MAP_SIZE_SELECT[size] : false,
+        "onChange": callAllEventHandlers(onSelect, this.handleSelect),
+        "onVisibleChange": callAllEventHandlers(onVisibleChange, this.handleVisibleChange),
+        "visible": visible,
+        "value": timeValue
+      })), /* @__PURE__ */ React.createElement(SPickerInput, _ref2.cn("SPickerInput", _objectSpread({}, assignProps({
+        "tag": Input.Value,
+        "ref": this.inputRef,
+        "inputMode": "numeric",
+        "size": size,
+        "disabled": disabled,
+        "neighborLocation": false,
+        "value": value,
+        "aria-label": this.getAriaLabel(),
+        "onChange": this.handleChange,
+        "onBlur": this.handleBlur,
+        "onKeyDown": this.handleKeyDown
+      }, _ref)))), /* @__PURE__ */ React.createElement(Select.Menu, {
+        hMax: 180
+      }, getOptions(min, max, step)));
+    }
+  }]);
+})(Component);
+_defineProperty(ItemPicker, "defaultProps", {
+  placeholder: "00",
+  offset: defaultPopperOffset
+});
+var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
+  function Hours2() {
+    var _this2;
+    _classCallCheck(this, Hours2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _callSuper(this, Hours2, [].concat(args));
+    _defineProperty(_this2, "field", "hours");
+    _defineProperty(_this2, "handleKeyDown", function(event) {
+      var currentTarget = event.currentTarget;
+      if (event.key === "Enter") {
+        _this2.submitChanges(event);
+      }
+      if (event.key === "ArrowRight") {
+        if (currentTarget.selectionStart >= currentTarget.value.length && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          _this2.focusNext();
+        }
+      }
+    });
+    return _this2;
+  }
+  _inherits(Hours2, _ItemPicker2);
+  return _createClass(Hours2, [{
+    key: "minMax",
+    value: function minMax() {
+      var is12Hour = this.asProps.is12Hour;
+      if (is12Hour) {
+        return [1, 12];
+      } else {
+        return [0, 23];
+      }
+    }
+  }, {
+    key: "focusNext",
+    value: function focusNext() {
+      if (this.asProps.minutesInputRef.current) {
+        this.setState({
+          visible: false
+        });
+        this.asProps.minutesInputRef.current.focus();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(_prevProps, prevState) {
+      var dirtyValue = this.state.dirtyValue;
+      if (prevState.dirtyValue === void 0 || dirtyValue === void 0) return;
+      if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
+        this.focusNext();
+      }
+    }
+  }]);
+})(ItemPicker);
+_defineProperty(Hours, "defaultProps", function(_ref3) {
+  var size = _ref3.size;
+  return _objectSpread(_objectSpread({}, ItemPicker.defaultProps), {}, {
+    ml: size === "l" ? 3 : void 0
+  });
+});
+var Minutes = /* @__PURE__ */ (function(_ItemPicker3) {
+  function Minutes2() {
+    var _this3;
+    _classCallCheck(this, Minutes2);
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+    _this3 = _callSuper(this, Minutes2, [].concat(args));
+    _defineProperty(_this3, "field", "minutes");
+    _defineProperty(_this3, "handleKeyDown", function(event) {
+      var currentTarget = event.currentTarget;
+      if (event.key === "ArrowLeft") {
+        if (currentTarget.selectionStart <= 0 && currentTarget.selectionStart === currentTarget.selectionEnd) {
+          event.preventDefault();
+          _this3.focusPrev();
+        }
+      }
+      if (event.key === "Backspace") {
+        if (currentTarget.value.length === 0) {
+          event.preventDefault();
+          _this3.focusPrev();
+        }
+      }
+      if (event.key === "Enter") _this3.submitChanges(event);
+    });
+    return _this3;
+  }
+  _inherits(Minutes2, _ItemPicker3);
+  return _createClass(Minutes2, [{
+    key: "minMax",
+    value: function minMax() {
+      return [0, 59];
+    }
+  }, {
+    key: "focusPrev",
+    value: function focusPrev() {
+      if (this.asProps.hoursInputRef.current) {
+        this.setState({
+          visible: false
+        });
+        this.asProps.hoursInputRef.current.focus();
+      }
+    }
+  }]);
+})(ItemPicker);
+_defineProperty(Minutes, "defaultProps", function(_ref4) {
+  var size = _ref4.size;
+  return _objectSpread(_objectSpread({}, ItemPicker.defaultProps), {}, {
+    mr: size === "l" ? 3 : void 0
+  });
+});
+export {
+  Hours,
+  Minutes
+};

package/lib/esm/TimePicker.mjs

@@ -0,0 +1,297 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { Box } from "@semcore/flex-box";
+import Input from "@semcore/input";
+import React from "react";
+import TimePickerFormat from "./PickerFormat.mjs";
+import { Minutes, Hours } from "./PickerInput.mjs";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+/*!__reshadow-styles__:"./style/time-picker.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___STimePicker_1hysd_gg_{position:relative;width:auto;outline:0}.___STimePicker_1hysd_gg_ .___SPickerInput_1hysd_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___STimePicker_1hysd_gg_ .___SPickerInput_1hysd_gg_.__placeholder_1hysd_gg_{text-overflow:initial}.___STimePicker_1hysd_gg_ .___SPickerInput_1hysd_gg_:focus{outline:0;background-color:var(--intergalactic-bg-highlight-focus, rgb(226, 235, 255))}@supports (color:color(display-p3 0 0 0%)){.___STimePicker_1hysd_gg_ .___SPickerInput_1hysd_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgb(226, 235, 255))}@media (color-gamut:p3){.___STimePicker_1hysd_gg_ .___SPickerInput_1hysd_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, color(display-p3 0.89107 0.91919 1))}}}.___SPickerFormat_1hysd_gg_,.___STimePicker_1hysd_gg_.__disabled_1hysd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));cursor:default}@supports (color:color(display-p3 0 0 0%)){.___STimePicker_1hysd_gg_.__disabled_1hysd_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STimePicker_1hysd_gg_.__disabled_1hysd_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPickerInput_1hysd_gg_._size_l_1hysd_gg_,.___SPickerInput_1hysd_gg_._size_m_1hysd_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_1hysd_gg_._size_l_1hysd_gg_{width:21px}.___SPickerFormat_1hysd_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;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));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;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background-color:var(--intergalactic-bg-secondary-neutral, rgb(248, 249, 248))}@supports (color:color(display-p3 0 0 0%)){.___SPickerFormat_1hysd_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SPickerFormat_1hysd_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161));color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}@media (hover:hover){.___SPickerFormat_1hysd_gg_:hover{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));background-color:var(--intergalactic-bg-secondary-neutral-hover, rgb(241, 242, 242))}@supports (color:color(display-p3 0 0 0%)){.___SPickerFormat_1hysd_gg_:hover{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SPickerFormat_1hysd_gg_:hover{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}}.___SPickerFormat_1hysd_gg_.__active_1hysd_gg_,.___SPickerFormat_1hysd_gg_:active{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));background-color:var(--intergalactic-bg-secondary-neutral-active, rgb(234, 235, 235))}@supports (color:color(display-p3 0 0 0%)){.___SPickerFormat_1hysd_gg_.__active_1hysd_gg_,.___SPickerFormat_1hysd_gg_:active{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SPickerFormat_1hysd_gg_.__active_1hysd_gg_,.___SPickerFormat_1hysd_gg_:active{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPickerFormat_1hysd_gg_._size_m_1hysd_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_1hysd_gg_._size_m_1hysd_gg_ .___SPickerFormatText_1hysd_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_1hysd_gg_._size_l_1hysd_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0-1px 0 0}.___SPickerFormat_1hysd_gg_._size_l_1hysd_gg_ .___SPickerFormatText_1hysd_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_1hysd_gg_.__disabled_1hysd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0%)){.___SPickerFormat_1hysd_gg_.__disabled_1hysd_gg_{border-color:transparent transparent transparent var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPickerFormat_1hysd_gg_.__disabled_1hysd_gg_{border-color:transparent transparent transparent var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___STimePickerSeparator_1hysd_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___STimePickerSeparator_1hysd_gg_.__disabled_1hysd_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);pointer-events:none}",
+    /*__inner_css_end__*/
+    "1hysd_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STimePicker": "___STimePicker_1hysd_gg_",
+    "_disabled": "__disabled_1hysd_gg_",
+    "__SPickerInput": "___SPickerInput_1hysd_gg_",
+    "_size_m": "_size_m_1hysd_gg_",
+    "_size_l": "_size_l_1hysd_gg_",
+    "__SPickerFormat": "___SPickerFormat_1hysd_gg_",
+    "__STimePickerSeparator": "___STimePickerSeparator_1hysd_gg_",
+    "_placeholder": "__placeholder_1hysd_gg_",
+    "_active": "__active_1hysd_gg_",
+    "__SPickerFormatText": "___SPickerFormatText_1hysd_gg_"
+  })
+);
+var MAP_MERIDIEM = {
+  AM: "PM",
+  PM: "AM"
+};
+var MAP_FIELD_TO_TIME = {
+  hours: 0,
+  minutes: 1
+};
+function intOrDefault(value) {
+  var def = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+  var number = Number.parseInt(value);
+  return Number.isNaN(number) ? def : number;
+}
+function withLeadingZero(value) {
+  value = String(value);
+  if (value.length === 1) return "0".concat(value);
+  return String(value);
+}
+function meridiemByHours(hours) {
+  return hours >= 12 ? "PM" : "AM";
+}
+function formatHoursTo12(hours) {
+  var nHours = intOrDefault(hours, Number.NaN);
+  if (Number.isNaN(nHours)) return hours;
+  if (nHours === 0) return 12;
+  if (nHours > 12) return nHours - 12;
+  return hours;
+}
+function formatHoursTo24(hours, meridiem) {
+  var nHours = intOrDefault(hours, Number.NaN);
+  if (Number.isNaN(nHours)) return hours;
+  if (meridiem === "AM") {
+    if (nHours === 12) return 0;
+  }
+  if (meridiem === "PM") {
+    if (nHours < 12) return nHours + 12;
+  }
+  return hours;
+}
+var TimePickerRoot = /* @__PURE__ */ (function(_Component) {
+  function TimePickerRoot2() {
+    var _this;
+    _classCallCheck(this, TimePickerRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TimePickerRoot2, [].concat(args));
+    _defineProperty(_this, "hoursInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "minutesInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "_lastMeridiem", "AM");
+    _defineProperty(_this, "handleValueChange", function(value, field, event) {
+      var is12Hour = _this.asProps.is12Hour;
+      var _this2 = _this, meridiem = _this2.meridiem;
+      var time;
+      if (field) {
+        time = _this.value.split(":");
+        time[MAP_FIELD_TO_TIME[field]] = value;
+      } else {
+        time = value.split(":");
+      }
+      var _time = time, _time2 = _slicedToArray(_time, 2), _time2$ = _time2[0], hours = _time2$ === void 0 ? "" : _time2$, _time2$2 = _time2[1], minutes = _time2$2 === void 0 ? "" : _time2$2;
+      if (is12Hour) hours = String(formatHoursTo12(hours));
+      value = _this.timeToValue([hours, minutes], meridiem);
+      _this.handlers.value(value, event);
+    });
+    _defineProperty(_this, "handleMeridiemClick", function(event) {
+      var is12Hour = _this.asProps.is12Hour;
+      var _this3 = _this, value = _this3.value, meridiem = _this3.meridiem;
+      var _value$split = value.split(":"), _value$split2 = _slicedToArray(_value$split, 2), _value$split2$ = _value$split2[0], hours = _value$split2$ === void 0 ? "" : _value$split2$, _value$split2$2 = _value$split2[1], minutes = _value$split2$2 === void 0 ? "" : _value$split2$2;
+      if (is12Hour) hours = String(formatHoursTo12(hours));
+      value = _this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);
+      _this.handlers.value(value, event);
+    });
+    _defineProperty(_this, "_getHoursAndMinutesProps", function() {
+      var _this$asProps = _this.asProps, is12Hour = _this$asProps.is12Hour, size = _this$asProps.size, disabled = _this$asProps.disabled, getI18nText = _this$asProps.getI18nText;
+      var time = _this.valueToTime(_this.value);
+      return {
+        time,
+        size,
+        is12Hour,
+        disabled,
+        $onValueChange: _this.handleValueChange,
+        minutesInputRef: _this.minutesInputRef,
+        hoursInputRef: _this.hoursInputRef,
+        _getI18nText: getI18nText
+      };
+    });
+    _defineProperty(_this, "getHoursProps", function() {
+      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
+        ref: _this.hoursInputRef
+      });
+    });
+    _defineProperty(_this, "getMinutesProps", function() {
+      return _objectSpread(_objectSpread({}, _this._getHoursAndMinutesProps()), {}, {
+        ref: _this.minutesInputRef
+      });
+    });
+    return _this;
+  }
+  _inherits(TimePickerRoot2, _Component);
+  return _createClass(TimePickerRoot2, [{
+    key: "uncontrolledProps",
+    value: (
+      // default AM
+      (function uncontrolledProps() {
+        return {
+          value: null,
+          title: null
+        };
+      })
+    )
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _document$querySelect;
+      var _this$asProps2 = this.asProps, id = _this$asProps2.id, ariaDescribedBy = _this$asProps2["aria-describedby"];
+      var selector = "[for=".concat(id, "]");
+      var titleElement = (_document$querySelect = document.querySelector(selector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("#".concat(ariaDescribedBy));
+      if (titleElement) {
+        this.handlers.title(titleElement.textContent);
+      }
+    }
+  }, {
+    key: "value",
+    get: function get() {
+      var value = this.asProps.value;
+      return value === null || value === void 0 ? ":" : value;
+    }
+  }, {
+    key: "meridiem",
+    get: function get() {
+      var value = this.asProps.value;
+      var _value$split3 = value.split(":"), _value$split4 = _slicedToArray(_value$split3, 1), _value$split4$ = _value$split4[0], hours = _value$split4$ === void 0 ? "" : _value$split4$;
+      var nHours = intOrDefault(hours, Number.NaN);
+      if (!Number.isNaN(nHours)) {
+        this._lastMeridiem = meridiemByHours(nHours);
+      }
+      return this._lastMeridiem;
+    }
+  }, {
+    key: "valueToTime",
+    value: function valueToTime(value) {
+      var is12Hour = this.asProps.is12Hour;
+      var _value$split5 = value.split(":"), _value$split6 = _slicedToArray(_value$split5, 2), _value$split6$ = _value$split6[0], hours = _value$split6$ === void 0 ? "" : _value$split6$, _value$split6$2 = _value$split6[1], minutes = _value$split6$2 === void 0 ? "" : _value$split6$2;
+      if (is12Hour) hours = formatHoursTo12(hours);
+      hours = withLeadingZero(hours);
+      minutes = withLeadingZero(minutes);
+      return [hours, minutes];
+    }
+  }, {
+    key: "timeToValue",
+    value: function timeToValue(time, meridiem) {
+      var is12Hour = this.asProps.is12Hour;
+      var _time3 = _slicedToArray(time, 2), _time3$ = _time3[0], hours = _time3$ === void 0 ? "" : _time3$, _time3$2 = _time3[1], minutes = _time3$2 === void 0 ? "" : _time3$2;
+      hours = intOrDefault(hours, hours);
+      minutes = intOrDefault(minutes, minutes);
+      if (is12Hour) hours = formatHoursTo24(hours, meridiem);
+      return "".concat(hours, ":").concat(minutes);
+    }
+  }, {
+    key: "getSeparatorProps",
+    value: function getSeparatorProps() {
+      return {
+        disabled: this.asProps.disabled,
+        hoursInputRef: this.hoursInputRef
+      };
+    }
+  }, {
+    key: "getFormatProps",
+    value: function getFormatProps() {
+      var _this$asProps3 = this.asProps, size = _this$asProps3.size, disabled = _this$asProps3.disabled, disablePortal = _this$asProps3.disablePortal, getI18nText = _this$asProps3.getI18nText;
+      return {
+        size,
+        disabled,
+        disablePortal,
+        meridiem: this.meridiem,
+        onClick: this.handleMeridiemClick,
+        getI18nText
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var STimePicker = Input;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, Children = _this$asProps4.Children, value = _this$asProps4.value, is12Hour = _this$asProps4.is12Hour, getI18nText = _this$asProps4.getI18nText, title = _this$asProps4.title;
+      var _this$valueToTime = this.valueToTime(this.value), _this$valueToTime2 = _slicedToArray(_this$valueToTime, 2), hours = _this$valueToTime2[0], minutes = _this$valueToTime2[1];
+      var label = value ? "".concat(title, " ").concat(getI18nText("title", {
+        time: "".concat(hours, ":").concat(withLeadingZero(minutes)),
+        meridiem: is12Hour ? this.meridiem : ""
+      })) : "".concat(title, " ").concat(getI18nText("titleEmpty"));
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(STimePicker, _ref3.cn("STimePicker", _objectSpread({}, assignProps({
+        "role": "group",
+        "aria-label": label,
+        "__excludeProps": ["value", "title"]
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))));
+    }
+  }]);
+})(Component);
+_defineProperty(TimePickerRoot, "displayName", "TimePicker");
+_defineProperty(TimePickerRoot, "style", style);
+_defineProperty(TimePickerRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(TimePickerRoot, "defaultProps", function(_ref5) {
+  var is12Hour = _ref5.is12Hour;
+  return {
+    defaultValue: "",
+    size: "m",
+    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TimePicker.Hours, null), /* @__PURE__ */ React.createElement(TimePicker.Separator, null), /* @__PURE__ */ React.createElement(TimePicker.Minutes, null), is12Hour && /* @__PURE__ */ React.createElement(TimePicker.Format, null)),
+    i18n: localizedMessages,
+    locale: "en",
+    defaultTitle: ""
+  };
+});
+var Separator = /* @__PURE__ */ (function(_Component2) {
+  function Separator2() {
+    var _this4;
+    _classCallCheck(this, Separator2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this4 = _callSuper(this, Separator2, [].concat(args));
+    _defineProperty(_this4, "handlerClick", function() {
+      if (_this4.asProps.hoursInputRef.current) {
+        var _this4$asProps$hoursI;
+        (_this4$asProps$hoursI = _this4.asProps.hoursInputRef.current) === null || _this4$asProps$hoursI === void 0 || _this4$asProps$hoursI.focus();
+      }
+    });
+    return _this4;
+  }
+  _inherits(Separator2, _Component2);
+  return _createClass(Separator2, [{
+    key: "render",
+    value: function render() {
+      var _ref2 = this.asProps, _ref4;
+      var STimePickerSeparator = Box;
+      var styles = this.asProps.styles;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(STimePickerSeparator, _ref4.cn("STimePickerSeparator", _objectSpread({}, assignProps({
+        "onClick": this.handlerClick,
+        "aria-hidden": "true"
+      }, _ref2))));
+    }
+  }]);
+})(Component);
+_defineProperty(Separator, "defaultProps", {
+  children: ":"
+});
+var TimePicker = createComponent(TimePickerRoot, {
+  Hours,
+  Minutes,
+  Separator,
+  Format: TimePickerFormat
+});
+export {
+  TimePicker as default,
+  formatHoursTo12,
+  formatHoursTo24,
+  intOrDefault,
+  meridiemByHours,
+  withLeadingZero
+};

package/lib/esm/index.mjs

@@ -1,4 +1,9 @@
-import { default as default2 } from "./component/TimePicker/TimePicker.mjs";
+import { default as default2, formatHoursTo12, formatHoursTo24, intOrDefault, meridiemByHours, withLeadingZero } from "./TimePicker.mjs";
 export {
-  default2 as default
+  default2 as default,
+  formatHoursTo12,
+  formatHoursTo24,
+  intOrDefault,
+  meridiemByHours,
+  withLeadingZero
 };