@os-design/core 1.0.243 → 1.0.245

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/Badge/index.js +16 -12
  2. package/dist/cjs/Badge/index.js.map +1 -1
  3. package/dist/esm/Badge/index.js +16 -1
  4. package/dist/esm/Badge/index.js.map +1 -1
  5. package/dist/types/Badge/index.d.ts.map +1 -1
  6. package/package.json +3 -3
  7. package/src/Badge/index.tsx +17 -1
package/dist/cjs/Badge/index.js CHANGED
@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports["default"] = void 0;
8
+ var _react = require("@emotion/react");
8
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
9
10
  var _styles = require("@os-design/styles");
10
11
  var _theming = require("@os-design/theming");
11
12
  var _utils = require("@os-design/utils");
12
- var _react = _interopRequireWildcard(require("react"));
13
+ var _react2 = _interopRequireWildcard(require("react"));
13
14
  var _excluded = ["count", "max", "offset", "size", "children"];
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
15
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
15
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
17
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -25,10 +26,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
25
26
  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; }
26
27
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
27
28
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
28
- var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
29
+ var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n"])));
29
30
  var HEIGHT_EM = 1.5;
30
31
  var Sized = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n"])), _styles.sizeStyles);
31
- var Value = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', 'right'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n right: ", ";\n transform: translate(50%, -50%);\n\n height: ", "em;\n min-width: ", "em;\n padding: 0 0.3em;\n border-radius: ", "em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n font-size: ", "em;\n font-weight: 500;\n line-height: 1;\n"])), function (p) {
32
+ var scaleInCenter = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1) translate(50%, -50%);\n opacity: 1;\n }\n"])));
33
+ var Value = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', 'right'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n right: ", ";\n transform: translate(50%, -50%);\n\n height: ", "em;\n min-width: ", "em;\n padding: 0 0.3em;\n border-radius: ", "em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n color: ", ";\n border: 1px solid ", ";\n\n font-size: ", "em;\n font-weight: 500;\n line-height: 1;\n\n animation: ", " ", "ms\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n"])), function (p) {
32
34
  return p.top;
33
35
  }, function (p) {
34
36
  return p.right;
@@ -40,15 +42,17 @@ var Value = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', '
40
42
  return (0, _theming.clr)(p.theme.colorBg);
41
43
  }, function (p) {
42
44
  return p.theme.sizes.small;
45
+ }, scaleInCenter, function (p) {
46
+ return p.theme.transitionDelay;
43
47
  });
44
- var Plus = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", "em;\n padding-bottom: 2px;\n"])), function (p) {
48
+ var Plus = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: ", "em;\n padding-bottom: 2px;\n"])), function (p) {
45
49
  return p.theme.sizes.small;
46
50
  });
47
51
 
48
52
  /**
49
53
  * The number shown in the corner. Used to show the number of notifications.
50
54
  */
51
- var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
55
+ var Badge = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
52
56
  var _ref$count = _ref.count,
53
57
  count = _ref$count === void 0 ? 0 : _ref$count,
54
58
  _ref$max = _ref.max,
@@ -59,20 +63,20 @@ var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
59
63
  size = _ref$size === void 0 ? '1em' : _ref$size,
60
64
  children = _ref.children,
61
65
  rest = _objectWithoutProperties(_ref, _excluded);
62
- var value = (0, _react.useMemo)(function () {
63
- return count > max ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, max, /*#__PURE__*/_react["default"].createElement(Plus, null, "+")) : count;
66
+ var value = (0, _react2.useMemo)(function () {
67
+ return count > max ? /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, max, /*#__PURE__*/_react2["default"].createElement(Plus, null, "+")) : count;
64
68
  }, [count, max]);
65
- var _useMemo = (0, _react.useMemo)(function () {
69
+ var _useMemo = (0, _react2.useMemo)(function () {
66
70
  return Array.isArray(offset) ? offset : [offset, offset];
67
71
  }, [offset]),
68
72
  _useMemo2 = _slicedToArray(_useMemo, 2),
69
73
  top = _useMemo2[0],
70
74
  right = _useMemo2[1];
71
- return value === 0 ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
75
+ return count === 0 ? children : /*#__PURE__*/_react2["default"].createElement(Container, _extends({}, rest, {
72
76
  ref: ref
73
- }), children, /*#__PURE__*/_react["default"].createElement(Sized, {
77
+ }), children, /*#__PURE__*/_react2["default"].createElement(Sized, {
74
78
  size: size
75
- }, /*#__PURE__*/_react["default"].createElement(Value, {
79
+ }, /*#__PURE__*/_react2["default"].createElement(Value, {
76
80
  top: top,
77
81
  right: right
78
82
  }, value)));
package/dist/cjs/Badge/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_utils","_react","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","HEIGHT_EM","Sized","omitEmotionProps","sizeStyles","Value","p","top","right","clr","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","forwardRef","_ref","ref","_ref$count","count","_ref$max","max","_ref$offset","offset","_ref$size","size","children","rest","useMemo","createElement","Fragment","_useMemo","_useMemo2","displayName","_default","exports"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default 0\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n ref\n ) => {\n const value = useMemo(\n () =>\n count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n ),\n [count, max]\n );\n\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return value === 0 ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n <Sized size={size}>\n <Value top={top} right={right}>\n {value}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_react","require","_styled","_interopRequireDefault","_styles","_theming","_utils","_react2","_interopRequireWildcard","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","prototype","apply","_slicedToArray","arr","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","len","arr2","l","Symbol","iterator","f","next","done","push","value","isArray","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","freeze","defineProperties","Container","styled","div","HEIGHT_EM","Sized","omitEmotionProps","sizeStyles","scaleInCenter","keyframes","Value","p","top","right","clr","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","transitionDelay","Plus","Badge","forwardRef","_ref","ref","_ref$count","count","_ref$max","max","_ref$offset","offset","_ref$size","size","children","rest","useMemo","createElement","Fragment","_useMemo","_useMemo2","displayName","_default","exports"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default 0\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst scaleInCenter = keyframes`\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1) translate(50%, -50%);\n opacity: 1;\n }\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n\n animation: ${scaleInCenter} ${(p) => p.theme.transitionDelay}ms\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n ref\n ) => {\n const value = useMemo(\n () =>\n count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n ),\n [count, max]\n );\n\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return count === 0 ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n <Sized size={size}>\n <Value top={top} right={right}>\n {value}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}
package/dist/esm/Badge/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  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); }
2
+ import { keyframes } from '@emotion/react';
2
3
  import styled from '@emotion/styled';
3
4
  import { sizeStyles } from '@os-design/styles';
4
5
  import { clr } from '@os-design/theming';
@@ -6,11 +7,22 @@ import { omitEmotionProps } from '@os-design/utils';
6
7
  import React, { forwardRef, useMemo } from 'react';
7
8
  const Container = styled.div`
8
9
  position: relative;
10
+ display: flex;
9
11
  `;
10
12
  const HEIGHT_EM = 1.5;
11
13
  const Sized = styled('div', omitEmotionProps('size'))`
12
14
  ${sizeStyles};
13
15
  `;
16
+ const scaleInCenter = keyframes`
17
+ from {
18
+ transform: scale(0);
19
+ opacity: 0;
20
+ }
21
+ to {
22
+ transform: scale(1) translate(50%, -50%);
23
+ opacity: 1;
24
+ }
25
+ `;
14
26
  const Value = styled('div', omitEmotionProps('top', 'right'))`
15
27
  position: absolute;
16
28
  top: ${p => p.top};
@@ -34,6 +46,9 @@ const Value = styled('div', omitEmotionProps('top', 'right'))`
34
46
  font-size: ${p => p.theme.sizes.small}em;
35
47
  font-weight: 500;
36
48
  line-height: 1;
49
+
50
+ animation: ${scaleInCenter} ${p => p.theme.transitionDelay}ms
51
+ cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
37
52
  `;
38
53
  const Plus = styled.div`
39
54
  font-size: ${p => p.theme.sizes.small}em;
@@ -53,7 +68,7 @@ const Badge = /*#__PURE__*/forwardRef(({
53
68
  }, ref) => {
54
69
  const value = useMemo(() => count > max ? /*#__PURE__*/React.createElement(React.Fragment, null, max, /*#__PURE__*/React.createElement(Plus, null, "+")) : count, [count, max]);
55
70
  const [top, right] = useMemo(() => Array.isArray(offset) ? offset : [offset, offset], [offset]);
56
- return value === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
71
+ return count === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
57
72
  ref: ref
58
73
  }), children, /*#__PURE__*/React.createElement(Sized, {
59
74
  size: size
package/dist/esm/Badge/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","Plus","Badge","count","max","offset","size","children","rest","ref","value","createElement","Fragment","Array","isArray","_extends","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default 0\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n ref\n ) => {\n const value = useMemo(\n () =>\n count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n ),\n [count, max]\n );\n\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return value === 0 ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n <Sized size={size}>\n <Value top={top} right={right}>\n {value}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAAmBC,UAAU,QAAQ,mBAAmB;AACxD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAsBlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAI;AAC7B;AACA,CAAC;AAED,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,KAAK,GAAGV,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,MAAM,CAAC,CAAY;AAChE,IAAIF,UAAW;AACf,CAAC;AAMD,MAAMU,KAAK,GAAGX,MAAM,CAAC,KAAK,EAAEG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAc;AAC1E;AACA,SAAUS,CAAC,IAAKA,CAAC,CAACC,GAAI;AACtB,WAAYD,CAAC,IAAKA,CAAC,CAACE,KAAM;AAC1B;AACA;AACA,YAAYL,SAAU;AACtB,eAAeA,SAAU;AACzB;AACA,mBAAmBA,SAAS,GAAG,CAAE;AACjC;AACA;AACA;AACA;AACA;AACA;AACA,sBAAuBG,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACC,YAAY,CAAE;AACvD,WAAYJ,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACE,cAAc,CAAE;AAC9C,sBAAuBL,CAAC,IAAKV,GAAG,CAACU,CAAC,CAACG,KAAK,CAACG,OAAO,CAAE;AAClD;AACA,eAAgBN,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrB,MAAM,CAACQ,GAAI;AACxB,eAAgBI,CAAC,IAAKA,CAAC,CAACG,KAAK,CAACI,KAAK,CAACC,KAAM;AAC1C;AACA,CAAC;;AAED;AACA;AACA;AACA,MAAME,KAAK,gBAAGjB,UAAU,CACtB,CACE;EAAEkB,KAAK,GAAG,CAAC;EAAEC,GAAG,GAAG,EAAE;EAAEC,MAAM,GAAG,GAAG;EAAEC,IAAI,GAAG,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACtEC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,OAAO,CACnB,MACEiB,KAAK,GAAGC,GAAG,gBACTpB,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGR,GAAG,eACJpB,KAAA,CAAA2B,aAAA,CAACV,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KACD,EACH,CAACA,KAAK,EAAEC,GAAG,CACb,CAAC;EAED,MAAM,CAACX,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAO2B,KAAK,CAACC,OAAO,CAACT,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOK,KAAK,KAAK,CAAC,GAChBH,QAAQ,gBAERvB,KAAA,CAAA2B,aAAA,CAACxB,SAAS,EAAA4B,QAAA,KAAKP,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eACTvB,KAAA,CAAA2B,aAAA,CAACrB,KAAK;IAACgB,IAAI,EAAEA;EAAK,gBAChBtB,KAAA,CAAA2B,aAAA,CAACpB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BgB,KACI,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDR,KAAK,CAACc,WAAW,GAAG,OAAO;AAE3B,eAAed,KAAK","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["keyframes","styled","sizeStyles","clr","omitEmotionProps","React","forwardRef","useMemo","Container","div","HEIGHT_EM","Sized","scaleInCenter","Value","p","top","right","theme","badgeColorBg","badgeColorText","colorBg","sizes","small","transitionDelay","Plus","Badge","count","max","offset","size","children","rest","ref","value","createElement","Fragment","Array","isArray","_extends","displayName"],"sources":["../../../src/Badge/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { omitEmotionProps } from '@os-design/utils';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface BadgeProps extends JsxDivProps, WithSize {\n /**\n * Number shown in the corner.\n * @default 0\n */\n count?: number;\n /**\n * The max number.\n * @default 99\n */\n max?: number;\n /**\n * Offset of the badge.\n * top/right | [top, right]\n * @default undefined\n */\n offset?: string | [string, string];\n}\n\nconst Container = styled.div`\n position: relative;\n display: flex;\n`;\n\nconst HEIGHT_EM = 1.5;\n\nconst Sized = styled('div', omitEmotionProps('size'))<WithSize>`\n ${sizeStyles};\n`;\n\nconst scaleInCenter = keyframes`\n from {\n transform: scale(0);\n opacity: 0;\n }\n to {\n transform: scale(1) translate(50%, -50%);\n opacity: 1;\n }\n`;\n\ninterface ValueProps {\n top: string;\n right: string;\n}\nconst Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`\n position: absolute;\n top: ${(p) => p.top};\n right: ${(p) => p.right};\n transform: translate(50%, -50%);\n\n height: ${HEIGHT_EM}em;\n min-width: ${HEIGHT_EM}em;\n padding: 0 0.3em;\n border-radius: ${HEIGHT_EM / 2}em;\n box-sizing: border-box;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ${(p) => clr(p.theme.badgeColorBg)};\n color: ${(p) => clr(p.theme.badgeColorText)};\n border: 1px solid ${(p) => clr(p.theme.colorBg)};\n\n font-size: ${(p) => p.theme.sizes.small}em;\n font-weight: 500;\n line-height: 1;\n\n animation: ${scaleInCenter} ${(p) => p.theme.transitionDelay}ms\n cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\n`;\n\nconst Plus = styled.div`\n font-size: ${(p) => p.theme.sizes.small}em;\n padding-bottom: 2px;\n`;\n\n/**\n * The number shown in the corner. Used to show the number of notifications.\n */\nconst Badge = forwardRef<HTMLDivElement, BadgeProps>(\n (\n { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },\n ref\n ) => {\n const value = useMemo(\n () =>\n count > max ? (\n <>\n {max}\n <Plus>+</Plus>\n </>\n ) : (\n count\n ),\n [count, max]\n );\n\n const [top, right] = useMemo(\n () => (Array.isArray(offset) ? offset : [offset, offset]),\n [offset]\n );\n\n return count === 0 ? (\n children\n ) : (\n <Container {...rest} ref={ref}>\n {children}\n <Sized size={size}>\n <Value top={top} right={right}>\n {value}\n </Value>\n </Sized>\n </Container>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"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","ignoreList":[]}
package/dist/types/Badge/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Badge/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,GAAG,CAAC,EAAE,MAAM,CAAC;IAMb,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,mFAoCV,CAAC;AAIF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Badge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAGzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,QAAQ;IAKvD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,GAAG,CAAC,EAAE,MAAM,CAAC;IAMb,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAgED,QAAA,MAAM,KAAK,mFAoCV,CAAC;AAIF,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.243",
3
+ "version": "1.0.245",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -39,7 +39,7 @@
39
39
  "@os-design/styles": "^1.0.56",
40
40
  "@os-design/theming": "^1.0.52",
41
41
  "@os-design/time-picker-utils": "^1.0.14",
42
- "@os-design/utils": "^1.0.75",
42
+ "@os-design/utils": "^1.0.76",
43
43
  "@os-team/password-score": "^1.0.5",
44
44
  "facepaint": "^1.2.1",
45
45
  "react-focus-lock": "^2.12.1",
@@ -59,5 +59,5 @@
59
59
  "react": ">=18",
60
60
  "react-dom": ">=18"
61
61
  },
62
- "gitHead": "6c92e27c799cae9ae9930e734868d8da35c61cb6"
62
+ "gitHead": "502592511a8a4ec864135406a83052c19341ffa4"
63
63
  }
package/src/Badge/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { keyframes } from '@emotion/react';
1
2
  import styled from '@emotion/styled';
2
3
  import { WithSize, sizeStyles } from '@os-design/styles';
3
4
  import { clr } from '@os-design/theming';
@@ -26,6 +27,7 @@ export interface BadgeProps extends JsxDivProps, WithSize {
26
27
 
27
28
  const Container = styled.div`
28
29
  position: relative;
30
+ display: flex;
29
31
  `;
30
32
 
31
33
  const HEIGHT_EM = 1.5;
@@ -34,6 +36,17 @@ const Sized = styled('div', omitEmotionProps('size'))<WithSize>`
34
36
  ${sizeStyles};
35
37
  `;
36
38
 
39
+ const scaleInCenter = keyframes`
40
+ from {
41
+ transform: scale(0);
42
+ opacity: 0;
43
+ }
44
+ to {
45
+ transform: scale(1) translate(50%, -50%);
46
+ opacity: 1;
47
+ }
48
+ `;
49
+
37
50
  interface ValueProps {
38
51
  top: string;
39
52
  right: string;
@@ -61,6 +74,9 @@ const Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`
61
74
  font-size: ${(p) => p.theme.sizes.small}em;
62
75
  font-weight: 500;
63
76
  line-height: 1;
77
+
78
+ animation: ${scaleInCenter} ${(p) => p.theme.transitionDelay}ms
79
+ cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
64
80
  `;
65
81
 
66
82
  const Plus = styled.div`
@@ -94,7 +110,7 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
94
110
  [offset]
95
111
  );
96
112
 
97
- return value === 0 ? (
113
+ return count === 0 ? (
98
114
  children
99
115
  ) : (
100
116
  <Container {...rest} ref={ref}>