@sincpro/mobile-ui 2.0.1 → 3.0.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.
Files changed (198) hide show
  1. package/README.md +7 -2
  2. package/dist/Actions/Actions.Button.d.ts +2 -1
  3. package/dist/Actions/Actions.Button.js +31 -37
  4. package/dist/Actions/Actions.Dock.d.ts +6 -6
  5. package/dist/Actions/Actions.Dock.js +14 -72
  6. package/dist/Actions/Actions.FAB.d.ts +2 -1
  7. package/dist/Actions/Actions.FilterButton.js +1 -1
  8. package/dist/Actions/Actions.IconButton.d.ts +3 -4
  9. package/dist/Actions/Actions.IconButton.js +2 -2
  10. package/dist/Dialog/Confirmation.context.d.ts +5 -14
  11. package/dist/Dialog/Confirmation.context.js +11 -51
  12. package/dist/Dialog/Dialog.ActionSheet.d.ts +8 -7
  13. package/dist/Dialog/Dialog.ActionSheet.js +45 -19
  14. package/dist/Dialog/Dialog.Confirmation.d.ts +14 -11
  15. package/dist/Dialog/Dialog.Confirmation.js +38 -14
  16. package/dist/Dialog/Dialog.EditValue.d.ts +21 -16
  17. package/dist/Dialog/Dialog.EditValue.js +73 -14
  18. package/dist/Dialog/Dialog.Sheet.d.ts +8 -24
  19. package/dist/Dialog/Dialog.Sheet.js +15 -60
  20. package/dist/Dialog/index.d.ts +14 -14
  21. package/dist/Dialog/index.js +5 -3
  22. package/dist/Dialog/requestConfirmation.d.ts +3 -0
  23. package/dist/Dialog/requestConfirmation.js +13 -0
  24. package/dist/Display/Display.Accordion.js +1 -1
  25. package/dist/Display/Display.Avatar.d.ts +6 -6
  26. package/dist/Display/Display.Avatar.js +2 -2
  27. package/dist/Display/Display.Badge.js +4 -4
  28. package/dist/Display/Display.Card.js +5 -2
  29. package/dist/Display/Display.Carousel.js +1 -1
  30. package/dist/Display/Display.CircleButton.d.ts +3 -8
  31. package/dist/Display/Display.CircleButton.js +2 -2
  32. package/dist/Display/Display.CopyableText.js +1 -5
  33. package/dist/Display/Display.Date.d.ts +3 -2
  34. package/dist/Display/Display.Date.js +3 -3
  35. package/dist/Display/Display.GradientSurface.d.ts +52 -9
  36. package/dist/Display/Display.GradientSurface.js +9 -14
  37. package/dist/Display/Display.Icon.d.ts +7 -11
  38. package/dist/Display/Display.Icon.js +15 -30
  39. package/dist/Display/Display.Image.d.ts +2 -1
  40. package/dist/Display/Display.Image.js +1 -1
  41. package/dist/Display/Display.KeyValue.js +1 -1
  42. package/dist/Display/Display.ListItem.js +1 -1
  43. package/dist/Display/Display.MenuButton.js +4 -4
  44. package/dist/Display/Display.MenuCard.d.ts +3 -8
  45. package/dist/Display/Display.MenuCard.js +2 -2
  46. package/dist/Display/Display.MenuGrid.d.ts +2 -7
  47. package/dist/Display/Display.MenuGrid.js +1 -1
  48. package/dist/Display/Display.Monetary.d.ts +2 -6
  49. package/dist/Display/Display.Monetary.js +2 -2
  50. package/dist/Display/Display.PriceTag.js +1 -1
  51. package/dist/Display/Display.Rating.js +1 -1
  52. package/dist/Display/Display.SearchHistory.d.ts +2 -1
  53. package/dist/Display/Display.SearchHistory.js +1 -1
  54. package/dist/Display/Display.StatCard.d.ts +2 -1
  55. package/dist/Display/Display.StatCard.js +1 -1
  56. package/dist/Display/Display.StoryViewer.js +10 -6
  57. package/dist/Display/Display.SwipeableRow.d.ts +2 -1
  58. package/dist/Display/Display.Timeline.js +1 -1
  59. package/dist/Display/icon-map.d.ts +344 -0
  60. package/dist/Display/icon-map.js +86 -0
  61. package/dist/Display/index.d.ts +2 -0
  62. package/dist/Display/index.js +1 -0
  63. package/dist/Feedback/Feedback.Banner.js +13 -12
  64. package/dist/Feedback/Feedback.Empty.js +1 -1
  65. package/dist/Feedback/Feedback.EmptyState.d.ts +2 -1
  66. package/dist/Feedback/Feedback.EmptyState.js +1 -1
  67. package/dist/Feedback/Feedback.Error.js +1 -1
  68. package/dist/Feedback/Feedback.PermissionCard.d.ts +2 -1
  69. package/dist/Feedback/Feedback.PermissionCard.js +2 -2
  70. package/dist/Feedback/Toast.context.js +3 -3
  71. package/dist/Form/Form.ControlledDropdown.d.ts +5 -11
  72. package/dist/Form/Form.ControlledDropdown.js +5 -2
  73. package/dist/Form/Form.DatePicker.d.ts +5 -9
  74. package/dist/Form/Form.DatePicker.js +116 -21
  75. package/dist/Form/Form.Dropdown.d.ts +11 -16
  76. package/dist/Form/Form.Dropdown.js +54 -90
  77. package/dist/Form/Form.FractionalQuantityInput.js +4 -11
  78. package/dist/Form/Form.Input.d.ts +3 -3
  79. package/dist/Form/Form.KeyboardForm.d.ts +2 -2
  80. package/dist/Form/Form.KeyboardForm.js +2 -2
  81. package/dist/Form/Form.KeyboardToolbar.d.ts +2 -1
  82. package/dist/Form/Form.KeyboardToolbar.js +3 -7
  83. package/dist/Form/Form.PasswordInput.js +1 -1
  84. package/dist/Form/Form.QuantitySelector.js +1 -1
  85. package/dist/Form/Form.Select.d.ts +12 -8
  86. package/dist/Form/Form.Select.js +64 -31
  87. package/dist/Form/Form.Slider.d.ts +4 -7
  88. package/dist/Form/Form.Slider.js +11 -10
  89. package/dist/Form/Form.Switch.js +2 -1
  90. package/dist/Form/index.d.ts +6 -14
  91. package/dist/Form/index.js +0 -11
  92. package/dist/Navigation/Navigation.AppBar.d.ts +2 -1
  93. package/dist/Navigation/Navigation.AppBar.js +2 -2
  94. package/dist/Navigation/Navigation.BottomNav.d.ts +4 -8
  95. package/dist/Navigation/Navigation.BottomNav.js +2 -2
  96. package/dist/Navigation/Navigation.CollapsingHeader.js +3 -2
  97. package/dist/Navigation/Navigation.Menu.d.ts +16 -11
  98. package/dist/Navigation/Navigation.Menu.js +97 -42
  99. package/dist/Navigation/Navigation.Search.js +2 -2
  100. package/dist/Navigation/Navigation.SearchBar.js +3 -4
  101. package/dist/Navigation/Navigation.SegmentedControl.d.ts +7 -25
  102. package/dist/Navigation/Navigation.SegmentedControl.js +18 -39
  103. package/dist/Navigation/Navigation.Steps.js +1 -1
  104. package/dist/Navigation/Navigation.Tabs.d.ts +2 -1
  105. package/dist/Navigation/index.d.ts +0 -6
  106. package/dist/Navigation/index.js +0 -8
  107. package/dist/Typography/Typography.SelectableText.js +3 -7
  108. package/dist/Typography/Typography.Text.d.ts +1 -6
  109. package/dist/Typography/Typography.Text.js +3 -6
  110. package/dist/index.d.ts +1 -4
  111. package/dist/index.js +1 -4
  112. package/dist/layouts/AuthContainer.d.ts +4 -2
  113. package/dist/layouts/AuthContainer.js +3 -4
  114. package/dist/layouts/Container.d.ts +0 -4
  115. package/dist/layouts/Container.js +3 -4
  116. package/dist/layouts/ScrollContainer.d.ts +7 -3
  117. package/dist/layouts/ScrollContainer.js +5 -4
  118. package/dist/primitives/BaseButton.d.ts +2 -1
  119. package/dist/theme/build.js +0 -4
  120. package/dist/theme/css-vars.js +0 -4
  121. package/dist/theme/dark.js +2 -6
  122. package/dist/theme/default.js +1 -5
  123. package/dist/theme/index.d.ts +1 -1
  124. package/dist/theme/index.js +1 -1
  125. package/dist/theme/types.d.ts +0 -11
  126. package/dist/theme/typography.d.ts +8 -7
  127. package/dist/theme/typography.js +25 -4
  128. package/dist/utils/timezone.d.ts +0 -5
  129. package/dist/views/AuthFormView.d.ts +3 -1
  130. package/dist/views/AuthFormView.js +2 -2
  131. package/dist/views/FormViewV2.d.ts +6 -13
  132. package/dist/views/FormViewV2.js +29 -25
  133. package/dist/views/ListViewV2.context.d.ts +5 -5
  134. package/dist/views/ListViewV2.d.ts +23 -18
  135. package/dist/views/ListViewV2.js +45 -48
  136. package/dist/views/types/IListView.d.ts +5 -4
  137. package/dist/views/types/IListView.js +18 -15
  138. package/dist/widgets/CollectionOptions.d.ts +2 -2
  139. package/dist/widgets/CollectionOptions.js +92 -65
  140. package/dist/widgets/FilterBar.js +1 -1
  141. package/dist/widgets/PromoModal.js +10 -4
  142. package/dist/widgets/QuickActions.d.ts +2 -7
  143. package/dist/widgets/QuickActions.js +1 -1
  144. package/dist/widgets/ReorderableList.js +3 -3
  145. package/dist/widgets/TimeZoneSelectorModal.d.ts +1 -6
  146. package/dist/widgets/TimeZoneSelectorModal.js +17 -12
  147. package/dist/widgets/index.d.ts +0 -11
  148. package/dist/widgets/index.js +0 -7
  149. package/package.json +35 -38
  150. package/tailwind.preset.js +0 -4
  151. package/dist/Dialog/BottomSheet/BottomSheet.Root.d.ts +0 -324
  152. package/dist/Dialog/BottomSheet/BottomSheet.Root.js +0 -373
  153. package/dist/Dialog/BottomSheet/index.d.ts +0 -1
  154. package/dist/Dialog/BottomSheet/index.js +0 -1
  155. package/dist/Dialog/Dialog.NativeSheet.d.ts +0 -10
  156. package/dist/Dialog/Dialog.NativeSheet.js +0 -21
  157. package/dist/Form/Form.Button.d.ts +0 -3
  158. package/dist/Form/Form.Button.js +0 -1
  159. package/dist/Form/Form.FAB.d.ts +0 -3
  160. package/dist/Form/Form.FAB.js +0 -1
  161. package/dist/Form/Form.FilterButton.d.ts +0 -3
  162. package/dist/Form/Form.FilterButton.js +0 -1
  163. package/dist/Form/Form.IconButton.d.ts +0 -3
  164. package/dist/Form/Form.IconButton.js +0 -1
  165. package/dist/Form/Form.SearchBar.d.ts +0 -13
  166. package/dist/Form/Form.SearchBar.js +0 -26
  167. package/dist/Navigation/Navigation.Header.d.ts +0 -16
  168. package/dist/Navigation/Navigation.Header.js +0 -17
  169. package/dist/Navigation/Navigation.HeaderToolbar.d.ts +0 -15
  170. package/dist/Navigation/Navigation.HeaderToolbar.js +0 -18
  171. package/dist/Navigation/Navigation.TabIcon.d.ts +0 -18
  172. package/dist/Navigation/Navigation.TabIcon.js +0 -12
  173. package/dist/Navigation/Navigation.TabItem.d.ts +0 -19
  174. package/dist/Navigation/Navigation.TabItem.js +0 -13
  175. package/dist/icons/OdooIcon.d.ts +0 -11
  176. package/dist/icons/OdooIcon.js +0 -11
  177. package/dist/icons/PrinterIcon.d.ts +0 -9
  178. package/dist/icons/PrinterIcon.js +0 -9
  179. package/dist/layouts/TabNavigatorLayout.d.ts +0 -26
  180. package/dist/layouts/TabNavigatorLayout.js +0 -60
  181. package/dist/utils/icon.d.ts +0 -1
  182. package/dist/utils/icon.js +0 -1
  183. package/dist/widgets/CircleButton.d.ts +0 -3
  184. package/dist/widgets/CircleButton.js +0 -1
  185. package/dist/widgets/GeoPermissionCard.d.ts +0 -13
  186. package/dist/widgets/GeoPermissionCard.js +0 -24
  187. package/dist/widgets/HomeHeader.d.ts +0 -15
  188. package/dist/widgets/HomeHeader.js +0 -13
  189. package/dist/widgets/MenuCard.d.ts +0 -3
  190. package/dist/widgets/MenuCard.js +0 -1
  191. package/dist/widgets/MenuGrid.d.ts +0 -5
  192. package/dist/widgets/MenuGrid.js +0 -1
  193. package/dist/widgets/MenuSection.d.ts +0 -3
  194. package/dist/widgets/MenuSection.js +0 -1
  195. package/dist/widgets/ScreenHeader.d.ts +0 -25
  196. package/dist/widgets/ScreenHeader.js +0 -32
  197. package/dist/widgets/TimeZoneSelector.d.ts +0 -12
  198. package/dist/widgets/TimeZoneSelector.js +0 -24
@@ -1,373 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
2
- /* eslint-disable react-hooks/refs */
3
- import { theme } from "../../theme/index.js";
4
- import { useSheetTranslation } from "../../utils/useSheetTranslation.js";
5
- import { createContext, useContext, useRef } from "react";
6
- import { Animated, Dimensions, Modal, PanResponder, Pressable, ScrollView, Text, View, } from "react-native";
7
- import { useSafeAreaInsets } from "react-native-safe-area-context";
8
- const BottomSheetContext = createContext(null);
9
- /**
10
- * Hook to access BottomSheet context from compound components.
11
- * Provides `close()` function and `panHandlers` for gesture support.
12
- *
13
- * @throws Error if used outside BottomSheet.Root
14
- *
15
- * @example
16
- * ```tsx
17
- * function CustomHeader() {
18
- * const { close, panHandlers } = BottomSheet.useBottomSheet();
19
- * return (
20
- * <View {...panHandlers}>
21
- * <Button onPress={close} title="Close" />
22
- * </View>
23
- * );
24
- * }
25
- * ```
26
- */
27
- function useBottomSheet() {
28
- const context = useContext(BottomSheetContext);
29
- if (!context) {
30
- throw new Error("BottomSheet compound components must be used within BottomSheet.Root");
31
- }
32
- return context;
33
- }
34
- const SIZE_MAP = {
35
- auto: 0,
36
- small: 0.3,
37
- medium: 0.5,
38
- large: 0.75,
39
- full: 0.9,
40
- };
41
- /**
42
- * Root container for the BottomSheet modal with swipe-to-dismiss gesture support.
43
- *
44
- * Features:
45
- * - Spring animation on open/close
46
- * - Swipe down to dismiss (configurable)
47
- * - Backdrop tap to dismiss (configurable)
48
- * - Safe area insets handling
49
- * - Configurable sizes
50
- *
51
- * @param visible - Controls visibility of the bottom sheet
52
- * @param onClose - Callback when sheet is dismissed (swipe, backdrop tap, or programmatic)
53
- * @param size - Height preset: 'auto' | 'small' | 'medium' | 'large' | 'full'
54
- * @param dismissible - If false, disables swipe and backdrop dismiss (default: true)
55
- * @param children - Compound components (Header, Content, Actions, etc.)
56
- *
57
- * @example Basic usage with Header and Content
58
- * ```tsx
59
- * <BottomSheet.Root visible={isOpen} onClose={() => setIsOpen(false)}>
60
- * <BottomSheet.Header>
61
- * <BottomSheet.Title>Select Option</BottomSheet.Title>
62
- * </BottomSheet.Header>
63
- * <BottomSheet.Content>
64
- * <Text>Your content here</Text>
65
- * </BottomSheet.Content>
66
- * </BottomSheet.Root>
67
- * ```
68
- *
69
- * @example With Actions footer
70
- * ```tsx
71
- * <BottomSheet.Root visible={isOpen} onClose={close} size="medium">
72
- * <BottomSheet.Header>
73
- * <BottomSheet.Title subtitle="Choose one">Options</BottomSheet.Title>
74
- * </BottomSheet.Header>
75
- * <BottomSheet.Content scrollable>
76
- * {items.map(item => <ItemRow key={item.id} item={item} />)}
77
- * </BottomSheet.Content>
78
- * <BottomSheet.Actions layout="horizontal">
79
- * <Button title="Cancel" onPress={close} />
80
- * <Button title="Confirm" onPress={handleConfirm} />
81
- * </BottomSheet.Actions>
82
- * </BottomSheet.Root>
83
- * ```
84
- *
85
- * @example Non-dismissible (must use button to close)
86
- * ```tsx
87
- * <BottomSheet.Root visible={isOpen} onClose={close} dismissible={false}>
88
- * <BottomSheet.Content>
89
- * <Text>You must tap the button to close</Text>
90
- * <Button title="Close" onPress={close} />
91
- * </BottomSheet.Content>
92
- * </BottomSheet.Root>
93
- * ```
94
- */
95
- /**
96
- * @deprecated Custom PanResponder implementation (limited gestures/scroll). The modern
97
- * replacement is `Dialog.Sheet` (on RN Modal, no provider). Kept for backwards compatibility.
98
- */
99
- function Root({ visible, onClose, size = "auto", dismissible = true, children }) {
100
- const insets = useSafeAreaInsets();
101
- const screenHeight = Dimensions.get("window").height;
102
- const { translateY, reducedMotion } = useSheetTranslation(visible, screenHeight);
103
- const gesture = useRef({ dismissible, onClose, reducedMotion });
104
- gesture.current = { dismissible, onClose, reducedMotion };
105
- const maxHeight = size === "auto" ? screenHeight * 0.9 : screenHeight * SIZE_MAP[size];
106
- const minHeight = size === "auto" ? 0 : screenHeight * SIZE_MAP[size];
107
- const panResponder = useRef(PanResponder.create({
108
- onStartShouldSetPanResponder: () => gesture.current.dismissible,
109
- onMoveShouldSetPanResponder: (_, gestureState) => {
110
- return gesture.current.dismissible && Math.abs(gestureState.dy) > 10;
111
- },
112
- onPanResponderGrant: () => translateY.stopAnimation(),
113
- onPanResponderMove: (_, gestureState) => {
114
- if (gestureState.dy > 0) {
115
- translateY.setValue(gestureState.dy);
116
- }
117
- },
118
- onPanResponderRelease: (_, gestureState) => {
119
- if (gestureState.dy > 100 || gestureState.vy > 0.5) {
120
- translateY.stopAnimation();
121
- gesture.current.onClose();
122
- }
123
- else {
124
- if (gesture.current.reducedMotion)
125
- translateY.setValue(0);
126
- else
127
- Animated.spring(translateY, {
128
- toValue: 0,
129
- useNativeDriver: true,
130
- damping: 20,
131
- stiffness: 300,
132
- }).start();
133
- }
134
- },
135
- })).current;
136
- function handleBackdropPress() {
137
- if (dismissible) {
138
- translateY.stopAnimation();
139
- onClose();
140
- }
141
- }
142
- const contextValue = {
143
- close: onClose,
144
- panHandlers: panResponder.panHandlers,
145
- };
146
- return (_jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onClose, presentationStyle: "overFullScreen", transparent: true, visible: visible, children: _jsxs(View, { className: "flex-1 bg-black/50", children: [_jsx(Pressable, { className: "flex-1", onPress: handleBackdropPress }), _jsx(Animated.View, { className: "rounded-t-3xl overflow-hidden", style: {
147
- backgroundColor: theme.bg.popover,
148
- maxHeight,
149
- minHeight: minHeight || undefined,
150
- paddingBottom: insets.bottom,
151
- transform: [{ translateY }],
152
- }, children: _jsx(BottomSheetContext.Provider, { value: contextValue, children: children }) })] }) }));
153
- }
154
- /**
155
- * Standalone drag handle for minimal bottom sheets without a header.
156
- * Includes the visual "pill" indicator and swipe gesture support.
157
- *
158
- * Use this when you want a simple drag indicator without a full header.
159
- * For sheets with titles, use `BottomSheet.Header` instead.
160
- *
161
- * @param children - Optional content below the handle pill
162
- *
163
- * @example Minimal sheet with just a handle
164
- * ```tsx
165
- * <BottomSheet.Root visible={isOpen} onClose={close}>
166
- * <BottomSheet.Handle />
167
- * <BottomSheet.Content>
168
- * <Text>Simple content</Text>
169
- * </BottomSheet.Content>
170
- * </BottomSheet.Root>
171
- * ```
172
- */
173
- function Handle({ children }) {
174
- const { panHandlers } = useBottomSheet();
175
- return (_jsxs(View, { ...panHandlers, className: "items-center pt-3 pb-2", children: [_jsx(View, { className: "w-10 h-1 bg-border-light rounded-full mb-2" }), children] }));
176
- }
177
- /**
178
- * Header section with integrated drag handle and bottom border.
179
- * Automatically includes the drag pill indicator and gesture support.
180
- *
181
- * Use with `BottomSheet.Title` for consistent styling, or provide custom content.
182
- *
183
- * @param children - Header content (typically BottomSheet.Title or custom layout)
184
- *
185
- * @example With Title component
186
- * ```tsx
187
- * <BottomSheet.Header>
188
- * <BottomSheet.Title subtitle="Select your preference">
189
- * Settings
190
- * </BottomSheet.Title>
191
- * </BottomSheet.Header>
192
- * ```
193
- *
194
- * @example Custom header content
195
- * ```tsx
196
- * <BottomSheet.Header>
197
- * <View className="flex-row justify-between px-4 py-2">
198
- * <Text>Custom Title</Text>
199
- * <TouchableOpacity onPress={close}>
200
- * <Icon name="close" />
201
- * </TouchableOpacity>
202
- * </View>
203
- * </BottomSheet.Header>
204
- * ```
205
- */
206
- function Header({ children }) {
207
- const { panHandlers } = useBottomSheet();
208
- return (_jsxs(View, { ...panHandlers, className: "border-b border-border-light", children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 bg-border-divider rounded-full" }) }), children] }));
209
- }
210
- /**
211
- * Title component for use inside BottomSheet.Header.
212
- * Provides consistent text styling with optional subtitle.
213
- *
214
- * @param children - Main title text (typically a string or Text component)
215
- * @param subtitle - Optional secondary text below the title
216
- *
217
- * @example Simple title
218
- * ```tsx
219
- * <BottomSheet.Title>Select Device</BottomSheet.Title>
220
- * ```
221
- *
222
- * @example Title with subtitle
223
- * ```tsx
224
- * <BottomSheet.Title subtitle="Choose from available devices">
225
- * Bluetooth Printer
226
- * </BottomSheet.Title>
227
- * ```
228
- */
229
- function Title({ children, subtitle }) {
230
- return (_jsxs(View, { className: "px-5 py-3", children: [_jsx(Text, { className: "text-lg font-semibold text-text-primary", children: children }), subtitle && _jsx(Text, { className: "text-sm text-text-secondary mt-1", children: subtitle })] }));
231
- }
232
- /**
233
- * Main content area for the bottom sheet.
234
- * Can be static or scrollable depending on content needs.
235
- *
236
- * @param children - Content to display
237
- * @param scrollable - Enable ScrollView wrapper for long content (default: false)
238
- *
239
- * @example Static content
240
- * ```tsx
241
- * <BottomSheet.Content>
242
- * <View className="p-4">
243
- * <Text>Short content that fits</Text>
244
- * </View>
245
- * </BottomSheet.Content>
246
- * ```
247
- *
248
- * @example Scrollable list
249
- * ```tsx
250
- * <BottomSheet.Content scrollable>
251
- * {items.map(item => (
252
- * <TouchableOpacity key={item.id} onPress={() => onSelect(item)}>
253
- * <Text>{item.name}</Text>
254
- * </TouchableOpacity>
255
- * ))}
256
- * </BottomSheet.Content>
257
- * ```
258
- */
259
- function Content({ children, scrollable = false }) {
260
- if (scrollable) {
261
- return (_jsx(ScrollView, { bounces: false, className: "flex-1", showsVerticalScrollIndicator: false, children: children }));
262
- }
263
- return _jsx(View, { className: "flex-1", children: children });
264
- }
265
- /**
266
- * Action buttons section with top border, typically at the bottom of the sheet.
267
- * Use for confirm/cancel buttons or multiple action options.
268
- *
269
- * @param children - Button components
270
- * @param layout - Button arrangement: 'auto' | 'horizontal' | 'vertical' (default: 'auto')
271
- *
272
- * @example Vertical buttons (default)
273
- * ```tsx
274
- * <BottomSheet.Actions>
275
- * <Button title="Option 1" onPress={handleOption1} />
276
- * <Button title="Option 2" onPress={handleOption2} />
277
- * <Button title="Cancel" variant="outline" onPress={close} />
278
- * </BottomSheet.Actions>
279
- * ```
280
- *
281
- * @example Horizontal buttons (confirm/cancel pattern)
282
- * ```tsx
283
- * <BottomSheet.Actions layout="horizontal">
284
- * <Button title="Cancel" variant="outline" onPress={close} flex={1} />
285
- * <Button title="Confirm" variant="primary" onPress={confirm} flex={1} />
286
- * </BottomSheet.Actions>
287
- * ```
288
- */
289
- function Actions({ children, layout = "auto" }) {
290
- const containerClass = layout === "horizontal" ? "flex-row gap-3" : "gap-3";
291
- return (_jsx(View, { className: "px-5 py-4 border-t border-border-light", children: _jsx(View, { className: containerClass, children: children }) }));
292
- }
293
- /**
294
- * Footer section with gray background, for secondary information or status.
295
- * Different from Actions - use Footer for non-interactive content.
296
- *
297
- * @param children - Footer content (text, status indicators, etc.)
298
- *
299
- * @example Status footer
300
- * ```tsx
301
- * <BottomSheet.Footer>
302
- * <Text className="text-text-secondary text-sm">
303
- * Last updated: 5 minutes ago
304
- * </Text>
305
- * </BottomSheet.Footer>
306
- * ```
307
- *
308
- * @example Help text footer
309
- * ```tsx
310
- * <BottomSheet.Footer>
311
- * <View className="flex-row items-center">
312
- * <Icon name="info" size={16} />
313
- * <Text className="ml-2 text-text-secondary">Swipe down to dismiss</Text>
314
- * </View>
315
- * </BottomSheet.Footer>
316
- * ```
317
- */
318
- function Footer({ children }) {
319
- return (_jsx(View, { className: "px-5 py-3 border-t border-border-light bg-bg-hover", children: children }));
320
- }
321
- /**
322
- * BottomSheet Compound Components
323
- *
324
- * A flexible, gesture-enabled bottom sheet modal system following compound component pattern.
325
- * Supports swipe-to-dismiss, configurable sizes, and composable sections.
326
- *
327
- * ## Components
328
- *
329
- * | Component | Purpose |
330
- * |-----------|---------|
331
- * | `Root` | Container with gesture handling and animations |
332
- * | `Handle` | Standalone drag pill (minimal sheets) |
333
- * | `Header` | Header with integrated drag handle |
334
- * | `Title` | Styled title with optional subtitle |
335
- * | `Content` | Main content area (static or scrollable) |
336
- * | `Actions` | Action buttons section |
337
- * | `Footer` | Secondary info footer |
338
- * | `useBottomSheet` | Hook for custom components |
339
- *
340
- * ## Basic Structure
341
- *
342
- * ```tsx
343
- * <BottomSheet.Root visible={isOpen} onClose={close}>
344
- * <BottomSheet.Header>
345
- * <BottomSheet.Title>Title</BottomSheet.Title>
346
- * </BottomSheet.Header>
347
- * <BottomSheet.Content>
348
- * {content}
349
- * </BottomSheet.Content>
350
- * <BottomSheet.Actions>
351
- * {buttons}
352
- * </BottomSheet.Actions>
353
- * </BottomSheet.Root>
354
- * ```
355
- *
356
- * ## Usage in Atomic Design
357
- *
358
- * - **Molecules**: Use BottomSheet to create selector modals (e.g., BluetoothDeviceSelectorModal)
359
- * - **Organisms**: Compose Card + SelectorModal for complete features (e.g., BluetoothPrinterSelector)
360
- *
361
- * @see BluetoothDeviceSelectorModal - Example molecule implementation
362
- * @see TimeZoneSelectorModal - Example molecule implementation
363
- */
364
- export const BottomSheet = {
365
- Root,
366
- Handle,
367
- Header,
368
- Title,
369
- Content,
370
- Actions,
371
- Footer,
372
- useBottomSheet,
373
- };
@@ -1 +0,0 @@
1
- export { BottomSheet } from "./BottomSheet.Root.js";
@@ -1 +0,0 @@
1
- export { BottomSheet } from "./BottomSheet.Root.js";
@@ -1,10 +0,0 @@
1
- import type { ReactNode } from "react";
2
- export interface NativeSheetProps {
3
- visible: boolean;
4
- onClose: () => void;
5
- title: string;
6
- children: ReactNode;
7
- testID?: string;
8
- }
9
- declare function NativeSheet({ visible, onClose, title, children, testID }: NativeSheetProps): import("react").JSX.Element;
10
- export default NativeSheet;
@@ -1,21 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
2
- import BottomSheet, { BottomSheetView } from "@expo/ui/community/bottom-sheet";
3
- import Pressable from "../primitives/Pressable.js";
4
- import { themeToVars, useTheme } from "../theme/index.js";
5
- import { Typography } from "../Typography/index.js";
6
- import { vars } from "nativewind";
7
- import { ScrollView, View } from "react-native";
8
- const SNAP_POINTS = ["60%", "90%"];
9
- function NativeSheet({ visible, onClose, title, children, testID }) {
10
- const theme = useTheme();
11
- return (_jsx(BottomSheet, { backgroundStyle: { backgroundColor: theme.bg.card }, enablePanDownToClose: true, index: visible ? 0 : -1, onClose: () => {
12
- if (visible)
13
- onClose();
14
- }, snapPoints: SNAP_POINTS, children: _jsx(BottomSheetView, { style: { flex: 1 }, children: _jsxs(View, { accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [vars(themeToVars(theme)), { flex: 1, padding: 16 }], testID: testID, children: [_jsxs(View, { className: "flex-row items-center gap-3", children: [_jsx(Typography.Heading, { className: "flex-1", variant: "h4", children: title }), _jsx(Pressable, { accessibilityLabel: "Cerrar", onPress: onClose, style: {
15
- minHeight: 48,
16
- minWidth: 48,
17
- justifyContent: "center",
18
- alignItems: "center",
19
- }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })] }), _jsx(ScrollView, { contentContainerStyle: { paddingVertical: 12 }, keyboardShouldPersistTaps: "handled", children: children })] }) }) }));
20
- }
21
- export default NativeSheet;
@@ -1,3 +0,0 @@
1
- /** @deprecated Use `Actions.Button` from `@sincpro/mobile-ui/Actions` instead. */
2
- export type { ButtonIconProps, ButtonProps } from "../Actions/Actions.Button.js";
3
- export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button.js";
@@ -1 +0,0 @@
1
- export { default as ButtonWithIcon, default, } from "../Actions/Actions.Button.js";
@@ -1,3 +0,0 @@
1
- /** @deprecated Use `Actions.FAB` from `@sincpro/mobile-ui/Actions` instead. */
2
- export type { FABProps } from "../Actions/Actions.FAB.js";
3
- export { default } from "../Actions/Actions.FAB.js";
@@ -1 +0,0 @@
1
- export { default } from "../Actions/Actions.FAB.js";
@@ -1,3 +0,0 @@
1
- /** @deprecated Use `Actions.FilterButton` from `@sincpro/mobile-ui/Actions` instead. */
2
- export type { FilterButtonGroupProps, FilterButtonProps, } from "../Actions/Actions.FilterButton.js";
3
- export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";
@@ -1 +0,0 @@
1
- export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";
@@ -1,3 +0,0 @@
1
- /** @deprecated Use `Actions.IconButton` from `@sincpro/mobile-ui/Actions` instead. */
2
- export type { IconButtonProps } from "../Actions/Actions.IconButton.js";
3
- export { default } from "../Actions/Actions.IconButton.js";
@@ -1 +0,0 @@
1
- export { default } from "../Actions/Actions.IconButton.js";
@@ -1,13 +0,0 @@
1
- import type React from "react";
2
- interface SearchBarProps {
3
- value: string;
4
- onChangeText: (text: string) => void;
5
- placeholder?: string;
6
- className?: string;
7
- }
8
- /**
9
- * @deprecated Use `Navigation.SearchBar` (2026 pill). Kept for backwards compatibility
10
- * (consumed by `ListViewV2`).
11
- */
12
- declare function SearchBar({ value, onChangeText, placeholder, className, }: SearchBarProps): React.JSX.Element;
13
- export default SearchBar;
@@ -1,26 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
2
- import { Display } from "../Display/index.js";
3
- import { theme } from "../theme/index.js";
4
- import { cn, tv } from "../theme/tw.js";
5
- import { useState } from "react";
6
- import { TextInput, TouchableOpacity, View } from "react-native";
7
- const Icon = Display.Icon;
8
- const searchBarContainer = tv({
9
- base: "flex-row items-center bg-bg-card rounded-lg px-2 h-10 shadow-sm",
10
- variants: {
11
- focused: {
12
- true: "border-2 border-border-focus",
13
- false: "border border-border-default",
14
- },
15
- },
16
- defaultVariants: { focused: false },
17
- });
18
- /**
19
- * @deprecated Use `Navigation.SearchBar` (2026 pill). Kept for backwards compatibility
20
- * (consumed by `ListViewV2`).
21
- */
22
- function SearchBar({ value, onChangeText, placeholder = "Search", className, }) {
23
- const [isFocused, setIsFocused] = useState(false);
24
- return (_jsxs(View, { className: cn(searchBarContainer({ focused: isFocused }), className), children: [_jsx(View, { className: "mr-1 ml-0.5 items-center justify-center h-full", children: _jsx(Icon, { className: "text-text-tertiary", name: "search", size: 18, type: "ionicons" }) }), _jsx(TextInput, { className: "flex-1 h-full text-sm py-0 px-1.5 text-text-primary", onBlur: () => setIsFocused(false), onChangeText: onChangeText, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), value.length > 0 && (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "mr-0.5 ml-1 items-center justify-center h-full px-1", onPress: () => onChangeText(""), children: _jsx(Icon, { className: "text-text-tertiary", name: "x", size: 18, type: "feather" }) }))] }));
25
- }
26
- export default SearchBar;
@@ -1,16 +0,0 @@
1
- import type { ImageSource } from "../utils/image.js";
2
- import React, { ReactNode } from "react";
3
- export interface HeaderProps {
4
- title?: string;
5
- logo?: ReactNode;
6
- logoSource?: ImageSource;
7
- backButton?: boolean;
8
- handleBackButton?: () => void;
9
- className?: string;
10
- }
11
- /**
12
- * @deprecated Legacy style (forced gradient via `GradientContainer`). Use
13
- * `Navigation.AppBar` (flat, modern, opt-in gradient). Kept for backwards compatibility.
14
- */
15
- declare const Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: HeaderProps) => React.JSX.Element;
16
- export default Header;
@@ -1,17 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
2
- import Icon from "../Display/Display.Icon.js";
3
- import Logo from "../Display/Display.Logo.js";
4
- import GradientContainer from "../layouts/GradientContainer.js";
5
- import { theme } from "../theme/index.js";
6
- import { cn } from "../theme/tw.js";
7
- import { Typography } from "../Typography/index.js";
8
- import { TouchableOpacity, View } from "react-native";
9
- /**
10
- * @deprecated Legacy style (forced gradient via `GradientContainer`). Use
11
- * `Navigation.AppBar` (flat, modern, opt-in gradient). Kept for backwards compatibility.
12
- */
13
- const Header = ({ title, logo, logoSource, backButton, handleBackButton, className, }) => {
14
- const onBackPress = handleBackButton ?? (() => { });
15
- return (_jsx(GradientContainer, { className: cn("pt-10 pb-3.5 px-4", className), children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-white p-1.5 rounded", onPress: onBackPress, children: _jsx(Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Logo, { size: "medium", source: logoSource }), title && (_jsx(Typography.Text, { className: "text-white", variant: "h4", children: title }))] })] }) }));
16
- };
17
- export default Header;
@@ -1,15 +0,0 @@
1
- import type React from "react";
2
- interface HeaderToolbarProps {
3
- title?: string;
4
- logo?: boolean;
5
- centerTitle?: boolean;
6
- subtitle?: string;
7
- onBack?: () => void;
8
- rightComponent?: React.ReactNode;
9
- flat?: boolean;
10
- children?: React.ReactNode;
11
- withBackground?: boolean;
12
- className?: string;
13
- }
14
- declare function HeaderToolbar({ title, subtitle, onBack, rightComponent, centerTitle, flat, children, logo, withBackground, className, }: HeaderToolbarProps): React.JSX.Element;
15
- export default HeaderToolbar;
@@ -1,18 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
2
- import { Display } from "../Display/index.js";
3
- import GradientContainer from "../layouts/GradientContainer.js";
4
- import { theme } from "../theme/index.js";
5
- import { cn } from "../theme/tw.js";
6
- import { Typography } from "../Typography/index.js";
7
- import { TouchableOpacity, View } from "react-native";
8
- const Icon = Display.Icon;
9
- const Text = Typography.Text;
10
- function HeaderToolbar({ title = "", subtitle, onBack, rightComponent, centerTitle = false, flat = false, children, logo = false, withBackground = true, className, }) {
11
- const borderRadius = flat ? "rounded-none" : "rounded-b-[20px]";
12
- const paddingBottom = flat ? "pb-0" : "pb-4";
13
- function renderToolbar() {
14
- return (_jsxs(_Fragment, { children: [_jsxs(View, { className: "flex-row items-center justify-between px-3.5 pt-2.5 h-16 relative", children: [onBack && (_jsx(TouchableOpacity, { className: "mr-3.5 border border-white rounded-lg items-center justify-center mb-3.5 p-1.5 z-[1]", onPress: onBack, children: _jsx(Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), logo && (_jsx(View, { className: "absolute left-0 right-0 items-center justify-center z-0", children: _jsx(Display.Logo, { size: "medium" }) })), !logo && (_jsxs(View, { className: cn("flex-1", centerTitle && "absolute left-0 right-0 items-center justify-center z-[1]"), children: [_jsx(Text, { className: "text-white", numberOfLines: 1, style: { top: centerTitle ? 0 : -4 }, variant: centerTitle ? "h4" : "h6", children: title }), subtitle && (_jsx(Text, { className: "text-white", style: { top: centerTitle ? 0 : -4 }, variant: "bodySmall", children: subtitle }))] })), rightComponent && _jsx(View, { className: "ml-auto", children: rightComponent })] }), _jsx(View, { children: children })] }));
15
- }
16
- return withBackground ? (_jsx(GradientContainer, { className: cn("shadow-lg shadow-black/70", borderRadius, paddingBottom, className), children: renderToolbar() })) : (_jsx(_Fragment, { children: renderToolbar() }));
17
- }
18
- export default HeaderToolbar;
@@ -1,18 +0,0 @@
1
- import { ComponentType } from "react";
2
- interface TabIconProps {
3
- focused: boolean;
4
- size?: number;
5
- customIcon?: ComponentType<{
6
- size?: number;
7
- color?: string;
8
- }>;
9
- type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
10
- name?: any;
11
- className?: string;
12
- }
13
- /**
14
- * @deprecated Orphan tab-bar icon piece (unused). Use `Navigation.BottomNav` (single source
15
- * of truth for the bottom tab bar). Kept for backwards compatibility; removed in the next major.
16
- */
17
- declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react").JSX.Element;
18
- export default TabIcon;
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx } from "nativewind/jsx-runtime";
2
- import Icon from "../Display/Display.Icon.js";
3
- import { cn } from "../theme/tw.js";
4
- import { View } from "react-native";
5
- /**
6
- * @deprecated Orphan tab-bar icon piece (unused). Use `Navigation.BottomNav` (single source
7
- * of truth for the bottom tab bar). Kept for backwards compatibility; removed in the next major.
8
- */
9
- function TabIcon({ focused, size = 24, customIcon, type = "custom", name, className, }) {
10
- return (_jsx(View, { className: cn("justify-center items-center h-9 w-14 rounded-2xl", focused && "bg-primary shadow-sm", className), children: _jsx(Icon, { className: focused ? "text-white" : "text-text-secondary", customIcon: customIcon, name: name, size: size, type: type }) }));
11
- }
12
- export default TabIcon;
@@ -1,19 +0,0 @@
1
- import { ComponentType, FC } from "react";
2
- export interface TabIconProps {
3
- focused: boolean;
4
- size?: number;
5
- customIcon?: ComponentType<{
6
- size?: number;
7
- color?: string;
8
- }>;
9
- type?: "custom" | "ionicons" | "fontawesome" | "material" | "fontawesome5";
10
- name?: any;
11
- className?: string;
12
- }
13
- /**
14
- * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
15
- * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
16
- * compatibility; removed in the next major.
17
- */
18
- declare const TabIcon: FC<TabIconProps>;
19
- export default TabIcon;
@@ -1,13 +0,0 @@
1
- import { jsx as _jsx } from "nativewind/jsx-runtime";
2
- import Icon from "../Display/Display.Icon.js";
3
- import { cn } from "../theme/tw.js";
4
- import { View } from "react-native";
5
- /**
6
- * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
7
- * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
8
- * compatibility; removed in the next major.
9
- */
10
- const TabIcon = ({ focused, size = 24, customIcon, type = "custom", name, className, }) => {
11
- return (_jsx(View, { className: cn("justify-center items-center w-12 h-12 rounded-full", focused ? "bg-primary shadow-md" : "bg-transparent", className), children: _jsx(Icon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: customIcon, name: name, size: size, type: type }) }));
12
- };
13
- export default TabIcon;
@@ -1,11 +0,0 @@
1
- interface OdooIconProps {
2
- size?: number;
3
- color?: string;
4
- }
5
- /**
6
- * @deprecated Brand-coupled (Odoo logo); relocated to the Odoo integration package. Import
7
- * from `@sincpro/mobile-odoo/ui/components/atoms` instead. Kept here for backwards
8
- * compatibility and removed in the next major.
9
- */
10
- declare function OdooIcon({ size, color }: OdooIconProps): import("react").JSX.Element;
11
- export default OdooIcon;
@@ -1,11 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
2
- import Svg, { Path } from "react-native-svg";
3
- /**
4
- * @deprecated Brand-coupled (Odoo logo); relocated to the Odoo integration package. Import
5
- * from `@sincpro/mobile-odoo/ui/components/atoms` instead. Kept here for backwards
6
- * compatibility and removed in the next major.
7
- */
8
- function OdooIcon({ size = 100, color = "#ffffff" }) {
9
- return (_jsxs(Svg, { fill: "none", height: size, viewBox: "0 0 919 495", width: size, children: [_jsx(Path, { d: "M695,346a75,75,0,1,1,75-75A75,75,0,0,1,695,346Zm0-31a44,44,0,1,0-44-44A44,44,0,0,0,695,315ZM538,346a75,75,0,1,1,75-75A75,75,0,0,1,538,346Zm0-31a44,44,0,1,0-44-44A44,44,0,0,0,538,315Zm-82-45c0,41.9-33.6,76-75,76s-75-34-75-75.9S336.5,196,381,196c16.4,0,31.6,3.5,44,12.6V165.1c0-8.3,7.3-15.1,15.5-15.1s15.5,6.8,15.5,15.1Zm-75,45a44,44,0,1,0-44-44A44,44,0,0,0,381,315Z", fill: color }), _jsx(Path, { d: "M224,346a75,75,0,1,1,75-75A75,75,0,0,1,224,346Zm0-31a44,44,0,1,0-44-44A44,44,0,0,0,224,315Z", fill: color })] }));
10
- }
11
- export default OdooIcon;