@semcore/time-picker 2.4.16 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.0] - 2022-05-17
+
+### BREAK
+
+- Updated styles according to the library redesign policy.
+
 ## [2.4.16] - 2022-05-16
 
 ### Changed

package/lib/cjs/PickerFormat.js

@@ -60,7 +60,7 @@ var TimePickerFormat = /*#__PURE__*/function (_Component) {
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPickerFormat, _ref2.cn("SPickerFormat", _objectSpread({}, (0, _core.assignProps)({
         "type": "button",
         "tag": "button"
-      }, _ref))), Children.origin ? /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SPickerFormatText, _ref2.cn("SPickerFormatText", {}), meridiem)));
+      }, _ref))), Children.origin ? /*#__PURE__*/_react["default"].createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(SPickerFormatText, _ref2.cn("SPickerFormatText", {}), meridiem));
     }
   }]);
   return TimePickerFormat;

package/lib/cjs/PickerFormat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PickerFormat.jsx"],"names":["TimePickerFormat","SPickerFormat","Box","asProps","Children","meridiem","styles","SPickerFormatText","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;IAEMA,gB;;;;;;;;;;;;WAEJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,aAAa,GAKMC,YALzB;AACA,0BAAuC,KAAKC,OAA5C;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,QAAlB,iBAAkBA,QAAlB;AAAA,UAA4BC,MAA5B,iBAA4BA,MAA5B;AACA,UAAMC,iBAAiB,GAAG,MAA1B;AAEA,qBAAO,mBAAQD,MAAR,CAAP,eACE,gCAAC,aAAD;AAAA,gBAAiC,QAAjC;AAAA,eAA8C;AAA9C,kBACGF,QAAQ,CAACI,MAAT,gBACC,gCAAC,QAAD,2BADD,gBAGC,+EACE,gCAAC,iBAAD,qCAAoBH,QAApB,CADF,CAJJ,CADF;AAWD;;;EAlB4BI,e;;iCAAzBT,gB,aACa,CAAC,uCAAD,C;eAoBJA,gB","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n  static enhance = [keyboardFocusEnhance()];\n  render() {\n    const SPickerFormat = Root;\n    const { Children, meridiem, styles } = this.asProps;\n    const SPickerFormatText = 'span';\n\n    return sstyled(styles)(\n      <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n        {Children.origin ? (\n          <Children />\n        ) : (\n          <>\n            <SPickerFormatText>{meridiem}</SPickerFormatText>\n          </>\n        )}\n      </SPickerFormat>,\n    );\n  }\n}\n\nexport default TimePickerFormat;\n"],"file":"PickerFormat.js"}
+{"version":3,"sources":["../../src/PickerFormat.jsx"],"names":["TimePickerFormat","SPickerFormat","Box","asProps","Children","meridiem","styles","SPickerFormatText","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;IAEMA,gB;;;;;;;;;;;;WAEJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,aAAa,GAKMC,YALzB;AACA,0BAAuC,KAAKC,OAA5C;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,QAAlB,iBAAkBA,QAAlB;AAAA,UAA4BC,MAA5B,iBAA4BA,MAA5B;AACA,UAAMC,iBAAiB,GAAG,MAA1B;AAEA,qBAAO,mBAAQD,MAAR,CAAP,eACE,gCAAC,aAAD;AAAA,gBAAiC,QAAjC;AAAA,eAA8C;AAA9C,kBACGF,QAAQ,CAACI,MAAT,gBAAkB,gCAAC,QAAD,2BAAlB,gBAAiC,gCAAC,iBAAD,qCAAoBH,QAApB,CADpC,CADF;AAKD;;;EAZ4BI,e;;iCAAzBT,gB,aACa,CAAC,uCAAD,C;eAcJA,gB","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n  static enhance = [keyboardFocusEnhance()];\n  render() {\n    const SPickerFormat = Root;\n    const { Children, meridiem, styles } = this.asProps;\n    const SPickerFormatText = 'span';\n\n    return sstyled(styles)(\n      <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n        {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}\n      </SPickerFormat>,\n    );\n  }\n}\n\nexport default TimePickerFormat;\n"],"file":"PickerFormat.js"}

package/lib/cjs/PickerInput.js

@@ -53,8 +53,7 @@ var MAP_FIELD_TO_TIME = {
 };
 var MAP_SIZE_SELECT = {
   m: 'm',
-  l: 'l',
-  xl: 'l'
+  l: 'l'
 };
 
 function getOptions(min, max) {

package/lib/cjs/PickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","xl","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","React","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Select","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Input","Value","handleChange","handleBlur","handleFocus","handleKeyDown","Component","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","nextInput","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n  m: 'm',\n  l: 'l',\n  xl: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n  const length = Number(((max + 1 - min) / step).toFixed(0));\n  const options = Array(length).fill('');\n  let numValue = min;\n  return options.map((i, index) => {\n    numValue = index === 0 ? numValue : numValue + step;\n    const value = withLeadingZero(String(numValue));\n    return (\n      <Select.Option value={value} key={value}>\n        {value}\n      </Select.Option>\n    );\n  });\n}\n\nclass ItemPicker extends Component {\n  static defaultProps = {\n    placeholder: '00',\n  };\n\n  $input = React.createRef();\n\n  minMax() {\n    return [];\n  }\n\n  state = {\n    dirtyValue: undefined,\n    visible: false,\n  };\n\n  parseValueWithMinMax = (value) => {\n    const [min, max] = this.minMax();\n    return String(Math.max(min, Math.min(max, value)));\n  };\n\n  dispatchOnChange(value, event) {\n    this.setState({ dirtyValue: undefined });\n    this.asProps.$onValueChange(value, this.field, event);\n  }\n\n  submitChanges(event) {\n    let { dirtyValue } = this.state;\n    if (dirtyValue !== undefined) {\n      // if changes value\n      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n      this.dispatchOnChange(dirtyValue, event);\n    }\n  }\n\n  handleChange = (value, e) => {\n    /* hide props for bubbling events */\n    e.stopPropagation();\n    const numberValue = intOrDefault(Number(value), NaN);\n\n    if (!Number.isNaN(numberValue)) {\n      this.setState({ dirtyValue: value.slice(-2) });\n    }\n  };\n\n  handleBlur = (e) => this.submitChanges(e);\n\n  handleFocus = () => {\n    this.$input?.current.select();\n  };\n\n  /* rewrite method */\n  handleKeyDown = () => {};\n\n  handleSelect = (value, e) => {\n    this.dispatchOnChange(value, e);\n  };\n\n  handleVisibleChange = (visible) => this.setState({ visible });\n\n  render() {\n    const SPickerInput = Root;\n    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n      this.asProps;\n    const { dirtyValue, visible } = this.state;\n    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n    const value = dirtyValue === undefined ? timeValue : dirtyValue;\n    const [min, max] = this.minMax();\n\n    return sstyled(styles)(\n      <Select\n        {...other}\n        interaction=\"focus\"\n        size={size ? MAP_SIZE_SELECT[size] : false}\n        onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n        visible={visible}\n        value={timeValue}\n      >\n        <SPickerInput\n          interaction=\"focus\"\n          render={Select.Trigger}\n          tag={Input.Value}\n          ref={this.$input}\n          size={size}\n          disabled={disabled}\n          neighborLocation={false}\n          value={value}\n          aria-label={`Search ${this.field}`}\n          onChange={this.handleChange}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n        />\n        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n      </Select>,\n    );\n  }\n}\n\nclass Hours extends ItemPicker {\n  field = 'hours';\n\n  minMax() {\n    const { is12Hour } = this.asProps;\n    if (is12Hour) {\n      return [1, 12];\n    } else {\n      return [0, 23];\n    }\n  }\n\n  nextInput() {\n    if (this.$input.current) {\n      const $input = nextInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 39) {\n      if (\n        currentTarget.selectionStart >= currentTarget.value.length &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.nextInput();\n      }\n    }\n  };\n\n  componentDidUpdate(prevProps, prevState) {\n    const { dirtyValue } = this.state;\n    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n      this.nextInput();\n    }\n  }\n}\n\nclass Minutes extends ItemPicker {\n  field = 'minutes';\n\n  minMax() {\n    return [0, 59];\n  }\n\n  prevFocus() {\n    if (this.$input.current) {\n      const $input = prevInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 37) {\n      if (\n        currentTarget.selectionStart <= 0 &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n    if (e.keyCode === 8) {\n      if (currentTarget.value.length === 0) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n  };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}
+{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","React","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Select","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Input","Value","handleChange","handleBlur","handleFocus","handleKeyDown","Component","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","nextInput","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n  m: 'm',\n  l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n  const length = Number(((max + 1 - min) / step).toFixed(0));\n  const options = Array(length).fill('');\n  let numValue = min;\n  return options.map((i, index) => {\n    numValue = index === 0 ? numValue : numValue + step;\n    const value = withLeadingZero(String(numValue));\n    return (\n      <Select.Option value={value} key={value}>\n        {value}\n      </Select.Option>\n    );\n  });\n}\n\nclass ItemPicker extends Component {\n  static defaultProps = {\n    placeholder: '00',\n  };\n\n  $input = React.createRef();\n\n  minMax() {\n    return [];\n  }\n\n  state = {\n    dirtyValue: undefined,\n    visible: false,\n  };\n\n  parseValueWithMinMax = (value) => {\n    const [min, max] = this.minMax();\n    return String(Math.max(min, Math.min(max, value)));\n  };\n\n  dispatchOnChange(value, event) {\n    this.setState({ dirtyValue: undefined });\n    this.asProps.$onValueChange(value, this.field, event);\n  }\n\n  submitChanges(event) {\n    let { dirtyValue } = this.state;\n    if (dirtyValue !== undefined) {\n      // if changes value\n      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n      this.dispatchOnChange(dirtyValue, event);\n    }\n  }\n\n  handleChange = (value, e) => {\n    /* hide props for bubbling events */\n    e.stopPropagation();\n    const numberValue = intOrDefault(Number(value), NaN);\n\n    if (!Number.isNaN(numberValue)) {\n      this.setState({ dirtyValue: value.slice(-2) });\n    }\n  };\n\n  handleBlur = (e) => this.submitChanges(e);\n\n  handleFocus = () => {\n    this.$input?.current.select();\n  };\n\n  /* rewrite method */\n  handleKeyDown = () => {};\n\n  handleSelect = (value, e) => {\n    this.dispatchOnChange(value, e);\n  };\n\n  handleVisibleChange = (visible) => this.setState({ visible });\n\n  render() {\n    const SPickerInput = Root;\n    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n      this.asProps;\n    const { dirtyValue, visible } = this.state;\n    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n    const value = dirtyValue === undefined ? timeValue : dirtyValue;\n    const [min, max] = this.minMax();\n\n    return sstyled(styles)(\n      <Select\n        {...other}\n        interaction=\"focus\"\n        size={size ? MAP_SIZE_SELECT[size] : false}\n        onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n        visible={visible}\n        value={timeValue}\n      >\n        <SPickerInput\n          interaction=\"focus\"\n          render={Select.Trigger}\n          tag={Input.Value}\n          ref={this.$input}\n          size={size}\n          disabled={disabled}\n          neighborLocation={false}\n          value={value}\n          aria-label={`Search ${this.field}`}\n          onChange={this.handleChange}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n        />\n        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n      </Select>,\n    );\n  }\n}\n\nclass Hours extends ItemPicker {\n  field = 'hours';\n\n  minMax() {\n    const { is12Hour } = this.asProps;\n    if (is12Hour) {\n      return [1, 12];\n    } else {\n      return [0, 23];\n    }\n  }\n\n  nextInput() {\n    if (this.$input.current) {\n      const $input = nextInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 39) {\n      if (\n        currentTarget.selectionStart >= currentTarget.value.length &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.nextInput();\n      }\n    }\n  };\n\n  componentDidUpdate(prevProps, prevState) {\n    const { dirtyValue } = this.state;\n    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n      this.nextInput();\n    }\n  }\n}\n\nclass Minutes extends ItemPicker {\n  field = 'minutes';\n\n  minMax() {\n    return [0, 59];\n  }\n\n  prevFocus() {\n    if (this.$input.current) {\n      const $input = prevInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 37) {\n      if (\n        currentTarget.selectionStart <= 0 &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n    if (e.keyCode === 8) {\n      if (currentTarget.value.length === 0) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n  };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}

package/lib/cjs/TimePicker.js

@@ -61,22 +61,22 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___STimePicker_y9vhd_gg_{position:relative;width:auto}.___STimePicker_y9vhd_gg_.__disabled_y9vhd_gg_{color:rgba(51,51,51,.3);cursor:default}.___SPickerInput_y9vhd_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_y9vhd_gg_.__placeholder_y9vhd_gg_{text-overflow:clip}.___SPickerInput_y9vhd_gg_._size_m_y9vhd_gg_{width:17px}.___SPickerInput_y9vhd_gg_._size_l_y9vhd_gg_{width:18px}.___SPickerInput_y9vhd_gg_._size_xl_y9vhd_gg_{width:22px}.___SPickerFormat_y9vhd_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;margin:0 -1px 0 0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;align-items:center;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#666666;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}.___SPickerFormat_y9vhd_gg_:hover{background-color:rgba(166,176,179,.2)}.___SPickerFormat_y9vhd_gg_:active,.___SPickerFormat_y9vhd_gg_.__active_y9vhd_gg_{background-color:rgba(166,176,179,.3)}.___SPickerFormat_y9vhd_gg_._size_m_y9vhd_gg_{height:26px;font-size:12px;border-radius:0 3px 3px 0}.___SPickerFormat_y9vhd_gg_._size_l_y9vhd_gg_{height:32px;font-size:14px;border-radius:0 4px 4px 0}.___SPickerFormat_y9vhd_gg_._size_l_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_,.___SPickerFormat_y9vhd_gg_._size_m_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_{margin:0 8px}.___SPickerFormat_y9vhd_gg_._size_xl_y9vhd_gg_{height:42px;font-size:16px;border-radius:0 5px 5px 0}.___SPickerFormat_y9vhd_gg_._size_xl_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_{margin:0 12px}.___SPickerFormat_y9vhd_gg_.__disabled_y9vhd_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #a6b0b3}.___SPickerFormat_y9vhd_gg_.__keyboardFocused_y9vhd_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}"
+".___STimePicker_p894m_gg_{position:relative;width:auto}.___STimePicker_p894m_gg_.__disabled_p894m_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_p894m_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_p894m_gg_.__placeholder_p894m_gg_{text-overflow:clip}.___SPickerInput_p894m_gg_._size_m_p894m_gg_{width:19px}.___SPickerInput_p894m_gg_._size_l_p894m_gg_{width:21px}.___SPickerFormat_p894m_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;margin:0 -1px 0 0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_p894m_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_p894m_gg_:active,.___SPickerFormat_p894m_gg_.__active_p894m_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_p894m_gg_._size_m_p894m_gg_{height:28px;font-size:14px}.___SPickerFormat_p894m_gg_._size_m_p894m_gg_ .___SPickerFormatText_p894m_gg_{margin:0 8px}.___SPickerFormat_p894m_gg_._size_l_p894m_gg_{height:40px;font-size:16px}.___SPickerFormat_p894m_gg_._size_l_p894m_gg_ .___SPickerFormatText_p894m_gg_{margin:0 12px}.___SPickerFormat_p894m_gg_.__disabled_p894m_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_p894m_gg_.__keyboardFocused_p894m_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_p894m_gg_.__disabled_p894m_gg_{opacity:0.3;pointer-events:none}"
 /*__inner_css_end__*/
-, "buqesv_gg_")
+, "16g3yp6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STimePicker": "___STimePicker_y9vhd_gg_",
-  "_disabled": "__disabled_y9vhd_gg_",
-  "__SPickerInput": "___SPickerInput_y9vhd_gg_",
-  "_placeholder": "__placeholder_y9vhd_gg_",
-  "_size_m": "_size_m_y9vhd_gg_",
-  "_size_l": "_size_l_y9vhd_gg_",
-  "_size_xl": "_size_xl_y9vhd_gg_",
-  "__SPickerFormat": "___SPickerFormat_y9vhd_gg_",
-  "_active": "__active_y9vhd_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_y9vhd_gg_",
-  "_keyboardFocused": "__keyboardFocused_y9vhd_gg_"
+  "__STimePicker": "___STimePicker_p894m_gg_",
+  "_disabled": "__disabled_p894m_gg_",
+  "__SPickerInput": "___SPickerInput_p894m_gg_",
+  "_placeholder": "__placeholder_p894m_gg_",
+  "_size_m": "_size_m_p894m_gg_",
+  "_size_l": "_size_l_p894m_gg_",
+  "__SPickerFormat": "___SPickerFormat_p894m_gg_",
+  "_active": "__active_p894m_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_p894m_gg_",
+  "_keyboardFocused": "__keyboardFocused_p894m_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_p894m_gg_"
 });
 var MAP_MERIDIEM = {
   AM: 'PM',
@@ -213,7 +213,7 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
 
       _this.handlers.value(value, event);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHoursProps", function () {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getHoursAndMinutesProps", function () {
       var _this$asProps = _this.asProps,
           is12Hour = _this$asProps.is12Hour,
           size = _this$asProps.size,
@@ -229,22 +229,8 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
         $onValueChange: _this.handleValueChange
       };
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMinutesProps", function () {
-      return _this.getHoursProps();
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getFormatProps", function () {
-      var _this$asProps2 = _this.asProps,
-          size = _this$asProps2.size,
-          disabled = _this$asProps2.disabled,
-          disablePortal = _this$asProps2.disablePortal;
-      return {
-        size: size,
-        disabled: disabled,
-        disablePortal: disablePortal,
-        meridiem: _this.meridiem,
-        onClick: _this.handleMeridiemClick
-      };
-    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getHoursProps", _this._getHoursAndMinutesProps);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getMinutesProps", _this._getHoursAndMinutesProps);
     return _this;
   }
 
@@ -316,6 +302,28 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
 
       return "".concat(hours, ":").concat(minutes);
     }
+  }, {
+    key: "getSeparatorProps",
+    value: function getSeparatorProps() {
+      return {
+        disabled: this.asProps.disabled
+      };
+    }
+  }, {
+    key: "getFormatProps",
+    value: function getFormatProps() {
+      var _this$asProps2 = this.asProps,
+          size = _this$asProps2.size,
+          disabled = _this$asProps2.disabled,
+          disablePortal = _this$asProps2.disablePortal;
+      return {
+        size: size,
+        disabled: disabled,
+        disablePortal: disablePortal,
+        meridiem: this.meridiem,
+        onClick: this.handleMeridiemClick
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -371,7 +379,8 @@ var Separator = /*#__PURE__*/function (_Component2) {
     key: "render",
     value: function render() {
       var _ref2 = this.asProps;
-      return /*#__PURE__*/_react["default"].createElement(_flexBox.Box, (0, _core.assignProps)({
+      var STimePickerSeparator = _flexBox.Box;
+      return /*#__PURE__*/_react["default"].createElement(STimePickerSeparator, (0, _core.assignProps)({
         "ref": this.$el,
         "onClick": this.handlerClick
       }, _ref2));

package/lib/cjs/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","getHoursProps","disablePortal","onClick","handleMeridiemClick","undefined","_lastMeridiem","STimePicker","Input","styles","Children","Component","style","defaultValue","children","Separator","React","createRef","$el","current","focus","Box","handlerClick","TimePicker","Hours","Minutes","Format"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n  AM: 'PM',\n  PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nexport function nextInput(element) {\n  do {\n    element = element.nextElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function prevInput(element) {\n  do {\n    element = element.previousElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n  const number = Number.parseInt(value);\n  return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n  value = String(value);\n  if (value.length === 1) return `0${value}`;\n  return String(value);\n}\n\nexport function meridiemByHours(hours) {\n  return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n  if (Number.isNaN(nHours)) return hours;\n\n  // if not (HH:00)\n  if (nHours === 0) return 12; // 0 => 12 PM\n  if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n  return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n  if (Number.isNaN(nHours)) return hours;\n\n  if (meridiem === 'AM') {\n    if (nHours === 12) return 0; // 12 AM => 0\n  }\n\n  if (meridiem === 'PM') {\n    if (nHours < 12) return nHours + 12; // 10 PM => 22\n  }\n\n  return hours;\n}\n\nclass TimePickerRoot extends Component {\n  static displayName = 'TimePicker';\n  static style = style;\n  static defaultProps = ({ is12Hour }) => ({\n    defaultValue: '',\n    size: 'm',\n    children: (\n      <>\n        <TimePicker.Hours />\n        <TimePicker.Separator />\n        <TimePicker.Minutes />\n        {is12Hour && <TimePicker.Format />}\n      </>\n    ),\n  });\n\n  _lastMeridiem = 'AM'; // default AM\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  get value() {\n    const { value } = this.asProps;\n    return value === null || value === undefined ? ':' : value;\n  }\n\n  get meridiem() {\n    const { value } = this.asProps;\n    const [hours = ''] = value.split(':');\n\n    const nHours = intOrDefault(hours, NaN);\n\n    if (!Number.isNaN(nHours)) {\n      this._lastMeridiem = meridiemByHours(nHours);\n    }\n\n    return this._lastMeridiem;\n  }\n\n  valueToTime(value) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = formatHoursTo12(hours);\n\n    hours = withLeadingZero(hours);\n    minutes = withLeadingZero(minutes);\n\n    return [hours, minutes];\n  }\n\n  timeToValue(time, meridiem) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = time;\n\n    hours = intOrDefault(hours, hours); // 03 => 3\n    minutes = intOrDefault(minutes, minutes); // MM => MM\n\n    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n    return `${hours}:${minutes}`;\n  }\n\n  handleValueChange = (value, field, event) => {\n    const { is12Hour } = this.asProps;\n    const { meridiem } = this;\n\n    let time;\n    if (field) {\n      time = this.value.split(':');\n      time[MAP_FIELD_TO_TIME[field]] = value;\n    } else {\n      time = value.split(':');\n    }\n\n    let [hours = '', minutes = ''] = time;\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], meridiem);\n    this.handlers.value(value, event);\n  };\n\n  handleMeridiemClick = (event) => {\n    const { is12Hour } = this.asProps;\n    let { value, meridiem } = this;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n    this.handlers.value(value, event);\n  };\n\n  getHoursProps = () => {\n    const { is12Hour, size, disabled } = this.asProps;\n    const time = this.valueToTime(this.value);\n\n    return {\n      time,\n      size,\n      is12Hour,\n      disabled,\n      $onValueChange: this.handleValueChange,\n    };\n  };\n\n  getMinutesProps = () => {\n    return this.getHoursProps();\n  };\n\n  getFormatProps = () => {\n    const { size, disabled, disablePortal } = this.asProps;\n    return {\n      size,\n      disabled,\n      disablePortal,\n      meridiem: this.meridiem,\n      onClick: this.handleMeridiemClick,\n    };\n  };\n\n  render() {\n    const STimePicker = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <STimePicker render={Input}>\n        <Children />\n      </STimePicker>,\n    );\n  }\n}\n\nclass Separator extends Component {\n  static defaultProps = {\n    children: ':',\n  };\n\n  $el = React.createRef();\n\n  handlerClick = () => {\n    if (this.$el.current) {\n      prevInput(this.$el.current)?.focus();\n    }\n  };\n\n  render() {\n    return <Root render={Box} ref={this.$el} onClick={this.handlerClick} />;\n  }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n  Hours,\n  Minutes,\n  Separator,\n  Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}
+{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","Input","styles","Children","Component","style","defaultValue","children","Separator","React","createRef","$el","current","focus","STimePickerSeparator","Box","handlerClick","TimePicker","Hours","Minutes","Format"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n  AM: 'PM',\n  PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nexport function nextInput(element) {\n  do {\n    element = element.nextElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function prevInput(element) {\n  do {\n    element = element.previousElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n  const number = Number.parseInt(value);\n  return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n  value = String(value);\n  if (value.length === 1) return `0${value}`;\n  return String(value);\n}\n\nexport function meridiemByHours(hours) {\n  return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n  if (Number.isNaN(nHours)) return hours;\n\n  // if not (HH:00)\n  if (nHours === 0) return 12; // 0 => 12 PM\n  if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n  return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n  if (Number.isNaN(nHours)) return hours;\n\n  if (meridiem === 'AM') {\n    if (nHours === 12) return 0; // 12 AM => 0\n  }\n\n  if (meridiem === 'PM') {\n    if (nHours < 12) return nHours + 12; // 10 PM => 22\n  }\n\n  return hours;\n}\n\nclass TimePickerRoot extends Component {\n  static displayName = 'TimePicker';\n  static style = style;\n  static defaultProps = ({ is12Hour }) => ({\n    defaultValue: '',\n    size: 'm',\n    children: (\n      <>\n        <TimePicker.Hours />\n        <TimePicker.Separator />\n        <TimePicker.Minutes />\n        {is12Hour && <TimePicker.Format />}\n      </>\n    ),\n  });\n\n  _lastMeridiem = 'AM'; // default AM\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  get value() {\n    const { value } = this.asProps;\n    return value === null || value === undefined ? ':' : value;\n  }\n\n  get meridiem() {\n    const { value } = this.asProps;\n    const [hours = ''] = value.split(':');\n\n    const nHours = intOrDefault(hours, NaN);\n\n    if (!Number.isNaN(nHours)) {\n      this._lastMeridiem = meridiemByHours(nHours);\n    }\n\n    return this._lastMeridiem;\n  }\n\n  valueToTime(value) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = formatHoursTo12(hours);\n\n    hours = withLeadingZero(hours);\n    minutes = withLeadingZero(minutes);\n\n    return [hours, minutes];\n  }\n\n  timeToValue(time, meridiem) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = time;\n\n    hours = intOrDefault(hours, hours); // 03 => 3\n    minutes = intOrDefault(minutes, minutes); // MM => MM\n\n    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n    return `${hours}:${minutes}`;\n  }\n\n  handleValueChange = (value, field, event) => {\n    const { is12Hour } = this.asProps;\n    const { meridiem } = this;\n\n    let time;\n    if (field) {\n      time = this.value.split(':');\n      time[MAP_FIELD_TO_TIME[field]] = value;\n    } else {\n      time = value.split(':');\n    }\n\n    let [hours = '', minutes = ''] = time;\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], meridiem);\n    this.handlers.value(value, event);\n  };\n\n  handleMeridiemClick = (event) => {\n    const { is12Hour } = this.asProps;\n    let { value, meridiem } = this;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n    this.handlers.value(value, event);\n  };\n\n  _getHoursAndMinutesProps = () => {\n    const { is12Hour, size, disabled } = this.asProps;\n    const time = this.valueToTime(this.value);\n\n    return {\n      time,\n      size,\n      is12Hour,\n      disabled,\n      $onValueChange: this.handleValueChange,\n    };\n  };\n\n  getHoursProps = this._getHoursAndMinutesProps;\n  getMinutesProps = this._getHoursAndMinutesProps;\n\n  getSeparatorProps() {\n    return {\n      disabled: this.asProps.disabled,\n    };\n  }\n\n  getFormatProps() {\n    const { size, disabled, disablePortal } = this.asProps;\n    return {\n      size,\n      disabled,\n      disablePortal,\n      meridiem: this.meridiem,\n      onClick: this.handleMeridiemClick,\n    };\n  }\n\n  render() {\n    const STimePicker = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <STimePicker render={Input}>\n        <Children />\n      </STimePicker>,\n    );\n  }\n}\n\nclass Separator extends Component {\n  static defaultProps = {\n    children: ':',\n  };\n\n  $el = React.createRef();\n\n  handlerClick = () => {\n    if (this.$el.current) {\n      prevInput(this.$el.current)?.focus();\n    }\n  };\n\n  render() {\n    const STimePickerSeparator = Root;\n    return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n  }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n  Hours,\n  Minutes,\n  Separator,\n  Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}

package/lib/cjs/index.d.ts

@@ -13,7 +13,7 @@ export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
   disabled?: boolean;
   /** Control size
    * @default m */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /** 12-hour time format */
   is12Hour?: boolean;
 }

package/lib/cjs/style/time-picker.shadow.css

@@ -6,7 +6,7 @@ STimePicker {
 }
 
 STimePicker[disabled] {
-  color: color-mod(var(--gray20) a(30%));
+  color: color-mod(var(--gray-800) a(30%));
   cursor: default;
 }
 
@@ -21,15 +21,11 @@ SPickerInput {
 }
 
 SPickerInput[size='m'] {
-  width: 17px;
+  width: 19px;
 }
 
 SPickerInput[size='l'] {
-  width: 18px;
-}
-
-SPickerInput[size='xl'] {
-  width: 22px;
+  width: 21px;
 }
 
 SPickerFormat {
@@ -40,11 +36,12 @@ SPickerFormat {
   margin: 0 -1px 0 0;
   white-space: nowrap;
   font-family: inherit;
-  font-weight: normal;
+  font-weight: 500;
   line-height: normal;
   text-decoration: none;
   align-items: center;
-  border: 1px solid transparent;
+  border: 1px solid var(--gray-200);
+  border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
   outline: 0;
   box-shadow: none;
   cursor: pointer;
@@ -53,44 +50,32 @@ SPickerFormat {
   user-select: none;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  color: var(--gray40);
-  border-color: var(--stone);
-  background-color: color-mod(var(--stone) a(10%));
+  color: var(--gray-500);
+  background-color: color-mod(var(--gray-400) a(10%));
 
   &:hover {
-    background-color: color-mod(var(--stone) a(20%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(20%));
   }
 
   &:active,
   &[active] {
-    background-color: color-mod(var(--stone) a(30%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(30%));
   }
 }
 
 SPickerFormat[size='m'] {
-  height: 26px;
-  font-size: 12px;
-  border-radius: 0 3px 3px 0;
-}
-
-SPickerFormat[size='l'] {
-  height: 32px;
-  font-size: 14px;
-  border-radius: 0 4px 4px 0;
-}
-
-SPickerFormat[size='m'],
-SPickerFormat[size='l'] {
+  height: var(--form-control-m);
+  font-size: var(--fs-200);
   & SPickerFormatText {
     margin: 0 8px;
   }
 }
 
-SPickerFormat[size='xl'] {
-  height: 42px;
-  font-size: 16px;
-  border-radius: 0 5px 5px 0;
-
+SPickerFormat[size='l'] {
+  height: var(--form-control-l);
+  font-size: var(--fs-300);
   & SPickerFormatText {
     margin: 0 12px;
   }
@@ -100,9 +85,14 @@ SPickerFormat[disabled] {
   opacity: var(--disabled-opacity);
   cursor: default;
   pointer-events: none;
-  border-color: transparent transparent transparent var(--stone);
+  border-color: transparent transparent transparent var(--gray-200);
 }
 
 SPickerFormat[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
 }

package/lib/es6/PickerFormat.js

@@ -45,7 +45,7 @@ var TimePickerFormat = /*#__PURE__*/function (_Component) {
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SPickerFormat, _ref2.cn("SPickerFormat", _objectSpread({}, _assignProps({
         "type": "button",
         "tag": "button"
-      }, _ref))), Children.origin ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SPickerFormatText, _ref2.cn("SPickerFormatText", {}), meridiem)));
+      }, _ref))), Children.origin ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(SPickerFormatText, _ref2.cn("SPickerFormatText", {}), meridiem));
     }
   }]);
 

package/lib/es6/PickerFormat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PickerFormat.jsx"],"names":["React","Component","sstyled","Root","Box","keyboardFocusEnhance","TimePickerFormat","SPickerFormat","asProps","Children","meridiem","styles","SPickerFormatText","origin"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;IAEMC,gB;;;;;;;;;;;;;WAEJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,aAAa,GAKMH,GALzB;AACA,0BAAuC,KAAKI,OAA5C;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,QAAlB,iBAAkBA,QAAlB;AAAA,UAA4BC,MAA5B,iBAA4BA,MAA5B;AACA,UAAMC,iBAAiB,GAAG,MAA1B;AAEA,qBAAOV,OAAO,CAACS,MAAD,CAAd,eACE,oBAAC,aAAD;AAAA,gBAAiC,QAAjC;AAAA,eAA8C;AAA9C,kBACGF,QAAQ,CAACI,MAAT,gBACC,oBAAC,QAAD,2BADD,gBAGC,uDACE,oBAAC,iBAAD,qCAAoBH,QAApB,CADF,CAJJ,CADF;AAWD;;;;EAlB4BT,S;;gBAAzBK,gB,aACa,CAACD,oBAAoB,EAArB,C;;AAoBnB,eAAeC,gBAAf","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n  static enhance = [keyboardFocusEnhance()];\n  render() {\n    const SPickerFormat = Root;\n    const { Children, meridiem, styles } = this.asProps;\n    const SPickerFormatText = 'span';\n\n    return sstyled(styles)(\n      <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n        {Children.origin ? (\n          <Children />\n        ) : (\n          <>\n            <SPickerFormatText>{meridiem}</SPickerFormatText>\n          </>\n        )}\n      </SPickerFormat>,\n    );\n  }\n}\n\nexport default TimePickerFormat;\n"],"file":"PickerFormat.js"}
+{"version":3,"sources":["../../src/PickerFormat.jsx"],"names":["React","Component","sstyled","Root","Box","keyboardFocusEnhance","TimePickerFormat","SPickerFormat","asProps","Children","meridiem","styles","SPickerFormatText","origin"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,SAAT,EAAoBC,OAApB,EAA6BC,IAA7B,QAAyC,eAAzC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;IAEMC,gB;;;;;;;;;;;;;WAEJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,aAAa,GAKMH,GALzB;AACA,0BAAuC,KAAKI,OAA5C;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,QAAlB,iBAAkBA,QAAlB;AAAA,UAA4BC,MAA5B,iBAA4BA,MAA5B;AACA,UAAMC,iBAAiB,GAAG,MAA1B;AAEA,qBAAOV,OAAO,CAACS,MAAD,CAAd,eACE,oBAAC,aAAD;AAAA,gBAAiC,QAAjC;AAAA,eAA8C;AAA9C,kBACGF,QAAQ,CAACI,MAAT,gBAAkB,oBAAC,QAAD,2BAAlB,gBAAiC,oBAAC,iBAAD,qCAAoBH,QAApB,CADpC,CADF;AAKD;;;;EAZ4BT,S;;gBAAzBK,gB,aACa,CAACD,oBAAoB,EAArB,C;;AAcnB,eAAeC,gBAAf","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nclass TimePickerFormat extends Component {\n  static enhance = [keyboardFocusEnhance()];\n  render() {\n    const SPickerFormat = Root;\n    const { Children, meridiem, styles } = this.asProps;\n    const SPickerFormatText = 'span';\n\n    return sstyled(styles)(\n      <SPickerFormat render={Box} type=\"button\" tag=\"button\">\n        {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}\n      </SPickerFormat>,\n    );\n  }\n}\n\nexport default TimePickerFormat;\n"],"file":"PickerFormat.js"}

package/lib/es6/PickerInput.js

@@ -30,8 +30,7 @@ var MAP_FIELD_TO_TIME = {
 };
 var MAP_SIZE_SELECT = {
   m: 'm',
-  l: 'l',
-  xl: 'l'
+  l: 'l'
 };
 
 function getOptions(min, max) {

package/lib/es6/PickerInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["React","Input","Select","intOrDefault","nextInput","prevInput","withLeadingZero","Component","sstyled","Root","callAllEventHandlers","MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","xl","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Value","handleChange","handleBlur","handleFocus","handleKeyDown","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n  m: 'm',\n  l: 'l',\n  xl: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n  const length = Number(((max + 1 - min) / step).toFixed(0));\n  const options = Array(length).fill('');\n  let numValue = min;\n  return options.map((i, index) => {\n    numValue = index === 0 ? numValue : numValue + step;\n    const value = withLeadingZero(String(numValue));\n    return (\n      <Select.Option value={value} key={value}>\n        {value}\n      </Select.Option>\n    );\n  });\n}\n\nclass ItemPicker extends Component {\n  static defaultProps = {\n    placeholder: '00',\n  };\n\n  $input = React.createRef();\n\n  minMax() {\n    return [];\n  }\n\n  state = {\n    dirtyValue: undefined,\n    visible: false,\n  };\n\n  parseValueWithMinMax = (value) => {\n    const [min, max] = this.minMax();\n    return String(Math.max(min, Math.min(max, value)));\n  };\n\n  dispatchOnChange(value, event) {\n    this.setState({ dirtyValue: undefined });\n    this.asProps.$onValueChange(value, this.field, event);\n  }\n\n  submitChanges(event) {\n    let { dirtyValue } = this.state;\n    if (dirtyValue !== undefined) {\n      // if changes value\n      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n      this.dispatchOnChange(dirtyValue, event);\n    }\n  }\n\n  handleChange = (value, e) => {\n    /* hide props for bubbling events */\n    e.stopPropagation();\n    const numberValue = intOrDefault(Number(value), NaN);\n\n    if (!Number.isNaN(numberValue)) {\n      this.setState({ dirtyValue: value.slice(-2) });\n    }\n  };\n\n  handleBlur = (e) => this.submitChanges(e);\n\n  handleFocus = () => {\n    this.$input?.current.select();\n  };\n\n  /* rewrite method */\n  handleKeyDown = () => {};\n\n  handleSelect = (value, e) => {\n    this.dispatchOnChange(value, e);\n  };\n\n  handleVisibleChange = (visible) => this.setState({ visible });\n\n  render() {\n    const SPickerInput = Root;\n    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n      this.asProps;\n    const { dirtyValue, visible } = this.state;\n    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n    const value = dirtyValue === undefined ? timeValue : dirtyValue;\n    const [min, max] = this.minMax();\n\n    return sstyled(styles)(\n      <Select\n        {...other}\n        interaction=\"focus\"\n        size={size ? MAP_SIZE_SELECT[size] : false}\n        onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n        visible={visible}\n        value={timeValue}\n      >\n        <SPickerInput\n          interaction=\"focus\"\n          render={Select.Trigger}\n          tag={Input.Value}\n          ref={this.$input}\n          size={size}\n          disabled={disabled}\n          neighborLocation={false}\n          value={value}\n          aria-label={`Search ${this.field}`}\n          onChange={this.handleChange}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n        />\n        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n      </Select>,\n    );\n  }\n}\n\nclass Hours extends ItemPicker {\n  field = 'hours';\n\n  minMax() {\n    const { is12Hour } = this.asProps;\n    if (is12Hour) {\n      return [1, 12];\n    } else {\n      return [0, 23];\n    }\n  }\n\n  nextInput() {\n    if (this.$input.current) {\n      const $input = nextInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 39) {\n      if (\n        currentTarget.selectionStart >= currentTarget.value.length &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.nextInput();\n      }\n    }\n  };\n\n  componentDidUpdate(prevProps, prevState) {\n    const { dirtyValue } = this.state;\n    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n      this.nextInput();\n    }\n  }\n}\n\nclass Minutes extends ItemPicker {\n  field = 'minutes';\n\n  minMax() {\n    return [0, 59];\n  }\n\n  prevFocus() {\n    if (this.$input.current) {\n      const $input = prevInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 37) {\n      if (\n        currentTarget.selectionStart <= 0 &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n    if (e.keyCode === 8) {\n      if (currentTarget.value.length === 0) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n  };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}
+{"version":3,"sources":["../../src/PickerInput.jsx"],"names":["React","Input","Select","intOrDefault","nextInput","prevInput","withLeadingZero","Component","sstyled","Root","callAllEventHandlers","MAP_FIELD_TO_TIME","hours","minutes","MAP_SIZE_SELECT","m","l","getOptions","min","max","step","length","Number","toFixed","options","Array","fill","numValue","map","i","index","value","String","ItemPicker","createRef","dirtyValue","undefined","visible","minMax","Math","e","stopPropagation","numberValue","NaN","isNaN","setState","slice","submitChanges","$input","current","select","dispatchOnChange","event","asProps","$onValueChange","field","state","parseValueWithMinMax","SPickerInput","Trigger","styles","onSelect","time","size","disabled","onVisibleChange","other","timeValue","handleSelect","handleVisibleChange","Value","handleChange","handleBlur","handleFocus","handleKeyDown","placeholder","Hours","currentTarget","keyCode","selectionStart","selectionEnd","preventDefault","is12Hour","focus","prevProps","prevState","Minutes","prevFocus"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Input from '@semcore/input';\nimport Select from '@semcore/select';\nimport { intOrDefault, nextInput, prevInput, withLeadingZero } from './TimePicker';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nconst MAP_SIZE_SELECT = {\n  m: 'm',\n  l: 'l',\n};\n\nfunction getOptions(min, max, step = 1) {\n  const length = Number(((max + 1 - min) / step).toFixed(0));\n  const options = Array(length).fill('');\n  let numValue = min;\n  return options.map((i, index) => {\n    numValue = index === 0 ? numValue : numValue + step;\n    const value = withLeadingZero(String(numValue));\n    return (\n      <Select.Option value={value} key={value}>\n        {value}\n      </Select.Option>\n    );\n  });\n}\n\nclass ItemPicker extends Component {\n  static defaultProps = {\n    placeholder: '00',\n  };\n\n  $input = React.createRef();\n\n  minMax() {\n    return [];\n  }\n\n  state = {\n    dirtyValue: undefined,\n    visible: false,\n  };\n\n  parseValueWithMinMax = (value) => {\n    const [min, max] = this.minMax();\n    return String(Math.max(min, Math.min(max, value)));\n  };\n\n  dispatchOnChange(value, event) {\n    this.setState({ dirtyValue: undefined });\n    this.asProps.$onValueChange(value, this.field, event);\n  }\n\n  submitChanges(event) {\n    let { dirtyValue } = this.state;\n    if (dirtyValue !== undefined) {\n      // if changes value\n      if (dirtyValue) dirtyValue = this.parseValueWithMinMax(dirtyValue); // if not \"\"\n      this.dispatchOnChange(dirtyValue, event);\n    }\n  }\n\n  handleChange = (value, e) => {\n    /* hide props for bubbling events */\n    e.stopPropagation();\n    const numberValue = intOrDefault(Number(value), NaN);\n\n    if (!Number.isNaN(numberValue)) {\n      this.setState({ dirtyValue: value.slice(-2) });\n    }\n  };\n\n  handleBlur = (e) => this.submitChanges(e);\n\n  handleFocus = () => {\n    this.$input?.current.select();\n  };\n\n  /* rewrite method */\n  handleKeyDown = () => {};\n\n  handleSelect = (value, e) => {\n    this.dispatchOnChange(value, e);\n  };\n\n  handleVisibleChange = (visible) => this.setState({ visible });\n\n  render() {\n    const SPickerInput = Root;\n    const { styles, step, onSelect, time, size, disabled, onVisibleChange, ...other } =\n      this.asProps;\n    const { dirtyValue, visible } = this.state;\n    const timeValue = time[MAP_FIELD_TO_TIME[this.field]];\n    const value = dirtyValue === undefined ? timeValue : dirtyValue;\n    const [min, max] = this.minMax();\n\n    return sstyled(styles)(\n      <Select\n        {...other}\n        interaction=\"focus\"\n        size={size ? MAP_SIZE_SELECT[size] : false}\n        onChange={callAllEventHandlers(onSelect, this.handleSelect)}\n        onVisibleChange={callAllEventHandlers(onVisibleChange, this.handleVisibleChange)}\n        visible={visible}\n        value={timeValue}\n      >\n        <SPickerInput\n          interaction=\"focus\"\n          render={Select.Trigger}\n          tag={Input.Value}\n          ref={this.$input}\n          size={size}\n          disabled={disabled}\n          neighborLocation={false}\n          value={value}\n          aria-label={`Search ${this.field}`}\n          onChange={this.handleChange}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n        />\n        <Select.Menu hMax={180}>{getOptions(min, max, step)}</Select.Menu>\n      </Select>,\n    );\n  }\n}\n\nclass Hours extends ItemPicker {\n  field = 'hours';\n\n  minMax() {\n    const { is12Hour } = this.asProps;\n    if (is12Hour) {\n      return [1, 12];\n    } else {\n      return [0, 23];\n    }\n  }\n\n  nextInput() {\n    if (this.$input.current) {\n      const $input = nextInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 39) {\n      if (\n        currentTarget.selectionStart >= currentTarget.value.length &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.nextInput();\n      }\n    }\n  };\n\n  componentDidUpdate(prevProps, prevState) {\n    const { dirtyValue } = this.state;\n    if (prevState.dirtyValue === undefined || dirtyValue === undefined) return;\n\n    if (prevState.dirtyValue.length === 1 && dirtyValue.length === 2) {\n      this.nextInput();\n    }\n  }\n}\n\nclass Minutes extends ItemPicker {\n  field = 'minutes';\n\n  minMax() {\n    return [0, 59];\n  }\n\n  prevFocus() {\n    if (this.$input.current) {\n      const $input = prevInput(this.$input.current);\n      if ($input) {\n        this.setState({ visible: false });\n        $input.focus();\n      }\n    }\n  }\n\n  handleKeyDown = (e) => {\n    const { currentTarget } = e;\n    if (e.keyCode === 13) this.submitChanges(e);\n    if (e.keyCode === 37) {\n      if (\n        currentTarget.selectionStart <= 0 &&\n        currentTarget.selectionStart === currentTarget.selectionEnd\n      ) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n    if (e.keyCode === 8) {\n      if (currentTarget.value.length === 0) {\n        e.preventDefault();\n        this.prevFocus();\n      }\n    }\n  };\n}\n\nexport { Hours, Minutes };\n"],"file":"PickerInput.js"}

package/lib/es6/TimePicker.js

@@ -30,22 +30,22 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___STimePicker_y9vhd_gg_{position:relative;width:auto}.___STimePicker_y9vhd_gg_.__disabled_y9vhd_gg_{color:rgba(51,51,51,.3);cursor:default}.___SPickerInput_y9vhd_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_y9vhd_gg_.__placeholder_y9vhd_gg_{text-overflow:clip}.___SPickerInput_y9vhd_gg_._size_m_y9vhd_gg_{width:17px}.___SPickerInput_y9vhd_gg_._size_l_y9vhd_gg_{width:18px}.___SPickerInput_y9vhd_gg_._size_xl_y9vhd_gg_{width:22px}.___SPickerFormat_y9vhd_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;margin:0 -1px 0 0;white-space:nowrap;font-family:inherit;font-weight:400;line-height:normal;text-decoration:none;align-items:center;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#666666;border-color:#a6b0b3;background-color:rgba(166,176,179,.1)}.___SPickerFormat_y9vhd_gg_:hover{background-color:rgba(166,176,179,.2)}.___SPickerFormat_y9vhd_gg_:active,.___SPickerFormat_y9vhd_gg_.__active_y9vhd_gg_{background-color:rgba(166,176,179,.3)}.___SPickerFormat_y9vhd_gg_._size_m_y9vhd_gg_{height:26px;font-size:12px;border-radius:0 3px 3px 0}.___SPickerFormat_y9vhd_gg_._size_l_y9vhd_gg_{height:32px;font-size:14px;border-radius:0 4px 4px 0}.___SPickerFormat_y9vhd_gg_._size_l_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_,.___SPickerFormat_y9vhd_gg_._size_m_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_{margin:0 8px}.___SPickerFormat_y9vhd_gg_._size_xl_y9vhd_gg_{height:42px;font-size:16px;border-radius:0 5px 5px 0}.___SPickerFormat_y9vhd_gg_._size_xl_y9vhd_gg_ .___SPickerFormatText_y9vhd_gg_{margin:0 12px}.___SPickerFormat_y9vhd_gg_.__disabled_y9vhd_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #a6b0b3}.___SPickerFormat_y9vhd_gg_.__keyboardFocused_y9vhd_gg_{box-shadow:0 0 0 3px rgba(43, 148, 225, 0.3)}"
+".___STimePicker_p894m_gg_{position:relative;width:auto}.___STimePicker_p894m_gg_.__disabled_p894m_gg_{color:rgba(25,27,35,.3);cursor:default}.___SPickerInput_p894m_gg_{box-sizing:content-box;text-align:center;z-index:1}.___SPickerInput_p894m_gg_.__placeholder_p894m_gg_{text-overflow:clip}.___SPickerInput_p894m_gg_._size_m_p894m_gg_{width:19px}.___SPickerInput_p894m_gg_._size_l_p894m_gg_{width:21px}.___SPickerFormat_p894m_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;margin:0 -1px 0 0;white-space:nowrap;font-family:inherit;font-weight:500;line-height:normal;text-decoration:none;align-items:center;border:1px solid #c4c7cf;border-radius:0 6px 6px 0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#6c6e79;background-color:rgba(138,142,155,.1)}.___SPickerFormat_p894m_gg_:hover{color:#6c6e79;background-color:rgba(138,142,155,.2)}.___SPickerFormat_p894m_gg_:active,.___SPickerFormat_p894m_gg_.__active_p894m_gg_{color:#6c6e79;background-color:rgba(138,142,155,.3)}.___SPickerFormat_p894m_gg_._size_m_p894m_gg_{height:28px;font-size:14px}.___SPickerFormat_p894m_gg_._size_m_p894m_gg_ .___SPickerFormatText_p894m_gg_{margin:0 8px}.___SPickerFormat_p894m_gg_._size_l_p894m_gg_{height:40px;font-size:16px}.___SPickerFormat_p894m_gg_._size_l_p894m_gg_ .___SPickerFormatText_p894m_gg_{margin:0 12px}.___SPickerFormat_p894m_gg_.__disabled_p894m_gg_{opacity:0.3;cursor:default;pointer-events:none;border-color:transparent transparent transparent #c4c7cf}.___SPickerFormat_p894m_gg_.__keyboardFocused_p894m_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___STimePickerSeparator_p894m_gg_.__disabled_p894m_gg_{opacity:0.3;pointer-events:none}"
 /*__inner_css_end__*/
-, "buqesv_gg_")
+, "16g3yp6_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__STimePicker": "___STimePicker_y9vhd_gg_",
-  "_disabled": "__disabled_y9vhd_gg_",
-  "__SPickerInput": "___SPickerInput_y9vhd_gg_",
-  "_placeholder": "__placeholder_y9vhd_gg_",
-  "_size_m": "_size_m_y9vhd_gg_",
-  "_size_l": "_size_l_y9vhd_gg_",
-  "_size_xl": "_size_xl_y9vhd_gg_",
-  "__SPickerFormat": "___SPickerFormat_y9vhd_gg_",
-  "_active": "__active_y9vhd_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_y9vhd_gg_",
-  "_keyboardFocused": "__keyboardFocused_y9vhd_gg_"
+  "__STimePicker": "___STimePicker_p894m_gg_",
+  "_disabled": "__disabled_p894m_gg_",
+  "__SPickerInput": "___SPickerInput_p894m_gg_",
+  "_placeholder": "__placeholder_p894m_gg_",
+  "_size_m": "_size_m_p894m_gg_",
+  "_size_l": "_size_l_p894m_gg_",
+  "__SPickerFormat": "___SPickerFormat_p894m_gg_",
+  "_active": "__active_p894m_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_p894m_gg_",
+  "_keyboardFocused": "__keyboardFocused_p894m_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_p894m_gg_"
 });
 var MAP_MERIDIEM = {
   AM: 'PM',
@@ -179,7 +179,7 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
       _this.handlers.value(value, event);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getHoursProps", function () {
+    _defineProperty(_assertThisInitialized(_this), "_getHoursAndMinutesProps", function () {
       var _this$asProps = _this.asProps,
           is12Hour = _this$asProps.is12Hour,
           size = _this$asProps.size,
@@ -196,23 +196,9 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getMinutesProps", function () {
-      return _this.getHoursProps();
-    });
+    _defineProperty(_assertThisInitialized(_this), "getHoursProps", _this._getHoursAndMinutesProps);
 
-    _defineProperty(_assertThisInitialized(_this), "getFormatProps", function () {
-      var _this$asProps2 = _this.asProps,
-          size = _this$asProps2.size,
-          disabled = _this$asProps2.disabled,
-          disablePortal = _this$asProps2.disablePortal;
-      return {
-        size: size,
-        disabled: disabled,
-        disablePortal: disablePortal,
-        meridiem: _this.meridiem,
-        onClick: _this.handleMeridiemClick
-      };
-    });
+    _defineProperty(_assertThisInitialized(_this), "getMinutesProps", _this._getHoursAndMinutesProps);
 
     return _this;
   }
@@ -285,6 +271,28 @@ var TimePickerRoot = /*#__PURE__*/function (_Component) {
 
       return "".concat(hours, ":").concat(minutes);
     }
+  }, {
+    key: "getSeparatorProps",
+    value: function getSeparatorProps() {
+      return {
+        disabled: this.asProps.disabled
+      };
+    }
+  }, {
+    key: "getFormatProps",
+    value: function getFormatProps() {
+      var _this$asProps2 = this.asProps,
+          size = _this$asProps2.size,
+          disabled = _this$asProps2.disabled,
+          disablePortal = _this$asProps2.disablePortal;
+      return {
+        size: size,
+        disabled: disabled,
+        disablePortal: disablePortal,
+        meridiem: this.meridiem,
+        onClick: this.handleMeridiemClick
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -346,7 +354,8 @@ var Separator = /*#__PURE__*/function (_Component2) {
     key: "render",
     value: function render() {
       var _ref2 = this.asProps;
-      return /*#__PURE__*/React.createElement(Box, _assignProps2({
+      var STimePickerSeparator = Box;
+      return /*#__PURE__*/React.createElement(STimePickerSeparator, _assignProps2({
         "ref": this.$el,
         "onClick": this.handlerClick
       }, _ref2));

package/lib/es6/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["React","createComponent","Component","sstyled","Root","Input","Box","Hours","Minutes","Format","MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","getHoursProps","disablePortal","onClick","handleMeridiemClick","undefined","_lastMeridiem","STimePicker","styles","Children","style","defaultValue","children","Separator","createRef","$el","current","focus","handlerClick","TimePicker"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n  AM: 'PM',\n  PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nexport function nextInput(element) {\n  do {\n    element = element.nextElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function prevInput(element) {\n  do {\n    element = element.previousElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n  const number = Number.parseInt(value);\n  return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n  value = String(value);\n  if (value.length === 1) return `0${value}`;\n  return String(value);\n}\n\nexport function meridiemByHours(hours) {\n  return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n  if (Number.isNaN(nHours)) return hours;\n\n  // if not (HH:00)\n  if (nHours === 0) return 12; // 0 => 12 PM\n  if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n  return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n  if (Number.isNaN(nHours)) return hours;\n\n  if (meridiem === 'AM') {\n    if (nHours === 12) return 0; // 12 AM => 0\n  }\n\n  if (meridiem === 'PM') {\n    if (nHours < 12) return nHours + 12; // 10 PM => 22\n  }\n\n  return hours;\n}\n\nclass TimePickerRoot extends Component {\n  static displayName = 'TimePicker';\n  static style = style;\n  static defaultProps = ({ is12Hour }) => ({\n    defaultValue: '',\n    size: 'm',\n    children: (\n      <>\n        <TimePicker.Hours />\n        <TimePicker.Separator />\n        <TimePicker.Minutes />\n        {is12Hour && <TimePicker.Format />}\n      </>\n    ),\n  });\n\n  _lastMeridiem = 'AM'; // default AM\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  get value() {\n    const { value } = this.asProps;\n    return value === null || value === undefined ? ':' : value;\n  }\n\n  get meridiem() {\n    const { value } = this.asProps;\n    const [hours = ''] = value.split(':');\n\n    const nHours = intOrDefault(hours, NaN);\n\n    if (!Number.isNaN(nHours)) {\n      this._lastMeridiem = meridiemByHours(nHours);\n    }\n\n    return this._lastMeridiem;\n  }\n\n  valueToTime(value) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = formatHoursTo12(hours);\n\n    hours = withLeadingZero(hours);\n    minutes = withLeadingZero(minutes);\n\n    return [hours, minutes];\n  }\n\n  timeToValue(time, meridiem) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = time;\n\n    hours = intOrDefault(hours, hours); // 03 => 3\n    minutes = intOrDefault(minutes, minutes); // MM => MM\n\n    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n    return `${hours}:${minutes}`;\n  }\n\n  handleValueChange = (value, field, event) => {\n    const { is12Hour } = this.asProps;\n    const { meridiem } = this;\n\n    let time;\n    if (field) {\n      time = this.value.split(':');\n      time[MAP_FIELD_TO_TIME[field]] = value;\n    } else {\n      time = value.split(':');\n    }\n\n    let [hours = '', minutes = ''] = time;\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], meridiem);\n    this.handlers.value(value, event);\n  };\n\n  handleMeridiemClick = (event) => {\n    const { is12Hour } = this.asProps;\n    let { value, meridiem } = this;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n    this.handlers.value(value, event);\n  };\n\n  getHoursProps = () => {\n    const { is12Hour, size, disabled } = this.asProps;\n    const time = this.valueToTime(this.value);\n\n    return {\n      time,\n      size,\n      is12Hour,\n      disabled,\n      $onValueChange: this.handleValueChange,\n    };\n  };\n\n  getMinutesProps = () => {\n    return this.getHoursProps();\n  };\n\n  getFormatProps = () => {\n    const { size, disabled, disablePortal } = this.asProps;\n    return {\n      size,\n      disabled,\n      disablePortal,\n      meridiem: this.meridiem,\n      onClick: this.handleMeridiemClick,\n    };\n  };\n\n  render() {\n    const STimePicker = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <STimePicker render={Input}>\n        <Children />\n      </STimePicker>,\n    );\n  }\n}\n\nclass Separator extends Component {\n  static defaultProps = {\n    children: ':',\n  };\n\n  $el = React.createRef();\n\n  handlerClick = () => {\n    if (this.$el.current) {\n      prevInput(this.$el.current)?.focus();\n    }\n  };\n\n  render() {\n    return <Root render={Box} ref={this.$el} onClick={this.handlerClick} />;\n  }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n  Hours,\n  Minutes,\n  Separator,\n  Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}
+{"version":3,"sources":["../../src/TimePicker.jsx"],"names":["React","createComponent","Component","sstyled","Root","Input","Box","Hours","Minutes","Format","MAP_MERIDIEM","AM","PM","MAP_FIELD_TO_TIME","hours","minutes","nextInput","element","nextElementSibling","tagName","prevInput","previousElementSibling","intOrDefault","value","def","number","Number","parseInt","isNaN","withLeadingZero","String","length","meridiemByHours","formatHoursTo12","nHours","NaN","formatHoursTo24","meridiem","TimePickerRoot","field","event","is12Hour","asProps","time","split","timeToValue","handlers","size","disabled","valueToTime","$onValueChange","handleValueChange","_getHoursAndMinutesProps","undefined","_lastMeridiem","disablePortal","onClick","handleMeridiemClick","STimePicker","styles","Children","style","defaultValue","children","Separator","createRef","$el","current","focus","STimePickerSeparator","handlerClick","TimePicker"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Input from '@semcore/input';\nimport { Box } from '@semcore/flex-box';\nimport { Hours, Minutes } from './PickerInput';\nimport Format from './PickerFormat';\n\nimport style from './style/time-picker.shadow.css';\n\nconst MAP_MERIDIEM = {\n  AM: 'PM',\n  PM: 'AM',\n};\nconst MAP_FIELD_TO_TIME = {\n  hours: 0,\n  minutes: 1,\n};\n\nexport function nextInput(element) {\n  do {\n    element = element.nextElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function prevInput(element) {\n  do {\n    element = element.previousElementSibling;\n  } while (element && element.tagName !== 'INPUT');\n  return element;\n}\n\nexport function intOrDefault(value, def = 0) {\n  const number = Number.parseInt(value);\n  return Number.isNaN(number) ? def : number;\n}\n\nexport function withLeadingZero(value) {\n  value = String(value);\n  if (value.length === 1) return `0${value}`;\n  return String(value);\n}\n\nexport function meridiemByHours(hours) {\n  return hours >= 12 ? 'PM' : 'AM';\n}\n\nexport function formatHoursTo12(hours /* hours by 24 */) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n  if (Number.isNaN(nHours)) return hours;\n\n  // if not (HH:00)\n  if (nHours === 0) return 12; // 0 => 12 PM\n  if (nHours > 12) return nHours - 12; // 22 => 12 PM\n\n  return hours;\n}\n\nexport function formatHoursTo24(hours /* hours by 12 */, meridiem) {\n  const nHours = intOrDefault(hours, NaN); // if not (:00)\n\n  if (Number.isNaN(nHours)) return hours;\n\n  if (meridiem === 'AM') {\n    if (nHours === 12) return 0; // 12 AM => 0\n  }\n\n  if (meridiem === 'PM') {\n    if (nHours < 12) return nHours + 12; // 10 PM => 22\n  }\n\n  return hours;\n}\n\nclass TimePickerRoot extends Component {\n  static displayName = 'TimePicker';\n  static style = style;\n  static defaultProps = ({ is12Hour }) => ({\n    defaultValue: '',\n    size: 'm',\n    children: (\n      <>\n        <TimePicker.Hours />\n        <TimePicker.Separator />\n        <TimePicker.Minutes />\n        {is12Hour && <TimePicker.Format />}\n      </>\n    ),\n  });\n\n  _lastMeridiem = 'AM'; // default AM\n\n  uncontrolledProps() {\n    return {\n      value: null,\n    };\n  }\n\n  get value() {\n    const { value } = this.asProps;\n    return value === null || value === undefined ? ':' : value;\n  }\n\n  get meridiem() {\n    const { value } = this.asProps;\n    const [hours = ''] = value.split(':');\n\n    const nHours = intOrDefault(hours, NaN);\n\n    if (!Number.isNaN(nHours)) {\n      this._lastMeridiem = meridiemByHours(nHours);\n    }\n\n    return this._lastMeridiem;\n  }\n\n  valueToTime(value) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = formatHoursTo12(hours);\n\n    hours = withLeadingZero(hours);\n    minutes = withLeadingZero(minutes);\n\n    return [hours, minutes];\n  }\n\n  timeToValue(time, meridiem) {\n    const { is12Hour } = this.asProps;\n    let [hours = '', minutes = ''] = time;\n\n    hours = intOrDefault(hours, hours); // 03 => 3\n    minutes = intOrDefault(minutes, minutes); // MM => MM\n\n    if (is12Hour) hours = formatHoursTo24(hours, meridiem); // 12 PM -> 0\n\n    return `${hours}:${minutes}`;\n  }\n\n  handleValueChange = (value, field, event) => {\n    const { is12Hour } = this.asProps;\n    const { meridiem } = this;\n\n    let time;\n    if (field) {\n      time = this.value.split(':');\n      time[MAP_FIELD_TO_TIME[field]] = value;\n    } else {\n      time = value.split(':');\n    }\n\n    let [hours = '', minutes = ''] = time;\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], meridiem);\n    this.handlers.value(value, event);\n  };\n\n  handleMeridiemClick = (event) => {\n    const { is12Hour } = this.asProps;\n    let { value, meridiem } = this;\n    let [hours = '', minutes = ''] = value.split(':');\n\n    if (is12Hour) hours = String(formatHoursTo12(hours));\n\n    value = this.timeToValue([hours, minutes], MAP_MERIDIEM[meridiem]);\n    this.handlers.value(value, event);\n  };\n\n  _getHoursAndMinutesProps = () => {\n    const { is12Hour, size, disabled } = this.asProps;\n    const time = this.valueToTime(this.value);\n\n    return {\n      time,\n      size,\n      is12Hour,\n      disabled,\n      $onValueChange: this.handleValueChange,\n    };\n  };\n\n  getHoursProps = this._getHoursAndMinutesProps;\n  getMinutesProps = this._getHoursAndMinutesProps;\n\n  getSeparatorProps() {\n    return {\n      disabled: this.asProps.disabled,\n    };\n  }\n\n  getFormatProps() {\n    const { size, disabled, disablePortal } = this.asProps;\n    return {\n      size,\n      disabled,\n      disablePortal,\n      meridiem: this.meridiem,\n      onClick: this.handleMeridiemClick,\n    };\n  }\n\n  render() {\n    const STimePicker = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <STimePicker render={Input}>\n        <Children />\n      </STimePicker>,\n    );\n  }\n}\n\nclass Separator extends Component {\n  static defaultProps = {\n    children: ':',\n  };\n\n  $el = React.createRef();\n\n  handlerClick = () => {\n    if (this.$el.current) {\n      prevInput(this.$el.current)?.focus();\n    }\n  };\n\n  render() {\n    const STimePickerSeparator = Root;\n    return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;\n  }\n}\n\nconst TimePicker = createComponent(TimePickerRoot, {\n  Hours,\n  Minutes,\n  Separator,\n  Format,\n});\n\nexport default TimePicker;\n"],"file":"TimePicker.js"}

package/lib/es6/index.d.ts

@@ -13,7 +13,7 @@ export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
   disabled?: boolean;
   /** Control size
    * @default m */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /** 12-hour time format */
   is12Hour?: boolean;
 }

package/lib/es6/style/time-picker.shadow.css

@@ -6,7 +6,7 @@ STimePicker {
 }
 
 STimePicker[disabled] {
-  color: color-mod(var(--gray20) a(30%));
+  color: color-mod(var(--gray-800) a(30%));
   cursor: default;
 }
 
@@ -21,15 +21,11 @@ SPickerInput {
 }
 
 SPickerInput[size='m'] {
-  width: 17px;
+  width: 19px;
 }
 
 SPickerInput[size='l'] {
-  width: 18px;
-}
-
-SPickerInput[size='xl'] {
-  width: 22px;
+  width: 21px;
 }
 
 SPickerFormat {
@@ -40,11 +36,12 @@ SPickerFormat {
   margin: 0 -1px 0 0;
   white-space: nowrap;
   font-family: inherit;
-  font-weight: normal;
+  font-weight: 500;
   line-height: normal;
   text-decoration: none;
   align-items: center;
-  border: 1px solid transparent;
+  border: 1px solid var(--gray-200);
+  border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
   outline: 0;
   box-shadow: none;
   cursor: pointer;
@@ -53,44 +50,32 @@ SPickerFormat {
   user-select: none;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  color: var(--gray40);
-  border-color: var(--stone);
-  background-color: color-mod(var(--stone) a(10%));
+  color: var(--gray-500);
+  background-color: color-mod(var(--gray-400) a(10%));
 
   &:hover {
-    background-color: color-mod(var(--stone) a(20%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(20%));
   }
 
   &:active,
   &[active] {
-    background-color: color-mod(var(--stone) a(30%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(30%));
   }
 }
 
 SPickerFormat[size='m'] {
-  height: 26px;
-  font-size: 12px;
-  border-radius: 0 3px 3px 0;
-}
-
-SPickerFormat[size='l'] {
-  height: 32px;
-  font-size: 14px;
-  border-radius: 0 4px 4px 0;
-}
-
-SPickerFormat[size='m'],
-SPickerFormat[size='l'] {
+  height: var(--form-control-m);
+  font-size: var(--fs-200);
   & SPickerFormatText {
     margin: 0 8px;
   }
 }
 
-SPickerFormat[size='xl'] {
-  height: 42px;
-  font-size: 16px;
-  border-radius: 0 5px 5px 0;
-
+SPickerFormat[size='l'] {
+  height: var(--form-control-l);
+  font-size: var(--fs-300);
   & SPickerFormatText {
     margin: 0 12px;
   }
@@ -100,9 +85,14 @@ SPickerFormat[disabled] {
   opacity: var(--disabled-opacity);
   cursor: default;
   pointer-events: none;
-  border-color: transparent transparent transparent var(--stone);
+  border-color: transparent transparent transparent var(--gray-200);
 }
 
 SPickerFormat[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
 }

package/lib/types/index.d.ts

@@ -13,7 +13,7 @@ export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
   disabled?: boolean;
   /** Control size
    * @default m */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /** 12-hour time format */
   is12Hour?: boolean;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/time-picker",
   "description": "SEMRush TimePicker Component",
-  "version": "2.4.16",
+  "version": "3.0.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -10,14 +10,14 @@
   "license": "MIT",
   "scripts": {
     "build": "build --source=js",
-    "test": "jest"
+    "test": "jest --no-cache"
   },
   "dependencies": {
     "@semcore/utils": "^3.15",
     "@semcore/flex-box": "^4",
     "@semcore/button": "^3",
-    "@semcore/input": "^2",
-    "@semcore/select": "^2"
+    "@semcore/input": "^3.0.0",
+    "@semcore/select": "^3.0.0"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",

package/src/PickerFormat.jsx

@@ -12,13 +12,7 @@ class TimePickerFormat extends Component {
 
     return sstyled(styles)(
       <SPickerFormat render={Box} type="button" tag="button">
-        {Children.origin ? (
-          <Children />
-        ) : (
-          <>
-            <SPickerFormatText>{meridiem}</SPickerFormatText>
-          </>
-        )}
+        {Children.origin ? <Children /> : <SPickerFormatText>{meridiem}</SPickerFormatText>}
       </SPickerFormat>,
     );
   }

package/src/PickerInput.jsx

@@ -13,7 +13,6 @@ const MAP_FIELD_TO_TIME = {
 const MAP_SIZE_SELECT = {
   m: 'm',
   l: 'l',
-  xl: 'l',
 };
 
 function getOptions(min, max, step = 1) {

package/src/TimePicker.jsx

@@ -169,7 +169,7 @@ class TimePickerRoot extends Component {
     this.handlers.value(value, event);
   };
 
-  getHoursProps = () => {
+  _getHoursAndMinutesProps = () => {
     const { is12Hour, size, disabled } = this.asProps;
     const time = this.valueToTime(this.value);
 
@@ -182,11 +182,16 @@ class TimePickerRoot extends Component {
     };
   };
 
-  getMinutesProps = () => {
-    return this.getHoursProps();
-  };
+  getHoursProps = this._getHoursAndMinutesProps;
+  getMinutesProps = this._getHoursAndMinutesProps;
 
-  getFormatProps = () => {
+  getSeparatorProps() {
+    return {
+      disabled: this.asProps.disabled,
+    };
+  }
+
+  getFormatProps() {
     const { size, disabled, disablePortal } = this.asProps;
     return {
       size,
@@ -195,7 +200,7 @@ class TimePickerRoot extends Component {
       meridiem: this.meridiem,
       onClick: this.handleMeridiemClick,
     };
-  };
+  }
 
   render() {
     const STimePicker = Root;
@@ -223,7 +228,8 @@ class Separator extends Component {
   };
 
   render() {
-    return <Root render={Box} ref={this.$el} onClick={this.handlerClick} />;
+    const STimePickerSeparator = Root;
+    return <STimePickerSeparator render={Box} ref={this.$el} onClick={this.handlerClick} />;
   }
 }
 

package/src/index.d.ts

@@ -13,7 +13,7 @@ export interface ITimePickerProps extends Omit<IInputProps, 'size'> {
   disabled?: boolean;
   /** Control size
    * @default m */
-  size?: 'm' | 'l' | 'xl';
+  size?: 'm' | 'l';
   /** 12-hour time format */
   is12Hour?: boolean;
 }

package/src/style/time-picker.shadow.css

@@ -6,7 +6,7 @@ STimePicker {
 }
 
 STimePicker[disabled] {
-  color: color-mod(var(--gray20) a(30%));
+  color: color-mod(var(--gray-800) a(30%));
   cursor: default;
 }
 
@@ -21,15 +21,11 @@ SPickerInput {
 }
 
 SPickerInput[size='m'] {
-  width: 17px;
+  width: 19px;
 }
 
 SPickerInput[size='l'] {
-  width: 18px;
-}
-
-SPickerInput[size='xl'] {
-  width: 22px;
+  width: 21px;
 }
 
 SPickerFormat {
@@ -40,11 +36,12 @@ SPickerFormat {
   margin: 0 -1px 0 0;
   white-space: nowrap;
   font-family: inherit;
-  font-weight: normal;
+  font-weight: 500;
   line-height: normal;
   text-decoration: none;
   align-items: center;
-  border: 1px solid transparent;
+  border: 1px solid var(--gray-200);
+  border-radius: 0 var(--rounded-m) var(--rounded-m) 0;
   outline: 0;
   box-shadow: none;
   cursor: pointer;
@@ -53,44 +50,32 @@ SPickerFormat {
   user-select: none;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  color: var(--gray40);
-  border-color: var(--stone);
-  background-color: color-mod(var(--stone) a(10%));
+  color: var(--gray-500);
+  background-color: color-mod(var(--gray-400) a(10%));
 
   &:hover {
-    background-color: color-mod(var(--stone) a(20%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(20%));
   }
 
   &:active,
   &[active] {
-    background-color: color-mod(var(--stone) a(30%));
+    color: var(--gray-500);
+    background-color: color-mod(var(--gray-400) a(30%));
   }
 }
 
 SPickerFormat[size='m'] {
-  height: 26px;
-  font-size: 12px;
-  border-radius: 0 3px 3px 0;
-}
-
-SPickerFormat[size='l'] {
-  height: 32px;
-  font-size: 14px;
-  border-radius: 0 4px 4px 0;
-}
-
-SPickerFormat[size='m'],
-SPickerFormat[size='l'] {
+  height: var(--form-control-m);
+  font-size: var(--fs-200);
   & SPickerFormatText {
     margin: 0 8px;
   }
 }
 
-SPickerFormat[size='xl'] {
-  height: 42px;
-  font-size: 16px;
-  border-radius: 0 5px 5px 0;
-
+SPickerFormat[size='l'] {
+  height: var(--form-control-l);
+  font-size: var(--fs-300);
   & SPickerFormatText {
     margin: 0 12px;
   }
@@ -100,9 +85,14 @@ SPickerFormat[disabled] {
   opacity: var(--disabled-opacity);
   cursor: default;
   pointer-events: none;
-  border-color: transparent transparent transparent var(--stone);
+  border-color: transparent transparent transparent var(--gray-200);
 }
 
 SPickerFormat[keyboardFocused] {
-  box-shadow: var(--keyborad-focus);
+  box-shadow: var(--keyboard-focus);
+}
+
+STimePickerSeparator[disabled] {
+  opacity: var(--disabled-opacity);
+  pointer-events: none;
 }