@metamask-previews/design-system-react-native 0.4.1-preview.c47bb52 → 0.5.0-preview.0abe95c

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +21 -1
  2. package/dist/components/ButtonBase/ButtonBase.cjs +45 -36
  3. package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
  4. package/dist/components/ButtonBase/ButtonBase.d.cts.map +1 -1
  5. package/dist/components/ButtonBase/ButtonBase.d.mts.map +1 -1
  6. package/dist/components/ButtonBase/ButtonBase.mjs +45 -36
  7. package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
  8. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.cjs +17 -9
  9. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.cjs.map +1 -1
  10. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.cts +1 -1
  11. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.cts.map +1 -1
  12. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.mts +1 -1
  13. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.mts.map +1 -1
  14. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.mjs +17 -6
  15. package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.mjs.map +1 -1
  16. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.5.0]
11
+
12
+ ### Changed
13
+
14
+ - **BREAKING:** Update font file names from space-separated to hyphenated PostScript format for iOS Metro bundler compatibility ([#862](https://github.com/MetaMask/metamask-design-system/pull/862))
15
+ - Font file names changed: "Geist Regular.otf" → "Geist-Regular.otf", "Geist Medium.otf" → "Geist-Medium.otf", "Geist Bold.otf" → "Geist-Bold.otf"
16
+ - Fixes Metro bundler asset resolution issues on iOS that prevented fonts from loading correctly
17
+ - If using `@metamask/design-system-react-native` components as intended, fonts automatically load correctly with no migration needed
18
+ - If manually referencing font file paths in custom code, update all references to use hyphenated file names instead of space-separated names
19
+ - Android is unaffected by this change
20
+ - Updated `@metamask/utils` peer dependency from 11.8.0 to 11.8.1 ([#838](https://github.com/MetaMask/metamask-design-system/pull/838))
21
+
22
+ ### Fixed
23
+
24
+ - Export missing `TextButtonSize` enum from package entry point for TypeScript type safety ([#848](https://github.com/MetaMask/metamask-design-system/pull/848))
25
+ - The `TextButtonSize` enum is now properly exported and accessible for imports
26
+ - Developers can now use typed enums instead of string literals: `import { TextButton, TextButtonSize } from '@metamask/design-system-react-native'` and `<TextButton size={TextButtonSize.Medium} />`
27
+ - This is a non-breaking, additive change that improves type safety
28
+
10
29
  ## [0.4.1]
11
30
 
12
31
  ### Fixed
@@ -83,7 +102,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
83
102
  - Full TypeScript support with type definitions and enums
84
103
  - React Native integration with TWRNC preset support
85
104
 
86
- [Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.1...HEAD
105
+ [Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.5.0...HEAD
106
+ [0.5.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.1...@metamask/design-system-react-native@0.5.0
87
107
  [0.4.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.4.0...@metamask/design-system-react-native@0.4.1
88
108
  [0.4.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.3.1...@metamask/design-system-react-native@0.4.0
89
109
  [0.3.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.3.0...@metamask/design-system-react-native@0.3.1
package/dist/components/ButtonBase/ButtonBase.cjs CHANGED
@@ -75,53 +75,62 @@ const ButtonBase = ({ children, textProps, size = types_1.ButtonBaseSize.Lg, isL
75
75
  return state;
76
76
  }, [isDisabled, isLoading]);
77
77
  return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole={accessibilityRole} accessibilityLabel={finalAccessibilityLabel} accessibilityHint={finalAccessibilityHint} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityState={accessibilityState} accessible style={({ pressed }) => {
78
- const containerClassName = typeof twClassName === 'function'
78
+ // Evaluate custom className if it's a function
79
+ const customClassName = typeof twClassName === 'function'
79
80
  ? twClassName(pressed)
80
81
  : twClassName;
81
- const baseContainerClassNames = `
82
- flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden
83
- ${ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}
84
- ${isDisabled ? 'opacity-50' : 'opacity-100'}
85
- ${isFullWidth ? 'w-full' : 'w-auto'}
86
- ${containerClassName}
87
- `;
88
- const computedStyle = [
89
- tw `${baseContainerClassNames}`,
90
- ];
91
- if (typeof style === 'function') {
92
- const additionalStyle = style({ pressed });
93
- if (additionalStyle) {
94
- computedStyle.push(additionalStyle);
95
- }
96
- }
97
- else if (style) {
98
- computedStyle.push(style);
82
+ // Build button container styles
83
+ const buttonStyles = tw.style(
84
+ // Base layout - flex container for button content
85
+ 'flex-row items-center justify-center gap-x-2',
86
+ // Visual styling
87
+ 'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',
88
+ // Size
89
+ ButtonBase_constants_1.TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],
90
+ // State-based opacity
91
+ isDisabled ? 'opacity-50' : 'opacity-100',
92
+ // Width - use self-start to prevent stretching when not full width
93
+ isFullWidth ? 'w-full' : 'self-start',
94
+ // Custom classes
95
+ customClassName);
96
+ // Merge with additional styles if provided
97
+ const computedStyle = [buttonStyles];
98
+ const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
99
+ if (additionalStyle) {
100
+ computedStyle.push(additionalStyle);
99
101
  }
100
102
  return computedStyle;
101
103
  }} {...props}>
102
104
  {({ pressed }) => (<>
103
- <react_native_1.View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} testID="spinner-container">
104
- <Spinner_1.Spinner color={textClassName
105
- ? textClassName(pressed)
106
- : Icon_1.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
107
- numberOfLines: 1,
108
- twClassName: textClassName ? textClassName(pressed) : '',
109
- ...spinnerProps?.loadingTextProps,
110
- }} {...spinnerProps}/>
111
- </react_native_1.View>
112
- <react_native_1.View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
113
- {finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)}
114
- <TextOrChildren_1.TextOrChildren textProps={{
105
+ {/* Loading spinner overlay */}
106
+ {isLoading && (<react_native_1.View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
107
+ <Spinner_1.Spinner color={textClassName
108
+ ? textClassName(pressed)
109
+ : Icon_1.IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
110
+ numberOfLines: 1,
111
+ twClassName: textClassName ? textClassName(pressed) : '',
112
+ ...spinnerProps?.loadingTextProps,
113
+ }} {...spinnerProps}/>
114
+ </react_native_1.View>)}
115
+
116
+ {/* Button content - opacity controlled by wrapper, no extra View needed */}
117
+ {finalStartIconName ? (<Icon_1.Icon name={finalStartIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory && (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>
118
+ {startAccessory}
119
+ </react_native_1.View>))}
120
+
121
+ <TextOrChildren_1.TextOrChildren textProps={{
115
122
  variant: Text_1.TextVariant.BodyMd,
116
123
  fontWeight: Text_1.FontWeight.Medium,
117
124
  color: Text_1.TextColor.TextDefault,
118
- twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
125
+ twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
119
126
  ...textProps,
120
127
  }}>
121
- {children}
122
- </TextOrChildren_1.TextOrChildren>
123
- {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)}
124
- </react_native_1.View>
128
+ {children}
129
+ </TextOrChildren_1.TextOrChildren>
130
+
131
+ {finalEndIconName ? (<Icon_1.Icon name={finalEndIconName} size={Icon_1.IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<react_native_1.View style={tw.style(isLoading && 'opacity-0')}>
132
+ {endAccessory}
133
+ </react_native_1.View>))}
125
134
  </>)}
126
135
  </ButtonAnimated_1.ButtonAnimated>);
127
136
  };
package/dist/components/ButtonBase/ButtonBase.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName = '',\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled || isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled || isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n const containerClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n const baseContainerClassNames = `\n flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden\n ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}\n ${isDisabled ? 'opacity-50' : 'opacity-100'}\n ${isFullWidth ? 'w-full' : 'w-auto'}\n ${containerClassName}\n `;\n\n const computedStyle: StyleProp<ViewStyle>[] = [\n tw`${baseContainerClassNames}`,\n ];\n if (typeof style === 'function') {\n const additionalStyle = style({ pressed });\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n } else if (style) {\n computedStyle.push(style);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => (\n <>\n <View\n style={tw`absolute inset-0 flex items-center justify-center ${\n isLoading ? 'opacity-100' : 'opacity-0'\n }`}\n testID=\"spinner-container\"\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n loadingTextProps={{\n numberOfLines: 1,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n {...spinnerProps}\n />\n </View>\n <View\n style={tw`flex-row items-center justify-center gap-x-2 ${\n isLoading ? 'opacity-0' : 'opacity-100'\n }`}\n testID=\"content-container\"\n >\n {finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...startIconProps}\n />\n ) : (\n startAccessory\n )}\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,\n ...textProps,\n }}\n >\n {children}\n </TextOrChildren>\n {finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...endIconProps}\n />\n ) : (\n endAccessory\n )}\n </View>\n </>\n )}\n </ButtonAnimated>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName = '',\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled || isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled || isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n // Evaluate custom className if it's a function\n const customClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n // Build button container styles\n const buttonStyles = tw.style(\n // Base layout - flex container for button content\n 'flex-row items-center justify-center gap-x-2',\n // Visual styling\n 'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // State-based opacity\n isDisabled ? 'opacity-50' : 'opacity-100',\n // Width - use self-start to prevent stretching when not full width\n isFullWidth ? 'w-full' : 'self-start',\n // Custom classes\n customClassName,\n );\n\n // Merge with additional styles if provided\n const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <View\n style={tw.style(\n 'absolute inset-0 flex items-center justify-center',\n )}\n testID=\"spinner-container\"\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n loadingTextProps={{\n numberOfLines: 1,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n {...spinnerProps}\n />\n </View>\n )}\n\n {/* Button content - opacity controlled by wrapper, no extra View needed */}\n {finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n {...startIconProps}\n />\n ) : (\n startAccessory && (\n <View style={tw.style(isLoading && 'opacity-0')}>\n {startAccessory}\n </View>\n )\n )}\n\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n ...textProps,\n }}\n >\n {children}\n </TextOrChildren>\n\n {finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n {...endIconProps}\n />\n ) : (\n endAccessory && (\n <View style={tw.style(isLoading && 'opacity-0')}>\n {endAccessory}\n </View>\n )\n )}\n </>\n )}\n </ButtonAnimated>\n );\n};\n"]}
package/dist/components/ButtonBase/ButtonBase.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA8JjB,CAAC"}
1
+ {"version":3,"file":"ButtonBase.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA6KjB,CAAC"}
package/dist/components/ButtonBase/ButtonBase.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA8JjB,CAAC"}
1
+ {"version":3,"file":"ButtonBase.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AAYvC,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,4VAyBpB,eAAe,sBA6KjB,CAAC"}
package/dist/components/ButtonBase/ButtonBase.mjs CHANGED
@@ -56,53 +56,62 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
56
56
  return state;
57
57
  }, [isDisabled, isLoading]);
58
58
  return (<ButtonAnimated disabled={isDisabled || isLoading} accessibilityRole={accessibilityRole} accessibilityLabel={finalAccessibilityLabel} accessibilityHint={finalAccessibilityHint} accessibilityActions={accessibilityActions} onAccessibilityAction={onAccessibilityAction} accessibilityState={accessibilityState} accessible style={({ pressed }) => {
59
- const containerClassName = typeof twClassName === 'function'
59
+ // Evaluate custom className if it's a function
60
+ const customClassName = typeof twClassName === 'function'
60
61
  ? twClassName(pressed)
61
62
  : twClassName;
62
- const baseContainerClassNames = `
63
- flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden
64
- ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}
65
- ${isDisabled ? 'opacity-50' : 'opacity-100'}
66
- ${isFullWidth ? 'w-full' : 'w-auto'}
67
- ${containerClassName}
68
- `;
69
- const computedStyle = [
70
- tw `${baseContainerClassNames}`,
71
- ];
72
- if (typeof style === 'function') {
73
- const additionalStyle = style({ pressed });
74
- if (additionalStyle) {
75
- computedStyle.push(additionalStyle);
76
- }
77
- }
78
- else if (style) {
79
- computedStyle.push(style);
63
+ // Build button container styles
64
+ const buttonStyles = tw.style(
65
+ // Base layout - flex container for button content
66
+ 'flex-row items-center justify-center gap-x-2',
67
+ // Visual styling
68
+ 'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',
69
+ // Size
70
+ TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],
71
+ // State-based opacity
72
+ isDisabled ? 'opacity-50' : 'opacity-100',
73
+ // Width - use self-start to prevent stretching when not full width
74
+ isFullWidth ? 'w-full' : 'self-start',
75
+ // Custom classes
76
+ customClassName);
77
+ // Merge with additional styles if provided
78
+ const computedStyle = [buttonStyles];
79
+ const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
80
+ if (additionalStyle) {
81
+ computedStyle.push(additionalStyle);
80
82
  }
81
83
  return computedStyle;
82
84
  }} {...props}>
83
85
  {({ pressed }) => (<>
84
- <View style={tw `absolute inset-0 flex items-center justify-center ${isLoading ? 'opacity-100' : 'opacity-0'}`} testID="spinner-container">
85
- <Spinner color={textClassName
86
- ? textClassName(pressed)
87
- : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
88
- numberOfLines: 1,
89
- twClassName: textClassName ? textClassName(pressed) : '',
90
- ...spinnerProps?.loadingTextProps,
91
- }} {...spinnerProps}/>
92
- </View>
93
- <View style={tw `flex-row items-center justify-center gap-x-2 ${isLoading ? 'opacity-0' : 'opacity-100'}`} testID="content-container">
94
- {finalStartIconName ? (<Icon name={finalStartIconName} size={IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory)}
95
- <TextOrChildren textProps={{
86
+ {/* Loading spinner overlay */}
87
+ {isLoading && (<View style={tw.style('absolute inset-0 flex items-center justify-center')} testID="spinner-container">
88
+ <Spinner color={textClassName
89
+ ? textClassName(pressed)
90
+ : IconColor.IconDefault} loadingText={loadingText} loadingTextProps={{
91
+ numberOfLines: 1,
92
+ twClassName: textClassName ? textClassName(pressed) : '',
93
+ ...spinnerProps?.loadingTextProps,
94
+ }} {...spinnerProps}/>
95
+ </View>)}
96
+
97
+ {/* Button content - opacity controlled by wrapper, no extra View needed */}
98
+ {finalStartIconName ? (<Icon name={finalStartIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...startIconProps}/>) : (startAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
99
+ {startAccessory}
100
+ </View>))}
101
+
102
+ <TextOrChildren textProps={{
96
103
  variant: TextVariant.BodyMd,
97
104
  fontWeight: FontWeight.Medium,
98
105
  color: TextColor.TextDefault,
99
- twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,
106
+ twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,
100
107
  ...textProps,
101
108
  }}>
102
- {children}
103
- </TextOrChildren>
104
- {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory)}
105
- </View>
109
+ {children}
110
+ </TextOrChildren>
111
+
112
+ {finalEndIconName ? (<Icon name={finalEndIconName} size={IconSize.Sm} twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`} {...endIconProps}/>) : (endAccessory && (<View style={tw.style(isLoading && 'opacity-0')}>
113
+ {endAccessory}
114
+ </View>))}
106
115
  </>)}
107
116
  </ButtonAnimated>);
108
117
  };
package/dist/components/ButtonBase/ButtonBase.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName = '',\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled || isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled || isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n const containerClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n const baseContainerClassNames = `\n flex-row items-center justify-center rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden\n ${TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size]}\n ${isDisabled ? 'opacity-50' : 'opacity-100'}\n ${isFullWidth ? 'w-full' : 'w-auto'}\n ${containerClassName}\n `;\n\n const computedStyle: StyleProp<ViewStyle>[] = [\n tw`${baseContainerClassNames}`,\n ];\n if (typeof style === 'function') {\n const additionalStyle = style({ pressed });\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n } else if (style) {\n computedStyle.push(style);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => (\n <>\n <View\n style={tw`absolute inset-0 flex items-center justify-center ${\n isLoading ? 'opacity-100' : 'opacity-0'\n }`}\n testID=\"spinner-container\"\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n loadingTextProps={{\n numberOfLines: 1,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n {...spinnerProps}\n />\n </View>\n <View\n style={tw`flex-row items-center justify-center gap-x-2 ${\n isLoading ? 'opacity-0' : 'opacity-100'\n }`}\n testID=\"content-container\"\n >\n {finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...startIconProps}\n />\n ) : (\n startAccessory\n )}\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n twClassName: `shrink grow-0 flex-wrap text-center ${textClassName ? textClassName(pressed) : ''}`,\n ...textProps,\n }}\n >\n {children}\n </TextOrChildren>\n {finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${iconClassName ? iconClassName(pressed) : ''}`}\n {...endIconProps}\n />\n ) : (\n endAccessory\n )}\n </View>\n </>\n )}\n </ButtonAnimated>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { ButtonBaseSize } from '../../types';\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\nimport { TextOrChildren } from '../temp-components/TextOrChildren/TextOrChildren';\nimport { TextVariant, FontWeight, TextColor } from '../Text';\n\nimport { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';\nimport type { ButtonBaseProps } from './ButtonBase.types';\n\nexport const ButtonBase = ({\n children,\n textProps,\n size = ButtonBaseSize.Lg,\n isLoading,\n loadingText,\n spinnerProps,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n isDisabled,\n isFullWidth,\n twClassName = '',\n textClassName,\n iconClassName,\n style,\n accessibilityLabel,\n accessibilityHint,\n accessibilityRole = 'button',\n accessibilityActions,\n onAccessibilityAction,\n ...props\n}: ButtonBaseProps) => {\n const tw = useTailwind();\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n // Generate accessibility label if not provided\n const finalAccessibilityLabel = useMemo(() => {\n if (accessibilityLabel) {\n return accessibilityLabel;\n }\n\n // For loading state with loadingText, prioritize loadingText\n if (isLoading && loadingText) {\n return loadingText;\n }\n\n // If children is a string, use it as the label\n if (typeof children === 'string') {\n return children;\n }\n\n return undefined;\n }, [accessibilityLabel, children, isLoading, loadingText]);\n\n // Generate accessibility hint for loading state if not provided\n const finalAccessibilityHint = useMemo(() => {\n if (accessibilityHint) {\n return accessibilityHint;\n }\n\n if (isLoading) {\n return 'Button is currently loading, please wait';\n }\n\n return undefined;\n }, [accessibilityHint, isLoading]);\n\n // Create accessibilityState object with only truthy values\n const accessibilityState = useMemo(() => {\n const state: { disabled?: boolean; busy?: boolean } = {};\n\n if (isDisabled || isLoading) {\n state.disabled = true;\n }\n\n if (isLoading) {\n state.busy = true;\n }\n\n return state;\n }, [isDisabled, isLoading]);\n\n return (\n <ButtonAnimated\n disabled={isDisabled || isLoading}\n accessibilityRole={accessibilityRole}\n accessibilityLabel={finalAccessibilityLabel}\n accessibilityHint={finalAccessibilityHint}\n accessibilityActions={accessibilityActions}\n onAccessibilityAction={onAccessibilityAction}\n accessibilityState={accessibilityState}\n accessible\n style={({ pressed }) => {\n // Evaluate custom className if it's a function\n const customClassName =\n typeof twClassName === 'function'\n ? twClassName(pressed)\n : twClassName;\n\n // Build button container styles\n const buttonStyles = tw.style(\n // Base layout - flex container for button content\n 'flex-row items-center justify-center gap-x-2',\n // Visual styling\n 'rounded-xl bg-muted px-4 min-w-[80px] overflow-hidden',\n // Size\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION[size],\n // State-based opacity\n isDisabled ? 'opacity-50' : 'opacity-100',\n // Width - use self-start to prevent stretching when not full width\n isFullWidth ? 'w-full' : 'self-start',\n // Custom classes\n customClassName,\n );\n\n // Merge with additional styles if provided\n const computedStyle: StyleProp<ViewStyle>[] = [buttonStyles];\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n if (additionalStyle) {\n computedStyle.push(additionalStyle);\n }\n\n return computedStyle;\n }}\n {...props}\n >\n {({ pressed }) => (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <View\n style={tw.style(\n 'absolute inset-0 flex items-center justify-center',\n )}\n testID=\"spinner-container\"\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n loadingTextProps={{\n numberOfLines: 1,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n {...spinnerProps}\n />\n </View>\n )}\n\n {/* Button content - opacity controlled by wrapper, no extra View needed */}\n {finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n {...startIconProps}\n />\n ) : (\n startAccessory && (\n <View style={tw.style(isLoading && 'opacity-0')}>\n {startAccessory}\n </View>\n )\n )}\n\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n twClassName: `shrink grow-0 flex-wrap text-center ${isLoading ? 'opacity-0' : ''} ${textClassName ? textClassName(pressed) : ''}`,\n ...textProps,\n }}\n >\n {children}\n </TextOrChildren>\n\n {finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={IconSize.Sm}\n twClassName={`shrink-0 ${isLoading ? 'opacity-0' : ''} ${iconClassName ? iconClassName(pressed) : ''}`}\n {...endIconProps}\n />\n ) : (\n endAccessory && (\n <View style={tw.style(isLoading && 'opacity-0')}>\n {endAccessory}\n </View>\n )\n )}\n </>\n )}\n </ButtonAnimated>\n );\n};\n"]}
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.cjs CHANGED
@@ -22,22 +22,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
22
22
  __setModuleDefault(result, mod);
23
23
  return result;
24
24
  };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
25
  Object.defineProperty(exports, "__esModule", { value: true });
29
26
  exports.ButtonAnimated = void 0;
30
- const react_1 = __importDefault(require("react"));
27
+ const react_1 = __importStar(require("react"));
31
28
  const react_native_1 = require("react-native/index.js");
32
29
  const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
33
- const ButtonAnimated = ({ onPressIn, onPressOut, disabled, ...props }) => {
30
+ const AnimatedPressable = react_native_reanimated_1.default.createAnimatedComponent(react_native_1.Pressable);
31
+ const ButtonAnimated = ({ onPressIn, onPressOut, disabled, style, children, ...props }) => {
32
+ const [isPressed, setIsPressed] = (0, react_1.useState)(false);
34
33
  const animation = (0, react_native_reanimated_1.useSharedValue)(1);
35
- const scaleStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
34
+ const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
36
35
  return {
37
36
  transform: [{ scale: animation.value }],
38
37
  };
39
38
  });
40
39
  const onPressInHandler = (event) => {
40
+ setIsPressed(true);
41
41
  animation.value = (0, react_native_reanimated_1.withTiming)(0.97, {
42
42
  duration: 100,
43
43
  easing: react_native_reanimated_1.Easing.bezier(0.3, 0.8, 0.3, 1),
@@ -45,15 +45,23 @@ const ButtonAnimated = ({ onPressIn, onPressOut, disabled, ...props }) => {
45
45
  onPressIn?.(event);
46
46
  };
47
47
  const onPressOutHandler = (event) => {
48
+ setIsPressed(false);
48
49
  animation.value = (0, react_native_reanimated_1.withTiming)(1, {
49
50
  duration: 100,
50
51
  easing: react_native_reanimated_1.Easing.bezier(0.3, 0.8, 0.3, 1),
51
52
  });
52
53
  onPressOut?.(event);
53
54
  };
54
- return (<react_native_reanimated_1.default.View style={[scaleStyle, { alignItems: 'center', justifyContent: 'center' }]}>
55
- <react_native_1.Pressable onPressIn={onPressInHandler} onPressOut={onPressOutHandler} disabled={disabled} {...props}/>
56
- </react_native_reanimated_1.default.View>);
55
+ // Evaluate style function if needed
56
+ const evaluatedStyle = typeof style === 'function' ? style({ pressed: isPressed }) : style;
57
+ return (<AnimatedPressable onPressIn={onPressInHandler} onPressOut={onPressOutHandler} disabled={disabled} style={[
58
+ ...(Array.isArray(evaluatedStyle) ? evaluatedStyle : [evaluatedStyle]),
59
+ animatedStyle,
60
+ ]} {...props}>
61
+ {typeof children === 'function'
62
+ ? children({ pressed: isPressed })
63
+ : children}
64
+ </AnimatedPressable>);
57
65
  };
58
66
  exports.ButtonAnimated = ButtonAnimated;
59
67
  //# sourceMappingURL=ButtonAnimated.cjs.map
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonAnimated.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,wDAAyC;AACzC,mFAKiC;AAI1B,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,IAAA,0CAAgB,EAAC,GAAG,EAAE;QACvC,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,SAAS,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,gCAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,SAAS,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,CAAC,EAAE;YAC9B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,gCAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,iCAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,CAAC,CAExE;MAAA,CAAC,wBAAS,CACR,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,KAAK,CAAC,EAEd;IAAA,EAAE,iCAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,cAAc,kBAyCzB","sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { Pressable } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { ButtonAnimatedProps } from './ButtonAnimated.types';\n\nexport const ButtonAnimated = ({\n onPressIn,\n onPressOut,\n disabled,\n ...props\n}: ButtonAnimatedProps) => {\n const animation = useSharedValue(1);\n const scaleStyle = useAnimatedStyle(() => {\n return {\n transform: [{ scale: animation.value }],\n };\n });\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(0.97, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(1, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressOut?.(event);\n };\n\n return (\n <Animated.View\n style={[scaleStyle, { alignItems: 'center', justifyContent: 'center' }]}\n >\n <Pressable\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n disabled={disabled}\n {...props}\n />\n </Animated.View>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonAnimated.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AAExC,wDAAyC;AACzC,mFAKiC;AAIjC,MAAM,iBAAiB,GAAG,iCAAQ,CAAC,uBAAuB,CAAC,wBAAS,CAAC,CAAC;AAE/D,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,wCAAc,EAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,aAAa,GAAG,IAAA,0CAAgB,EAAC,GAAG,EAAE;QAC1C,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,gCAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,SAAS,CAAC,KAAK,GAAG,IAAA,oCAAU,EAAC,CAAC,EAAE;YAC9B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,gCAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,oCAAoC;IACpC,MAAM,cAAc,GAClB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEtE,OAAO,CACL,CAAC,iBAAiB,CAChB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC;YACL,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YACtE,aAAa;SACd,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,QAAQ,KAAK,UAAU;YAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;YAClC,CAAC,CAAC,QAAQ,CACd;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AAvDW,QAAA,cAAc,kBAuDzB","sourcesContent":["import React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { Pressable } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { ButtonAnimatedProps } from './ButtonAnimated.types';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport const ButtonAnimated = ({\n onPressIn,\n onPressOut,\n disabled,\n style,\n children,\n ...props\n}: ButtonAnimatedProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const animation = useSharedValue(1);\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n transform: [{ scale: animation.value }],\n };\n });\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n animation.value = withTiming(0.97, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n animation.value = withTiming(1, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressOut?.(event);\n };\n\n // Evaluate style function if needed\n const evaluatedStyle =\n typeof style === 'function' ? style({ pressed: isPressed }) : style;\n\n return (\n <AnimatedPressable\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n disabled={disabled}\n style={[\n ...(Array.isArray(evaluatedStyle) ? evaluatedStyle : [evaluatedStyle]),\n animatedStyle,\n ]}\n {...props}\n >\n {typeof children === 'function'\n ? children({ pressed: isPressed })\n : children}\n </AnimatedPressable>\n );\n};\n"]}
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.cts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonAnimatedProps } from "./ButtonAnimated.types.cjs";
3
- export declare const ButtonAnimated: ({ onPressIn, onPressOut, disabled, ...props }: ButtonAnimatedProps) => React.JSX.Element;
3
+ export declare const ButtonAnimated: ({ onPressIn, onPressOut, disabled, style, children, ...props }: ButtonAnimatedProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonAnimated.d.cts.map
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonAnimated.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,kDAKxB,mBAAmB,sBAoCrB,CAAC"}
1
+ {"version":3,"file":"ButtonAnimated.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAUxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,mEAOxB,mBAAmB,sBAgDrB,CAAC"}
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.mts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import type { ButtonAnimatedProps } from "./ButtonAnimated.types.mjs";
3
- export declare const ButtonAnimated: ({ onPressIn, onPressOut, disabled, ...props }: ButtonAnimatedProps) => React.JSX.Element;
3
+ export declare const ButtonAnimated: ({ onPressIn, onPressOut, disabled, style, children, ...props }: ButtonAnimatedProps) => React.JSX.Element;
4
4
  //# sourceMappingURL=ButtonAnimated.d.mts.map
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonAnimated.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,kDAKxB,mBAAmB,sBAoCrB,CAAC"}
1
+ {"version":3,"file":"ButtonAnimated.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,cAAc;AAUxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAIlE,eAAO,MAAM,cAAc,mEAOxB,mBAAmB,sBAgDrB,CAAC"}
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.mjs CHANGED
@@ -4,18 +4,21 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
- import $React from "react";
7
+ import $React, { useState } from "react";
8
8
  const React = $importDefault($React);
9
9
  import { Pressable } from "react-native/index.js";
10
10
  import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from "react-native-reanimated";
11
- export const ButtonAnimated = ({ onPressIn, onPressOut, disabled, ...props }) => {
11
+ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
12
+ export const ButtonAnimated = ({ onPressIn, onPressOut, disabled, style, children, ...props }) => {
13
+ const [isPressed, setIsPressed] = useState(false);
12
14
  const animation = useSharedValue(1);
13
- const scaleStyle = useAnimatedStyle(() => {
15
+ const animatedStyle = useAnimatedStyle(() => {
14
16
  return {
15
17
  transform: [{ scale: animation.value }],
16
18
  };
17
19
  });
18
20
  const onPressInHandler = (event) => {
21
+ setIsPressed(true);
19
22
  animation.value = withTiming(0.97, {
20
23
  duration: 100,
21
24
  easing: Easing.bezier(0.3, 0.8, 0.3, 1),
@@ -23,14 +26,22 @@ export const ButtonAnimated = ({ onPressIn, onPressOut, disabled, ...props }) =>
23
26
  onPressIn?.(event);
24
27
  };
25
28
  const onPressOutHandler = (event) => {
29
+ setIsPressed(false);
26
30
  animation.value = withTiming(1, {
27
31
  duration: 100,
28
32
  easing: Easing.bezier(0.3, 0.8, 0.3, 1),
29
33
  });
30
34
  onPressOut?.(event);
31
35
  };
32
- return (<Animated.View style={[scaleStyle, { alignItems: 'center', justifyContent: 'center' }]}>
33
- <Pressable onPressIn={onPressInHandler} onPressOut={onPressOutHandler} disabled={disabled} {...props}/>
34
- </Animated.View>);
36
+ // Evaluate style function if needed
37
+ const evaluatedStyle = typeof style === 'function' ? style({ pressed: isPressed }) : style;
38
+ return (<AnimatedPressable onPressIn={onPressInHandler} onPressOut={onPressOutHandler} disabled={disabled} style={[
39
+ ...(Array.isArray(evaluatedStyle) ? evaluatedStyle : [evaluatedStyle]),
40
+ animatedStyle,
41
+ ]} {...props}>
42
+ {typeof children === 'function'
43
+ ? children({ pressed: isPressed })
44
+ : children}
45
+ </AnimatedPressable>);
35
46
  };
36
47
  //# sourceMappingURL=ButtonAnimated.mjs.map
package/dist/components/temp-components/ButtonAnimated/ButtonAnimated.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonAnimated.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,8BAAqB;AACzC,OAAO,QAAQ,EAAE,EACf,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,MAAM,EACP,gCAAgC;AAIjC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IACpC,MAAM,UAAU,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE;YAC9B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,UAAU,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC,CAAC,CAExE;MAAA,CAAC,SAAS,CACR,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,KAAK,CAAC,EAEd;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { Pressable } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { ButtonAnimatedProps } from './ButtonAnimated.types';\n\nexport const ButtonAnimated = ({\n onPressIn,\n onPressOut,\n disabled,\n ...props\n}: ButtonAnimatedProps) => {\n const animation = useSharedValue(1);\n const scaleStyle = useAnimatedStyle(() => {\n return {\n transform: [{ scale: animation.value }],\n };\n });\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(0.97, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n animation.value = withTiming(1, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressOut?.(event);\n };\n\n return (\n <Animated.View\n style={[scaleStyle, { alignItems: 'center', justifyContent: 'center' }]}\n >\n <Pressable\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n disabled={disabled}\n {...props}\n />\n </Animated.View>\n );\n};\n"]}
1
+ {"version":3,"file":"ButtonAnimated.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,QAAQ,EAAE,cAAc;;AAExC,OAAO,EAAE,SAAS,EAAE,8BAAqB;AACzC,OAAO,QAAQ,EAAE,EACf,cAAc,EACd,gBAAgB,EAChB,UAAU,EACV,MAAM,EACP,gCAAgC;AAIjC,MAAM,iBAAiB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACY,EAAE,EAAE;IACxB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAEpC,MAAM,aAAa,GAAG,gBAAgB,CAAC,GAAG,EAAE;QAC1C,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;SACxC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACxD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,EAAE;YACjC,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAA4B,EAAE,EAAE;QACzD,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,SAAS,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE;YAC9B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,UAAU,EAAE,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,oCAAoC;IACpC,MAAM,cAAc,GAClB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAEtE,OAAO,CACL,CAAC,iBAAiB,CAChB,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAiB,CAAC,CAC9B,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC;YACL,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YACtE,aAAa;SACd,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,QAAQ,KAAK,UAAU;YAC7B,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;YAClC,CAAC,CAAC,QAAQ,CACd;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { Pressable } from 'react-native';\nimport Animated, {\n useSharedValue,\n useAnimatedStyle,\n withTiming,\n Easing,\n} from 'react-native-reanimated';\n\nimport type { ButtonAnimatedProps } from './ButtonAnimated.types';\n\nconst AnimatedPressable = Animated.createAnimatedComponent(Pressable);\n\nexport const ButtonAnimated = ({\n onPressIn,\n onPressOut,\n disabled,\n style,\n children,\n ...props\n}: ButtonAnimatedProps) => {\n const [isPressed, setIsPressed] = useState(false);\n const animation = useSharedValue(1);\n\n const animatedStyle = useAnimatedStyle(() => {\n return {\n transform: [{ scale: animation.value }],\n };\n });\n\n const onPressInHandler = (event: GestureResponderEvent) => {\n setIsPressed(true);\n animation.value = withTiming(0.97, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressIn?.(event);\n };\n\n const onPressOutHandler = (event: GestureResponderEvent) => {\n setIsPressed(false);\n animation.value = withTiming(1, {\n duration: 100,\n easing: Easing.bezier(0.3, 0.8, 0.3, 1),\n });\n onPressOut?.(event);\n };\n\n // Evaluate style function if needed\n const evaluatedStyle =\n typeof style === 'function' ? style({ pressed: isPressed }) : style;\n\n return (\n <AnimatedPressable\n onPressIn={onPressInHandler}\n onPressOut={onPressOutHandler}\n disabled={disabled}\n style={[\n ...(Array.isArray(evaluatedStyle) ? evaluatedStyle : [evaluatedStyle]),\n animatedStyle,\n ]}\n {...props}\n >\n {typeof children === 'function'\n ? children({ pressed: isPressed })\n : children}\n </AnimatedPressable>\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metamask-previews/design-system-react-native",
3
- "version": "0.4.1-preview.c47bb52",
3
+ "version": "0.5.0-preview.0abe95c",
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.1.1-preview.c47bb52",
50
+ "@metamask-previews/design-system-shared": "0.1.1-preview.0abe95c",
51
51
  "fast-text-encoding": "^1.0.6",
52
52
  "react-native-jazzicon": "^0.1.2"
53
53
  },
@@ -57,10 +57,10 @@
57
57
  "@babel/preset-react": "^7.25.9",
58
58
  "@babel/preset-typescript": "^7.23.3",
59
59
  "@figma/code-connect": "^1.0.0",
60
- "@metamask-previews/design-system-twrnc-preset": "0.2.1-preview.c47bb52",
61
- "@metamask-previews/design-tokens": "8.1.1-preview.c47bb52",
60
+ "@metamask-previews/design-system-twrnc-preset": "0.3.0-preview.0abe95c",
61
+ "@metamask-previews/design-tokens": "8.1.1-preview.0abe95c",
62
62
  "@metamask/auto-changelog": "^5.3.0",
63
- "@metamask/utils": "^11.8.1",
63
+ "@metamask/utils": "^11.9.0",
64
64
  "@storybook/react-native": "6.5",
65
65
  "@testing-library/react-hooks": "^8.0.1",
66
66
  "@testing-library/react-native": "^12.8.1",
@@ -87,9 +87,9 @@
87
87
  "typescript": "~5.2.2"
88
88
  },
89
89
  "peerDependencies": {
90
- "@metamask/design-system-twrnc-preset": "^0.2.0",
90
+ "@metamask/design-system-twrnc-preset": "^0.3.0",
91
91
  "@metamask/design-tokens": "^8.1.0",
92
- "@metamask/utils": "^11.8.1",
92
+ "@metamask/utils": "^11.9.0",
93
93
  "react": ">=18.2.0",
94
94
  "react-native": ">=0.72.0",
95
95
  "react-native-gesture-handler": ">=1.10.3",