@metamask/design-system-react-native 0.41.0 → 0.42.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -1
- package/README.md +2 -2
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.cts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.mts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs +31 -95
- package/dist/components/BadgeWrapper/BadgeWrapper.cjs.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.cts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.d.mts.map +1 -1
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs +29 -73
- package/dist/components/BadgeWrapper/BadgeWrapper.mjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.cjs +1 -1
- package/dist/components/ButtonBase/ButtonBase.cjs.map +1 -1
- package/dist/components/ButtonBase/ButtonBase.mjs +1 -1
- package/dist/components/ButtonBase/ButtonBase.mjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.constants.cjs +1 -1
- package/dist/components/RadioButton/RadioButton.constants.cjs.map +1 -1
- package/dist/components/RadioButton/RadioButton.constants.mjs +1 -1
- package/dist/components/RadioButton/RadioButton.constants.mjs.map +1 -1
- package/dist/components/TextField/TextField.d.cts +1 -1
- package/dist/components/TextField/TextField.d.mts +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.cts +1 -1
- package/dist/components/TextFieldSearch/TextFieldSearch.d.mts +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.cjs +6 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.cjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.d.cts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.d.mts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.mjs +6 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.mjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.cjs.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.cts +4 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.cts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.mts +4 -3
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.d.mts.map +1 -1
- package/dist/components/temp-components/ImageOrSvg/ImageOrSvg.types.mjs.map +1 -1
- package/package.json +9 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,
|
|
1
|
+
{"version":3,"file":"BadgeWrapper.mjs","sourceRoot":"","sources":["../../../src/components/BadgeWrapper/BadgeWrapper.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,oBAAoB,EACpB,+BAA+B,EAChC,uCAAuC;AACxC,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,qBAAqB;AAIpC,MAAM,0BAA0B,GAAmB,IAAI,CAAC;AACxD,MAAM,6BAA6B,GAAmB,KAAK,CAAC;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,sBAAsB,EACtB,KAAK,EACL,mBAAmB,EACnB,QAAQ,GAAG,oBAAoB,CAAC,WAAW,EAC3C,mBAAmB,GAAG,+BAA+B,CAAC,QAAQ,EAC9D,eAAe,GAAG,CAAC,EACnB,eAAe,GAAG,CAAC,EACnB,cAAc,EACd,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACU,EAAE,EAAE;IACtB,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,KAAK,GACT,QAAQ,KAAK,oBAAoB,CAAC,QAAQ;QAC1C,QAAQ,KAAK,oBAAoB,CAAC,OAAO,CAAC;IAC5C,MAAM,MAAM,GACV,QAAQ,KAAK,oBAAoB,CAAC,OAAO;QACzC,QAAQ,KAAK,oBAAoB,CAAC,UAAU,CAAC;IAC/C,MAAM,SAAS,GACb,mBAAmB,KAAK,+BAA+B,CAAC,QAAQ;QAC9D,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,6BAA6B,CAAC;IACpC,MAAM,cAAc,GAAyB,cAAc;QACzD,CAAC,CAAE,cAAuC;QAC1C,CAAC,CAAC;YACE,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;YACvD,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACxD,SAAS,EAAE;gBACT,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE;gBACvC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE;gBACtC,EAAE,UAAU,EAAE,eAAe,EAAE;gBAC/B,EAAE,UAAU,EAAE,eAAe,EAAE;aAChC;SACF,CAAC;IAEN,OAAO,CACL,CAAC,IAAI,CACH,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,8BAA8B,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CAEtE;MAAA,CAAC,IAAI,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAClD;MAAA,CAAC,IAAI,CACH,IAAI,mBAAmB,CAAC,CACxB,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,sCAAsC,CAAC;YAChD,cAAc;YACd,mBAAmB,EAAE,KAAK;SAC3B,CAAC,CAEF;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n BadgeWrapperPosition,\n BadgeWrapperPositionAnchorShape,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { DimensionValue, StyleProp, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\n\nimport type { BadgeWrapperProps } from './BadgeWrapper.types';\n\nconst CIRCULAR_ANCHOR_EDGE_INSET: DimensionValue = '7%';\nconst RECTANGULAR_ANCHOR_EDGE_INSET: DimensionValue = '11%';\n\nexport const BadgeWrapper = ({\n children,\n childrenContainerProps,\n badge,\n badgeContainerProps,\n position = BadgeWrapperPosition.BottomRight,\n positionAnchorShape = BadgeWrapperPositionAnchorShape.Circular,\n positionXOffset = 0,\n positionYOffset = 0,\n customPosition,\n twClassName,\n style,\n ...props\n}: BadgeWrapperProps) => {\n const tw = useTailwind();\n const isTop =\n position === BadgeWrapperPosition.TopRight ||\n position === BadgeWrapperPosition.TopLeft;\n const isLeft =\n position === BadgeWrapperPosition.TopLeft ||\n position === BadgeWrapperPosition.BottomLeft;\n const edgeInset =\n positionAnchorShape === BadgeWrapperPositionAnchorShape.Circular\n ? CIRCULAR_ANCHOR_EDGE_INSET\n : RECTANGULAR_ANCHOR_EDGE_INSET;\n const finalPositions: StyleProp<ViewStyle> = customPosition\n ? (customPosition as StyleProp<ViewStyle>)\n : {\n ...(isTop ? { top: edgeInset } : { bottom: edgeInset }),\n ...(isLeft ? { left: edgeInset } : { right: edgeInset }),\n transform: [\n { translateX: isLeft ? '-50%' : '50%' },\n { translateY: isTop ? '-50%' : '50%' },\n { translateX: positionXOffset },\n { translateY: positionYOffset },\n ],\n };\n\n return (\n <View\n {...props}\n style={[tw.style('relative flex-row self-start', twClassName), style]}\n >\n <View {...childrenContainerProps}>{children}</View>\n <View\n {...badgeContainerProps}\n style={[\n tw.style('absolute items-center justify-center'),\n finalPositions,\n badgeContainerProps?.style,\n ]}\n >\n {badge}\n </View>\n </View>\n );\n};\n"]}
|
|
@@ -63,7 +63,7 @@ const ButtonBase = ({ children, textProps, size = design_system_shared_1.ButtonB
|
|
|
63
63
|
return accessibilityHint;
|
|
64
64
|
}
|
|
65
65
|
if (isLoading) {
|
|
66
|
-
return 'Button is currently loading
|
|
66
|
+
return 'Button is currently loading';
|
|
67
67
|
}
|
|
68
68
|
return undefined;
|
|
69
69
|
}, [accessibilityHint, isLoading]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase.cjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FontWeight,\n mergeTwClassName,\n TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} 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 loadingWrapperProps,\n contentWrapperProps,\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 const hasStart = Boolean(finalStartIconName || startAccessory);\n const hasEnd = Boolean(finalEndIconName || endAccessory);\n const hasAccessories = hasStart || hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\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',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\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 const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={mergeTwClassName(\n 'absolute inset-0 flex items-center justify-center',\n loadingWrapperTw,\n )}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={\n isLoading\n ? mergeTwClassName('opacity-0', contentWrapperTw)\n : contentWrapperTw\n }\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n {...startIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n startIconProps?.twClassName,\n )}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n {...endIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n endIconProps?.twClassName,\n )}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: mergeTwClassName(\n mergeTwClassName(\n 'shrink grow-0 flex-wrap text-center',\n textClassName ? textClassName(pressed) : undefined,\n ),\n textProps?.twClassName,\n ),\n }}\n >\n {children}\n </BoxRow>\n </>\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 {\n ButtonBaseSize,\n FontWeight,\n mergeTwClassName,\n TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} 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 loadingWrapperProps,\n contentWrapperProps,\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 const hasStart = Boolean(finalStartIconName || startAccessory);\n const hasEnd = Boolean(finalEndIconName || endAccessory);\n const hasAccessories = hasStart || hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\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';\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',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\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 const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={mergeTwClassName(\n 'absolute inset-0 flex items-center justify-center',\n loadingWrapperTw,\n )}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={\n isLoading\n ? mergeTwClassName('opacity-0', contentWrapperTw)\n : contentWrapperTw\n }\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n {...startIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n startIconProps?.twClassName,\n )}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n {...endIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n endIconProps?.twClassName,\n )}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: mergeTwClassName(\n mergeTwClassName(\n 'shrink grow-0 flex-wrap text-center',\n textClassName ? textClassName(pressed) : undefined,\n ),\n textProps?.twClassName,\n ),\n }}\n >\n {children}\n </BoxRow>\n </>\n );\n }}\n </ButtonAnimated>\n );\n};\n"]}
|
|
@@ -44,7 +44,7 @@ export const ButtonBase = ({ children, textProps, size = ButtonBaseSize.Lg, isLo
|
|
|
44
44
|
return accessibilityHint;
|
|
45
45
|
}
|
|
46
46
|
if (isLoading) {
|
|
47
|
-
return 'Button is currently loading
|
|
47
|
+
return 'Button is currently loading';
|
|
48
48
|
}
|
|
49
49
|
return undefined;
|
|
50
50
|
}, [accessibilityHint, isLoading]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase.mjs","sourceRoot":"","sources":["../../../src/components/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonBaseSize,\n FontWeight,\n mergeTwClassName,\n TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} 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 loadingWrapperProps,\n contentWrapperProps,\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 const hasStart = Boolean(finalStartIconName || startAccessory);\n const hasEnd = Boolean(finalEndIconName || endAccessory);\n const hasAccessories = hasStart || hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\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',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\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 const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={mergeTwClassName(\n 'absolute inset-0 flex items-center justify-center',\n loadingWrapperTw,\n )}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={\n isLoading\n ? mergeTwClassName('opacity-0', contentWrapperTw)\n : contentWrapperTw\n }\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n {...startIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n startIconProps?.twClassName,\n )}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n {...endIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n endIconProps?.twClassName,\n )}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: mergeTwClassName(\n mergeTwClassName(\n 'shrink grow-0 flex-wrap text-center',\n textClassName ? textClassName(pressed) : undefined,\n ),\n textProps?.twClassName,\n ),\n }}\n >\n {children}\n </BoxRow>\n </>\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 {\n ButtonBaseSize,\n FontWeight,\n mergeTwClassName,\n TextColor,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconColor } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Spinner } from '../temp-components/Spinner';\n\nimport {\n MAP_BUTTONBASE_SIZE_ICONSIZE,\n MAP_BUTTONBASE_SIZE_TEXT_VARIANT,\n getButtonBaseBorderRadiusTwClass,\n getButtonBaseHorizontalPaddingTwClasses,\n TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION,\n} 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 loadingWrapperProps,\n contentWrapperProps,\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 const hasStart = Boolean(finalStartIconName || startAccessory);\n const hasEnd = Boolean(finalEndIconName || endAccessory);\n const hasAccessories = hasStart || hasEnd;\n\n const iconSize = MAP_BUTTONBASE_SIZE_ICONSIZE[size];\n const labelTextVariant = MAP_BUTTONBASE_SIZE_TEXT_VARIANT[size];\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';\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',\n // Visual styling\n 'bg-muted overflow-hidden',\n // Conditional Border Radius and Horizontal Spacing based on requirements\n getButtonBaseBorderRadiusTwClass(size),\n getButtonBaseHorizontalPaddingTwClasses(size, hasStart, hasEnd),\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 const { twClassName: loadingWrapperTw, ...restLoadingWrapper } =\n loadingWrapperProps ?? {};\n const { twClassName: contentWrapperTw, ...restContentWrapper } =\n contentWrapperProps ?? {};\n\n return (\n <>\n {/* Loading spinner overlay */}\n {isLoading && (\n <Box\n {...restLoadingWrapper}\n twClassName={mergeTwClassName(\n 'absolute inset-0 flex items-center justify-center',\n loadingWrapperTw,\n )}\n >\n <Spinner\n color={\n textClassName\n ? (textClassName(pressed) as IconColor)\n : IconColor.IconDefault\n }\n loadingText={loadingText}\n {...spinnerProps}\n spinnerIconProps={{\n size: iconSize,\n ...spinnerProps?.spinnerIconProps,\n }}\n loadingTextProps={{\n numberOfLines: 1,\n variant: labelTextVariant,\n twClassName: textClassName ? textClassName(pressed) : '',\n ...spinnerProps?.loadingTextProps,\n }}\n />\n </Box>\n )}\n\n <BoxRow\n {...restContentWrapper}\n twClassName={\n isLoading\n ? mergeTwClassName('opacity-0', contentWrapperTw)\n : contentWrapperTw\n }\n gap={hasAccessories ? 1 : 0}\n startAccessory={\n finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n size={iconSize}\n {...startIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n startIconProps?.twClassName,\n )}\n />\n ) : (\n startAccessory\n )\n }\n endAccessory={\n finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n size={iconSize}\n {...endIconProps}\n twClassName={mergeTwClassName(\n mergeTwClassName(\n 'shrink-0',\n iconClassName ? iconClassName(pressed) : undefined,\n ),\n endIconProps?.twClassName,\n )}\n />\n ) : (\n endAccessory\n )\n }\n textProps={{\n variant: labelTextVariant,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n numberOfLines: 1,\n ellipsizeMode: 'clip',\n ...textProps,\n twClassName: mergeTwClassName(\n mergeTwClassName(\n 'shrink grow-0 flex-wrap text-center',\n textClassName ? textClassName(pressed) : undefined,\n ),\n textProps?.twClassName,\n ),\n }}\n >\n {children}\n </BoxRow>\n </>\n );\n }}\n </ButtonAnimated>\n );\n};\n"]}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SAMPLE_RADIOBUTTON_PROPS = void 0;
|
|
4
4
|
// Sample props for stories and tests
|
|
5
5
|
exports.SAMPLE_RADIOBUTTON_PROPS = {
|
|
6
|
-
label: 'Sample
|
|
6
|
+
label: 'Sample radio button label',
|
|
7
7
|
isChecked: false,
|
|
8
8
|
isDisabled: false,
|
|
9
9
|
isReadOnly: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.constants.cjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":";;;AAEA,qCAAqC;AACxB,QAAA,wBAAwB,GAAqB;IACxD,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioButton.constants.cjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":";;;AAEA,qCAAqC;AACxB,QAAA,wBAAwB,GAAqB;IACxD,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["import type { RadioButtonProps } from './RadioButton.types';\n\n// Sample props for stories and tests\nexport const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps = {\n label: 'Sample radio button label',\n isChecked: false,\n isDisabled: false,\n isReadOnly: false,\n isDanger: false,\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.constants.mjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":"AAEA,qCAAqC;AACrC,MAAM,CAAC,MAAM,wBAAwB,GAAqB;IACxD,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioButton.constants.mjs","sourceRoot":"","sources":["../../../src/components/RadioButton/RadioButton.constants.ts"],"names":[],"mappings":"AAEA,qCAAqC;AACrC,MAAM,CAAC,MAAM,wBAAwB,GAAqB;IACxD,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,KAAK;CAChB,CAAC","sourcesContent":["import type { RadioButtonProps } from './RadioButton.types';\n\n// Sample props for stories and tests\nexport const SAMPLE_RADIOBUTTON_PROPS: RadioButtonProps = {\n label: 'Sample radio button label',\n isChecked: false,\n isDisabled: false,\n isReadOnly: false,\n isDanger: false,\n};\n"]}
|
|
@@ -169,5 +169,5 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
169
169
|
twClassName?: string | undefined;
|
|
170
170
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
171
171
|
testID?: string | undefined;
|
|
172
|
-
} & Omit<import("../Box/index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
172
|
+
} & Omit<import("../Box/index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & import("react").RefAttributes<View>>;
|
|
173
173
|
//# sourceMappingURL=TextField.d.cts.map
|
|
@@ -169,5 +169,5 @@ export declare const TextField: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
169
169
|
twClassName?: string | undefined;
|
|
170
170
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
171
171
|
testID?: string | undefined;
|
|
172
|
-
} & Omit<import("../Box/index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
172
|
+
} & Omit<import("../Box/index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & import("react").RefAttributes<View>>;
|
|
173
173
|
//# sourceMappingURL=TextField.d.mts.map
|
|
@@ -170,7 +170,7 @@ export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<impor
|
|
|
170
170
|
twClassName?: string | undefined;
|
|
171
171
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
172
172
|
testID?: string | undefined;
|
|
173
|
-
} & Omit<import("../index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
173
|
+
} & Omit<import("../index.cjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & {
|
|
174
174
|
clearButtonProps?: Partial<import("../ButtonIcon/index.cjs").ButtonIconProps> | undefined;
|
|
175
175
|
onPressClearButton: () => void;
|
|
176
176
|
} & React.RefAttributes<View>>;
|
|
@@ -170,7 +170,7 @@ export declare const TextFieldSearch: React.ForwardRefExoticComponent<Omit<impor
|
|
|
170
170
|
twClassName?: string | undefined;
|
|
171
171
|
style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
172
172
|
testID?: string | undefined;
|
|
173
|
-
} & Omit<import("../index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "
|
|
173
|
+
} & Omit<import("../index.mjs").BoxProps, "children" | "style" | "testID" | "onBlur" | "onFocus" | "accessible" | "twClassName" | "startAccessory" | "endAccessory" | "isDisabled" | "placeholder" | "value" | "autoFocus" | "onChangeText" | "isReadOnly" | "isError" | "inputElement" | "inputProps" | "inputRef"> & {
|
|
174
174
|
clearButtonProps?: Partial<import("../ButtonIcon/index.mjs").ButtonIconProps> | undefined;
|
|
175
175
|
onPressClearButton: () => void;
|
|
176
176
|
} & React.RefAttributes<View>>;
|
|
@@ -24,13 +24,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
26
|
exports.ImageOrSvg = void 0;
|
|
27
|
+
const expo_image_1 = require("expo-image");
|
|
27
28
|
const react_1 = __importStar(require("react"));
|
|
28
|
-
const react_native_1 = require("react-native");
|
|
29
29
|
const react_native_svg_1 = require("react-native-svg");
|
|
30
30
|
const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
|
|
31
31
|
// CASE 1: local image (src is a number)
|
|
32
32
|
if (typeof src === 'number') {
|
|
33
|
-
return (<
|
|
33
|
+
return (<expo_image_1.Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
34
34
|
}
|
|
35
35
|
// CASE 2: Local SVG component (src is a React component)
|
|
36
36
|
if (typeof src === 'function') {
|
|
@@ -68,7 +68,10 @@ const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError,
|
|
|
68
68
|
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
|
|
69
69
|
return (<react_native_svg_1.SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
|
|
70
70
|
}
|
|
71
|
-
|
|
71
|
+
// expo-image caches by URI on disk by default, unlike react-native's
|
|
72
|
+
// plain `Image`, which otherwise re-fetches the same remote icon every
|
|
73
|
+
// time this component remounts (e.g. on list re-renders).
|
|
74
|
+
return (<expo_image_1.Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
72
75
|
};
|
|
73
76
|
exports.ImageOrSvg = ImageOrSvg;
|
|
74
77
|
//# sourceMappingURL=ImageOrSvg.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Image } from 'expo-image';\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { SvgUri } from 'react-native-svg';\n\nimport type { ImageOrSvgProps } from './ImageOrSvg.types';\n\nexport const ImageOrSvg = ({\n src,\n width,\n height,\n onImageLoad,\n onImageError,\n onSvgError,\n style,\n imageProps,\n svgProps,\n}: ImageOrSvgProps) => {\n // CASE 1: local image (src is a number)\n if (typeof src === 'number') {\n return (\n <Image\n source={src}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n }\n\n // CASE 2: Local SVG component (src is a React component)\n if (typeof src === 'function') {\n const LocalSvg = src;\n return <LocalSvg width={width} height={height} {...svgProps} />;\n }\n\n // CASE 3: Remote image or SVG (src is an object with a uri)\n const [isSvg, setIsSvg] = useState<boolean>(false);\n\n const checkSvgContentType = useCallback(async (uri: string) => {\n try {\n const response = await fetch(uri, { method: 'HEAD' });\n // If no header is returned, fallback to an empty string.\n const contentType = response.headers.get('Content-Type') || '';\n return contentType.includes('image/svg+xml');\n } catch {\n return false;\n }\n }, []);\n\n useEffect(() => {\n if (src.uri) {\n const uriLower = src.uri.toLowerCase();\n const isLikelySvg =\n uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');\n if (!src.uri.startsWith('data:')) {\n checkSvgContentType(src.uri).then(setIsSvg);\n } else {\n setIsSvg(isLikelySvg);\n }\n } else {\n setIsSvg(false);\n }\n }, [src, checkSvgContentType]);\n\n if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {\n return (\n <SvgUri\n uri={src.uri}\n width={width}\n height={height}\n onError={onSvgError}\n style={style}\n {...svgProps}\n />\n );\n }\n // expo-image caches by URI on disk by default, unlike react-native's\n // plain `Image`, which otherwise re-fetches the same remote icon every\n // time this component remounts (e.g. on list re-renders).\n return (\n <Image\n source={src as any}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,cAAc;AAGhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,gGAUpB,eAAe,sBA2EjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,cAAc;AAGhE,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU,gGAUpB,eAAe,sBA2EjB,CAAC"}
|
|
@@ -4,14 +4,14 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
+
import { Image } from "expo-image";
|
|
7
8
|
import $React, { useState, useCallback, useEffect } from "react";
|
|
8
9
|
const React = $importDefault($React);
|
|
9
|
-
import { Image } from "react-native";
|
|
10
10
|
import { SvgUri } from "react-native-svg";
|
|
11
11
|
export const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSvgError, style, imageProps, svgProps, }) => {
|
|
12
12
|
// CASE 1: local image (src is a number)
|
|
13
13
|
if (typeof src === 'number') {
|
|
14
|
-
return (<Image source={src} style={[{ width, height }, style]}
|
|
14
|
+
return (<Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
15
15
|
}
|
|
16
16
|
// CASE 2: Local SVG component (src is a React component)
|
|
17
17
|
if (typeof src === 'function') {
|
|
@@ -49,6 +49,9 @@ export const ImageOrSvg = ({ src, width, height, onImageLoad, onImageError, onSv
|
|
|
49
49
|
if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {
|
|
50
50
|
return (<SvgUri uri={src.uri} width={width} height={height} onError={onSvgError} style={style} {...svgProps}/>);
|
|
51
51
|
}
|
|
52
|
-
|
|
52
|
+
// expo-image caches by URI on disk by default, unlike react-native's
|
|
53
|
+
// plain `Image`, which otherwise re-fetches the same remote icon every
|
|
54
|
+
// time this component remounts (e.g. on list re-renders).
|
|
55
|
+
return (<Image source={src} style={[{ width, height }, style]} contentFit="contain" onLoad={onImageLoad} onError={onImageError} {...imageProps}/>);
|
|
53
56
|
};
|
|
54
57
|
//# sourceMappingURL=ImageOrSvg.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,cAAc;;AAChE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Image } from 'expo-image';\nimport React, { useState, useCallback, useEffect } from 'react';\nimport { SvgUri } from 'react-native-svg';\n\nimport type { ImageOrSvgProps } from './ImageOrSvg.types';\n\nexport const ImageOrSvg = ({\n src,\n width,\n height,\n onImageLoad,\n onImageError,\n onSvgError,\n style,\n imageProps,\n svgProps,\n}: ImageOrSvgProps) => {\n // CASE 1: local image (src is a number)\n if (typeof src === 'number') {\n return (\n <Image\n source={src}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n }\n\n // CASE 2: Local SVG component (src is a React component)\n if (typeof src === 'function') {\n const LocalSvg = src;\n return <LocalSvg width={width} height={height} {...svgProps} />;\n }\n\n // CASE 3: Remote image or SVG (src is an object with a uri)\n const [isSvg, setIsSvg] = useState<boolean>(false);\n\n const checkSvgContentType = useCallback(async (uri: string) => {\n try {\n const response = await fetch(uri, { method: 'HEAD' });\n // If no header is returned, fallback to an empty string.\n const contentType = response.headers.get('Content-Type') || '';\n return contentType.includes('image/svg+xml');\n } catch {\n return false;\n }\n }, []);\n\n useEffect(() => {\n if (src.uri) {\n const uriLower = src.uri.toLowerCase();\n const isLikelySvg =\n uriLower.endsWith('.svg') || uriLower.startsWith('data:image/svg+xml');\n if (!src.uri.startsWith('data:')) {\n checkSvgContentType(src.uri).then(setIsSvg);\n } else {\n setIsSvg(isLikelySvg);\n }\n } else {\n setIsSvg(false);\n }\n }, [src, checkSvgContentType]);\n\n if (isSvg && typeof src === 'object' && 'uri' in src && src.uri) {\n return (\n <SvgUri\n uri={src.uri}\n width={width}\n height={height}\n onError={onSvgError}\n style={style}\n {...svgProps}\n />\n );\n }\n // expo-image caches by URI on disk by default, unlike react-native's\n // plain `Image`, which otherwise re-fetches the same remote icon every\n // time this component remounts (e.g. on list re-renders).\n return (\n <Image\n source={src as any}\n style={[{ width, height } as any, style]}\n contentFit=\"contain\"\n onLoad={onImageLoad}\n onError={onImageError}\n {...imageProps}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.cjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ImageErrorEventData,\n ImageLoadEventData,\n ImageProps,\n} from 'expo-image';\nimport type { StyleProp, ImageStyle } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Base props common to all variations.\n */\nexport type ImageOrSvgBaseProps = {\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp<ImageStyle>;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit<ImageProps, 'source'>;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit<SvgProps, 'uri'>;\n};\n\n/**\n * Defines the source type for an image or SVG.\n *\n * The source can be one of the following:\n * - A number representing a locally imported image resource.\n * - A React component (with SvgProps) representing a locally imported SVG.\n * - An object with an optional `uri` property for remote images or SVGs.\n */\nexport type ImageOrSvgSrc =\n | number // For local imported image\n | React.ComponentType<SvgProps> // For local imported svg\n | { uri?: string }; // For remote image or SVG (with a uri property)\n\nexport type ImageOrSvgProps = ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n};\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImageErrorEventData, ImageLoadEventData, ImageProps } from "expo-image";
|
|
2
|
+
import type { StyleProp, ImageStyle } from "react-native";
|
|
2
3
|
import type { SvgProps } from "react-native-svg";
|
|
3
4
|
/**
|
|
4
5
|
* Base props common to all variations.
|
|
@@ -17,11 +18,11 @@ export type ImageOrSvgBaseProps = {
|
|
|
17
18
|
/**
|
|
18
19
|
* Optional prop to set callback triggered when the image has loaded successfully.
|
|
19
20
|
*/
|
|
20
|
-
onImageLoad?: (event:
|
|
21
|
+
onImageLoad?: (event: ImageLoadEventData) => void;
|
|
21
22
|
/**
|
|
22
23
|
* Optional prop to set callback triggered when there is an error rendering the image.
|
|
23
24
|
*/
|
|
24
|
-
onImageError?: (errorEvent:
|
|
25
|
+
onImageError?: (errorEvent: ImageErrorEventData) => void;
|
|
25
26
|
/**
|
|
26
27
|
* Optional prop to set callback triggered when there is an error rendering the SVG.
|
|
27
28
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.d.cts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACX,mBAAmB;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,qBAAqB;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAC7B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD;;;;OAIG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImageErrorEventData, ImageLoadEventData, ImageProps } from "expo-image";
|
|
2
|
+
import type { StyleProp, ImageStyle } from "react-native";
|
|
2
3
|
import type { SvgProps } from "react-native-svg";
|
|
3
4
|
/**
|
|
4
5
|
* Base props common to all variations.
|
|
@@ -17,11 +18,11 @@ export type ImageOrSvgBaseProps = {
|
|
|
17
18
|
/**
|
|
18
19
|
* Optional prop to set callback triggered when the image has loaded successfully.
|
|
19
20
|
*/
|
|
20
|
-
onImageLoad?: (event:
|
|
21
|
+
onImageLoad?: (event: ImageLoadEventData) => void;
|
|
21
22
|
/**
|
|
22
23
|
* Optional prop to set callback triggered when there is an error rendering the image.
|
|
23
24
|
*/
|
|
24
|
-
onImageError?: (errorEvent:
|
|
25
|
+
onImageError?: (errorEvent: ImageErrorEventData) => void;
|
|
25
26
|
/**
|
|
26
27
|
* Optional prop to set callback triggered when there is an error rendering the SVG.
|
|
27
28
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.d.mts","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,kBAAkB,EAClB,UAAU,EACX,mBAAmB;AACpB,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,qBAAqB;AAC1D,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;CAClC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAC7B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAErB,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD;;;;OAIG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageOrSvg.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n
|
|
1
|
+
{"version":3,"file":"ImageOrSvg.types.mjs","sourceRoot":"","sources":["../../../../src/components/temp-components/ImageOrSvg/ImageOrSvg.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ImageErrorEventData,\n ImageLoadEventData,\n ImageProps,\n} from 'expo-image';\nimport type { StyleProp, ImageStyle } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Base props common to all variations.\n */\nexport type ImageOrSvgBaseProps = {\n /**\n * Optional prop to set the width of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n width?: number | string;\n /**\n * Optional prop to set the height of the image/SVG.\n * Accepts numbers (pixels) or string values (like percentages).\n */\n height?: number | string;\n /**\n * Optional prop to set callback triggered when the image has loaded successfully.\n */\n onImageLoad?: (event: ImageLoadEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the image.\n */\n onImageError?: (errorEvent: ImageErrorEventData) => void;\n /**\n * Optional prop to set callback triggered when there is an error rendering the SVG.\n */\n onSvgError?: (error: Error) => void;\n /**\n * Optional prop for style overrides for the image/SVG container.\n */\n style?: StyleProp<ImageStyle>;\n /**\n * Additional props to pass to the Image component, excluding\n * the 'source' prop (which is handled separately).\n */\n imageProps?: Omit<ImageProps, 'source'>;\n /**\n * Additional props to pass to the Svg component, excluding\n * the 'uri' prop (which is handled separately).\n */\n svgProps?: Omit<SvgProps, 'uri'>;\n};\n\n/**\n * Defines the source type for an image or SVG.\n *\n * The source can be one of the following:\n * - A number representing a locally imported image resource.\n * - A React component (with SvgProps) representing a locally imported SVG.\n * - An object with an optional `uri` property for remote images or SVGs.\n */\nexport type ImageOrSvgSrc =\n | number // For local imported image\n | React.ComponentType<SvgProps> // For local imported svg\n | { uri?: string }; // For remote image or SVG (with a uri property)\n\nexport type ImageOrSvgProps = ImageOrSvgBaseProps & {\n /**\n * Required prop for the source of the image or SVG.\n * This prop determines whether a local image, a local SVG component,\n * or a remote image/SVG (via URI) is rendered.\n */\n src: ImageOrSvgSrc;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@metamask/design-system-react-native",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.42.1",
|
|
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/design-system-shared": "^0.
|
|
50
|
+
"@metamask/design-system-shared": "^0.34.0",
|
|
51
51
|
"react-native-jazzicon": "^0.1.2"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
@@ -57,9 +57,9 @@
|
|
|
57
57
|
"@babel/preset-typescript": "^7.23.3",
|
|
58
58
|
"@figma/code-connect": "^1.4.9",
|
|
59
59
|
"@gorhom/bottom-sheet": "^5.1.3",
|
|
60
|
-
"@metamask/auto-changelog": "^6.2.
|
|
61
|
-
"@metamask/design-system-twrnc-preset": "^0.
|
|
62
|
-
"@metamask/design-tokens": "^
|
|
60
|
+
"@metamask/auto-changelog": "^6.2.1",
|
|
61
|
+
"@metamask/design-system-twrnc-preset": "^0.10.0",
|
|
62
|
+
"@metamask/design-tokens": "^10.0.0",
|
|
63
63
|
"@metamask/utils": "^11.11.0",
|
|
64
64
|
"@react-native/babel-preset": "0.81.5",
|
|
65
65
|
"@react-native/typescript-config": "0.81.5",
|
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
"@types/react-test-renderer": "^19.1.0",
|
|
74
74
|
"babel-jest": "^29.7.0",
|
|
75
75
|
"deepmerge": "^4.2.2",
|
|
76
|
+
"expo-image": "~3.0.11",
|
|
76
77
|
"jest": "^29.7.0",
|
|
77
78
|
"react": "19.1.0",
|
|
78
79
|
"react-native": "0.81.5",
|
|
@@ -89,9 +90,10 @@
|
|
|
89
90
|
"typescript": "~5.2.2"
|
|
90
91
|
},
|
|
91
92
|
"peerDependencies": {
|
|
92
|
-
"@metamask/design-system-twrnc-preset": "^0.
|
|
93
|
-
"@metamask/design-tokens": "^
|
|
93
|
+
"@metamask/design-system-twrnc-preset": "^0.10.0",
|
|
94
|
+
"@metamask/design-tokens": "^10.0.0",
|
|
94
95
|
"@metamask/utils": "^11.11.0",
|
|
96
|
+
"expo-image": ">=3.0.0",
|
|
95
97
|
"lodash": "^4.17.21",
|
|
96
98
|
"react": ">=18.2.0",
|
|
97
99
|
"react-native": ">=0.76.0",
|