@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/widgets/TimeZoneSelectorModal.js

@@ -15,11 +15,16 @@ const TIMEZONES_LOCALES = {
     japon: { timezone: "Asia/Tokyo", locale: "ja-JP" },
 };
 function TimezoneRow({ item, isSelected, onSelect, }) {
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-gray-100 ${isSelected ? "bg-blue-50" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "schedule", size: 24, type: "material" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-gray-400 text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-blue-500 items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: `flex-row items-center p-4 border-b border-border-light ${isSelected ? "bg-info-light" : "bg-white"}`, onPress: onSelect, children: [_jsx(Display.Icon, { color: isSelected ? theme.info : theme.text.secondary, name: "schedule", size: 24, type: "material" }), _jsxs(View, { className: "ml-3 flex-1", children: [_jsx(Typography.Text, { semibold: true, children: item.label }), _jsx(Typography.Text, { className: "text-text-tertiary text-xs", children: item.locale })] }), isSelected && (_jsx(View, { className: "w-6 h-6 rounded-full bg-info items-center justify-center", children: _jsx(Display.Icon, { color: theme.text.inverse, name: "check", size: 16, type: "material" }) }))] }));
 }
 function EmptyState() {
-    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, name: "search-off", size: 48, type: "material" }), _jsx(Typography.Text, { className: "text-gray-500 text-center mt-4", children: "No se encontraron zonas horarias" })] }));
+    return (_jsxs(View, { className: "p-8 items-center justify-center", style: { minHeight: 200 }, children: [_jsx(Display.Icon, { color: theme.text.tertiary, name: "search-off", size: 48, type: "material" }), _jsx(Typography.Text, { className: "text-text-secondary text-center mt-4", children: "No se encontraron zonas horarias" })] }));
 }
+/**
+ * @deprecated Domain/region-coupled (hardcoded LatAm timezones + Spanish copy); relocated
+ * to the core. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept here for
+ * backwards compatibility and removed in the next major.
+ */
 function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }) {
     const [query, setQuery] = useState("");
     const [selectedTimezone, setSelectedTimezone] = useState(currentTimezone || null);
@@ -52,6 +57,6 @@ function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, })
             onClose();
         }
     }
-    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-gray-500 text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-gray-100 px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] })] }));
+    return (_jsxs(BottomSheet.Root, { onClose: onClose, size: "large", visible: visible, children: [_jsxs(BottomSheet.Header, { children: [_jsxs(View, { className: "px-5 pb-3", children: [_jsx(Typography.Text, { bold: true, variant: "subtitle", children: "Zona Horaria" }), _jsx(Typography.Text, { className: "text-text-secondary text-xs", children: "Selecciona tu zona horaria" })] }), _jsx(View, { className: "px-5 pb-3", children: _jsx(TextInput, { className: "bg-bg-muted px-4 py-3 rounded-xl", onChangeText: setQuery, placeholder: "Buscar zona horaria...", placeholderTextColor: theme.text.tertiary, value: query }) })] }), _jsx(BottomSheet.Content, { scrollable: true, children: filteredTimezones.length === 0 ? (_jsx(EmptyState, {})) : (_jsx(FlatList, { data: filteredTimezones, keyExtractor: (item) => item.timezone, renderItem: ({ item }) => (_jsx(TimezoneRow, { isSelected: selectedTimezone === item.timezone, item: item, onSelect: () => setSelectedTimezone(item.timezone) })), scrollEnabled: false })) }), _jsxs(BottomSheet.Actions, { layout: "horizontal", children: [_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: onClose, title: "Cancelar", variant: "outline" }) }), selectedTimezone && (_jsx(View, { className: "flex-1", children: _jsx(Form.Button, { onPress: handleConfirm, title: "Confirmar", variant: "primary" }) }))] })] }));
 }
 export { TimeZoneSelectorModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -17,12 +17,14 @@
     "./theme": "./dist/theme/index.js",
     "./Dialog": "./dist/Dialog/index.js",
     "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
+    "./Dialog/Sheet": "./dist/Dialog/Dialog.Sheet.js",
     "./Display": "./dist/Display/index.js",
     "./Feedback": "./dist/Feedback/index.js",
     "./Form": "./dist/Form/index.js",
     "./Navigation": "./dist/Navigation/index.js",
     "./Typography": "./dist/Typography/index.js",
     "./primitives": "./dist/primitives/index.js",
+    "./tokens": "./dist/tokens/index.js",
     "./widgets": "./dist/widgets/index.js",
     "./views/Wizard": "./dist/views/Wizard/index.js",
     "./tailwind.preset": "./tailwind.preset.js",
@@ -45,8 +47,13 @@
   "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
   "license": "MIT",
   "peerDependencies": {
+    "@expo-google-fonts/fira-code": "*",
+    "@expo-google-fonts/inter": "*",
     "@expo-google-fonts/montserrat": "*",
+    "@expo/ui": "*",
     "@expo/vector-icons": "*",
+    "@react-native-community/datetimepicker": "*",
+    "@react-native-community/slider": "*",
     "expo-checkbox": "*",
     "expo-clipboard": "*",
     "expo-linear-gradient": "*",
@@ -62,6 +69,11 @@
     "react-native-svg": "*",
     "react-native-worklets": "*"
   },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "big.js": "^7.0.1",
     "clsx": "^2.1.1",
@@ -70,45 +82,51 @@
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
+    "@expo-google-fonts/fira-code": "^0.4.1",
+    "@expo-google-fonts/inter": "^0.4.2",
     "@expo-google-fonts/montserrat": "^0.4.2",
+    "@expo/ui": "~56.0.18",
     "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "^5",
     "@react-native-async-storage/async-storage": "^2",
-    "@react-native-community/datetimepicker": "8.4.4",
-    "@storybook/addon-ondevice-actions": "^10.4.5",
-    "@storybook/addon-ondevice-controls": "^10.4.5",
-    "@storybook/react-native": "^10.4.5",
+    "@react-native-community/datetimepicker": "9.1.0",
+    "@react-native-community/slider": "5.2.0",
+    "@storybook/addon-ondevice-actions": "^10.4.6",
+    "@storybook/addon-ondevice-controls": "^10.4.6",
+    "@storybook/react-native": "^10.4.6",
     "@types/big.js": "^6.2.2",
-    "@types/react": "~19.1.10",
+    "@types/react": "~19.2.14",
     "babel-plugin-module-resolver": "^5.0.3",
     "eslint": "^9.35.0",
-    "eslint-config-expo": "~10.0.0",
+    "eslint-config-expo": "~56.0.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "expo": "~54.0.35",
-    "expo-checkbox": "~5.0.8",
-    "expo-clipboard": "~8.0.8",
-    "expo-linear-gradient": "~15.0.8",
-    "expo-localization": "~17.0.9",
-    "expo-status-bar": "~3.0.9",
+    "expo": "^56.0.0",
+    "expo-checkbox": "~56.0.1",
+    "expo-clipboard": "~56.0.4",
+    "expo-font": "~56.0.7",
+    "expo-linear-gradient": "~56.0.4",
+    "expo-localization": "~56.0.6",
+    "expo-status-bar": "~56.0.4",
     "nativewind": "^4.0.1",
+    "patch-package": "^8.0.1",
     "prettier": "^3.6.2",
-    "react": "19.1.0",
+    "react": "19.2.3",
     "react-hook-form": "^7.62.0",
-    "react-native": "0.81.5",
+    "react-native": "0.85.3",
     "react-native-currency-input": "^1.1.1",
-    "react-native-gesture-handler": "~2.28.0",
-    "react-native-keyboard-controller": "1.18.5",
-    "react-native-reanimated": "~4.1.1",
-    "react-native-safe-area-context": "~5.6.0",
-    "react-native-svg": "15.12.1",
-    "react-native-worklets": "0.5.1",
-    "storybook": "^10.4.5",
+    "react-native-gesture-handler": "~2.31.1",
+    "react-native-keyboard-controller": "1.21.6",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.7.0",
+    "react-native-svg": "15.15.4",
+    "react-native-worklets": "0.8.3",
+    "storybook": "^10.4.6",
     "tailwindcss": "^3.4.17",
     "tsc-alias": "^1.8.17",
-    "typescript": "~5.9.2"
+    "typescript": "~6.0.3"
   },
   "scripts": {
     "start": "expo start",

package/tailwind.preset.js

@@ -140,6 +140,20 @@ module.exports = {
         "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
         none: "none",
       },
+      // Escala semántica de layering (NativeWind-first): clases z-dropdown, z-modal,
+      // z-toast… para evitar números mágicos. No reemplaza z-0..50 de Tailwind.
+      zIndex: {
+        base: "0",
+        raised: "10",
+        dropdown: "1000",
+        sticky: "1100",
+        header: "1200",
+        overlay: "1300",
+        modal: "1400",
+        popover: "1500",
+        toast: "1600",
+        tooltip: "1700",
+      },
     },
   },
   plugins: [],

package/dist/notifications/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/notifications/index.js

@@ -1 +0,0 @@
-export {};

package/dist/providers/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/providers/index.js

@@ -1,2 +0,0 @@
-export {};
-// Empty - all providers removed