@metamask-previews/design-system-react-native 0.0.0-preview.1701705 → 0.0.0-preview.232346e
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/README.md +18 -0
- package/dist/components/AvatarBase/AvatarBase.js +1 -1
- package/dist/components/AvatarBase/AvatarBase.js.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.d.ts.map +1 -1
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.js +13 -10
- package/dist/components/Button/variants/ButtonPrimary/ButtonPrimary.js.map +1 -1
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.js +5 -5
- package/dist/components/Button/variants/ButtonSecondary/ButtonSecondary.js.map +1 -1
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js +6 -6
- package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +17 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +122 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts +57 -0
- package/dist/components/Checkbox/Checkbox.types.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.types.js +3 -0
- package/dist/components/Checkbox/Checkbox.types.js.map +1 -0
- package/dist/components/Checkbox/index.d.ts +3 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Checkbox/index.js +6 -0
- package/dist/components/Checkbox/index.js.map +1 -0
- package/dist/components/TextButton/TextButton.js +1 -1
- package/dist/components/TextButton/TextButton.js.map +1 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +5 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/temp-components/Blockies/Blockies.utilities.d.ts +24 -0
- package/dist/components/temp-components/Blockies/Blockies.utilities.d.ts.map +1 -0
- package/dist/components/temp-components/Blockies/Blockies.utilities.js +428 -426
- package/dist/components/temp-components/Blockies/Blockies.utilities.js.map +1 -0
- package/dist/types/index.d.ts +8 -8
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +8 -8
- package/dist/types/index.js.map +1 -1
- package/package.json +12 -7
package/README.md
CHANGED
|
@@ -4,12 +4,30 @@ Design System React Native
|
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
|
+
First, install the package:
|
|
8
|
+
|
|
7
9
|
`yarn add @metamask/design-system-react-native`
|
|
8
10
|
|
|
9
11
|
or
|
|
10
12
|
|
|
11
13
|
`npm install @metamask/design-system-react-native`
|
|
12
14
|
|
|
15
|
+
### Peer Dependencies
|
|
16
|
+
|
|
17
|
+
This package requires the following peer dependencies to be installed in your project:
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add react@>=18.2.0 react-native@>=0.72.0
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
or
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install react@>=18.2.0 react-native@>=0.72.0
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Note:** This package is compatible with React Native 0.72.0 and newer versions, including 0.76.x.
|
|
30
|
+
|
|
13
31
|
## Contributing
|
|
14
32
|
|
|
15
33
|
This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).
|
|
@@ -13,7 +13,7 @@ const AvatarBase_constants_1 = require("./AvatarBase.constants");
|
|
|
13
13
|
const AvatarBase = ({ children, size = types_1.AvatarBaseSize.Md, shape = types_1.AvatarBaseShape.Circle, fallbackText, fallbackTextProps, hasBorder = false, twClassName = '', style, ...props }) => {
|
|
14
14
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
15
15
|
const twContainerClassNames = `
|
|
16
|
-
items-center justify-center overflow-hidden bg-background-
|
|
16
|
+
items-center justify-center overflow-hidden bg-background-section
|
|
17
17
|
${shape === types_1.AvatarBaseShape.Circle
|
|
18
18
|
? 'rounded-full'
|
|
19
19
|
: AvatarBase_constants_1.TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.js","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,uCAA8D;AAC9D,kCAAmE;AAEnE,iEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;;MAG1B,KAAK,KAAK,uBAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAC1D;MACE,SAAS,CAAC,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;MAC7G,SAAS,CAAC,CAAC,CAAC,wDAAiC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;MACxD,WAAW;GACd,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAC5D;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,UAAU,cAyCrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName = '',\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n const twContainerClassNames = `\n items-center justify-center overflow-hidden bg-background-
|
|
1
|
+
{"version":3,"file":"AvatarBase.js","sourceRoot":"","sources":["../../../src/components/AvatarBase/AvatarBase.tsx"],"names":[],"mappings":";;;;;;AAAA,8FAA4E;AAC5E,kDAA0B;AAC1B,+CAAoC;AAEpC,uCAA8D;AAC9D,kCAAmE;AAEnE,iEAKgC;AAGzB,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,EAAE,EACxB,KAAK,GAAG,uBAAe,CAAC,MAAM,EAC9B,YAAY,EACZ,iBAAiB,EACjB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACQ,EAAE,EAAE;IACpB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;;MAG1B,KAAK,KAAK,uBAAe,CAAC,MAAM;QAC9B,CAAC,CAAC,cAAc;QAChB,CAAC,CAAC,sEAA+C,CAAC,IAAI,CAC1D;MACE,SAAS,CAAC,CAAC,CAAC,qEAA8C,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,2DAAoC,CAAC,IAAI,CAAC;MAC7G,SAAS,CAAC,CAAC,CAAC,wDAAiC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;MACxD,WAAW;GACd,CAAC;IAEF,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAC5D;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CACd,CAAC,WAAI,CACH,KAAK,CAAC,CAAC,gBAAS,CAAC,SAAS,CAAC,CAC3B,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,IAAI,iBAAiB,CAAC,CACtB,WAAW,CAAC,CAAC,aAAa,iBAAiB,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,iBAAiB,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CAE7G;UAAA,CAAC,YAAY,CACf;QAAA,EAAE,WAAI,CAAC,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACH;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,UAAU,cAyCrB","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { AvatarBaseSize, AvatarBaseShape } from '../../types';\nimport { Text, TextColor, TextVariant, FontWeight } from '../Text';\n\nimport {\n TWCLASSMAP_AVATARBASE_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION,\n TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE,\n TWCLASSMAP_AVATARBASE_SIZE_BORDER,\n} from './AvatarBase.constants';\nimport type { AvatarBaseProps } from './AvatarBase.types';\n\nexport const AvatarBase = ({\n children,\n size = AvatarBaseSize.Md,\n shape = AvatarBaseShape.Circle,\n fallbackText,\n fallbackTextProps,\n hasBorder = false,\n twClassName = '',\n style,\n ...props\n}: AvatarBaseProps) => {\n const tw = useTailwind();\n const twContainerClassNames = `\n items-center justify-center overflow-hidden bg-background-section\n ${\n shape === AvatarBaseShape.Circle\n ? 'rounded-full'\n : TWCLASSMAP_AVATARBASE_SIZE_BORDERRADIUSS_SQUARE[size]\n }\n ${hasBorder ? TWCLASSMAP_AVATARBASE_HASBORDER_SIZE_DIMENSION[size] : TWCLASSMAP_AVATARBASE_SIZE_DIMENSION[size]}\n ${hasBorder ? TWCLASSMAP_AVATARBASE_SIZE_BORDER[size] : ''}\n ${twClassName}\n `;\n\n return (\n <View style={[tw`${twContainerClassNames}`, style]} {...props}>\n {fallbackText ? (\n <Text\n color={TextColor.TextMuted}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n {...fallbackTextProps}\n twClassName={`uppercase ${fallbackTextProps?.twClassName ? ` ${fallbackTextProps.twClassName}` : ''}`.trim()}\n >\n {fallbackText}\n </Text>\n ) : (\n children\n )}\n </View>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonPrimary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonPrimary.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAoGhE,eAAO,MAAM,aAAa,4BAGvB,kBAAkB,sBAWpB,CAAC"}
|
|
@@ -29,30 +29,30 @@ const react_1 = __importStar(require("react"));
|
|
|
29
29
|
const ButtonBase_1 = require("../../../ButtonBase");
|
|
30
30
|
const Icon_1 = require("../../../Icon");
|
|
31
31
|
const Text_1 = require("../../../Text");
|
|
32
|
-
const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse
|
|
32
|
+
const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps, endIconProps, isDanger = false, isInverse, isLoading = false, onPressIn, onPressOut, twClassName = '', style, ...props }) => {
|
|
33
33
|
const [isPressed, setIsPressed] = (0, react_1.useState)(false);
|
|
34
34
|
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
35
35
|
const twContainerClassNames = `
|
|
36
36
|
${isInverse && isDanger
|
|
37
37
|
? isPressed || isLoading
|
|
38
|
-
? 'bg-background-
|
|
38
|
+
? 'bg-background-default-pressed'
|
|
39
39
|
: 'bg-background-default'
|
|
40
40
|
: isDanger
|
|
41
41
|
? isPressed || isLoading
|
|
42
|
-
? 'bg-error-
|
|
42
|
+
? 'bg-error-default-pressed'
|
|
43
43
|
: 'bg-error-default'
|
|
44
44
|
: isInverse
|
|
45
45
|
? isPressed || isLoading
|
|
46
|
-
? 'bg-background-
|
|
46
|
+
? 'bg-background-default-pressed'
|
|
47
47
|
: 'bg-background-default'
|
|
48
48
|
: isPressed || isLoading
|
|
49
|
-
? 'bg-primary-
|
|
49
|
+
? 'bg-primary-default-pressed'
|
|
50
50
|
: 'bg-primary-default'}
|
|
51
51
|
${twClassName}
|
|
52
52
|
`;
|
|
53
53
|
const twTextClassNames = isInverse && isDanger
|
|
54
54
|
? isPressed || isLoading
|
|
55
|
-
? 'text-error-
|
|
55
|
+
? 'text-error-default-pressed'
|
|
56
56
|
: 'text-error-default'
|
|
57
57
|
: isDanger
|
|
58
58
|
? 'text-primary-inverse'
|
|
@@ -92,12 +92,15 @@ const ButtonPrimaryBase = ({ children, textProps, spinnerProps, startIconProps,
|
|
|
92
92
|
{children}
|
|
93
93
|
</ButtonBase_1.ButtonBase>);
|
|
94
94
|
};
|
|
95
|
-
const
|
|
96
|
-
|
|
95
|
+
const ButtonPrimary = ({ isInverse = false, ...props }) => {
|
|
96
|
+
// If inverse, use the current theme context
|
|
97
97
|
if (isInverse) {
|
|
98
|
-
return <ButtonPrimaryBase isInverse
|
|
98
|
+
return <ButtonPrimaryBase isInverse {...props}/>;
|
|
99
99
|
}
|
|
100
|
-
|
|
100
|
+
// Otherwise, force light theme
|
|
101
|
+
return (<design_system_twrnc_preset_1.ThemeProvider theme={design_system_twrnc_preset_1.Theme.Light}>
|
|
102
|
+
<ButtonPrimaryBase isInverse={false} {...props}/>
|
|
103
|
+
</design_system_twrnc_preset_1.ThemeProvider>);
|
|
101
104
|
};
|
|
102
105
|
exports.ButtonPrimary = ButtonPrimary;
|
|
103
106
|
//# sourceMappingURL=ButtonPrimary.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonPrimary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAIuD;AACvD,+CAAwC;AAGxC,oDAAiD;AAEjD,wCAAyC;AACzC,wCAAwD;AAIxD,MAAM,iBAAiB,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,
|
|
1
|
+
{"version":3,"file":"ButtonPrimary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n useTailwind,\n ThemeProvider,\n Theme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonPrimaryProps } from './ButtonPrimary.types';\n\nconst ButtonPrimaryBase = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonPrimaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-background-default-pressed'\n : 'bg-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-default-pressed'\n : 'bg-error-default'\n : isInverse\n ? isPressed || isLoading\n ? 'bg-background-default-pressed'\n : 'bg-background-default'\n : isPressed || isLoading\n ? 'bg-primary-default-pressed'\n : 'bg-primary-default'\n }\n ${twClassName}\n `;\n\n const twTextClassNames =\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isDanger\n ? 'text-primary-inverse'\n : isInverse\n ? 'text-text-default'\n : 'text-primary-inverse';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n\nexport const ButtonPrimary = ({\n isInverse = false,\n ...props\n}: ButtonPrimaryProps) => {\n // If inverse, use the current theme context\n if (isInverse) {\n return <ButtonPrimaryBase isInverse {...props} />;\n }\n // Otherwise, force light theme\n return (\n <ThemeProvider theme={Theme.Light}>\n <ButtonPrimaryBase isInverse={false} {...props} />\n </ThemeProvider>\n );\n};\n"]}
|
|
@@ -35,11 +35,11 @@ const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, en
|
|
|
35
35
|
const twContainerClassNames = `
|
|
36
36
|
${isInverse && isDanger
|
|
37
37
|
? isPressed || isLoading
|
|
38
|
-
? 'bg-background-
|
|
38
|
+
? 'bg-background-default-pressed'
|
|
39
39
|
: 'bg-background-default'
|
|
40
40
|
: isDanger
|
|
41
41
|
? isPressed || isLoading
|
|
42
|
-
? 'bg-error-
|
|
42
|
+
? 'bg-error-muted-pressed'
|
|
43
43
|
: 'bg-transparent'
|
|
44
44
|
: isPressed || isLoading
|
|
45
45
|
? 'bg-background-pressed'
|
|
@@ -47,11 +47,11 @@ const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, en
|
|
|
47
47
|
border-[1.5px]
|
|
48
48
|
${isInverse && isDanger
|
|
49
49
|
? isPressed || isLoading
|
|
50
|
-
? 'border-background-
|
|
50
|
+
? 'border-background-default-pressed'
|
|
51
51
|
: 'border-background-default'
|
|
52
52
|
: isDanger
|
|
53
53
|
? isPressed || isLoading
|
|
54
|
-
? 'border-error-
|
|
54
|
+
? 'border-error-default-pressed'
|
|
55
55
|
: 'border-error-default'
|
|
56
56
|
: isInverse
|
|
57
57
|
? 'border-primary-inverse'
|
|
@@ -60,7 +60,7 @@ const ButtonSecondary = ({ children, textProps, spinnerProps, startIconProps, en
|
|
|
60
60
|
`;
|
|
61
61
|
const twTextClassNames = isDanger
|
|
62
62
|
? isPressed || isLoading
|
|
63
|
-
? 'text-error-
|
|
63
|
+
? 'text-error-default-pressed'
|
|
64
64
|
: 'text-error-default'
|
|
65
65
|
: isInverse
|
|
66
66
|
? 'text-primary-inverse'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonSecondary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,oDAAiD;AAEjD,wCAAyC;AACzC,wCAAwD;AAIjD,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACa,EAAE,EAAE;IACzB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;MAE1B,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"ButtonSecondary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonSecondaryProps } from './ButtonSecondary.types';\n\nexport const ButtonSecondary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonSecondaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-background-default-pressed'\n : 'bg-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-muted-pressed'\n : 'bg-transparent'\n : isPressed || isLoading\n ? 'bg-background-pressed'\n : 'bg-transparent'\n }\n border-[1.5px]\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'border-background-default-pressed'\n : 'border-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'border-error-default-pressed'\n : 'border-error-default'\n : isInverse\n ? 'border-primary-inverse'\n : 'border-icon-default'\n }\n ${twClassName}\n `;\n\n const twTextClassNames = isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isInverse\n ? 'text-primary-inverse'\n : 'text-text-default';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -35,11 +35,11 @@ const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, end
|
|
|
35
35
|
const twContainerClassNames = `
|
|
36
36
|
${isInverse && isDanger
|
|
37
37
|
? isPressed || isLoading
|
|
38
|
-
? 'bg-background-
|
|
38
|
+
? 'bg-background-default-pressed'
|
|
39
39
|
: 'bg-background-default'
|
|
40
40
|
: isDanger
|
|
41
41
|
? isPressed || isLoading
|
|
42
|
-
? 'bg-error-
|
|
42
|
+
? 'bg-error-muted-pressed'
|
|
43
43
|
: 'bg-transparent'
|
|
44
44
|
: isInverse
|
|
45
45
|
? isPressed || isLoading
|
|
@@ -51,11 +51,11 @@ const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, end
|
|
|
51
51
|
${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}
|
|
52
52
|
${isInverse && isDanger
|
|
53
53
|
? isPressed || isLoading
|
|
54
|
-
? 'border-background-
|
|
54
|
+
? 'border-background-default-pressed'
|
|
55
55
|
: 'border-background-default'
|
|
56
56
|
: isDanger
|
|
57
57
|
? isPressed || isLoading
|
|
58
|
-
? 'border-error-
|
|
58
|
+
? 'border-error-muted-pressed'
|
|
59
59
|
: 'border-transparent'
|
|
60
60
|
: isInverse
|
|
61
61
|
? 'border-primary-inverse'
|
|
@@ -65,12 +65,12 @@ const ButtonTertiary = ({ children, textProps, spinnerProps, startIconProps, end
|
|
|
65
65
|
`;
|
|
66
66
|
const twTextClassNames = isDanger
|
|
67
67
|
? isPressed || isLoading
|
|
68
|
-
? 'text-error-
|
|
68
|
+
? 'text-error-default-pressed'
|
|
69
69
|
: 'text-error-default'
|
|
70
70
|
: isInverse
|
|
71
71
|
? 'text-primary-inverse'
|
|
72
72
|
: isPressed || isLoading
|
|
73
|
-
? 'text-primary-
|
|
73
|
+
? 'text-primary-default-pressed'
|
|
74
74
|
: 'text-primary-default';
|
|
75
75
|
const onPressInHandler = (event) => {
|
|
76
76
|
setIsPressed(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonTertiary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAwC;AAGxC,oDAAiD;AAEjD,wCAAyC;AACzC,wCAAwD;AAIjD,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG;MAE1B,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"ButtonTertiary.js","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ButtonBase } from '../../../ButtonBase';\nimport type { IconColor } from '../../../Icon';\nimport { IconSize } from '../../../Icon';\nimport { TextVariant, FontWeight } from '../../../Text';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = ({\n children,\n textProps,\n spinnerProps,\n startIconProps,\n endIconProps,\n isDanger = false,\n isInverse = false,\n isLoading = false,\n onPressIn,\n onPressOut,\n twClassName = '',\n style,\n ...props\n}: ButtonTertiaryProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const tw = useTailwind();\n const twContainerClassNames = `\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'bg-background-default-pressed'\n : 'bg-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'bg-error-muted-pressed'\n : 'bg-transparent'\n : isInverse\n ? isPressed || isLoading\n ? 'bg-background-pressed'\n : 'bg-transparent'\n : isPressed || isLoading\n ? 'bg-background-pressed'\n : 'bg-transparent'\n }\n ${isInverse && !isDanger ? 'border-[1.5px]' : 'border-0'}\n ${\n isInverse && isDanger\n ? isPressed || isLoading\n ? 'border-background-default-pressed'\n : 'border-background-default'\n : isDanger\n ? isPressed || isLoading\n ? 'border-error-muted-pressed'\n : 'border-transparent'\n : isInverse\n ? 'border-primary-inverse'\n : isPressed || isLoading\n ? 'border-background-pressed'\n : 'border-transparent'\n }\n `;\n\n const twTextClassNames = isDanger\n ? isPressed || isLoading\n ? 'text-error-default-pressed'\n : 'text-error-default'\n : isInverse\n ? 'text-primary-inverse'\n : isPressed || isLoading\n ? 'text-primary-default-pressed'\n : 'text-primary-default';\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n onPressOut?.(event);\n };\n\n return (\n <ButtonBase\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: `${twTextClassNames} ${textProps?.twClassName ?? ''}`,\n }}\n spinnerProps={{\n color: twTextClassNames as IconColor,\n loadingTextProps: {\n twClassName: twTextClassNames,\n },\n ...spinnerProps,\n }}\n startIconProps={{\n size: IconSize.Sm,\n ...startIconProps,\n twClassName: `${twTextClassNames} ${startIconProps?.twClassName ?? ''}`,\n }}\n endIconProps={{\n size: IconSize.Sm,\n ...endIconProps,\n twClassName: `${twTextClassNames} ${endIconProps?.twClassName ?? ''}`,\n }}\n isLoading={isLoading}\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n style={[tw`${twContainerClassNames}`, style]}\n {...props}\n >\n {children}\n </ButtonBase>\n );\n};\n"]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { PressableStateCallbackType } from 'react-native';
|
|
3
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<{
|
|
4
|
+
isSelected: boolean;
|
|
5
|
+
isDisabled?: boolean | undefined;
|
|
6
|
+
isInvalid?: boolean | undefined;
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
labelProps?: Omit<Partial<import("..").TextProps>, "children"> | undefined;
|
|
9
|
+
onChange: (isSelected: boolean) => void;
|
|
10
|
+
checkboxContainerProps?: Omit<Partial<import("react-native").ViewProps>, "children"> | undefined;
|
|
11
|
+
checkedIconProps?: Partial<import("../Icon").IconProps> | undefined;
|
|
12
|
+
twClassName?: string | undefined;
|
|
13
|
+
style?: import("react-native").StyleProp<import("react-native").ViewStyle> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").ViewStyle>);
|
|
14
|
+
} & Omit<import("react-native").PressableProps, "children"> & React.RefAttributes<{
|
|
15
|
+
toggle: () => void;
|
|
16
|
+
}>>;
|
|
17
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAU/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
+
exports.Checkbox = void 0;
|
|
27
|
+
const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
|
|
28
|
+
const react_1 = __importStar(require("react"));
|
|
29
|
+
const react_native_1 = require("react-native");
|
|
30
|
+
const Icon_1 = require("../Icon");
|
|
31
|
+
const TextOrChildren_1 = require("../temp-components/TextOrChildren");
|
|
32
|
+
const AnimatedView = react_native_1.Animated.View;
|
|
33
|
+
exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, isInvalid = false, label = '', labelProps, onChange, checkboxContainerProps, checkedIconProps, twClassName = '', style, ...props }, ref) => {
|
|
34
|
+
// Animation values
|
|
35
|
+
const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
|
|
36
|
+
const iconAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isSelected ? 1 : 0)).current;
|
|
37
|
+
// Sync icon opacity whenever selection changes
|
|
38
|
+
(0, react_1.useEffect)(() => {
|
|
39
|
+
react_native_1.Animated.timing(iconAnim, {
|
|
40
|
+
toValue: isSelected ? 1 : 0,
|
|
41
|
+
duration: 300,
|
|
42
|
+
easing: react_native_1.Easing.ease,
|
|
43
|
+
useNativeDriver: true,
|
|
44
|
+
}).start();
|
|
45
|
+
}, [isSelected, iconAnim]);
|
|
46
|
+
// Bounce effect when toggling
|
|
47
|
+
const animateScale = (0, react_1.useCallback)(() => {
|
|
48
|
+
react_native_1.Animated.sequence([
|
|
49
|
+
react_native_1.Animated.timing(scaleAnim, {
|
|
50
|
+
toValue: 1.15,
|
|
51
|
+
duration: 100,
|
|
52
|
+
easing: react_native_1.Easing.ease,
|
|
53
|
+
useNativeDriver: true,
|
|
54
|
+
}),
|
|
55
|
+
react_native_1.Animated.timing(scaleAnim, {
|
|
56
|
+
toValue: 1,
|
|
57
|
+
duration: 100,
|
|
58
|
+
easing: react_native_1.Easing.ease,
|
|
59
|
+
useNativeDriver: true,
|
|
60
|
+
}),
|
|
61
|
+
]).start();
|
|
62
|
+
}, [scaleAnim]);
|
|
63
|
+
// Press handler: notify parent, then bounce
|
|
64
|
+
const handlePress = () => {
|
|
65
|
+
if (isDisabled) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
onChange?.(!isSelected);
|
|
69
|
+
animateScale();
|
|
70
|
+
};
|
|
71
|
+
(0, react_1.useImperativeHandle)(ref, () => ({ toggle: handlePress }), [handlePress]);
|
|
72
|
+
const tw = (0, design_system_twrnc_preset_1.useTailwind)();
|
|
73
|
+
const twContainerClassNames = tw `flex-row items-center ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`;
|
|
74
|
+
const getCheckboxContainerStyle = (0, react_1.useCallback)((pressed) => {
|
|
75
|
+
const baseBg = isSelected
|
|
76
|
+
? 'bg-primary-default'
|
|
77
|
+
: 'bg-background-default';
|
|
78
|
+
let baseBorder = 'border-border-default';
|
|
79
|
+
if (isSelected) {
|
|
80
|
+
baseBorder = 'border-primary-default';
|
|
81
|
+
}
|
|
82
|
+
else if (isInvalid) {
|
|
83
|
+
baseBorder = 'border-error-default';
|
|
84
|
+
}
|
|
85
|
+
const pressedBg = isSelected
|
|
86
|
+
? 'bg-primary-default-pressed'
|
|
87
|
+
: 'bg-background-default-pressed';
|
|
88
|
+
let pressedBorder = 'border-border-default';
|
|
89
|
+
if (isSelected) {
|
|
90
|
+
pressedBorder = 'border-primary-default-pressed';
|
|
91
|
+
}
|
|
92
|
+
else if (isInvalid) {
|
|
93
|
+
pressedBorder = 'border-error-default';
|
|
94
|
+
}
|
|
95
|
+
return pressed
|
|
96
|
+
? `${pressedBg} ${pressedBorder}`
|
|
97
|
+
: `${baseBg} ${baseBorder}`;
|
|
98
|
+
}, [isSelected, isInvalid]);
|
|
99
|
+
return (<react_native_1.Pressable onPress={handlePress} accessible accessibilityRole="checkbox" accessibilityState={{
|
|
100
|
+
checked: isSelected,
|
|
101
|
+
disabled: isDisabled,
|
|
102
|
+
}} accessibilityLabel={typeof label === 'string' ? label : undefined} style={(state) => [
|
|
103
|
+
twContainerClassNames,
|
|
104
|
+
typeof style === 'function' ? style(state) : style,
|
|
105
|
+
]} disabled={isDisabled} {...props}>
|
|
106
|
+
{({ pressed }) => (<>
|
|
107
|
+
<AnimatedView {...checkboxContainerProps} style={[
|
|
108
|
+
tw `${getCheckboxContainerStyle(pressed)} flex h-[22px] w-[22px] items-center justify-center rounded border-2`,
|
|
109
|
+
{ transform: [{ scale: scaleAnim }] },
|
|
110
|
+
]}>
|
|
111
|
+
{/* Always render icon, opacity driven by iconAnim */}
|
|
112
|
+
<react_native_1.Animated.View style={{ opacity: iconAnim }}>
|
|
113
|
+
<Icon_1.Icon name={Icon_1.IconName.Check} color={Icon_1.IconColor.PrimaryInverse} size={Icon_1.IconSize.Sm} {...checkedIconProps}/>
|
|
114
|
+
</react_native_1.Animated.View>
|
|
115
|
+
</AnimatedView>
|
|
116
|
+
{label ? (<TextOrChildren_1.TextOrChildren textProps={{ ...labelProps, twClassName: 'ml-3' }}>
|
|
117
|
+
{label}
|
|
118
|
+
</TextOrChildren_1.TextOrChildren>) : null}
|
|
119
|
+
</>)}
|
|
120
|
+
</react_native_1.Pressable>);
|
|
121
|
+
});
|
|
122
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n forwardRef,\n useRef,\n useImperativeHandle,\n useCallback,\n useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n (\n {\n isSelected,\n isDisabled = false,\n isInvalid = false,\n label = '',\n labelProps,\n onChange,\n checkboxContainerProps,\n checkedIconProps,\n twClassName = '',\n style,\n ...props\n },\n ref,\n ) => {\n // Animation values\n const scaleAnim = useRef(new Animated.Value(1)).current;\n const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n // Sync icon opacity whenever selection changes\n useEffect(() => {\n Animated.timing(iconAnim, {\n toValue: isSelected ? 1 : 0,\n duration: 300,\n easing: Easing.ease,\n useNativeDriver: true,\n }).start();\n }, [isSelected, iconAnim]);\n\n // Bounce effect when toggling\n const animateScale = useCallback(() => {\n Animated.sequence([\n Animated.timing(scaleAnim, {\n toValue: 1.15,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n Animated.timing(scaleAnim, {\n toValue: 1,\n duration: 100,\n easing: Easing.ease,\n useNativeDriver: true,\n }),\n ]).start();\n }, [scaleAnim]);\n\n // Press handler: notify parent, then bounce\n const handlePress = () => {\n if (isDisabled) {\n return;\n }\n onChange?.(!isSelected);\n animateScale();\n };\n\n useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n const tw = useTailwind();\n const twContainerClassNames = tw`flex-row items-center ${\n isDisabled ? 'opacity-50' : 'opacity-100'\n } ${twClassName}`;\n\n const getCheckboxContainerStyle = useCallback(\n (pressed: boolean): string => {\n const baseBg = isSelected\n ? 'bg-primary-default'\n : 'bg-background-default';\n let baseBorder = 'border-border-default';\n if (isSelected) {\n baseBorder = 'border-primary-default';\n } else if (isInvalid) {\n baseBorder = 'border-error-default';\n }\n const pressedBg = isSelected\n ? 'bg-primary-default-pressed'\n : 'bg-background-default-pressed';\n let pressedBorder = 'border-border-default';\n if (isSelected) {\n pressedBorder = 'border-primary-default-pressed';\n } else if (isInvalid) {\n pressedBorder = 'border-error-default';\n }\n return pressed\n ? `${pressedBg} ${pressedBorder}`\n : `${baseBg} ${baseBorder}`;\n },\n [isSelected, isInvalid],\n );\n\n return (\n <Pressable\n onPress={handlePress}\n accessible\n accessibilityRole=\"checkbox\"\n accessibilityState={{\n checked: isSelected,\n disabled: isDisabled,\n }}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n style={(state: PressableStateCallbackType) => [\n twContainerClassNames,\n typeof style === 'function' ? style(state) : style,\n ]}\n disabled={isDisabled}\n {...props}\n >\n {({ pressed }) => (\n <>\n <AnimatedView\n {...checkboxContainerProps}\n style={[\n tw`${getCheckboxContainerStyle(pressed)} flex h-[22px] w-[22px] items-center justify-center rounded border-2`,\n { transform: [{ scale: scaleAnim }] },\n ]}\n >\n {/* Always render icon, opacity driven by iconAnim */}\n <Animated.View style={{ opacity: iconAnim }}>\n <Icon\n name={IconName.Check}\n color={IconColor.PrimaryInverse}\n size={IconSize.Sm}\n {...checkedIconProps}\n />\n </Animated.View>\n </AnimatedView>\n {label ? (\n <TextOrChildren\n textProps={{ ...labelProps, twClassName: 'ml-3' }}\n >\n {label}\n </TextOrChildren>\n ) : null}\n </>\n )}\n </Pressable>\n );\n },\n);\n"]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { PressableProps, ViewProps } from 'react-native';
|
|
3
|
+
import type { IconProps } from '../Icon';
|
|
4
|
+
import type { TextProps } from '../Text';
|
|
5
|
+
/**
|
|
6
|
+
* Checkbox component props.
|
|
7
|
+
*/
|
|
8
|
+
export type CheckboxProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Required prop to determine whether the checkbox is currently selected.
|
|
11
|
+
* This component is fully controlled, so you must manage this state
|
|
12
|
+
* in your parent component.
|
|
13
|
+
*/
|
|
14
|
+
isSelected: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Optional prop that when true, disables the checkbox.
|
|
17
|
+
*
|
|
18
|
+
* @default false
|
|
19
|
+
*/
|
|
20
|
+
isDisabled?: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Optional prop that when true, displays the invalid/error state of the checkbox.
|
|
23
|
+
*
|
|
24
|
+
* @default false
|
|
25
|
+
*/
|
|
26
|
+
isInvalid?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Optional label prop that renders text or a React node as a label beside the checkbox.
|
|
29
|
+
*/
|
|
30
|
+
label?: React.ReactNode | string;
|
|
31
|
+
/**
|
|
32
|
+
* Optional props to be passed to the label's Text component.
|
|
33
|
+
*/
|
|
34
|
+
labelProps?: Omit<Partial<TextProps>, 'children'>;
|
|
35
|
+
/**
|
|
36
|
+
* Required callback for when the checked state changes.
|
|
37
|
+
* Use this to update your state.
|
|
38
|
+
*/
|
|
39
|
+
onChange: (isSelected: boolean) => void;
|
|
40
|
+
/**
|
|
41
|
+
* Optional props passed to the container view wrapping the checkbox icon.
|
|
42
|
+
*/
|
|
43
|
+
checkboxContainerProps?: Omit<Partial<ViewProps>, 'children'>;
|
|
44
|
+
/**
|
|
45
|
+
* Optional props to be passed to the check Icon component.
|
|
46
|
+
*/
|
|
47
|
+
checkedIconProps?: Partial<IconProps>;
|
|
48
|
+
/**
|
|
49
|
+
* Optional prop to add twrnc overriding classNames.
|
|
50
|
+
*/
|
|
51
|
+
twClassName?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Optional prop to control the style.
|
|
54
|
+
*/
|
|
55
|
+
style?: PressableProps['style'];
|
|
56
|
+
} & Omit<PressableProps, 'children'>;
|
|
57
|
+
//# sourceMappingURL=Checkbox.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC;;GAEG;AAEH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,sBAAsB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAE9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { PressableProps, ViewProps } from 'react-native';\n\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text';\n/**\n * Checkbox component props.\n */\n\nexport type CheckboxProps = {\n /**\n * Required prop to determine whether the checkbox is currently selected.\n * This component is fully controlled, so you must manage this state\n * in your parent component.\n */\n isSelected: boolean;\n\n /**\n * Optional prop that when true, disables the checkbox.\n *\n * @default false\n */\n isDisabled?: boolean;\n\n /**\n * Optional prop that when true, displays the invalid/error state of the checkbox.\n *\n * @default false\n */\n isInvalid?: boolean;\n\n /**\n * Optional label prop that renders text or a React node as a label beside the checkbox.\n */\n label?: React.ReactNode | string;\n\n /**\n * Optional props to be passed to the label's Text component.\n */\n labelProps?: Omit<Partial<TextProps>, 'children'>;\n\n /**\n * Required callback for when the checked state changes.\n * Use this to update your state.\n */\n onChange: (isSelected: boolean) => void;\n\n /**\n * Optional props passed to the container view wrapping the checkbox icon.\n */\n checkboxContainerProps?: Omit<Partial<ViewProps>, 'children'>;\n\n /**\n * Optional props to be passed to the check Icon component.\n */\n checkedIconProps?: Partial<IconProps>;\n\n /**\n * Optional prop to add twrnc overriding classNames.\n */\n twClassName?: string;\n\n /**\n * Optional prop to control the style.\n */\n style?: PressableProps['style'];\n} & Omit<PressableProps, 'children'>;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = void 0;
|
|
4
|
+
var Checkbox_1 = require("./Checkbox");
|
|
5
|
+
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA","sourcesContent":["export { Checkbox } from './Checkbox';\nexport type { CheckboxProps } from './Checkbox.types';\n"]}
|
|
@@ -43,7 +43,7 @@ const TextButton = ({ children, size = types_1.TextButtonSize.BodyMd, textProps,
|
|
|
43
43
|
if (isInverse) {
|
|
44
44
|
return 'text-primary-inverse';
|
|
45
45
|
}
|
|
46
|
-
return pressed ? 'text-primary-
|
|
46
|
+
return pressed ? 'text-primary-default-pressed' : 'text-primary-default';
|
|
47
47
|
}, [isInverse]);
|
|
48
48
|
const getTextDecoration = (0, react_1.useCallback)((pressed) => isInverse || pressed ? 'underline' : 'no-underline', [isInverse]);
|
|
49
49
|
return (<Text_1.Text>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextButton.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAA2C;AAC3C,+CAAyC;AAEzC,uCAA6C;AAC7C,kCAAyC;AACzC,kCAA2C;AAE3C,iEAAyE;AAGlE,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,IAAI,GAAG,sBAAc,CAAC,MAAM,EAC5B,SAAS,EACT,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,WAAW,GAAG,EAAE,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,CAAA,QACjC,sDAA+B,CAAC,IAAI,CACtC,EAGC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,OAAgB,EAAU,EAAE;QAC3B,IAAI,SAAS,EAAE;YACb,OAAO,sBAAsB,CAAC;SAC/B;QACD,OAAO,OAAO,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"TextButton.js","sourceRoot":"","sources":["../../../src/components/TextButton/TextButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useCallback } from 'react';\nimport { Pressable } from 'react-native';\n\nimport { TextButtonSize } from '../../types';\nimport { Icon, IconSize } from '../Icon';\nimport { Text, FontWeight } from '../Text';\n\nimport { MAP_TEXTBUTTON_SIZE_TEXTVARIANT } from './TextButton.constants';\nimport type { TextButtonProps } from './TextButton.types';\n\nexport const TextButton: React.FC<TextButtonProps> = ({\n children,\n size = TextButtonSize.BodyMd,\n textProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled = false,\n isInverse = false,\n twClassName = '',\n accessibilityRole,\n accessibilityLabel,\n style,\n ...props\n}) => {\n const tw = useTailwind();\n /**\n * Calculating the baselineOffset. This baselineOffset is needed to make sure\n * the TextButton aligns perfectly when placed within Text elements\n */\n const { fontSize, lineHeight } = tw`text-${\n MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size] as string\n }` as {\n fontSize: number;\n lineHeight: number;\n };\n const baselineOffset = (lineHeight - fontSize) / 2;\n\n const getTextColor = useCallback(\n (pressed: boolean): string => {\n if (isInverse) {\n return 'text-primary-inverse';\n }\n return pressed ? 'text-primary-default-pressed' : 'text-primary-default';\n },\n [isInverse],\n );\n\n const getTextDecoration = useCallback(\n (pressed: boolean): string =>\n isInverse || pressed ? 'underline' : 'no-underline',\n [isInverse],\n );\n\n return (\n <Text>\n <Pressable\n accessibilityRole={accessibilityRole ?? 'button'}\n accessibilityLabel={accessibilityLabel}\n disabled={isDisabled}\n style={({ pressed }) => [\n { transform: [{ translateY: baselineOffset }] },\n tw`flex-row items-center ${pressed ? 'bg-background-pressed' : 'bg-transparent'} ${isDisabled ? 'opacity-50' : 'opacity-100'} ${twClassName}`,\n style,\n ]}\n {...props}\n >\n {({ pressed }) => (\n <>\n {startIconName ? (\n <Icon\n name={startIconName}\n size={IconSize.Sm}\n testID=\"start-icon\"\n twClassName={`${getTextColor(pressed)} mr-1`}\n {...startIconProps}\n />\n ) : (\n startAccessory\n )}\n\n <Text\n variant={MAP_TEXTBUTTON_SIZE_TEXTVARIANT[size]}\n fontWeight={FontWeight.Medium}\n {...textProps}\n twClassName={` ${getTextColor(pressed)} ${getTextDecoration(pressed)} ${textProps?.twClassName ?? ''} `}\n >\n {children}\n </Text>\n\n {endIconName ? (\n <Icon\n name={endIconName}\n size={IconSize.Sm}\n testID=\"end-icon\"\n twClassName={`${getTextColor(pressed)} ml-1`}\n {...endIconProps}\n />\n ) : (\n endAccessory\n )}\n </>\n )}\n </Pressable>\n </Text>\n );\n};\n"]}
|