@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/Display/Display.KeyValue.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { View } from "react-native";
-function KeyValue({ label, value, align = "row", className, testID }) {
-    const isRow = align === "row";
-    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, children: value })) : (value)] }));
+import { useWindowDimensions, View } from "react-native";
+import CopyableText from "./Display.CopyableText";
+function KeyValue({ label, value, align = "row", className, testID, copyable = false, selectable = false, }) {
+    const { width, fontScale } = useWindowDimensions();
+    const isRow = align === "row" || (align === "auto" && width >= 360 && fontScale <= 1.3);
+    return (_jsxs(View, { className: cn(isRow ? "flex-row items-center justify-between gap-3" : "gap-0.5", "py-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), typeof value === "string" || typeof value === "number" ? (_jsx(View, { className: cn("flex-shrink min-w-0", isRow && "flex-1 items-end"), children: copyable ? (_jsx(CopyableText, { accessibilityLabel: `Copiar ${label}`, selectable: selectable, value: String(value) })) : selectable ? (_jsx(Typography.SelectableText, { className: cn("text-text-primary", isRow && "text-right"), semibold: isRow, style: { alignSelf: "stretch" }, value: String(value) })) : (_jsx(Typography.Text, { className: cn("text-text-primary", isRow && "text-right"), selectable: selectable, semibold: isRow, children: value })) })) : (value)] }));
 }
 export default KeyValue;

package/dist/Display/Display.ListGroup.d.ts

@@ -0,0 +1,23 @@
+import { type SectionHeaderAction, type SectionHeaderProps } from "./Display.SectionHeader.js";
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export interface ListGroupProps {
+    title: string;
+    description?: string;
+    footer?: ReactNode;
+    action?: SectionHeaderAction;
+    children: ReactNode;
+    surface?: "inset" | "plain";
+    separators?: boolean;
+    className?: string;
+    contentClassName?: string;
+    testID?: string;
+    headerProps?: Omit<SectionHeaderProps, "title" | "subtitle" | "action">;
+    footerTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    separatorStyle?: StyleProp<ViewStyle>;
+}
+declare function ListGroup({ title, description, footer, action, children, surface, separators, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }: ListGroupProps): import("react").JSX.Element;
+export default ListGroup;

package/dist/Display/Display.ListGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import SectionHeader from "./Display.SectionHeader.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { Children } from "react";
+import { StyleSheet, View } from "react-native";
+function ListGroup({ title, description, footer, action, children, surface = "inset", separators = true, className, contentClassName, testID, headerProps, footerTextProps, style, contentStyle, separatorStyle, }) {
+    const rows = Children.toArray(children);
+    return (_jsxs(View, { className: cn("gap-2", className), style: style, testID: testID, children: [_jsx(SectionHeader, { ...headerProps, action: action, subtitle: description, title: title }), _jsx(View, { className: cn(surface === "inset" && "rounded-2xl bg-bg-card overflow-hidden", contentClassName), style: contentStyle, testID: testID ? `${testID}-content` : undefined, children: rows.map((row, index) => (_jsxs(View, { children: [row, separators && index < rows.length - 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "bg-border-default", importantForAccessibility: "no-hide-descendants", style: [
+                                {
+                                    height: StyleSheet.hairlineWidth,
+                                    marginHorizontal: 16,
+                                },
+                                separatorStyle,
+                            ], testID: testID ? `${testID}-separator-${index}` : undefined })) : null] }, typeof row === "object" && "key" in row ? row.key : index))) }), typeof footer === "string" ? (_jsx(Typography.Text, { className: "text-text-secondary px-4", variant: "bodySmall", ...footerTextProps, children: footer })) : (footer)] }));
+}
+export default ListGroup;

package/dist/Display/Display.ListItem.d.ts

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import { Typography } from "../Typography/index.js";
+import type { ComponentProps, ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface ListItemProps {
     title: string;
     subtitle?: string;
@@ -12,6 +14,18 @@ export interface ListItemProps {
     showDivider?: boolean;
     className?: string;
     testID?: string;
+    accessibleSizing?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    disabled?: boolean;
+    variant?: "default" | "mobile";
+    value?: string;
+    layout?: "auto" | "row" | "stacked";
+    density?: "compact" | "comfortable";
+    style?: StyleProp<ViewStyle>;
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    valueTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, }: ListItemProps): import("react").JSX.Element;
+declare function ListItem({ title, subtitle, leading, trailing, chevron, onPress, showDivider, className, testID, accessibleSizing, accessibilityLabel, accessibilityHint, disabled, variant, value, layout, density, style, titleTextProps, subtitleTextProps, valueTextProps, }: ListItemProps): import("react").JSX.Element;
 export default ListItem;

package/dist/Display/Display.ListItem.js

@@ -1,18 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import Icon from "./Display.Icon.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 { Typography } from "../Typography/index.js";
-import { View } from "react-native";
-function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider = true, className, testID, }) {
+import { Pressable as NativePressable, useWindowDimensions, View, } from "react-native";
+function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress, showDivider, className, testID, accessibleSizing = false, accessibilityLabel, accessibilityHint, disabled = false, variant = "default", value, layout = "auto", density = "compact", style, titleTextProps, subtitleTextProps, valueTextProps, }) {
+    const theme = useTheme();
+    const { width, fontScale } = useWindowDimensions();
+    const mobile = variant === "mobile";
+    const comfortable = mobile && density === "comfortable";
+    const stacked = mobile &&
+        (value !== undefined || trailing != null) &&
+        (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
     const right = trailing ??
-        (chevron ? _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) : null);
-    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: "flex-1 gap-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null] }), right ? _jsx(View, { className: "ml-3 justify-center", children: right }) : null] }));
-    const base = cn("flex-row items-center py-3 px-4 bg-bg-card", showDivider && "border-b border-border-default", className);
+        (value || chevron ? (_jsxs(View, { className: "flex-row items-center gap-2", children: [value ? (_jsx(Typography.Text, { className: "text-text-secondary flex-shrink", variant: comfortable ? "bodyReadable" : "body", ...valueTextProps, children: value })) : null, chevron ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: theme.icon.tertiary, name: "chevron-forward", size: 18 }) })) : null] })) : null);
+    const content = (_jsxs(_Fragment, { children: [leading ? _jsx(View, { className: "mr-3 justify-center", children: leading }) : null, _jsxs(View, { className: cn("flex-1", mobile ? "min-w-0 gap-1" : "gap-0.5"), children: [_jsx(Typography.Text, { className: mobile && disabled ? "text-text-disabled" : "text-text-primary", numberOfLines: mobile || accessibleSizing ? undefined : 1, semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: mobile || accessibleSizing ? undefined : 1, variant: comfortable ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null, stacked && right ? _jsx(View, { className: "self-start mt-1", children: right }) : null] }), !stacked && right ? (_jsx(View, { className: cn("ml-3 justify-center", mobile && "flex-shrink"), style: mobile ? { maxWidth: "45%" } : undefined, children: right })) : null] }));
+    const base = cn("flex-row items-center px-4", mobile && !comfortable ? "py-2" : "py-3", !mobile && "bg-bg-card", (showDivider ?? !mobile) && "border-b border-border-default", disabled && !mobile && "opacity-50", className);
     if (onPress) {
-        return (_jsx(Pressable, { className: base, onPress: onPress, testID: testID, children: content }));
+        if (mobile) {
+            return (_jsx(NativePressable, { accessibilityHint: accessibilityHint ?? subtitle, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: value !== undefined ? { text: value } : undefined, className: base, disabled: disabled, onPress: onPress, style: ({ pressed }) => [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        backgroundColor: pressed ? theme.bg.hover : undefined,
+                    },
+                    style,
+                ], testID: testID, children: content }));
+        }
+        return (_jsx(Pressable, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, className: base, disabled: disabled, onPress: onPress, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], testID: testID, children: content }));
     }
-    return (_jsx(View, { className: base, testID: testID, children: content }));
+    return (_jsx(View, { className: base, style: style, testID: testID, children: content }));
 }
 export default ListItem;

package/dist/Display/Display.SectionHeader.d.ts

@@ -1,3 +1,6 @@
+import { Typography } from "../Typography/index.js";
+import type { ComponentProps } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export interface SectionHeaderAction {
     label: string;
     onPress: () => void;
@@ -8,6 +11,13 @@ export interface SectionHeaderProps {
     action?: SectionHeaderAction;
     className?: string;
     testID?: string;
+    variant?: "default" | "mobile";
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children" | "accessibilityRole">;
+    subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    actionTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
 }
-declare function SectionHeader({ title, subtitle, action, className, testID }: SectionHeaderProps): import("react").JSX.Element;
+declare function SectionHeader({ title, subtitle, action, className, testID, variant, titleTextProps, subtitleTextProps, style, contentStyle, actionStyle, actionTextProps, }: SectionHeaderProps): import("react").JSX.Element;
 export default SectionHeader;

package/dist/Display/Display.SectionHeader.js

@@ -3,7 +3,16 @@ import Pressable from "../primitives/Pressable.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function SectionHeader({ title, subtitle, action, className, testID }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), testID: testID, children: [_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: action.label }) })) : null] }));
+function SectionHeader({ title, subtitle, action, className, testID, variant = "default", titleTextProps, subtitleTextProps, style, contentStyle, actionStyle, actionTextProps, }) {
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), style: style, testID: testID, children: [_jsxs(View, { className: "flex-1", style: contentStyle, children: [_jsx(Typography.Text, { accessibilityRole: "header", className: "text-text-primary", semibold: true, variant: variant === "mobile" ? "bodyReadable" : "subtitle", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: variant === "mobile" ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, style: [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        justifyContent: "center",
+                        marginLeft: 12,
+                        flexShrink: 1,
+                    },
+                    actionStyle,
+                ], children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", ...actionTextProps, children: action.label }) })) : null] }));
 }
 export default SectionHeader;

package/dist/Display/Display.SwipeableRow.d.ts

@@ -7,9 +7,11 @@ export interface SwipeRowAction {
 }
 export interface SwipeableRowProps {
     children: ReactNode;
+    /** Visible alternative for essential swipe actions. */
+    visibleActions?: ReactNode;
     rightActions?: SwipeRowAction[];
     leftActions?: SwipeRowAction[];
     testID?: string;
 }
-declare function SwipeableRow({ children, rightActions, leftActions, testID }: SwipeableRowProps): import("react").JSX.Element;
+declare function SwipeableRow({ children, visibleActions, rightActions, leftActions, testID, }: SwipeableRowProps): import("react").JSX.Element;
 export default SwipeableRow;

package/dist/Display/Display.SwipeableRow.js

@@ -17,13 +17,13 @@ function ActionButtons({ actions, onDone, }) {
                 paddingHorizontal: 20,
             }, children: [action.icon ? (_jsx(Icon, { color: theme.text.inverse, name: action.icon, size: 20 })) : null, action.label ? (_jsx(Typography.Text, { className: "text-text-inverse text-xs mt-1", children: action.label })) : null] }, index))) }));
 }
-function SwipeableRow({ children, rightActions, leftActions, testID }) {
+function SwipeableRow({ children, visibleActions, rightActions, leftActions, testID, }) {
     const ref = useRef(null);
     const close = () => ref.current?.close();
-    return (_jsx(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
+    return (_jsxs(Swipeable, { ref: ref, renderLeftActions: leftActions?.length
             ? () => _jsx(ActionButtons, { actions: leftActions, onDone: close })
             : undefined, renderRightActions: rightActions?.length
             ? () => _jsx(ActionButtons, { actions: rightActions, onDone: close })
-            : undefined, testID: testID, children: children }));
+            : undefined, testID: testID, children: [children, visibleActions ? _jsx(View, { className: "flex-row", children: visibleActions }) : null] }));
 }
 export default SwipeableRow;

package/dist/Display/index.d.ts

@@ -12,6 +12,7 @@ import GradientSurface from "./Display.GradientSurface.js";
 import IconBadge from "./Display.IconBadge.js";
 import DisplayImage from "./Display.Image.js";
 import KeyValue from "./Display.KeyValue.js";
+import ListGroup from "./Display.ListGroup.js";
 import ListItem from "./Display.ListItem.js";
 import MediaCard from "./Display.MediaCard.js";
 import MediaEmbed from "./Display.MediaEmbed.js";
@@ -66,6 +67,7 @@ export declare const Display: {
     StoryTray: typeof StoryTray;
     StoryViewer: typeof StoryViewer;
     ListItem: typeof ListItem;
+    ListGroup: typeof ListGroup;
     KeyValue: typeof KeyValue;
     DataTable: typeof DataTable;
     Stat: typeof Stat;
@@ -96,6 +98,8 @@ export declare const Display: {
 };
 export { type BadgeProps, BadgeVariants };
 export type { CircleButtonProps } from "./Display.CircleButton.js";
+export type { ListGroupProps } from "./Display.ListGroup.js";
+export type { ListItemProps } from "./Display.ListItem.js";
 export type { MenuCardProps } from "./Display.MenuCard.js";
 export type { MenuGridItem } from "./Display.MenuGrid.js";
 export default Display;

package/dist/Display/index.js

@@ -16,6 +16,7 @@ import Icon from "./Display.Icon.js";
 import IconBadge from "./Display.IconBadge.js";
 import DisplayImage from "./Display.Image.js";
 import KeyValue from "./Display.KeyValue.js";
+import ListGroup from "./Display.ListGroup.js";
 import ListItem from "./Display.ListItem.js";
 import Logo from "./Display.Logo.js";
 import MediaCard from "./Display.MediaCard.js";
@@ -57,6 +58,7 @@ export const Display = {
     StoryTray,
     StoryViewer,
     ListItem,
+    ListGroup,
     KeyValue,
     DataTable,
     Stat,

package/dist/Feedback/Feedback.Banner.js

@@ -30,6 +30,6 @@ const iconByTone = {
 function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
     const styles = banner({ tone });
     const icon = iconByTone[tone ?? "info"];
-    return (_jsxs(View, { className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
+    return (_jsxs(View, { accessibilityLiveRegion: tone === "danger" ? "assertive" : "polite", accessibilityRole: tone === "danger" ? "alert" : undefined, className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: icon.color, name: icon.name, size: 20 }), _jsxs(View, { className: "flex-1 gap-0.5", children: [title ? _jsx(Typography.Text, { className: styles.title(), children: title }) : null, _jsx(Typography.Text, { className: styles.message(), children: message }), action ? _jsx(View, { className: "mt-2", children: action }) : null] }), onClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", accessibilityRole: "button", hitSlop: 8, onPress: onClose, children: _jsx(Icon, { color: theme.icon.secondary, name: "close", size: 18 }) })) : null] }));
 }
 export default Banner;

package/dist/Feedback/Feedback.EmptyState.d.ts

@@ -10,6 +10,7 @@ export interface EmptyStateProps {
     children?: ReactNode;
     className?: string;
     testID?: string;
+    accessibleSizing?: boolean;
 }
-declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, }: EmptyStateProps): import("react").JSX.Element;
+declare function EmptyState({ title, description, icon, image, actionLabel, onAction, children, className, testID, accessibleSizing, }: EmptyStateProps): import("react").JSX.Element;
 export default EmptyState;

package/dist/Feedback/Feedback.EmptyState.js

@@ -5,7 +5,7 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Image, View } from "react-native";
-function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(Image, { resizeMode: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
+function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, accessibleSizing = false, }) {
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-8 gap-3", className), testID: testID, children: [image ? (_jsx(Image, { resizeMode: "contain", source: image, style: { width: 140, height: 140 } })) : (_jsx(View, { className: "w-20 h-20 rounded-full bg-bg-muted items-center justify-center", children: _jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 40 }) })), _jsx(Typography.Text, { accessibilityRole: "header", align: "center", className: "text-text-primary", semibold: true, variant: "subtitle", children: title }), description ? (_jsx(Typography.Text, { align: "center", className: "text-text-secondary", variant: "body", children: description })) : null, actionLabel && onAction ? (_jsx(View, { className: "mt-2", children: _jsx(BaseButton, { accessibleSizing: accessibleSizing, onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
 }
 export default EmptyState;

package/dist/Feedback/Feedback.Error.d.ts

@@ -4,6 +4,8 @@ interface ErrorProps {
     onBack?: () => void;
     onHome?: () => void;
     className?: string;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
-declare function Error({ message, onRetry, onBack, onHome, className }: ErrorProps): import("react").JSX.Element;
+declare function Error({ message, onRetry, onBack, onHome, className, accessibleSizing, testID, }: ErrorProps): import("react").JSX.Element;
 export default Error;

package/dist/Feedback/Feedback.Error.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
-import Button from "../Form/Form.Button.js";
+import Button from "../primitives/BaseButton.js";
+import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Error({ message, onRetry, onBack, onHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { color: "#ef4444", name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && _jsx(Button, { className: "w-full", onPress: onRetry, title: "Reintentar" }), onBack && (_jsx(Button, { className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
+function Error({ message, onRetry, onBack, onHome, className, accessibleSizing = false, testID, }) {
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), testID: testID, children: [_jsx(Icon, { color: theme.danger, name: "exclamation-circle", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { accessibilityRole: "header", className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Error!" }), _jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: message || "Ocurrió un error al cargar la información" }), _jsxs(View, { className: "mt-8 w-full gap-3", children: [onRetry && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onRetry, title: "Reintentar" })), onBack && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onBack, title: "Volver", variant: "secondary" })), onHome && (_jsx(Button, { accessibleSizing: accessibleSizing, className: "w-full", onPress: onHome, title: "Ir al inicio", variant: "outline" }))] })] }));
 }
 export default Error;

package/dist/Form/Form.Checkbox.d.ts

@@ -7,7 +7,10 @@ interface RowCheckBoxProps {
     isChecked?: boolean;
     onCheck?: (isChecked: boolean) => void;
     disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibleSizing?: boolean;
     className?: string;
+    testID?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, accessibilityLabel, accessibleSizing, className, testID, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

package/dist/Form/Form.Checkbox.js

@@ -4,7 +4,7 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Checkbox } from "expo-checkbox";
 import { Pressable, View } from "react-native";
-function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, className, }) {
+function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, accessibleSizing = false, className, testID, }) {
     const handlePress = () => {
         if (!disabled) {
             onCheck(!isChecked);
@@ -25,6 +25,6 @@ function RowCheckBox({ mainText, subText, rightText, rightComponent, leftCompone
         }
         return null;
     };
-    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: accessibleSizing ? { minHeight: 48, paddingVertical: 8 } : undefined, testID: testID, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;

package/dist/Form/Form.DatePicker.d.ts

@@ -8,6 +8,7 @@ export interface DatePickerProps {
     minimumDate?: Date;
     maximumDate?: Date;
     disabled?: boolean;
+    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
@@ -16,5 +17,5 @@ export interface DatePickerProps {
  * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
  * Subpath `Form/DatePicker`; **optional** peer dep.
  */
-declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, className, testID, }: DatePickerProps): import("react").JSX.Element;
+declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, accessibleSizing, className, testID, }: DatePickerProps): import("react").JSX.Element;
 export default DatePicker;

package/dist/Form/Form.DatePicker.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import DateTimePicker from "@react-native-community/datetimepicker";
 import Icon from "../Display/Display.Icon.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 { Typography } from "../Typography/index.js";
 import { useState } from "react";
@@ -24,8 +24,9 @@ const iconByMode = {
  * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
  * Subpath `Form/DatePicker`; **optional** peer dep.
  */
-function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
+function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, accessibleSizing = false, className, testID, }) {
     const [open, setOpen] = useState(false);
+    const theme = useTheme();
     const fmt = format ?? ((d) => defaultFormat(d, mode));
     const handleValueChange = (_event, date) => {
         if (Platform.OS === "android")
@@ -33,6 +34,6 @@ function DatePicker({ value, onChange, mode = "date", label, placeholder = "Sele
         if (date)
             onChange(date);
     };
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), style: accessibleSizing ? { minHeight: 48 } : undefined, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
 }
 export default DatePicker;

package/dist/Form/Form.FilterButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.FilterButton` from `@sincpro/mobile-ui/Actions` instead. */
-export type { FilterButtonProps } from "../Actions/Actions.FilterButton.js";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "../Actions/Actions.FilterButton.js";
 export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";

package/dist/Form/Form.Input.d.ts

@@ -1,10 +1,12 @@
-import type React from "react";
-import { type TextInputProps } from "react-native";
+import type { ComponentRef, Ref } from "react";
+import { TextInput, type TextInputProps } from "react-native";
 interface FormInputProps extends TextInputProps {
+    ref?: Ref<ComponentRef<typeof TextInput>>;
     label: string;
     error?: string;
     tooltip?: string;
     className?: string;
+    accessibleSizing?: boolean;
 }
-declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ...props }: FormInputProps): React.JSX.Element;
+declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, accessibleSizing, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

@@ -15,7 +15,7 @@ const inputContainer = tv({
     },
     defaultVariants: { state: "default" },
 });
-function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, ...props }) {
+function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, accessibleSizing = false, ref, ...props }) {
     const [isFocused, setIsFocused] = useState(false);
     const hasError = Boolean(error);
     const handleFocus = (e) => {
@@ -33,6 +33,6 @@ function FormInput({ label, error, tooltip, style, multiline = false, numberOfLi
             return "focused";
         return "default";
     };
-    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
+    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { accessibilityHint: error || tooltip, accessibilityLabel: label, className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, ref: ref, selectionColor: theme.primary, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
 }
 export default FormInput;

package/dist/Form/Form.KeyboardForm.d.ts

@@ -0,0 +1,11 @@
+import { type KeyboardToolbarProps } from "./Form.KeyboardToolbar.js";
+import { type ReactNode, type Ref } from "react";
+import type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
+export interface KeyboardFormProps extends KeyboardAwareScrollViewProps {
+    children: ReactNode;
+    ref?: Ref<KeyboardAwareScrollViewRef>;
+    toolbar?: boolean;
+    toolbarProps?: Omit<KeyboardToolbarProps, "onHeightChange">;
+    toolbarLabels?: Pick<KeyboardToolbarProps, "previousLabel" | "nextLabel" | "doneLabel" | "showDoneLabel">;
+}
+export default function KeyboardForm({ children, toolbar, toolbarLabels, toolbarProps, bottomOffset, style, ...props }: KeyboardFormProps): import("react").JSX.Element;

package/dist/Form/Form.KeyboardForm.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import KeyboardToolbar from "./Form.KeyboardToolbar.js";
+import { useState } from "react";
+import { View } from "react-native";
+import { KeyboardAwareScrollView, KeyboardToolbar as NativeToolbar, } from "react-native-keyboard-controller";
+export default function KeyboardForm({ children, toolbar = true, toolbarLabels, toolbarProps, bottomOffset, style, ...props }) {
+    const [toolbarHeight, setToolbarHeight] = useState(48);
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(NativeToolbar.Group, { style: { flex: 1 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset ?? (toolbar ? toolbarHeight + 24 : 20), keyboardShouldPersistTaps: "handled", style: [{ flex: 1 }, style], ...props, children: children }) }), toolbar ? (_jsx(KeyboardToolbar, { ...toolbarLabels, ...toolbarProps, onHeightChange: setToolbarHeight })) : null] }));
+}

package/dist/Form/Form.KeyboardToolbar.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+export type KeyboardToolbarAction = "previous" | "next" | "done";
+export interface KeyboardToolbarProps {
+    previousLabel?: string;
+    nextLabel?: string;
+    doneLabel?: string;
+    showDoneLabel?: boolean;
+    onHeightChange?: (height: number) => void;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    iconSize?: number;
+    testID?: string;
+    renderActionContent?: (action: KeyboardToolbarAction, state: {
+        label: string;
+        disabled: boolean;
+    }) => ReactNode;
+}
+export default function KeyboardToolbar({ previousLabel, nextLabel, doneLabel, showDoneLabel, onHeightChange, className, style, actionStyle, labelStyle, iconSize, testID, renderActionContent, }: KeyboardToolbarProps): import("react").JSX.Element;

package/dist/Form/Form.KeyboardToolbar.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { useEffect, useRef, useState } from "react";
+import { StyleSheet, useWindowDimensions, View, } from "react-native";
+import { FocusedInputEvents, KeyboardController, KeyboardStickyView, useKeyboardState, } from "react-native-keyboard-controller";
+export default function KeyboardToolbar({ previousLabel = "Campo anterior", nextLabel = "Campo siguiente", doneLabel = "Ocultar teclado", showDoneLabel = false, onHeightChange, className, style, actionStyle, labelStyle, iconSize = 20, testID = "keyboard-toolbar", renderActionContent, }) {
+    const theme = useTheme();
+    const frame = useRef(null);
+    const { height: windowHeight } = useWindowDimensions();
+    const [bottomGap, setBottomGap] = useState(0);
+    const [height, setHeight] = useState(48);
+    const [inputs, setInputs] = useState({ current: 0, count: 0 });
+    const isVisible = useKeyboardState((state) => state.isVisible);
+    useEffect(() => {
+        const subscription = FocusedInputEvents.addListener("focusDidSet", setInputs);
+        return () => subscription.remove();
+    }, []);
+    const previousDisabled = inputs.current === 0;
+    const nextDisabled = inputs.current >= inputs.count - 1;
+    const content = (action, label, disabled) => {
+        if (renderActionContent)
+            return renderActionContent(action, { label, disabled });
+        if (action === "done" && showDoneLabel)
+            return (_jsx(Typography.Text, { className: "text-text-accent", style: labelStyle, variant: "bodySmall", children: label }));
+        return (_jsx(Icon, { color: disabled ? theme.text.tertiary : theme.text.accent, name: action === "previous"
+                ? "chevron-up"
+                : action === "next"
+                    ? "chevron-down"
+                    : "checkmark", size: iconSize }));
+    };
+    return (_jsx(View, { accessibilityElementsHidden: !isVisible, importantForAccessibility: isVisible ? "auto" : "no-hide-descendants", onLayout: () => {
+            frame.current?.measureInWindow((_x, y, _width, frameHeight) => setBottomGap(Math.max(0, windowHeight - y - frameHeight)));
+        }, pointerEvents: "box-none", ref: frame, style: StyleSheet.absoluteFill, children: _jsx(KeyboardStickyView, { offset: { closed: height, opened: bottomGap - 8 }, style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: _jsxs(View, { className: className, onLayout: (event) => {
+                    const nextHeight = event.nativeEvent.layout.height;
+                    setHeight(nextHeight);
+                    onHeightChange?.(nextHeight);
+                }, style: [
+                    {
+                        minHeight: 48,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        paddingHorizontal: 8,
+                        backgroundColor: theme.bg.card,
+                        borderTopWidth: StyleSheet.hairlineWidth,
+                        borderTopColor: theme.border.light,
+                    },
+                    style,
+                ], testID: testID, children: [_jsxs(View, { style: { flexDirection: "row" }, children: [_jsx(Pressable, { accessibilityLabel: previousLabel, disabled: previousDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("prev"), style: [styles.arrow, actionStyle], children: content("previous", previousLabel, previousDisabled) }), _jsx(Pressable, { accessibilityLabel: nextLabel, disabled: nextDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("next"), style: [styles.arrow, actionStyle], children: content("next", nextLabel, nextDisabled) })] }), _jsx(Pressable, { accessibilityLabel: doneLabel, hitSlop: 0, onPress: () => KeyboardController.dismiss(), style: [
+                            {
+                                minWidth: 48,
+                                minHeight: 48,
+                                flexShrink: 1,
+                                justifyContent: "center",
+                                padding: 8,
+                            },
+                            actionStyle,
+                        ], children: content("done", doneLabel, false) })] }) }) }));
+}
+const styles = StyleSheet.create({
+    arrow: {
+        minWidth: 48,
+        minHeight: 48,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

package/dist/Form/Form.Select.d.ts

@@ -10,8 +10,10 @@ export interface SelectProps<T extends string | number> {
     placeholder?: string;
     title?: string;
     disabled?: boolean;
+    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
+    showCloseButton?: boolean;
 }
-declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, className, testID, }: SelectProps<T>): import("react").JSX.Element;
+declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, accessibleSizing, className, testID, showCloseButton, }: SelectProps<T>): import("react").JSX.Element;
 export default Select;