@metamask/design-system-react 0.13.0 → 0.14.0
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/CHANGELOG.md +12 -1
- package/dist/components/AvatarBase/AvatarBase.cjs +3 -3
- package/dist/components/AvatarBase/AvatarBase.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.cjs +21 -21
- package/dist/components/AvatarBase/AvatarBase.constants.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.d.cts +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.d.cts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.d.mts +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.d.mts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.mjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.constants.mjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.d.cts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.d.mts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs +1 -1
- package/dist/components/AvatarBase/AvatarBase.mjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.types.cjs.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.types.d.cts +4 -42
- package/dist/components/AvatarBase/AvatarBase.types.d.cts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.types.d.mts +4 -42
- package/dist/components/AvatarBase/AvatarBase.types.d.mts.map +1 -1
- package/dist/components/AvatarBase/AvatarBase.types.mjs.map +1 -1
- package/dist/components/AvatarBase/index.cjs +3 -3
- package/dist/components/AvatarBase/index.cjs.map +1 -1
- package/dist/components/AvatarBase/index.d.cts +1 -1
- package/dist/components/AvatarBase/index.d.cts.map +1 -1
- package/dist/components/AvatarBase/index.d.mts +1 -1
- package/dist/components/AvatarBase/index.d.mts.map +1 -1
- package/dist/components/AvatarBase/index.mjs +1 -1
- package/dist/components/AvatarBase/index.mjs.map +1 -1
- package/dist/types/index.cjs +18 -41
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +8 -46
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +8 -46
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +8 -48
- package/dist/types/index.mjs.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.14.0]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- **BREAKING:** Updated `AvatarBase` exports to consume shared const-object + string-union types rather than local enums, aligning React with shared cross-platform type contracts ([#1005](https://github.com/MetaMask/metamask-design-system/pull/1005)).
|
|
15
|
+
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
16
|
+
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
17
|
+
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033)).
|
|
18
|
+
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011)).
|
|
19
|
+
|
|
10
20
|
## [0.13.0]
|
|
11
21
|
|
|
12
22
|
### Changed
|
|
@@ -205,7 +215,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
205
215
|
- Full TypeScript support with type definitions and enums
|
|
206
216
|
- Tailwind CSS integration with design token support
|
|
207
217
|
|
|
208
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
218
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...HEAD
|
|
219
|
+
[0.14.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.13.0...@metamask/design-system-react@0.14.0
|
|
209
220
|
[0.13.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.12.0...@metamask/design-system-react@0.13.0
|
|
210
221
|
[0.12.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.11.0...@metamask/design-system-react@0.12.0
|
|
211
222
|
[0.11.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.10.0...@metamask/design-system-react@0.11.0
|
|
@@ -24,17 +24,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.AvatarBase = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
27
28
|
const react_slot_1 = require("@radix-ui/react-slot");
|
|
28
29
|
const react_1 = __importStar(require("react"));
|
|
29
|
-
const types_1 = require("../../types/index.cjs");
|
|
30
30
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
31
31
|
const Text_1 = require("../Text/index.cjs");
|
|
32
32
|
const AvatarBase_constants_1 = require("./AvatarBase.constants.cjs");
|
|
33
|
-
exports.AvatarBase = (0, react_1.forwardRef)(({ children, fallbackText, fallbackTextProps, className, size =
|
|
33
|
+
exports.AvatarBase = (0, react_1.forwardRef)(({ children, fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarBaseSize.Md, shape = design_system_shared_1.AvatarBaseShape.Circle, asChild, style, hasBorder = false, ...props }, ref) => {
|
|
34
34
|
const Component = asChild ? react_slot_1.Slot : 'div';
|
|
35
35
|
const mergedClassName = (0, tw_merge_1.twMerge)(
|
|
36
36
|
// Base styles
|
|
37
|
-
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape ===
|
|
37
|
+
'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section', shape === design_system_shared_1.AvatarBaseShape.Circle
|
|
38
38
|
? 'rounded-full'
|
|
39
39
|
: AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],
|
|
40
40
|
// Size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAC5C,+CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"AvatarBase.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,qDAA4C;AAC5C,+CAA0C;AAE1C,uDAA+C;AAC/C,4CAAmE;AAEnE,qEAKgC;AAGnB,QAAA,UAAU,GAAG,IAAA,kBAAU,EAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,qCAAc,CAAC,EAAE,EACxB,KAAK,GAAG,sCAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,sCAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,wDAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,8BAAC,WAAI,IACH,OAAO,EAAE,kBAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,gBAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,4CAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n (\n {\n children,\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n asChild,\n style,\n hasBorder = false,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n // Size\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n // Border\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n // Custom classes\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {fallbackText ? (\n <Text\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextMuted}\n asChild\n className=\"uppercase\"\n {...fallbackTextProps}\n >\n {/* asChild prop renders Text component as a span, it does not create an additional element */}\n <span>{fallbackText}</span>\n </Text>\n ) : (\n children\n )}\n </Component>\n );\n },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = void 0;
|
|
4
|
-
const
|
|
4
|
+
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
5
|
exports.TWCLASSMAP_AVATARBASE_SIZE_DIMENSION = {
|
|
6
|
-
[
|
|
7
|
-
[
|
|
8
|
-
[
|
|
9
|
-
[
|
|
10
|
-
[
|
|
6
|
+
[design_system_shared_1.AvatarBaseSize.Xs]: 'h-4 w-4',
|
|
7
|
+
[design_system_shared_1.AvatarBaseSize.Sm]: 'h-6 w-6',
|
|
8
|
+
[design_system_shared_1.AvatarBaseSize.Md]: 'h-8 w-8',
|
|
9
|
+
[design_system_shared_1.AvatarBaseSize.Lg]: 'h-10 w-10',
|
|
10
|
+
[design_system_shared_1.AvatarBaseSize.Xl]: 'h-12 w-12', // 48px
|
|
11
11
|
};
|
|
12
12
|
exports.TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION = {
|
|
13
|
-
[
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
17
|
-
[
|
|
13
|
+
[design_system_shared_1.AvatarBaseSize.Xs]: 'h-[18px] w-[18px]',
|
|
14
|
+
[design_system_shared_1.AvatarBaseSize.Sm]: 'h-[26px] w-[26px]',
|
|
15
|
+
[design_system_shared_1.AvatarBaseSize.Md]: 'h-[34px] w-[34px]',
|
|
16
|
+
[design_system_shared_1.AvatarBaseSize.Lg]: 'h-[44px] w-[44px]',
|
|
17
|
+
[design_system_shared_1.AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side
|
|
18
18
|
};
|
|
19
19
|
exports.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE = {
|
|
20
|
-
[
|
|
21
|
-
[
|
|
22
|
-
[
|
|
23
|
-
[
|
|
24
|
-
[
|
|
20
|
+
[design_system_shared_1.AvatarBaseSize.Xs]: 'rounded-sm',
|
|
21
|
+
[design_system_shared_1.AvatarBaseSize.Sm]: 'rounded-md',
|
|
22
|
+
[design_system_shared_1.AvatarBaseSize.Md]: 'rounded-lg',
|
|
23
|
+
[design_system_shared_1.AvatarBaseSize.Lg]: 'rounded-[10px]',
|
|
24
|
+
[design_system_shared_1.AvatarBaseSize.Xl]: 'rounded-xl', // 12px
|
|
25
25
|
};
|
|
26
26
|
exports.TWCLASSMAP_AVATARBASE_SIZE_BORDER = {
|
|
27
|
-
[
|
|
28
|
-
[
|
|
29
|
-
[
|
|
30
|
-
[
|
|
31
|
-
[
|
|
27
|
+
[design_system_shared_1.AvatarBaseSize.Xs]: 'border-background-default border',
|
|
28
|
+
[design_system_shared_1.AvatarBaseSize.Sm]: 'border-background-default border',
|
|
29
|
+
[design_system_shared_1.AvatarBaseSize.Md]: 'border-background-default border',
|
|
30
|
+
[design_system_shared_1.AvatarBaseSize.Lg]: 'border-background-default border-2',
|
|
31
|
+
[design_system_shared_1.AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border
|
|
32
32
|
};
|
|
33
33
|
//# sourceMappingURL=AvatarBase.constants.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"AvatarBase.constants.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":";;;AAAA,yEAAgE;AAEnD,QAAA,oCAAoC,GAG7C;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEW,QAAA,8CAA8C,GAGvD;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEW,QAAA,+CAA+C,GAGxD;IACF,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEW,QAAA,iCAAiC,GAC5C;IACE,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n {\n [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n };\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarBaseSize } from "
|
|
1
|
+
import { AvatarBaseSize } from "@metamask/design-system-shared";
|
|
2
2
|
export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
|
|
3
3
|
export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
|
|
4
4
|
export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.constants.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AvatarBaseSize } from "
|
|
1
|
+
import { AvatarBaseSize } from "@metamask/design-system-shared";
|
|
2
2
|
export declare const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
|
|
3
3
|
export declare const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<AvatarBaseSize, string>;
|
|
4
4
|
export declare const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<AvatarBaseSize, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.constants.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,eAAO,MAAM,oCAAoC,EAAE,MAAM,CACvD,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,8CAA8C,EAAE,MAAM,CACjE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,+CAA+C,EAAE,MAAM,CAClE,cAAc,EACd,MAAM,CAOP,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAO1E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.constants.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAEhE,MAAM,CAAC,MAAM,oCAAoC,GAG7C;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW,EAAE,OAAO;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,8CAA8C,GAGvD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB;IACxC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,mBAAmB,EAAE,oCAAoC;CAC/E,CAAC;AAEF,MAAM,CAAC,MAAM,+CAA+C,GAGxD;IACF,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY;IACjC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,gBAAgB;IACrC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAC5C;IACE,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,kCAAkC;IACvD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC;IACzD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,oCAAoC,EAAE,aAAa;CACzE,CAAC","sourcesContent":["import { AvatarBaseSize } from '@metamask/design-system-shared';\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_DIMENSION: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'h-4 w-4', // 16px\n [AvatarBaseSize.Sm]: 'h-6 w-6', // 24px\n [AvatarBaseSize.Md]: 'h-8 w-8', // 32px\n [AvatarBaseSize.Lg]: 'h-10 w-10', // 40px\n [AvatarBaseSize.Xl]: 'h-12 w-12', // 48px\n};\n\nexport const TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'h-[18px] w-[18px]', // 16px with 1px border on each side\n [AvatarBaseSize.Sm]: 'h-[26px] w-[26px]', // 24px with 1px border on each side\n [AvatarBaseSize.Md]: 'h-[34px] w-[34px]', // 32px with 1px border on each side\n [AvatarBaseSize.Lg]: 'h-[44px] w-[44px]', // 40px with 2px border on each side\n [AvatarBaseSize.Xl]: 'h-[52px] w-[52px]', // 48px with 2px border on each side\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE: Record<\n AvatarBaseSize,\n string\n> = {\n [AvatarBaseSize.Xs]: 'rounded-sm', // 4px\n [AvatarBaseSize.Sm]: 'rounded-md', // 6px\n [AvatarBaseSize.Md]: 'rounded-lg', // 8px\n [AvatarBaseSize.Lg]: 'rounded-[10px]', // 10px (No tailwind class for this)\n [AvatarBaseSize.Xl]: 'rounded-xl', // 12px\n};\n\nexport const TWCLASSMAP_AVATARBASE_SIZE_BORDER: Record<AvatarBaseSize, string> =\n {\n [AvatarBaseSize.Xs]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Sm]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Md]: 'border-background-default border', // 1px border\n [AvatarBaseSize.Lg]: 'border-background-default border-2', // 2px border\n [AvatarBaseSize.Xl]: 'border-background-default border-2', // 2px border\n };\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarBase.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarBase.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,cAAc;AAW1C,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,qGAsDtB,CAAC"}
|
|
@@ -4,10 +4,10 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { AvatarBaseSize, AvatarBaseShape } from "@metamask/design-system-shared";
|
|
7
8
|
import { Slot } from "@radix-ui/react-slot";
|
|
8
9
|
import $React, { forwardRef } from "react";
|
|
9
10
|
const React = $importDefault($React);
|
|
10
|
-
import { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
|
|
11
11
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
12
12
|
import { Text, FontWeight, TextVariant, TextColor } from "../Text/index.mjs";
|
|
13
13
|
import { TWCLASSMAP_AVATARBASE_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION, TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE, TWCLASSMAP_AVATARBASE_SIZE_BORDER } from "./AvatarBase.constants.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,IAAI,EAAE,6BAA6B;AAC5C,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAEnE,OAAO,EACL,oCAAoC,EACpC,8CAA8C,EAC9C,+CAA+C,EAC/C,iCAAiC,EAClC,mCAA+B;AAGhC,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,cAAc,CAAC,EAAE,EACxB,KAAK,GAAG,eAAe,CAAC,MAAM,EAC9B,OAAO,EACP,KAAK,EACL,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEzC,MAAM,eAAe,GAAG,OAAO;IAC7B,cAAc;IACd,6EAA6E,EAC7E,KAAK,KAAK,eAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,+CAA+C,CAAC,IAAI,CAAC;IACzD,OAAO;IACP,SAAS;QACP,CAAC,CAAC,8CAA8C,CAAC,IAAI,CAAC;QACtD,CAAC,CAAC,oCAAoC,CAAC,IAAI,CAAC;IAC9C,SAAS;IACT,SAAS,IAAI,iCAAiC,CAAC,IAAI,CAAC;IACpD,iBAAiB;IACjB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IACrE,YAAY,CAAC,CAAC,CAAC,CACd,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,EAC1B,OAAO,QACP,SAAS,EAAC,WAAW,KACjB,iBAAiB;QAGrB,kCAAO,YAAY,CAAQ,CACtB,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Text, FontWeight, TextVariant, TextColor } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = forwardRef<HTMLDivElement, AvatarBaseProps>(\n (\n {\n children,\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n asChild,\n style,\n hasBorder = false,\n ...props\n },\n ref,\n ) => {\n const Component = asChild ? Slot : 'div';\n\n const mergedClassName = twMerge(\n // Base styles\n 'inline-flex shrink-0 items-center justify-center overflow-hidden bg-section',\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size],\n // Size\n hasBorder\n ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size]\n : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size],\n // Border\n hasBorder && TWCLASSMAP_AVATARBASE_SIZE_BORDER[size],\n // Custom classes\n className,\n );\n\n return (\n <Component ref={ref} className={mergedClassName} style={style} {...props}>\n {fallbackText ? (\n <Text\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextMuted}\n asChild\n className=\"uppercase\"\n {...fallbackTextProps}\n >\n {/* asChild prop renders Text component as a span, it does not create an additional element */}\n <span>{fallbackText}</span>\n </Text>\n ) : (\n children\n )}\n </Component>\n );\n },\n);\n\nAvatarBase.displayName = 'AvatarBase';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"AvatarBase.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n AvatarBasePropsShared & {\n /**\n * Optional test id for querying in tests.\n */\n 'data-testid'?: string;\n /**\n * Optional props to be passed to the Text component when rendering fallback text\n * Only used when fallbackText is provided and no children\n */\n fallbackTextProps?: Partial<\n React.HTMLAttributes<HTMLSpanElement> & TextProps\n >;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n };\n"]}
|
|
@@ -1,32 +1,16 @@
|
|
|
1
|
+
import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
|
-
import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.cjs";
|
|
3
3
|
import type { TextProps } from "../Text/index.cjs";
|
|
4
|
-
export type AvatarBaseProps = ComponentProps<'div'> & {
|
|
4
|
+
export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* Not required if fallbackText is provided
|
|
6
|
+
* Optional test id for querying in tests.
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Optional text to display when no children are provided
|
|
12
|
-
*/
|
|
13
|
-
fallbackText?: string;
|
|
8
|
+
'data-testid'?: string;
|
|
14
9
|
/**
|
|
15
10
|
* Optional props to be passed to the Text component when rendering fallback text
|
|
16
11
|
* Only used when fallbackText is provided and no children
|
|
17
12
|
*/
|
|
18
13
|
fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
|
|
19
|
-
/**
|
|
20
|
-
* Optional prop for additional CSS classes to be applied to the AvatarBase component.
|
|
21
|
-
* These classes will be merged with the component's default classes using twMerge.
|
|
22
|
-
*/
|
|
23
|
-
className?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Optional prop to control the size of the AvatarBase
|
|
26
|
-
*
|
|
27
|
-
* @default AvatarBaseSize.Md
|
|
28
|
-
*/
|
|
29
|
-
size?: AvatarBaseSize;
|
|
30
14
|
/**
|
|
31
15
|
* Optional boolean that determines if the component should merge its props onto its immediate child
|
|
32
16
|
* instead of rendering a div element
|
|
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
|
|
|
34
18
|
* @default false
|
|
35
19
|
*/
|
|
36
20
|
asChild?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Optional CSS styles to be applied to the component.
|
|
39
|
-
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
40
|
-
*/
|
|
41
|
-
style?: React.CSSProperties;
|
|
42
|
-
/**
|
|
43
|
-
* Optional prop to control the shape of the AvatarBase
|
|
44
|
-
*
|
|
45
|
-
* @default AvatarBaseShape.Circle
|
|
46
|
-
*/
|
|
47
|
-
shape?: AvatarBaseShape;
|
|
48
|
-
/**
|
|
49
|
-
* Optional prop to include the border with the Avatar.
|
|
50
|
-
* For internal use only
|
|
51
|
-
*
|
|
52
|
-
* @default false
|
|
53
|
-
*/
|
|
54
|
-
hasBorder?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Optional prop to add a test id to the icon
|
|
57
|
-
*/
|
|
58
|
-
'data-testid'?: string;
|
|
59
21
|
};
|
|
60
22
|
//# sourceMappingURL=AvatarBase.types.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
|
|
@@ -1,32 +1,16 @@
|
|
|
1
|
+
import type { AvatarBasePropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
|
-
import type { AvatarBaseSize, AvatarBaseShape } from "../../types/index.mjs";
|
|
3
3
|
import type { TextProps } from "../Text/index.mjs";
|
|
4
|
-
export type AvatarBaseProps = ComponentProps<'div'> & {
|
|
4
|
+
export type AvatarBaseProps = ComponentProps<'div'> & AvatarBasePropsShared & {
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
7
|
-
* Not required if fallbackText is provided
|
|
6
|
+
* Optional test id for querying in tests.
|
|
8
7
|
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Optional text to display when no children are provided
|
|
12
|
-
*/
|
|
13
|
-
fallbackText?: string;
|
|
8
|
+
'data-testid'?: string;
|
|
14
9
|
/**
|
|
15
10
|
* Optional props to be passed to the Text component when rendering fallback text
|
|
16
11
|
* Only used when fallbackText is provided and no children
|
|
17
12
|
*/
|
|
18
13
|
fallbackTextProps?: Partial<React.HTMLAttributes<HTMLSpanElement> & TextProps>;
|
|
19
|
-
/**
|
|
20
|
-
* Optional prop for additional CSS classes to be applied to the AvatarBase component.
|
|
21
|
-
* These classes will be merged with the component's default classes using twMerge.
|
|
22
|
-
*/
|
|
23
|
-
className?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Optional prop to control the size of the AvatarBase
|
|
26
|
-
*
|
|
27
|
-
* @default AvatarBaseSize.Md
|
|
28
|
-
*/
|
|
29
|
-
size?: AvatarBaseSize;
|
|
30
14
|
/**
|
|
31
15
|
* Optional boolean that determines if the component should merge its props onto its immediate child
|
|
32
16
|
* instead of rendering a div element
|
|
@@ -34,27 +18,5 @@ export type AvatarBaseProps = ComponentProps<'div'> & {
|
|
|
34
18
|
* @default false
|
|
35
19
|
*/
|
|
36
20
|
asChild?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Optional CSS styles to be applied to the component.
|
|
39
|
-
* Should be used sparingly and only for dynamic styles that can't be achieved with className.
|
|
40
|
-
*/
|
|
41
|
-
style?: React.CSSProperties;
|
|
42
|
-
/**
|
|
43
|
-
* Optional prop to control the shape of the AvatarBase
|
|
44
|
-
*
|
|
45
|
-
* @default AvatarBaseShape.Circle
|
|
46
|
-
*/
|
|
47
|
-
shape?: AvatarBaseShape;
|
|
48
|
-
/**
|
|
49
|
-
* Optional prop to include the border with the Avatar.
|
|
50
|
-
* For internal use only
|
|
51
|
-
*
|
|
52
|
-
* @default false
|
|
53
|
-
*/
|
|
54
|
-
hasBorder?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Optional prop to add a test id to the icon
|
|
57
|
-
*/
|
|
58
|
-
'data-testid'?: string;
|
|
59
21
|
};
|
|
60
22
|
//# sourceMappingURL=AvatarBase.types.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AvatarBase.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,uCAAuC;AAC5E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,GACjD,qBAAqB,GAAG;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CACzB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,SAAS,CAClD,CAAC;IACF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"AvatarBase.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarBasePropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { TextProps } from '../Text';\n\nexport type AvatarBaseProps = ComponentProps<'div'> &\n AvatarBasePropsShared & {\n /**\n * Optional test id for querying in tests.\n */\n 'data-testid'?: string;\n /**\n * Optional props to be passed to the Text component when rendering fallback text\n * Only used when fallbackText is provided and no children\n */\n fallbackTextProps?: Partial<\n React.HTMLAttributes<HTMLSpanElement> & TextProps\n >;\n /**\n * Optional boolean that determines if the component should merge its props onto its immediate child\n * instead of rendering a div element\n *\n * @default false\n */\n asChild?: boolean;\n };\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.AvatarBase = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
|
|
4
|
-
var
|
|
5
|
-
Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return
|
|
6
|
-
Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return
|
|
4
|
+
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
|
|
6
|
+
Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
|
|
7
7
|
var AvatarBase_1 = require("./AvatarBase.cjs");
|
|
8
8
|
Object.defineProperty(exports, "AvatarBase", { enumerable: true, get: function () { return AvatarBase_1.AvatarBase; } });
|
|
9
9
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,sHAAA,cAAc,OAAA;AACd,uHAAA,eAAe,OAAA;AAEjB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarBaseSize, AvatarBaseShape } from "
|
|
1
|
+
export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
|
|
2
2
|
export { AvatarBase } from "./AvatarBase.cjs";
|
|
3
3
|
export type { AvatarBaseProps } from "./AvatarBase.types.cjs";
|
|
4
4
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarBaseSize, AvatarBaseShape } from "
|
|
1
|
+
export { AvatarBaseSize, AvatarBaseShape, } from "@metamask/design-system-shared";
|
|
2
2
|
export { AvatarBase } from "./AvatarBase.mjs";
|
|
3
3
|
export type { AvatarBaseProps } from "./AvatarBase.types.mjs";
|
|
4
4
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,GAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAC1C,YAAY,EAAE,eAAe,EAAE,+BAA2B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EAChB,uCAAuC;AACxC,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
|
package/dist/types/index.cjs
CHANGED
|
@@ -1,46 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.IconName = exports.IconColor = exports.IconSize = exports.TextButtonSize = exports.FontFamily = exports.TextTransform = exports.FontStyle = exports.OverflowWrap = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonSize = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.AvatarGroupVariant = exports.AvatarIconSeverity = exports.AvatarAccountVariant = exports.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
(function (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Represents a large avatar size (40px).
|
|
23
|
-
*/
|
|
24
|
-
AvatarBaseSize["Lg"] = "lg";
|
|
25
|
-
/**
|
|
26
|
-
* Represents an extra large avatar size (48px).
|
|
27
|
-
*/
|
|
28
|
-
AvatarBaseSize["Xl"] = "xl";
|
|
29
|
-
})(AvatarBaseSize || (exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseSize = AvatarBaseSize = {}));
|
|
30
|
-
/**
|
|
31
|
-
* Avatar - shape
|
|
32
|
-
*/
|
|
33
|
-
var AvatarShape;
|
|
34
|
-
(function (AvatarShape) {
|
|
35
|
-
/**
|
|
36
|
-
* Represents a circular Avatar.
|
|
37
|
-
*/
|
|
38
|
-
AvatarShape["Circle"] = "circle";
|
|
39
|
-
/**
|
|
40
|
-
* Represents a squared Avatar
|
|
41
|
-
*/
|
|
42
|
-
AvatarShape["Square"] = "square";
|
|
43
|
-
})(AvatarShape || (exports.AvatarBaseShape = exports.AvatarShape = AvatarShape = {}));
|
|
3
|
+
exports.IconName = exports.IconColor = exports.IconSize = exports.TextButtonSize = exports.FontFamily = exports.TextTransform = exports.FontStyle = exports.OverflowWrap = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.ButtonIconVariant = exports.ButtonIconSize = exports.ButtonVariant = exports.ButtonSize = exports.ButtonHeroSize = exports.ButtonTertiarySize = exports.ButtonSecondarySize = exports.ButtonPrimarySize = exports.ButtonBaseSize = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = exports.AvatarGroupVariant = exports.AvatarIconSeverity = exports.AvatarAccountVariant = exports.AvatarSize = exports.AvatarTokenSize = exports.AvatarNetworkSize = exports.AvatarIconSize = exports.AvatarGroupSize = exports.AvatarFaviconSize = exports.AvatarAccountSize = exports.AvatarBaseShape = exports.AvatarBaseSize = void 0;
|
|
4
|
+
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseSize; } });
|
|
6
|
+
Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return design_system_shared_1.AvatarBaseShape; } });
|
|
7
|
+
var design_system_shared_2 = require("@metamask/design-system-shared");
|
|
8
|
+
Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: function () { return design_system_shared_2.AvatarBaseSize; } });
|
|
9
|
+
var design_system_shared_3 = require("@metamask/design-system-shared");
|
|
10
|
+
Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_3.AvatarBaseSize; } });
|
|
11
|
+
var design_system_shared_4 = require("@metamask/design-system-shared");
|
|
12
|
+
Object.defineProperty(exports, "AvatarGroupSize", { enumerable: true, get: function () { return design_system_shared_4.AvatarBaseSize; } });
|
|
13
|
+
var design_system_shared_5 = require("@metamask/design-system-shared");
|
|
14
|
+
Object.defineProperty(exports, "AvatarIconSize", { enumerable: true, get: function () { return design_system_shared_5.AvatarBaseSize; } });
|
|
15
|
+
var design_system_shared_6 = require("@metamask/design-system-shared");
|
|
16
|
+
Object.defineProperty(exports, "AvatarNetworkSize", { enumerable: true, get: function () { return design_system_shared_6.AvatarBaseSize; } });
|
|
17
|
+
var design_system_shared_7 = require("@metamask/design-system-shared");
|
|
18
|
+
Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return design_system_shared_7.AvatarBaseSize; } });
|
|
19
|
+
var design_system_shared_8 = require("@metamask/design-system-shared");
|
|
20
|
+
Object.defineProperty(exports, "AvatarSize", { enumerable: true, get: function () { return design_system_shared_8.AvatarBaseSize; } });
|
|
44
21
|
/**
|
|
45
22
|
* AvatarAccount - variant
|
|
46
23
|
*/
|