@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/Navigation/Navigation.RowItem.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-function RowItem({ item, className }) {
+function RowItem({ item, className, onPress = item.onPress, readonly = item.readonly, }) {
     function rowContent() {
         return (_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "flex-1", variant: "title", children: item.rowTitle }), _jsx(Typography.Text, { className: "mt-0.5 text-text-secondary", variant: "bodySmall", children: item.rowSubtitle })] }));
     }
-    return item.readonly ? (_jsx(View, { className: cn("flex-row items-center py-2.5", className), children: rowContent() })) : (_jsx(TouchableOpacity, { className: cn("flex-row items-center py-2.5", className), onPress: item.onPress, children: rowContent() }));
+    return readonly ? (_jsx(View, { className: cn("flex-row items-center py-2.5", className), children: rowContent() })) : (_jsx(TouchableOpacity, { className: cn("flex-row items-center py-2.5", className), onPress: onPress, children: rowContent() }));
 }
 export default RowItem;

package/dist/Navigation/Navigation.Search.d.ts

@@ -0,0 +1,41 @@
+import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
+import { type ReactNode } from "react";
+import { type SearchBarProps } from "./Navigation.SearchBar";
+import { type SearchSuggestionsProps } from "./Navigation.SearchSuggestions";
+export interface SearchRootProps {
+    children: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function Root({ children, className, testID }: SearchRootProps): import("react").JSX.Element;
+declare function Field(props: SearchBarProps): import("react").JSX.Element;
+export interface SearchFiltersProps {
+    children: ReactNode;
+    className?: string;
+    testID?: string;
+}
+declare function Filters({ children, className, testID }: SearchFiltersProps): import("react").JSX.Element;
+export interface SearchFilterSheetProps {
+    children: ReactNode;
+    activeCount?: number;
+    title?: string;
+    triggerLabel?: string;
+    applyLabel?: string;
+    clearLabel?: string;
+    onApply: () => void;
+    onClear?: () => void;
+    testID?: string;
+}
+declare function FilterSheet({ children, activeCount, title, triggerLabel, applyLabel, clearLabel, onApply, onClear, testID, }: SearchFilterSheetProps): import("react").JSX.Element;
+declare function History(props: SearchHistoryProps): import("react").JSX.Element;
+declare function Suggestions(props: SearchSuggestionsProps): import("react").JSX.Element;
+declare const Search: {
+    Root: typeof Root;
+    Field: typeof Field;
+    Filters: typeof Filters;
+    FilterSheet: typeof FilterSheet;
+    History: typeof History;
+    Suggestions: typeof Suggestions;
+};
+export type { SearchBarProps, SearchHistoryProps, SearchSuggestionsProps };
+export default Search;

package/dist/Navigation/Navigation.Search.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import Button from "../Actions/Actions.Button.js";
+import { FilterButtonGroup } from "../Actions/Actions.FilterButton.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
+import Icon from "../Display/Display.Icon.js";
+import SearchHistory from "../Display/Display.SearchHistory.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useState } from "react";
+import { View } from "react-native";
+import SearchBar from "./Navigation.SearchBar";
+import SearchSuggestions from "./Navigation.SearchSuggestions";
+function Root({ children, className, testID }) {
+    return (_jsx(View, { className: cn("gap-3", className), testID: testID, children: children }));
+}
+function Field(props) {
+    return _jsx(SearchBar, { ...props });
+}
+function Filters({ children, className, testID }) {
+    return (_jsx(FilterButtonGroup, { className: className, layout: "scroll", testID: testID, children: children }));
+}
+function FilterSheet({ children, activeCount = 0, title = "Filtros", triggerLabel = "Filtros", applyLabel = "Aplicar", clearLabel = "Limpiar", onApply, onClear, testID, }) {
+    const [visible, setVisible] = useState(false);
+    const theme = useTheme();
+    const countLabel = activeCount > 0 ? `, ${activeCount} activos` : "";
+    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { accessibilityLabel: `${triggerLabel}${countLabel}`, accessibilityRole: "button", className: "min-h-11 flex-row items-center justify-center gap-2 self-start rounded-full bg-bg-muted px-4", onPress: () => setVisible(true), style: { minHeight: 44 }, testID: testID ? `${testID}-trigger` : undefined, children: [_jsx(Icon, { color: theme.icon.secondary, name: "options-outline", size: 18 }), _jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: triggerLabel }), activeCount > 0 ? (_jsx(Typography.Text, { accessibilityLabel: `${activeCount} filtros activos`, className: "text-text-accent", variant: "caption", children: activeCount })) : null] }), _jsx(Sheet, { dismissOnBackdrop: true, footer: _jsxs(View, { className: "flex-row gap-3", children: [onClear ? (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClear, title: clearLabel, variant: "secondary" }) })) : null, _jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: () => {
+                                    onApply();
+                                    setVisible(false);
+                                }, title: applyLabel }) })] }), onClose: () => setVisible(false), showCloseButton: true, testID: testID ? `${testID}-sheet` : undefined, title: title, visible: visible, children: children })] }));
+}
+function History(props) {
+    return _jsx(SearchHistory, { ...props });
+}
+function Suggestions(props) {
+    return _jsx(SearchSuggestions, { ...props });
+}
+const Search = {
+    Root,
+    Field,
+    Filters,
+    FilterSheet,
+    History,
+    Suggestions,
+};
+export default Search;

package/dist/Navigation/Navigation.SearchBar.d.ts

@@ -1,3 +1,4 @@
+import { type SearchSuggestionsProps } from "./Navigation.SearchSuggestions.js";
 export interface SearchBarProps {
     value: string;
     onChangeText: (value: string) => void;
@@ -9,10 +10,13 @@ export interface SearchBarProps {
     onPress?: () => void;
     className?: string;
     testID?: string;
+    accessibilityLabel?: string;
+    clearAccessibilityLabel?: string;
+    suggestions?: SearchSuggestionsProps;
 }
 /**
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, }: SearchBarProps): import("react").JSX.Element;
+declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, accessibilityLabel, clearAccessibilityLabel, suggestions, }: SearchBarProps): import("react").JSX.Element;
 export default SearchBar;

package/dist/Navigation/Navigation.SearchBar.js

@@ -1,28 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
+import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
+import { resolveTextFontFamily, typographyVariants, } from "../theme/typography.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
-import { TextInput, View } from "react-native";
+import { Keyboard, TextInput, View } from "react-native";
 /**
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, }) {
+function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, accessibilityLabel, clearAccessibilityLabel = "Limpiar", suggestions, }) {
+    const theme = useTheme();
     const [focused, setFocused] = useState(false);
     const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full px-4", focused ? "bg-bg-card" : "bg-bg-muted", className), style: {
-            height: 44,
+            minHeight: 48,
+            minWidth: 48,
             borderWidth: 1,
             borderColor: focused ? theme.border.focus : "transparent",
-        }, children: [_jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary text-sm", numberOfLines: 1, children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: "Limpiar", hitSlop: 8, onPress: () => {
+        }, 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"),
+                    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: () => {
                     onChangeText("");
                     onClear?.();
+                }, style: {
+                    minHeight: 48,
+                    minWidth: 48,
+                    alignItems: "center",
+                    justifyContent: "center",
                 }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
     if (!editable && onPress) {
-        return (_jsx(Pressable, { accessibilityLabel: placeholder, accessibilityRole: "search", onPress: onPress, testID: testID, children: body }));
+        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel ?? placeholder, accessibilityRole: "search", onPress: onPress, style: { minHeight: 48, minWidth: 48 }, testID: testID, children: body }));
     }
-    return _jsx(View, { testID: testID, children: body });
+    return (_jsxs(View, { testID: testID, children: [body, focused && suggestions ? (_jsx(SearchSuggestions, { ...suggestions, onSelect: (suggestion) => {
+                    suggestions.onSelect(suggestion);
+                    setFocused(false);
+                    Keyboard.dismiss();
+                } })) : null] }));
 }
 export default SearchBar;

package/dist/Navigation/Navigation.SearchSuggestions.d.ts

@@ -0,0 +1,14 @@
+export interface SearchSuggestion {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface SearchSuggestionsProps {
+    items: readonly SearchSuggestion[];
+    onSelect: (suggestion: SearchSuggestion) => void;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    emptyLabel?: string;
+}
+export default function SearchSuggestions({ items, onSelect, loading, error, onRetry, emptyLabel, }: SearchSuggestionsProps): import("react").JSX.Element;

package/dist/Navigation/Navigation.SearchSuggestions.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { Typography } from "../Typography/index.js";
+import { View } from "react-native";
+export default function SearchSuggestions({ items, onSelect, loading, error, onRetry, emptyLabel = "Sin sugerencias", }) {
+    return (_jsx(View, { className: "gap-1 border-b border-border-light py-2", children: loading ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: "Buscando sugerencias\u2026" })) : error ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error }), onRetry ? (_jsx(Pressable, { onPress: onRetry, style: { minHeight: 48, justifyContent: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", children: "Reintentar sugerencias" }) })) : null] })) : !items.length ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-text-secondary", children: emptyLabel })) : (items.map((item) => (_jsxs(Pressable, { accessibilityLabel: item.description ? `${item.label}. ${item.description}` : item.label, className: "px-3 py-2", onPress: () => onSelect(item), style: { minHeight: 48, justifyContent: "center" }, children: [_jsx(Typography.Text, { variant: "bodyReadable", children: item.label }), item.description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodyLarge", children: item.description })) : null] }, item.id)))) }));
+}

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

@@ -1,4 +1,6 @@
+import { Typography } from "../Typography/index.js";
 import { ComponentType } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface SegmentedOption<T extends string> {
     label: string;
     value: T;
@@ -9,6 +11,9 @@ export interface SegmentedOption<T extends string> {
         size?: number;
         color?: string;
     }>;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
 }
 export interface SegmentedControlProps<T extends string> {
     options: SegmentedOption<T>[];
@@ -20,9 +25,14 @@ export interface SegmentedControlProps<T extends string> {
      * - `"left"` — icon inline left of the label (compact, single-line).
      */
     iconLayout?: "top" | "left";
+    disabled?: 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, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, disabled, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -4,27 +4,41 @@ import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-function SegmentedControl({ options, value, onChange, iconLayout = "top", className, testID, }) {
+function SegmentedControl({ options, value, onChange, iconLayout = "top", disabled = false, accessibilityLabel, style, optionStyle, labelTextProps, className, testID, }) {
     const theme = useTheme();
     const hasIcons = options.some((o) => o.icon || o.customIcon);
-    return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), testID: testID, children: options.map((option) => {
+    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";
-            return (_jsxs(TouchableOpacity, { accessibilityLabel: option.label, accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, onPress: () => onChange(option.value), style: {
-                    flex: 1,
-                    flexDirection: inline ? "row" : "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: hasIcon ? 4 : 0,
-                    paddingVertical: hasIcons && !inline ? 8 : 8,
-                    paddingHorizontal: 4,
-                    borderRadius: 8,
-                    ...(selected
-                        ? { backgroundColor: theme.bg.card, ...theme.shadow.sm }
-                        : undefined),
-                }, children: [hasIcon ? (_jsx(Icon, { color: iconColor, customIcon: option.customIcon, name: option.icon, size: 16, type: option.customIcon ? "custom" : "ionicons" })) : null, _jsx(Typography.Text, { numberOfLines: 1, semibold: selected, style: { color: iconColor, fontSize: 12 }, variant: "caption", children: option.label })] }, option.value));
+            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));
         }) }));
 }
 export default SegmentedControl;

package/dist/Navigation/index.d.ts

@@ -6,11 +6,15 @@ import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
 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";
+export type { SearchBarProps } from "./Navigation.SearchBar.js";
+export type { SearchSuggestion, SearchSuggestionsProps, } from "./Navigation.SearchSuggestions.js";
 export declare const Navigation: {
     AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: import("./Navigation.AppBar.js").AppBarProps) => import("react").JSX.Element) & {
         Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
@@ -19,6 +23,15 @@ export declare const Navigation: {
     CollapsingHeader: typeof CollapsingHeader;
     FloatingBar: typeof FloatingBar;
     SearchBar: typeof SearchBar;
+    Search: {
+        Root: ({ children, className, testID }: import("./Navigation.Search.js").SearchRootProps) => import("react").JSX.Element;
+        Field: (props: import("./Navigation.SearchBar.js").SearchBarProps) => import("react").JSX.Element;
+        Filters: ({ children, className, testID }: import("./Navigation.Search.js").SearchFiltersProps) => import("react").JSX.Element;
+        FilterSheet: ({ children, activeCount, title, triggerLabel, applyLabel, clearLabel, onApply, onClear, testID, }: import("./Navigation.Search.js").SearchFilterSheetProps) => import("react").JSX.Element;
+        History: (props: import("./Navigation.Search.js").SearchHistoryProps) => import("react").JSX.Element;
+        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>;

package/dist/Navigation/index.js

@@ -7,7 +7,9 @@ import HeaderToolbar from "./Navigation.HeaderToolbar.js";
 import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
+import Search from "./Navigation.Search.js";
 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";
@@ -19,6 +21,8 @@ export const Navigation = {
     CollapsingHeader,
     FloatingBar,
     SearchBar,
+    Search,
+    SearchSuggestions,
     Header,
     HeaderToolbar,
     TabItem,

package/dist/Typography/Typography.Heading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { AppText } from "./Typography.Text.js";
 const Heading = ({ variant = "h1", ...props }) => {
-    return _jsx(AppText, { variant: variant, ...props });
+    return _jsx(AppText, { accessibilityRole: "header", variant: variant, ...props });
 };
 export default Heading;

package/dist/Typography/Typography.SelectableText.d.ts

@@ -0,0 +1,10 @@
+import { typographyVariants } from "../theme/typography.js";
+import { type TextInputProps } from "react-native";
+export type SelectableTextProps = Pick<TextInputProps, "accessibilityLabel" | "testID" | "style" | "allowFontScaling" | "onSelectionChange"> & {
+    value: string;
+    variant?: keyof typeof typographyVariants;
+    semibold?: boolean;
+    className?: string;
+};
+declare function SelectableText({ value, variant, semibold, className, style, ...props }: SelectableTextProps): import("react").JSX.Element;
+export default SelectableText;

package/dist/Typography/Typography.SelectableText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw.js";
+import { resolveTextFontFamily, typographyVariants, } 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",
+            },
+            style,
+        ], underlineColorAndroid: "transparent", value: value }));
+}
+export default SelectableText;

package/dist/Typography/Typography.Text.js

@@ -1,31 +1,15 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
-import { fontFamilies, Typography, variantFontRole, } from "../theme/typography.js";
-import { Text } from "react-native";
+import { resolveTextFontFamily, Typography, } 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];
     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 IBM Plex Sans weights — but NOT when the active family is a
-    // branded face (a configured title face, or IBM Plex Mono): those carry their own weight, so
-    // forcing Plex Sans would erase the typeface. Keep the variant's family for those.
-    const isBrandedFace = typeof variantFamily === "string" &&
-        !variantFamily.startsWith("Inter_") &&
-        !variantFamily.startsWith("IBMPlexSans_");
     const textStyle = {
         ...baseStyle,
         ...(color ? { color } : {}),
-        fontFamily: isBrandedFace
-            ? variantFamily
-            : bold
-                ? fontFamilies.extraBold
-                : semibold
-                    ? fontFamilies.semiBold
-                    : variantFamily,
-        ...(Array.isArray(style) ? Object.assign({}, ...style) : style),
+        fontFamily: resolveTextFontFamily(variant, bold, semibold),
+        ...StyleSheet.flatten(style),
     };
     return (_jsx(Text, { className: textClassName, style: textStyle, ...props, children: children }));
 }

package/dist/Typography/index.d.ts

@@ -1,7 +1,10 @@
+import SelectableText from "./Typography.SelectableText.js";
 import { AppText } from "./Typography.Text.js";
 export declare const Typography: {
     Text: typeof AppText;
     Heading: import("react").FC<import("./Typography.Heading.js").TypographyProps>;
+    SelectableText: typeof SelectableText;
 };
 export { AppText };
+export { SelectableText };
 export default Typography;

package/dist/Typography/index.js

@@ -1,8 +1,11 @@
 import Heading from "./Typography.Heading.js";
+import SelectableText from "./Typography.SelectableText.js";
 import { AppText } from "./Typography.Text.js";
 export const Typography = {
     Text: AppText,
     Heading,
+    SelectableText,
 };
 export { AppText };
+export { SelectableText };
 export default Typography;

package/dist/branding.d.ts

@@ -1,3 +1,4 @@
+import type { ImageSource } from "./utils/image.js";
 import { type ImageSourcePropType } from "react-native";
 /**
  * Centralized brand assets. Set once at app boot via `setBranding({ ... })`. Components
@@ -14,14 +15,14 @@ import { type ImageSourcePropType } from "react-native";
  */
 export interface BrandingConfig {
     /** Brand logo (used by `Display.Logo`, `widgets.ScreenHeader`, etc.). */
-    logo?: ImageSourcePropType;
+    logo?: ImageSource;
     /** Brand symbol / icon used by `Display.Pattern kind="mesh"` as the tiled texture. */
     mesh?: ImageSourcePropType;
     /** Tile size in px (overrides `theme.pattern.size` for the brand mesh). */
     meshSize?: number;
 }
 export declare function setBranding(config: BrandingConfig): void;
-export declare function getBrandingLogo(): ImageSourcePropType | undefined;
+export declare function getBrandingLogo(): ImageSource | undefined;
 export declare function getBrandingMesh(): ImageSourcePropType | undefined;
 export declare function getBrandingMeshSize(): number | undefined;
 /** Test-only — reset to initial empty state. Not part of the public API. */

package/dist/layouts/AuthContainer.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
 interface AuthContainerProps {
@@ -5,11 +6,13 @@ interface AuthContainerProps {
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
     /** Gradient + optional texture surface for the header area. Defaults to the `warm`
      *  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, }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

package/dist/layouts/AuthContainer.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 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 ?? "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(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/primitives/BaseButton.d.ts

@@ -1,6 +1,7 @@
 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: "bg-accent";
@@ -10,18 +11,18 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
         true: "opacity-70";
     };
-}, undefined, "rounded-md items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-md items-center justify-center flex-row min-h-[48px]", {
     variant: {
         primary: "bg-accent";
         accent: "bg-transparent";
@@ -30,12 +31,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -50,12 +51,12 @@ declare const button: import("tailwind-variants").TVReturnType<{
         outlineDanger: "bg-transparent border border-danger";
         outlineBlack: "bg-transparent border border-border-strong";
         flat: "bg-text-primary/10";
-        link: "bg-transparent min-h-0";
+        link: "bg-transparent";
         transparent: "bg-transparent border border-border-light";
     };
     size: {
-        small: "py-1.5 px-3 min-h-[36px]";
-        medium: "py-2.5 px-4 min-h-[44px]";
+        small: "py-1.5 px-3 min-h-[48px]";
+        medium: "py-2.5 px-4 min-h-[48px]";
         large: "py-3 px-5 min-h-[48px]";
     };
     disabled: {
@@ -123,21 +124,23 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         true: "opacity-70";
     };
 }, undefined>>;
-export interface BaseButtonProps extends VariantProps<typeof button> {
+export interface BaseButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    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;
+    testID?: string;
 }
 export declare const BaseButtonIcon: FC<BaseButtonIconProps>;
 declare const BaseButtonWithIcon: React.FC<BaseButtonProps> & {