@os-design/core 1.0.239 → 1.0.240

package/dist/cjs/Badge/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+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 _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 && Object.prototype.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; }
+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 _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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+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; }
+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  display: inline-block;\n  position: relative;\n"])));
+var HEIGHT_EM = 1.5;
+var Sized = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.sizeStyles);
+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) {
+  return p.top;
+}, function (p) {
+  return p.right;
+}, HEIGHT_EM, HEIGHT_EM, HEIGHT_EM / 2, function (p) {
+  return (0, _theming.clr)(p.theme.badgeColorBg);
+}, function (p) {
+  return (0, _theming.clr)(p.theme.badgeColorText);
+}, function (p) {
+  return (0, _theming.clr)(p.theme.colorBg);
+}, function (p) {
+  return p.theme.sizes.small;
+});
+var Plus = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", "em;\n  padding-bottom: 2px;\n"])), function (p) {
+  return p.theme.sizes.small;
+});
+
+/**
+ * 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,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 99 : _ref$max,
+    _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 value === 0 ? 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)));
+});
+Badge.displayName = 'Badge';
+var _default = exports["default"] = Badge;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","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","sourceKeys","keys","_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  display: inline-block;\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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"}

package/dist/esm/Badge/index.js

@@ -0,0 +1,68 @@
+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); }
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+const Container = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+const HEIGHT_EM = 1.5;
+const Sized = styled('div', omitEmotionProps('size'))`
+  ${sizeStyles};
+`;
+const Value = styled('div', omitEmotionProps('top', 'right'))`
+  position: absolute;
+  top: ${p => p.top};
+  right: ${p => p.right};
+  transform: translate(50%, -50%);
+
+  height: ${HEIGHT_EM}em;
+  min-width: ${HEIGHT_EM}em;
+  padding: 0 0.3em;
+  border-radius: ${HEIGHT_EM / 2}em;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${p => clr(p.theme.badgeColorBg)};
+  color: ${p => clr(p.theme.badgeColorText)};
+  border: 1px solid ${p => clr(p.theme.colorBg)};
+
+  font-size: ${p => p.theme.sizes.small}em;
+  font-weight: 500;
+  line-height: 1;
+`;
+const Plus = styled.div`
+  font-size: ${p => p.theme.sizes.small}em;
+  padding-bottom: 2px;
+`;
+
+/**
+ * The number shown in the corner. Used to show the number of notifications.
+ */
+const Badge = /*#__PURE__*/forwardRef(({
+  count = 0,
+  max = 99,
+  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 value === 0 ? 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)));
+});
+Badge.displayName = 'Badge';
+export default Badge;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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  display: inline-block;\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;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"}

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

@@ -0,0 +1,11 @@
+import { WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface BadgeProps extends JsxDivProps, WithSize {
+    count?: number;
+    max?: number;
+    offset?: string | [string, string];
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default Badge;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.239",
+  "version": "1.0.240",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -31,15 +31,15 @@
   },
   "dependencies": {
     "@os-design/date-picker-utils": "^1.0.23",
-    "@os-design/icons": "^1.0.56",
+    "@os-design/icons": "^1.0.57",
     "@os-design/input-number-utils": "^1.0.29",
     "@os-design/media": "^1.0.24",
     "@os-design/menu-utils": "^1.0.20",
     "@os-design/portal": "^1.0.16",
-    "@os-design/styles": "^1.0.53",
-    "@os-design/theming": "^1.0.49",
+    "@os-design/styles": "^1.0.54",
+    "@os-design/theming": "^1.0.50",
     "@os-design/time-picker-utils": "^1.0.14",
-    "@os-design/utils": "^1.0.71",
+    "@os-design/utils": "^1.0.72",
     "@os-team/password-score": "^1.0.5",
     "facepaint": "^1.2.1",
     "react-focus-lock": "^2.11.1",
@@ -59,5 +59,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "73879a555a98a5a644a2a695ff797d01637fd19f"
+  "gitHead": "01c24b2665ad10a4b4976a6c0b4982e534e7727a"
 }

package/src/Badge/index.tsx

@@ -0,0 +1,115 @@
+import styled from '@emotion/styled';
+import { WithSize, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useMemo } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface BadgeProps extends JsxDivProps, WithSize {
+  /**
+   * Number shown in the corner.
+   * @default 0
+   */
+  count?: number;
+  /**
+   * The max number.
+   * @default 99
+   */
+  max?: number;
+  /**
+   * Offset of the badge.
+   * top/right | [top, right]
+   * @default undefined
+   */
+  offset?: string | [string, string];
+}
+
+const Container = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const HEIGHT_EM = 1.5;
+
+const Sized = styled('div', omitEmotionProps('size'))<WithSize>`
+  ${sizeStyles};
+`;
+
+interface ValueProps {
+  top: string;
+  right: string;
+}
+const Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`
+  position: absolute;
+  top: ${(p) => p.top};
+  right: ${(p) => p.right};
+  transform: translate(50%, -50%);
+
+  height: ${HEIGHT_EM}em;
+  min-width: ${HEIGHT_EM}em;
+  padding: 0 0.3em;
+  border-radius: ${HEIGHT_EM / 2}em;
+  box-sizing: border-box;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${(p) => clr(p.theme.badgeColorBg)};
+  color: ${(p) => clr(p.theme.badgeColorText)};
+  border: 1px solid ${(p) => clr(p.theme.colorBg)};
+
+  font-size: ${(p) => p.theme.sizes.small}em;
+  font-weight: 500;
+  line-height: 1;
+`;
+
+const Plus = styled.div`
+  font-size: ${(p) => p.theme.sizes.small}em;
+  padding-bottom: 2px;
+`;
+
+/**
+ * The number shown in the corner. Used to show the number of notifications.
+ */
+const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    { count = 0, max = 99, 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 value === 0 ? (
+      children
+    ) : (
+      <Container {...rest} ref={ref}>
+        {children}
+        <Sized size={size}>
+          <Value top={top} right={right}>
+            {value}
+          </Value>
+        </Sized>
+      </Container>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+export default Badge;