@sincpro/mobile-ui 0.3.0 → 0.4.1

package/dist/Navigation/Navigation.SearchBar.js

@@ -4,13 +4,19 @@ import Pressable from "../primitives/Pressable";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
+import { useState } from "react";
 import { TextInput, View } from "react-native";
 /**
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
 function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, }) {
-    const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full bg-bg-muted px-4", className), style: { height: 44 }, children: [_jsx(Icon, { color: theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onChangeText: onChangeText, onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary text-sm", numberOfLines: 1, children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: "Limpiar", hitSlop: 8, onPress: () => {
+    const [focused, setFocused] = useState(false);
+    const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full px-4", focused ? "bg-bg-card" : "bg-bg-muted", className), style: {
+            height: 44,
+            borderWidth: 1,
+            borderColor: focused ? theme.border.focus : "transparent",
+        }, children: [_jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary text-sm", numberOfLines: 1, children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: "Limpiar", hitSlop: 8, onPress: () => {
                     onChangeText("");
                     onClear?.();
                 }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));

package/dist/Navigation/Navigation.TabIcon.d.ts

@@ -10,5 +10,9 @@ interface TabIconProps {
     name?: any;
     className?: string;
 }
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). Use `Navigation.BottomNav` (single source
+ * of truth for the bottom tab bar). Kept for backwards compatibility; removed in the next major.
+ */
 declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react").JSX.Element;
 export default TabIcon;

package/dist/Navigation/Navigation.TabIcon.js

@@ -3,6 +3,10 @@ import { Display } from "../Display";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
 const Icon = Display.Icon;
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). Use `Navigation.BottomNav` (single source
+ * of truth for the bottom tab bar). Kept for backwards compatibility; removed in the next major.
+ */
 function TabIcon({ focused, size = 24, customIcon, type = "custom", name, className, }) {
     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 }) }));
 }

package/dist/Navigation/Navigation.TabItem.d.ts

@@ -10,5 +10,10 @@ export interface TabIconProps {
     name?: any;
     className?: string;
 }
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
+ * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
+ * compatibility; removed in the next major.
+ */
 declare const TabIcon: FC<TabIconProps>;
 export default TabIcon;

package/dist/Navigation/Navigation.TabItem.js

@@ -2,6 +2,11 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
+ * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
+ * compatibility; removed in the next major.
+ */
 const TabIcon = ({ focused, size = 24, customIcon, type = "custom", name, className, }) => {
     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(Display.Icon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: customIcon, name: name, size: size, type: type }) }));
 };

package/dist/Navigation/index.d.ts

@@ -9,8 +9,8 @@ import SegmentedControl from "../Navigation/Navigation.SegmentedControl";
 import Steps from "../Navigation/Navigation.Steps";
 import TabIcon from "../Navigation/Navigation.TabIcon";
 export declare const Navigation: {
-    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, border, safeArea, className, testID, }: import("../Navigation/Navigation.AppBar").AppBarProps) => import("react").JSX.Element) & {
-        Action: ({ icon, onPress, badge, accessibilityLabel, tone, testID, }: import("../Navigation/Navigation.AppBar").AppBarActionProps) => import("react").JSX.Element;
+    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, className, testID, }: import("../Navigation/Navigation.AppBar").AppBarProps) => import("react").JSX.Element) & {
+        Action: ({ icon, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("../Navigation/Navigation.AppBar").AppBarActionProps) => import("react").JSX.Element;
     };
     BottomNav: typeof BottomNav;
     CollapsingHeader: typeof CollapsingHeader;

package/dist/Typography/Typography.Text.d.ts

@@ -9,7 +9,7 @@ import { type TextProps } from "react-native";
  *
  * Reason: Custom fonts (Montserrat) not in Tailwind, complex typography system
  *
- * @deprecated color prop - Use className instead: className="text-primary" or className="text-gray-600"
+ * @deprecated color prop - Use className instead: className="text-primary" or className="text-text-secondary"
  */
 interface AppTextProps extends TextProps {
     variant?: keyof typeof typographyVariants;

package/dist/Typography/Typography.Text.js

@@ -1,18 +1,28 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw";
-import { fontFamilies, Typography, } from "../theme/typography";
+import { fontFamilies, Typography, variantFontRole, } from "../theme/typography";
 import { Text } from "react-native";
 function AppText({ variant = "body", color, bold = false, italic = false, underline = false, align = "left", transform = "none", semibold = false, style, className, children, ...props }) {
     const baseStyle = Typography.variants[variant];
     const textClassName = cn("text-text-primary", align === "center" && "text-center", align === "right" && "text-right", align === "justify" && "text-justify", transform === "uppercase" && "uppercase", transform === "lowercase" && "lowercase", transform === "capitalize" && "capitalize", underline && "underline", italic && "italic", className);
+    // Resolve the family LIVE from the configurable registry by the variant's role, so
+    // `configureFonts(...)` (app/Storybook) takes effect. Falls back to the variant's baked
+    // family if a role is somehow missing.
+    const variantFamily = fontFamilies[variantFontRole[variant]] ?? baseStyle.fontFamily;
+    // `bold`/`semibold` map to the Inter weights — but NOT when the active family is a branded
+    // face (a configured title face, or Fira Code mono): those carry their own weight, so
+    // forcing Inter would erase the typeface. Keep the variant's family for those.
+    const isBrandedFace = typeof variantFamily === "string" && !variantFamily.startsWith("Inter_");
     const textStyle = {
         ...baseStyle,
         ...(color ? { color } : {}),
-        fontFamily: bold
-            ? fontFamilies.extraBold
-            : semibold
-                ? fontFamilies.semiBold
-                : baseStyle.fontFamily,
+        fontFamily: isBrandedFace
+            ? variantFamily
+            : bold
+                ? fontFamilies.extraBold
+                : semibold
+                    ? fontFamilies.semiBold
+                    : variantFamily,
         ...(Array.isArray(style) ? Object.assign({}, ...style) : style),
     };
     return (_jsx(Text, { className: textClassName, style: textStyle, ...props, children: children }));

package/dist/icons/OdooIcon.d.ts

@@ -2,5 +2,10 @@ interface OdooIconProps {
     size?: number;
     color?: string;
 }
+/**
+ * @deprecated Brand-coupled (Odoo logo); relocated to the Odoo integration package. Import
+ * from `@sincpro/mobile-odoo/ui/components/atoms` instead. Kept here for backwards
+ * compatibility and removed in the next major.
+ */
 declare function OdooIcon({ size, color }: OdooIconProps): import("react").JSX.Element;
 export default OdooIcon;

package/dist/icons/OdooIcon.js

@@ -1,5 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Svg, { Path } from "react-native-svg";
+/**
+ * @deprecated Brand-coupled (Odoo logo); relocated to the Odoo integration package. Import
+ * from `@sincpro/mobile-odoo/ui/components/atoms` instead. Kept here for backwards
+ * compatibility and removed in the next major.
+ */
 function OdooIcon({ size = 100, color = "#ffffff" }) {
     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 })] }));
 }

package/dist/icons/PrinterIcon.d.ts

@@ -1,4 +1,9 @@
 import { CustomIconProps } from "../icons/props";
 import React from "react";
+/**
+ * @deprecated Device-coupled (printer hardware); relocated to the core. Import from
+ * `@sincpro/mobile/ui/components/atoms` instead. Kept here for backwards compatibility
+ * and removed in the next major.
+ */
 declare const PrinterIcon: React.FC<CustomIconProps>;
 export default PrinterIcon;

package/dist/icons/PrinterIcon.js

@@ -1,4 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Svg, { Path, Rect } from "react-native-svg";
+/**
+ * @deprecated Device-coupled (printer hardware); relocated to the core. Import from
+ * `@sincpro/mobile/ui/components/atoms` instead. Kept here for backwards compatibility
+ * and removed in the next major.
+ */
 const PrinterIcon = ({ size = 24, color = "#000000" }) => (_jsxs(Svg, { fill: "none", height: size, viewBox: "0 0 24 24", width: size, children: [_jsx(Path, { d: "M6 9V2H18V9", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx(Rect, { height: "8", rx: "1", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", width: "16", x: "4", y: "9" }), _jsx(Path, { d: "M6 18H4C3.44772 18 3 17.5523 3 17V10C3 9.44772 3.44772 9 4 9H20C20.5523 9 21 9.44772 21 10V17C21 17.5523 20.5523 18 20 18H18", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }), _jsx(Rect, { height: "6", stroke: color, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", width: "12", x: "6", y: "14" })] }));
 export default PrinterIcon;

package/dist/layouts/AuthContainer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
-import GradientContainer from "../layouts/GradientContainer";
+import GradientSurface from "../Display/Display.GradientSurface";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Dimensions, Keyboard, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
@@ -8,6 +8,6 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
 function AuthContainer({ header, children, onBackPress, className }) {
     const screenHeight = Dimensions.get("window").height;
-    return (_jsx(GradientContainer, { className: cn("flex-1", className), children: _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "p-4", children: children }) }) })] }) }) }));
+    return (_jsx(GradientSurface, { className: cn("flex-1", className), preset: "night-green", radius: "none", style: { flex: 1 }, children: _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "p-4", children: children }) }) })] }) }) }));
 }
 export default AuthContainer;

package/dist/theme/dark.d.ts

@@ -1,7 +1,7 @@
 import type { ThemeTokens } from "../theme/types";
 /**
- * Default dark theme (starting point — adjustable per app via createTheme).
- * Dark surfaces (slate-900/800/700), light text, brand accents preserved
- * and slightly more vivid for contrast on a dark background.
+ * SINCPRO brand-dark theme.
+ * Identity: black (#0B0B0B) surfaces + neon-green (#00F58C) as primary CTA / accent.
+ * Border/text tones shift to near-black warm neutrals (not blue-slate).
  */
 export declare const DEFAULT_DARK_THEME: ThemeTokens;

package/dist/theme/dark.js

@@ -1,84 +1,85 @@
 /**
- * Default dark theme (starting point — adjustable per app via createTheme).
- * Dark surfaces (slate-900/800/700), light text, brand accents preserved
- * and slightly more vivid for contrast on a dark background.
+ * SINCPRO brand-dark theme.
+ * Identity: black (#0B0B0B) surfaces + neon-green (#00F58C) as primary CTA / accent.
+ * Border/text tones shift to near-black warm neutrals (not blue-slate).
  */
 export const DEFAULT_DARK_THEME = {
     name: "dark",
-    primary: "#3B82F6",
-    secondary: "#94A3B8",
-    accent: "#FBBF24",
+    primary: "#00F58C", // verde neón → primary action in dark (border, link, focus indicator)
+    secondary: "#6B6963",
+    accent: "#00F58C",
     bg: {
-        page: "#0F172A",
-        card: "#1E293B",
-        popover: "#1E293B",
-        muted: "#334155",
-        accent: "#1E3A8A",
-        hover: "#334155",
-        disabled: "#1E293B",
+        page: "#0B0B0B",
+        card: "#161616",
+        popover: "#161616",
+        muted: "#1E1E1E",
+        accent: "#0D2B1F", // dark-green tint for selected/active rows
+        hover: "#262626",
+        disabled: "#161616",
+        inverse: "#0B0B0B",
     },
     text: {
-        primary: "#F1F5F9",
-        secondary: "#CBD5E1",
-        tertiary: "#64748B",
-        muted: "#94A3B8",
-        accent: "#93C5FD",
-        inverse: "#0F172A",
-        disabled: "#475569",
-        onPrimary: "#FFFFFF",
-        onSecondary: "#0F172A",
-        onAccent: "#0F172A",
+        primary: "#FFFFFF",
+        secondary: "#B0B0B0",
+        tertiary: "#7D7D7D",
+        muted: "#9D9D9D",
+        accent: "#00F58C",
+        inverse: "#0B0B0B",
+        disabled: "#4A4A4A",
+        onPrimary: "#06170E", // texto sobre verde neón: oscuro para contraste
+        onSecondary: "#0B0B0B",
+        onAccent: "#06170E",
         onDanger: "#FFFFFF",
         onSuccess: "#FFFFFF",
     },
     icon: {
-        primary: "#F1F5F9",
-        secondary: "#94A3B8",
-        tertiary: "#64748B",
-        inverse: "#0F172A",
-        disabled: "#475569",
+        primary: "#FFFFFF",
+        secondary: "#9A9A9A",
+        tertiary: "#7D7D7D",
+        inverse: "#0B0B0B",
+        disabled: "#4A4A4A",
     },
     border: {
-        default: "#334155",
-        light: "#1E293B",
-        strong: "#475569",
-        focus: "#3B82F6",
+        default: "#262626",
+        light: "#1E1E1E",
+        strong: "#3A3A3A",
+        focus: "#00F58C",
     },
-    success: "#22C55E",
-    warning: "#FBBF24",
-    danger: "#EF4444",
-    info: "#3B82F6",
-    successLight: "#14532D",
-    warningLight: "#78350F",
-    dangerLight: "#7F1D1D",
-    infoLight: "#1E3A8A",
-    ring: "#3B82F6",
-    input: "#334155",
+    success: "#00C357",
+    warning: "#FFB020",
+    danger: "#FF4D1F",
+    info: "#5B8DEF",
+    successLight: "#0D2B1A",
+    warningLight: "#2B1E04",
+    dangerLight: "#2B0A04",
+    infoLight: "#0A143B",
+    ring: "#00F58C",
+    input: "#262626",
     gradient: {
-        primary: ["#3B82F6", "#1E40AF"],
-        accent: ["#FBBF24", "#D97706"],
+        primary: ["#22E584", "#00F58C"], // verde gradient → primary btn en dark = CTA verde
+        accent: ["#22E584", "#00F58C"],
     },
     shadow: {
         sm: {
             shadowColor: "#000000",
             shadowOffset: { width: 0, height: 1 },
-            shadowOpacity: 0.2,
-            shadowRadius: 2,
-            elevation: 1,
+            shadowOpacity: 0.4,
+            shadowRadius: 3,
+            elevation: 2,
         },
         md: {
             shadowColor: "#000000",
             shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.3,
-            shadowRadius: 6,
-            elevation: 3,
+            shadowOpacity: 0.55,
+            shadowRadius: 8,
+            elevation: 4,
         },
         lg: {
             shadowColor: "#000000",
             shadowOffset: { width: 0, height: 10 },
-            shadowOpacity: 0.4,
-            shadowRadius: 15,
-            elevation: 5,
+            shadowOpacity: 0.65,
+            shadowRadius: 18,
+            elevation: 7,
         },
     },
 };

package/dist/theme/default.js

@@ -11,6 +11,7 @@ export const DEFAULT_THEME = {
         accent: "#EFF6FF",
         hover: "#F3F4F6",
         disabled: "#F3F4F6",
+        inverse: "#0E1714",
     },
     text: {
         primary: "#0F172A",

package/dist/theme/index.d.ts

@@ -6,4 +6,5 @@ export { DEFAULT_THEME } from "../theme/default";
 export { type DeepPartial, defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";
 export type { ShadowStyle, ThemeTokens } from "../theme/types";
+export { configureFonts, fontFamilies, type FontRole, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
 export { useTheme } from "../theme/useTheme";

package/dist/theme/index.js

@@ -5,4 +5,5 @@ export { DEFAULT_DARK_THEME } from "../theme/dark";
 export { DEFAULT_THEME } from "../theme/default";
 export { defineTheme, extendTheme, mergeTheme, } from "../theme/define";
 export { theme } from "../theme/theme";
+export { configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "../theme/typography";
 export { useTheme } from "../theme/useTheme";

package/dist/theme/types.d.ts

@@ -34,6 +34,7 @@ export interface ThemeTokens {
         accent: string;
         hover: string;
         disabled: string;
+        inverse?: string;
     };
     /** Text */
     text: {