@metamask-previews/design-system-react 0.11.0-preview.3aca0bd → 0.11.0-preview.96aaa54
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/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/components/AvatarNetwork/AvatarNetwork.types.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.types.d.cts +8 -13
- package/dist/components/AvatarNetwork/AvatarNetwork.types.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.types.d.mts +8 -13
- package/dist/components/AvatarNetwork/AvatarNetwork.types.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.types.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs +3 -3
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs +3 -3
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs +3 -3
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs +3 -3
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.mjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs +3 -3
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs +3 -3
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map +1 -1
- package/dist/components/ButtonHero/ButtonHero.cjs +1 -1
- package/dist/components/ButtonHero/ButtonHero.cjs.map +1 -1
- package/dist/components/ButtonHero/ButtonHero.mjs +1 -1
- package/dist/components/ButtonHero/ButtonHero.mjs.map +1 -1
- package/dist/components/Icon/icons/Candlestick.cjs +1 -1
- package/dist/components/Icon/icons/Candlestick.cjs.map +1 -1
- package/dist/components/Icon/icons/Candlestick.mjs +1 -1
- package/dist/components/Icon/icons/Candlestick.mjs.map +1 -1
- package/dist/components/Input/Input.cjs +1 -1
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.mjs +1 -1
- package/dist/components/Input/Input.mjs.map +1 -1
- package/dist/components/TextButton/TextButton.cjs +4 -4
- package/dist/components/TextButton/TextButton.cjs.map +1 -1
- package/dist/components/TextButton/TextButton.mjs +4 -4
- package/dist/components/TextButton/TextButton.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 +5 -4
|
@@ -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-previews/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,kFAGiD;AACjD,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-previews/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-previews/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,kFAAyE;AAE5D,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-previews/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-previews/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,gDAAgD;AAEzE,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-previews/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,gDAAgD;AAEzE,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,gDAAgD;AAEzE,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-previews/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-previews/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,gDAAgD;AACjD,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-previews/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-previews/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-previews/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,gDAAgD;AACrF,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-previews/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,gDAAgD;AACrF,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-previews/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-previews/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,gFAGiD;AAF/C,sHAAA,cAAc,OAAA;AACd,uHAAA,eAAe,OAAA;AAEjB,+CAA0C;AAAjC,wGAAA,UAAU,OAAA","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/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-previews/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,gDAAgD;AACjD,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-previews/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,gDAAgD;AACjD,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,gDAAgD;AACjD,OAAO,EAAE,UAAU,EAAE,yBAAqB","sourcesContent":["export {\n AvatarBaseSize,\n AvatarBaseShape,\n} from '@metamask-previews/design-system-shared';\nexport { AvatarBase } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase.types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarNetwork component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarNetworkPropsShared & {\n /**\n * Optional prop to pass to the underlying img element.\n * Useful for overriding the default alt text which is the network name.\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
+
import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
|
|
3
|
-
|
|
4
|
+
/**
|
|
5
|
+
* AvatarNetwork component props (React platform-specific)
|
|
6
|
+
* Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
|
|
7
|
+
*/
|
|
8
|
+
export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarNetworkPropsShared & {
|
|
4
9
|
/**
|
|
5
|
-
* Optional
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
name?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Optional URL for the network image
|
|
11
|
-
* When provided, displays the image instead of fallback text
|
|
12
|
-
*/
|
|
13
|
-
src?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Optional prop to pass to the underlying img element
|
|
16
|
-
* Useful for overriding the default alt text which is the network name
|
|
10
|
+
* Optional prop to pass to the underlying img element.
|
|
11
|
+
* Useful for overriding the default alt text which is the network name.
|
|
17
12
|
*/
|
|
18
13
|
imageProps?: ComponentProps<'img'> & {
|
|
19
14
|
'data-testid'?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
|
|
@@ -1,19 +1,14 @@
|
|
|
1
|
+
import type { AvatarNetworkPropsShared } from "@metamask-previews/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
|
|
3
|
-
|
|
4
|
+
/**
|
|
5
|
+
* AvatarNetwork component props (React platform-specific)
|
|
6
|
+
* Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
|
|
7
|
+
*/
|
|
8
|
+
export type AvatarNetworkProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarNetworkPropsShared & {
|
|
4
9
|
/**
|
|
5
|
-
* Optional
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
name?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Optional URL for the network image
|
|
11
|
-
* When provided, displays the image instead of fallback text
|
|
12
|
-
*/
|
|
13
|
-
src?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Optional prop to pass to the underlying img element
|
|
16
|
-
* Useful for overriding the default alt text which is the network name
|
|
10
|
+
* Optional prop to pass to the underlying img element.
|
|
11
|
+
* Useful for overriding the default alt text which is the network name.
|
|
17
12
|
*/
|
|
18
13
|
imageProps?: ComponentProps<'img'> & {
|
|
19
14
|
'data-testid'?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,gDAAgD;AACxF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,wBAAwB,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional
|
|
1
|
+
{"version":3,"file":"AvatarNetwork.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarNetwork/AvatarNetwork.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarNetworkPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarNetwork component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarNetworkProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarNetworkPropsShared & {\n /**\n * Optional prop to pass to the underlying img element.\n * Useful for overriding the default alt text which is the network name.\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
|
|
@@ -74,9 +74,9 @@ exports.ButtonPrimary = (0, react_1.forwardRef)(({ className, isDanger, isInvers
|
|
|
74
74
|
!isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
|
|
75
75
|
isInverse &&
|
|
76
76
|
isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],
|
|
77
|
-
], 'focus-visible:ring-0', isInverse
|
|
78
|
-
? 'focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
|
|
79
|
-
: 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
|
|
77
|
+
], 'focus-visible:outline-none focus-visible:ring-0', isInverse
|
|
78
|
+
? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'
|
|
79
|
+
: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',
|
|
80
80
|
// Loading styles
|
|
81
81
|
isLoading && 'cursor-not-allowed',
|
|
82
82
|
// Disabled styles (but not loading)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,
|
|
1
|
+
{"version":3,"file":"ButtonPrimary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,yBAAyB;IACzB,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,sCAAsC;QACtC,mCAAmC;QACnC,SAAS,IAAI,yBAAyB;KACvC;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,0BAA0B;KACxC;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,yBAAyB;QACzB,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,CAAC,QAAQ;YACP,CAAC,SAAS,IAAI;YACZ,6BAA6B;YAC7B,gCAAgC;SACjC;QACH,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,8BAA8B;YAC9B,iCAAiC;SAClC;QACH,SAAS;YACP,CAAC,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACtE,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;KACtE,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nexport const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(\n (\n { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n ref,\n ) => {\n const isInteractive = !(isDisabled ?? isLoading);\n\n const mergedClassName = twMerge(\n // Default primary styles\n !isDanger &&\n !isInverse && [\n 'bg-icon-default text-primary-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-icon-default-pressed',\n ],\n // Danger styles\n isDanger &&\n !isInverse && [\n 'bg-error-default text-error-inverse',\n // Loading state uses pressed color\n isLoading && 'bg-error-default-pressed',\n ],\n // Inverse styles\n isInverse &&\n !isDanger && [\n 'bg-default text-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Inverse danger styles\n isInverse &&\n isDanger && [\n 'bg-default text-error-default',\n // Loading state uses pressed color\n isLoading && 'bg-default-pressed',\n ],\n // Hover/Active states - only applied when interactive\n isInteractive && [\n !isDanger &&\n !isInverse && [\n 'hover:bg-icon-default-hover',\n 'active:bg-icon-default-pressed',\n ],\n isDanger &&\n !isInverse && [\n 'hover:bg-error-default-hover',\n 'active:bg-error-default-pressed',\n ],\n isInverse &&\n !isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n isInverse &&\n isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n ],\n 'focus-visible:outline-none focus-visible:ring-0',\n isInverse\n ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n // Loading styles\n isLoading && 'cursor-not-allowed',\n // Disabled styles (but not loading)\n isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n className,\n );\n\n return (\n <ButtonBase\n ref={ref}\n className={mergedClassName}\n isDisabled={isDisabled}\n isLoading={isLoading}\n {...props}\n />\n );\n },\n);\n\nButtonPrimary.displayName = 'ButtonPrimary';\n"]}
|