@sincpro/mobile-ui 0.2.0 → 0.3.0

package/dist/views/ListViewV2.d.ts

@@ -1,5 +1,5 @@
 import { EVariantScreenHeader } from "../widgets/ScreenHeader";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
@@ -19,43 +19,43 @@ interface ListViewProps<T> {
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer, children, }: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
 declare function Header({ variant, children, }: {
     variant?: EVariantScreenHeader;
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 declare function HeaderActions({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function HeaderFilters({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 interface FilterChipProps {
     label: string;
     active?: boolean;
     onPress: () => void;
 }
-declare function FilterChip({ label, active, onPress }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+declare function FilterChip({ label, active, onPress }: FilterChipProps): React.JSX.Element;
 declare function FilterChips({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Content({ children, withMargin, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function ContentList({ children, contentWithMargin, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;
 declare function FloatingButton({ children }: {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 interface RowRootProps {
     children: ReactNode;
     onPress?: () => void;
@@ -64,45 +64,45 @@ interface RowRootProps {
     style?: StyleProp<ViewStyle>;
     backgroundColor?: string;
 }
-declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): import("react/jsx-runtime").JSX.Element;
+declare function RowRoot({ children, onPress, onLongPress, showDivider, style, backgroundColor, }: RowRootProps): React.JSX.Element;
 interface RowAvatarProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowAvatar({ children, style }: RowAvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function RowAvatar({ children, style }: RowAvatarProps): React.JSX.Element;
 interface RowContentProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowContent({ children, style }: RowContentProps): import("react/jsx-runtime").JSX.Element;
+declare function RowContent({ children, style }: RowContentProps): React.JSX.Element;
 interface RowTitleProps {
     children: ReactNode;
     badge?: ReactNode;
     rightComponent?: ReactNode;
     numberOfLines?: number;
 }
-declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): import("react/jsx-runtime").JSX.Element;
+declare function RowTitle({ children, badge, rightComponent, numberOfLines }: RowTitleProps): React.JSX.Element;
 interface RowSubtitleProps {
     children: ReactNode;
     className?: string;
 }
-declare function RowSubtitle({ children, className }: RowSubtitleProps): import("react/jsx-runtime").JSX.Element;
+declare function RowSubtitle({ children, className }: RowSubtitleProps): React.JSX.Element;
 interface RowFooterProps {
     left?: ReactNode;
     right?: ReactNode;
     children?: ReactNode;
 }
-declare function RowFooter({ left, right, children }: RowFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function RowFooter({ left, right, children }: RowFooterProps): React.JSX.Element;
 interface RowActionsProps {
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-declare function RowActions({ children, style }: RowActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function RowActions({ children, style }: RowActionsProps): React.JSX.Element;
 interface RowActionButtonProps {
     icon: ReactNode;
     onPress?: () => void;
 }
-declare function RowActionButton({ icon, onPress }: RowActionButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React.JSX.Element;
 export declare const ListViewV2: {
     Root: typeof ListViewRoot;
     Header: typeof Header & {

package/dist/views/ListViewV2.js

@@ -9,7 +9,7 @@ import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
 import { toRowItems } from "../views/types/IListView";
-import ScreenHeader from "../widgets/ScreenHeader";
+import ScreenHeader, { EVariantScreenHeader } from "../widgets/ScreenHeader";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
 function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, backgroundColor, withContainer = true, children, }) {
@@ -20,7 +20,7 @@ function ListViewRoot({ name, description, items, isLoading = false, hasError =
     // Propagate contentWithMargin to ContentList via context
     return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isLoading: isLoading, items: items, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ variant = "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */, children, }) {
+function Header({ variant = EVariantScreenHeader.ROUNDED_HEADER, children, }) {
     const { name, description, onBack } = useListView();
     return (_jsx(ScreenHeader, { onBack: onBack, subtitle: description ? description : `Seleccionar ${name}`, title: name, variant: variant, children: children }));
 }

package/dist/views/Wizard/Wizard.context.d.ts

@@ -22,5 +22,5 @@ export interface WizardProviderProps {
     isLoading?: boolean;
     loadingMessage?: string;
 }
-export declare function WizardProvider({ children, initialStep, steps, onComplete, onCancel, isLoading, loadingMessage, }: WizardProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function WizardProvider({ children, initialStep, steps, onComplete, onCancel, isLoading, loadingMessage, }: WizardProviderProps): import("react").JSX.Element;
 export declare function useWizard(): WizardContextValue;

package/dist/widgets/CircleButton.d.ts

@@ -1,5 +1,5 @@
 import { IconType } from "../utils/icon";
-import { ComponentType } from "react";
+import React, { ComponentType } from "react";
 interface CircleButtonProps {
     iconType?: IconType;
     size?: "sm" | "md" | "lg";
@@ -11,5 +11,9 @@ interface CircleButtonProps {
         color?: string;
     }>;
 }
-export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
+ * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
+ */
+export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): React.JSX.Element;
 export {};

package/dist/widgets/CircleButton.js

@@ -31,6 +31,10 @@ const SIZE_MAP = {
     md: { container: 60, icon: 30 },
     lg: { container: 80, icon: 40 },
 };
+/**
+ * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
+ * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
+ */
 export function CircleButton({ iconType = "ionicons", size = "md", color = theme.text.inverse, variant = "accent", className, customIcon, }) {
     const iconSize = SIZE_MAP[size].icon;
     return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Display.Icon, { color: color, customIcon: customIcon, size: iconSize, type: iconType }) }));

package/dist/widgets/GeoPermissionCard.d.ts

@@ -4,5 +4,5 @@ interface GeoPermissionCardProps {
     loading?: boolean;
     handleRequestPermission?: () => void;
 }
-declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react/jsx-runtime").JSX.Element;
+declare function GeoPermissionCard({ title, loading, handleRequestPermission, hasPermission, }: GeoPermissionCardProps): import("react").JSX.Element;
 export default GeoPermissionCard;

package/dist/widgets/HomeHeader.d.ts

@@ -7,5 +7,9 @@ interface HomeHeaderProps {
     readonly backButton?: boolean;
     readonly onBack?: () => void;
 }
+/**
+ * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.
+ * Kept for backwards compatibility.
+ */
 export declare const HomeHeader: React.FC<HomeHeaderProps>;
 export {};

package/dist/widgets/HomeHeader.js

@@ -3,6 +3,10 @@ import { Display, Typography } from "../index";
 import GradientContainer from "../layouts/GradientContainer";
 import { theme } from "../theme";
 import { TouchableOpacity, View } from "react-native";
+/**
+ * @deprecated Legacy style (gradient). For new top bars use `Navigation.AppBar`.
+ * Kept for backwards compatibility.
+ */
 export const HomeHeader = ({ title = "Distribución", logo, logoSource, backButton = false, onBack, }) => {
     const handleBackPress = onBack ?? (() => { });
     return (_jsx(GradientContainer, { className: "pt-10 pb-4 px-4", children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-text-inverse p-1.5 rounded", onPress: handleBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium", source: logoSource }), !!title && (_jsx(Typography.Text, { className: "text-text-inverse", variant: "h4", children: title }))] })] }) }));

package/dist/widgets/JSONViewer.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 declare const JsonPreview: ({ selectedJson }: {
     selectedJson: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default JsonPreview;

package/dist/widgets/JSONViewer.js

@@ -35,7 +35,7 @@ const JSON_COLORS = {
 const MAX_JSON_SIZE = 500_000; // 500KB límite
 const MAX_LINES = 500; // Máximo 500 líneas con colores
 function parseJsonToColoredLines(jsonString) {
-    // Protección 1: Verificar tamaño
+    // Guard 1: check size
     if (jsonString.length > MAX_JSON_SIZE) {
         return [
             {
@@ -47,7 +47,7 @@ function parseJsonToColoredLines(jsonString) {
         ];
     }
     const lines = jsonString.split("\n");
-    // Protección 2: Verificar cantidad de líneas
+    // Guard 2: check line count
     if (lines.length > MAX_LINES) {
         return [
             {
@@ -98,7 +98,7 @@ function parseJsonToColoredLines(jsonString) {
 }
 const JsonPreview = ({ selectedJson }) => {
     const [isProcessing, setIsProcessing] = useState(false);
-    // Protección 3: Formatear con try-catch robusto
+    // Guard 3: format with a robust try-catch
     const formattedJson = useMemo(() => {
         if (!selectedJson || selectedJson.trim() === "") {
             return "{}";
@@ -113,7 +113,7 @@ const JsonPreview = ({ selectedJson }) => {
             return selectedJson; // Mostrar original si falla
         }
     }, [selectedJson]);
-    // Protección 4: Colorear con control de procesamiento
+    // Guard 4: colorize with processing control
     const coloredLines = useMemo(() => {
         setIsProcessing(true);
         try {
@@ -125,11 +125,11 @@ const JsonPreview = ({ selectedJson }) => {
             return [{ text: formattedJson, color: "#333333" }];
         }
         finally {
-            // Pequeño delay para que el loading sea visible si es necesario
+            // Small delay so the loading state is visible if needed
             setTimeout(() => setIsProcessing(false), 50);
         }
     }, [formattedJson]);
-    // Protección 5: Mostrar loading mientras procesa JSONs grandes
+    // Guard 5: show loading while processing large JSON
     if (isProcessing && formattedJson.length > 50_000) {
         return (_jsxs(View, { className: "p-4 items-center justify-center min-h-[200px]", children: [_jsx(ThemedActivityIndicator, { size: "large" }), _jsx(Text, { className: "mt-2 text-text-secondary text-sm", children: "Procesando JSON..." })] }));
     }

package/dist/widgets/MenuCard.d.ts

@@ -9,5 +9,5 @@ interface MenuCardProps {
         color?: string;
     }>;
 }
-export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react").JSX.Element;
 export {};

package/dist/widgets/ScreenHeader.d.ts

@@ -1,5 +1,5 @@
 import { type ImageSourcePropType } from "react-native";
-export declare const enum EVariantScreenHeader {
+export declare enum EVariantScreenHeader {
     FLAT_HEADER = "FLAT_HEADER",
     ROUNDED_HEADER = "ROUNDED_HEADER",
     LOGO_WITH_BACK_BUTTON = "LOGO_WITH_BACK_BUTTON",
@@ -17,5 +17,9 @@ interface ScreenHeaderProps {
     withGradientContainer?: boolean;
     onBack?: () => void;
 }
-declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Legacy style (gradient variants). For new top bars use
+ * `Navigation.AppBar` (flat). Kept for backwards compatibility (used by FormViewV2/ListViewV2).
+ */
+declare function ScreenHeader({ variant, title, subtitle, logoSource, onBack, children, }: ScreenHeaderProps): import("react").JSX.Element | null;
 export default ScreenHeader;

package/dist/widgets/ScreenHeader.js

@@ -4,15 +4,26 @@ import { Navigation } from "../Navigation";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;
+export var EVariantScreenHeader;
+(function (EVariantScreenHeader) {
+    EVariantScreenHeader["FLAT_HEADER"] = "FLAT_HEADER";
+    EVariantScreenHeader["ROUNDED_HEADER"] = "ROUNDED_HEADER";
+    EVariantScreenHeader["LOGO_WITH_BACK_BUTTON"] = "LOGO_WITH_BACK_BUTTON";
+    EVariantScreenHeader["ONLY_LOGO"] = "ONLY_LOGO";
+})(EVariantScreenHeader || (EVariantScreenHeader = {}));
+/**
+ * @deprecated Legacy style (gradient variants). For new top bars use
+ * `Navigation.AppBar` (flat). Kept for backwards compatibility (used by FormViewV2/ListViewV2).
+ */
 function ScreenHeader({ variant, title = "Distribución", subtitle, logoSource, onBack, children, }) {
     switch (variant) {
-        case "FLAT_HEADER" /* EVariantScreenHeader.FLAT_HEADER */:
+        case EVariantScreenHeader.FLAT_HEADER:
             return (_jsxs(_Fragment, { children: [_jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: true }), _jsx(View, { children: children })] }));
-        case "ROUNDED_HEADER" /* EVariantScreenHeader.ROUNDED_HEADER */:
+        case EVariantScreenHeader.ROUNDED_HEADER:
             return (_jsx(GradientContainer, { className: "pt-0.5 shadow-lg shadow-black/70 rounded-b-[18px] pb-6", children: _jsx(HeaderToolbar, { flat: true, onBack: onBack, subtitle: subtitle, title: title, withBackground: false, children: children }) }));
-        case "LOGO_WITH_BACK_BUTTON" /* EVariantScreenHeader.LOGO_WITH_BACK_BUTTON */:
+        case EVariantScreenHeader.LOGO_WITH_BACK_BUTTON:
             return (_jsx(Header, { backButton: true, handleBackButton: onBack, logoSource: logoSource, title: "" }));
-        case "ONLY_LOGO" /* EVariantScreenHeader.ONLY_LOGO */:
+        case EVariantScreenHeader.ONLY_LOGO:
             return _jsx(Header, { logoSource: logoSource, title: title });
         default:
             return null;

package/dist/widgets/TimeZoneSelector.d.ts

@@ -3,5 +3,5 @@ interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;
 }
-export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeZoneSelector({ onSelect, timezone }: TimeZoneSelectorProps): import("react").JSX.Element;
 export {};

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -5,5 +5,5 @@ interface TimeZoneSelectorModalProps {
     onSelect: (tz: TimezoneLocale) => void;
     currentTimezone?: string | null;
 }
-declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react/jsx-runtime").JSX.Element;
+declare function TimeZoneSelectorModal({ visible, onClose, onSelect, currentTimezone, }: TimeZoneSelectorModalProps): import("react").JSX.Element;
 export { TimeZoneSelectorModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",
@@ -46,6 +48,7 @@
   "license": "MIT",
   "peerDependencies": {
     "@expo-google-fonts/montserrat": "*",
+    "@expo/ui": "*",
     "@expo/vector-icons": "*",
     "expo-checkbox": "*",
     "expo-clipboard": "*",
@@ -60,7 +63,14 @@
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-worklets": "*"
+    "react-native-worklets": "*",
+    "@react-native-community/slider": "*",
+    "@react-native-community/datetimepicker": "*"
+  },
+  "peerDependenciesMeta": {
+    "@expo/ui": {
+      "optional": true
+    }
   },
   "dependencies": {
     "big.js": "^7.0.1",
@@ -72,43 +82,46 @@
   "devDependencies": {
     "@expo-google-fonts/montserrat": "^0.4.2",
     "@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",
+    "@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",
+    "@expo/ui": "~56.0.18",
+    "@react-native-community/slider": "5.2.0"
   },
   "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