@remember-web/primitive 0.4.4 → 0.4.7
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.
- package/dist/src/Avatars/Avatar/index.cjs.js +19 -4
- package/dist/src/Avatars/Avatar/index.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/index.d.ts +6 -2
- package/dist/src/Avatars/Avatar/index.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/index.esm.js +20 -5
- package/dist/src/Avatars/Avatar/index.esm.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.cjs.js +1 -1
- package/dist/src/Avatars/Avatar/styles.cjs.js.map +1 -1
- package/dist/src/Avatars/Avatar/styles.d.ts +3 -3
- package/dist/src/Avatars/Avatar/styles.d.ts.map +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js +1 -1
- package/dist/src/Avatars/Avatar/styles.esm.js.map +1 -1
- package/package.json +2 -2
- package/src/Avatars/Avatar/Avatar.stories.tsx +5 -0
- package/src/Avatars/Avatar/index.tsx +16 -4
- package/src/Avatars/Avatar/styles.ts +4 -3
|
@@ -16,7 +16,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
|
|
|
16
16
|
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
|
|
17
17
|
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
|
|
18
18
|
|
|
19
|
-
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
19
|
+
var _excluded = ["size", "backgroundColor", "border", "rounded", "fallbackType", "imageUrl", "badges", "children"];
|
|
20
20
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
21
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
22
|
var Avatar = function Avatar(_ref, ref) {
|
|
@@ -31,6 +31,8 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
31
31
|
} : _ref$border,
|
|
32
32
|
_ref$rounded = _ref.rounded,
|
|
33
33
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
34
|
+
_ref$fallbackType = _ref.fallbackType,
|
|
35
|
+
fallbackType = _ref$fallbackType === void 0 ? 'person' : _ref$fallbackType,
|
|
34
36
|
imageUrl = _ref.imageUrl,
|
|
35
37
|
badges = _ref.badges,
|
|
36
38
|
children = _ref.children,
|
|
@@ -55,9 +57,22 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
55
57
|
onError: function onError() {
|
|
56
58
|
return setImageError(true);
|
|
57
59
|
}
|
|
58
|
-
}) : children !== null && children !== void 0 ? children :
|
|
59
|
-
|
|
60
|
-
|
|
60
|
+
}) : children !== null && children !== void 0 ? children : function () {
|
|
61
|
+
switch (fallbackType) {
|
|
62
|
+
case 'person':
|
|
63
|
+
return /*#__PURE__*/jsxRuntime.jsx(icon.IconPersonEmpty, {
|
|
64
|
+
size: "100%"
|
|
65
|
+
});
|
|
66
|
+
case 'company':
|
|
67
|
+
return /*#__PURE__*/jsxRuntime.jsx(icon.IconCompanyEmpty, {
|
|
68
|
+
size: "100%"
|
|
69
|
+
});
|
|
70
|
+
default:
|
|
71
|
+
return /*#__PURE__*/jsxRuntime.jsx(icon.IconPersonEmpty, {
|
|
72
|
+
size: "100%"
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
}()
|
|
61
76
|
}), (badges === null || badges === void 0 ? void 0 : badges.bottom) && /*#__PURE__*/jsxRuntime.jsx(styles.StyledBottomBadge, {
|
|
62
77
|
$size: size,
|
|
63
78
|
$bgColor: badges.bottom.bgColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconCompanyEmpty, IconPersonEmpty } from '@remember-web/icon';\nimport { divider, fixedBgWhite } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport {\n AvatarContainer,\n StyledAvatar,\n StyledBottomBadge,\n StyledNotificationBadge,\n} from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & {\n fallbackType?: 'person' | 'company';\n} & ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = fixedBgWhite,\n border = { color: divider, width: '1px' },\n rounded = true,\n fallbackType = 'person',\n imageUrl,\n badges,\n children,\n ...rest\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n\n return (\n <AvatarContainer ref={ref} {...rest}>\n <StyledAvatar\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n $badges={badges}\n >\n {!imageError && imageUrl ? (\n <img\n src={imageUrl}\n loading=\"lazy\"\n alt=\"avatar\"\n onError={() => setImageError(true)}\n />\n ) : (\n children ??\n (() => {\n switch (fallbackType) {\n case 'person':\n return <IconPersonEmpty size=\"100%\" />;\n case 'company':\n return <IconCompanyEmpty size=\"100%\" />;\n default:\n return <IconPersonEmpty size=\"100%\" />;\n }\n })()\n )}\n </StyledAvatar>\n\n {badges?.bottom && (\n <StyledBottomBadge $size={size} $bgColor={badges.bottom.bgColor}>\n {badges.bottom.content}\n </StyledBottomBadge>\n )}\n\n {badges?.notification && <StyledNotificationBadge $size={size} />}\n </AvatarContainer>\n );\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","fallbackType","rest","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","$badges","children","src","loading","alt","$bgColor"],"mappings":";;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAoBb;AAaK;AAXDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;AACAC;;;;AAIGC;AAIL;;AAAOC;AAAYC;AAEnB;AACmBC;AAAS;;AAEtBC;AACAC;AACAC;AACAC;AACAC;AAAgBC;AAIZC;AACAC;AACAC;;;AACkC;;AAKlC;AACE;;AAC0BlB;AAAW;AACrC;;AAC2BA;AAAW;AACtC;;AAC0BA;AAAW;AACvC;AACF;AACD;AAIkBU;AAAaS;AAAgCJ;AACxC;AAIwBL;AAAY;AAAG;AAGvE;AAEA;;"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
2
2
|
import type { ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
import type { StyledAvatarProps } from '../../Avatars/Avatar/styles';
|
|
4
|
-
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &
|
|
5
|
-
|
|
4
|
+
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & {
|
|
5
|
+
fallbackType?: 'person' | 'company';
|
|
6
|
+
} & ComponentPropsWithoutRef<'div'>;
|
|
7
|
+
declare const _default: import("react").ForwardRefExoticComponent<Partial<ConvertTransientProps<StyledAvatarProps>> & {
|
|
8
|
+
fallbackType?: "person" | "company" | undefined;
|
|
9
|
+
} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
10
|
export default _default;
|
|
7
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,KAAK,EAAE,wBAAwB,EAA4B,MAAM,OAAO,CAAC;AAGhF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAQjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,GAAG;IAC5E,YAAY,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CACrC,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;;;;AA4DpC,wBAAkC"}
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
3
|
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
4
4
|
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
-
import {
|
|
5
|
+
import { IconPersonEmpty, IconCompanyEmpty } from '@remember-web/icon';
|
|
6
6
|
import { divider, fixedBgWhite } from '@remember-web/mixin';
|
|
7
7
|
import { forwardRef, useState } from 'react';
|
|
8
8
|
import { AvatarContainer, StyledAvatar, StyledBottomBadge, StyledNotificationBadge } from './styles.esm.js';
|
|
9
9
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
10
|
|
|
11
|
-
var _excluded = ["size", "backgroundColor", "border", "rounded", "imageUrl", "badges", "children"];
|
|
11
|
+
var _excluded = ["size", "backgroundColor", "border", "rounded", "fallbackType", "imageUrl", "badges", "children"];
|
|
12
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
14
14
|
var Avatar = function Avatar(_ref, ref) {
|
|
@@ -23,6 +23,8 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
23
23
|
} : _ref$border,
|
|
24
24
|
_ref$rounded = _ref.rounded,
|
|
25
25
|
rounded = _ref$rounded === void 0 ? true : _ref$rounded,
|
|
26
|
+
_ref$fallbackType = _ref.fallbackType,
|
|
27
|
+
fallbackType = _ref$fallbackType === void 0 ? 'person' : _ref$fallbackType,
|
|
26
28
|
imageUrl = _ref.imageUrl,
|
|
27
29
|
badges = _ref.badges,
|
|
28
30
|
children = _ref.children,
|
|
@@ -47,9 +49,22 @@ var Avatar = function Avatar(_ref, ref) {
|
|
|
47
49
|
onError: function onError() {
|
|
48
50
|
return setImageError(true);
|
|
49
51
|
}
|
|
50
|
-
}) : children !== null && children !== void 0 ? children :
|
|
51
|
-
|
|
52
|
-
|
|
52
|
+
}) : children !== null && children !== void 0 ? children : function () {
|
|
53
|
+
switch (fallbackType) {
|
|
54
|
+
case 'person':
|
|
55
|
+
return /*#__PURE__*/jsx(IconPersonEmpty, {
|
|
56
|
+
size: "100%"
|
|
57
|
+
});
|
|
58
|
+
case 'company':
|
|
59
|
+
return /*#__PURE__*/jsx(IconCompanyEmpty, {
|
|
60
|
+
size: "100%"
|
|
61
|
+
});
|
|
62
|
+
default:
|
|
63
|
+
return /*#__PURE__*/jsx(IconPersonEmpty, {
|
|
64
|
+
size: "100%"
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}()
|
|
53
68
|
}), (badges === null || badges === void 0 ? void 0 : badges.bottom) && /*#__PURE__*/jsx(StyledBottomBadge, {
|
|
54
69
|
$size: size,
|
|
55
70
|
$bgColor: badges.bottom.bgColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Avatars/Avatar/index.tsx"],"sourcesContent":["'use client';\n\nimport { IconCompanyEmpty, IconPersonEmpty } from '@remember-web/icon';\nimport { divider, fixedBgWhite } from '@remember-web/mixin';\nimport type { ConvertTransientProps } from '@remember-web/shared';\nimport type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { StyledAvatarProps } from '@/Avatars/Avatar/styles';\nimport {\n AvatarContainer,\n StyledAvatar,\n StyledBottomBadge,\n StyledNotificationBadge,\n} from '@/Avatars/Avatar/styles';\n\nexport type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & {\n fallbackType?: 'person' | 'company';\n} & ComponentPropsWithoutRef<'div'>;\n\nconst Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (\n {\n size = 'medium',\n backgroundColor = fixedBgWhite,\n border = { color: divider, width: '1px' },\n rounded = true,\n fallbackType = 'person',\n imageUrl,\n badges,\n children,\n ...rest\n }: AvatarProps,\n ref\n) => {\n const [imageError, setImageError] = useState(false);\n\n return (\n <AvatarContainer ref={ref} {...rest}>\n <StyledAvatar\n $size={size}\n $backgroundColor={backgroundColor}\n $border={border}\n $rounded={rounded}\n $badges={badges}\n >\n {!imageError && imageUrl ? (\n <img\n src={imageUrl}\n loading=\"lazy\"\n alt=\"avatar\"\n onError={() => setImageError(true)}\n />\n ) : (\n children ??\n (() => {\n switch (fallbackType) {\n case 'person':\n return <IconPersonEmpty size=\"100%\" />;\n case 'company':\n return <IconCompanyEmpty size=\"100%\" />;\n default:\n return <IconPersonEmpty size=\"100%\" />;\n }\n })()\n )}\n </StyledAvatar>\n\n {badges?.bottom && (\n <StyledBottomBadge $size={size} $bgColor={badges.bottom.bgColor}>\n {badges.bottom.content}\n </StyledBottomBadge>\n )}\n\n {badges?.notification && <StyledNotificationBadge $size={size} />}\n </AvatarContainer>\n );\n};\n\nexport default forwardRef(Avatar);\n"],"names":["size","backgroundColor","color","width","rounded","fallbackType","rest","imageError","setImageError","ref","$size","$backgroundColor","$border","$rounded","$badges","children","src","loading","alt","$bgColor"],"mappings":";;;;;;;;;;AAAa;AAAA;AAAA;AAoBb;AAaK;AAXDA;;AACAC;;;AACWC;AAAgBC;AAAa;;AACxCC;;AACAC;;;;AAIGC;AAIL;;AAAOC;AAAYC;AAEnB;AACmBC;AAAS;;AAEtBC;AACAC;AACAC;AACAC;AACAC;AAAgBC;AAIZC;AACAC;AACAC;;;AACkC;;AAKlC;AACE;;AAC0BlB;AAAW;AACrC;;AAC2BA;AAAW;AACtC;;AAC0BA;AAAW;AACvC;AACF;AACD;AAIkBU;AAAaS;AAAgCJ;AACxC;AAIwBL;AAAY;AAAG;AAGvE;AAEA;;"}
|
|
@@ -47,7 +47,7 @@ var typographySize = {
|
|
|
47
47
|
xsmall: 12
|
|
48
48
|
};
|
|
49
49
|
var AvatarContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n position: relative;\n display: inline-block;\n\n"])));
|
|
50
|
-
var StyledAvatar = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), mixin.contents999, function (_ref) {
|
|
50
|
+
var StyledAvatar = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n border-radius: 4px;\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), mixin.contents999, function (_ref) {
|
|
51
51
|
var $size = _ref.$size;
|
|
52
52
|
return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n width: ", "px;\n max-width: ", "px;\n max-height: ", "px;\n font-size: ", "px;\n "])), avatarSize[$size], avatarSize[$size], avatarSize[$size], typographySize[$size]);
|
|
53
53
|
}, function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":";;;;;;;;;;;;AASO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMC,eAAe,GAAG;AAC7BP,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAME,qBAAqB,GAAG;AACnCR,EAAAA,QAAQ,EAAE,CAAC;AACXC,EAAAA,OAAO,EAAE,CAAC;AACVC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMG,cAAc,GAAG;AAC5BT,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAiBO,IAAMI,eAAe,GAAGC,uBAAM,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,uDAAA,CAAA,CAAA,CAAA;IAM5BC,YAAY,GAAGJ,uBAAM,CAACC,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,uCAAA,CAAA,CAAA,sMAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string | null;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string } | null;\n notification?: boolean | null;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n border-radius: 4px;\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
|
@@ -42,14 +42,14 @@ export interface StyledAvatarProps {
|
|
|
42
42
|
color?: NonNullable<CSSProperties['borderColor']>;
|
|
43
43
|
};
|
|
44
44
|
$rounded?: boolean;
|
|
45
|
-
$imageUrl?: string;
|
|
45
|
+
$imageUrl?: string | null;
|
|
46
46
|
$backgroundColor?: CSSProperties['backgroundColor'];
|
|
47
47
|
$badges?: {
|
|
48
48
|
bottom?: {
|
|
49
49
|
content: ReactNode;
|
|
50
50
|
bgColor?: string;
|
|
51
|
-
};
|
|
52
|
-
notification?: boolean;
|
|
51
|
+
} | null;
|
|
52
|
+
notification?: boolean | null;
|
|
53
53
|
};
|
|
54
54
|
}
|
|
55
55
|
export declare const AvatarContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;CAQjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;CAQ1B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;KACnD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatars/Avatar/styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtD,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;CAQjC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;CAQ1B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,OAAO,UAAU,CAAC;IAC/B,OAAO,CAAC,EAAE;QACR,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;QAClD,KAAK,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;KACnD,CAAC;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gBAAgB,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACpD,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE;YAAE,OAAO,EAAE,SAAS,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QACzD,YAAY,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;KAC/B,CAAC;CACH;AAED,eAAO,MAAM,eAAe,gNAI3B,CAAC;AAEF,eAAO,MAAM,YAAY,8NA8CxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;WACrB,MAAM,sBAAsB;;GAkBpC,CAAC;AAEF,eAAO,MAAM,uBAAuB;WAC3B,MAAM,4BAA4B;GAY1C,CAAC"}
|
|
@@ -40,7 +40,7 @@ var typographySize = {
|
|
|
40
40
|
xsmall: 12
|
|
41
41
|
};
|
|
42
42
|
var AvatarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n\n"])));
|
|
43
|
-
var StyledAvatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), contents999, function (_ref) {
|
|
43
|
+
var StyledAvatar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ", ";\n border-radius: 4px;\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ", "\n }\n"])), contents999, function (_ref) {
|
|
44
44
|
var $size = _ref.$size;
|
|
45
45
|
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", "px;\n max-width: ", "px;\n max-height: ", "px;\n font-size: ", "px;\n "])), avatarSize[$size], avatarSize[$size], avatarSize[$size], typographySize[$size]);
|
|
46
46
|
}, function (_ref2) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string };\n notification?: boolean;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":";;;;;AASO,IAAMA,UAAU,GAAG;AACxBC,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMC,eAAe,GAAG;AAC7BP,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAME,qBAAqB,GAAG;AACnCR,EAAAA,QAAQ,EAAE,CAAC;AACXC,EAAAA,OAAO,EAAE,CAAC;AACVC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,MAAM,EAAE,CAAC;AACTC,EAAAA,KAAK,EAAE,CAAC;AACRC,EAAAA,MAAM,EAAE;AACV;AAEO,IAAMG,cAAc,GAAG;AAC5BT,EAAAA,QAAQ,EAAE,EAAE;AACZC,EAAAA,OAAO,EAAE,EAAE;AACXC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE,EAAE;AACVC,EAAAA,KAAK,EAAE,EAAE;AACTC,EAAAA,MAAM,EAAE;AACV;AAiBO,IAAMI,eAAe,GAAGC,MAAM,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,uDAAA,CAAA,CAAA,CAAA;IAM5BC,YAAY,GAAGJ,MAAM,CAACC,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAAA,CAAA,sMAAA,EAAA,
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Avatars/Avatar/styles.ts"],"sourcesContent":["import {\n bg300,\n contents000,\n contents999,\n secondary100,\n} from '@remember-web/mixin';\nimport type { CSSProperties, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nexport const avatarSize = {\n xxxlarge: 72,\n xxlarge: 64,\n xlarge: 56,\n large: 48,\n medium: 40,\n small: 32,\n xsmall: 24,\n};\n\nexport const bottomBadgeSize = {\n xxxlarge: 18,\n xxlarge: 18,\n xlarge: 18,\n large: 18,\n medium: 16,\n small: 14,\n xsmall: 10,\n};\n\nexport const notificationBadgeSize = {\n xxxlarge: 6,\n xxlarge: 6,\n xlarge: 6,\n large: 6,\n medium: 4,\n small: 4,\n xsmall: 4,\n};\n\nexport const typographySize = {\n xxxlarge: 36,\n xxlarge: 32,\n xlarge: 24,\n large: 24,\n medium: 20,\n small: 16,\n xsmall: 12,\n};\n\nexport interface StyledAvatarProps {\n $size: keyof typeof avatarSize;\n $border?: {\n width?: NonNullable<CSSProperties['borderWidth']>;\n color?: NonNullable<CSSProperties['borderColor']>;\n };\n $rounded?: boolean;\n $imageUrl?: string | null;\n $backgroundColor?: CSSProperties['backgroundColor'];\n $badges?: {\n bottom?: { content: ReactNode; bgColor?: string } | null;\n notification?: boolean | null;\n };\n}\n\nexport const AvatarContainer = styled.div`\n position: relative;\n display: inline-block;\n\n`;\n\nexport const StyledAvatar = styled.div<StyledAvatarProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1 / 1;\n box-sizing: border-box;\n contain: strict;\n font-weight: 600;\n color: ${contents999};\n border-radius: 4px;\n \n ${({ $size }) => css`\n width: ${avatarSize[$size]}px;\n max-width: ${avatarSize[$size]}px;\n max-height: ${avatarSize[$size]}px;\n font-size: ${typographySize[$size]}px;\n `}\n \n ${({ $border }) =>\n $border &&\n css`\n border: ${$border.width} solid ${$border.color};\n `}\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n \n ${({ $backgroundColor }) => css`\n background-color: ${$backgroundColor};\n `}\n \n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n \n ${({ $rounded }) =>\n $rounded &&\n css`\n border-radius: 50%;\n `}\n }\n`;\n\nexport const StyledBottomBadge = styled.div<{\n $size: keyof typeof bottomBadgeSize;\n $bgColor?: string;\n}>`\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid ${bg300};\n overflow: hidden;\n \n ${({ $size, $bgColor = contents000 }) => css`\n width: ${bottomBadgeSize[$size]}px;\n height: ${bottomBadgeSize[$size]}px; \n background-color: ${$bgColor};\n `}\n`;\n\nexport const StyledNotificationBadge = styled.div<{\n $size: keyof typeof notificationBadgeSize;\n}>`\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 50%;\n background-color: ${secondary100};\n \n ${({ $size }) => css`\n width: ${notificationBadgeSize[$size]}px;\n height: ${notificationBadgeSize[$size]}px;\n `}\n`;\n"],"names":["avatarSize","xxxlarge","xxlarge","xlarge","large","medium","small","xsmall","bottomBadgeSize","notificationBadgeSize","typographySize","AvatarContainer","styled","div","_templateObject","_taggedTemplateLiteral","StyledAvatar","_templateObject2","contents999","_ref","$size","css","_templateObject3","_ref2","$border","_templateObject4","width","color","_ref3","$rounded","_templateObject5","_ref4","$backgroundColor","_templateObject6","_ref5","_templateObject7","StyledBottomBadge","_templateObject8","bg300","_ref6","_ref6$$bgColor","$bgColor","contents000","_templateObject9","StyledNotificationBadge","_templateObject10","secondary100","_ref7","_templateObject11"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/primitive",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"description": "Remember Web Primitive Components",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/remember-web-packages/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@radix-ui/react-separator": "^1.0.3",
|
|
42
42
|
"@radix-ui/react-switch": "^1.0.3",
|
|
43
43
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
44
|
-
"@remember-web/icon": "^0.4.
|
|
44
|
+
"@remember-web/icon": "^0.4.4",
|
|
45
45
|
"@remember-web/mixin": "^0.3.2",
|
|
46
46
|
"@remember-web/shared": "^0.1.2"
|
|
47
47
|
},
|
|
@@ -26,6 +26,10 @@ const meta = {
|
|
|
26
26
|
options: [undefined, IMAGE_URL],
|
|
27
27
|
control: { type: 'select' },
|
|
28
28
|
},
|
|
29
|
+
fallbackType: {
|
|
30
|
+
options: ['person', 'company'],
|
|
31
|
+
control: { type: 'radio' },
|
|
32
|
+
},
|
|
29
33
|
children: {
|
|
30
34
|
options: [undefined, '가'],
|
|
31
35
|
control: { type: 'radio' },
|
|
@@ -43,6 +47,7 @@ export const Default: Story = {
|
|
|
43
47
|
args: {
|
|
44
48
|
rounded: true,
|
|
45
49
|
size: 'medium',
|
|
50
|
+
fallbackType: 'person',
|
|
46
51
|
backgroundColor: bg200,
|
|
47
52
|
},
|
|
48
53
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { IconCompanyEmpty, IconPersonEmpty } from '@remember-web/icon';
|
|
4
4
|
import { divider, fixedBgWhite } from '@remember-web/mixin';
|
|
5
5
|
import type { ConvertTransientProps } from '@remember-web/shared';
|
|
6
6
|
import type { ComponentPropsWithoutRef, ForwardRefRenderFunction } from 'react';
|
|
@@ -14,8 +14,9 @@ import {
|
|
|
14
14
|
StyledNotificationBadge,
|
|
15
15
|
} from '@/Avatars/Avatar/styles';
|
|
16
16
|
|
|
17
|
-
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> &
|
|
18
|
-
|
|
17
|
+
export type AvatarProps = Partial<ConvertTransientProps<StyledAvatarProps>> & {
|
|
18
|
+
fallbackType?: 'person' | 'company';
|
|
19
|
+
} & ComponentPropsWithoutRef<'div'>;
|
|
19
20
|
|
|
20
21
|
const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
|
|
21
22
|
{
|
|
@@ -23,6 +24,7 @@ const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
|
|
|
23
24
|
backgroundColor = fixedBgWhite,
|
|
24
25
|
border = { color: divider, width: '1px' },
|
|
25
26
|
rounded = true,
|
|
27
|
+
fallbackType = 'person',
|
|
26
28
|
imageUrl,
|
|
27
29
|
badges,
|
|
28
30
|
children,
|
|
@@ -49,7 +51,17 @@ const Avatar: ForwardRefRenderFunction<HTMLDivElement, AvatarProps> = (
|
|
|
49
51
|
onError={() => setImageError(true)}
|
|
50
52
|
/>
|
|
51
53
|
) : (
|
|
52
|
-
children ??
|
|
54
|
+
children ??
|
|
55
|
+
(() => {
|
|
56
|
+
switch (fallbackType) {
|
|
57
|
+
case 'person':
|
|
58
|
+
return <IconPersonEmpty size="100%" />;
|
|
59
|
+
case 'company':
|
|
60
|
+
return <IconCompanyEmpty size="100%" />;
|
|
61
|
+
default:
|
|
62
|
+
return <IconPersonEmpty size="100%" />;
|
|
63
|
+
}
|
|
64
|
+
})()
|
|
53
65
|
)}
|
|
54
66
|
</StyledAvatar>
|
|
55
67
|
|
|
@@ -54,11 +54,11 @@ export interface StyledAvatarProps {
|
|
|
54
54
|
color?: NonNullable<CSSProperties['borderColor']>;
|
|
55
55
|
};
|
|
56
56
|
$rounded?: boolean;
|
|
57
|
-
$imageUrl?: string;
|
|
57
|
+
$imageUrl?: string | null;
|
|
58
58
|
$backgroundColor?: CSSProperties['backgroundColor'];
|
|
59
59
|
$badges?: {
|
|
60
|
-
bottom?: { content: ReactNode; bgColor?: string };
|
|
61
|
-
notification?: boolean;
|
|
60
|
+
bottom?: { content: ReactNode; bgColor?: string } | null;
|
|
61
|
+
notification?: boolean | null;
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
64
|
|
|
@@ -78,6 +78,7 @@ export const StyledAvatar = styled.div<StyledAvatarProps>`
|
|
|
78
78
|
contain: strict;
|
|
79
79
|
font-weight: 600;
|
|
80
80
|
color: ${contents999};
|
|
81
|
+
border-radius: 4px;
|
|
81
82
|
|
|
82
83
|
${({ $size }) => css`
|
|
83
84
|
width: ${avatarSize[$size]}px;
|