@semcore/time-picker 16.2.0-prerelease.1 → 16.2.0

package/lib/esm/{PickerInput.mjs → component/PickerInput/PickerInput.mjs}

@@ -1,72 +1,78 @@
 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 _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 _excluded = ["styles", "step", "onSelect", "time", "size", "disabled", "onVisibleChange", "ariaLabel"];
+/*!__reshadow-styles__:"./picker-input.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___SPickerInput_p1g8c_gg_._size_l_p1g8c_gg_,.___SPickerInput_p1g8c_gg_._size_m_p1g8c_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_p1g8c_gg_._size_l_p1g8c_gg_{width:21px}",
+    /*__inner_css_end__*/
+    "p1g8c_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SPickerInput": "___SPickerInput_p1g8c_gg_",
+    "_size_m": "_size_m_p1g8c_gg_",
+    "_size_l": "_size_l_p1g8c_gg_"
+  })
+);
+function getOptions(minMax) {
+  var step = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
+  var _minMax = _slicedToArray(minMax, 2), min = _minMax[0], max = _minMax[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));
+    var value = String(numValue).padStart(2, "0");
     return /* @__PURE__ */ React.createElement(Select.Option, {
       value,
       key: value
     }, value);
   });
 }
-var defaultPopperOffset = [-8, 4];
-var ItemPicker = /* @__PURE__ */ (function(_Component) {
-  function ItemPicker2() {
+var AbstractPickerInput = /* @__PURE__ */ (function(_Component) {
+  function AbstractPickerInput2() {
     var _this;
-    _classCallCheck(this, ItemPicker2);
+    _classCallCheck(this, AbstractPickerInput2);
     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());
+    _this = _callSuper(this, AbstractPickerInput2, [].concat(args));
     _defineProperty(_this, "state", {
       dirtyValue: void 0,
       visible: false
     });
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
     _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)));
+      var _this$minMax = _slicedToArray(_this.minMax, 2), min = _this$minMax[0], max = _this$minMax[1];
+      var numberValue = isNaN(Number(value)) ? min : Number(value);
+      return String(Math.max(min, Math.min(max, numberValue)));
     });
     _defineProperty(_this, "handleChange", function(value, event) {
       event.stopPropagation();
-      var numberValue = intOrDefault(Number(value), Number.NaN);
+      var inputValue = value.replace(/[^0-9]/g, "");
+      var numberValue = Number(inputValue);
       if (!Number.isNaN(numberValue)) {
         _this.setState({
-          dirtyValue: value.slice(-2)
+          dirtyValue: inputValue.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);
     });
@@ -75,21 +81,10 @@ var ItemPicker = /* @__PURE__ */ (function(_Component) {
         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 [];
-    }
-  }, {
+  _inherits(AbstractPickerInput2, _Component);
+  return _createClass(AbstractPickerInput2, [{
     key: "dispatchOnChange",
     value: function dispatchOnChange(value, event) {
       this.setState({
@@ -111,18 +106,17 @@ var ItemPicker = /* @__PURE__ */ (function(_Component) {
     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$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, ariaLabel = _this$asProps.ariaLabel, 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];
+      var value = dirtyValue === void 0 ? time : dirtyValue;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(Select, _ref2.cn("Select", _objectSpread(_objectSpread({}, other), {}, {
         "interaction": "focus",
-        "size": size ? MAP_SIZE_SELECT[size] : false,
+        "size": size,
         "onChange": callAllEventHandlers(onSelect, this.handleSelect),
         "onVisibleChange": callAllEventHandlers(onVisibleChange, this.handleVisibleChange),
         "visible": visible,
-        "value": timeValue
+        "value": time,
+        "defaultHighlightedIndex": time ? null : 0
       })), /* @__PURE__ */ React.createElement(SPickerInput, _ref2.cn("SPickerInput", _objectSpread({}, assignProps({
         "tag": Input.Value,
         "ref": this.inputRef,
@@ -131,21 +125,24 @@ var ItemPicker = /* @__PURE__ */ (function(_Component) {
         "disabled": disabled,
         "neighborLocation": false,
         "value": value,
-        "aria-label": this.getAriaLabel(),
+        "aria-label": ariaLabel,
         "onChange": this.handleChange,
         "onBlur": this.handleBlur,
         "onKeyDown": this.handleKeyDown
       }, _ref)))), /* @__PURE__ */ React.createElement(Select.Menu, {
         hMax: 180
-      }, getOptions(min, max, step)));
+      }, getOptions(this.minMax, step)));
     }
   }]);
 })(Component);
-_defineProperty(ItemPicker, "defaultProps", {
-  placeholder: "00",
-  offset: defaultPopperOffset
+_defineProperty(AbstractPickerInput, "style", style);
+_defineProperty(AbstractPickerInput, "defaultProps", function(_) {
+  return {
+    placeholder: "00",
+    offset: [-8, 4]
+  };
 });
-var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
+var Hours = /* @__PURE__ */ (function(_AbstractPickerInput2) {
   function Hours2() {
     var _this2;
     _classCallCheck(this, Hours2);
@@ -153,14 +150,13 @@ var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
       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) {
+        if (currentTarget.selectionStart && currentTarget.selectionStart >= currentTarget.value.length && currentTarget.selectionStart === currentTarget.selectionEnd) {
           event.preventDefault();
           _this2.focusNext();
         }
@@ -168,16 +164,17 @@ var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
     });
     return _this2;
   }
-  _inherits(Hours2, _ItemPicker2);
+  _inherits(Hours2, _AbstractPickerInput2);
   return _createClass(Hours2, [{
+    key: "field",
+    get: function get() {
+      return "hours";
+    }
+  }, {
     key: "minMax",
-    value: function minMax() {
+    get: function get() {
       var is12Hour = this.asProps.is12Hour;
-      if (is12Hour) {
-        return [1, 12];
-      } else {
-        return [0, 23];
-      }
+      return is12Hour ? [1, 12] : [0, 23];
     }
   }, {
     key: "focusNext",
@@ -191,7 +188,7 @@ var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(_prevProps, prevState) {
+    value: function componentDidUpdate(_, prevState) {
       var dirtyValue = this.state.dirtyValue;
       if (prevState.dirtyValue === void 0 || dirtyValue === void 0) return;
       if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {
@@ -199,14 +196,13 @@ var Hours = /* @__PURE__ */ (function(_ItemPicker2) {
       }
     }
   }]);
-})(ItemPicker);
-_defineProperty(Hours, "defaultProps", function(_ref3) {
-  var size = _ref3.size;
-  return _objectSpread(_objectSpread({}, ItemPicker.defaultProps), {}, {
-    ml: size === "l" ? 3 : void 0
+})(AbstractPickerInput);
+_defineProperty(Hours, "defaultProps", function(props) {
+  return _objectSpread(_objectSpread({}, AbstractPickerInput.defaultProps(props)), {}, {
+    ml: props.size === "l" ? 3 : void 0
   });
 });
-var Minutes = /* @__PURE__ */ (function(_ItemPicker3) {
+var Minutes = /* @__PURE__ */ (function(_AbstractPickerInput3) {
   function Minutes2() {
     var _this3;
     _classCallCheck(this, Minutes2);
@@ -214,11 +210,10 @@ var Minutes = /* @__PURE__ */ (function(_ItemPicker3) {
       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) {
+        if (currentTarget.selectionStart && currentTarget.selectionStart <= 0 && currentTarget.selectionStart === currentTarget.selectionEnd) {
           event.preventDefault();
           _this3.focusPrev();
         }
@@ -233,10 +228,15 @@ var Minutes = /* @__PURE__ */ (function(_ItemPicker3) {
     });
     return _this3;
   }
-  _inherits(Minutes2, _ItemPicker3);
+  _inherits(Minutes2, _AbstractPickerInput3);
   return _createClass(Minutes2, [{
+    key: "field",
+    get: function get() {
+      return "minutes";
+    }
+  }, {
     key: "minMax",
-    value: function minMax() {
+    get: function get() {
       return [0, 59];
     }
   }, {
@@ -250,11 +250,10 @@ var Minutes = /* @__PURE__ */ (function(_ItemPicker3) {
       }
     }
   }]);
-})(ItemPicker);
-_defineProperty(Minutes, "defaultProps", function(_ref4) {
-  var size = _ref4.size;
-  return _objectSpread(_objectSpread({}, ItemPicker.defaultProps), {}, {
-    mr: size === "l" ? 3 : void 0
+})(AbstractPickerInput);
+_defineProperty(Minutes, "defaultProps", function(props) {
+  return _objectSpread(_objectSpread({}, AbstractPickerInput.defaultProps(props)), {}, {
+    mr: props.size === "l" ? 3 : void 0
   });
 });
 export {

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;
+}

package/lib/esm/component/TimePicker/TimePicker.mjs

@@ -0,0 +1,233 @@
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+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 _applyDecs from "@babel/runtime/helpers/esm/applyDecs2311";
+import _identity from "@babel/runtime/helpers/esm/identity";
+import { sstyled, assignProps, Component, createComponent } from "@semcore/core";
+import { ScreenReaderOnly, Box } from "@semcore/base-components";
+import propsObserver from "@semcore/core/lib/decorators/propsObserver";
+import reactive from "@semcore/core/lib/decorators/reactive";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import Input from "@semcore/input";
+import React from "react";
+import TimePickerEntity from "../../entity/TimePickerEntity.mjs";
+import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
+import TimePickerFormat from "../PickerFormat/PickerFormat.mjs";
+import { Minutes, Hours } from "../PickerInput/PickerInput.mjs";
+var _Class, _TimePickerRoot3, _applyDecs2, _applyDecs2$e, _applyDecs2$c;
+var _initClass, _classDecs, _entityDecs, _init_entity, _init_extra_entity, _TimePickerRoot2, _ref5;
+/*!__reshadow-styles__:"./time-picker.shadow.css"*/
+var style = (
+  /*__reshadow_css_start__*/
+  (sstyled.insert(
+    /*__inner_css_start__*/
+    ".___STimePicker_1p1i0_gg_{position:relative;width:auto;outline:0}.___STimePicker_1p1i0_gg_ .___SPickerInput_1p1i0_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___STimePicker_1p1i0_gg_ .___SPickerInput_1p1i0_gg_.__placeholder_1p1i0_gg_{text-overflow:initial}.___STimePicker_1p1i0_gg_ .___SPickerInput_1p1i0_gg_:focus{outline:0;background-color:var(--intergalactic-bg-highlight-focus, rgba(1, 79, 255, 0.116))}@supports (color:color(display-p3 0 0 0%)){.___STimePicker_1p1i0_gg_ .___SPickerInput_1p1i0_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(1, 79, 255, 0.116))}@media (color-gamut:p3){.___STimePicker_1p1i0_gg_ .___SPickerInput_1p1i0_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, color(display-p3 0.12361 0.30547 0.96332 / 0.116))}}}.___STimePicker_1p1i0_gg_.__disabled_1p1i0_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));cursor:default}@supports (color:color(display-p3 0 0 0%)){.___STimePicker_1p1i0_gg_.__disabled_1p1i0_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___STimePicker_1p1i0_gg_.__disabled_1p1i0_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___STimePickerSeparator_1p1i0_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___STimePickerSeparator_1p1i0_gg_.__disabled_1p1i0_gg_{opacity:var(--intergalactic-disabled-opacity, 0.4);pointer-events:none}",
+    /*__inner_css_end__*/
+    "1p1i0_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__STimePicker": "___STimePicker_1p1i0_gg_",
+    "_disabled": "__disabled_1p1i0_gg_",
+    "__STimePickerSeparator": "___STimePickerSeparator_1p1i0_gg_",
+    "__SPickerInput": "___SPickerInput_1p1i0_gg_",
+    "_placeholder": "__placeholder_1p1i0_gg_"
+  })
+);
+_classDecs = [propsObserver(["value", "is12Hour"])];
+var _TimePickerRoot;
+new (_TimePickerRoot2 = (_ref5 = (_entityDecs = reactive(["meridiem"], function() {
+  this.forceUpdate();
+}), "hoursInputRef"), _TimePickerRoot3 = /* @__PURE__ */ (function(_Component) {
+  function TimePickerRoot() {
+    var _this$props$value;
+    var _this;
+    _classCallCheck(this, TimePickerRoot);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, TimePickerRoot, [].concat(args));
+    _defineProperty(_this, _ref5, /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "minutesInputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      ariaLabel: ""
+    });
+    _defineProperty(_this, "entity", _init_entity(_this, new TimePickerEntity((_this$props$value = _this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : _this.props.defaultValue, _this.props.is12Hour)));
+    _defineProperty(_this, "handleValueChange", (_init_extra_entity(_this), function(value, field, event) {
+      _this.entity[field] = value;
+      _this.handlers.value(_this.entity.toString(), event);
+    }));
+    _defineProperty(_this, "handleMeridiemClick", function(event) {
+      _this.entity.toggleMeridiem();
+      _this.handlers.value(_this.entity.toString(), event);
+    });
+    _defineProperty(_this, "getCommonPickerInputProps", function() {
+      var _this$asProps = _this.asProps, is12Hour = _this$asProps.is12Hour, size = _this$asProps.size, disabled = _this$asProps.disabled;
+      return {
+        size,
+        is12Hour,
+        disabled,
+        $onValueChange: _this.handleValueChange,
+        minutesInputRef: _this.minutesInputRef,
+        hoursInputRef: _this.hoursInputRef
+      };
+    });
+    _defineProperty(_this, "getHoursProps", function() {
+      return _objectSpread(_objectSpread({}, _this.getCommonPickerInputProps()), {}, {
+        time: _this.entity.hours,
+        ariaLabel: _this.asProps.getI18nText("hours"),
+        ref: _this.hoursInputRef
+      });
+    });
+    _defineProperty(_this, "getMinutesProps", function() {
+      return _objectSpread(_objectSpread({}, _this.getCommonPickerInputProps()), {}, {
+        time: _this.entity.minutes,
+        ariaLabel: _this.asProps.getI18nText("minutes"),
+        ref: _this.minutesInputRef
+      });
+    });
+    return _this;
+  }
+  _inherits(TimePickerRoot, _Component);
+  return _createClass(TimePickerRoot, [{
+    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 element = (_document$querySelect = document.querySelector(selector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("#".concat(ariaDescribedBy));
+      if (element) {
+        this.setState({
+          ariaLabel: element.textContent
+        });
+      }
+    }
+  }, {
+    key: "onPropsChange",
+    value: function onPropsChange(changedProps) {
+      var value = changedProps.value, is12Hour = changedProps.is12Hour;
+      if (value !== void 0) {
+        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;
+        this.entity.hours = hours;
+        this.entity.minutes = minutes;
+      }
+      if (is12Hour !== void 0) {
+        this.entity.is12Hour = is12Hour;
+      }
+    }
+  }, {
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        value: null
+      };
+    }
+  }, {
+    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, getI18nText = _this$asProps3.getI18nText;
+      return {
+        size,
+        disabled,
+        meridiem: this.entity.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, id = _this$asProps4.id;
+      var time = "".concat(this.entity.hours, ":").concat(this.entity.minutes);
+      var meridiem = is12Hour ? this.entity.meridiem : "";
+      var label = value ? "".concat(this.state.ariaLabel, " ").concat(getI18nText("title", {
+        time,
+        meridiem
+      })) : "".concat(this.state.ariaLabel, " ").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", "id"]
+      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref3.cn("ScreenReaderOnly", {
+        "tag": "input",
+        "tabIndex": -1,
+        "id": id,
+        "aria-hidden": true,
+        "value": "".concat(time, " ").concat(meridiem)
+      })));
+    }
+  }]);
+})(Component), _applyDecs2 = _applyDecs(_TimePickerRoot3, _classDecs, [[_entityDecs, 0, "entity"]], 0, void 0, Component), _applyDecs2$e = _slicedToArray(_applyDecs2.e, 2), _init_entity = _applyDecs2$e[0], _init_extra_entity = _applyDecs2$e[1], _applyDecs2$c = _slicedToArray(_applyDecs2.c, 2), _TimePickerRoot = _applyDecs2$c[0], _initClass = _applyDecs2$c[1], _TimePickerRoot3), _Class = /* @__PURE__ */ (function(_identity2) {
+  function _Class2() {
+    var _this2;
+    _classCallCheck(this, _Class2);
+    _this2 = _callSuper(this, _Class2, [_TimePickerRoot]), _defineProperty(_assertThisInitialized(_this2), "displayName", "TimePicker"), _defineProperty(_assertThisInitialized(_this2), "style", style), _defineProperty(_assertThisInitialized(_this2), "enhance", [i18nEnhance(localizedMessages)]), _defineProperty(_assertThisInitialized(_this2), "defaultProps", function(_ref6) {
+      var is12Hour = _ref6.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)),
+        locale: "en"
+      };
+    }), _initClass();
+    return _this2;
+  }
+  _inherits(_Class2, _identity2);
+  return _createClass(_Class2);
+})(_identity), _defineProperty(_Class, _TimePickerRoot2, void 0), _Class)();
+var Separator = /* @__PURE__ */ (function(_Component2) {
+  function Separator2() {
+    var _this3;
+    _classCallCheck(this, Separator2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this3 = _callSuper(this, Separator2, [].concat(args));
+    _defineProperty(_this3, "handlerClick", function() {
+      if (_this3.asProps.hoursInputRef.current) {
+        var _this3$asProps$hoursI;
+        (_this3$asProps$hoursI = _this3.asProps.hoursInputRef.current) === null || _this3$asProps$hoursI === void 0 || _this3$asProps$hoursI.focus();
+      }
+    });
+    return _this3;
+  }
+  _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
+};

package/lib/esm/component/TimePicker/TimePicker.type.mjs

@@ -0,0 +1 @@
+

package/lib/esm/component/TimePicker/time-picker.shadow.css

@@ -0,0 +1,34 @@
+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, oklch(0.524 0.266 263.1 / 0.116));
+    }
+  }
+}
+
+STimePicker[disabled] {
+  color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
+  cursor: default;
+}
+
+STimePickerSeparator {
+  color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--intergalactic-disabled-opacity, 0.4);
+  pointer-events: none;
+}