@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Navigation/index.d.ts

@@ -1,11 +1,42 @@
+import BottomNav from "../Navigation/Navigation.BottomNav";
+import CollapsingHeader from "../Navigation/Navigation.CollapsingHeader";
+import FloatingBar from "../Navigation/Navigation.FloatingBar";
 import HeaderToolbar from "../Navigation/Navigation.HeaderToolbar";
+import Menu from "../Navigation/Navigation.Menu";
 import RowItem from "../Navigation/Navigation.RowItem";
+import SearchBar from "../Navigation/Navigation.SearchBar";
+import SegmentedControl from "../Navigation/Navigation.SegmentedControl";
+import Steps from "../Navigation/Navigation.Steps";
 import TabIcon from "../Navigation/Navigation.TabIcon";
 export declare const Navigation: {
-    Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("../Navigation/Navigation.Header").HeaderProps) => import("react/jsx-runtime").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;
+    FloatingBar: typeof FloatingBar;
+    SearchBar: typeof SearchBar;
+    Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("../Navigation/Navigation.Header").HeaderProps) => import("react").JSX.Element;
     HeaderToolbar: typeof HeaderToolbar;
     TabItem: import("react").FC<import("../Navigation/Navigation.TabItem").TabIconProps>;
     TabIcon: typeof TabIcon;
     RowItem: typeof RowItem;
+    SegmentedControl: typeof SegmentedControl;
+    Tabs: (({ value, defaultValue, onValueChange, className, children }: import("../Navigation/Navigation.Tabs").TabsProps) => import("react").JSX.Element) & {
+        List: ({ children, className }: {
+            children: import("react").ReactNode;
+            className?: string;
+        }) => import("react").JSX.Element;
+        Trigger: ({ value, children }: {
+            value: string;
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element;
+        Content: ({ value, children }: {
+            value: string;
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element | null;
+    };
+    Menu: typeof Menu;
+    Steps: typeof Steps;
 };
 export default Navigation;

package/dist/Navigation/index.js

@@ -1,13 +1,31 @@
+import AppBar from "../Navigation/Navigation.AppBar";
+import BottomNav from "../Navigation/Navigation.BottomNav";
+import CollapsingHeader from "../Navigation/Navigation.CollapsingHeader";
+import FloatingBar from "../Navigation/Navigation.FloatingBar";
 import Header from "../Navigation/Navigation.Header";
 import HeaderToolbar from "../Navigation/Navigation.HeaderToolbar";
+import Menu from "../Navigation/Navigation.Menu";
 import RowItem from "../Navigation/Navigation.RowItem";
+import SearchBar from "../Navigation/Navigation.SearchBar";
+import SegmentedControl from "../Navigation/Navigation.SegmentedControl";
+import Steps from "../Navigation/Navigation.Steps";
 import TabIcon from "../Navigation/Navigation.TabIcon";
 import TabItem from "../Navigation/Navigation.TabItem";
+import Tabs from "../Navigation/Navigation.Tabs";
 export const Navigation = {
+    AppBar,
+    BottomNav,
+    CollapsingHeader,
+    FloatingBar,
+    SearchBar,
     Header,
     HeaderToolbar,
     TabItem,
     TabIcon,
     RowItem,
+    SegmentedControl,
+    Tabs,
+    Menu,
+    Steps,
 };
 export default Navigation;

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

@@ -1,4 +1,5 @@
 import { typographyVariants } from "../theme/typography";
+import type React from "react";
 import { type TextProps } from "react-native";
 /**
  * Typography.Text - Hybrid component (NativeWind + Style)
@@ -8,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;
@@ -22,6 +23,6 @@ interface AppTextProps extends TextProps {
     transform?: "none" | "uppercase" | "lowercase" | "capitalize";
     className?: string;
 }
-declare function AppText({ variant, color, bold, italic, underline, align, transform, semibold, style, className, children, ...props }: AppTextProps): import("react/jsx-runtime").JSX.Element;
+declare function AppText({ variant, color, bold, italic, underline, align, transform, semibold, style, className, children, ...props }: AppTextProps): React.JSX.Element;
 export default AppText;
 export { AppText };

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/branding.d.ts

@@ -0,0 +1,6 @@
+import { type ImageSourcePropType } from "react-native";
+export interface BrandingConfig {
+    logo?: ImageSourcePropType;
+}
+export declare function setBranding(config: BrandingConfig): void;
+export declare function getBrandingLogo(): ImageSourcePropType | undefined;

package/dist/branding.js

@@ -0,0 +1,7 @@
+let activeLogo;
+export function setBranding(config) {
+    activeLogo = config.logo;
+}
+export function getBrandingLogo() {
+    return activeLogo;
+}

package/dist/icons/ArrowDownIcon.d.ts

@@ -1,3 +1,4 @@
 import { CustomIconProps } from "../icons/props";
-declare function ArrowDownIcon({ size, color }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare function ArrowDownIcon({ size, color }: CustomIconProps): React.JSX.Element;
 export default ArrowDownIcon;

package/dist/icons/ArrowUpIcon.d.ts

@@ -1,3 +1,4 @@
 import { CustomIconProps } from "../icons/props";
-declare function ArrowUpIcon({ size, color }: CustomIconProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+declare function ArrowUpIcon({ size, color }: CustomIconProps): React.JSX.Element;
 export default ArrowUpIcon;

package/dist/icons/CreditIcon.d.ts

@@ -3,5 +3,5 @@ interface CreditIconProps {
     height?: number;
     color?: string;
 }
-declare function CreditIcon({ width, height, color }: CreditIconProps): import("react/jsx-runtime").JSX.Element;
+declare function CreditIcon({ width, height, color }: CreditIconProps): import("react").JSX.Element;
 export default CreditIcon;

package/dist/icons/OdooIcon.d.ts

@@ -2,5 +2,10 @@ interface OdooIconProps {
     size?: number;
     color?: string;
 }
-declare function OdooIcon({ size, color }: OdooIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @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/index.d.ts

@@ -5,6 +5,7 @@ export { Form } from "./Form";
 export { Navigation } from "./Navigation";
 export { Typography } from "./Typography";
 export { Box, Row, Stack } from "./primitives";
+export { type BrandingConfig, getBrandingLogo, setBranding, } from "./branding";
 export { cn, tv, type VariantProps } from "./theme/tw";
 export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography";
 export { default as Container } from "./layouts/Container";

package/dist/index.js

@@ -7,6 +7,8 @@ export { Navigation } from "./Navigation";
 export { Typography } from "./Typography";
 // Primitives (NativeWind-based - Layout utilities)
 export { Box, Row, Stack } from "./primitives";
+// Branding (logo del app, configurado una vez; Display.Logo lo usa como fallback)
+export { getBrandingLogo, setBranding, } from "./branding";
 // Theme
 export { cn, tv } from "./theme/tw";
 export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography";

package/dist/layouts/AuthContainer.d.ts

@@ -5,5 +5,5 @@ interface AuthContainerProps {
     onBackPress?: () => void;
     className?: string;
 }
-declare function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

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/layouts/Container.d.ts

@@ -4,6 +4,7 @@ import { Edge } from "react-native-safe-area-context";
 type ContainerProps = {
     children: ReactNode;
     style?: ViewStyle;
+    /** @deprecated Ignored under edge-to-edge (SDK 54+): the status bar is always translucent. */
     statusBarColor?: string;
     barStyle?: "light-content" | "dark-content";
     statusBarHidden?: boolean;

package/dist/layouts/Container.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { StatusBar } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-const Container = ({ children, style, statusBarColor = theme.primary, barStyle = "light-content", statusBarHidden = false, edges = ["top", "bottom", "left", "right"], className, }) => {
-    return (_jsxs(SafeAreaView, { className: cn("flex-1 bg-bg-page", className), edges: edges, style: style, children: [_jsx(StatusBar, { backgroundColor: statusBarColor, barStyle: barStyle, hidden: statusBarHidden, translucent: false }), children] }));
+const Container = ({ children, style, barStyle = "light-content", statusBarHidden = false, edges = ["top", "bottom", "left", "right"], className, }) => {
+    return (_jsxs(SafeAreaView, { className: cn("flex-1 bg-bg-page", className), edges: edges, style: style, children: [_jsx(StatusBar, { barStyle: barStyle, hidden: statusBarHidden }), children] }));
 };
 export default Container;

package/dist/layouts/GradientContainer.d.ts

@@ -4,5 +4,5 @@ interface GradientContainerProps {
     style?: object;
     className?: string;
 }
-declare const GradientContainer: ({ children, style, className }: GradientContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const GradientContainer: ({ children, style, className }: GradientContainerProps) => import("react").JSX.Element;
 export default GradientContainer;

package/dist/layouts/PlainLayout.d.ts

@@ -2,5 +2,5 @@ import { ReactNode } from "react";
 interface PlainLayoutProps {
     children?: ReactNode;
 }
-declare const PlainLayout: import("react").MemoExoticComponent<({ children }: PlainLayoutProps) => import("react/jsx-runtime").JSX.Element>;
+declare const PlainLayout: import("react").MemoExoticComponent<({ children }: PlainLayoutProps) => import("react").JSX.Element>;
 export default PlainLayout;

package/dist/layouts/ScrollContainer.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 type ScrollContainerProps = {
     children: ReactNode;
     contentContainerStyle?: object;
     className?: string;
 };
-declare function ScrollContainer({ children, contentContainerStyle, className, }: ScrollContainerProps): import("react/jsx-runtime").JSX.Element;
+declare function ScrollContainer({ children, contentContainerStyle, className, }: ScrollContainerProps): React.JSX.Element;
 export default ScrollContainer;

package/dist/layouts/ScrollContainer.js

@@ -3,6 +3,6 @@ import { cn } from "../theme/tw";
 import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 function ScrollContainer({ children, contentContainerStyle = {}, className, }) {
-    return (_jsxs(SafeAreaView, { className: cn("flex-1 bg-bg-card", className), children: [_jsx(StatusBar, { barStyle: "dark-content", translucent: false }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, className: "flex-1", children: _jsx(ScrollView, { contentContainerStyle: [{ flexGrow: 1, padding: 16 }, contentContainerStyle], keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "flex-1", children: children }) }) })] }));
+    return (_jsxs(SafeAreaView, { className: cn("flex-1 bg-bg-card", className), children: [_jsx(StatusBar, { barStyle: "dark-content" }), _jsx(KeyboardAvoidingView, { behavior: Platform.OS === "ios" ? "padding" : undefined, className: "flex-1", children: _jsx(ScrollView, { contentContainerStyle: [{ flexGrow: 1, padding: 16 }, contentContainerStyle], keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "flex-1", children: children }) }) })] }));
 }
 export default ScrollContainer;

package/dist/layouts/TabNavigatorLayout.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 interface TabNavigatorLayoutProps {
     className?: string;
     children?: ReactNode;
@@ -16,7 +16,7 @@ export interface TabProps {
 }
 declare function Tabs({ children: tabsChildren }: {
     children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare function Tab(_props: TabProps): null;
 type TabLayoutComponent = ((props: TabNavigatorLayoutProps) => ReactElement) & {
     Tabs: typeof Tabs;

package/dist/layouts/TabNavigatorLayout.js

@@ -30,6 +30,10 @@ function Tabs({ children: tabsChildren }) {
 function Tab(_props) {
     return null;
 }
+/**
+ * @deprecated Use `Navigation.BottomNav` (flat, modern) for the bar, and the core's
+ * router-aware layouts. Kept for backwards compatibility.
+ */
 function TabNavigatorLayoutComponent({ className, children, content, currentPath, onTabPress, persistentComponent, persistentRoutePath, }) {
     const tabs = [];
     Children.forEach(children, (child) => {

package/dist/primitives/AspectRatio.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type ViewProps } from "react-native";
+export interface AspectRatioProps extends ViewProps {
+    ratio?: number;
+    className?: string;
+    children?: ReactNode;
+}
+declare function AspectRatio({ ratio, className, style, children, ...rest }: AspectRatioProps): import("react").JSX.Element;
+export default AspectRatio;
+export { AspectRatio };

package/dist/primitives/AspectRatio.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+function AspectRatio({ ratio = 1, className, style, children, ...rest }) {
+    return (_jsx(View, { className: cn(className), style: [{ aspectRatio: ratio }, style], ...rest, children: children }));
+}
+export default AspectRatio;
+export { AspectRatio };

package/dist/primitives/Box.d.ts

@@ -2,6 +2,6 @@ import { ViewProps } from "react-native";
 interface BoxProps extends ViewProps {
     className?: string;
 }
-declare function Box({ className, style, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function Box({ className, style, ...props }: BoxProps): import("react").JSX.Element;
 export default Box;
 export { Box };

package/dist/primitives/Pressable.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type StyleProp, type TouchableOpacityProps, type ViewStyle } from "react-native";
+export interface PressableProps extends Omit<TouchableOpacityProps, "style" | "children"> {
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+}
+declare function Pressable({ className, disabled, hitSlop, activeOpacity, accessibilityRole, style, children, ...rest }: PressableProps): import("react").JSX.Element;
+export default Pressable;
+export { Pressable };

package/dist/primitives/Pressable.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw";
+import { TouchableOpacity, } from "react-native";
+function Pressable({ className, disabled = false, hitSlop = 8, activeOpacity = 0.7, accessibilityRole = "button", style, children, ...rest }) {
+    const isDisabled = !!disabled;
+    return (_jsx(TouchableOpacity, { accessibilityRole: accessibilityRole, accessibilityState: { disabled: isDisabled }, activeOpacity: activeOpacity, className: cn(isDisabled && "opacity-50", className), disabled: isDisabled, hitSlop: hitSlop, style: style, ...rest, children: children }));
+}
+export default Pressable;
+export { Pressable };

package/dist/primitives/Row.d.ts

@@ -6,6 +6,6 @@ interface RowProps extends ViewProps {
     wrap?: boolean;
     className?: string;
 }
-declare function Row({ spacing, align, justify, wrap, className, style, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare function Row({ spacing, align, justify, wrap, className, style, ...props }: RowProps): import("react").JSX.Element;
 export default Row;
 export { Row };

package/dist/primitives/Spacer.d.ts

@@ -0,0 +1,8 @@
+export interface SpacerProps {
+    size?: number;
+    horizontal?: boolean;
+    flex?: boolean;
+}
+declare function Spacer({ size, horizontal, flex }: SpacerProps): import("react").JSX.Element;
+export default Spacer;
+export { Spacer };

package/dist/primitives/Spacer.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { View } from "react-native";
+function Spacer({ size = 8, horizontal = false, flex = false }) {
+    if (flex)
+        return _jsx(View, { style: { flex: 1 } });
+    return _jsx(View, { style: horizontal ? { width: size } : { height: size } });
+}
+export default Spacer;
+export { Spacer };

package/dist/primitives/Stack.d.ts

@@ -4,6 +4,6 @@ interface StackProps extends ViewProps {
     align?: "start" | "center" | "end" | "stretch";
     className?: string;
 }
-declare function Stack({ spacing, align, className, style, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+declare function Stack({ spacing, align, className, style, ...props }: StackProps): import("react").JSX.Element;
 export default Stack;
 export { Stack };

package/dist/primitives/index.d.ts

@@ -1,3 +1,6 @@
+export { AspectRatio, type AspectRatioProps, } from "../primitives/AspectRatio";
 export { Box } from "../primitives/Box";
+export { Pressable, type PressableProps } from "../primitives/Pressable";
 export { Row } from "../primitives/Row";
+export { Spacer, type SpacerProps } from "../primitives/Spacer";
 export { Stack } from "../primitives/Stack";

package/dist/primitives/index.js

@@ -1,3 +1,6 @@
+export { AspectRatio, } from "../primitives/AspectRatio";
 export { Box } from "../primitives/Box";
+export { Pressable } from "../primitives/Pressable";
 export { Row } from "../primitives/Row";
+export { Spacer } from "../primitives/Spacer";
 export { Stack } from "../primitives/Stack";

package/dist/theme/active.d.ts

@@ -1,3 +1,5 @@
 import type { ThemeTokens } from "../theme/types";
 export declare function setActiveTheme(tokens: ThemeTokens): void;
 export declare function getActiveTheme(): ThemeTokens;
+export declare function subscribeTheme(listener: () => void): () => void;
+export declare function getThemeVersion(): number;

package/dist/theme/active.js

@@ -1,8 +1,21 @@
 import { DEFAULT_THEME } from "../theme/default";
 const activeTheme = { ...DEFAULT_THEME };
+const listeners = new Set();
+let version = 0;
 export function setActiveTheme(tokens) {
     Object.assign(activeTheme, tokens);
+    version += 1;
+    listeners.forEach((listener) => listener());
 }
 export function getActiveTheme() {
     return activeTheme;
 }
+export function subscribeTheme(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function getThemeVersion() {
+    return version;
+}

package/dist/theme/components/ThemedActivityIndicator.d.ts

@@ -17,5 +17,5 @@ import type { ActivityIndicatorProps } from "react-native";
 interface ThemedActivityIndicatorProps extends Omit<ActivityIndicatorProps, "color"> {
     color?: string;
 }
-export declare function ThemedActivityIndicator({ color, ...props }: ThemedActivityIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemedActivityIndicator({ color, ...props }: ThemedActivityIndicatorProps): import("react").JSX.Element;
 export {};

package/dist/theme/components/index.d.ts

@@ -3,7 +3,7 @@
  * THEMED COMPONENTS - Barrel Export
  * ============================================================================
  *
- * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Components that need access to theme tokens via hook.
  * Estos son el 1% de casos donde className no es suficiente.
  */
 export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";

package/dist/theme/components/index.js

@@ -3,7 +3,7 @@
  * THEMED COMPONENTS - Barrel Export
  * ============================================================================
  *
- * Componentes que necesitan acceso a tokens del theme vía hook.
+ * Components that need access to theme tokens via hook.
  * Estos son el 1% de casos donde className no es suficiente.
  */
 export { ThemedActivityIndicator } from "../../theme/components/ThemedActivityIndicator";

package/dist/theme/dark.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeTokens } from "../theme/types";
+/**
+ * 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

@@ -0,0 +1,85 @@
+/**
+ * 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: "#00F58C", // verde neón → primary action in dark (border, link, focus indicator)
+    secondary: "#6B6963",
+    accent: "#00F58C",
+    bg: {
+        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: "#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: "#FFFFFF",
+        secondary: "#9A9A9A",
+        tertiary: "#7D7D7D",
+        inverse: "#0B0B0B",
+        disabled: "#4A4A4A",
+    },
+    border: {
+        default: "#262626",
+        light: "#1E1E1E",
+        strong: "#3A3A3A",
+        focus: "#00F58C",
+    },
+    success: "#00C357",
+    warning: "#FFB020",
+    danger: "#FF4D1F",
+    info: "#5B8DEF",
+    successLight: "#0D2B1A",
+    warningLight: "#2B1E04",
+    dangerLight: "#2B0A04",
+    infoLight: "#0A143B",
+    ring: "#00F58C",
+    input: "#262626",
+    gradient: {
+        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.4,
+            shadowRadius: 3,
+            elevation: 2,
+        },
+        md: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.55,
+            shadowRadius: 8,
+            elevation: 4,
+        },
+        lg: {
+            shadowColor: "#000000",
+            shadowOffset: { width: 0, height: 10 },
+            shadowOpacity: 0.65,
+            shadowRadius: 18,
+            elevation: 7,
+        },
+    },
+};