@metamask-previews/design-system-react-native 0.30.0-preview.0a4d6f8 → 0.30.2-preview.2222cbb5
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 +16 -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/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/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 +10 -3
- package/dist/components/SectionHeader/SectionHeader.cjs.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.cts +1 -0
- package/dist/components/SectionHeader/SectionHeader.d.cts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.d.mts +1 -0
- package/dist/components/SectionHeader/SectionHeader.d.mts.map +1 -1
- package/dist/components/SectionHeader/SectionHeader.mjs +10 -3
- package/dist/components/SectionHeader/SectionHeader.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/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.30.2]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed `Content` value and subvalue to right-align in list rows when token amounts and fiat equivalents differ in length, including in `ListItem` ([#1257](https://github.com/MetaMask/metamask-design-system/pull/1257))
|
|
15
|
+
|
|
16
|
+
## [0.30.1]
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Fixed `BottomSheetDialog` pan callbacks to run on the UI thread, resolving broken slow-drag gesture ([#1253](https://github.com/MetaMask/metamask-design-system/pull/1253))
|
|
21
|
+
- Fixed `Tag` gap between icon and label from 4px to 2px to match design spec ([#1236](https://github.com/MetaMask/metamask-design-system/pull/1236))
|
|
22
|
+
|
|
10
23
|
## [0.30.0]
|
|
11
24
|
|
|
12
25
|
### Added
|
|
@@ -515,7 +528,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
515
528
|
- Full TypeScript support with type definitions and enums
|
|
516
529
|
- React Native integration with TWRNC preset support
|
|
517
530
|
|
|
518
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.
|
|
531
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...HEAD
|
|
532
|
+
[0.30.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.1...@metamask/design-system-react-native@0.30.2
|
|
533
|
+
[0.30.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.0...@metamask/design-system-react-native@0.30.1
|
|
519
534
|
[0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.29.0...@metamask/design-system-react-native@0.30.0
|
|
520
535
|
[0.29.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.28.0...@metamask/design-system-react-native@0.29.0
|
|
521
536
|
[0.28.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.27.0...@metamask/design-system-react-native@0.28.0
|
|
@@ -21,7 +21,7 @@ const BottomSheetFooter = ({ style, twClassName, buttonsAlignment = BottomSheetF
|
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
23
23
|
return (<react_native_1.View style={[
|
|
24
|
-
tw.style(isHorizontal ? 'flex-row' : 'flex-col', 'px-
|
|
24
|
+
tw.style(isHorizontal ? 'flex-row' : 'flex-col', 'px-4 py-0', twClassName),
|
|
25
25
|
style,
|
|
26
26
|
]} {...props}>
|
|
27
27
|
{secondaryButtonProps && (<Button_1.Button {...secondaryButtonProps} variant={Button_1.ButtonVariant.Secondary} style={[tw.style(buttonBaseClass), secondaryButtonProps.style]}/>)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetFooter.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetFooter/BottomSheetFooter.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,yBAAyB;AACzB,gDAAkD;AAIlD,2EAA6D;AAEtD,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,gBAAgB,GAAG,0CAAgB,CAAC,UAAU,EAC9C,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,YAAY,GAAG,gBAAgB,KAAK,0CAAgB,CAAC,UAAU,CAAC;IACtE,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IACjE,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,cAAc,GAClB,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAE/D,IAAI,CAAC,kBAAkB,IAAI,CAAC,oBAAoB,EAAE;QAChD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EACtC,WAAW,EACX,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,oBAAoB,IAAI,CACvB,CAAC,eAAM,CACL,IAAI,oBAAoB,CAAC,CACzB,OAAO,CAAC,CAAC,sBAAa,CAAC,SAAS,CAAC,CACjC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC/D,CACH,CACD;MAAA,CAAC,kBAAkB,IAAI,CACrB,CAAC,eAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,OAAO,CAAC,CAAC,sBAAa,CAAC,OAAO,CAAC,CAC/B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,cAAc,IAAI,QAAQ,CAAC;gBACrD,kBAAkB,CAAC,KAAK;aACzB,CAAC,EACF,CACH,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,iBAAiB,qBAkD5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\n// External dependencies.\nimport { Button, ButtonVariant } from '../Button';\n\n// Internal dependencies.\nimport type { BottomSheetFooterProps } from './BottomSheetFooter.types';\nimport { ButtonsAlignment } from './BottomSheetFooter.types';\n\nexport const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({\n style,\n twClassName,\n buttonsAlignment = ButtonsAlignment.Horizontal,\n primaryButtonProps,\n secondaryButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n const isHorizontal = buttonsAlignment === ButtonsAlignment.Horizontal;\n const buttonBaseClass = isHorizontal ? 'flex-1' : 'self-stretch';\n const gapClass = isHorizontal ? 'ml-4' : 'mt-4';\n const hasBothButtons =\n Boolean(primaryButtonProps) && Boolean(secondaryButtonProps);\n\n if (!primaryButtonProps && !secondaryButtonProps) {\n return null;\n }\n\n return (\n <View\n style={[\n tw.style(\n isHorizontal ? 'flex-row' : 'flex-col',\n 'px-
|
|
1
|
+
{"version":3,"file":"BottomSheetFooter.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetFooter/BottomSheetFooter.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,yBAAyB;AACzB,gDAAkD;AAIlD,2EAA6D;AAEtD,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,gBAAgB,GAAG,0CAAgB,CAAC,UAAU,EAC9C,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,YAAY,GAAG,gBAAgB,KAAK,0CAAgB,CAAC,UAAU,CAAC;IACtE,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IACjE,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,cAAc,GAClB,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAE/D,IAAI,CAAC,kBAAkB,IAAI,CAAC,oBAAoB,EAAE;QAChD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,mBAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EACtC,WAAW,EACX,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,oBAAoB,IAAI,CACvB,CAAC,eAAM,CACL,IAAI,oBAAoB,CAAC,CACzB,OAAO,CAAC,CAAC,sBAAa,CAAC,SAAS,CAAC,CACjC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC/D,CACH,CACD;MAAA,CAAC,kBAAkB,IAAI,CACrB,CAAC,eAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,OAAO,CAAC,CAAC,sBAAa,CAAC,OAAO,CAAC,CAC/B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,cAAc,IAAI,QAAQ,CAAC;gBACrD,kBAAkB,CAAC,KAAK;aACzB,CAAC,EACF,CACH,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,iBAAiB,qBAkD5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\n// External dependencies.\nimport { Button, ButtonVariant } from '../Button';\n\n// Internal dependencies.\nimport type { BottomSheetFooterProps } from './BottomSheetFooter.types';\nimport { ButtonsAlignment } from './BottomSheetFooter.types';\n\nexport const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({\n style,\n twClassName,\n buttonsAlignment = ButtonsAlignment.Horizontal,\n primaryButtonProps,\n secondaryButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n const isHorizontal = buttonsAlignment === ButtonsAlignment.Horizontal;\n const buttonBaseClass = isHorizontal ? 'flex-1' : 'self-stretch';\n const gapClass = isHorizontal ? 'ml-4' : 'mt-4';\n const hasBothButtons =\n Boolean(primaryButtonProps) && Boolean(secondaryButtonProps);\n\n if (!primaryButtonProps && !secondaryButtonProps) {\n return null;\n }\n\n return (\n <View\n style={[\n tw.style(\n isHorizontal ? 'flex-row' : 'flex-col',\n 'px-4 py-0',\n twClassName,\n ),\n style,\n ]}\n {...props}\n >\n {secondaryButtonProps && (\n <Button\n {...secondaryButtonProps}\n variant={ButtonVariant.Secondary}\n style={[tw.style(buttonBaseClass), secondaryButtonProps.style]}\n />\n )}\n {primaryButtonProps && (\n <Button\n {...primaryButtonProps}\n variant={ButtonVariant.Primary}\n style={[\n tw.style(buttonBaseClass, hasBothButtons && gapClass),\n primaryButtonProps.style,\n ]}\n />\n )}\n </View>\n );\n};\n"]}
|
|
@@ -22,7 +22,7 @@ export const BottomSheetFooter = ({ style, twClassName, buttonsAlignment = Butto
|
|
|
22
22
|
return null;
|
|
23
23
|
}
|
|
24
24
|
return (<View style={[
|
|
25
|
-
tw.style(isHorizontal ? 'flex-row' : 'flex-col', 'px-
|
|
25
|
+
tw.style(isHorizontal ? 'flex-row' : 'flex-col', 'px-4 py-0', twClassName),
|
|
26
26
|
style,
|
|
27
27
|
]} {...props}>
|
|
28
28
|
{secondaryButtonProps && (<Button {...secondaryButtonProps} variant={ButtonVariant.Secondary} style={[tw.style(buttonBaseClass), secondaryButtonProps.style]}/>)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetFooter.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetFooter/BottomSheetFooter.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,yBAAyB;AACzB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,4BAAkB;AAIlD,OAAO,EAAE,gBAAgB,EAAE,sCAAkC;AAE7D,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,EAC9C,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,gBAAgB,KAAK,gBAAgB,CAAC,UAAU,CAAC;IACtE,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IACjE,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,cAAc,GAClB,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAE/D,IAAI,CAAC,kBAAkB,IAAI,CAAC,oBAAoB,EAAE;QAChD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EACtC,WAAW,EACX,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,oBAAoB,IAAI,CACvB,CAAC,MAAM,CACL,IAAI,oBAAoB,CAAC,CACzB,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CACjC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC/D,CACH,CACD;MAAA,CAAC,kBAAkB,IAAI,CACrB,CAAC,MAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,OAAO,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAC/B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,cAAc,IAAI,QAAQ,CAAC;gBACrD,kBAAkB,CAAC,KAAK;aACzB,CAAC,EACF,CACH,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\n// External dependencies.\nimport { Button, ButtonVariant } from '../Button';\n\n// Internal dependencies.\nimport type { BottomSheetFooterProps } from './BottomSheetFooter.types';\nimport { ButtonsAlignment } from './BottomSheetFooter.types';\n\nexport const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({\n style,\n twClassName,\n buttonsAlignment = ButtonsAlignment.Horizontal,\n primaryButtonProps,\n secondaryButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n const isHorizontal = buttonsAlignment === ButtonsAlignment.Horizontal;\n const buttonBaseClass = isHorizontal ? 'flex-1' : 'self-stretch';\n const gapClass = isHorizontal ? 'ml-4' : 'mt-4';\n const hasBothButtons =\n Boolean(primaryButtonProps) && Boolean(secondaryButtonProps);\n\n if (!primaryButtonProps && !secondaryButtonProps) {\n return null;\n }\n\n return (\n <View\n style={[\n tw.style(\n isHorizontal ? 'flex-row' : 'flex-col',\n 'px-
|
|
1
|
+
{"version":3,"file":"BottomSheetFooter.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetFooter/BottomSheetFooter.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAEpC,yBAAyB;AACzB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,4BAAkB;AAIlD,OAAO,EAAE,gBAAgB,EAAE,sCAAkC;AAE7D,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,gBAAgB,GAAG,gBAAgB,CAAC,UAAU,EAC9C,kBAAkB,EAClB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,YAAY,GAAG,gBAAgB,KAAK,gBAAgB,CAAC,UAAU,CAAC;IACtE,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IACjE,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAChD,MAAM,cAAc,GAClB,OAAO,CAAC,kBAAkB,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAE/D,IAAI,CAAC,kBAAkB,IAAI,CAAC,oBAAoB,EAAE;QAChD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EACtC,WAAW,EACX,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,oBAAoB,IAAI,CACvB,CAAC,MAAM,CACL,IAAI,oBAAoB,CAAC,CACzB,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CACjC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC,EAC/D,CACH,CACD;MAAA,CAAC,kBAAkB,IAAI,CACrB,CAAC,MAAM,CACL,IAAI,kBAAkB,CAAC,CACvB,OAAO,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAC/B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,cAAc,IAAI,QAAQ,CAAC;gBACrD,kBAAkB,CAAC,KAAK;aACzB,CAAC,EACF,CACH,CACH;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\n// External dependencies.\nimport { Button, ButtonVariant } from '../Button';\n\n// Internal dependencies.\nimport type { BottomSheetFooterProps } from './BottomSheetFooter.types';\nimport { ButtonsAlignment } from './BottomSheetFooter.types';\n\nexport const BottomSheetFooter: React.FC<BottomSheetFooterProps> = ({\n style,\n twClassName,\n buttonsAlignment = ButtonsAlignment.Horizontal,\n primaryButtonProps,\n secondaryButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n const isHorizontal = buttonsAlignment === ButtonsAlignment.Horizontal;\n const buttonBaseClass = isHorizontal ? 'flex-1' : 'self-stretch';\n const gapClass = isHorizontal ? 'ml-4' : 'mt-4';\n const hasBothButtons =\n Boolean(primaryButtonProps) && Boolean(secondaryButtonProps);\n\n if (!primaryButtonProps && !secondaryButtonProps) {\n return null;\n }\n\n return (\n <View\n style={[\n tw.style(\n isHorizontal ? 'flex-row' : 'flex-col',\n 'px-4 py-0',\n twClassName,\n ),\n style,\n ]}\n {...props}\n >\n {secondaryButtonProps && (\n <Button\n {...secondaryButtonProps}\n variant={ButtonVariant.Secondary}\n style={[tw.style(buttonBaseClass), secondaryButtonProps.style]}\n />\n )}\n {primaryButtonProps && (\n <Button\n {...primaryButtonProps}\n variant={ButtonVariant.Primary}\n style={[\n tw.style(buttonBaseClass, hasBothButtons && gapClass),\n primaryButtonProps.style,\n ]}\n />\n )}\n </View>\n );\n};\n"]}
|
|
@@ -15,7 +15,7 @@ const BottomSheetHeader = ({ style, twClassName, children, onBack, backButtonPro
|
|
|
15
15
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
16
16
|
const startAccessory = onBack ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.ArrowLeft} onPress={onBack} size={ButtonIcon_1.ButtonIconSize.Md} {...backButtonProps}/>) : undefined;
|
|
17
17
|
const endAccessory = onClose ? (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.Close} onPress={onClose} size={ButtonIcon_1.ButtonIconSize.Md} {...closeButtonProps}/>) : undefined;
|
|
18
|
-
return (<HeaderBase_1.HeaderBase {...props} style={[tw.style('px-
|
|
18
|
+
return (<HeaderBase_1.HeaderBase {...props} style={[tw.style('px-2', twClassName), style]} startAccessory={startAccessory} endAccessory={endAccessory}>
|
|
19
19
|
{children}
|
|
20
20
|
</HeaderBase_1.HeaderBase>);
|
|
21
21
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetHeader.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAE1B,yBAAyB;AACzB,wDAA2D;AAC3D,wDAA2C;AAC3C,4CAAmC;AAI5B,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,iBAAiB,qBAuC5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n style,\n twClassName,\n children,\n onBack,\n backButtonProps,\n onClose,\n closeButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n\n const startAccessory = onBack ? (\n <ButtonIcon\n iconName={IconName.ArrowLeft}\n onPress={onBack}\n size={ButtonIconSize.Md}\n {...backButtonProps}\n />\n ) : undefined;\n\n const endAccessory = onClose ? (\n <ButtonIcon\n iconName={IconName.Close}\n onPress={onClose}\n size={ButtonIconSize.Md}\n {...closeButtonProps}\n />\n ) : undefined;\n return (\n <HeaderBase\n {...props}\n style={[tw.style('px-
|
|
1
|
+
{"version":3,"file":"BottomSheetHeader.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,8FAA4E;AAC5E,kDAA0B;AAE1B,yBAAyB;AACzB,wDAA2D;AAC3D,wDAA2C;AAC3C,4CAAmC;AAI5B,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,uBAAU,CACT,QAAQ,CAAC,CAAC,eAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,CACL,CAAC,uBAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,iBAAiB,qBAuC5B","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n style,\n twClassName,\n children,\n onBack,\n backButtonProps,\n onClose,\n closeButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n\n const startAccessory = onBack ? (\n <ButtonIcon\n iconName={IconName.ArrowLeft}\n onPress={onBack}\n size={ButtonIconSize.Md}\n {...backButtonProps}\n />\n ) : undefined;\n\n const endAccessory = onClose ? (\n <ButtonIcon\n iconName={IconName.Close}\n onPress={onClose}\n size={ButtonIconSize.Md}\n {...closeButtonProps}\n />\n ) : undefined;\n return (\n <HeaderBase\n {...props}\n style={[tw.style('px-2', twClassName), style]}\n startAccessory={startAccessory}\n endAccessory={endAccessory}\n >\n {children}\n </HeaderBase>\n );\n};\n"]}
|
|
@@ -16,7 +16,7 @@ export const BottomSheetHeader = ({ style, twClassName, children, onBack, backBu
|
|
|
16
16
|
const tw = useTailwind();
|
|
17
17
|
const startAccessory = onBack ? (<ButtonIcon iconName={IconName.ArrowLeft} onPress={onBack} size={ButtonIconSize.Md} {...backButtonProps}/>) : undefined;
|
|
18
18
|
const endAccessory = onClose ? (<ButtonIcon iconName={IconName.Close} onPress={onClose} size={ButtonIconSize.Md} {...closeButtonProps}/>) : undefined;
|
|
19
|
-
return (<HeaderBase {...props} style={[tw.style('px-
|
|
19
|
+
return (<HeaderBase {...props} style={[tw.style('px-2', twClassName), style]} startAccessory={startAccessory} endAccessory={endAccessory}>
|
|
20
20
|
{children}
|
|
21
21
|
</HeaderBase>);
|
|
22
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetHeader.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,yBAAyB;AACzB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAInC,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,CACL,CAAC,UAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n style,\n twClassName,\n children,\n onBack,\n backButtonProps,\n onClose,\n closeButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n\n const startAccessory = onBack ? (\n <ButtonIcon\n iconName={IconName.ArrowLeft}\n onPress={onBack}\n size={ButtonIconSize.Md}\n {...backButtonProps}\n />\n ) : undefined;\n\n const endAccessory = onClose ? (\n <ButtonIcon\n iconName={IconName.Close}\n onPress={onClose}\n size={ButtonIconSize.Md}\n {...closeButtonProps}\n />\n ) : undefined;\n return (\n <HeaderBase\n {...props}\n style={[tw.style('px-
|
|
1
|
+
{"version":3,"file":"BottomSheetHeader.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetHeader/BottomSheetHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,yBAAyB;AACzB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAInC,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,cAAc,GAAG,MAAM,CAAC,CAAC,CAAC,CAC9B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,MAAM,CAAC,CAChB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,CAC7B,CAAC,UAAU,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,gBAAgB,CAAC,EACrB,CACH,CAAC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO,CACL,CAAC,UAAU,CACT,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAC9C,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,YAAY,CAAC,CAAC,YAAY,CAAC,CAE3B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\n\nimport type { BottomSheetHeaderProps } from './BottomSheetHeader.types';\n\nexport const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({\n style,\n twClassName,\n children,\n onBack,\n backButtonProps,\n onClose,\n closeButtonProps,\n ...props\n}) => {\n const tw = useTailwind();\n\n const startAccessory = onBack ? (\n <ButtonIcon\n iconName={IconName.ArrowLeft}\n onPress={onBack}\n size={ButtonIconSize.Md}\n {...backButtonProps}\n />\n ) : undefined;\n\n const endAccessory = onClose ? (\n <ButtonIcon\n iconName={IconName.Close}\n onPress={onClose}\n size={ButtonIconSize.Md}\n {...closeButtonProps}\n />\n ) : undefined;\n return (\n <HeaderBase\n {...props}\n style={[tw.style('px-2', twClassName), style]}\n startAccessory={startAccessory}\n endAccessory={endAccessory}\n >\n {children}\n </HeaderBase>\n );\n};\n"]}
|
|
@@ -4,11 +4,13 @@ exports.MAP_BUTTONICON_SIZE_ICONSIZE = exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENS
|
|
|
4
4
|
const design_system_shared_1 = require("@metamask-previews/design-system-shared");
|
|
5
5
|
// Mappings
|
|
6
6
|
exports.TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
|
|
7
|
+
[design_system_shared_1.ButtonIconSize.Xs]: 'h-5 w-5',
|
|
7
8
|
[design_system_shared_1.ButtonIconSize.Sm]: 'h-6 w-6',
|
|
8
9
|
[design_system_shared_1.ButtonIconSize.Md]: 'h-8 w-8',
|
|
9
10
|
[design_system_shared_1.ButtonIconSize.Lg]: 'h-10 w-10',
|
|
10
11
|
};
|
|
11
12
|
exports.MAP_BUTTONICON_SIZE_ICONSIZE = {
|
|
13
|
+
[design_system_shared_1.ButtonIconSize.Xs]: design_system_shared_1.IconSize.Sm,
|
|
12
14
|
[design_system_shared_1.ButtonIconSize.Sm]: design_system_shared_1.IconSize.Md,
|
|
13
15
|
[design_system_shared_1.ButtonIconSize.Md]: design_system_shared_1.IconSize.Lg,
|
|
14
16
|
[design_system_shared_1.ButtonIconSize.Lg]: design_system_shared_1.IconSize.Xl,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAmF;AAEnF,WAAW;AACE,QAAA,oCAAoC,GAAG;IAClD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/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.cjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":";;;AAAA,kFAAmF;AAEnF,WAAW;AACE,QAAA,oCAAoC,GAAG;IAClD,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEW,QAAA,4BAA4B,GAAqC;IAC5E,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;IAChC,CAAC,qCAAc,CAAC,EAAE,CAAC,EAAE,+BAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask-previews/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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gDAAgD;AAGnF,eAAO,MAAM,oCAAoC
|
|
1
|
+
{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gDAAgD;AAGnF,eAAO,MAAM,oCAAoC;;;;;CAKhD,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAKzE,CAAC"}
|
|
@@ -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,gDAAgD;AAGnF,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,gDAAgD;AAGnF,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-previews/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,gDAAgD;AAEnF,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-previews/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,gDAAgD;AAEnF,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-previews/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"]}
|
|
@@ -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":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask-previews/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-previews/design-system-shared";
|
|
7
|
+
import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask-previews/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,gDAAgD;AACjD,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-previews/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"]}
|
|
@@ -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,8FAA4E;AAC5E,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-previews/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,8FAA4E;AAC5E,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-previews/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,sDAAsD;AAC5E,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-previews/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,sDAAsD;AAC5E,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-previews/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-previews/design-system-shared"
|
|
|
8
8
|
const design_system_twrnc_preset_1 = require("@metamask-previews/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
|
/**
|
|
@@ -18,6 +19,7 @@ const Icon_1 = require("../Icon/index.cjs");
|
|
|
18
19
|
* @param sectionHeaderProps - Component props
|
|
19
20
|
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
20
21
|
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
22
|
+
* @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories
|
|
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
|
|
@@ -33,7 +35,7 @@ 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);
|
|
@@ -46,6 +48,11 @@ const SectionHeader = (sectionHeaderProps) => {
|
|
|
46
48
|
}}>
|
|
47
49
|
{title}
|
|
48
50
|
</BoxRow_1.BoxRow>) : null;
|
|
51
|
+
const hasAccessories = Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);
|
|
52
|
+
const mainContent = titleRow || children ? (<Box_1.Box gap={1} twClassName={hasAccessories ? 'flex-1 min-w-0' : undefined}>
|
|
53
|
+
{titleRow}
|
|
54
|
+
{children}
|
|
55
|
+
</Box_1.Box>) : null;
|
|
49
56
|
if (isInteractive) {
|
|
50
57
|
const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
|
|
51
58
|
const isDisabled = Boolean(disabled);
|
|
@@ -55,12 +62,12 @@ const SectionHeader = (sectionHeaderProps) => {
|
|
|
55
62
|
return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
|
|
56
63
|
}} {...props}>
|
|
57
64
|
<BoxRow_1.BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
58
|
-
{
|
|
65
|
+
{mainContent}
|
|
59
66
|
</BoxRow_1.BoxRow>
|
|
60
67
|
</react_native_1.Pressable>);
|
|
61
68
|
}
|
|
62
69
|
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
|
-
{
|
|
70
|
+
{mainContent}
|
|
64
71
|
</BoxRow_1.BoxRow>);
|
|
65
72
|
};
|
|
66
73
|
exports.SectionHeader = SectionHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAOiD;AACjD,8FAA4E;AAC5E,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-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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 node to the right of `title` in the inner row\n * @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories\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; 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.Md}\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.Md}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n const hasAccessories =\n Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);\n\n const mainContent =\n titleRow || children ? (\n <Box gap={1} twClassName={hasAccessories ? 'flex-1 min-w-0' : undefined}>\n {titleRow}\n {children}\n </Box>\n ) : null;\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 <BoxRow\n gap={1}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n </Pressable>\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"]}
|
|
@@ -8,6 +8,7 @@ import type { SectionHeaderProps } from "./SectionHeader.types.cjs";
|
|
|
8
8
|
* @param sectionHeaderProps - Component props
|
|
9
9
|
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
10
10
|
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
11
|
+
* @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories
|
|
11
12
|
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
12
13
|
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
13
14
|
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;
|
|
1
|
+
{"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuHtD,CAAC"}
|
|
@@ -8,6 +8,7 @@ import type { SectionHeaderProps } from "./SectionHeader.types.mjs";
|
|
|
8
8
|
* @param sectionHeaderProps - Component props
|
|
9
9
|
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
10
10
|
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
11
|
+
* @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories
|
|
11
12
|
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
12
13
|
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
13
14
|
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;
|
|
1
|
+
{"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuHtD,CAAC"}
|
|
@@ -9,6 +9,7 @@ import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
|
|
|
9
9
|
import $React from "react";
|
|
10
10
|
const React = $importDefault($React);
|
|
11
11
|
import { Pressable } from "react-native";
|
|
12
|
+
import { Box } from "../Box/index.mjs";
|
|
12
13
|
import { BoxRow } from "../BoxRow/index.mjs";
|
|
13
14
|
import { Icon } from "../Icon/index.mjs";
|
|
14
15
|
/**
|
|
@@ -19,6 +20,7 @@ import { Icon } from "../Icon/index.mjs";
|
|
|
19
20
|
* @param sectionHeaderProps - Component props
|
|
20
21
|
* @param sectionHeaderProps.title - Title content for the inner row (required)
|
|
21
22
|
* @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
|
|
23
|
+
* @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories
|
|
22
24
|
* @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
|
|
23
25
|
* @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
|
|
24
26
|
* @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
|
|
@@ -34,7 +36,7 @@ import { Icon } from "../Icon/index.mjs";
|
|
|
34
36
|
* @returns The rendered SectionHeader layout.
|
|
35
37
|
*/
|
|
36
38
|
export const SectionHeader = (sectionHeaderProps) => {
|
|
37
|
-
const { title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
|
|
39
|
+
const { title, children, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
|
|
38
40
|
const tw = useTailwind();
|
|
39
41
|
const resolvedEndIconName = endIconName ??
|
|
40
42
|
(isInteractive && !endAccessory ? IconName.ArrowRight : undefined);
|
|
@@ -47,6 +49,11 @@ export const SectionHeader = (sectionHeaderProps) => {
|
|
|
47
49
|
}}>
|
|
48
50
|
{title}
|
|
49
51
|
</BoxRow>) : null;
|
|
52
|
+
const hasAccessories = Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);
|
|
53
|
+
const mainContent = titleRow || children ? (<Box gap={1} twClassName={hasAccessories ? 'flex-1 min-w-0' : undefined}>
|
|
54
|
+
{titleRow}
|
|
55
|
+
{children}
|
|
56
|
+
</Box>) : null;
|
|
50
57
|
if (isInteractive) {
|
|
51
58
|
const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
|
|
52
59
|
const isDisabled = Boolean(disabled);
|
|
@@ -56,12 +63,12 @@ export const SectionHeader = (sectionHeaderProps) => {
|
|
|
56
63
|
return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
|
|
57
64
|
}} {...props}>
|
|
58
65
|
<BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
59
|
-
{
|
|
66
|
+
{mainContent}
|
|
60
67
|
</BoxRow>
|
|
61
68
|
</Pressable>);
|
|
62
69
|
}
|
|
63
70
|
return (<BoxRow {...props} gap={1} style={style} twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
|
|
64
|
-
{
|
|
71
|
+
{mainContent}
|
|
65
72
|
</BoxRow>);
|
|
66
73
|
};
|
|
67
74
|
SectionHeader.displayName = 'SectionHeader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionHeader.mjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,SAAS,EAAE,qBAAqB;AAEzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B
|
|
1
|
+
{"version":3,"file":"SectionHeader.mjs","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-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/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 node to the right of `title` in the inner row\n * @param sectionHeaderProps.children - Optional content below the title row in the middle column, between start and end accessories\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; 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.Md}\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.Md}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n const hasAccessories =\n Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);\n\n const mainContent =\n titleRow || children ? (\n <Box gap={1} twClassName={hasAccessories ? 'flex-1 min-w-0' : undefined}>\n {titleRow}\n {children}\n </Box>\n ) : null;\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 <BoxRow\n gap={1}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n </Pressable>\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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"TextButton.types.cjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Props for `TextButton`, a text-only control for links and inline actions.\n * Extends {@link Text} props.\n */\nexport type TextButtonProps = Omit<\n TextProps,\n 'children' | 'color' | 'onPress'\n> & {\n /**\n * Content shown as the label.\n */\n children: React.ReactNode;\n /**\n * Called when the user presses the label. Primary interaction for this control.\n */\n onPress?: TextProps['onPress'];\n};\n"]}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import type { TextButtonPropsShared } from "@metamask-previews/design-system-shared";
|
|
2
1
|
import type { TextProps } from "../Text/index.cjs";
|
|
3
2
|
/**
|
|
4
3
|
* Props for `TextButton`, a text-only control for links and inline actions.
|
|
5
4
|
* Extends {@link Text} props.
|
|
6
5
|
*/
|
|
7
|
-
export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> &
|
|
6
|
+
export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Content shown as the label.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactNode;
|
|
8
11
|
/**
|
|
9
12
|
* Called when the user presses the label. Primary interaction for this control.
|
|
10
13
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"TextButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,UAAU,GAAG,OAAO,GAAG,SAAS,CACjC,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import type { TextButtonPropsShared } from "@metamask-previews/design-system-shared";
|
|
2
1
|
import type { TextProps } from "../Text/index.mjs";
|
|
3
2
|
/**
|
|
4
3
|
* Props for `TextButton`, a text-only control for links and inline actions.
|
|
5
4
|
* Extends {@link Text} props.
|
|
6
5
|
*/
|
|
7
|
-
export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> &
|
|
6
|
+
export type TextButtonProps = Omit<TextProps, 'children' | 'color' | 'onPress'> & {
|
|
7
|
+
/**
|
|
8
|
+
* Content shown as the label.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactNode;
|
|
8
11
|
/**
|
|
9
12
|
* Called when the user presses the label. Primary interaction for this control.
|
|
10
13
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"TextButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,UAAU,GAAG,OAAO,GAAG,SAAS,CACjC,GAAG;IACF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"TextButton.types.mjs","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextProps } from '../Text';\n\n/**\n * Props for `TextButton`, a text-only control for links and inline actions.\n * Extends {@link Text} props.\n */\nexport type TextButtonProps = Omit<\n TextProps,\n 'children' | 'color' | 'onPress'\n> & {\n /**\n * Content shown as the label.\n */\n children: React.ReactNode;\n /**\n * Called when the user presses the label. Primary interaction for this control.\n */\n onPress?: TextProps['onPress'];\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask-previews/design-system-react-native",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.2-preview.2222cbb5",
|
|
4
4
|
"description": "Design System React Native",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"MetaMask",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@metamask-previews/design-system-shared": "0.
|
|
50
|
+
"@metamask-previews/design-system-shared": "0.24.0-preview.2222cbb5",
|
|
51
51
|
"fast-text-encoding": "^1.0.6",
|
|
52
52
|
"react-native-jazzicon": "^0.1.2"
|
|
53
53
|
},
|
|
@@ -56,10 +56,10 @@
|
|
|
56
56
|
"@babel/preset-env": "^7.26.0",
|
|
57
57
|
"@babel/preset-react": "^7.25.9",
|
|
58
58
|
"@babel/preset-typescript": "^7.23.3",
|
|
59
|
-
"@figma/code-connect": "^1.
|
|
59
|
+
"@figma/code-connect": "^1.4.8",
|
|
60
60
|
"@gorhom/bottom-sheet": "^5.1.3",
|
|
61
|
-
"@metamask-previews/design-system-twrnc-preset": "0.5.0-preview.
|
|
62
|
-
"@metamask-previews/design-tokens": "8.5.0-preview.
|
|
61
|
+
"@metamask-previews/design-system-twrnc-preset": "0.5.0-preview.2222cbb5",
|
|
62
|
+
"@metamask-previews/design-tokens": "8.5.0-preview.2222cbb5",
|
|
63
63
|
"@metamask/auto-changelog": "^6.1.1",
|
|
64
64
|
"@metamask/utils": "^11.11.0",
|
|
65
65
|
"@react-native/babel-preset": "0.81.5",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"react-native-safe-area-context": ">=5.0.0"
|
|
103
103
|
},
|
|
104
104
|
"engines": {
|
|
105
|
-
"node": ">=
|
|
105
|
+
"node": ">=24"
|
|
106
106
|
},
|
|
107
107
|
"publishConfig": {
|
|
108
108
|
"access": "public",
|