@metamask-previews/design-system-react-native 0.0.0-preview.3774cae → 0.0.0-preview.3f880d9
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/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.js +3 -3
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/TextButton/TextButton.js +1 -1
- package/dist/components/TextButton/TextButton.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +3 -2
- package/dist/components/index.js.map +1 -1
- package/dist/types/index.d.ts +8 -111
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/index.js +9 -117
- package/dist/types/index.js.map +1 -1
- package/package.json +9 -5
- package/dist/components/Box/Box.constants.d.ts +0 -17
- package/dist/components/Box/Box.constants.d.ts.map +0 -1
- package/dist/components/Box/Box.constants.js +0 -229
- package/dist/components/Box/Box.constants.js.map +0 -1
- package/dist/components/Box/Box.d.ts +0 -4
- package/dist/components/Box/Box.d.ts.map +0 -1
- package/dist/components/Box/Box.js +0 -45
- package/dist/components/Box/Box.js.map +0 -1
- package/dist/components/Box/Box.types.d.ts +0 -116
- package/dist/components/Box/Box.types.d.ts.map +0 -1
- package/dist/components/Box/Box.types.js +0 -3
- package/dist/components/Box/Box.types.js.map +0 -1
- package/dist/components/Box/index.d.ts +0 -4
- package/dist/components/Box/index.d.ts.map +0 -1
- package/dist/components/Box/index.js +0 -6
- package/dist/components/Box/index.js.map +0 -1
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).
|
|
@@ -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":";;;;;;;;;;;;;;;;;;;;;;;;;;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,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,UAAU,EACV,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,qBAAqB,GAAG;MAE1B,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,+BAA+B;YACjC,CAAC,CAAC,uBAAuB;QAC3B,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,SAAS,IAAI,SAAS;gBACtB,CAAC,CAAC,0BAA0B;gBAC5B,CAAC,CAAC,kBAAkB;YACtB,CAAC,CAAC,SAAS;gBACT,CAAC,CAAC,SAAS,IAAI,SAAS;oBACtB,CAAC,CAAC,+BAA+B;oBACjC,CAAC,CAAC,uBAAuB;gBAC3B,CAAC,CAAC,SAAS,IAAI,SAAS;oBACtB,CAAC,CAAC,4BAA4B;oBAC9B,CAAC,CAAC,oBACZ;MACE,WAAW;GACd,CAAC;IAEF,MAAM,gBAAgB,GACpB,SAAS,IAAI,QAAQ;QACnB,CAAC,CAAC,SAAS,IAAI,SAAS;YACtB,CAAC,CAAC,4BAA4B;YAC9B,CAAC,CAAC,oBAAoB;QACxB,CAAC,CAAC,QAAQ;YACR,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,SAAS;gBACT,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,sBAAsB,CAAC;IAEjC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kBAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iBAAU,CAAC,MAAM;YAC7B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,SAAS;YACZ,WAAW,EAAE,GAAG,gBAAgB,IAAI,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE;SACnE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,KAAK,EAAE,gBAA6B;YACpC,gBAAgB,EAAE;gBAChB,WAAW,EAAE,gBAAgB;aAC9B;YACD,GAAG,YAAY;SAChB,CAAC,CACF,cAAc,CAAC,CAAC;YACd,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,cAAc;YACjB,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;SACxE,CAAC,CACF,YAAY,CAAC,CAAC;YACZ,IAAI,EAAE,eAAQ,CAAC,EAAE;YACjB,GAAG,YAAY;YACf,WAAW,EAAE,GAAG,gBAAgB,IAAI,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE;SACxE,CAAC,CACF,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA,GAAG,qBAAqB,EAAE,EAAE,KAAK,CAAC,CAAC,CAC7C,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,aAAa,GAAG,CAAC,EAC5B,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACW,EAAE,EAAE;IACvB,4CAA4C;IAC5C,IAAI,SAAS,EAAE;QACb,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;KACnD;IACD,+BAA+B;IAC/B,OAAO,CACL,CAAC,0CAAa,CAAC,KAAK,CAAC,CAAC,kCAAK,CAAC,KAAK,CAAC,CAChC;MAAA,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,EACjD;IAAA,EAAE,0CAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAdW,QAAA,aAAa,iBAcxB","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"]}
|
|
@@ -83,11 +83,11 @@ exports.Checkbox = (0, react_1.forwardRef)(({ isSelected, isDisabled = false, is
|
|
|
83
83
|
baseBorder = 'border-error-default';
|
|
84
84
|
}
|
|
85
85
|
const pressedBg = isSelected
|
|
86
|
-
? 'bg-primary-
|
|
87
|
-
: 'bg-background-
|
|
86
|
+
? 'bg-primary-default-pressed'
|
|
87
|
+
: 'bg-background-default-pressed';
|
|
88
88
|
let pressedBorder = 'border-border-default';
|
|
89
89
|
if (isSelected) {
|
|
90
|
-
pressedBorder = 'border-primary-
|
|
90
|
+
pressedBorder = 'border-primary-default-pressed';
|
|
91
91
|
}
|
|
92
92
|
else if (isInvalid) {
|
|
93
93
|
pressedBorder = 'border-error-default';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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
|
|
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"]}
|
|
@@ -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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { AvatarAccount, AvatarAccountVariant, AvatarAccountSize, } from './AvatarAccount';
|
|
2
2
|
export type { AvatarAccountProps } from './AvatarAccount';
|
|
3
|
-
export { AvatarBase, AvatarBaseSize } from './AvatarBase';
|
|
3
|
+
export { AvatarBase, AvatarBaseSize, AvatarBaseShape } from './AvatarBase';
|
|
4
4
|
export type { AvatarBaseProps } from './AvatarBase';
|
|
5
5
|
export { AvatarFavicon, AvatarFaviconSize } from './AvatarFavicon';
|
|
6
6
|
export type { AvatarFaviconProps } from './AvatarFavicon';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.TextOrChildren = void 0;
|
|
3
|
+
exports.TextColor = exports.FontStyle = exports.FontFamily = exports.FontWeight = exports.Text = exports.TextButton = exports.Maskicon = exports.Jazzicon = exports.IconSize = exports.IconName = exports.IconColor = exports.Icon = exports.Checkbox = exports.ButtonIconSize = exports.ButtonIcon = exports.ButtonVariant = exports.ButtonSize = exports.Button = exports.ButtonBaseSize = exports.ButtonBase = exports.ButtonAnimated = exports.Blockies = exports.BadgeWrapperPositionAnchorShape = exports.BadgeWrapperPosition = exports.BadgeWrapper = exports.BadgeStatusSize = exports.BadgeStatusStatus = exports.BadgeStatus = exports.BadgeNetwork = exports.BadgeIcon = exports.BadgeCountSize = exports.BadgeCount = exports.AvatarTokenSize = exports.AvatarToken = exports.AvatarNetworkSize = exports.AvatarNetwork = exports.AvatarIconSize = exports.AvatarIconSeverity = exports.AvatarIcon = exports.AvatarGroupVariant = exports.AvatarGroupSize = exports.AvatarGroup = exports.AvatarFaviconSize = exports.AvatarFavicon = exports.AvatarBaseShape = exports.AvatarBaseSize = exports.AvatarBase = exports.AvatarAccountSize = exports.AvatarAccountVariant = exports.AvatarAccount = void 0;
|
|
4
|
+
exports.TextOrChildren = exports.TextVariant = void 0;
|
|
5
5
|
var AvatarAccount_1 = require("./AvatarAccount");
|
|
6
6
|
Object.defineProperty(exports, "AvatarAccount", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccount; } });
|
|
7
7
|
Object.defineProperty(exports, "AvatarAccountVariant", { enumerable: true, get: function () { return AvatarAccount_1.AvatarAccountVariant; } });
|
|
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "AvatarAccountSize", { enumerable: true, get: fun
|
|
|
9
9
|
var AvatarBase_1 = require("./AvatarBase");
|
|
10
10
|
Object.defineProperty(exports, "AvatarBase", { enumerable: true, get: function () { return AvatarBase_1.AvatarBase; } });
|
|
11
11
|
Object.defineProperty(exports, "AvatarBaseSize", { enumerable: true, get: function () { return AvatarBase_1.AvatarBaseSize; } });
|
|
12
|
+
Object.defineProperty(exports, "AvatarBaseShape", { enumerable: true, get: function () { return AvatarBase_1.AvatarBaseShape; } });
|
|
12
13
|
var AvatarFavicon_1 = require("./AvatarFavicon");
|
|
13
14
|
Object.defineProperty(exports, "AvatarFavicon", { enumerable: true, get: function () { return AvatarFavicon_1.AvatarFavicon; } });
|
|
14
15
|
Object.defineProperty(exports, "AvatarFaviconSize", { enumerable: true, get: function () { return AvatarFavicon_1.AvatarFaviconSize; } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iDAIyB;AAHvB,8GAAA,aAAa,OAAA;AACb,qHAAA,oBAAoB,OAAA;AACpB,kHAAA,iBAAiB,OAAA;AAInB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;;AAAA,iDAIyB;AAHvB,8GAAA,aAAa,OAAA;AACb,qHAAA,oBAAoB,OAAA;AACpB,kHAAA,iBAAiB,OAAA;AAInB,2CAA2E;AAAlE,wGAAA,UAAU,OAAA;AAAE,4GAAA,cAAc,OAAA;AAAE,6GAAA,eAAe,OAAA;AAGpD,iDAAmE;AAA1D,8GAAA,aAAa,OAAA;AAAE,kHAAA,iBAAiB,OAAA;AAGzC,6CAIuB;AAHrB,0GAAA,WAAW,OAAA;AACX,8GAAA,eAAe,OAAA;AACf,iHAAA,kBAAkB,OAAA;AAIpB,2CAA8E;AAArE,wGAAA,UAAU,OAAA;AAAE,gHAAA,kBAAkB,OAAA;AAAE,4GAAA,cAAc,OAAA;AAGvD,iDAAmE;AAA1D,8GAAA,aAAa,OAAA;AAAE,kHAAA,iBAAiB,OAAA;AAGzC,6CAA6D;AAApD,0GAAA,WAAW,OAAA;AAAE,8GAAA,eAAe,OAAA;AAGrC,2CAA0D;AAAjD,wGAAA,UAAU,OAAA;AAAE,4GAAA,cAAc,OAAA;AAGnC,yCAAwC;AAA/B,sGAAA,SAAS,OAAA;AAGlB,+CAA8C;AAArC,4GAAA,YAAY,OAAA;AAGrB,6CAAgF;AAAvE,0GAAA,WAAW,OAAA;AAAE,gHAAA,iBAAiB,OAAA;AAAE,8GAAA,eAAe,OAAA;AAGxD,+CAIwB;AAHtB,4GAAA,YAAY,OAAA;AACZ,oHAAA,oBAAoB,OAAA;AACpB,+HAAA,+BAA+B,OAAA;AAOjC,uDAAsD;AAA7C,oGAAA,QAAQ,OAAA;AAGjB,mEAAkE;AAAzD,gHAAA,cAAc,OAAA;AAGvB,2CAA0D;AAAjD,wGAAA,UAAU,OAAA;AAAE,4GAAA,cAAc,OAAA;AAGnC,mCAA6D;AAApD,gGAAA,MAAM,OAAA;AAAE,oGAAA,UAAU,OAAA;AAAE,uGAAA,aAAa,OAAA;AAG1C,2CAA0D;AAAjD,wGAAA,UAAU,OAAA;AAAE,4GAAA,cAAc,OAAA;AAGnC,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AAGjB,+BAA6D;AAApD,4FAAA,IAAI,OAAA;AAAE,iGAAA,SAAS,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAG5C,uDAAsD;AAA7C,oGAAA,QAAQ,OAAA;AAGjB,uDAAsD;AAA7C,oGAAA,QAAQ,OAAA;AAGjB,2CAA0C;AAAjC,wGAAA,UAAU,OAAA;AAGnB,+BAOgB;AANd,4FAAA,IAAI,OAAA;AACJ,kGAAA,UAAU,OAAA;AACV,kGAAA,UAAU,OAAA;AACV,iGAAA,SAAS,OAAA;AACT,iGAAA,SAAS,OAAA;AACT,mGAAA,WAAW,OAAA;AAIb,mEAAkE;AAAzD,gHAAA,cAAc,OAAA","sourcesContent":["export {\n AvatarAccount,\n AvatarAccountVariant,\n AvatarAccountSize,\n} from './AvatarAccount';\nexport type { AvatarAccountProps } from './AvatarAccount';\n\nexport { AvatarBase, AvatarBaseSize, AvatarBaseShape } from './AvatarBase';\nexport type { AvatarBaseProps } from './AvatarBase';\n\nexport { AvatarFavicon, AvatarFaviconSize } from './AvatarFavicon';\nexport type { AvatarFaviconProps } from './AvatarFavicon';\n\nexport {\n AvatarGroup,\n AvatarGroupSize,\n AvatarGroupVariant,\n} from './AvatarGroup';\nexport type { AvatarGroupProps } from './AvatarGroup';\n\nexport { AvatarIcon, AvatarIconSeverity, AvatarIconSize } from './AvatarIcon';\nexport type { AvatarIconProps } from './AvatarIcon';\n\nexport { AvatarNetwork, AvatarNetworkSize } from './AvatarNetwork';\nexport type { AvatarNetworkProps } from './AvatarNetwork';\n\nexport { AvatarToken, AvatarTokenSize } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken';\n\nexport { BadgeCount, BadgeCountSize } from './BadgeCount';\nexport type { BadgeCountProps } from './BadgeCount';\n\nexport { BadgeIcon } from './BadgeIcon';\nexport type { BadgeIconProps } from './BadgeIcon';\n\nexport { BadgeNetwork } from './BadgeNetwork';\nexport type { BadgeNetworkProps } from './BadgeNetwork';\n\nexport { BadgeStatus, BadgeStatusStatus, BadgeStatusSize } from './BadgeStatus';\nexport type { BadgeStatusProps } from './BadgeStatus';\n\nexport {\n BadgeWrapper,\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from './BadgeWrapper';\nexport type {\n BadgeWrapperProps,\n BadgeWrapperCustomPosition,\n} from './BadgeWrapper';\n\nexport { Blockies } from './temp-components/Blockies';\nexport type { BlockiesProps } from './temp-components/Blockies';\n\nexport { ButtonAnimated } from './temp-components/ButtonAnimated';\nexport type { ButtonAnimatedProps } from './temp-components/ButtonAnimated';\n\nexport { ButtonBase, ButtonBaseSize } from './ButtonBase';\nexport type { ButtonBaseProps } from './ButtonBase';\n\nexport { Button, ButtonSize, ButtonVariant } from './Button';\nexport type { ButtonProps } from './Button';\n\nexport { ButtonIcon, ButtonIconSize } from './ButtonIcon';\nexport type { ButtonIconProps } from './ButtonIcon';\n\nexport { Checkbox } from './Checkbox';\nexport type { CheckboxProps } from './Checkbox';\n\nexport { Icon, IconColor, IconName, IconSize } from './Icon';\nexport type { IconProps } from './Icon';\n\nexport { Jazzicon } from './temp-components/Jazzicon';\nexport type { JazziconProps } from './temp-components/Jazzicon';\n\nexport { Maskicon } from './temp-components/Maskicon';\nexport type { MaskiconProps } from './temp-components/Maskicon';\n\nexport { TextButton } from './TextButton';\nexport type { TextButtonProps } from './TextButton';\n\nexport {\n Text,\n FontWeight,\n FontFamily,\n FontStyle,\n TextColor,\n TextVariant,\n} from './Text';\nexport type { TextProps } from './Text';\n\nexport { TextOrChildren } from './temp-components/TextOrChildren';\nexport type { TextOrChildrenProps } from './temp-components/TextOrChildren';\n"]}
|