@metamask/design-system-react-native 0.30.1 → 0.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -1
- package/dist/components/BannerAlert/BannerAlert.cjs +2 -5
- package/dist/components/BannerAlert/BannerAlert.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.cjs +4 -7
- package/dist/components/BannerAlert/BannerAlert.constants.cjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts +1 -2
- package/dist/components/BannerAlert/BannerAlert.constants.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.constants.mjs +4 -7
- package/dist/components/BannerAlert/BannerAlert.constants.mjs.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.cts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.d.mts.map +1 -1
- package/dist/components/BannerAlert/BannerAlert.mjs +3 -6
- package/dist/components/BannerAlert/BannerAlert.mjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.cjs +5 -8
- 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 +6 -9
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/BottomSheetFooter/BottomSheetFooter.cjs +1 -1
- package/dist/components/BottomSheetFooter/BottomSheetFooter.cjs.map +1 -1
- package/dist/components/BottomSheetFooter/BottomSheetFooter.mjs +1 -1
- package/dist/components/BottomSheetFooter/BottomSheetFooter.mjs.map +1 -1
- package/dist/components/BottomSheetHeader/BottomSheetHeader.cjs +1 -1
- package/dist/components/BottomSheetHeader/BottomSheetHeader.cjs.map +1 -1
- package/dist/components/BottomSheetHeader/BottomSheetHeader.mjs +1 -1
- package/dist/components/BottomSheetHeader/BottomSheetHeader.mjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.cjs.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts +1 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts +1 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs +2 -0
- package/dist/components/ButtonIcon/ButtonIcon.constants.mjs.map +1 -1
- package/dist/components/ButtonSemantic/index.cjs +3 -1
- package/dist/components/ButtonSemantic/index.cjs.map +1 -1
- package/dist/components/ButtonSemantic/index.d.cts +1 -0
- package/dist/components/ButtonSemantic/index.d.cts.map +1 -1
- package/dist/components/ButtonSemantic/index.d.mts +1 -0
- package/dist/components/ButtonSemantic/index.d.mts.map +1 -1
- package/dist/components/ButtonSemantic/index.mjs +1 -0
- package/dist/components/ButtonSemantic/index.mjs.map +1 -1
- package/dist/components/Content/Content.cjs +2 -2
- package/dist/components/Content/Content.cjs.map +1 -1
- package/dist/components/Content/Content.d.cts.map +1 -1
- package/dist/components/Content/Content.d.mts.map +1 -1
- package/dist/components/Content/Content.mjs +3 -3
- package/dist/components/Content/Content.mjs.map +1 -1
- package/dist/components/FilterButton/FilterButton.cjs +1 -1
- package/dist/components/FilterButton/FilterButton.cjs.map +1 -1
- package/dist/components/FilterButton/FilterButton.mjs +2 -2
- package/dist/components/FilterButton/FilterButton.mjs.map +1 -1
- package/dist/components/FilterButton/index.cjs +2 -1
- package/dist/components/FilterButton/index.cjs.map +1 -1
- package/dist/components/FilterButton/index.d.cts +1 -1
- package/dist/components/FilterButton/index.d.cts.map +1 -1
- package/dist/components/FilterButton/index.d.mts +1 -1
- package/dist/components/FilterButton/index.d.mts.map +1 -1
- package/dist/components/FilterButton/index.mjs +1 -1
- package/dist/components/FilterButton/index.mjs.map +1 -1
- package/dist/components/MainActionButton/MainActionButton.cjs +1 -1
- package/dist/components/MainActionButton/MainActionButton.cjs.map +1 -1
- package/dist/components/MainActionButton/MainActionButton.mjs +1 -1
- package/dist/components/MainActionButton/MainActionButton.mjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.cjs +28 -10
- package/dist/components/SectionHeader/SectionHeader.cjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.cts +3 -2
- package/dist/components/SectionHeader/SectionHeader.d.cts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.mts +3 -2
- package/dist/components/SectionHeader/SectionHeader.d.mts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.mjs +28 -10
- package/dist/components/SectionHeader/SectionHeader.mjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.cjs +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.cjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.cjs +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.cjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.cts +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.cts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.mts +3 -3
- package/dist/components/SegmentedControl/SegmentedControl.constants.d.mts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.constants.mjs +4 -4
- package/dist/components/SegmentedControl/SegmentedControl.constants.mjs.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.mjs +2 -2
- package/dist/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
- package/dist/components/SegmentedControl/index.cjs +3 -1
- package/dist/components/SegmentedControl/index.cjs.map +1 -1
- package/dist/components/SegmentedControl/index.d.cts +1 -0
- package/dist/components/SegmentedControl/index.d.cts.map +1 -1
- package/dist/components/SegmentedControl/index.d.mts +1 -0
- package/dist/components/SegmentedControl/index.d.mts.map +1 -1
- package/dist/components/SegmentedControl/index.mjs +1 -0
- package/dist/components/SegmentedControl/index.mjs.map +1 -1
- package/dist/components/Tag/Tag.constants.cjs +2 -2
- package/dist/components/Tag/Tag.constants.cjs.map +1 -1
- package/dist/components/Tag/Tag.constants.mjs +2 -2
- package/dist/components/Tag/Tag.constants.mjs.map +1 -1
- package/dist/components/TextButton/TextButton.types.cjs.map +1 -1
- package/dist/components/TextButton/TextButton.types.d.cts +5 -2
- package/dist/components/TextButton/TextButton.types.d.cts.map +1 -1
- package/dist/components/TextButton/TextButton.types.d.mts +5 -2
- package/dist/components/TextButton/TextButton.types.d.mts.map +1 -1
- package/dist/components/TextButton/TextButton.types.mjs.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.cjs +3 -5
- package/dist/components/TitleAlert/TitleAlert.cjs.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.d.cts +1 -3
- package/dist/components/TitleAlert/TitleAlert.d.cts.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.d.mts +1 -3
- package/dist/components/TitleAlert/TitleAlert.d.mts.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.mjs +3 -5
- package/dist/components/TitleAlert/TitleAlert.mjs.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.types.cjs.map +1 -1
- package/dist/components/TitleAlert/TitleAlert.types.d.cts +2 -2
- package/dist/components/TitleAlert/TitleAlert.types.d.mts +2 -2
- package/dist/components/TitleAlert/TitleAlert.types.mjs.map +1 -1
- package/dist/components/index.cjs +5 -2
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +3 -3
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +3 -3
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs +3 -3
- package/dist/components/index.mjs.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAG1E,eAAO,MAAM,oCAAoC
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAG1E,eAAO,MAAM,oCAAoC;;;;;CAKhD,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAKzE,CAAC"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { ButtonIconSize, IconSize } from "@metamask/design-system-shared";
|
|
2
2
|
// Mappings
|
|
3
3
|
export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
4
|
+
[ButtonIconSize.Xs]: 'h-5 w-5',
|
|
4
5
|
[ButtonIconSize.Sm]: 'h-6 w-6',
|
|
5
6
|
[ButtonIconSize.Md]: 'h-8 w-8',
|
|
6
7
|
[ButtonIconSize.Lg]: 'h-10 w-10',
|
|
7
8
|
};
|
|
8
9
|
export const MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
10
|
+
[ButtonIconSize.Xs]: IconSize.Sm,
|
|
9
11
|
[ButtonIconSize.Sm]: IconSize.Md,
|
|
10
12
|
[ButtonIconSize.Md]: IconSize.Lg,
|
|
11
13
|
[ButtonIconSize.Lg]: IconSize.Xl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAE1E,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAE1E,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,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;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Xs]: 'h-5 w-5',\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Xs]: IconSize.Sm,\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ButtonSemanticSeverity = exports.ButtonSemantic = void 0;
|
|
3
|
+
exports.ButtonSemanticSeverity = exports.ButtonSemantic = exports.ButtonSemanticSize = void 0;
|
|
4
|
+
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "ButtonSemanticSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonSemanticSize; } });
|
|
4
6
|
var ButtonSemantic_1 = require("./ButtonSemantic.cjs");
|
|
5
7
|
Object.defineProperty(exports, "ButtonSemantic", { enumerable: true, get: function () { return ButtonSemantic_1.ButtonSemantic; } });
|
|
6
8
|
var ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uEAAoE;AAA3D,0HAAA,kBAAkB,OAAA;AAC3B,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemanticSize } from '@metamask/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemanticSize } from '@metamask/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
|
|
@@ -37,7 +37,7 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
|
|
|
37
37
|
</BoxRow_1.BoxRow>) : null}
|
|
38
38
|
</BoxColumn_1.BoxColumn>
|
|
39
39
|
{/* Value and subvalue Column */}
|
|
40
|
-
{value || subvalue ? (<BoxColumn_1.BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow
|
|
40
|
+
{value || subvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
|
|
41
41
|
<TextOrChildren_1.TextOrChildren textProps={{
|
|
42
42
|
variant: design_system_shared_1.TextVariant.BodySm,
|
|
43
43
|
fontWeight: design_system_shared_1.FontWeight.Medium,
|
|
@@ -47,7 +47,7 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
|
|
|
47
47
|
{subvalue}
|
|
48
48
|
</TextOrChildren_1.TextOrChildren>
|
|
49
49
|
</BoxRow_1.BoxRow>) : null}>
|
|
50
|
-
{value ? (<BoxRow_1.BoxRow
|
|
50
|
+
{value ? (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
|
|
51
51
|
<TextOrChildren_1.TextOrChildren textProps={{
|
|
52
52
|
variant: design_system_shared_1.TextVariant.BodyMd,
|
|
53
53
|
fontWeight: design_system_shared_1.FontWeight.Medium,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAQwC;AACxC,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,gDAAmC;AACnC,gFAAmE;AAEnE,+DAA6D;AAGtD,MAAM,OAAO,GAA2B,CAAC,EAC9C,iBAAiB,GAAG,+CAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,uCAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,0CAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,qBAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,+BAAc,CAClB;UAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,qBAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,qBAAS,CACR,UAAU,CAAC,CAAC,oCAAa,CAAC,GAAG,CAAC,CAC9B,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;kBAAA,CAAC,QAAQ,CACX;gBAAA,EAAE,+BAAc,CAClB;cAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,qBAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA5HW,QAAA,OAAO,WA4HlB;AAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column */}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/* Value and subvalue Column */}\n {value || subvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
|
|
@@ -4,7 +4,7 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
|
|
7
|
+
import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
|
|
8
8
|
import $React from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { Box } from "../Box/index.mjs";
|
|
@@ -38,7 +38,7 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
|
|
|
38
38
|
</BoxRow>) : null}
|
|
39
39
|
</BoxColumn>
|
|
40
40
|
{/* Value and subvalue Column */}
|
|
41
|
-
{value || subvalue ? (<BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow
|
|
41
|
+
{value || subvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
|
|
42
42
|
<TextOrChildren textProps={{
|
|
43
43
|
variant: TextVariant.BodySm,
|
|
44
44
|
fontWeight: FontWeight.Medium,
|
|
@@ -48,7 +48,7 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
|
|
|
48
48
|
{subvalue}
|
|
49
49
|
</TextOrChildren>
|
|
50
50
|
</BoxRow>) : null}>
|
|
51
|
-
{value ? (<BoxRow
|
|
51
|
+
{value ? (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
|
|
52
52
|
<TextOrChildren textProps={{
|
|
53
53
|
variant: TextVariant.BodyMd,
|
|
54
54
|
fontWeight: FontWeight.Medium,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EAAE,sBAAsB,EAAE,gCAA4B;AAG7D,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,iBAAiB,GAAG,wBAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,SAAS,CACR,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,MAAM,CACL,
|
|
1
|
+
{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column */}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/* Value and subvalue Column */}\n {value || subvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
|
|
@@ -33,7 +33,7 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
|
|
|
33
33
|
const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
|
|
34
34
|
const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
|
|
35
35
|
const effectiveVariant = variant ?? filterButtonGroup?.variant ?? design_system_shared_1.FilterButtonVariant.Primary;
|
|
36
|
-
const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.
|
|
36
|
+
const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.FilterButtonSize.Sm;
|
|
37
37
|
const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
|
|
38
38
|
const effectiveIsSelected = usesGroupSelection
|
|
39
39
|
? filterButtonGroup.value === value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAIwC;AACxC,+CAA0C;AAG1C,wDAA2C;AAC3C,4CAAoC;AACpC,4CAAoC;AAI7B,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,+CAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,0CAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,
|
|
1
|
+
{"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
|
|
@@ -4,7 +4,7 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import {
|
|
7
|
+
import { FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask/design-system-shared";
|
|
8
8
|
import $React, { useContext } from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { ButtonBase } from "../ButtonBase/index.mjs";
|
|
@@ -14,7 +14,7 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
|
|
|
14
14
|
const filterButtonGroup = useContext(FilterButtonGroupContext);
|
|
15
15
|
const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
|
|
16
16
|
const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
|
|
17
|
-
const effectiveSize = size ?? filterButtonGroup?.size ??
|
|
17
|
+
const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;
|
|
18
18
|
const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
|
|
19
19
|
const effectiveIsSelected = usesGroupSelection
|
|
20
20
|
? filterButtonGroup.value === value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,
|
|
1
|
+
{"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../ButtonBase';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <ButtonBase\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n textProps={{\n ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),\n ...textProps,\n }}\n startIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...startIconProps,\n }}\n endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),\n ...endIconProps,\n }}\n twClassName={(pressed) => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName\n }`;\n }\n\n return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName(pressed) : twClassName\n }`;\n }}\n textClassName={getTextAndIconClassName}\n iconClassName={getTextAndIconClassName}\n style={style}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FilterButton = exports.FilterButtonVariant = void 0;
|
|
3
|
+
exports.FilterButton = exports.FilterButtonVariant = exports.FilterButtonSize = void 0;
|
|
4
4
|
var design_system_shared_1 = require("@metamask/design-system-shared");
|
|
5
|
+
Object.defineProperty(exports, "FilterButtonSize", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonSize; } });
|
|
5
6
|
Object.defineProperty(exports, "FilterButtonVariant", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonVariant; } });
|
|
6
7
|
var FilterButton_1 = require("./FilterButton.cjs");
|
|
7
8
|
Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return FilterButton_1.FilterButton; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,wHAAA,gBAAgB,OAAA;AAChB,2HAAA,mBAAmB,OAAA;AAErB,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { FilterButtonVariant } from "@metamask/design-system-shared";
|
|
1
|
+
export { FilterButtonSize, FilterButtonVariant, } from "@metamask/design-system-shared";
|
|
2
2
|
export { FilterButton } from "./FilterButton.cjs";
|
|
3
3
|
export type { FilterButtonProps } from "./FilterButton.types.cjs";
|
|
4
4
|
//# sourceMappingURL=index.d.cts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { FilterButtonVariant } from "@metamask/design-system-shared";
|
|
1
|
+
export { FilterButtonSize, FilterButtonVariant, } from "@metamask/design-system-shared";
|
|
2
2
|
export { FilterButton } from "./FilterButton.mjs";
|
|
3
3
|
export type { FilterButtonProps } from "./FilterButton.types.mjs";
|
|
4
4
|
//# sourceMappingURL=index.d.mts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
|
|
@@ -12,7 +12,7 @@ const Text_1 = require("../Text/index.cjs");
|
|
|
12
12
|
const MainActionButton = ({ iconName, label, iconProps, labelProps, onPress, onPressIn, onPressOut, style, isDisabled = false, twClassName = '', ...props }) => {
|
|
13
13
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
14
14
|
return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} accessible onPress={!isDisabled ? onPress : undefined} onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={({ pressed }) => {
|
|
15
|
-
const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-
|
|
15
|
+
const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-3 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
|
|
16
16
|
const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
|
|
17
17
|
return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];
|
|
18
18
|
}} {...props}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainActionButton.cjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAG1B,4CAAoD;AACpD,gFAAmE;AACnE,4CAAmE;AAI5D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,WAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,WAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,WAAI,CACR;MAAA,GACF;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,gBAAgB,oBA0D3B","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-
|
|
1
|
+
{"version":3,"file":"MainActionButton.cjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAG1B,4CAAoD;AACpD,gFAAmE;AACnE,4CAAmE;AAI5D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,WAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,WAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,WAAI,CACR;MAAA,GACF;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,gBAAgB,oBA0D3B","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-3 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}
|
|
@@ -13,7 +13,7 @@ import { Text, FontWeight, TextColor, TextVariant } from "../Text/index.mjs";
|
|
|
13
13
|
export const MainActionButton = ({ iconName, label, iconProps, labelProps, onPress, onPressIn, onPressOut, style, isDisabled = false, twClassName = '', ...props }) => {
|
|
14
14
|
const tw = useTailwind();
|
|
15
15
|
return (<ButtonAnimated disabled={isDisabled} accessible onPress={!isDisabled ? onPress : undefined} onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={({ pressed }) => {
|
|
16
|
-
const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-
|
|
16
|
+
const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-3 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
|
|
17
17
|
const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
|
|
18
18
|
return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];
|
|
19
19
|
}} {...props}>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MainActionButton.mjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAG1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACpD,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,0BAAgB;AAInE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,IAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,GACF;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-
|
|
1
|
+
{"version":3,"file":"MainActionButton.mjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAG1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACpD,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,0BAAgB;AAInE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,IAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,GACF;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-3 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}
|
|
@@ -8,6 +8,7 @@ const design_system_shared_1 = require("@metamask/design-system-shared");
|
|
|
8
8
|
const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
|
|
9
9
|
const react_1 = __importDefault(require("react"));
|
|
10
10
|
const react_native_1 = require("react-native");
|
|
11
|
+
const Box_1 = require("../Box/index.cjs");
|
|
11
12
|
const BoxRow_1 = require("../BoxRow/index.cjs");
|
|
12
13
|
const Icon_1 = require("../Icon/index.cjs");
|
|
13
14
|
/**
|
|
@@ -17,14 +18,15 @@ const Icon_1 = require("../Icon/index.cjs");
|
|
|
17
18
|
*
|
|
18
19
|
* @param sectionHeaderProps - Component props
|
|
19
20
|
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
20
|
-
* @param sectionHeaderProps.titleAccessory - Optional
|
|
21
|
+
* @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)
|
|
22
|
+
* @param sectionHeaderProps.children - Optional full-width content below the header row
|
|
21
23
|
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
22
24
|
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
23
25
|
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
24
26
|
* @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
|
|
25
27
|
* @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
|
|
26
28
|
* @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
|
|
27
|
-
* @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
|
|
29
|
+
* @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
|
|
28
30
|
* @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
|
|
29
31
|
* @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
|
|
30
32
|
* @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
|
|
@@ -33,19 +35,31 @@ const Icon_1 = require("../Icon/index.cjs");
|
|
|
33
35
|
* @returns The rendered SectionHeader layout.
|
|
34
36
|
*/
|
|
35
37
|
const SectionHeader = (sectionHeaderProps) => {
|
|
36
|
-
const { title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
|
|
38
|
+
const { title, children, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
|
|
37
39
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
38
40
|
const resolvedEndIconName = endIconName ??
|
|
39
41
|
(isInteractive && !endAccessory ? design_system_shared_1.IconName.ArrowRight : undefined);
|
|
40
|
-
const resolvedStartAccessory = startIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.
|
|
41
|
-
const resolvedEndAccessory = resolvedEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.
|
|
42
|
-
const
|
|
42
|
+
const resolvedStartAccessory = startIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Sm} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
|
|
43
|
+
const resolvedEndAccessory = resolvedEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Sm} color={design_system_shared_1.IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
|
|
44
|
+
const hasAccessories = Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);
|
|
45
|
+
const titleRow = title ? (<BoxRow_1.BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} twClassName={(0, design_system_shared_1.mergeTwClassName)(hasAccessories ? 'w-full shrink min-w-0' : '', titleWrapperProps?.twClassName)} textProps={{
|
|
43
46
|
variant: design_system_shared_1.TextVariant.HeadingMd,
|
|
44
47
|
color: design_system_shared_1.TextColor.TextDefault,
|
|
45
48
|
...titleProps,
|
|
46
49
|
}}>
|
|
47
50
|
{title}
|
|
48
51
|
</BoxRow_1.BoxRow>) : null;
|
|
52
|
+
let mainContent = null;
|
|
53
|
+
if (titleRow) {
|
|
54
|
+
mainContent = hasAccessories ? (<Box_1.Box twClassName="shrink min-w-0">{titleRow}</Box_1.Box>) : (titleRow);
|
|
55
|
+
}
|
|
56
|
+
const headerRow = (<BoxRow_1.BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
57
|
+
{mainContent}
|
|
58
|
+
</BoxRow_1.BoxRow>);
|
|
59
|
+
const body = children ? (<Box_1.Box gap={1}>
|
|
60
|
+
{headerRow}
|
|
61
|
+
{children}
|
|
62
|
+
</Box_1.Box>) : (headerRow);
|
|
49
63
|
if (isInteractive) {
|
|
50
64
|
const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
|
|
51
65
|
const isDisabled = Boolean(disabled);
|
|
@@ -54,13 +68,17 @@ const SectionHeader = (sectionHeaderProps) => {
|
|
|
54
68
|
const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
|
|
55
69
|
return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
|
|
56
70
|
}} {...props}>
|
|
57
|
-
|
|
58
|
-
{titleRow}
|
|
59
|
-
</BoxRow_1.BoxRow>
|
|
71
|
+
{body}
|
|
60
72
|
</react_native_1.Pressable>);
|
|
61
73
|
}
|
|
74
|
+
if (children) {
|
|
75
|
+
return (<Box_1.Box {...props} gap={1} style={style} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-4 pb-2 pt-3', twClassName)}>
|
|
76
|
+
{headerRow}
|
|
77
|
+
{children}
|
|
78
|
+
</Box_1.Box>);
|
|
79
|
+
}
|
|
62
80
|
return (<BoxRow_1.BoxRow {...props} gap={1} style={style} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-4 pb-2 pt-3', twClassName)} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
63
|
-
{
|
|
81
|
+
{mainContent}
|
|
64
82
|
</BoxRow_1.BoxRow>);
|
|
65
83
|
};
|
|
66
84
|
exports.SectionHeader = SectionHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAOwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAyC;AAEzC,gDAAmC;AACnC,4CAA+B;AAI/B
|
|
1
|
+
{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n IconColor,\n IconName,\n IconSize,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/**\n * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\n * Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.\n *\n * @param sectionHeaderProps - Component props\n * @param sectionHeaderProps.title - Title content for the inner row (required)\n * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)\n * @param sectionHeaderProps.children - Optional full-width content below the header row\n * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set\n * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided\n * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`\n * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press\n * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)\n * @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row\n *\n * @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = (\n sectionHeaderProps,\n) => {\n const {\n title,\n children,\n titleAccessory,\n titleProps,\n titleWrapperProps,\n startAccessory,\n startIconName,\n startIconProps,\n endAccessory,\n endIconName,\n endIconProps,\n isInteractive,\n twClassName = '',\n style,\n ...props\n } = sectionHeaderProps;\n\n const tw = useTailwind();\n const resolvedEndIconName =\n endIconName ??\n (isInteractive && !endAccessory ? IconName.ArrowRight : undefined);\n\n const resolvedStartAccessory = startIconName ? (\n <Icon\n size={IconSize.Sm}\n color={IconColor.IconDefault}\n twClassName=\"shrink-0\"\n {...startIconProps}\n name={startIconName}\n />\n ) : (\n startAccessory\n );\n\n const resolvedEndAccessory = resolvedEndIconName ? (\n <Icon\n size={IconSize.Sm}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const hasAccessories =\n Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n twClassName={mergeTwClassName(\n hasAccessories ? 'w-full shrink min-w-0' : '',\n titleWrapperProps?.twClassName,\n )}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n let mainContent = null;\n if (titleRow) {\n mainContent = hasAccessories ? (\n <Box twClassName=\"shrink min-w-0\">{titleRow}</Box>\n ) : (\n titleRow\n );\n }\n\n const headerRow = (\n <BoxRow\n gap={1}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n );\n\n const body = children ? (\n <Box gap={1}>\n {headerRow}\n {children}\n </Box>\n ) : (\n headerRow\n );\n\n if (isInteractive) {\n const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;\n const isDisabled = Boolean(disabled);\n\n return (\n <Pressable\n accessibilityRole={accessibilityRole}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'px-4 pb-2 pt-3',\n twClassName,\n pressed && !isDisabled && 'opacity-70',\n );\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;\n }}\n {...props}\n >\n {body}\n </Pressable>\n );\n }\n\n if (children) {\n return (\n <Box\n {...props}\n gap={1}\n style={style}\n twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}\n >\n {headerRow}\n {children}\n </Box>\n );\n }\n\n return (\n <BoxRow\n {...props}\n gap={1}\n style={style}\n twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}
|