@metamask/design-system-react 0.16.0 → 0.17.1
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 +26 -9
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -2
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -2
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.types.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.types.d.cts +6 -6
- package/dist/components/AvatarFavicon/AvatarFavicon.types.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.types.d.mts +6 -6
- package/dist/components/AvatarFavicon/AvatarFavicon.types.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.types.mjs.map +1 -1
- package/dist/components/AvatarFavicon/index.cjs +2 -2
- package/dist/components/AvatarFavicon/index.cjs.map +1 -1
- package/dist/components/AvatarFavicon/index.d.cts +1 -1
- package/dist/components/AvatarFavicon/index.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/index.d.mts +1 -1
- package/dist/components/AvatarFavicon/index.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/index.mjs +1 -1
- package/dist/components/AvatarFavicon/index.mjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.cjs +4 -3
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +2 -1
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.cjs.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.cts +2 -28
- package/dist/components/Checkbox/Checkbox.types.d.cts.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.mts +2 -28
- package/dist/components/Checkbox/Checkbox.types.d.mts.map +1 -1
- package/dist/components/Checkbox/Checkbox.types.mjs.map +1 -1
- package/dist/components/Input/Input.cjs +3 -3
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.d.cts +1 -1
- package/dist/components/Input/Input.d.cts.map +1 -1
- package/dist/components/Input/Input.d.mts +1 -1
- package/dist/components/Input/Input.d.mts.map +1 -1
- package/dist/components/Input/Input.mjs +3 -3
- package/dist/components/Input/Input.mjs.map +1 -1
- package/dist/components/Input/Input.types.cjs.map +1 -1
- package/dist/components/Input/Input.types.d.cts +1 -1
- package/dist/components/Input/Input.types.d.cts.map +1 -1
- package/dist/components/Input/Input.types.d.mts +1 -1
- package/dist/components/Input/Input.types.d.mts.map +1 -1
- package/dist/components/Input/Input.types.mjs.map +1 -1
- package/dist/components/Text/Text.cjs +5 -3
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.constants.cjs +60 -46
- package/dist/components/Text/Text.constants.cjs.map +1 -1
- package/dist/components/Text/Text.constants.d.cts +6 -3
- package/dist/components/Text/Text.constants.d.cts.map +1 -1
- package/dist/components/Text/Text.constants.d.mts +6 -3
- package/dist/components/Text/Text.constants.d.mts.map +1 -1
- package/dist/components/Text/Text.constants.mjs +17 -3
- package/dist/components/Text/Text.constants.mjs.map +1 -1
- package/dist/components/Text/Text.d.cts.map +1 -1
- package/dist/components/Text/Text.d.mts.map +1 -1
- package/dist/components/Text/Text.mjs +5 -3
- package/dist/components/Text/Text.mjs.map +1 -1
- package/dist/components/Text/Text.types.cjs.map +1 -1
- package/dist/components/Text/Text.types.d.cts +4 -39
- package/dist/components/Text/Text.types.d.cts.map +1 -1
- package/dist/components/Text/Text.types.d.mts +4 -39
- package/dist/components/Text/Text.types.d.mts.map +1 -1
- package/dist/components/Text/Text.types.mjs.map +1 -1
- package/dist/components/Text/index.cjs +7 -6
- package/dist/components/Text/index.cjs.map +1 -1
- package/dist/components/Text/index.d.cts +2 -1
- package/dist/components/Text/index.d.cts.map +1 -1
- package/dist/components/Text/index.d.mts +2 -1
- package/dist/components/Text/index.d.mts.map +1 -1
- package/dist/components/Text/index.mjs +2 -1
- package/dist/components/Text/index.mjs.map +1 -1
- package/dist/types/index.cjs +22 -145
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +20 -124
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +20 -124
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +17 -139
- package/dist/types/index.mjs.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.17.1]
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Expanded the `react` and `react-dom` peer dependency ranges to support React 19 consumers. ([#1089](https://github.com/MetaMask/metamask-design-system/pull/1089))
|
|
15
|
+
|
|
16
|
+
## [0.17.0]
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Updated `AvatarFavicon` type internals to use ADR-0003/ADR-0004 shared types; imports from `@metamask/design-system-react` are unchanged ([#1062](https://github.com/MetaMask/metamask-design-system/pull/1062))
|
|
21
|
+
- **BREAKING:** Migrated `Text` typography types (`TextVariant`, `TextColor`, `FontWeight`, `FontStyle`, `FontFamily`) to `@metamask/design-system-shared`; all imports through `@metamask/design-system-react` continue to work without change ([#1047](https://github.com/MetaMask/metamask-design-system/pull/1047))
|
|
22
|
+
- `FontWeight`, `FontStyle`, and `FontFamily` underlying string values changed to semantic identifiers (e.g. `FontWeight.Bold` was `'font-bold'`, now `'bold'`); idiomatic usage is unaffected
|
|
23
|
+
- Projects scanning `node_modules` for Tailwind class names must also scan `@metamask/design-system-shared`
|
|
24
|
+
- See [Migration Guide](./MIGRATION.md#from-version-0160-to-0170)
|
|
25
|
+
|
|
10
26
|
## [0.16.0]
|
|
11
27
|
|
|
12
28
|
### Changed
|
|
@@ -27,23 +43,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
27
43
|
|
|
28
44
|
### Changed
|
|
29
45
|
|
|
30
|
-
- **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))
|
|
46
|
+
- **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))
|
|
31
47
|
- No migration required for typical usage; continue importing from `@metamask/design-system-react` as before.
|
|
32
48
|
- Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
|
|
33
|
-
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
34
|
-
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
49
|
+
- Updated `@metamask/utils` peer dependency to `^11.11.0` ([#1033](https://github.com/MetaMask/metamask-design-system/pull/1033))
|
|
50
|
+
- Expanded `BannerBase` migration documentation to improve upgrade guidance for consumers moving between recent releases ([#1011](https://github.com/MetaMask/metamask-design-system/pull/1011))
|
|
35
51
|
|
|
36
52
|
## [0.13.0]
|
|
37
53
|
|
|
38
54
|
### Changed
|
|
39
55
|
|
|
40
|
-
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
56
|
+
- `FontWeight.Bold` and the `Text` component now treat the semantic bold slot as weight 600; Storybook moved to the `Geist-SemiBold` assets and the tokens now emit `--font-weight-bold: 600`, so update any hardcoded `font-weight: 700` references as outlined in MIGRATION.md#from-version-0120-to-0130 ([#1017](https://github.com/MetaMask/metamask-design-system/pull/1017))
|
|
41
57
|
- `BadgeWrapperPosition`, `BadgeWrapperPositionAnchorShape`, `BadgeWrapperCustomPosition`, and `BadgeWrapperPropsShared` now derive from const objects with `as const`/string-union typings per ADR-0003 and ADR-0004, so the same values are available to both React and React Native while your import statements continue to reference `@metamask/design-system-react` (or the platform-specific entry point) as before ([#1014](https://github.com/MetaMask/metamask-design-system/pull/1014); see https://github.com/MetaMask/decisions/blob/main/decisions/design-system/0003-enum-to-string-union-migration.md and MIGRATION.md#from-version-0120-to-0130).
|
|
42
|
-
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
58
|
+
- Documented the Button migration path that walks through prop, variant, and size mappings for both web and mobile, linking directly to MIGRATION.md#button-component so the release note, changelog, and migration guide share the same reference ([#999](https://github.com/MetaMask/metamask-design-system/pull/999))
|
|
43
59
|
|
|
44
60
|
### Fixed
|
|
45
61
|
|
|
46
|
-
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
62
|
+
- Restored a visible keyboard focus outline for `Checkbox` keyboard users by making the hidden input a Tailwind `peer` and mirroring its `peer-focus-visible` state onto the visible container so Tab navigation shows a clear indicator ([#1008](https://github.com/MetaMask/metamask-design-system/pull/1008))
|
|
47
63
|
|
|
48
64
|
## [0.12.0]
|
|
49
65
|
|
|
@@ -181,8 +197,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
181
197
|
### Added
|
|
182
198
|
|
|
183
199
|
- New icons (AppleLogo, Backspace, Candlestick, Clear, MetamaskFoxOutline) ([#798](https://github.com/MetaMask/metamask-design-system/pull/798))
|
|
184
|
-
|
|
185
|
-
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766)), ([#791](https://github.com/MetaMask/metamask-design-system/pull/791)), ([#795](https://github.com/MetaMask/metamask-design-system/pull/795)), ([#796](https://github.com/MetaMask/metamask-design-system/pull/796)), ([#794](https://github.com/MetaMask/metamask-design-system/pull/794)), ([#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
200
|
+
- Figma code connect files for all components ([#766](https://github.com/MetaMask/metamask-design-system/pull/766), [#791](https://github.com/MetaMask/metamask-design-system/pull/791), [#795](https://github.com/MetaMask/metamask-design-system/pull/795), [#796](https://github.com/MetaMask/metamask-design-system/pull/796), [#794](https://github.com/MetaMask/metamask-design-system/pull/794), [#792](https://github.com/MetaMask/metamask-design-system/pull/792))
|
|
186
201
|
|
|
187
202
|
### Changed
|
|
188
203
|
|
|
@@ -231,7 +246,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
231
246
|
- Full TypeScript support with type definitions and enums
|
|
232
247
|
- Tailwind CSS integration with design token support
|
|
233
248
|
|
|
234
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.
|
|
249
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.1...HEAD
|
|
250
|
+
[0.17.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.17.0...@metamask/design-system-react@0.17.1
|
|
251
|
+
[0.17.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.16.0...@metamask/design-system-react@0.17.0
|
|
235
252
|
[0.16.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.15.0...@metamask/design-system-react@0.16.0
|
|
236
253
|
[0.15.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.14.0...@metamask/design-system-react@0.15.0
|
|
237
254
|
[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
|
|
@@ -26,9 +26,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.AvatarFavicon = void 0;
|
|
27
27
|
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
28
28
|
const react_1 = __importStar(require("react"));
|
|
29
|
-
const types_1 = require("../../types/index.cjs");
|
|
30
29
|
const AvatarBase_1 = require("../AvatarBase/index.cjs");
|
|
31
|
-
exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size =
|
|
30
|
+
exports.AvatarFavicon = (0, react_1.forwardRef)(({ src, name = '', fallbackText, fallbackTextProps, className, size = design_system_shared_1.AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
|
|
32
31
|
const [finalFallbackText, setFinalFallbackText] = (0, react_1.useState)('');
|
|
33
32
|
const backupFallbackText = fallbackText || name?.[0] || '';
|
|
34
33
|
const altText = name || 'Dapp logo'; // TBC: Add localization for default text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAGwC;AACxC,+CAAoD;AAEpD,wDAA2C;AAI9B,QAAA,aAAa,GAAG,IAAA,kBAAU,EACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,wCAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,sCAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,uCACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '';\n const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n {...imageProps}\n onError={onErrorHandler}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,wGA6CzB,CAAC"}
|
|
@@ -4,10 +4,9 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { AvatarBaseShape } from "@metamask/design-system-shared";
|
|
7
|
+
import { AvatarBaseShape, AvatarFaviconSize } from "@metamask/design-system-shared";
|
|
8
8
|
import $React, { forwardRef, useState } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
|
-
import { AvatarFaviconSize } from "../../types/index.mjs";
|
|
11
10
|
import { AvatarBase } from "../AvatarBase/index.mjs";
|
|
12
11
|
export const AvatarFavicon = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarFaviconSize.Md, imageProps, ...props }, ref) => {
|
|
13
12
|
const [finalFallbackText, setFinalFallbackText] = useState('');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,iBAAiB,EAClB,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,aAAa,GAAG,UAAU,CACrC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,iBAAiB,CAAC,EAAE,EAC3B,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,yCAAyC;IAE9E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,KAChC,UAAU,EACd,OAAO,EAAE,cAAc,GACvB,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarFaviconSize,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarFaviconProps } from './AvatarFavicon.types';\n\nexport const AvatarFavicon = forwardRef<HTMLDivElement, AvatarFaviconProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarFaviconSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '';\n const altText = name || 'Dapp logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n {...imageProps}\n onError={onErrorHandler}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarFavicon.displayName = 'AvatarFavicon';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarFaviconProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarFaviconPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarFavicon component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type AvatarFaviconProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarFaviconPropsShared & {\n /**\n * Optional URL for the dapp favicon/logo\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the dapp name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import type { AvatarFaviconPropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
name?: string;
|
|
4
|
+
/**
|
|
5
|
+
* AvatarFavicon component props (React platform-specific)
|
|
6
|
+
* Extends shared props from @metamask/design-system-shared with React-specific platform concerns
|
|
7
|
+
*/
|
|
8
|
+
export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarFaviconPropsShared & {
|
|
9
9
|
/**
|
|
10
10
|
* Optional URL for the dapp favicon/logo
|
|
11
11
|
* When provided, displays the image instead of fallback text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.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":"AvatarFavicon.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAC/E,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,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
+
import type { AvatarFaviconPropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
name?: string;
|
|
4
|
+
/**
|
|
5
|
+
* AvatarFavicon component props (React platform-specific)
|
|
6
|
+
* Extends shared props from @metamask/design-system-shared with React-specific platform concerns
|
|
7
|
+
*/
|
|
8
|
+
export type AvatarFaviconProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarFaviconPropsShared & {
|
|
9
9
|
/**
|
|
10
10
|
* Optional URL for the dapp favicon/logo
|
|
11
11
|
* When provided, displays the image instead of fallback text
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarFavicon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.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":"AvatarFavicon.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAC/E,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,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;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":"AvatarFavicon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarFaviconProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Optional
|
|
1
|
+
{"version":3,"file":"AvatarFavicon.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/AvatarFavicon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarFaviconPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarFavicon component props (React platform-specific)\n * Extends shared props from @metamask/design-system-shared with React-specific platform concerns\n */\nexport type AvatarFaviconProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarFaviconPropsShared & {\n /**\n * Optional URL for the dapp favicon/logo\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the dapp name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.AvatarFavicon = exports.AvatarFaviconSize = void 0;
|
|
4
|
-
var
|
|
5
|
-
Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return
|
|
4
|
+
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarFaviconSize; } });
|
|
6
6
|
var AvatarFavicon_1 = require("./AvatarFavicon.cjs");
|
|
7
7
|
Object.defineProperty(exports, "AvatarFavicon", { enumerable: true, get: function () { return AvatarFavicon_1.AvatarFavicon; } });
|
|
8
8
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":";;;AAAA
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":";;;AAAA,uEAAmE;AAA1D,yHAAA,iBAAiB,OAAA;AAC1B,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { AvatarFaviconSize } from '@metamask/design-system-shared';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarFaviconSize } from "
|
|
1
|
+
export { AvatarFaviconSize } from "@metamask/design-system-shared";
|
|
2
2
|
export { AvatarFavicon } from "./AvatarFavicon.cjs";
|
|
3
3
|
export type { AvatarFaviconProps } from "./AvatarFavicon.types.cjs";
|
|
4
4
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;AACnE,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AvatarFaviconSize } from "
|
|
1
|
+
export { AvatarFaviconSize } from "@metamask/design-system-shared";
|
|
2
2
|
export { AvatarFavicon } from "./AvatarFavicon.mjs";
|
|
3
3
|
export type { AvatarFaviconProps } from "./AvatarFavicon.types.mjs";
|
|
4
4
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;AACnE,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarFavicon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,uCAAuC;AACnE,OAAO,EAAE,aAAa,EAAE,4BAAwB","sourcesContent":["export { AvatarFaviconSize } from '@metamask/design-system-shared';\nexport { AvatarFavicon } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon.types';\n"]}
|
|
@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.BannerBase = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
29
|
const types_1 = require("../../types/index.cjs");
|
|
29
30
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
@@ -42,10 +43,10 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
|
|
|
42
43
|
startAccessory,
|
|
43
44
|
react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
|
|
44
45
|
hasContent(title) &&
|
|
45
|
-
(isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant:
|
|
46
|
-
hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant:
|
|
46
|
+
(isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
|
|
47
|
+
hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
|
|
47
48
|
hasContent(children) &&
|
|
48
|
-
(isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant:
|
|
49
|
+
(isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
|
|
49
50
|
shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
|
|
50
51
|
react_1.default.createElement(Button_1.Button, { size: types_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
|
|
51
52
|
shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: types_1.IconName.Close, size: types_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
|
|
@@ -4,9 +4,10 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { FontWeight, TextVariant } from "@metamask/design-system-shared";
|
|
7
8
|
import $React, { forwardRef } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
|
-
import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize,
|
|
10
|
+
import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, BoxFlexDirection, IconName } from "../../types/index.mjs";
|
|
10
11
|
import { twMerge } from "../../utils/tw-merge.mjs";
|
|
11
12
|
import { Box } from "../Box/index.mjs";
|
|
12
13
|
import { Button } from "../Button/index.mjs";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> & {\n
|
|
1
|
+
{"version":3,"file":"Checkbox.types.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the input element.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the container div wrapping the checkbox icon.\n */\n checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n className?: string;\n }) &\n Record<string, unknown>;\n\n /**\n * Optional props to be passed to the check Icon component\n */\n checkedIconProps?: Partial<IconProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the Checkbox component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles for the outer container.\n */\n style?: React.CSSProperties;\n };\n"]}
|
|
@@ -1,43 +1,17 @@
|
|
|
1
|
+
import type { CheckboxPropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { IconProps } from "../Icon/index.cjs";
|
|
3
4
|
import type { TextProps } from "../Text/index.cjs";
|
|
4
|
-
export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & {
|
|
5
|
+
export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & CheckboxPropsShared & {
|
|
5
6
|
/**
|
|
6
7
|
* Required unique identifier for the checkbox input element.
|
|
7
8
|
* This is used for the input's ID and the label's htmlFor attributes.
|
|
8
9
|
*/
|
|
9
10
|
id: string;
|
|
10
|
-
/**
|
|
11
|
-
* Required prop to determine whether the checkbox is currently selected.
|
|
12
|
-
* This component is fully controlled, so you must manage this state
|
|
13
|
-
* in your parent component.
|
|
14
|
-
*/
|
|
15
|
-
isSelected: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Optional prop that when true, disables the checkbox.
|
|
18
|
-
*
|
|
19
|
-
* @default false
|
|
20
|
-
*/
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Optional prop that when true, displays the invalid/error state of the checkbox.
|
|
24
|
-
*
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
isInvalid?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Optional label prop that renders text or a React node as a label beside the checkbox.
|
|
30
|
-
*/
|
|
31
|
-
label?: React.ReactNode | string;
|
|
32
11
|
/**
|
|
33
12
|
* Optional props to be passed to the label's Text component
|
|
34
13
|
*/
|
|
35
14
|
labelProps?: Omit<Partial<TextProps>, 'children'>;
|
|
36
|
-
/**
|
|
37
|
-
* Required callback for when the checked state changes.
|
|
38
|
-
* Use this to update your state.
|
|
39
|
-
*/
|
|
40
|
-
onChange: (isSelected: boolean) => void;
|
|
41
15
|
/**
|
|
42
16
|
* Optional props passed to the input element.
|
|
43
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GAAG;
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -1,43 +1,17 @@
|
|
|
1
|
+
import type { CheckboxPropsShared } from "@metamask/design-system-shared";
|
|
1
2
|
import type { ComponentProps } from "react";
|
|
2
3
|
import type { IconProps } from "../Icon/index.mjs";
|
|
3
4
|
import type { TextProps } from "../Text/index.mjs";
|
|
4
|
-
export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & {
|
|
5
|
+
export type CheckboxProps = Omit<ComponentProps<'label'>, 'style' | 'className' | 'children' | 'htmlFor'> & CheckboxPropsShared & {
|
|
5
6
|
/**
|
|
6
7
|
* Required unique identifier for the checkbox input element.
|
|
7
8
|
* This is used for the input's ID and the label's htmlFor attributes.
|
|
8
9
|
*/
|
|
9
10
|
id: string;
|
|
10
|
-
/**
|
|
11
|
-
* Required prop to determine whether the checkbox is currently selected.
|
|
12
|
-
* This component is fully controlled, so you must manage this state
|
|
13
|
-
* in your parent component.
|
|
14
|
-
*/
|
|
15
|
-
isSelected: boolean;
|
|
16
|
-
/**
|
|
17
|
-
* Optional prop that when true, disables the checkbox.
|
|
18
|
-
*
|
|
19
|
-
* @default false
|
|
20
|
-
*/
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Optional prop that when true, displays the invalid/error state of the checkbox.
|
|
24
|
-
*
|
|
25
|
-
* @default false
|
|
26
|
-
*/
|
|
27
|
-
isInvalid?: boolean;
|
|
28
|
-
/**
|
|
29
|
-
* Optional label prop that renders text or a React node as a label beside the checkbox.
|
|
30
|
-
*/
|
|
31
|
-
label?: React.ReactNode | string;
|
|
32
11
|
/**
|
|
33
12
|
* Optional props to be passed to the label's Text component
|
|
34
13
|
*/
|
|
35
14
|
labelProps?: Omit<Partial<TextProps>, 'children'>;
|
|
36
|
-
/**
|
|
37
|
-
* Required callback for when the checked state changes.
|
|
38
|
-
* Use this to update your state.
|
|
39
|
-
*/
|
|
40
|
-
onChange: (isSelected: boolean) => void;
|
|
41
15
|
/**
|
|
42
16
|
* Optional props passed to the input element.
|
|
43
17
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GAAG;
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,CAAC,EACvB,OAAO,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAC/C,GACC,mBAAmB,GAAG;IACpB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CACf,cAAc,CAAC,OAAO,CAAC,EACvB,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAC7C,GAAG;QACF,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,CAAC;KACjC,CAAC;IAEF;;OAEG;IACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;QAClE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,GACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> & {\n
|
|
1
|
+
{"version":3,"file":"Checkbox.types.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CheckboxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'label'>,\n 'style' | 'className' | 'children' | 'htmlFor'\n> &\n CheckboxPropsShared & {\n /**\n * Required unique identifier for the checkbox input element.\n * This is used for the input's ID and the label's htmlFor attributes.\n */\n id: string;\n\n /**\n * Optional props to be passed to the label's Text component\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Optional props passed to the input element.\n */\n inputProps?: Omit<\n ComponentProps<'input'>,\n 'type' | 'checked' | 'onChange' | 'disabled'\n > & {\n [key: `data-${string}`]: string;\n };\n\n /**\n * Optional props passed to the container div wrapping the checkbox icon.\n */\n checkboxContainerProps?: (Omit<ComponentProps<'div'>, 'children'> & {\n className?: string;\n }) &\n Record<string, unknown>;\n\n /**\n * Optional props to be passed to the check Icon component\n */\n checkedIconProps?: Partial<IconProps>;\n /**\n * Optional prop for additional CSS classes to be applied to the Checkbox component.\n * These classes will be merged with the component's default classes using twMerge.\n */\n className?: string;\n /**\n * Optional CSS styles for the outer container.\n */\n style?: React.CSSProperties;\n };\n"]}
|
|
@@ -24,12 +24,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.Input = void 0;
|
|
27
|
+
const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
|
-
const types_1 = require("../../types/index.cjs");
|
|
29
29
|
const tw_merge_1 = require("../../utils/tw-merge.cjs");
|
|
30
30
|
const Text_constants_1 = require("../Text/Text.constants.cjs");
|
|
31
|
-
exports.Input = (0, react_1.forwardRef)(({ textVariant =
|
|
32
|
-
const mergedClassName = (0, tw_merge_1.twMerge)('w-full rounded border bg-default text-default outline-none transition-colors', 'border-transparent focus:border-primary-default focus:outline-none', 'placeholder:text-alternative', Text_constants_1.
|
|
31
|
+
exports.Input = (0, react_1.forwardRef)(({ textVariant = design_system_shared_1.TextVariant.BodyMd, isDisabled = false, isReadonly = false, className, style, ...rest }, ref) => {
|
|
32
|
+
const mergedClassName = (0, tw_merge_1.twMerge)('w-full rounded border bg-default text-default outline-none transition-colors', 'border-transparent focus:border-primary-default focus:outline-none', 'placeholder:text-alternative', Text_constants_1.TWCLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant], Text_constants_1.TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant], isDisabled && 'cursor-not-allowed opacity-50', className);
|
|
33
33
|
return (react_1.default.createElement("input", { ref: ref, className: mergedClassName, style: style, ...rest, disabled: isDisabled, readOnly: isReadonly }));
|
|
34
34
|
});
|
|
35
35
|
exports.Input.displayName = 'Input';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,
|
|
1
|
+
{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAA6D;AAC7D,+CAA0C;AAE1C,uDAA+C;AAC/C,+DAGgC;AAInB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,WAAW,GAAG,kCAAW,CAAC,MAAM,EAChC,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,8EAA8E,EAC9E,oEAAoE,EACpE,8BAA8B,EAC9B,kDAAiC,CAAC,WAAW,CAAC,EAC9C,mDAAkC,CAAC,WAAW,CAAC,EAC/C,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,yCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,IAAI,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { TextVariant } from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n TWCLASSMAP_TEXT_VARIANT_FONTSTYLE,\n TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n textVariant = TextVariant.BodyMd,\n isDisabled = false,\n isReadonly = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'w-full rounded border bg-default text-default outline-none transition-colors',\n 'border-transparent focus:border-primary-default focus:outline-none',\n 'placeholder:text-alternative',\n TWCLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],\n TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={mergedClassName}\n style={style}\n {...rest}\n disabled={isDisabled}\n readOnly={isReadonly}\n />\n );\n },\n);\n\nInput.displayName = 'Input';\n"]}
|