@sincpro/mobile-ui 2.0.1 → 3.0.0

package/dist/Navigation/Navigation.SearchBar.js

@@ -4,7 +4,7 @@ import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import Pressable from "../primitives/Pressable.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
-import { resolveTextFontFamily, typographyVariants, } from "../theme/typography.js";
+import { appliedTextStyle } from "../theme/typography.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { Keyboard, TextInput, View } from "react-native";
@@ -21,8 +21,7 @@ function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onCl
             borderWidth: 1,
             borderColor: focused ? theme.border.focus : "transparent",
         }, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }) }), editable ? (_jsx(TextInput, { accessibilityLabel: accessibilityLabel ?? placeholder, autoFocus: autoFocus, className: "flex-1 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", selectionColor: theme.primary, style: {
-                    ...typographyVariants.bodyReadable,
-                    fontFamily: resolveTextFontFamily("bodyReadable"),
+                    ...appliedTextStyle("bodyReadable"),
                     minHeight: 48,
                     paddingVertical: 8,
                 }, testID: testID ? `${testID}-input` : undefined, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary", variant: "bodyReadable", children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: clearAccessibilityLabel, hitSlop: 8, onPress: () => {
@@ -33,7 +32,7 @@ function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onCl
                     minWidth: 48,
                     alignItems: "center",
                     justifyContent: "center",
-                }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
+                }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "dismiss", size: 18 }) })) : null] }));
     if (!editable && onPress) {
         return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel ?? placeholder, accessibilityRole: "search", onPress: onPress, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: body }));
     }

package/dist/Navigation/Navigation.SegmentedControl.d.ts

@@ -1,38 +1,20 @@
-import { Typography } from "../Typography/index.js";
-import { ComponentType } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
-export interface SegmentedOption<T extends string> {
+export type SegmentedOption<T extends string> = {
     label: string;
     value: T;
-    /** Ionicon name rendered above (or before) the label. */
-    icon?: string;
-    /** Custom icon component — takes precedence over `icon`. */
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
     disabled?: boolean;
-    accessibilityLabel?: string;
-    accessibilityHint?: string;
-}
-export interface SegmentedControlProps<T extends string> {
-    options: SegmentedOption<T>[];
+};
+export type SegmentedControlProps<T extends string> = {
+    options: readonly SegmentedOption<T>[];
     value: T;
     onChange: (value: T) => void;
-    /**
-     * Icon layout when options have icons:
-     * - `"top"` (default) — icon stacked above the label (taller pill).
-     * - `"left"` — icon inline left of the label (compact, single-line).
-     */
-    iconLayout?: "top" | "left";
     disabled?: boolean;
+    readOnly?: boolean;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
-    optionStyle?: StyleProp<ViewStyle>;
-    labelTextProps?: Partial<React.ComponentProps<typeof Typography.Text>>;
     className?: string;
     testID?: string;
-}
-declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, disabled, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+};
+declare function SegmentedControl<T extends string>({ options, value, onChange, disabled, readOnly, accessibilityLabel, style, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -1,45 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon.js";
-import { useTheme } from "../theme/index.js";
-import { cn } from "../theme/tw.js";
+import NativeSegmentedControl from "@expo/ui/community/segmented-control";
+import { relativeLuminance, useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { TouchableOpacity, View } from "react-native";
-function SegmentedControl({ options, value, onChange, iconLayout = "top", disabled = false, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }) {
+import { View } from "react-native";
+function SegmentedControl({ options, value, onChange, disabled = false, readOnly = false, accessibilityLabel, style, className, testID, }) {
     const theme = useTheme();
-    const hasIcons = options.some((o) => o.icon || o.customIcon);
-    return (_jsx(View, { accessibilityLabel: accessibilityLabel, accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), style: style, testID: testID, children: options.map((option) => {
-            const selected = option.value === value;
-            const isDisabled = disabled || !!option.disabled;
-            const iconColor = selected ? theme.text.primary : theme.text.secondary;
-            const hasIcon = !!(option.icon || option.customIcon);
-            const inline = hasIcons && iconLayout === "left";
-            const baseStyle = {
-                flex: 1,
-                minHeight: 48,
-                minWidth: 48,
-                flexDirection: inline ? "row" : "column",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: hasIcon ? 4 : 0,
-                paddingVertical: 8,
-                paddingHorizontal: 4,
-                borderRadius: 8,
-                ...(selected ? { backgroundColor: theme.bg.card, ...theme.shadow.sm } : undefined),
-                opacity: isDisabled ? 0.5 : 1,
-            };
-            return (_jsxs(TouchableOpacity, { accessibilityHint: option.accessibilityHint, accessibilityLabel: option.accessibilityLabel ?? option.label, accessibilityRole: "tab", accessibilityState: isDisabled ? { selected, disabled: true } : { selected }, activeOpacity: 0.7, disabled: isDisabled || undefined, hitSlop: 0, onPress: () => {
-                    if (!isDisabled)
-                        onChange(option.value);
-                }, style: optionStyle ? [baseStyle, optionStyle] : baseStyle, children: [hasIcon ? (_jsx(Icon, { color: iconColor, customIcon: option.customIcon, name: option.icon, size: 16, type: option.customIcon ? "custom" : "ionicons" })) : null, _jsx(Typography.Text, { ...labelTextProps, semibold: labelTextProps?.semibold ?? selected, style: [
-                            {
-                                color: iconColor,
-                                fontSize: 14,
-                                textAlign: "center",
-                                flexShrink: 1,
-                            },
-                            labelTextProps?.style,
-                        ], variant: labelTextProps?.variant ?? "caption", children: option.label })] }, option.value));
-        }) }));
+    const groups = [];
+    for (const option of options) {
+        const blocked = disabled || readOnly || !!option.disabled;
+        const group = groups.at(-1);
+        if (group?.disabled === blocked)
+            group.options.push(option);
+        else
+            groups.push({ disabled: blocked, options: [option] });
+    }
+    return (_jsxs(View, { className: className, style: style, testID: testID, children: [accessibilityLabel ? (_jsx(Typography.Text, { className: "pb-1 text-text-primary", variant: "bodySmall", children: accessibilityLabel })) : null, _jsx(View, { style: { flexDirection: "row", gap: 4, minHeight: 48 }, children: groups.map((group, groupIndex) => (_jsx(View, { style: { flex: group.options.length }, children: _jsx(NativeSegmentedControl, { accessibilityLabel: accessibilityLabel, appearance: relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light", enabled: !group.disabled, onChange: ({ nativeEvent }) => {
+                            const option = group.options[nativeEvent.selectedSegmentIndex];
+                            if (option && !group.disabled)
+                                onChange(option.value);
+                        }, selectedIndex: group.options.findIndex((option) => option.value === value), style: { minHeight: 48 }, testID: testID ? `${testID}-segments-${groupIndex}` : undefined, tintColor: theme.primary, values: group.options.map((option) => option.label) }) }, group.options[0].value))) })] }));
 }
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.Steps.js

@@ -11,7 +11,7 @@ function Steps({ steps, current, className, testID }) {
             const circleColor = done || active ? theme.primary : theme.bg.muted;
             const textColor = done || active ? theme.text.inverse : theme.text.tertiary;
             const isLast = index === steps.length - 1;
-            return (_jsxs(View, { className: "flex-1 items-center", children: [_jsxs(View, { className: "flex-row items-center w-full", children: [_jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: "transparent" } }), _jsx(View, { className: "w-7 h-7 rounded-full items-center justify-center", style: { backgroundColor: circleColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "checkmark", size: 16 })) : (_jsx(Typography.Text, { style: { color: textColor }, variant: "bodySmall", children: index + 1 })) }), _jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: isLast ? "transparent" : theme.border.default } })] }), _jsx(Typography.Text, { className: "mt-1 text-center", numberOfLines: 1, style: { color: active ? theme.text.accent : theme.text.tertiary }, variant: "caption", children: label })] }, label));
+            return (_jsxs(View, { className: "flex-1 items-center", children: [_jsxs(View, { className: "flex-row items-center w-full", children: [_jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: "transparent" } }), _jsx(View, { className: "w-7 h-7 rounded-full items-center justify-center", style: { backgroundColor: circleColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "check", size: 16 })) : (_jsx(Typography.Text, { style: { color: textColor }, variant: "bodySmall", children: index + 1 })) }), _jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: isLast ? "transparent" : theme.border.default } })] }), _jsx(Typography.Text, { className: "mt-1 text-center", numberOfLines: 1, style: { color: active ? theme.text.accent : theme.text.tertiary }, variant: "caption", children: label })] }, label));
         }) }));
 }
 export default Steps;

package/dist/Navigation/Navigation.Tabs.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from "../Display/index.js";
 import { type ReactNode } from "react";
 type TabsVariant = "underline" | "filled";
 export interface TabsProps {
@@ -16,7 +17,7 @@ declare function TabsList({ children, className }: {
 export interface TabsTriggerProps {
     value: string;
     children: ReactNode;
-    icon?: string;
+    icon?: IconName;
     iconLayout?: "top" | "left";
 }
 declare function TabsTrigger({ value, children, icon, iconLayout }: TabsTriggerProps): import("react").JSX.Element;

package/dist/Navigation/index.d.ts

@@ -1,7 +1,6 @@
 import BottomNav from "./Navigation.BottomNav.js";
 import CollapsingHeader from "./Navigation.CollapsingHeader.js";
 import FloatingBar from "./Navigation.FloatingBar.js";
-import HeaderToolbar from "./Navigation.HeaderToolbar.js";
 import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
@@ -9,7 +8,6 @@ import SearchBar from "./Navigation.SearchBar.js";
 import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
 import Steps from "./Navigation.Steps.js";
-import TabIcon from "./Navigation.TabIcon.js";
 export type { AppBarBackground } from "./Navigation.AppBar.js";
 export type { MenuSectionProps } from "./Navigation.MenuSection.js";
 export type { SearchFilterSheetProps, SearchFiltersProps, SearchRootProps, } from "./Navigation.Search.js";
@@ -32,10 +30,6 @@ export declare const Navigation: {
         Suggestions: (props: import("./Navigation.SearchSuggestions.js").SearchSuggestionsProps) => import("react").JSX.Element;
     };
     SearchSuggestions: typeof SearchSuggestions;
-    Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("./Navigation.Header.js").HeaderProps) => import("react").JSX.Element;
-    HeaderToolbar: typeof HeaderToolbar;
-    TabItem: import("react").FC<import("./Navigation.TabItem.js").TabIconProps>;
-    TabIcon: typeof TabIcon;
     RowItem: typeof RowItem;
     SegmentedControl: typeof SegmentedControl;
     Tabs: (({ value, defaultValue, onValueChange, variant, className, children, }: import("./Navigation.Tabs.js").TabsProps) => import("react").JSX.Element) & {

package/dist/Navigation/index.js

@@ -2,8 +2,6 @@ import AppBar from "./Navigation.AppBar.js";
 import BottomNav from "./Navigation.BottomNav.js";
 import CollapsingHeader from "./Navigation.CollapsingHeader.js";
 import FloatingBar from "./Navigation.FloatingBar.js";
-import Header from "./Navigation.Header.js";
-import HeaderToolbar from "./Navigation.HeaderToolbar.js";
 import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
@@ -12,8 +10,6 @@ import SearchBar from "./Navigation.SearchBar.js";
 import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
 import Steps from "./Navigation.Steps.js";
-import TabIcon from "./Navigation.TabIcon.js";
-import TabItem from "./Navigation.TabItem.js";
 import Tabs from "./Navigation.Tabs.js";
 export const Navigation = {
     AppBar,
@@ -23,10 +19,6 @@ export const Navigation = {
     SearchBar,
     Search,
     SearchSuggestions,
-    Header,
-    HeaderToolbar,
-    TabItem,
-    TabIcon,
     RowItem,
     SegmentedControl,
     Tabs,

package/dist/Typography/Typography.SelectableText.js

@@ -1,15 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
-import { resolveTextFontFamily, typographyVariants, } from "../theme/typography.js";
+import { appliedTextStyle } from "../theme/typography.js";
 import { TextInput } from "react-native";
 function SelectableText({ value, variant = "body", semibold = false, className, style, ...props }) {
     return (_jsx(TextInput, { ...props, className: cn("text-text-primary", className), editable: false, multiline: true, readOnly: true, scrollEnabled: false, showSoftInputOnFocus: false, style: [
-            typographyVariants[variant],
-            {
-                fontFamily: resolveTextFontFamily(variant, false, semibold),
-                padding: 0,
-                textAlignVertical: "top",
-            },
+            appliedTextStyle(variant, false, semibold),
+            { padding: 0, textAlignVertical: "top" },
             style,
         ], underlineColorAndroid: "transparent", value: value }));
 }

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

@@ -7,14 +7,9 @@ import { type TextProps } from "react-native";
  * Uses NativeWind className for: spacing, colors, transforms, alignment
  * Uses style prop for: typography variants (fontFamily, fontSize, lineHeight)
  *
- * Reason: Custom fonts (Montserrat) not in Tailwind, complex typography system
- *
- * @deprecated color prop - Use className instead: e.g. className="text-text-primary" or className="text-text-accent"
  */
 interface AppTextProps extends TextProps {
     variant?: keyof typeof typographyVariants;
-    /** @deprecated Use className="text-{color}" instead */
-    color?: string;
     bold?: boolean;
     semibold?: boolean;
     italic?: boolean;
@@ -23,6 +18,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): React.JSX.Element;
+declare function AppText({ variant, 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,14 +1,11 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
-import { resolveTextFontFamily, Typography, } from "../theme/typography.js";
+import { appliedTextStyle } from "../theme/typography.js";
 import { StyleSheet, 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];
+function AppText({ variant = "body", bold = false, italic = false, underline = false, align = "left", transform = "none", semibold = false, style, className, children, ...props }) {
     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);
     const textStyle = {
-        ...baseStyle,
-        ...(color ? { color } : {}),
-        fontFamily: resolveTextFontFamily(variant, bold, semibold),
+        ...appliedTextStyle(variant, bold, semibold),
         ...StyleSheet.flatten(style),
     };
     return (_jsx(Text, { className: textClassName, style: textStyle, ...props, children: children }));

package/dist/index.d.ts

@@ -8,17 +8,14 @@ export { Typography } from "./Typography/index.js";
 export { Box, Row, Stack } from "./primitives/index.js";
 export { type BrandingConfig, getBrandingLogo, getBrandingMesh, getBrandingMeshSize, setBranding, } from "./branding.js";
 export { cn, tv, type VariantProps } from "./theme/tw.js";
-export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography.js";
+export { appliedTextStyle, fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography.js";
 export { BottomInsetContext } from "./layouts/BottomInset.js";
 export { default as Container } from "./layouts/Container.js";
 export { default as GradientContainer } from "./layouts/GradientContainer.js";
 export { default as PlainLayout } from "./layouts/PlainLayout.js";
 export { default as ScrollContainer } from "./layouts/ScrollContainer.js";
-export { default as TabNavigatorLayout } from "./layouts/TabNavigatorLayout.js";
 export { default as AppSplashView } from "./views/AppSplashView.js";
 export { default as AuthFormView } from "./views/AuthFormView.js";
 export { default as FormViewV2 } from "./views/FormViewV2.js";
 export { default as ListViewV2 } from "./views/ListViewV2.js";
 export { default as JSONViewer } from "./widgets/JSONViewer.js";
-export { default as ScreenHeader } from "./widgets/ScreenHeader.js";
-export * from "./widgets/ScreenHeader.js";

package/dist/index.js

@@ -13,14 +13,13 @@ export { Box, Row, Stack } from "./primitives/index.js";
 export { getBrandingLogo, getBrandingMesh, getBrandingMeshSize, setBranding, } from "./branding.js";
 // Theme
 export { cn, tv } from "./theme/tw.js";
-export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography.js";
+export { appliedTextStyle, fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography.js";
 // Layouts
 export { BottomInsetContext } from "./layouts/BottomInset.js";
 export { default as Container } from "./layouts/Container.js";
 export { default as GradientContainer } from "./layouts/GradientContainer.js";
 export { default as PlainLayout } from "./layouts/PlainLayout.js";
 export { default as ScrollContainer } from "./layouts/ScrollContainer.js";
-export { default as TabNavigatorLayout } from "./layouts/TabNavigatorLayout.js";
 // Views
 export { default as AppSplashView } from "./views/AppSplashView.js";
 export { default as AuthFormView } from "./views/AuthFormView.js";
@@ -28,5 +27,3 @@ export { default as FormViewV2 } from "./views/FormViewV2.js";
 export { default as ListViewV2 } from "./views/ListViewV2.js";
 // Widgets
 export { default as JSONViewer } from "./widgets/JSONViewer.js";
-export { default as ScreenHeader } from "./widgets/ScreenHeader.js";
-export * from "./widgets/ScreenHeader.js";

package/dist/layouts/AuthContainer.d.ts

@@ -1,18 +1,20 @@
 import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
+import { type Edge } from "react-native-safe-area-context";
 interface AuthContainerProps {
     header: ReactNode;
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
+    edges?: Edge[];
     keyboardToolbar?: boolean;
     keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
-    /** Gradient + optional texture surface for the header area. Defaults to the `warm`
+    /** Gradient + optional texture surface for the header area. Defaults to the `brand`
      *  preset. Set `background.pattern` to opt-in a texture (`dots` / `grid` /
      *  `diagonals`); compose `<Display.Pattern kind="mesh" />` outside if you want the
      *  brand symbol. */
     background?: AppBarBackground;
 }
-declare function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, edges, keyboardToolbar, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

package/dist/layouts/AuthContainer.js

@@ -5,11 +5,10 @@ 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 { Keyboard, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar = false, keyboardFormProps, }) {
-    const { height: screenHeight } = useWindowDimensions();
+function AuthContainer({ header, children, onBackPress, background, className, edges = ["top", "bottom", "left", "right"], keyboardToolbar = true, keyboardFormProps, }) {
     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 ?? "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 }) }) })] }) })] }));
+    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "brand", 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: edges, children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: "30%" }, 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: "back", size: 24 }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", 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.d.ts

@@ -4,10 +4,6 @@ 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;
     edges?: Edge[];
     className?: string;
 };

package/dist/layouts/Container.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 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, }) => {
-    return (_jsxs(SafeAreaView, { className: cn("flex-1 bg-bg-page", className), edges: edges, style: style, children: [_jsx(StatusBar, { barStyle: barStyle, hidden: statusBarHidden }), children] }));
+const Container = ({ children, style, edges = ["left", "right"], className, }) => {
+    return (_jsx(SafeAreaView, { className: cn("flex-1 bg-bg-page", className), edges: edges, style: style, children: children }));
 };
 export default Container;

package/dist/layouts/ScrollContainer.d.ts

@@ -1,8 +1,12 @@
 import React, { ReactNode } from "react";
-type ScrollContainerProps = {
+import { type StyleProp, type ViewStyle } from "react-native";
+import { type KeyboardAwareScrollViewProps } from "react-native-keyboard-controller";
+import { type Edge } from "react-native-safe-area-context";
+type ScrollContainerProps = Omit<KeyboardAwareScrollViewProps, "children"> & {
     children: ReactNode;
-    contentContainerStyle?: object;
+    contentContainerStyle?: StyleProp<ViewStyle>;
     className?: string;
+    edges?: Edge[];
 };
-declare function ScrollContainer({ children, contentContainerStyle, className, }: ScrollContainerProps): React.JSX.Element;
+declare function ScrollContainer({ children, contentContainerStyle, className, edges, bottomOffset, style, ...props }: ScrollContainerProps): React.JSX.Element;
 export default ScrollContainer;

package/dist/layouts/ScrollContainer.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
-import { KeyboardAvoidingView, Platform, ScrollView, StatusBar, View } from "react-native";
+import { View } from "react-native";
+import { KeyboardAwareScrollView, } from "react-native-keyboard-controller";
 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" }), _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 }) }) })] }));
+function ScrollContainer({ children, contentContainerStyle = {}, className, edges = ["left", "right"], bottomOffset = 72, style, ...props }) {
+    return (_jsx(SafeAreaView, { className: cn("flex-1 bg-bg-card", className), edges: edges, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset, contentContainerStyle: [{ flexGrow: 1, padding: 16 }, contentContainerStyle], contentInsetAdjustmentBehavior: "automatic", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, style: [{ flex: 1 }, style], ...props, children: _jsx(View, { className: "flex-1", children: children }) }) }));
 }
 export default ScrollContainer;

package/dist/primitives/BaseButton.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from "../Display/index.js";
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import { FC } from "react";
@@ -135,7 +136,7 @@ export interface BaseButtonProps extends VariantProps<typeof button>, Accessibil
 }
 export declare const BaseButton: FC<BaseButtonProps>;
 export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
-    icon: string;
+    icon: IconName;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;

package/dist/theme/build.js

@@ -88,10 +88,6 @@ export function buildThemeFromBrand(opts) {
         warning: WARNING,
         danger: DANGER,
         info: INFO,
-        successLight: successC.container,
-        warningLight: warningC.container,
-        dangerLight: dangerC.container,
-        infoLight: infoC.container,
         container: {
             primary: primaryC.container,
             onPrimary: primaryC.onContainer,

package/dist/theme/css-vars.js

@@ -59,10 +59,6 @@ export function themeToVars(t) {
         "--warning": rgb(t.warning),
         "--danger": rgb(t.danger),
         "--info": rgb(t.info),
-        "--success-light": rgb(t.successLight),
-        "--warning-light": rgb(t.warningLight),
-        "--danger-light": rgb(t.dangerLight),
-        "--info-light": rgb(t.infoLight),
         "--container-primary": rgb(t.container.primary),
         "--container-on-primary": rgb(t.container.onPrimary),
         "--container-secondary": rgb(t.container.secondary),

package/dist/theme/dark.js

@@ -1,6 +1,6 @@
 import { containerPair } from "./color.js";
 import { resolveOnColor } from "./contrast.js";
-/** Web UI dark palette. The same roles, measured on #181614. */
+/** Brand dark palette for iOS and Android, measured on #181614. */
 const PRIMARY = "#8FA9E8";
 const SECONDARY = "#B0C3F1";
 const ACCENT = "#C89B3C";
@@ -33,7 +33,7 @@ export const DEFAULT_DARK_THEME = {
         muted: "#302C28",
         accent: primaryC.container,
         hover: "#2A2622",
-        disabled: "#302C28",
+        disabled: "#3A342F",
         inverse: "#FAF9F7",
         containerLowest: "#141210",
         container: "#221F1C",
@@ -70,10 +70,6 @@ export const DEFAULT_DARK_THEME = {
     warning: WARNING,
     danger: DANGER,
     info: INFO,
-    successLight: successC.container,
-    warningLight: warningC.container,
-    dangerLight: dangerC.container,
-    infoLight: infoC.container,
     container: {
         primary: primaryC.container,
         onPrimary: primaryC.onContainer,

package/dist/theme/default.js

@@ -1,6 +1,6 @@
 import { containerPair } from "./color.js";
 import { resolveOnColor } from "./contrast.js";
-/** Web UI light palette. Gold is a fill, never a border or a label. */
+/** Brand light palette for iOS and Android. Gold is a fill, never a border or a label. */
 const PRIMARY = "#2A4A85";
 const SECONDARY = "#1C3765";
 const ACCENT = "#C89B3C";
@@ -70,10 +70,6 @@ export const DEFAULT_THEME = {
     warning: WARNING,
     danger: DANGER,
     info: INFO,
-    successLight: successC.container,
-    warningLight: warningC.container,
-    dangerLight: dangerC.container,
-    infoLight: infoC.container,
     container: {
         primary: primaryC.container,
         onPrimary: primaryC.onContainer,

package/dist/theme/index.d.ts

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

package/dist/theme/index.js

@@ -8,6 +8,6 @@ export { DEFAULT_DARK_THEME } from "./dark.js";
 export { DEFAULT_THEME } from "./default.js";
 export { defineTheme, extendTheme, mergeTheme, } from "./define.js";
 export { theme } from "./theme.js";
-export { configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
+export { appliedTextStyle, configureFonts, fontFamilies, resetFonts, useAppFonts, variantFontRole, } from "./typography.js";
 export { useTheme } from "./useTheme.js";
 export { validateTheme } from "./validate.js";

package/dist/theme/types.d.ts

@@ -84,17 +84,6 @@ export interface ThemeTokens {
     warning: string;
     danger: string;
     info: string;
-    /**
-     * @deprecated Prefer `container.success`. Kept for NativeWind `bg-success-light`
-     * back-compat; defaults stay in sync with container fills.
-     */
-    successLight: string;
-    /** @deprecated Prefer `container.warning`. */
-    warningLight: string;
-    /** @deprecated Prefer `container.danger`. */
-    dangerLight: string;
-    /** @deprecated Prefer `container.info`. */
-    infoLight: string;
     /**
      * Soft tonal fills + on-colors — badges, chips, tonal CTAs, selected rows.
      * Prefer these over saturated `success` + white for body-sized labels.