@os-design/core 1.0.245 → 1.0.247

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 (14) hide show
  1. package/dist/cjs/Badge/index.js +11 -15
  2. package/dist/cjs/Badge/index.js.map +1 -1
  3. package/dist/cjs/ListItem/index.js +3 -2
  4. package/dist/cjs/ListItem/index.js.map +1 -1
  5. package/dist/esm/Badge/index.js +0 -14
  6. package/dist/esm/Badge/index.js.map +1 -1
  7. package/dist/esm/ListItem/index.js +2 -1
  8. package/dist/esm/ListItem/index.js.map +1 -1
  9. package/dist/types/Badge/index.d.ts.map +1 -1
  10. package/dist/types/ListItem/index.d.ts +1 -1
  11. package/dist/types/ListItem/index.d.ts.map +1 -1
  12. package/package.json +2 -2
  13. package/src/Badge/index.tsx +0 -15
  14. package/src/ListItem/index.tsx +8 -6
package/dist/cjs/Badge/index.js CHANGED
@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports["default"] = void 0;
8
- var _react = require("@emotion/react");
9
8
  var _styled = _interopRequireDefault(require("@emotion/styled"));
10
9
  var _styles = require("@os-design/styles");
11
10
  var _theming = require("@os-design/theming");
12
11
  var _utils = require("@os-design/utils");
13
- var _react2 = _interopRequireWildcard(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
14
13
  var _excluded = ["count", "max", "offset", "size", "children"];
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
16
15
  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); }
17
16
  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; }
18
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,8 +28,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
29
28
  var Container = _styled["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n"])));
30
29
  var HEIGHT_EM = 1.5;
31
30
  var Sized = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n"])), _styles.sizeStyles);
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) {
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) {
34
32
  return p.top;
35
33
  }, function (p) {
36
34
  return p.right;
@@ -42,17 +40,15 @@ var Value = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('top', '
42
40
  return (0, _theming.clr)(p.theme.colorBg);
43
41
  }, function (p) {
44
42
  return p.theme.sizes.small;
45
- }, scaleInCenter, function (p) {
46
- return p.theme.transitionDelay;
47
43
  });
48
- var Plus = _styled["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: ", "em;\n padding-bottom: 2px;\n"])), function (p) {
44
+ var Plus = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: ", "em;\n padding-bottom: 2px;\n"])), function (p) {
49
45
  return p.theme.sizes.small;
50
46
  });
51
47
 
52
48
  /**
53
49
  * The number shown in the corner. Used to show the number of notifications.
54
50
  */
55
- var Badge = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
51
+ var Badge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
56
52
  var _ref$count = _ref.count,
57
53
  count = _ref$count === void 0 ? 0 : _ref$count,
58
54
  _ref$max = _ref.max,
@@ -63,20 +59,20 @@ var Badge = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
63
59
  size = _ref$size === void 0 ? '1em' : _ref$size,
64
60
  children = _ref.children,
65
61
  rest = _objectWithoutProperties(_ref, _excluded);
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;
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;
68
64
  }, [count, max]);
69
- var _useMemo = (0, _react2.useMemo)(function () {
65
+ var _useMemo = (0, _react.useMemo)(function () {
70
66
  return Array.isArray(offset) ? offset : [offset, offset];
71
67
  }, [offset]),
72
68
  _useMemo2 = _slicedToArray(_useMemo, 2),
73
69
  top = _useMemo2[0],
74
70
  right = _useMemo2[1];
75
- return count === 0 ? children : /*#__PURE__*/_react2["default"].createElement(Container, _extends({}, rest, {
71
+ return count === 0 ? children : /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
76
72
  ref: ref
77
- }), children, /*#__PURE__*/_react2["default"].createElement(Sized, {
73
+ }), children, /*#__PURE__*/_react["default"].createElement(Sized, {
78
74
  size: size
79
- }, /*#__PURE__*/_react2["default"].createElement(Value, {
75
+ }, /*#__PURE__*/_react["default"].createElement(Value, {
80
76
  top: top,
81
77
  right: right
82
78
  }, value)));
package/dist/cjs/Badge/index.js.map CHANGED
@@ -1 +1 @@
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":[]}
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":[]}
package/dist/cjs/ListItem/index.js CHANGED
@@ -10,7 +10,7 @@ var _styles = require("@os-design/styles");
10
10
  var _theming = require("@os-design/theming");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _ListItemActions = _interopRequireDefault(require("../ListItemActions"));
13
- var _excluded = ["title", "description", "left", "right"];
13
+ var _excluded = ["title", "description", "left", "right", "children"];
14
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
15
15
  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
16
  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; }
@@ -50,10 +50,11 @@ var ListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
50
50
  description = _ref.description,
51
51
  left = _ref.left,
52
52
  right = _ref.right,
53
+ children = _ref.children,
53
54
  rest = _objectWithoutProperties(_ref, _excluded);
54
55
  return /*#__PURE__*/_react["default"].createElement(Container, _extends({}, rest, {
55
56
  ref: ref
56
- }), left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description)), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right));
57
+ }), left && /*#__PURE__*/_react["default"].createElement(LeftAddon, null, left), children || /*#__PURE__*/_react["default"].createElement(Content, null, /*#__PURE__*/_react["default"].createElement(Title, null, title), description && /*#__PURE__*/_react["default"].createElement(Description, null, description)), right && /*#__PURE__*/_react["default"].createElement(RightAddon, null, right));
57
58
  });
58
59
  ListItem.displayName = 'ListItem';
59
60
  var _default = exports["default"] = ListItem;
package/dist/cjs/ListItem/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItemActions","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","ListItemActions","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","div","Title","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","forwardRef","_ref","ref","title","description","left","right","rest","createElement","displayName","_default","exports"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n /**\n * The title of the item.\n */\n title: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\n box-sizing: border-box;\n min-height: 4em;\n overflow: hidden;\n\n display: flex;\n align-items: center;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n ({ title, description, left, right, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_styled","_interopRequireDefault","require","_styles","_theming","_react","_interopRequireWildcard","_ListItemActions","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_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","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","_taggedTemplateLiteral","strings","raw","slice","freeze","defineProperties","value","Container","styled","ListItemActions","p","clr","theme","listItemColorBorder","horizontalPaddingStyles","Content","div","Title","colorText","ellipsisStyles","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","forwardRef","_ref","ref","title","description","left","right","children","rest","createElement","displayName","_default","exports"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n /**\n * The title of the item.\n */\n title?: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\n box-sizing: border-box;\n min-height: 4em;\n overflow: hidden;\n\n display: flex;\n align-items: center;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n ({ title, description, left, right, children, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n {children || (\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n )}\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
package/dist/esm/Badge/index.js CHANGED
@@ -1,5 +1,4 @@
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';
3
2
  import styled from '@emotion/styled';
4
3
  import { sizeStyles } from '@os-design/styles';
5
4
  import { clr } from '@os-design/theming';
@@ -13,16 +12,6 @@ const HEIGHT_EM = 1.5;
13
12
  const Sized = styled('div', omitEmotionProps('size'))`
14
13
  ${sizeStyles};
15
14
  `;
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
- `;
26
15
  const Value = styled('div', omitEmotionProps('top', 'right'))`
27
16
  position: absolute;
28
17
  top: ${p => p.top};
@@ -46,9 +35,6 @@ const Value = styled('div', omitEmotionProps('top', 'right'))`
46
35
  font-size: ${p => p.theme.sizes.small}em;
47
36
  font-weight: 500;
48
37
  line-height: 1;
49
-
50
- animation: ${scaleInCenter} ${p => p.theme.transitionDelay}ms
51
- cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
52
38
  `;
53
39
  const Plus = styled.div`
54
40
  font-size: ${p => p.theme.sizes.small}em;
package/dist/esm/Badge/index.js.map CHANGED
@@ -1 +1 @@
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":[]}
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":[]}
package/dist/esm/ListItem/index.js CHANGED
@@ -49,10 +49,11 @@ const ListItem = /*#__PURE__*/forwardRef(({
49
49
  description,
50
50
  left,
51
51
  right,
52
+ children,
52
53
  ...rest
53
54
  }, ref) => /*#__PURE__*/React.createElement(Container, _extends({}, rest, {
54
55
  ref: ref
55
- }), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description)), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
56
+ }), left && /*#__PURE__*/React.createElement(LeftAddon, null, left), children || /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Title, null, title), description && /*#__PURE__*/React.createElement(Description, null, description)), right && /*#__PURE__*/React.createElement(RightAddon, null, right)));
56
57
  ListItem.displayName = 'ListItem';
57
58
  export default ListItem;
58
59
  //# sourceMappingURL=index.js.map
package/dist/esm/ListItem/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n /**\n * The title of the item.\n */\n title: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\n box-sizing: border-box;\n min-height: 4em;\n overflow: hidden;\n\n display: flex;\n align-items: center;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n ({ title, description, left, right, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,CAAC,CAAE;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAChDxB,KAAA,CAAAyB,aAAA,CAACtB,SAAS,EAAAuB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC3BH,IAAI,iBAAIrB,KAAA,CAAAyB,aAAA,CAACV,SAAS,QAAEM,IAAgB,CAAC,eAEtCrB,KAAA,CAAAyB,aAAA,CAAClB,OAAO,qBACNP,KAAA,CAAAyB,aAAA,CAAChB,KAAK,QAAEU,KAAa,CAAC,EACrBC,WAAW,iBAAIpB,KAAA,CAAAyB,aAAA,CAACd,WAAW,QAAES,WAAyB,CAChD,CAAC,EAETE,KAAK,iBAAItB,KAAA,CAAAyB,aAAA,CAACR,UAAU,QAAEK,KAAkB,CAChC,CAEf,CAAC;AAEDJ,QAAQ,CAACS,WAAW,GAAG,UAAU;AAEjC,eAAeT,QAAQ","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["styled","ellipsisStyles","horizontalPaddingStyles","clr","React","forwardRef","ListItemActions","Container","p","theme","listItemColorBorder","Content","div","Title","colorText","Description","listItemColorDescription","sizes","small","LeftAddon","listItemAddonPaddingHorizontal","RightAddon","ListItem","title","description","left","right","children","rest","ref","createElement","_extends","displayName"],"sources":["../../../src/ListItem/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { ellipsisStyles, horizontalPaddingStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport React, { forwardRef } from 'react';\nimport ListItemActions, { ListItemActionsProps } from '../ListItemActions';\n\nexport interface ListItemProps extends ListItemActionsProps {\n /**\n * The title of the item.\n */\n title?: string;\n /**\n * The description of the item.\n * @default undefined\n */\n description?: string;\n /**\n * The component located on the left side.\n * For example, avatar, button, checkbox.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * The component located on the right side.\n * For example, date.\n */\n right?: React.ReactNode;\n}\n\nconst Container = styled(ListItemActions)`\n box-sizing: border-box;\n min-height: 4em;\n overflow: hidden;\n\n display: flex;\n align-items: center;\n\n &:not(:last-of-type) {\n border-bottom: 1px solid ${(p) => clr(p.theme.listItemColorBorder)};\n }\n\n ${horizontalPaddingStyles()};\n`;\n\nconst Content = styled.div`\n overflow: hidden;\n`;\n\nconst Title = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n font-weight: 500;\n ${ellipsisStyles};\n`;\n\nconst Description = styled.div`\n color: ${(p) => clr(p.theme.listItemColorDescription)};\n font-size: ${(p) => p.theme.sizes.small}em;\n ${ellipsisStyles};\n`;\n\nconst LeftAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n padding-right: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\nconst RightAddon = styled.div`\n color: ${(p) => clr(p.theme.colorText)};\n margin-left: auto;\n padding-left: ${(p) => p.theme.listItemAddonPaddingHorizontal}em;\n`;\n\n/**\n * The base list item.\n */\nconst ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n ({ title, description, left, right, children, ...rest }, ref) => (\n <Container {...rest} ref={ref}>\n {left && <LeftAddon>{left}</LeftAddon>}\n\n {children || (\n <Content>\n <Title>{title}</Title>\n {description && <Description>{description}</Description>}\n </Content>\n )}\n\n {right && <RightAddon>{right}</RightAddon>}\n </Container>\n )\n);\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,cAAc,EAAEC,uBAAuB,QAAQ,mBAAmB;AAC3E,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAgC,oBAAoB;AAyB1E,MAAMC,SAAS,GAAGP,MAAM,CAACM,eAAe,CAAE;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAAgCE,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACC,mBAAmB,CAAE;AACvE;AACA;AACA,IAAIR,uBAAuB,CAAC,CAAE;AAC9B,CAAC;AAED,MAAMS,OAAO,GAAGX,MAAM,CAACY,GAAI;AAC3B;AACA,CAAC;AAED,MAAMC,KAAK,GAAGb,MAAM,CAACY,GAAI;AACzB,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,IAAIb,cAAe;AACnB,CAAC;AAED,MAAMc,WAAW,GAAGf,MAAM,CAACY,GAAI;AAC/B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACO,wBAAwB,CAAE;AACxD,eAAgBR,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACQ,KAAK,CAACC,KAAM;AAC1C,IAAIjB,cAAe;AACnB,CAAC;AAED,MAAMkB,SAAS,GAAGnB,MAAM,CAACY,GAAI;AAC7B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC,mBAAoBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AACjE,CAAC;AAED,MAAMC,UAAU,GAAGrB,MAAM,CAACY,GAAI;AAC9B,WAAYJ,CAAC,IAAKL,GAAG,CAACK,CAAC,CAACC,KAAK,CAACK,SAAS,CAAE;AACzC;AACA,kBAAmBN,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACW,8BAA+B;AAChE,CAAC;;AAED;AACA;AACA;AACA,MAAME,QAAQ,gBAAGjB,UAAU,CACzB,CAAC;EAAEkB,KAAK;EAAEC,WAAW;EAAEC,IAAI;EAAEC,KAAK;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC1DzB,KAAA,CAAA0B,aAAA,CAACvB,SAAS,EAAAwB,QAAA,KAAKH,IAAI;EAAEC,GAAG,EAAEA;AAAI,IAC3BJ,IAAI,iBAAIrB,KAAA,CAAA0B,aAAA,CAACX,SAAS,QAAEM,IAAgB,CAAC,EAErCE,QAAQ,iBACPvB,KAAA,CAAA0B,aAAA,CAACnB,OAAO,qBACNP,KAAA,CAAA0B,aAAA,CAACjB,KAAK,QAAEU,KAAa,CAAC,EACrBC,WAAW,iBAAIpB,KAAA,CAAA0B,aAAA,CAACf,WAAW,QAAES,WAAyB,CAChD,CACV,EAEAE,KAAK,iBAAItB,KAAA,CAAA0B,aAAA,CAACT,UAAU,QAAEK,KAAkB,CAChC,CAEf,CAAC;AAEDJ,QAAQ,CAACU,WAAW,GAAG,UAAU;AAEjC,eAAeV,QAAQ","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":"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"}
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/dist/types/ListItem/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ListItemActionsProps } from '../ListItemActions';
3
3
  export interface ListItemProps extends ListItemActionsProps {
4
- title: string;
4
+ title?: string;
5
5
  description?: string;
6
6
  left?: React.ReactNode;
7
7
  right?: React.ReactNode;
package/dist/types/ListItem/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IAIzD,KAAK,EAAE,MAAM,CAAC;IAKd,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA+CD,QAAA,MAAM,QAAQ,sFAab,CAAC;AAIF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ListItem/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAwB,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IAIzD,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,WAAW,CAAC,EAAE,MAAM,CAAC;IAMrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAKvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AA+CD,QAAA,MAAM,QAAQ,sFAeb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.245",
3
+ "version": "1.0.247",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -59,5 +59,5 @@
59
59
  "react": ">=18",
60
60
  "react-dom": ">=18"
61
61
  },
62
- "gitHead": "502592511a8a4ec864135406a83052c19341ffa4"
62
+ "gitHead": "95db1ded272037a29f4fb69dd902c0cdcdd36a4c"
63
63
  }
package/src/Badge/index.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { keyframes } from '@emotion/react';
2
1
  import styled from '@emotion/styled';
3
2
  import { WithSize, sizeStyles } from '@os-design/styles';
4
3
  import { clr } from '@os-design/theming';
@@ -36,17 +35,6 @@ const Sized = styled('div', omitEmotionProps('size'))<WithSize>`
36
35
  ${sizeStyles};
37
36
  `;
38
37
 
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
-
50
38
  interface ValueProps {
51
39
  top: string;
52
40
  right: string;
@@ -74,9 +62,6 @@ const Value = styled('div', omitEmotionProps('top', 'right'))<ValueProps>`
74
62
  font-size: ${(p) => p.theme.sizes.small}em;
75
63
  font-weight: 500;
76
64
  line-height: 1;
77
-
78
- animation: ${scaleInCenter} ${(p) => p.theme.transitionDelay}ms
79
- cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
80
65
  `;
81
66
 
82
67
  const Plus = styled.div`
package/src/ListItem/index.tsx CHANGED
@@ -8,7 +8,7 @@ export interface ListItemProps extends ListItemActionsProps {
8
8
  /**
9
9
  * The title of the item.
10
10
  */
11
- title: string;
11
+ title?: string;
12
12
  /**
13
13
  * The description of the item.
14
14
  * @default undefined
@@ -73,14 +73,16 @@ const RightAddon = styled.div`
73
73
  * The base list item.
74
74
  */
75
75
  const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
76
- ({ title, description, left, right, ...rest }, ref) => (
76
+ ({ title, description, left, right, children, ...rest }, ref) => (
77
77
  <Container {...rest} ref={ref}>
78
78
  {left && <LeftAddon>{left}</LeftAddon>}
79
79
 
80
- <Content>
81
- <Title>{title}</Title>
82
- {description && <Description>{description}</Description>}
83
- </Content>
80
+ {children || (
81
+ <Content>
82
+ <Title>{title}</Title>
83
+ {description && <Description>{description}</Description>}
84
+ </Content>
85
+ )}
84
86
 
85
87
  {right && <RightAddon>{right}</RightAddon>}
86
88
  </Container>