@sincpro/mobile-ui 0.7.1 → 1.0.1

package/dist/widgets/PromoBanner.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 function BannerCard({ item }) {
     const theme = useTheme();

package/dist/widgets/PromoModal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**
@@ -25,7 +25,7 @@ export function PromoModal({ visible, onDismiss, title, body, icon: Icon, header
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const accent = accentColor ?? theme.accent;
-    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
+    return (_jsxs(Modal, { animationType: "fade", onRequestClose: onDismiss, presentationStyle: "overFullScreen", statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
                         flex: 1,
                         backgroundColor: "rgba(0,0,0,0.55)",
                         alignItems: "center",

package/dist/widgets/QuickActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 /**
  * Horizontal scrollable row of small icon+label shortcuts ("Acciones Rápidas").

package/dist/widgets/ScreenHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientContainer from "../layouts/GradientContainer";
-import { Navigation } from "../Navigation";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { Navigation } from "../Navigation/index.js";
 import { View } from "react-native";
 const Header = Navigation.Header;
 const HeaderToolbar = Navigation.HeaderToolbar;

package/dist/widgets/TimeZoneSelector.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorProps {
     onSelect?: (tz: TimezoneLocale) => void;
     timezone?: string | null;

package/dist/widgets/TimeZoneSelector.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display, Form } from "../index";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { TimeZoneSelectorModal } from "../widgets/TimeZoneSelectorModal";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/useTheme.js";
+import { Typography } from "../Typography/index.js";
+import { TimeZoneSelectorModal } from "./TimeZoneSelectorModal.js";
 import { useState } from "react";
 import { View } from "react-native";
 /**

package/dist/widgets/TimeZoneSelectorModal.d.ts

@@ -1,4 +1,4 @@
-import { TimezoneLocale } from "../utils/timezone";
+import { TimezoneLocale } from "../utils/timezone.js";
 interface TimeZoneSelectorModalProps {
     visible: boolean;
     onClose: () => void;

package/dist/widgets/TimeZoneSelectorModal.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { BottomSheet } from "../Dialog/BottomSheet";
-import { Display, Form } from "../index";
-import { theme } from "../theme";
-import { Typography } from "../Typography";
+import { BottomSheet } from "../Dialog/BottomSheet/index.js";
+import { Display, Form } from "../index.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { useMemo, useState } from "react";
 import { FlatList, TextInput, TouchableOpacity, View } from "react-native";
 const TIMEZONES_LOCALES = {
@@ -57,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-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" }) }))] })] }));
+    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, selectionColor: theme.primary, underlineColorAndroid: "transparent", 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/dist/widgets/index.d.ts

@@ -1,17 +1,17 @@
-export { CircleButton } from "../widgets/CircleButton";
-export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
-export { HomeHeader } from "../widgets/HomeHeader";
-export { MenuCard } from "../widgets/MenuCard";
-export type { MenuGridItem, MenuGridProps } from "../widgets/MenuGrid";
+export { CircleButton } from "./CircleButton.js";
+export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
+export { HomeHeader } from "./HomeHeader.js";
+export { MenuCard } from "./MenuCard.js";
+export type { MenuGridItem, MenuGridProps } from "./MenuGrid.js";
 /** @deprecated Renamed to `MenuGridItem`. */
-export type { MenuGridItem as MenuItem } from "../widgets/MenuGrid";
-export { MenuGrid } from "../widgets/MenuGrid";
-export type { MenuSectionProps } from "../widgets/MenuSection";
-export { MenuSection } from "../widgets/MenuSection";
-export type { PromoBannerItem, PromoBannerProps, } from "../widgets/PromoBanner";
-export { PromoBanner } from "../widgets/PromoBanner";
-export type { PromoModalProps } from "../widgets/PromoModal";
-export { PromoModal } from "../widgets/PromoModal";
-export type { QuickActionItem, QuickActionsProps, } from "../widgets/QuickActions";
-export { QuickActions } from "../widgets/QuickActions";
-export { TimeZoneSelector } from "../widgets/TimeZoneSelector";
+export type { MenuGridItem as MenuItem } from "./MenuGrid.js";
+export { MenuGrid } from "./MenuGrid.js";
+export type { MenuSectionProps } from "./MenuSection.js";
+export { MenuSection } from "./MenuSection.js";
+export type { PromoBannerItem, PromoBannerProps, } from "./PromoBanner.js";
+export { PromoBanner } from "./PromoBanner.js";
+export type { PromoModalProps } from "./PromoModal.js";
+export { PromoModal } from "./PromoModal.js";
+export type { QuickActionItem, QuickActionsProps, } from "./QuickActions.js";
+export { QuickActions } from "./QuickActions.js";
+export { TimeZoneSelector } from "./TimeZoneSelector.js";

package/dist/widgets/index.js

@@ -1,10 +1,10 @@
-export { CircleButton } from "../widgets/CircleButton";
-export { default as GeoPermissionCard } from "../widgets/GeoPermissionCard";
-export { HomeHeader } from "../widgets/HomeHeader";
-export { MenuCard } from "../widgets/MenuCard";
-export { MenuGrid } from "../widgets/MenuGrid";
-export { MenuSection } from "../widgets/MenuSection";
-export { PromoBanner } from "../widgets/PromoBanner";
-export { PromoModal } from "../widgets/PromoModal";
-export { QuickActions } from "../widgets/QuickActions";
-export { TimeZoneSelector } from "../widgets/TimeZoneSelector";
+export { CircleButton } from "./CircleButton.js";
+export { default as GeoPermissionCard } from "./GeoPermissionCard.js";
+export { HomeHeader } from "./HomeHeader.js";
+export { MenuCard } from "./MenuCard.js";
+export { MenuGrid } from "./MenuGrid.js";
+export { MenuSection } from "./MenuSection.js";
+export { PromoBanner } from "./PromoBanner.js";
+export { PromoModal } from "./PromoModal.js";
+export { QuickActions } from "./QuickActions.js";
+export { TimeZoneSelector } from "./TimeZoneSelector.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.7.1",
+  "version": "1.0.1",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",
@@ -14,6 +14,7 @@
   ],
   "exports": {
     ".": "./dist/index.js",
+    "./branding": "./dist/branding.js",
     "./theme": "./dist/theme/index.js",
     "./Dialog": "./dist/Dialog/index.js",
     "./Dialog/BottomSheet": "./dist/Dialog/BottomSheet/index.js",
@@ -47,27 +48,30 @@
   "repository": "https://github.com/Sincpro-SRL/sincpro_mobile_ui",
   "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
   "license": "MIT",
+  "engines": {
+    "node": ">=26"
+  },
   "peerDependencies": {
-    "@expo-google-fonts/fira-code": "*",
-    "@expo-google-fonts/inter": "*",
+    "@expo-google-fonts/ibm-plex-mono": ">=0.4",
+    "@expo-google-fonts/ibm-plex-sans": ">=0.4",
     "@expo/ui": "*",
-    "@expo/vector-icons": "*",
-    "@react-native-community/datetimepicker": "*",
-    "@react-native-community/slider": "*",
-    "expo-checkbox": "*",
-    "expo-clipboard": "*",
-    "expo-linear-gradient": "*",
-    "expo-localization": "*",
-    "nativewind": ">=4",
-    "react": "*",
+    "@expo/vector-icons": ">=15.0.2",
+    "@react-native-community/datetimepicker": ">=9.2",
+    "@react-native-community/slider": ">=5.2",
+    "expo-checkbox": ">=58.0.0",
+    "expo-clipboard": ">=58.0.0",
+    "expo-linear-gradient": ">=58.0.0",
+    "expo-localization": ">=58.0.0",
+    "nativewind": ">=4.2.7",
+    "react": ">=19.3",
     "react-hook-form": ">=7",
-    "react-native": "*",
-    "react-native-currency-input": "*",
-    "react-native-keyboard-controller": "*",
-    "react-native-reanimated": "*",
-    "react-native-safe-area-context": "*",
-    "react-native-svg": "*",
-    "react-native-worklets": "*"
+    "react-native": ">=0.88",
+    "react-native-currency-input": ">=1.1",
+    "react-native-keyboard-controller": ">=1.22",
+    "react-native-reanimated": ">=4.7",
+    "react-native-safe-area-context": ">=5.11",
+    "react-native-svg": ">=15.16",
+    "react-native-worklets": ">=0.13"
   },
   "peerDependenciesMeta": {
     "@expo/ui": {
@@ -77,54 +81,56 @@
   "dependencies": {
     "big.js": "^7.0.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.21",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2"
   },
   "devDependencies": {
-    "@expo-google-fonts/fira-code": "^0.4.1",
-    "@expo-google-fonts/inter": "^0.4.2",
-    "@expo/ui": "~56.0.18",
+    "@expo-google-fonts/ibm-plex-mono": "^0.4.1",
+    "@expo-google-fonts/ibm-plex-sans": "^0.4.1",
+    "@expo/ui": "~58.0.27",
     "@expo/vector-icons": "^15.0.3",
     "@gorhom/bottom-sheet": "^5",
-    "@react-native-async-storage/async-storage": "^2",
-    "@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",
+    "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/datetimepicker": "9.2.1",
+    "@react-native-community/slider": "5.2.1",
+    "@storybook/addon-ondevice-actions": "10.7.1",
+    "@storybook/addon-ondevice-controls": "10.7.1",
+    "@storybook/react-native": "10.7.1",
     "@types/big.js": "^6.2.2",
-    "@types/react": "~19.2.14",
+    "@types/node": "^26.6.6",
+    "@types/react": "~19.3.0",
     "babel-plugin-module-resolver": "^5.0.3",
     "eslint": "^9.35.0",
-    "eslint-config-expo": "~56.0.4",
+    "eslint-config-expo": "~58.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": "^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",
+    "expo": "~58.0.23",
+    "expo-checkbox": "~58.0.2",
+    "expo-clipboard": "~58.0.4",
+    "expo-font": "~58.0.11",
+    "expo-linear-gradient": "~58.0.3",
+    "expo-localization": "~58.0.5",
+    "expo-status-bar": "~58.0.4",
+    "nativewind": "4.2.7",
     "patch-package": "^8.0.1",
-    "prettier": "^3.6.2",
-    "react": "19.2.3",
+    "prettier": "^3.9.8",
+    "react": "19.3.0",
     "react-hook-form": "^7.62.0",
-    "react-native": "0.85.3",
+    "react-native": "0.88.1",
     "react-native-currency-input": "^1.1.1",
-    "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",
+    "react-native-gesture-handler": "~3.3.0",
+    "react-native-keyboard-controller": "1.22.7",
+    "react-native-reanimated": "4.7.1",
+    "react-native-safe-area-context": "~5.11.1",
+    "react-native-svg": "15.16.0",
+    "react-native-worklets": "0.13.0",
+    "storybook": "10.6.6",
+    "tailwindcss": "3.4.19",
     "tsc-alias": "^1.8.17",
+    "tsx": "^4",
     "typescript": "~6.0.3"
   },
   "scripts": {

package/tailwind.preset.js

@@ -34,6 +34,9 @@ module.exports = {
           accent: "rgb(var(--bg-accent) / <alpha-value>)",
           hover: "rgb(var(--bg-hover) / <alpha-value>)",
           disabled: "rgb(var(--bg-disabled) / <alpha-value>)",
+          "container-lowest": "rgb(var(--bg-container-lowest) / <alpha-value>)",
+          container: "rgb(var(--bg-container) / <alpha-value>)",
+          "container-high": "rgb(var(--bg-container-high) / <alpha-value>)",
         },
         text: {
           primary: "rgb(var(--text-primary) / <alpha-value>)",
@@ -70,6 +73,22 @@ module.exports = {
         "warning-light": "rgb(var(--warning-light) / <alpha-value>)",
         "danger-light": "rgb(var(--danger-light) / <alpha-value>)",
         "info-light": "rgb(var(--info-light) / <alpha-value>)",
+        container: {
+          primary: "rgb(var(--container-primary) / <alpha-value>)",
+          "on-primary": "rgb(var(--container-on-primary) / <alpha-value>)",
+          secondary: "rgb(var(--container-secondary) / <alpha-value>)",
+          "on-secondary": "rgb(var(--container-on-secondary) / <alpha-value>)",
+          accent: "rgb(var(--container-accent) / <alpha-value>)",
+          "on-accent": "rgb(var(--container-on-accent) / <alpha-value>)",
+          success: "rgb(var(--container-success) / <alpha-value>)",
+          "on-success": "rgb(var(--container-on-success) / <alpha-value>)",
+          warning: "rgb(var(--container-warning) / <alpha-value>)",
+          "on-warning": "rgb(var(--container-on-warning) / <alpha-value>)",
+          danger: "rgb(var(--container-danger) / <alpha-value>)",
+          "on-danger": "rgb(var(--container-on-danger) / <alpha-value>)",
+          info: "rgb(var(--container-info) / <alpha-value>)",
+          "on-info": "rgb(var(--container-on-info) / <alpha-value>)",
+        },
         ring: "rgb(var(--ring) / <alpha-value>)",
         input: "rgb(var(--input) / <alpha-value>)",
       },

package/dist/icons/icon_getters.d.ts

@@ -1,6 +0,0 @@
-import type React from "react";
-export type IconLabel = {
-    icon: React.ComponentType<any>;
-    label: string;
-};
-export declare function getIcon(name?: string): IconLabel;

package/dist/icons/icon_getters.js

@@ -1,23 +0,0 @@
-import ArrangeCircleIcon from "../icons/ArrangeCircle";
-import CardIcon from "../icons/CardIcon";
-import CreditIcon from "../icons/CreditIcon";
-import MoneyReceiveIcon from "../icons/MoneyReceiveIcon";
-import SinpeIcon from "../icons/SinpeIcon";
-const paymentMethodMap = [
-    { prefix: "créd", icon: CreditIcon, label: "Crédito" },
-    { prefix: "cred", icon: CreditIcon, label: "Crédito" },
-    { prefix: "tar", icon: CardIcon, label: "Tarjeta" },
-    { prefix: "trans", icon: ArrangeCircleIcon, label: "Transferencia" },
-    { prefix: "ef", icon: MoneyReceiveIcon, label: "Efectivo" },
-    { prefix: "sinpe", icon: SinpeIcon, label: "Sinpe Móvil" },
-    { prefix: "ban", icon: ArrangeCircleIcon, label: "Banco" },
-];
-export function getIcon(name) {
-    if (!name)
-        return { icon: CardIcon, label: "Otro" };
-    const cleaned = name.trim().toLowerCase();
-    const match = paymentMethodMap.find((m) => cleaned.startsWith(m.prefix));
-    if (match)
-        return { icon: match.icon, label: match.label };
-    return { icon: CardIcon, label: "Otro" };
-}