@ds-autonomie/react-native 0.7.3 → 0.7.4

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 (48) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/chunks/chunk.3HDQMMF2.js +81 -0
  3. package/dist/chunks/{chunk.B2JV2E47.js → chunk.3SUS24CI.js} +29 -21
  4. package/dist/chunks/chunk.7T73XPWE.js +83 -0
  5. package/dist/chunks/chunk.CZOIMFLH.js +20 -0
  6. package/dist/chunks/chunk.DBGHHBSM.js +52 -0
  7. package/dist/chunks/chunk.EWMRU3E4.js +67 -0
  8. package/dist/chunks/chunk.ILCOTEXS.js +64 -0
  9. package/dist/chunks/chunk.L65V2F7C.js +26 -0
  10. package/dist/chunks/chunk.MU3OHOLM.js +26 -0
  11. package/dist/chunks/{chunk.RNOZ5AW4.js → chunk.MWOLFH57.js} +2 -4
  12. package/dist/chunks/chunk.NQYY7B5O.js +73 -0
  13. package/dist/chunks/{chunk.I5NPEO25.js → chunk.PCMSFNR4.js} +38 -34
  14. package/dist/chunks/chunk.UO2CEN64.js +95 -0
  15. package/dist/components/button/Button.d.ts +5 -5
  16. package/dist/components/button/Button.js +3 -3
  17. package/dist/components/button/Button.styles.js +1 -1
  18. package/dist/components/checkbox/Checkbox.d.ts +4 -4
  19. package/dist/components/checkbox/Checkbox.js +2 -2
  20. package/dist/components/divider/Divider.js +13 -9
  21. package/dist/components/icon/Icon.d.ts +2 -2
  22. package/dist/components/icon/Icon.js +1 -1
  23. package/dist/components/listCaption/ListCaption.js +1 -1
  24. package/dist/components/listItem/ListItem.js +2 -2
  25. package/dist/components/listTitle/ListTitle.js +1 -1
  26. package/dist/components/radio/Radio.d.ts +4 -4
  27. package/dist/components/radio/Radio.js +1 -1
  28. package/dist/components/searchField/SearchField.d.ts +1 -1
  29. package/dist/components/searchField/SearchField.js +1 -1
  30. package/dist/components/tabs/Tabs.js +1 -1
  31. package/dist/components/tabs/tabItem/TabItem.d.ts +2 -2
  32. package/dist/components/tabs/tabItem/TabItem.js +2 -2
  33. package/dist/components/textInput/TextInput.d.ts +5 -5
  34. package/dist/components/textInput/TextInput.js +2 -2
  35. package/dist/components/toggle/Toggle.d.ts +2 -2
  36. package/dist/components/toggle/Toggle.js +2 -2
  37. package/dist/index.js +13 -13
  38. package/package.json +7 -6
  39. package/dist/chunks/chunk.DGZYY7CA.js +0 -47
  40. package/dist/chunks/chunk.DMHRBYRF.js +0 -69
  41. package/dist/chunks/chunk.DMWLLPBB.js +0 -94
  42. package/dist/chunks/chunk.JQRCUHR6.js +0 -65
  43. package/dist/chunks/chunk.KVGKM2JI.js +0 -73
  44. package/dist/chunks/chunk.LN5IVTGU.js +0 -60
  45. package/dist/chunks/chunk.LR5V6SDZ.js +0 -22
  46. package/dist/chunks/chunk.OQSCGAEY.js +0 -17
  47. package/dist/chunks/chunk.WVKTSG5X.js +0 -22
  48. package/dist/chunks/chunk.XCMNSIIN.js +0 -72
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @ds-autonomie/react-native
2
2
 
3
+ ## 0.7.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 10277ce: Modification du build suite à la mise à jour de esbuild
8
+
3
9
  ## 0.7.3
4
10
 
5
11
  ### Patch Changes
@@ -0,0 +1,81 @@
1
+ import {
2
+ isIOS,
3
+ placeholderTextColor,
4
+ plateformStyles,
5
+ styles
6
+ } from "./chunk.7H4YRP4X.js";
7
+
8
+ // src/components/searchField/SearchField.tsx
9
+ import React, { useEffect, useState } from "react";
10
+ import {
11
+ View,
12
+ TextInput
13
+ } from "react-native";
14
+ import Icon from "react-native-vector-icons/MaterialIcons";
15
+ var INIT_PLACEHOLDER = isIOS ? "Recherche" : "Rechercher un...";
16
+ var SearchField = React.forwardRef(
17
+ function SearchField2({
18
+ onChangeText,
19
+ placeholder = INIT_PLACEHOLDER,
20
+ style,
21
+ value = "",
22
+ disabled = false,
23
+ ...props
24
+ }, ref) {
25
+ const [text, setText] = useState(value);
26
+ useEffect(
27
+ function onValueUpdate() {
28
+ setText(value);
29
+ },
30
+ [value]
31
+ );
32
+ function handleKeypress(text2) {
33
+ if (disabled) {
34
+ return;
35
+ }
36
+ onChangeText?.(text2);
37
+ setText(text2);
38
+ }
39
+ return /* @__PURE__ */ React.createElement(
40
+ View,
41
+ {
42
+ style: [
43
+ style,
44
+ styles.container,
45
+ isIOS && styles.iOScontainer,
46
+ disabled && styles.disabledContainer
47
+ ]
48
+ },
49
+ /* @__PURE__ */ React.createElement(
50
+ Icon,
51
+ {
52
+ name: "search",
53
+ ...plateformStyles,
54
+ accessibilityRole: "button",
55
+ accessibilityLabel: "search"
56
+ }
57
+ ),
58
+ /* @__PURE__ */ React.createElement(
59
+ TextInput,
60
+ {
61
+ ref,
62
+ ...props,
63
+ editable: !disabled,
64
+ accessibilityLabel: "search",
65
+ accessibilityRole: "search",
66
+ accessibilityState: { disabled },
67
+ onChangeText: handleKeypress,
68
+ placeholder,
69
+ placeholderTextColor,
70
+ returnKeyType: "search",
71
+ style: [styles.input, isIOS ? styles.iOSInput : styles.androidInput],
72
+ value: text
73
+ }
74
+ )
75
+ );
76
+ }
77
+ );
78
+
79
+ export {
80
+ SearchField
81
+ };
@@ -4,7 +4,7 @@ import {
4
4
  } from "./chunk.CZ5Y2AVH.js";
5
5
  import {
6
6
  Icon
7
- } from "./chunk.OQSCGAEY.js";
7
+ } from "./chunk.CZOIMFLH.js";
8
8
 
9
9
  // src/components/toggle/Toggle.tsx
10
10
  import React, { useEffect, useState } from "react";
@@ -51,30 +51,38 @@ var Toggle = React.forwardRef(function Toggle2({ value = false, disabled = false
51
51
  }),
52
52
  [checked]
53
53
  );
54
- return <Pressable
55
- ref={ref}
56
- {...restProps}
57
- accessibilityLabel="switch"
58
- accessibilityRole="switch"
59
- accessibilityState={{ checked, disabled }}
60
- accessible
61
- aria-checked={checked}
62
- aria-disabled={disabled}
63
- aria-pressed={checked}
64
- onPress={handlePress}
65
- role="switch"
66
- style={[toggleStyle, style]}
67
- ><Animated.View
68
- accessible={false}
69
- focusable={false}
70
- style={[styles.circle, toggleAnimatedStyles]}
71
- >{checked ? <CheckedIcon /> : <DefaultIcon />}</Animated.View></Pressable>;
54
+ return /* @__PURE__ */ React.createElement(
55
+ Pressable,
56
+ {
57
+ ref,
58
+ ...restProps,
59
+ accessibilityLabel: "switch",
60
+ accessibilityRole: "switch",
61
+ accessibilityState: { checked, disabled },
62
+ accessible: true,
63
+ "aria-checked": checked,
64
+ "aria-disabled": disabled,
65
+ "aria-pressed": checked,
66
+ onPress: handlePress,
67
+ role: "switch",
68
+ style: [toggleStyle, style]
69
+ },
70
+ /* @__PURE__ */ React.createElement(
71
+ Animated.View,
72
+ {
73
+ accessible: false,
74
+ focusable: false,
75
+ style: [styles.circle, toggleAnimatedStyles]
76
+ },
77
+ checked ? /* @__PURE__ */ React.createElement(CheckedIcon, null) : /* @__PURE__ */ React.createElement(DefaultIcon, null)
78
+ )
79
+ );
72
80
  });
73
81
  function CheckedIcon() {
74
- return <Icon name="check" color="hsla(120, 1%, 15%, 1)" />;
82
+ return /* @__PURE__ */ React.createElement(Icon, { name: "check", color: "hsla(120, 1%, 15%, 1)" });
75
83
  }
76
84
  function DefaultIcon() {
77
- return <Icon name="close" color="hsla(0, 0%, 91%, 1)" />;
85
+ return /* @__PURE__ */ React.createElement(Icon, { name: "close", color: "hsla(0, 0%, 91%, 1)" });
78
86
  }
79
87
 
80
88
  export {
@@ -0,0 +1,83 @@
1
+ import {
2
+ checkboxCheckStyles,
3
+ checkboxContainerStyles
4
+ } from "./chunk.H2AL2E3A.js";
5
+ import {
6
+ Icon
7
+ } from "./chunk.CZOIMFLH.js";
8
+
9
+ // src/components/checkbox/Checkbox.tsx
10
+ import theme from "@ds-autonomie/assets/js/dsa-theme";
11
+ import React, { useEffect, useState } from "react";
12
+ import { Pressable, View } from "react-native";
13
+ var Checkbox = React.forwardRef(function Checkbox2({
14
+ value = false,
15
+ disabled = false,
16
+ error = false,
17
+ onValueChange,
18
+ style: styleProps,
19
+ ...restProps
20
+ }, ref) {
21
+ const [checked, setChecked] = useState(value);
22
+ useEffect(
23
+ function onValueUpdate() {
24
+ setChecked(value);
25
+ },
26
+ [value]
27
+ );
28
+ function handlePress() {
29
+ if (disabled) {
30
+ return;
31
+ }
32
+ onValueChange?.(!checked);
33
+ setChecked(!checked);
34
+ }
35
+ return /* @__PURE__ */ React.createElement(
36
+ Pressable,
37
+ {
38
+ ref,
39
+ ...restProps,
40
+ accessibilityLabel: "checkbox",
41
+ accessibilityRole: "checkbox",
42
+ accessibilityState: { checked, disabled },
43
+ accessible: true,
44
+ "aria-checked": checked,
45
+ "aria-disabled": disabled,
46
+ "aria-invalid": error,
47
+ "aria-pressed": checked,
48
+ onPress: handlePress,
49
+ role: "checkbox",
50
+ hitSlop: 15,
51
+ style: [
52
+ styleProps,
53
+ checkboxContainerStyles.default,
54
+ checked && checkboxContainerStyles.active,
55
+ error && checkboxContainerStyles.error,
56
+ disabled && checkboxContainerStyles.disabled
57
+ ]
58
+ },
59
+ checked && /* @__PURE__ */ React.createElement(
60
+ View,
61
+ {
62
+ style: [
63
+ checkboxCheckStyles.default,
64
+ checked && checkboxCheckStyles.active,
65
+ error && checkboxCheckStyles.error,
66
+ disabled && checkboxCheckStyles.disabled
67
+ ]
68
+ },
69
+ /* @__PURE__ */ React.createElement(
70
+ Icon,
71
+ {
72
+ name: "check",
73
+ color: theme.primitives.color.neutral[100],
74
+ size: 18
75
+ }
76
+ )
77
+ )
78
+ );
79
+ });
80
+
81
+ export {
82
+ Checkbox
83
+ };
@@ -0,0 +1,20 @@
1
+ // src/components/icon/Icon.tsx
2
+ import React, { forwardRef } from "react";
3
+ import MaterialIcons from "react-native-vector-icons/MaterialIcons";
4
+ var Icon = forwardRef(function Icon2({ size = 16, ...restProps }, ref) {
5
+ return /* @__PURE__ */ React.createElement(
6
+ MaterialIcons,
7
+ {
8
+ ...restProps,
9
+ ref,
10
+ size,
11
+ selectable: false,
12
+ importantForAccessibility: "no-hide-descendants",
13
+ accessibilityElementsHidden: true
14
+ }
15
+ );
16
+ });
17
+
18
+ export {
19
+ Icon
20
+ };
@@ -0,0 +1,52 @@
1
+ import {
2
+ tabItemStyles
3
+ } from "./chunk.VPRSFOFO.js";
4
+ import {
5
+ Icon
6
+ } from "./chunk.CZOIMFLH.js";
7
+
8
+ // src/components/tabs/tabItem/TabItem.tsx
9
+ import theme from "@ds-autonomie/assets/js/dsa-theme";
10
+ import React, { useState } from "react";
11
+ import {
12
+ Text,
13
+ Pressable
14
+ } from "react-native";
15
+ var TabItem = React.forwardRef(function TabItem2({ icon, title, active = false, style, ...restProps }, ref) {
16
+ const [isFocus, setIsFocus] = useState(false);
17
+ return /* @__PURE__ */ React.createElement(
18
+ Pressable,
19
+ {
20
+ ref,
21
+ ...restProps,
22
+ accessibilityLabel: "tab",
23
+ accessibilityRole: "tab",
24
+ accessible: true,
25
+ accessibilityState: {
26
+ selected: active
27
+ },
28
+ role: "tab",
29
+ onFocus: () => setIsFocus(true),
30
+ style: [
31
+ style,
32
+ tabItemStyles.container,
33
+ active && tabItemStyles.selected,
34
+ isFocus && tabItemStyles.focus,
35
+ active && isFocus && tabItemStyles.focusSelected
36
+ ]
37
+ },
38
+ icon && /* @__PURE__ */ React.createElement(
39
+ Icon,
40
+ {
41
+ name: icon,
42
+ size: 18,
43
+ color: active ? theme.collection.tab.selected["on-enabled"] : theme.collection.tab.unselected["on-enabled"]
44
+ }
45
+ ),
46
+ /* @__PURE__ */ React.createElement(Text, { style: [tabItemStyles.text, active && tabItemStyles.selected] }, title)
47
+ );
48
+ });
49
+
50
+ export {
51
+ TabItem
52
+ };
@@ -0,0 +1,67 @@
1
+ import {
2
+ radioContainerStyles,
3
+ radioDotStyles
4
+ } from "./chunk.YWEWQ2LT.js";
5
+
6
+ // src/components/radio/Radio.tsx
7
+ import React, { useEffect, useState } from "react";
8
+ import { Pressable, View } from "react-native";
9
+ var Radio = React.forwardRef(function Checkbox({
10
+ value = false,
11
+ disabled = false,
12
+ onValueChange,
13
+ style: styleProps,
14
+ ...restProps
15
+ }, ref) {
16
+ const [checked, setChecked] = useState(value);
17
+ useEffect(
18
+ function onValueUpdate() {
19
+ setChecked(value);
20
+ },
21
+ [value]
22
+ );
23
+ function handlePress() {
24
+ if (disabled || checked) {
25
+ return;
26
+ }
27
+ onValueChange?.(true);
28
+ setChecked(true);
29
+ }
30
+ return /* @__PURE__ */ React.createElement(
31
+ Pressable,
32
+ {
33
+ ref,
34
+ ...restProps,
35
+ accessibilityLabel: "radio",
36
+ accessibilityRole: "radio",
37
+ accessibilityState: { checked, disabled },
38
+ accessible: true,
39
+ "aria-checked": checked,
40
+ "aria-disabled": disabled,
41
+ "aria-pressed": checked,
42
+ onPress: handlePress,
43
+ hitSlop: 14,
44
+ role: "radio",
45
+ style: [
46
+ styleProps,
47
+ radioContainerStyles.default,
48
+ checked && radioContainerStyles.active,
49
+ disabled && radioContainerStyles.disabled
50
+ ]
51
+ },
52
+ checked && /* @__PURE__ */ React.createElement(
53
+ View,
54
+ {
55
+ style: [
56
+ radioDotStyles.default,
57
+ checked && radioDotStyles.active,
58
+ disabled && radioDotStyles.disabled
59
+ ]
60
+ }
61
+ )
62
+ );
63
+ });
64
+
65
+ export {
66
+ Radio
67
+ };
@@ -0,0 +1,64 @@
1
+ import {
2
+ styles
3
+ } from "./chunk.DE3QWY2X.js";
4
+ import {
5
+ Icon
6
+ } from "./chunk.CZOIMFLH.js";
7
+
8
+ // src/components/listItem/ListItem.tsx
9
+ import theme from "@ds-autonomie/assets/js/dsa-theme";
10
+ import React from "react";
11
+ import {
12
+ View,
13
+ Text,
14
+ Pressable
15
+ } from "react-native";
16
+ var ListItem = React.forwardRef(
17
+ function ListItem2({
18
+ label,
19
+ subtitle,
20
+ prefix,
21
+ isLast = false,
22
+ isFirst = false,
23
+ suffix,
24
+ style,
25
+ inset = false,
26
+ ...restProps
27
+ }, ref) {
28
+ const isLarge = subtitle !== void 0 && subtitle !== "" || suffix !== void 0 || prefix !== void 0 || inset;
29
+ return /* @__PURE__ */ React.createElement(
30
+ Pressable,
31
+ {
32
+ ref,
33
+ ...restProps,
34
+ accessibilityLabel: label,
35
+ accessible: true,
36
+ style: [
37
+ style,
38
+ styles.container,
39
+ isLarge && styles.large,
40
+ isLast && styles.lastItem,
41
+ inset && styles.inset,
42
+ inset && isLast && styles.insetLast,
43
+ inset && isFirst && styles.insetFirst
44
+ ]
45
+ },
46
+ prefix,
47
+ /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { numberOfLines: 1, style: styles.title }, label), subtitle && /* @__PURE__ */ React.createElement(Text, { style: styles.subtitle }, subtitle)),
48
+ suffix
49
+ );
50
+ }
51
+ );
52
+ var ChevronSuffix = ({ title }) => /* @__PURE__ */ React.createElement(View, { style: { flexDirection: "row", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Text, { style: { color: theme.collection["list item"]["end slot"].detail } }, title), /* @__PURE__ */ React.createElement(
53
+ Icon,
54
+ {
55
+ color: theme.collection["list item"]["end slot"].chevron,
56
+ name: "chevron-right",
57
+ size: 20
58
+ }
59
+ ));
60
+ ListItem.ChevronSuffix = ChevronSuffix;
61
+
62
+ export {
63
+ ListItem
64
+ };
@@ -0,0 +1,26 @@
1
+ import {
2
+ listTitleStyles
3
+ } from "./chunk.523CLSSB.js";
4
+
5
+ // src/components/listTitle/ListTitle.tsx
6
+ import React from "react";
7
+ import { View, Text } from "react-native";
8
+ var ListTitle = React.forwardRef(
9
+ function ListTitle2({ style, children, ...restProps }, ref) {
10
+ return /* @__PURE__ */ React.createElement(
11
+ View,
12
+ {
13
+ ref,
14
+ ...restProps,
15
+ accessibilityRole: "text",
16
+ accessible: true,
17
+ style: [style, listTitleStyles.container]
18
+ },
19
+ /* @__PURE__ */ React.createElement(Text, { style: [listTitleStyles.text] }, children)
20
+ );
21
+ }
22
+ );
23
+
24
+ export {
25
+ ListTitle
26
+ };
@@ -0,0 +1,26 @@
1
+ import {
2
+ listCaptionStyles
3
+ } from "./chunk.TWXAL56H.js";
4
+
5
+ // src/components/listCaption/ListCaption.tsx
6
+ import React from "react";
7
+ import { View, Text } from "react-native";
8
+ var ListCaption = React.forwardRef(
9
+ function ListCaption2({ style, children, ...restProps }, ref) {
10
+ return /* @__PURE__ */ React.createElement(
11
+ View,
12
+ {
13
+ ref,
14
+ ...restProps,
15
+ accessibilityRole: "text",
16
+ accessible: true,
17
+ style: [style, listCaptionStyles.container]
18
+ },
19
+ /* @__PURE__ */ React.createElement(Text, { style: [listCaptionStyles.text] }, children)
20
+ );
21
+ }
22
+ );
23
+
24
+ export {
25
+ ListCaption
26
+ };
@@ -9,10 +9,8 @@ var variants = Object.keys(
9
9
  var sizes = ["small", "medium"];
10
10
  function getIconColor({ pressed, disabled, variant }) {
11
11
  const buttonTheme = theme.collection.button[variant];
12
- if (disabled)
13
- return buttonTheme["on-disabled"];
14
- if (pressed)
15
- return buttonTheme["on-pressed"];
12
+ if (disabled) return buttonTheme["on-disabled"];
13
+ if (pressed) return buttonTheme["on-pressed"];
16
14
  return buttonTheme["on-enabled"];
17
15
  }
18
16
  function getContainerStyle({
@@ -0,0 +1,73 @@
1
+ import {
2
+ getContainerStyle,
3
+ getIconColor,
4
+ getTextStyle
5
+ } from "./chunk.MWOLFH57.js";
6
+ import {
7
+ Icon
8
+ } from "./chunk.CZOIMFLH.js";
9
+
10
+ // src/components/button/Button.tsx
11
+ import React from "react";
12
+ import {
13
+ Pressable,
14
+ Text
15
+ } from "react-native";
16
+ var Button = React.forwardRef(function Toggle({
17
+ variant = "primary",
18
+ style,
19
+ disabled = false,
20
+ endIcon,
21
+ size = "medium",
22
+ startIcon,
23
+ children,
24
+ ...props
25
+ }, ref) {
26
+ const hasOnlyOneIcon = [!!startIcon, !!endIcon].filter(Boolean).length === 1 && !children;
27
+ return /* @__PURE__ */ React.createElement(
28
+ Pressable,
29
+ {
30
+ ref,
31
+ ...props,
32
+ accessibilityLabel: "button",
33
+ accessibilityRole: "button",
34
+ accessible: true,
35
+ "aria-disabled": disabled,
36
+ accessibilityState: {
37
+ disabled
38
+ },
39
+ disabled,
40
+ role: "button",
41
+ style: ({ pressed }) => [
42
+ style,
43
+ getContainerStyle({ variant, size, hasOnlyOneIcon, disabled, pressed })
44
+ ]
45
+ },
46
+ ({ pressed }) => {
47
+ const iconColor = getIconColor({
48
+ pressed,
49
+ disabled,
50
+ variant
51
+ });
52
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, startIcon && /* @__PURE__ */ React.createElement(Icon, { name: startIcon, color: iconColor, size: 24 }), children !== void 0 && /* @__PURE__ */ React.createElement(
53
+ Text,
54
+ {
55
+ style: [
56
+ getTextStyle({
57
+ variant,
58
+ size,
59
+ hasOnlyOneIcon,
60
+ disabled,
61
+ pressed
62
+ })
63
+ ]
64
+ },
65
+ children
66
+ ), endIcon && /* @__PURE__ */ React.createElement(Icon, { name: endIcon, color: iconColor, size: 24 }));
67
+ }
68
+ );
69
+ });
70
+
71
+ export {
72
+ Button
73
+ };
@@ -91,26 +91,28 @@ var Tabs = ({
91
91
  });
92
92
  }, [animationRef, tabs, tabItemPositions.current.length]);
93
93
  const tabIndicatorWidth = tabItemPositions.current[value]?.width;
94
- return <View
95
- {...rest}
96
- accessibilityRole="tablist"
97
- style={[tabsStyles.container, style]}
98
- onLayout={({ nativeEvent: { layout } }) => {
99
- setTabContainerWidth(layout.width);
100
- }}
101
- >{React.createElement(
102
- scrollable ? ScrollView : React.Fragment,
94
+ return /* @__PURE__ */ React.createElement(
95
+ View,
103
96
  {
104
- ...scrollable && {
105
- horizontal: true,
106
- ref: scrollViewRef,
107
- onScroll: onScrollHandler,
108
- scrollEventThrottle: 1,
109
- showsHorizontalScrollIndicator: false
97
+ ...rest,
98
+ accessibilityRole: "tablist",
99
+ style: [tabsStyles.container, style],
100
+ onLayout: ({ nativeEvent: { layout } }) => {
101
+ setTabContainerWidth(layout.width);
110
102
  }
111
103
  },
112
- <>
113
- {tabs.map(
104
+ React.createElement(
105
+ scrollable ? ScrollView : React.Fragment,
106
+ {
107
+ ...scrollable && {
108
+ horizontal: true,
109
+ ref: scrollViewRef,
110
+ onScroll: onScrollHandler,
111
+ scrollEventThrottle: 1,
112
+ showsHorizontalScrollIndicator: false
113
+ }
114
+ },
115
+ /* @__PURE__ */ React.createElement(React.Fragment, null, tabs.map(
114
116
  (tab, index) => React.cloneElement(tab, {
115
117
  onPress: () => onChange(index),
116
118
  onLayout: (event) => {
@@ -123,23 +125,25 @@ var Tabs = ({
123
125
  },
124
126
  active: index === value
125
127
  })
126
- )}
127
- <Animated.View
128
- style={[
129
- tabsStyles.indicator,
130
- {
131
- backgroundColor: theme.collection.tab.selected["on-enabled"],
132
- transform: [
133
- {
134
- translateX: indicatorTransitionInterpolate ?? 0
135
- }
136
- ],
137
- width: tabIndicatorWidth
138
- }
139
- ]}
140
- />
141
- </>
142
- )}</View>;
128
+ ), /* @__PURE__ */ React.createElement(
129
+ Animated.View,
130
+ {
131
+ style: [
132
+ tabsStyles.indicator,
133
+ {
134
+ backgroundColor: theme.collection.tab.selected["on-enabled"],
135
+ transform: [
136
+ {
137
+ translateX: indicatorTransitionInterpolate ?? 0
138
+ }
139
+ ],
140
+ width: tabIndicatorWidth
141
+ }
142
+ ]
143
+ }
144
+ ))
145
+ )
146
+ );
143
147
  };
144
148
 
145
149
  export {