@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/TagSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledTagSkeleton","styled","Skeleton","omitEmotionProps","p","width","theme","lineHeight","tagPaddingVertical","sizeStyles","TagSkeleton","forwardRef","ref","rest","displayName"],"sources":["../../../src/TagSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface TagSkeletonProps\n  extends Omit<SkeletonProps, 'width'>,\n    WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 6em\n   */\n  width?: string;\n}\n\ntype StyledTagSkeletonProps = Pick<TagSkeletonProps, 'width' | 'size'>;\nconst StyledTagSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('width', 'size')\n)<StyledTagSkeletonProps>`\n  width: ${(p) => p.width};\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a tag placeholder while a user waits for the content to load.\n */\nconst TagSkeleton = forwardRef<HTMLDivElement, TagSkeletonProps>(\n  ({ width = '6em', ...rest }, ref) => (\n    <StyledTagSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nTagSkeleton.displayName = 'TagSkeleton';\n\nexport default TagSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,iBAAiB,GAAG,IAAAC,kBAAA,EACxBC,oBADwB,EAExB,IAAAC,uBAAA,EAAiB,OAAjB,EAA0B,MAA1B,CAFwB,CAAH,oHAIZ,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAT;AAAA,CAJY,EAKX,UAACD,CAAD;EAAA,OAAOA,CAAC,CAACE,KAAF,CAAQC,UAAR,GAAqBH,CAAC,CAACE,KAAF,CAAQE,kBAAR,GAA6B,CAAzD;AAAA,CALW,EAMnBC,kBANmB,CAAvB;AASA;AACA;AACA;;AACA,IAAMC,WAAW,gBAAG,IAAAC,iBAAA,EAClB,gBAA6BC,GAA7B;EAAA,sBAAGP,KAAH;EAAA,IAAGA,KAAH,2BAAW,KAAX;EAAA,IAAqBQ,IAArB;;EAAA,oBACE,gCAAC,iBAAD;IAAmB,KAAK,EAAER;EAA1B,GAAqCQ,IAArC;IAA2C,GAAG,EAAED;EAAhD,GADF;AAAA,CADkB,CAApB;AAMAF,WAAW,CAACI,WAAZ,GAA0B,aAA1B;eAEeJ,W"}
+{"version":3,"file":"index.js","names":["StyledTagSkeleton","styled","Skeleton","omitEmotionProps","p","width","theme","lineHeight","tagPaddingVertical","sizeStyles","TagSkeleton","forwardRef","ref","rest","displayName"],"sources":["../../../src/TagSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport interface TagSkeletonProps\n  extends Omit<SkeletonProps, 'width'>,\n    WithSize {\n  /**\n   * The width of the skeleton.\n   * @default 6em\n   */\n  width?: string;\n}\n\ntype StyledTagSkeletonProps = Pick<TagSkeletonProps, 'width' | 'size'>;\nconst StyledTagSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('width', 'size')\n)<StyledTagSkeletonProps>`\n  width: ${(p) => p.width};\n  height: ${(p) => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides a tag placeholder while a user waits for the content to load.\n */\nconst TagSkeleton = forwardRef<HTMLDivElement, TagSkeletonProps>(\n  ({ width = '6em', ...rest }, ref) => (\n    <StyledTagSkeleton width={width} {...rest} ref={ref} />\n  )\n);\n\nTagSkeleton.displayName = 'TagSkeleton';\n\nexport default TagSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatD,IAAMA,iBAAiB,GAAG,IAAAC,kBAAM,EAC9BC,oBAAQ,EACR,IAAAC,uBAAgB,EAAC,OAAO,EAAE,MAAM,CAAC,CAClC,oHACU,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK;AAAA,GACb,UAACD,CAAC;EAAA,OAAKA,CAAC,CAACE,KAAK,CAACC,UAAU,GAAGH,CAAC,CAACE,KAAK,CAACE,kBAAkB,GAAG,CAAC;AAAA,GAClEC,kBAAU,CACb;;AAED;AACA;AACA;AACA,IAAMC,WAAW,gBAAG,IAAAC,iBAAU,EAC5B,gBAA6BC,GAAG;EAAA,sBAA7BP,KAAK;IAALA,KAAK,2BAAG,KAAK;IAAKQ,IAAI;EAAA,oBACvB,gCAAC,iBAAiB;IAAC,KAAK,EAAER;EAAM,GAAKQ,IAAI;IAAE,GAAG,EAAED;EAAI,GAAG;AAAA,CACxD,CACF;AAEDF,WAAW,CAACI,WAAW,GAAG,aAAa;AAAC,eAEzBJ,WAAW;AAAA"}

package/dist/cjs/TextArea/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _Input = require("../Input");
-
 var _excluded = ["disabled", "size", "onChange"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var TextAreaContainer = (0, _styled["default"])(_Input.InputContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "em;\n"])), function (p) {
   return p.theme.textAreaHeight;
 });
@@ -41,18 +27,17 @@ var TextAreaField = (0, _styled["default"])(_Input.StyledInput.withComponent('te
 }, function (p) {
   return p.theme.lineHeight;
 });
+
 /**
  * The multiline input component.
  */
-
 var TextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      size = _ref.size,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    size = _ref.size,
+    _ref$onChange = _ref.onChange,
+    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(TextAreaContainer, {
     disabled: disabled,
     size: size

package/dist/cjs/TextArea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextAreaContainer","styled","InputContainer","p","theme","textAreaHeight","TextAreaField","StyledInput","withComponent","textAreaPaddingVertical","lineHeight","TextArea","forwardRef","ref","disabled","size","onChange","rest","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AAwBA,IAAMA,iBAAiB,GAAG,IAAAC,kBAAA,EAAOC,qBAAP,CAAH,2FACX,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,cAAf;AAAA,CADW,CAAvB;AAIA,IAAMC,aAAa,GAAG,IAAAL,kBAAA,EAAOM,kBAAA,CAAYC,aAAZ,CAA0B,UAA1B,CAAP,CAAH,mJACF,UAACL,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,uBAAf;AAAA,CADE,EAEC,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQK,uBAAf;AAAA,CAFD,EAGF,UAACN,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQM,UAAf;AAAA,CAHE,CAAnB;AAMA;AACA;AACA;;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAA,EACf,gBAA2DC,GAA3D;EAAA,yBAAGC,QAAH;EAAA,IAAGA,QAAH,8BAAc,KAAd;EAAA,IAAqBC,IAArB,QAAqBA,IAArB;EAAA,yBAA2BC,QAA3B;EAAA,IAA2BA,SAA3B,8BAAsC,YAAM,CAAE,CAA9C;EAAA,IAAmDC,IAAnD;;EAAA,oBACE,gCAAC,iBAAD;IAAmB,QAAQ,EAAEH,QAA7B;IAAuC,IAAI,EAAEC;EAA7C,gBACE,gCAAC,aAAD;IACE,QAAQ,EAAED,QADZ;IAEE,QAAQ,EAAE,kBAACI,CAAD;MAAA,OAAOF,SAAQ,CAACE,CAAC,CAACC,MAAF,CAASC,KAAV,EAAiBF,CAAjB,CAAf;IAAA;EAFZ,GAGMD,IAHN;IAIE,GAAG,EAAEJ;EAJP,GADF,CADF;AAAA,CADe,CAAjB;AAaAF,QAAQ,CAACU,WAAT,GAAuB,UAAvB;eAEeV,Q"}
+{"version":3,"file":"index.js","names":["TextAreaContainer","styled","InputContainer","p","theme","textAreaHeight","TextAreaField","StyledInput","withComponent","textAreaPaddingVertical","lineHeight","TextArea","forwardRef","ref","disabled","size","onChange","rest","e","target","value","displayName"],"sources":["../../../src/TextArea/index.tsx"],"sourcesContent":["import React, { ChangeEvent, forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { WithSize } from '@os-design/styles';\nimport { InputContainer, StyledInput } from '../Input';\n\ntype JsxTextAreaProps = Omit<\n  JSX.IntrinsicElements['textarea'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface TextAreaProps extends JsxTextAreaProps, WithSize {\n  /**\n   * Whether the textarea is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * The textarea value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nconst TextAreaContainer = styled(InputContainer)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\nconst TextAreaField = styled(StyledInput.withComponent('textarea'))`\n  padding-top: ${(p) => p.theme.textAreaPaddingVertical}em;\n  padding-bottom: ${(p) => p.theme.textAreaPaddingVertical}em;\n  line-height: ${(p) => p.theme.lineHeight};\n`;\n\n/**\n * The multiline input component.\n */\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ disabled = false, size, onChange = () => {}, ...rest }, ref) => (\n    <TextAreaContainer disabled={disabled} size={size}>\n      <TextAreaField\n        disabled={disabled}\n        onChange={(e) => onChange(e.target.value, e)}\n        {...rest}\n        ref={ref}\n      />\n    </TextAreaContainer>\n  )\n);\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAuD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBvD,IAAMA,iBAAiB,GAAG,IAAAC,kBAAM,EAACC,qBAAc,CAAC,2FACpC,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,cAAc;AAAA,EACxC;AAED,IAAMC,aAAa,GAAG,IAAAL,kBAAM,EAACM,kBAAW,CAACC,aAAa,CAAC,UAAU,CAAC,CAAC,mJAClD,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,uBAAuB;AAAA,GACnC,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,uBAAuB;AAAA,GACzC,UAACN,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACM,UAAU;AAAA,EACzC;;AAED;AACA;AACA;AACA,IAAMC,QAAQ,gBAAG,IAAAC,iBAAU,EACzB,gBAA2DC,GAAG;EAAA,yBAA3DC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAA,qBAAEC,QAAQ;IAARA,SAAQ,8BAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EAAA,oBACrD,gCAAC,iBAAiB;IAAC,QAAQ,EAAEH,QAAS;IAAC,IAAI,EAAEC;EAAK,gBAChD,gCAAC,aAAa;IACZ,QAAQ,EAAED,QAAS;IACnB,QAAQ,EAAE,kBAACI,CAAC;MAAA,OAAKF,SAAQ,CAACE,CAAC,CAACC,MAAM,CAACC,KAAK,EAAEF,CAAC,CAAC;IAAA;EAAC,GACzCD,IAAI;IACR,GAAG,EAAEJ;EAAI,GACT,CACgB;AAAA,CACrB,CACF;AAEDF,QAAQ,CAACU,WAAW,GAAG,UAAU;AAAC,eAEnBV,QAAQ;AAAA"}

package/dist/cjs/TextAreaSkeleton/index.js

@@ -1,37 +1,26 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _InputSkeleton = _interopRequireDefault(require("../InputSkeleton"));
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledTextAreaSkeleton = (0, _styled["default"])(_InputSkeleton["default"])(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "em;\n"])), function (p) {
   return p.theme.textAreaHeight;
 });
+
 /**
  * Provides a textarea placeholder while a user waits for the content to load.
  */
-
 var TextAreaSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react["default"].createElement(StyledTextAreaSkeleton, _extends({}, props, {
     ref: ref

package/dist/cjs/TextAreaSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledTextAreaSkeleton","styled","InputSkeleton","p","theme","textAreaHeight","TextAreaSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/TextAreaSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport InputSkeleton, { InputSkeletonProps } from '../InputSkeleton';\n\nexport type TextAreaSkeletonProps = InputSkeletonProps;\n\nconst StyledTextAreaSkeleton = styled(InputSkeleton)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\n/**\n * Provides a textarea placeholder while a user waits for the content to load.\n */\nconst TextAreaSkeleton = forwardRef<HTMLDivElement, TextAreaSkeletonProps>(\n  (props, ref) => <StyledTextAreaSkeleton {...props} ref={ref} />\n);\n\nTextAreaSkeleton.displayName = 'TextAreaSkeleton';\n\nexport default TextAreaSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,sBAAsB,GAAG,IAAAC,kBAAA,EAAOC,yBAAP,CAAH,2FAChB,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,cAAf;AAAA,CADgB,CAA5B;AAIA;AACA;AACA;;AACA,IAAMC,gBAAgB,gBAAG,IAAAC,iBAAA,EACvB,UAACC,KAAD,EAAQC,GAAR;EAAA,oBAAgB,gCAAC,sBAAD,eAA4BD,KAA5B;IAAmC,GAAG,EAAEC;EAAxC,GAAhB;AAAA,CADuB,CAAzB;AAIAH,gBAAgB,CAACI,WAAjB,GAA+B,kBAA/B;eAEeJ,gB"}
+{"version":3,"file":"index.js","names":["StyledTextAreaSkeleton","styled","InputSkeleton","p","theme","textAreaHeight","TextAreaSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/TextAreaSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport InputSkeleton, { InputSkeletonProps } from '../InputSkeleton';\n\nexport type TextAreaSkeletonProps = InputSkeletonProps;\n\nconst StyledTextAreaSkeleton = styled(InputSkeleton)`\n  height: ${(p) => p.theme.textAreaHeight}em;\n`;\n\n/**\n * Provides a textarea placeholder while a user waits for the content to load.\n */\nconst TextAreaSkeleton = forwardRef<HTMLDivElement, TextAreaSkeletonProps>(\n  (props, ref) => <StyledTextAreaSkeleton {...props} ref={ref} />\n);\n\nTextAreaSkeleton.displayName = 'TextAreaSkeleton';\n\nexport default TextAreaSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAAqE;AAAA;AAAA;AAAA;AAAA;AAAA;AAIrE,IAAMA,sBAAsB,GAAG,IAAAC,kBAAM,EAACC,yBAAa,CAAC,2FACxC,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,cAAc;AAAA,EACxC;;AAED;AACA;AACA;AACA,IAAMC,gBAAgB,gBAAG,IAAAC,iBAAU,EACjC,UAACC,KAAK,EAAEC,GAAG;EAAA,oBAAK,gCAAC,sBAAsB,eAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,EAChE;AAEDH,gBAAgB,CAACI,WAAW,GAAG,kBAAkB;AAAC,eAEnCJ,gBAAgB;AAAA"}

package/dist/cjs/ThemeSwitcher/index.js

@@ -1,52 +1,36 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _theming = require("@os-design/theming");
-
 var _icons = require("@os-design/icons");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _excluded = ["onClick"];
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 /**
  * The button to switch the current theme.
  */
 var ThemeSwitcher = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _theming.useTheme)(),
-      activeTheme = _useTheme.activeTheme,
-      setActiveTheme = _useTheme.setActiveTheme;
-
+    activeTheme = _useTheme.activeTheme,
+    setActiveTheme = _useTheme.setActiveTheme;
   return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
     type: "ghost",
     wide: "never",
     onClick: function onClick(e) {
       setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');
-
       _onClick(e);
     },
     role: "switch",

package/dist/cjs/ThemeSwitcher/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ThemeSwitcher","forwardRef","ref","onClick","rest","useTheme","activeTheme","setActiveTheme","e","displayName"],"sources":["../../../src/ThemeSwitcher/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useTheme } from '@os-design/theming';\nimport { Moon, Sun } from '@os-design/icons';\nimport Button, { ButtonProps } from '../Button';\n\nexport type ThemeSwitcherProps = ButtonProps;\n\n/**\n * The button to switch the current theme.\n */\nconst ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  ({ onClick = () => {}, ...rest }, ref) => {\n    const { activeTheme, setActiveTheme } = useTheme();\n\n    return (\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={(e) => {\n          setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');\n          onClick(e);\n        }}\n        role='switch'\n        aria-checked={activeTheme === 'dark'}\n        aria-label='Dark theme'\n        {...rest}\n        ref={ref}\n      >\n        {activeTheme === 'light' ? <Moon /> : <Sun />}\n      </Button>\n    );\n  }\n);\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport default ThemeSwitcher;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAIA;AACA;AACA;AACA,IAAMA,aAAa,gBAAG,IAAAC,iBAAA,EACpB,gBAAkCC,GAAlC,EAA0C;EAAA,wBAAvCC,OAAuC;EAAA,IAAvCA,QAAuC,6BAA7B,YAAM,CAAE,CAAqB;EAAA,IAAhBC,IAAgB;;EACxC,gBAAwC,IAAAC,iBAAA,GAAxC;EAAA,IAAQC,WAAR,aAAQA,WAAR;EAAA,IAAqBC,cAArB,aAAqBA,cAArB;;EAEA,oBACE,gCAAC,kBAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE,iBAACC,CAAD,EAAO;MACdD,cAAc,CAACD,WAAW,KAAK,OAAhB,GAA0B,MAA1B,GAAmC,OAApC,CAAd;;MACAH,QAAO,CAACK,CAAD,CAAP;IACD,CANH;IAOE,IAAI,EAAC,QAPP;IAQE,gBAAcF,WAAW,KAAK,MARhC;IASE,cAAW;EATb,GAUMF,IAVN;IAWE,GAAG,EAAEF;EAXP,IAaGI,WAAW,KAAK,OAAhB,gBAA0B,gCAAC,WAAD,OAA1B,gBAAqC,gCAAC,UAAD,OAbxC,CADF;AAiBD,CArBmB,CAAtB;AAwBAN,aAAa,CAACS,WAAd,GAA4B,eAA5B;eAEeT,a"}
+{"version":3,"file":"index.js","names":["ThemeSwitcher","forwardRef","ref","onClick","rest","useTheme","activeTheme","setActiveTheme","e","displayName"],"sources":["../../../src/ThemeSwitcher/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useTheme } from '@os-design/theming';\nimport { Moon, Sun } from '@os-design/icons';\nimport Button, { ButtonProps } from '../Button';\n\nexport type ThemeSwitcherProps = ButtonProps;\n\n/**\n * The button to switch the current theme.\n */\nconst ThemeSwitcher = forwardRef<HTMLButtonElement, ThemeSwitcherProps>(\n  ({ onClick = () => {}, ...rest }, ref) => {\n    const { activeTheme, setActiveTheme } = useTheme();\n\n    return (\n      <Button\n        type='ghost'\n        wide='never'\n        onClick={(e) => {\n          setActiveTheme(activeTheme === 'light' ? 'dark' : 'light');\n          onClick(e);\n        }}\n        role='switch'\n        aria-checked={activeTheme === 'dark'}\n        aria-label='Dark theme'\n        {...rest}\n        ref={ref}\n      >\n        {activeTheme === 'light' ? <Moon /> : <Sun />}\n      </Button>\n    );\n  }\n);\n\nThemeSwitcher.displayName = 'ThemeSwitcher';\n\nexport default ThemeSwitcher;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAAgD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIhD;AACA;AACA;AACA,IAAMA,aAAa,gBAAG,IAAAC,iBAAU,EAC9B,gBAAkCC,GAAG,EAAK;EAAA,wBAAvCC,OAAO;IAAPA,QAAO,6BAAG,YAAM,CAAC,CAAC;IAAKC,IAAI;EAC5B,gBAAwC,IAAAC,iBAAQ,GAAE;IAA1CC,WAAW,aAAXA,WAAW;IAAEC,cAAc,aAAdA,cAAc;EAEnC,oBACE,gCAAC,kBAAM;IACL,IAAI,EAAC,OAAO;IACZ,IAAI,EAAC,OAAO;IACZ,OAAO,EAAE,iBAACC,CAAC,EAAK;MACdD,cAAc,CAACD,WAAW,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;MAC1DH,QAAO,CAACK,CAAC,CAAC;IACZ,CAAE;IACF,IAAI,EAAC,QAAQ;IACb,gBAAcF,WAAW,KAAK,MAAO;IACrC,cAAW;EAAY,GACnBF,IAAI;IACR,GAAG,EAAEF;EAAI,IAERI,WAAW,KAAK,OAAO,gBAAG,gCAAC,WAAI,OAAG,gBAAG,gCAAC,UAAG,OAAG,CACtC;AAEb,CAAC,CACF;AAEDN,aAAa,CAACS,WAAW,GAAG,eAAe;AAAC,eAE7BT,aAAa;AAAA"}

package/dist/cjs/TimePicker/index.js

@@ -0,0 +1,119 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _timePickerUtils = require("@os-design/time-picker-utils");
+var _utils = require("@os-design/utils");
+var _react = _interopRequireWildcard(require("react"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _excluded = ["value", "defaultValue", "onChange", "onSelect"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * The component to choose a time.
+ */
+var TimePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$onSelect = _ref.onSelect,
+    _onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
+    _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
+    inputRef = _useForwardedRef2[0],
+    mergedInputRef = _useForwardedRef2[1];
+  var _useForwardedState = (0, _utils.useForwardedState)({
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
+    forwardedValue = _useForwardedState2[0],
+    setForwardedValue = _useForwardedState2[1];
+  var _useState = (0, _react.useState)({
+      start: 0,
+      end: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
+
+  // Update the selection
+  (0, _react.useEffect)(function () {
+    if (!inputRef.current) return;
+    inputRef.current.setSelectionRange(selection.start, selection.end);
+  }, [inputRef, selection]);
+  var time = (0, _react.useMemo)(function () {
+    if (!forwardedValue) return '00:00';
+    var hour = forwardedValue.getHours().toString().padStart(2, '0');
+    var minute = forwardedValue.getMinutes().toString().padStart(2, '0');
+    return "".concat(hour, ":").concat(minute);
+  }, [forwardedValue]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var nextCaret = selection.start;
+    if (e.key === 'ArrowUp' || e.key === 'ArrowLeft' && e.metaKey) {
+      nextCaret = 0;
+    } else if (e.key === 'ArrowDown' || e.key === 'ArrowRight' && e.metaKey) {
+      nextCaret = 5;
+    } else if (e.key === 'ArrowLeft') {
+      nextCaret = selection.start > 0 ? selection.start - 1 : 0;
+    } else if (e.key === 'ArrowRight') {
+      nextCaret = selection.start < 5 ? selection.start + 1 : 5;
+    } else if (e.key === 'Backspace') {
+      setForwardedValue((0, _timePickerUtils.timeToDate)('00:00'));
+      nextCaret = 0;
+    } else if ((0, _timePickerUtils.isDigitKey)(e.key)) {
+      var pos = selection.start === 2 ? 3 : selection.start;
+      if (pos === 5) pos = 0;
+      var nextTime = (0, _timePickerUtils.replaceChar)(time, pos, e.key);
+      setForwardedValue((0, _timePickerUtils.timeToDate)(nextTime));
+      nextCaret = pos < 5 ? pos + 1 : 5;
+    }
+    setSelection({
+      start: nextCaret,
+      end: nextCaret
+    });
+    e.preventDefault();
+  }, [selection.start, setForwardedValue, time]);
+  return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
+    type: "text",
+    inputMode: "decimal",
+    role: "spinbutton",
+    minLength: 5,
+    maxLength: 5,
+    value: time,
+    onSelect: function onSelect(e) {
+      // Update the selection state.
+      var _e$currentTarget = e.currentTarget,
+        selectionStart = _e$currentTarget.selectionStart,
+        selectionEnd = _e$currentTarget.selectionEnd;
+      setSelection({
+        start: selectionStart || 0,
+        end: selectionEnd || 0
+      });
+      _onSelect(e);
+    },
+    onKeyDown: onKeyDown
+  }, rest, {
+    ref: mergedInputRef
+  }));
+});
+TimePicker.displayName = 'TimePicker';
+var _default = TimePicker;
+exports["default"] = _default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/TimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TimePicker","forwardRef","ref","value","defaultValue","onChange","onSelect","rest","useForwardedRef","inputRef","mergedInputRef","useForwardedState","forwardedValue","setForwardedValue","useState","start","end","selection","setSelection","useEffect","current","setSelectionRange","time","useMemo","hour","getHours","toString","padStart","minute","getMinutes","onKeyDown","useCallback","e","nextCaret","key","metaKey","timeToDate","isDigitKey","pos","nextTime","replaceChar","preventDefault","currentTarget","selectionStart","selectionEnd","displayName"],"sources":["../../../src/TimePicker/index.tsx"],"sourcesContent":["import {\n  isDigitKey,\n  replaceChar,\n  timeToDate,\n} from '@os-design/time-picker-utils';\nimport { useForwardedRef, useForwardedState } from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport Input, { InputProps } from '../Input';\n\nexport interface TimePickerProps\n  extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onChange'> {\n  /**\n   * The selected date.\n   * @default undefined\n   */\n  value?: Date;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: Date;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: Date) => void;\n}\n\ninterface Selection {\n  start: number;\n  end: number;\n}\n\n/**\n * The component to choose a time.\n */\nconst TimePicker = forwardRef<HTMLInputElement, TimePickerProps>(\n  (\n    { value, defaultValue, onChange = () => {}, onSelect = () => {}, ...rest },\n    ref\n  ) => {\n    const [inputRef, mergedInputRef] = useForwardedRef(ref);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n    const [selection, setSelection] = useState<Selection>({ start: 0, end: 0 });\n\n    // Update the selection\n    useEffect(() => {\n      if (!inputRef.current) return;\n      inputRef.current.setSelectionRange(selection.start, selection.end);\n    }, [inputRef, selection]);\n\n    const time = useMemo(() => {\n      if (!forwardedValue) return '00:00';\n      const hour = forwardedValue.getHours().toString().padStart(2, '0');\n      const minute = forwardedValue.getMinutes().toString().padStart(2, '0');\n      return `${hour}:${minute}`;\n    }, [forwardedValue]);\n\n    const onKeyDown = useCallback(\n      (e) => {\n        let nextCaret = selection.start;\n        if (e.key === 'ArrowUp' || (e.key === 'ArrowLeft' && e.metaKey)) {\n          nextCaret = 0;\n        } else if (\n          e.key === 'ArrowDown' ||\n          (e.key === 'ArrowRight' && e.metaKey)\n        ) {\n          nextCaret = 5;\n        } else if (e.key === 'ArrowLeft') {\n          nextCaret = selection.start > 0 ? selection.start - 1 : 0;\n        } else if (e.key === 'ArrowRight') {\n          nextCaret = selection.start < 5 ? selection.start + 1 : 5;\n        } else if (e.key === 'Backspace') {\n          setForwardedValue(timeToDate('00:00'));\n          nextCaret = 0;\n        } else if (isDigitKey(e.key)) {\n          let pos = selection.start === 2 ? 3 : selection.start;\n          if (pos === 5) pos = 0;\n          const nextTime = replaceChar(time, pos, e.key);\n          setForwardedValue(timeToDate(nextTime));\n          nextCaret = pos < 5 ? pos + 1 : 5;\n        }\n        setSelection({ start: nextCaret, end: nextCaret });\n        e.preventDefault();\n      },\n      [selection.start, setForwardedValue, time]\n    );\n\n    return (\n      <Input\n        type='text'\n        inputMode='decimal'\n        role='spinbutton'\n        minLength={5}\n        maxLength={5}\n        value={time}\n        onSelect={(e) => {\n          // Update the selection state.\n          const { selectionStart, selectionEnd } = e.currentTarget;\n          setSelection({ start: selectionStart || 0, end: selectionEnd || 0 });\n          onSelect(e);\n        }}\n        onKeyDown={onKeyDown}\n        {...rest}\n        ref={mergedInputRef}\n      />\n    );\n  }\n);\n\nTimePicker.displayName = 'TimePicker';\n\nexport default TimePicker;\n"],"mappings":"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"}

package/dist/cjs/Video/index.js

@@ -1,46 +1,30 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _excluded = ["id"];
-
 var _templateObject, _templateObject2;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-bottom: 56.25%; // 16:9\n  height: 0;\n"])));
-
 var IFrame = _styled["default"].iframe(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+
 /**
  * The video player.
  */
-
-
 var Video = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var id = _ref.id,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(IFrame, _extends({
     frameBorder: 0,
     allow: "clipboard-write; autoplay",

package/dist/cjs/Video/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","div","IFrame","iframe","Video","forwardRef","ref","id","rest","displayName"],"sources":["../../../src/Video/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\n\ntype JsxIFrameProps = Omit<JSX.IntrinsicElements['iframe'], 'ref'>;\nexport type VideoProps = JsxIFrameProps;\n\nconst Container = styled.div`\n  position: relative;\n  padding-bottom: 56.25%; // 16:9\n  height: 0;\n`;\n\nconst IFrame = styled.iframe`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n/**\n * The video player.\n */\nconst Video = forwardRef<HTMLIFrameElement, VideoProps>(\n  ({ id, ...rest }, ref) => (\n    <Container>\n      <IFrame\n        frameBorder={0}\n        allow='clipboard-write; autoplay'\n        allowFullScreen\n        {...rest}\n        ref={ref}\n      />\n    </Container>\n  )\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAGC,kBAAA,CAAOC,GAAV,+IAAf;;AAMA,IAAMC,MAAM,GAAGF,kBAAA,CAAOG,MAAV,wJAAZ;AAQA;AACA;AACA;;;AACA,IAAMC,KAAK,gBAAG,IAAAC,iBAAA,EACZ,gBAAkBC,GAAlB;EAAA,IAAGC,EAAH,QAAGA,EAAH;EAAA,IAAUC,IAAV;;EAAA,oBACE,gCAAC,SAAD,qBACE,gCAAC,MAAD;IACE,WAAW,EAAE,CADf;IAEE,KAAK,EAAC,2BAFR;IAGE,eAAe;EAHjB,GAIMA,IAJN;IAKE,GAAG,EAAEF;EALP,GADF,CADF;AAAA,CADY,CAAd;AAcAF,KAAK,CAACK,WAAN,GAAoB,OAApB;eAEeL,K"}
+{"version":3,"file":"index.js","names":["Container","styled","div","IFrame","iframe","Video","forwardRef","ref","id","rest","displayName"],"sources":["../../../src/Video/index.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\n\ntype JsxIFrameProps = Omit<JSX.IntrinsicElements['iframe'], 'ref'>;\nexport type VideoProps = JsxIFrameProps;\n\nconst Container = styled.div`\n  position: relative;\n  padding-bottom: 56.25%; // 16:9\n  height: 0;\n`;\n\nconst IFrame = styled.iframe`\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n`;\n\n/**\n * The video player.\n */\nconst Video = forwardRef<HTMLIFrameElement, VideoProps>(\n  ({ id, ...rest }, ref) => (\n    <Container>\n      <IFrame\n        frameBorder={0}\n        allow='clipboard-write; autoplay'\n        allowFullScreen\n        {...rest}\n        ref={ref}\n      />\n    </Container>\n  )\n);\n\nVideo.displayName = 'Video';\n\nexport default Video;\n"],"mappings":";;;;;;;AAAA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKrC,IAAMA,SAAS,GAAGC,kBAAM,CAACC,GAAG,+IAI3B;AAED,IAAMC,MAAM,GAAGF,kBAAM,CAACG,MAAM,wJAM3B;;AAED;AACA;AACA;AACA,IAAMC,KAAK,gBAAG,IAAAC,iBAAU,EACtB,gBAAkBC,GAAG;EAAA,IAAlBC,EAAE,QAAFA,EAAE;IAAKC,IAAI;EAAA,oBACZ,gCAAC,SAAS,qBACR,gCAAC,MAAM;IACL,WAAW,EAAE,CAAE;IACf,KAAK,EAAC,2BAA2B;IACjC,eAAe;EAAA,GACXA,IAAI;IACR,GAAG,EAAEF;EAAI,GACT,CACQ;AAAA,CACb,CACF;AAEDF,KAAK,CAACK,WAAW,GAAG,OAAO;AAAC,eAEbL,KAAK;AAAA"}