@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/layouts/AuthContainer.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import GradientSurface from "../Display/Display.GradientSurface";
-import { Pattern } from "../Display/Display.Pattern";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
+import { Display } from "../Display/index.js";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import { Pattern } from "../Display/Display.Pattern.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { Keyboard, TouchableOpacity, TouchableWithoutFeedback, useWindowDimensions, View, } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
-function AuthContainer({ header, children, onBackPress, background, className, }) {
+function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar = false, keyboardFormProps, }) {
     const { height: screenHeight } = useWindowDimensions();
     const theme = useTheme();
-    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "night-green", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _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: background?.textColor ?? 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 (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "warm", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _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: background?.textColor ?? 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(KeyboardForm, { bottomOffset: keyboardToolbar ? undefined : 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, ...keyboardFormProps, toolbar: keyboardToolbar, children: _jsx(View, { className: "p-4", children: children }) }) })] }) })] }));
 }
 export default AuthContainer;

package/dist/layouts/Container.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { StatusBar } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 const Container = ({ children, style, barStyle = "light-content", statusBarHidden = false, edges = ["top", "bottom", "left", "right"], className, }) => {

package/dist/layouts/GradientContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
+import { theme } from "../theme/index.js";
 import { LinearGradient } from "expo-linear-gradient";
 const GradientContainer = ({ children, style, className }) => {
     const gradientColors = theme.gradient.primary;

package/dist/layouts/ScrollContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 function ScrollContainer({ children, contentContainerStyle = {}, className, }) {

package/dist/layouts/TabNavigatorLayout.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import DisplayIcon from "../Display/Display.Icon";
-import Container from "../layouts/Container";
-import { Typography } from "../Typography";
+import DisplayIcon from "../Display/Display.Icon.js";
+import Container from "./Container.js";
+import { Typography } from "../Typography/index.js";
 import { Children, isValidElement } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -21,7 +21,7 @@ function TabNavigator({ items, currentPath, onTabPress, }) {
                             return;
                         }
                         onTabPress?.(path);
-                    }, children: [_jsx(TabIcon, { focused: focused, Icon: Icon }), _jsx(Text, { className: `text-xs mt-1.5 font-medium ${focused ? "text-primary" : "text-text-secondary"}`, children: label })] }, path));
+                    }, children: [_jsx(TabIcon, { focused: focused, Icon: Icon }), _jsx(Text, { className: `text-xs mt-1.5 font-medium ${focused ? "text-text-accent" : "text-text-secondary"}`, children: label })] }, path));
             }) }) }));
 }
 function Tabs({ children: tabsChildren }) {

package/dist/primitives/AspectRatio.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 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 }));

package/dist/primitives/BaseButton.d.ts

@@ -1,143 +1,148 @@
-import { type VariantProps } from "../theme/tw";
+import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import { FC } from "react";
+import type { AccessibilityProps } from "react-native";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent min-h-0";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "py-1.5 px-3 min-h-[36px]";
+        medium: "py-2.5 px-4 min-h-[44px]";
+        large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+}, undefined>>;
 declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", {
+}, undefined, "rounded-md items-center justify-center aspect-square", {
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        accent: string;
-        secondary: string;
-        outline: string;
-        outlineDanger: string;
-        outlineBlack: string;
-        flat: string;
-        link: string;
-        transparent: string;
+        primary: "bg-accent";
+        accent: "bg-transparent";
+        secondary: "bg-bg-muted border border-border-strong";
+        outline: "bg-transparent border border-primary";
+        outlineDanger: "bg-transparent border border-danger";
+        outlineBlack: "bg-transparent border border-border-strong";
+        flat: "bg-text-primary/10";
+        link: "bg-transparent";
+        transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: string;
-        medium: string;
-        large: string;
+        small: "w-9 h-9";
+        medium: "w-11 h-11";
+        large: "w-[52px] h-[52px]";
     };
     disabled: {
-        true: string;
+        true: "opacity-70";
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
-export interface BaseButtonProps extends VariantProps<typeof button> {
+}, undefined>>;
+export interface BaseButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
 export declare const BaseButton: FC<BaseButtonProps>;
-export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon> {
+export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
 export declare const BaseButtonIcon: FC<BaseButtonIconProps>;
 declare const BaseButtonWithIcon: React.FC<BaseButtonProps> & {

package/dist/primitives/BaseButton.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { theme } from "../theme";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { LinearGradient } from "expo-linear-gradient";
+import Icon from "../Display/Display.Icon.js";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 // ============================================================================
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -37,12 +36,12 @@ const button = tv({
     },
 });
 const buttonIcon = tv({
-    base: "rounded-lg items-center justify-center aspect-square",
+    base: "rounded-md items-center justify-center aspect-square",
     variants: {
         variant: {
-            primary: "shadow-sm",
-            accent: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            primary: "bg-accent",
+            accent: "bg-transparent",
+            secondary: "bg-bg-muted border border-border-strong",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -67,15 +66,15 @@ const buttonIcon = tv({
 const textColor = tv({
     variants: {
         variant: {
-            primary: "text-white",
-            accent: "text-white",
-            secondary: "text-primary",
-            outline: "text-primary",
+            primary: "text-text-on-accent",
+            accent: "text-text-accent",
+            secondary: "text-text-primary",
+            outline: "text-text-accent",
             outlineDanger: "text-danger",
             outlineBlack: "text-text-primary",
             flat: "text-text-primary",
-            link: "text-primary",
-            transparent: "text-white",
+            link: "text-text-accent",
+            transparent: "text-text-inverse",
         },
         disabled: {
             true: "opacity-50",
@@ -85,17 +84,17 @@ const textColor = tv({
         {
             variant: "primary",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-on-accent",
         },
         {
             variant: "accent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-accent",
         },
         {
             variant: "transparent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-inverse/70",
         },
         {
             variant: ["secondary", "outline", "link"],
@@ -128,14 +127,14 @@ const textColor = tv({
 // ============================================================================
 function getLoadingColorDynamic(variant) {
     const map = {
-        primary: theme.text.inverse,
-        accent: theme.text.inverse,
-        secondary: theme.primary,
-        outline: theme.primary,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
+        secondary: theme.text.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.text.inverse,
     };
     return map[variant] ?? theme.text.inverse;
@@ -143,8 +142,8 @@ function getLoadingColorDynamic(variant) {
 function getIconColorDynamic(variant, disabled) {
     if (disabled) {
         const disabledMap = {
-            primary: theme.icon.inverse + "70",
-            accent: theme.icon.inverse + "70",
+            primary: theme.text.onAccent + "70",
+            accent: theme.text.accent + "70",
             secondary: theme.icon.disabled,
             outline: theme.icon.disabled,
             outlineDanger: theme.danger + "7f",
@@ -156,14 +155,14 @@ function getIconColorDynamic(variant, disabled) {
         return disabledMap[variant] ?? theme.icon.disabled;
     }
     const enabledMap = {
-        primary: theme.icon.inverse,
-        accent: theme.icon.inverse,
-        secondary: theme.primary,
-        outline: theme.primary,
+        primary: theme.text.onAccent,
+        accent: theme.text.accent,
+        secondary: theme.text.primary,
+        outline: theme.text.accent,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
         flat: theme.text.primary,
-        link: theme.primary,
+        link: theme.text.accent,
         transparent: theme.icon.inverse,
     };
     return enabledMap[variant] ?? theme.icon.inverse;
@@ -193,7 +192,7 @@ function getIconSize(size) {
 function getTextVariant(size) {
     return textVariantMap[size] ?? "button";
 }
-export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, accessibleSizing = false, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const textColorClass = textColor({
         variant: variant ?? "primary",
         disabled,
@@ -201,30 +200,29 @@ export const BaseButton = ({ title, onPress, variant = "primary", size = "medium
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const textVariantValue = getTextVariant(size ?? "medium");
     if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+                ...accessibilityState,
+                disabled: disabled || loading,
+                busy: loading,
+            }, style: accessibleSizing
+                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
+                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    if (variant === "primary" || variant === "accent") {
-        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
-        const hasFlex = className?.includes("flex-1");
-        return (_jsx(View, { className: className, style: hasFlex ? { flex: 1 } : undefined, children: _jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                    borderRadius: 8,
-                    opacity: disabled ? 0.7 : 1,
-                }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsxs(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }) }) }) }));
-    }
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title }))] }));
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, semibold: variant === "primary", variant: textVariantValue, children: title }))] }));
 };
-export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, accessibleSizing = false, testID, accessibilityState, ...accessibilityProps }) => {
     const iconColorValue = getIconColor(variant ?? "primary", disabled);
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const iconSizeValue = getIconSize(size ?? "medium");
-    if (variant === "primary" || variant === "accent") {
-        const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
-        return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
-                opacity: disabled ? 0.7 : 1,
-            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
-    }
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 // ============================================================================
 // COMPOUND COMPONENT

package/dist/primitives/Box.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Box({ className, style, ...props }) {
     return _jsx(View, { className: cn(className), style: style, ...props });

package/dist/primitives/Pressable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { TouchableOpacity, } from "react-native";
 function Pressable({ className, disabled = false, hitSlop = 8, activeOpacity = 0.7, accessibilityRole = "button", style, children, ...rest }) {
     const isDisabled = !!disabled;

package/dist/primitives/Row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Row({ spacing = 2, align = "center", justify = "start", wrap = false, className, style, ...props }) {
     const alignMap = {

package/dist/primitives/Stack.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 function Stack({ spacing = 4, align = "stretch", className, style, ...props }) {
     const alignMap = {

package/dist/primitives/index.d.ts

@@ -1,6 +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";
+export { AspectRatio, type AspectRatioProps, } from "./AspectRatio.js";
+export { Box } from "./Box.js";
+export { Pressable, type PressableProps } from "./Pressable.js";
+export { Row } from "./Row.js";
+export { Spacer, type SpacerProps } from "./Spacer.js";
+export { Stack } from "./Stack.js";

package/dist/primitives/index.js

@@ -1,6 +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";
+export { AspectRatio, } from "./AspectRatio.js";
+export { Box } from "./Box.js";
+export { Pressable } from "./Pressable.js";
+export { Row } from "./Row.js";
+export { Spacer } from "./Spacer.js";
+export { Stack } from "./Stack.js";

package/dist/theme/active.d.ts

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

package/dist/theme/active.js

@@ -1,8 +1,21 @@
-import { DEFAULT_THEME } from "../theme/default";
+import { DEFAULT_THEME } from "./default.js";
+import { validateTheme } from "./validate.js";
 const activeTheme = { ...DEFAULT_THEME };
 const listeners = new Set();
 let version = 0;
+// Detection helper: we don't want validation warnings to spam the console while running
+// runtime tests under Node (they intentionally pass partial themes). The check is cheap
+// and runs once at module load.
+const isReactNative = typeof navigator !== "undefined" &&
+    navigator.product === "ReactNative";
 export function setActiveTheme(tokens) {
+    if (__DEV__ && isReactNative) {
+        const issues = validateTheme(tokens);
+        if (issues.length > 0) {
+            const fmt = issues.map((i) => `  · ${i.path}: ${i.message}`).join("\n");
+            console.warn(`[@sincpro/mobile-ui] setActiveTheme received a theme with issues:\n${fmt}\nRendering will fall back to default styles for missing keys.`);
+        }
+    }
     Object.assign(activeTheme, tokens);
     version += 1;
     listeners.forEach((listener) => listener());