@ledgerhq/lumen-ui-rnative 0.1.39 → 0.1.41

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 (68) hide show
  1. package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js +28 -11
  2. package/dist/module/lib/Components/AmountDisplay/AmountDisplay.js.map +1 -1
  3. package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js +71 -0
  4. package/dist/module/lib/Components/AmountDisplay/AmountDisplay.test.js.map +1 -1
  5. package/dist/module/lib/Components/AmountInput/AmountInput.js +49 -154
  6. package/dist/module/lib/Components/AmountInput/AmountInput.js.map +1 -1
  7. package/dist/module/lib/Components/AmountInput/AmountInput.test.js +152 -0
  8. package/dist/module/lib/Components/AmountInput/AmountInput.test.js.map +1 -0
  9. package/dist/module/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.js +149 -0
  10. package/dist/module/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.js.map +1 -0
  11. package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.js +22 -0
  12. package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.js.map +1 -0
  13. package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.js +59 -0
  14. package/dist/module/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.js.map +1 -0
  15. package/dist/module/lib/Components/Avatar/Avatar.figma.js +5 -0
  16. package/dist/module/lib/Components/Avatar/Avatar.figma.js.map +1 -1
  17. package/dist/module/lib/Components/Avatar/Avatar.js +9 -2
  18. package/dist/module/lib/Components/Avatar/Avatar.js.map +1 -1
  19. package/dist/module/lib/Components/Avatar/Avatar.mdx +9 -0
  20. package/dist/module/lib/Components/Avatar/Avatar.stories.js +47 -0
  21. package/dist/module/lib/Components/Avatar/Avatar.stories.js.map +1 -1
  22. package/dist/module/lib/Components/Avatar/Avatar.test.js +23 -1
  23. package/dist/module/lib/Components/Avatar/Avatar.test.js.map +1 -1
  24. package/dist/module/lib/Components/BottomSheet/BottomSheetHeader.js +0 -3
  25. package/dist/module/lib/Components/BottomSheet/BottomSheetHeader.js.map +1 -1
  26. package/dist/module/lib/Components/Icon/Icon.test.js +1 -1
  27. package/dist/module/lib/Components/Switch/Switch.js +144 -8
  28. package/dist/module/lib/Components/Switch/Switch.js.map +1 -1
  29. package/dist/typescript/src/lib/Components/AmountDisplay/AmountDisplay.d.ts.map +1 -1
  30. package/dist/typescript/src/lib/Components/AmountInput/AmountInput.d.ts +1 -1
  31. package/dist/typescript/src/lib/Components/AmountInput/AmountInput.d.ts.map +1 -1
  32. package/dist/typescript/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.d.ts +16 -0
  33. package/dist/typescript/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.d.ts.map +1 -0
  34. package/dist/typescript/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.d.ts +18 -0
  35. package/dist/typescript/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.d.ts.map +1 -0
  36. package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts +1 -1
  37. package/dist/typescript/src/lib/Components/Avatar/Avatar.d.ts.map +1 -1
  38. package/dist/typescript/src/lib/Components/Avatar/types.d.ts +6 -0
  39. package/dist/typescript/src/lib/Components/Avatar/types.d.ts.map +1 -1
  40. package/dist/typescript/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts +1 -1
  41. package/dist/typescript/src/lib/Components/BottomSheet/BottomSheetHeader.d.ts.map +1 -1
  42. package/dist/typescript/src/lib/Components/Switch/Switch.d.ts +1 -1
  43. package/dist/typescript/src/lib/Components/Switch/Switch.d.ts.map +1 -1
  44. package/dist/typescript/src/lib/Components/Switch/types.d.ts +2 -1
  45. package/dist/typescript/src/lib/Components/Switch/types.d.ts.map +1 -1
  46. package/package.json +2 -2
  47. package/src/lib/Components/AmountDisplay/AmountDisplay.test.tsx +92 -0
  48. package/src/lib/Components/AmountDisplay/AmountDisplay.tsx +37 -15
  49. package/src/lib/Components/AmountInput/AmountInput.test.tsx +166 -0
  50. package/src/lib/Components/AmountInput/AmountInput.tsx +55 -110
  51. package/src/lib/Components/AmountInput/useAmountInputAnimations/useAmountInputAnimations.ts +100 -0
  52. package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.test.ts +62 -0
  53. package/src/lib/Components/AmountInput/useAmountInputFormatting/useAmountInputFormatting.ts +48 -0
  54. package/src/lib/Components/Avatar/Avatar.figma.tsx +5 -0
  55. package/src/lib/Components/Avatar/Avatar.mdx +9 -0
  56. package/src/lib/Components/Avatar/Avatar.stories.tsx +41 -0
  57. package/src/lib/Components/Avatar/Avatar.test.tsx +31 -1
  58. package/src/lib/Components/Avatar/Avatar.tsx +17 -4
  59. package/src/lib/Components/Avatar/types.ts +6 -0
  60. package/src/lib/Components/BottomSheet/BottomSheetHeader.tsx +0 -4
  61. package/src/lib/Components/Icon/Icon.test.tsx +1 -1
  62. package/src/lib/Components/Switch/Switch.tsx +132 -11
  63. package/src/lib/Components/Switch/types.ts +3 -1
  64. package/dist/module/lib/Components/Switch/BaseSwitch.js +0 -221
  65. package/dist/module/lib/Components/Switch/BaseSwitch.js.map +0 -1
  66. package/dist/typescript/src/lib/Components/Switch/BaseSwitch.d.ts +0 -13
  67. package/dist/typescript/src/lib/Components/Switch/BaseSwitch.d.ts.map +0 -1
  68. package/src/lib/Components/Switch/BaseSwitch.tsx +0 -249
@@ -90,6 +90,47 @@ export const SizeShowcase: Story = {
90
90
  ),
91
91
  };
92
92
 
93
+ const AppearanceShowcaseRender = () => {
94
+ return (
95
+ <Box lx={{ gap: 's8' }}>
96
+ <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
97
+ <Avatar
98
+ alt='gray fallback'
99
+ size='md'
100
+ appearance='gray'
101
+ showNotification={false}
102
+ />
103
+ <Avatar
104
+ alt='transparent fallback'
105
+ size='md'
106
+ appearance='transparent'
107
+ showNotification={false}
108
+ />
109
+ </Box>
110
+ <Box lx={{ flexDirection: 'row', gap: 's16', padding: 's8' }}>
111
+ <Avatar
112
+ src={exampleSrc}
113
+ alt='gray with image'
114
+ size='md'
115
+ appearance='gray'
116
+ showNotification={false}
117
+ />
118
+ <Avatar
119
+ src={exampleSrc}
120
+ alt='transparent with image'
121
+ size='md'
122
+ appearance='transparent'
123
+ showNotification={false}
124
+ />
125
+ </Box>
126
+ </Box>
127
+ );
128
+ };
129
+
130
+ export const AppearanceShowcase: Story = {
131
+ render: () => <AppearanceShowcaseRender />,
132
+ };
133
+
93
134
  export const FallbackShowcase: Story = {
94
135
  args: {
95
136
  src: 'https://brokenLink.random',
@@ -4,7 +4,7 @@ import { render, waitFor } from '@testing-library/react-native';
4
4
  import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
5
5
  import { Avatar } from './Avatar';
6
6
 
7
- const { sizes } = ledgerLiveThemes.dark;
7
+ const { sizes, colors } = ledgerLiveThemes.dark;
8
8
 
9
9
  const TestWrapper = ({ children }: { children: React.ReactNode }) => (
10
10
  <ThemeProvider themes={ledgerLiveThemes} colorScheme='dark' locale='en'>
@@ -33,6 +33,36 @@ describe('Avatar Component', () => {
33
33
  getByLabelText('user profile');
34
34
  });
35
35
 
36
+ it('should render with transparent appearance by default', () => {
37
+ const { getByTestId } = render(
38
+ <TestWrapper>
39
+ <Avatar testID='avatar-id' />
40
+ </TestWrapper>,
41
+ );
42
+
43
+ expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
44
+ colors.bg.mutedTransparent,
45
+ );
46
+ });
47
+
48
+ it.each<['transparent' | 'gray', string]>([
49
+ ['transparent', colors.bg.mutedTransparent],
50
+ ['gray', colors.bg.muted],
51
+ ])(
52
+ 'should render with %s appearance when specified',
53
+ (appearance, expectedColor) => {
54
+ const { getByTestId } = render(
55
+ <TestWrapper>
56
+ <Avatar testID='avatar-id' appearance={appearance} />
57
+ </TestWrapper>,
58
+ );
59
+
60
+ expect(getByTestId('avatar-id').props.style.backgroundColor).toBe(
61
+ expectedColor,
62
+ );
63
+ },
64
+ );
65
+
36
66
  it('should render with different sizes', () => {
37
67
  const { getByTestId, rerender } = render(
38
68
  <TestWrapper>
@@ -7,6 +7,7 @@ import { DotIndicator } from '../DotIndicator';
7
7
  import { Box } from '../Utility';
8
8
  import type { AvatarProps } from './types';
9
9
 
10
+ type Appearance = NonNullable<AvatarProps['appearance']>;
10
11
  type Size = NonNullable<AvatarProps['size']>;
11
12
 
12
13
  const fallbackSizes = {
@@ -23,9 +24,20 @@ const dotSizeMap: Partial<
23
24
  md: 'xl',
24
25
  };
25
26
 
26
- const useStyles = ({ size }: { size: Size }) => {
27
+ const useStyles = ({
28
+ appearance,
29
+ size,
30
+ }: {
31
+ appearance: Appearance;
32
+ size: Size;
33
+ }) => {
27
34
  return useStyleSheet(
28
35
  (t) => {
36
+ const backgroundColors: Record<Appearance, string> = {
37
+ gray: t.colors.bg.muted,
38
+ transparent: t.colors.bg.mutedTransparent,
39
+ };
40
+
29
41
  const sizeMap = {
30
42
  sm: { size: t.sizes.s40, padding: t.spacings.s4 },
31
43
  md: { size: t.sizes.s48, padding: t.spacings.s4 },
@@ -39,7 +51,7 @@ const useStyles = ({ size }: { size: Size }) => {
39
51
  width: sizeMap[size].size,
40
52
  height: sizeMap[size].size,
41
53
  borderRadius: 9999,
42
- backgroundColor: t.colors.bg.muted,
54
+ backgroundColor: backgroundColors[appearance],
43
55
  alignItems: 'center',
44
56
  justifyContent: 'center',
45
57
  padding: sizeMap[size].padding,
@@ -52,7 +64,7 @@ const useStyles = ({ size }: { size: Size }) => {
52
64
  },
53
65
  };
54
66
  },
55
- [size],
67
+ [appearance, size],
56
68
  );
57
69
  };
58
70
 
@@ -77,6 +89,7 @@ export const Avatar = ({
77
89
  style,
78
90
  src,
79
91
  alt = 'avatar',
92
+ appearance = 'transparent',
80
93
  size = 'md',
81
94
  showNotification: showNotificationProp = false,
82
95
  testID,
@@ -86,7 +99,7 @@ export const Avatar = ({
86
99
  const { t } = useCommonTranslation();
87
100
  const [error, setError] = useState<boolean>(false);
88
101
  const shouldFallback = !src || error;
89
- const styles = useStyles({ size });
102
+ const styles = useStyles({ appearance, size });
90
103
 
91
104
  const resolvedAlt = alt || t('components.avatar.defaultAlt');
92
105
 
@@ -11,6 +11,12 @@ export type AvatarProps = {
11
11
  * @optional
12
12
  */
13
13
  alt?: string;
14
+ /**
15
+ * The visual appearance of the avatar background: `gray` or `transparent`.
16
+ * @optional
17
+ * @default transparent
18
+ */
19
+ appearance?: 'gray' | 'transparent';
14
20
  /**
15
21
  * The size variant of the avatar.
16
22
  * @optional
@@ -119,10 +119,6 @@ export const BottomSheetHeader = ({
119
119
  hidden: !hasIcons && density !== 'compact',
120
120
  });
121
121
 
122
- if (!hasTitleSection && !onBack && hideCloseButton) {
123
- return null;
124
- }
125
-
126
122
  const titleComponent = hasTitleSection ? (
127
123
  <Box style={styles.textWrapper}>
128
124
  {title && (
@@ -57,7 +57,7 @@ describe('Icon', () => {
57
57
  </Icon>,
58
58
  );
59
59
 
60
- expect(screen.getByTestId('icon').props.color).toBe('#fca6a7');
60
+ expect(screen.getByTestId('icon').props.color).toBe('#f87274');
61
61
  });
62
62
 
63
63
  it('should forward ref and spread additional props', () => {
@@ -1,9 +1,107 @@
1
1
  import { useDisabledContext } from '@ledgerhq/lumen-utils-shared';
2
+ import { useCallback } from 'react';
3
+ import { View, type GestureResponderEvent, StyleSheet } from 'react-native';
4
+ import Animated, {
5
+ useAnimatedStyle,
6
+ withTiming,
7
+ } from 'react-native-reanimated';
8
+ import { useStyleSheet, useTheme } from '../../../styles';
9
+ import { useTimingConfig } from '../../Animations/useTimingConfig';
2
10
  import { useControllableState } from '../../utils';
3
11
  import { Pressable } from '../Utility';
4
- import { BaseSwitchThumb, BaseSwitchRoot } from './BaseSwitch';
5
12
 
6
- import type { SwitchProps } from './types';
13
+ import type { SwitchProps, SwitchSize } from './types';
14
+
15
+ const useSwitchStyles = ({
16
+ checked,
17
+ disabled,
18
+ size,
19
+ }: {
20
+ checked: boolean;
21
+ disabled: boolean;
22
+ size: SwitchSize;
23
+ }) => {
24
+ const { theme } = useTheme();
25
+
26
+ const styles = useStyleSheet(
27
+ (t) => {
28
+ const sizes: Record<SwitchSize, { width: number; height: number }> = {
29
+ sm: { width: t.sizes.s24, height: t.sizes.s16 },
30
+ md: { width: t.sizes.s40, height: t.sizes.s24 },
31
+ };
32
+
33
+ const thumbSizes: Record<SwitchSize, number> = {
34
+ sm: t.sizes.s12,
35
+ md: t.sizes.s20,
36
+ };
37
+
38
+ return {
39
+ root: StyleSheet.flatten([
40
+ {
41
+ borderRadius: t.borderRadius.full,
42
+ padding: t.spacings.s2,
43
+ overflow: 'hidden',
44
+ ...sizes[size],
45
+ minWidth: sizes[size].width,
46
+ maxWidth: sizes[size].width,
47
+ minHeight: sizes[size].height,
48
+ maxHeight: sizes[size].height,
49
+ },
50
+ !checked &&
51
+ !disabled && {
52
+ backgroundColor: t.colors.bg.mutedStrong,
53
+ },
54
+ checked &&
55
+ !disabled && {
56
+ backgroundColor: t.colors.bg.active,
57
+ },
58
+ disabled && {
59
+ backgroundColor: t.colors.bg.disabled,
60
+ },
61
+ ]),
62
+ thumbWrapper: {
63
+ position: 'absolute',
64
+ top: t.spacings.s2,
65
+ left: t.spacings.s2,
66
+ },
67
+ thumb: StyleSheet.flatten([
68
+ {
69
+ borderRadius: t.borderRadius.full,
70
+ backgroundColor: 'white',
71
+ width: thumbSizes[size],
72
+ height: thumbSizes[size],
73
+ },
74
+ disabled && {
75
+ backgroundColor: t.colors.bg.base,
76
+ },
77
+ ]),
78
+ };
79
+ },
80
+ [checked, disabled, size],
81
+ );
82
+
83
+ const thumbTranslations: Record<SwitchSize, number> = {
84
+ sm: theme.spacings.s8,
85
+ md: theme.spacings.s16,
86
+ };
87
+
88
+ return { ...styles, thumbTranslate: thumbTranslations[size] };
89
+ };
90
+
91
+ const useAnimatedThumb = (checked: boolean, translate: number) => {
92
+ const timing = useTimingConfig({ duration: 200, easing: 'easeInOut' });
93
+
94
+ // Reanimated best practice: derive the animation reactively by calling
95
+ // `withTiming` inside `useAnimatedStyle`. When `checked` (or `translate`)
96
+ // changes the worklet re-runs and animates from the current value to the
97
+ // new target -- no shared value or effect required.
98
+ return useAnimatedStyle(
99
+ () => ({
100
+ transform: [{ translateX: withTiming(checked ? translate : 0, timing) }],
101
+ }),
102
+ [checked, translate, timing],
103
+ );
104
+ };
7
105
 
8
106
  /**
9
107
  * The switch follows the design system tokens and supports checked, unchecked,
@@ -36,6 +134,7 @@ export const Switch = ({
36
134
  defaultChecked = false,
37
135
  disabled: disabledProp,
38
136
  size = 'md',
137
+ onPress: onPressProp,
39
138
  ref,
40
139
  ...props
41
140
  }: SwitchProps) => {
@@ -49,16 +148,38 @@ export const Switch = ({
49
148
  defaultProp: defaultChecked,
50
149
  });
51
150
 
151
+ const styles = useSwitchStyles({
152
+ checked: !!checked,
153
+ disabled: !!disabled,
154
+ size,
155
+ });
156
+ const animatedStyle = useAnimatedThumb(!!checked, styles.thumbTranslate);
157
+
158
+ const onPress = useCallback(
159
+ (ev: GestureResponderEvent) => {
160
+ if (disabled) return;
161
+ onCheckedChange(!checked);
162
+ onPressProp?.(ev);
163
+ },
164
+ [disabled, checked, onCheckedChange, onPressProp],
165
+ );
166
+
52
167
  return (
53
- <Pressable ref={ref} lx={lx} style={style} {...props}>
54
- <BaseSwitchRoot
55
- disabled={disabled}
56
- checked={checked}
57
- onCheckedChange={onCheckedChange}
58
- size={size}
59
- >
60
- <BaseSwitchThumb />
61
- </BaseSwitchRoot>
168
+ <Pressable
169
+ ref={ref}
170
+ lx={lx}
171
+ role='switch'
172
+ aria-checked={checked}
173
+ aria-disabled={disabled}
174
+ accessibilityState={{ checked, disabled }}
175
+ disabled={disabled}
176
+ onPress={onPress}
177
+ style={[styles.root, style]}
178
+ {...props}
179
+ >
180
+ <Animated.View style={[styles.thumbWrapper, animatedStyle]}>
181
+ <View style={styles.thumb} />
182
+ </Animated.View>
62
183
  </Pressable>
63
184
  );
64
185
  };
@@ -1,5 +1,7 @@
1
1
  import type { StyledPressableProps } from '../../../styles';
2
2
 
3
+ export type SwitchSize = 'sm' | 'md';
4
+
3
5
  export type SwitchProps = {
4
6
  /**
5
7
  * The disabled state of the switch.
@@ -15,7 +17,7 @@ export type SwitchProps = {
15
17
  * The size of the switch.
16
18
  * @default 'md'
17
19
  */
18
- size?: 'sm' | 'md';
20
+ size?: SwitchSize;
19
21
  /**
20
22
  * The callback function called when the checked state changes.
21
23
  */
@@ -1,221 +0,0 @@
1
- "use strict";
2
-
3
- import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
4
- import { useCallback, useEffect } from 'react';
5
- import { Pressable, StyleSheet } from 'react-native';
6
- import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
7
- import { useStyleSheet } from "../../../styles/index.js";
8
- import { useTimingConfig } from "../../Animations/useTimingConfig.js";
9
- import { SlotPressable, SlotView } from "../Slot/index.js";
10
- import { jsx as _jsx } from "react/jsx-runtime";
11
- const ROOT_COMPONENT_NAME = 'BaseSwitch';
12
- const THUMB_COMPONENT_NAME = 'BaseSwitchThumb';
13
- const [BaseSwitchProvider, useBaseSwitchContext] = createSafeContext(ROOT_COMPONENT_NAME);
14
- const BaseSwitchRoot = ({
15
- asChild,
16
- checked,
17
- size = 'md',
18
- onCheckedChange,
19
- disabled = false,
20
- onPress: onPressProp,
21
- 'aria-valuetext': ariaValueText,
22
- ref,
23
- ...props
24
- }) => {
25
- const styles = useStyles({
26
- checked: !!checked,
27
- disabled: !!disabled,
28
- size
29
- });
30
- const onPress = useCallback(ev => {
31
- if (disabled) return;
32
- onCheckedChange?.(!checked);
33
- onPressProp?.(ev);
34
- }, [disabled, checked, onCheckedChange, onPressProp]);
35
- const Component = asChild ? SlotPressable : Pressable;
36
- return /*#__PURE__*/_jsx(BaseSwitchProvider, {
37
- value: {
38
- checked,
39
- onCheckedChange,
40
- disabled,
41
- size
42
- },
43
- children: /*#__PURE__*/_jsx(Component, {
44
- style: styles.root,
45
- ref: ref,
46
- "aria-disabled": disabled,
47
- role: "switch",
48
- "aria-checked": checked,
49
- onPress: onPress,
50
- accessibilityState: {
51
- checked,
52
- disabled
53
- },
54
- accessibilityValue: ariaValueText ? {
55
- text: ariaValueText
56
- } : undefined,
57
- disabled: disabled,
58
- ...props
59
- })
60
- });
61
- };
62
- const THUMB_TRANSLATE = {
63
- sm: 8,
64
- md: 16
65
- };
66
- const _worklet_1149937565143_init_data = {
67
- code: "function BaseSwitchTsx1(){const{translateX}=this.__closure;return{transform:[{translateX:translateX.value}]};}",
68
- location: "/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/Switch/BaseSwitch.tsx",
69
- sourceMap: "{\"version\":3,\"names\":[\"BaseSwitchTsx1\",\"translateX\",\"__closure\",\"transform\",\"value\"],\"sources\":[\"/home/runner/work/lumen/lumen/libs/ui-rnative/src/lib/Components/Switch/BaseSwitch.tsx\"],\"mappings\":\"AAmHI,SAAAA,eAAA,QAAAC,UAAA,OAAAC,SAAA,OAAO,CACLC,SAAS,CAAE,CAAC,CAAEF,UAAU,CAAEA,UAAU,CAACG,KAAM,CAAC,CAC9C,CAAC\",\"ignoreList\":[]}"
70
- };
71
- const useAnimatedThumb = ({
72
- checked,
73
- size
74
- }) => {
75
- const timingConfig = useTimingConfig({
76
- duration: 200,
77
- easing: 'easeInOut'
78
- });
79
- const translateX = useSharedValue(checked ? THUMB_TRANSLATE[size] : 0);
80
- useEffect(() => {
81
- translateX.value = withTiming(checked ? THUMB_TRANSLATE[size] : 0, timingConfig);
82
- return () => cancelAnimation(translateX);
83
- }, [checked, size, translateX, timingConfig]);
84
- const animatedStyle = useAnimatedStyle(function BaseSwitchTsx1Factory({
85
- _worklet_1149937565143_init_data,
86
- translateX
87
- }) {
88
- const _e = [new global.Error(), -2, -27];
89
- const BaseSwitchTsx1 = () => ({
90
- transform: [{
91
- translateX: translateX.value
92
- }]
93
- });
94
- BaseSwitchTsx1.__closure = {
95
- translateX
96
- };
97
- BaseSwitchTsx1.__workletHash = 1149937565143;
98
- BaseSwitchTsx1.__pluginVersion = "0.5.2";
99
- BaseSwitchTsx1.__initData = _worklet_1149937565143_init_data;
100
- BaseSwitchTsx1.__stackDetails = _e;
101
- return BaseSwitchTsx1;
102
- }({
103
- _worklet_1149937565143_init_data,
104
- translateX
105
- }), [translateX]);
106
- return {
107
- animatedStyle
108
- };
109
- };
110
- const BaseSwitchThumb = ({
111
- asChild,
112
- ref,
113
- ...props
114
- }) => {
115
- const {
116
- checked,
117
- disabled,
118
- size = 'md'
119
- } = useBaseSwitchContext({
120
- consumerName: THUMB_COMPONENT_NAME,
121
- contextRequired: true
122
- });
123
- const styles = useStyles({
124
- checked: !!checked,
125
- disabled: !!disabled,
126
- size
127
- });
128
- const {
129
- animatedStyle
130
- } = useAnimatedThumb({
131
- checked,
132
- size
133
- });
134
- if (asChild) {
135
- const Component = SlotView;
136
- return /*#__PURE__*/_jsx(Component, {
137
- ref: ref,
138
- role: "presentation",
139
- style: styles.thumb,
140
- ...props
141
- });
142
- }
143
- return /*#__PURE__*/_jsx(Animated.View, {
144
- ref: ref,
145
- role: "presentation",
146
- style: [styles.thumbBase, animatedStyle],
147
- ...props
148
- });
149
- };
150
- const useStyles = ({
151
- checked,
152
- disabled,
153
- size
154
- }) => {
155
- return useStyleSheet(t => {
156
- const sizes = {
157
- sm: {
158
- width: t.sizes.s24,
159
- height: t.sizes.s16
160
- },
161
- md: {
162
- width: t.sizes.s40,
163
- height: t.sizes.s24
164
- }
165
- };
166
- const thumbSizes = {
167
- sm: {
168
- size: t.sizes.s12
169
- },
170
- md: {
171
- size: t.sizes.s20
172
- }
173
- };
174
- const thumbTranslations = {
175
- sm: t.spacings.s8,
176
- md: t.spacings.s16
177
- };
178
- return {
179
- root: StyleSheet.flatten([{
180
- flexDirection: 'row',
181
- justifyContent: 'flex-start',
182
- alignItems: 'center',
183
- borderRadius: t.borderRadius.full,
184
- padding: t.spacings.s2,
185
- overflow: 'hidden',
186
- ...sizes[size],
187
- minWidth: sizes[size].width,
188
- maxWidth: sizes[size].width,
189
- minHeight: sizes[size].height,
190
- maxHeight: sizes[size].height
191
- }, !checked && !disabled && {
192
- backgroundColor: t.colors.bg.mutedStrong
193
- }, checked && !disabled && {
194
- backgroundColor: t.colors.bg.active
195
- }, disabled && {
196
- backgroundColor: t.colors.bg.disabled
197
- }]),
198
- thumbBase: StyleSheet.flatten([{
199
- borderRadius: t.borderRadius.full,
200
- backgroundColor: 'white',
201
- width: thumbSizes[size].size,
202
- height: thumbSizes[size].size
203
- }, disabled && {
204
- backgroundColor: t.colors.bg.base
205
- }]),
206
- thumb: StyleSheet.flatten([{
207
- borderRadius: t.borderRadius.full,
208
- backgroundColor: 'white',
209
- width: thumbSizes[size].size,
210
- height: thumbSizes[size].size,
211
- transform: [{
212
- translateX: checked ? thumbTranslations[size] : 0
213
- }]
214
- }, disabled && {
215
- backgroundColor: t.colors.bg.base
216
- }])
217
- };
218
- }, [checked, disabled, size]);
219
- };
220
- export { BaseSwitchRoot, BaseSwitchThumb };
221
- //# sourceMappingURL=BaseSwitch.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["createSafeContext","useCallback","useEffect","Pressable","StyleSheet","Animated","cancelAnimation","useAnimatedStyle","useSharedValue","withTiming","useStyleSheet","useTimingConfig","SlotPressable","SlotView","jsx","_jsx","ROOT_COMPONENT_NAME","THUMB_COMPONENT_NAME","BaseSwitchProvider","useBaseSwitchContext","BaseSwitchRoot","asChild","checked","size","onCheckedChange","disabled","onPress","onPressProp","ariaValueText","ref","props","styles","useStyles","ev","Component","value","children","style","root","role","accessibilityState","accessibilityValue","text","undefined","THUMB_TRANSLATE","sm","md","_worklet_1149937565143_init_data","code","location","sourceMap","useAnimatedThumb","timingConfig","duration","easing","translateX","animatedStyle","BaseSwitchTsx1Factory","_e","global","Error","BaseSwitchTsx1","transform","__closure","__workletHash","__pluginVersion","__initData","__stackDetails","BaseSwitchThumb","consumerName","contextRequired","thumb","View","thumbBase","t","sizes","width","s24","height","s16","s40","thumbSizes","s12","s20","thumbTranslations","spacings","s8","flatten","flexDirection","justifyContent","alignItems","borderRadius","full","padding","s2","overflow","minWidth","maxWidth","minHeight","maxHeight","backgroundColor","colors","bg","mutedStrong","active","base"],"sourceRoot":"../../../../../src","sources":["lib/Components/Switch/BaseSwitch.tsx"],"mappings":"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","ignoreList":[]}
@@ -1,13 +0,0 @@
1
- import type { SlottablePressableProps, SlottableViewProps } from '../../types';
2
- import type { SwitchProps } from './types';
3
- type BaseSwitchRootProps = SlottablePressableProps & {
4
- checked: SwitchProps['checked'];
5
- onCheckedChange: SwitchProps['onCheckedChange'];
6
- disabled?: SwitchProps['disabled'];
7
- size?: SwitchProps['size'];
8
- onKeyDown?: (ev: React.KeyboardEvent) => void;
9
- };
10
- declare const BaseSwitchRoot: ({ asChild, checked, size, onCheckedChange, disabled, onPress: onPressProp, "aria-valuetext": ariaValueText, ref, ...props }: BaseSwitchRootProps) => import("react/jsx-runtime").JSX.Element;
11
- declare const BaseSwitchThumb: ({ asChild, ref, ...props }: SlottableViewProps) => import("react/jsx-runtime").JSX.Element;
12
- export { BaseSwitchRoot, BaseSwitchThumb };
13
- //# sourceMappingURL=BaseSwitch.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BaseSwitch.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Switch/BaseSwitch.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAK3C,KAAK,mBAAmB,GAAG,uBAAuB,GAAG;IACnD,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IAChC,eAAe,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC/C,CAAC;AAKF,QAAA,MAAM,cAAc,GAAI,6HAUrB,mBAAmB,4CA4CrB,CAAC;AAmCF,QAAA,MAAM,eAAe,GAAI,4BAA4B,kBAAkB,4CAsCtE,CAAC;AAsFF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}