@os-design/core 1.0.249 → 1.0.251

package/dist/cjs/Badge/index.js

@@ -10,7 +10,7 @@ var _styles = require("@os-design/styles");
 var _theming = require("@os-design/theming");
 var _utils = require("@os-design/utils");
 var _react = _interopRequireWildcard(require("react"));
-var _excluded = ["count", "max", "offset", "size", "children"];
+var _excluded = ["count", "max", "showZero", "offset", "size", "children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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); }
 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; }
@@ -49,33 +49,31 @@ var Plus = _styled["default"].div(_templateObject4 || (_templateObject4 = _tagge
  * The number shown in the corner. Used to show the number of notifications.
  */
 var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _ref$count = _ref.count,
-    count = _ref$count === void 0 ? 0 : _ref$count,
+  var count = _ref.count,
     _ref$max = _ref.max,
     max = _ref$max === void 0 ? 99 : _ref$max,
+    _ref$showZero = _ref.showZero,
+    showZero = _ref$showZero === void 0 ? false : _ref$showZero,
     _ref$offset = _ref.offset,
     offset = _ref$offset === void 0 ? '0' : _ref$offset,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? '1em' : _ref$size,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var value = (0, _react.useMemo)(function () {
-    return count > max ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, max, /*#__PURE__*/_react["default"].createElement(Plus, null, "+")) : count;
-  }, [count, max]);
   var _useMemo = (0, _react.useMemo)(function () {
       return Array.isArray(offset) ? offset : [offset, offset];
     }, [offset]),
     _useMemo2 = _slicedToArray(_useMemo, 2),
     top = _useMemo2[0],
     right = _useMemo2[1];
-  return count === 0 ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
+  return count === undefined || count < 0 || count === 0 && !showZero ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
     ref: ref
   }), children, /*#__PURE__*/_react["default"].createElement(Sized, {
     size: size
   }, /*#__PURE__*/_react["default"].createElement(Value, {
     top: top,
     right: right
-  }, value)));
+  }, count > max ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, max, /*#__PURE__*/_react["default"].createElement(Plus, null, "+")) : count)));
 });
 Badge.displayName = 'Badge';
 var _default = exports["default"] = Badge;

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

@@ -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  display: flex;\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 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":[]}
+{"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","count","_ref$max","max","_ref$showZero","showZero","_ref$offset","offset","_ref$size","size","children","rest","_useMemo","useMemo","_useMemo2","undefined","createElement","Fragment","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 undefined\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Whether the zero is shown.\n   * @default false\n   */\n  showZero?: boolean;\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\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    {\n      count,\n      max = 99,\n      showZero = false,\n      offset = '0',\n      size = '1em',\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return count === undefined || count < 0 || (count === 0 && !showZero) ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {count > max ? (\n              <>\n                {max}\n                <Plus>+</Plus>\n              </>\n            ) : (\n              count\n            )}\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

@@ -45,23 +45,23 @@ const Plus = styled.div`
  * The number shown in the corner. Used to show the number of notifications.
  */
 const Badge = /*#__PURE__*/forwardRef(({
-  count = 0,
+  count,
   max = 99,
+  showZero = false,
   offset = '0',
   size = '1em',
   children,
   ...rest
 }, ref) => {
-  const value = useMemo(() => count > max ? /*#__PURE__*/React.createElement(React.Fragment, null, max, /*#__PURE__*/React.createElement(Plus, null, "+")) : count, [count, max]);
   const [top, right] = useMemo(() => Array.isArray(offset) ? offset : [offset, offset], [offset]);
-  return count === 0 ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
+  return count === undefined || count < 0 || count === 0 && !showZero ? children : /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
     ref: ref
   }), children, /*#__PURE__*/React.createElement(Sized, {
     size: size
   }, /*#__PURE__*/React.createElement(Value, {
     top: top,
     right: right
-  }, value)));
+  }, count > max ? /*#__PURE__*/React.createElement(React.Fragment, null, max, /*#__PURE__*/React.createElement(Plus, null, "+")) : count)));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/esm/Badge/index.js.map

@@ -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  display: flex;\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 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":";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;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,OAAOF,KAAK,KAAK,CAAC,GAChBI,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":[]}
+{"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","showZero","offset","size","children","rest","ref","Array","isArray","undefined","createElement","_extends","Fragment","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 undefined\n   */\n  count?: number;\n  /**\n   * The max number.\n   * @default 99\n   */\n  max?: number;\n  /**\n   * Whether the zero is shown.\n   * @default false\n   */\n  showZero?: boolean;\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\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    {\n      count,\n      max = 99,\n      showZero = false,\n      offset = '0',\n      size = '1em',\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const [top, right] = useMemo(\n      () => (Array.isArray(offset) ? offset : [offset, offset]),\n      [offset]\n    );\n\n    return count === undefined || count < 0 || (count === 0 && !showZero) ? (\n      children\n    ) : (\n      <Container {...rest} ref={ref}>\n        {children}\n\n        <Sized size={size}>\n          <Value top={top} right={right}>\n            {count > max ? (\n              <>\n                {max}\n                <Plus>+</Plus>\n              </>\n            ) : (\n              count\n            )}\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;AA2BlD,MAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAI;AAC7B;AACA;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;EACEkB,KAAK;EACLC,GAAG,GAAG,EAAE;EACRC,QAAQ,GAAG,KAAK;EAChBC,MAAM,GAAG,GAAG;EACZC,IAAI,GAAG,KAAK;EACZC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACjB,GAAG,EAAEC,KAAK,CAAC,GAAGR,OAAO,CAC1B,MAAOyB,KAAK,CAACC,OAAO,CAACN,MAAM,CAAC,GAAGA,MAAM,GAAG,CAACA,MAAM,EAAEA,MAAM,CAAE,EACzD,CAACA,MAAM,CACT,CAAC;EAED,OAAOH,KAAK,KAAKU,SAAS,IAAIV,KAAK,GAAG,CAAC,IAAKA,KAAK,KAAK,CAAC,IAAI,CAACE,QAAS,GACnEG,QAAQ,gBAERxB,KAAA,CAAA8B,aAAA,CAAC3B,SAAS,EAAA4B,QAAA,KAAKN,IAAI;IAAEC,GAAG,EAAEA;EAAI,IAC3BF,QAAQ,eAETxB,KAAA,CAAA8B,aAAA,CAACxB,KAAK;IAACiB,IAAI,EAAEA;EAAK,gBAChBvB,KAAA,CAAA8B,aAAA,CAACvB,KAAK;IAACE,GAAG,EAAEA,GAAI;IAACC,KAAK,EAAEA;EAAM,GAC3BS,KAAK,GAAGC,GAAG,gBACVpB,KAAA,CAAA8B,aAAA,CAAA9B,KAAA,CAAAgC,QAAA,QACGZ,GAAG,eACJpB,KAAA,CAAA8B,aAAA,CAACb,IAAI,QAAC,GAAO,CACb,CAAC,GAEHE,KAEG,CACF,CACE,CACZ;AACH,CACF,CAAC;AAEDD,KAAK,CAACe,WAAW,GAAG,OAAO;AAE3B,eAAef,KAAK","ignoreList":[]}

package/dist/types/Badge/index.d.ts

@@ -4,6 +4,7 @@ type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface BadgeProps extends JsxDivProps, WithSize {
     count?: number;
     max?: number;
+    showZero?: boolean;
     offset?: string | [string, string];
 }
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/Badge/index.d.ts.map

@@ -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;AAkDD,QAAA,MAAM,KAAK,mFAoCV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"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;IAKb,QAAQ,CAAC,EAAE,OAAO,CAAC;IAMnB,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACpC;AAkDD,QAAA,MAAM,KAAK,mFAuCV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.249",
+  "version": "1.0.251",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -59,5 +59,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "850cd3f7b8a603ae9559cf4074263c3511770e30"
+  "gitHead": "9c74980d39c3b9cd97003a3385d5da2ee3dd796b"
 }

package/src/Badge/index.tsx

@@ -8,7 +8,7 @@ type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
 export interface BadgeProps extends JsxDivProps, WithSize {
   /**
    * Number shown in the corner.
-   * @default 0
+   * @default undefined
    */
   count?: number;
   /**
@@ -16,6 +16,11 @@ export interface BadgeProps extends JsxDivProps, WithSize {
    * @default 99
    */
   max?: number;
+  /**
+   * Whether the zero is shown.
+   * @default false
+   */
+  showZero?: boolean;
   /**
    * Offset of the badge.
    * top/right | [top, right]
@@ -74,35 +79,38 @@ const Plus = styled.div`
  */
 const Badge = forwardRef<HTMLDivElement, BadgeProps>(
   (
-    { count = 0, max = 99, offset = '0', size = '1em', children, ...rest },
+    {
+      count,
+      max = 99,
+      showZero = false,
+      offset = '0',
+      size = '1em',
+      children,
+      ...rest
+    },
     ref
   ) => {
-    const value = useMemo(
-      () =>
-        count > max ? (
-          <>
-            {max}
-            <Plus>+</Plus>
-          </>
-        ) : (
-          count
-        ),
-      [count, max]
-    );
-
     const [top, right] = useMemo(
       () => (Array.isArray(offset) ? offset : [offset, offset]),
       [offset]
     );
 
-    return count === 0 ? (
+    return count === undefined || count < 0 || (count === 0 && !showZero) ? (
       children
     ) : (
       <Container {...rest} ref={ref}>
         {children}
+
         <Sized size={size}>
           <Value top={top} right={right}>
-            {value}
+            {count > max ? (
+              <>
+                {max}
+                <Plus>+</Plus>
+              </>
+            ) : (
+              count
+            )}
           </Value>
         </Sized>
       </Container>