@sincpro/mobile-ui 2.0.0 → 3.0.0

package/dist/Display/Display.Timeline.js

@@ -11,7 +11,7 @@ function Timeline({ steps, current, className, testID }) {
             const reached = done || active;
             const isLast = index === steps.length - 1;
             const dotColor = reached ? theme.primary : theme.bg.muted;
-            return (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center", style: { width: 28 }, children: [_jsx(View, { className: "w-6 h-6 rounded-full items-center justify-center", style: { backgroundColor: dotColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "checkmark", size: 14 })) : (_jsx(View, { className: "w-2 h-2 rounded-full", style: {
+            return (_jsxs(View, { className: "flex-row", children: [_jsxs(View, { className: "items-center", style: { width: 28 }, children: [_jsx(View, { className: "w-6 h-6 rounded-full items-center justify-center", style: { backgroundColor: dotColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "check", size: 14 })) : (_jsx(View, { className: "w-2 h-2 rounded-full", style: {
                                         backgroundColor: active ? theme.text.inverse : theme.border.strong,
                                     } })) }), !isLast ? (_jsx(View, { className: "flex-1 w-0.5 my-1", style: { backgroundColor: done ? theme.primary : theme.border.default } })) : null] }), _jsxs(View, { className: cn("flex-1 pb-5", isLast && "pb-0"), children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: reached ? "text-text-primary" : "text-text-tertiary", semibold: active, variant: "body", children: step.title }), step.time ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: step.time })) : null] }), step.description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: step.description })) : null] })] }, step.title));
         }) }));

package/dist/Display/icon-map.d.ts

@@ -0,0 +1,344 @@
+import type { AndroidSymbol, SFSymbol } from "expo-symbols";
+export type IconDefinition = Readonly<{
+    sf: SFSymbol;
+    md: AndroidSymbol;
+}>;
+export declare const ICON_MAP: {
+    readonly add: {
+        readonly sf: "plus";
+        readonly md: "add";
+    };
+    readonly "add-circle": {
+        readonly sf: "plus.circle.fill";
+        readonly md: "add_circle";
+    };
+    readonly archive: {
+        readonly sf: "archivebox";
+        readonly md: "archive";
+    };
+    readonly back: {
+        readonly sf: "chevron.left";
+        readonly md: "arrow_back";
+    };
+    readonly bicycle: {
+        readonly sf: "bicycle";
+        readonly md: "directions_bike";
+    };
+    readonly book: {
+        readonly sf: "book";
+        readonly md: "book";
+    };
+    readonly bookmark: {
+        readonly sf: "bookmark.fill";
+        readonly md: "bookmark";
+    };
+    readonly "bookmark-empty": {
+        readonly sf: "bookmark";
+        readonly md: "bookmark_border";
+    };
+    readonly calendar: {
+        readonly sf: "calendar";
+        readonly md: "calendar_month";
+    };
+    readonly camera: {
+        readonly sf: "camera";
+        readonly md: "camera_alt";
+    };
+    readonly card: {
+        readonly sf: "creditcard";
+        readonly md: "credit_card";
+    };
+    readonly cart: {
+        readonly sf: "cart";
+        readonly md: "shopping_cart";
+    };
+    readonly cash: {
+        readonly sf: "banknote";
+        readonly md: "payments";
+    };
+    readonly check: {
+        readonly sf: "checkmark";
+        readonly md: "check";
+    };
+    readonly circle: {
+        readonly sf: "circle";
+        readonly md: "radio_button_unchecked";
+    };
+    readonly close: {
+        readonly sf: "xmark";
+        readonly md: "close";
+    };
+    readonly collapse: {
+        readonly sf: "chevron.up";
+        readonly md: "expand_less";
+    };
+    readonly copy: {
+        readonly sf: "doc.on.doc";
+        readonly md: "content_copy";
+    };
+    readonly "dark-mode": {
+        readonly sf: "moon";
+        readonly md: "dark_mode";
+    };
+    readonly database: {
+        readonly sf: "externaldrive";
+        readonly md: "database";
+    };
+    readonly delete: {
+        readonly sf: "trash";
+        readonly md: "delete";
+    };
+    readonly dismiss: {
+        readonly sf: "xmark.circle.fill";
+        readonly md: "cancel";
+    };
+    readonly document: {
+        readonly sf: "doc.text";
+        readonly md: "description";
+    };
+    readonly down: {
+        readonly sf: "arrow.down";
+        readonly md: "arrow_downward";
+    };
+    readonly download: {
+        readonly sf: "arrow.down.to.line";
+        readonly md: "download";
+    };
+    readonly "download-cloud": {
+        readonly sf: "icloud.and.arrow.down";
+        readonly md: "cloud_download";
+    };
+    readonly edit: {
+        readonly sf: "pencil";
+        readonly md: "edit";
+    };
+    readonly empty: {
+        readonly sf: "tray";
+        readonly md: "inbox";
+    };
+    readonly error: {
+        readonly sf: "exclamationmark.circle.fill";
+        readonly md: "error";
+    };
+    readonly expand: {
+        readonly sf: "chevron.down";
+        readonly md: "expand_more";
+    };
+    readonly filter: {
+        readonly sf: "slider.horizontal.3";
+        readonly md: "tune";
+    };
+    readonly folder: {
+        readonly sf: "folder";
+        readonly md: "folder";
+    };
+    readonly grid: {
+        readonly sf: "square.grid.2x2";
+        readonly md: "grid_view";
+    };
+    readonly help: {
+        readonly sf: "questionmark.circle";
+        readonly md: "help";
+    };
+    readonly hidden: {
+        readonly sf: "eye.slash";
+        readonly md: "visibility_off";
+    };
+    readonly home: {
+        readonly sf: "house.fill";
+        readonly md: "home";
+    };
+    readonly image: {
+        readonly sf: "photo";
+        readonly md: "image";
+    };
+    readonly inbox: {
+        readonly sf: "tray";
+        readonly md: "inbox";
+    };
+    readonly info: {
+        readonly sf: "info.circle.fill";
+        readonly md: "info";
+    };
+    readonly link: {
+        readonly sf: "link";
+        readonly md: "link";
+    };
+    readonly list: {
+        readonly sf: "list.bullet";
+        readonly md: "list";
+    };
+    readonly location: {
+        readonly sf: "mappin";
+        readonly md: "location_on";
+    };
+    readonly "location-disabled": {
+        readonly sf: "location.slash";
+        readonly md: "location_off";
+    };
+    readonly lock: {
+        readonly sf: "lock";
+        readonly md: "lock";
+    };
+    readonly logout: {
+        readonly sf: "rectangle.portrait.and.arrow.right";
+        readonly md: "logout";
+    };
+    readonly mail: {
+        readonly sf: "envelope";
+        readonly md: "mail";
+    };
+    readonly map: {
+        readonly sf: "map";
+        readonly md: "map";
+    };
+    readonly menu: {
+        readonly sf: "line.3.horizontal";
+        readonly md: "menu";
+    };
+    readonly more: {
+        readonly sf: "ellipsis";
+        readonly md: "more_horiz";
+    };
+    readonly "more-vertical": {
+        readonly sf: "ellipsis";
+        readonly md: "more_vert";
+    };
+    readonly mute: {
+        readonly sf: "speaker.slash.fill";
+        readonly md: "volume_off";
+    };
+    readonly next: {
+        readonly sf: "chevron.right";
+        readonly md: "chevron_right";
+    };
+    readonly notifications: {
+        readonly sf: "bell";
+        readonly md: "notifications";
+    };
+    readonly package: {
+        readonly sf: "shippingbox";
+        readonly md: "inventory_2";
+    };
+    readonly pause: {
+        readonly sf: "pause.fill";
+        readonly md: "pause";
+    };
+    readonly people: {
+        readonly sf: "person.2";
+        readonly md: "group";
+    };
+    readonly play: {
+        readonly sf: "play.fill";
+        readonly md: "play_arrow";
+    };
+    readonly printer: {
+        readonly sf: "printer";
+        readonly md: "print";
+    };
+    readonly profile: {
+        readonly sf: "person";
+        readonly md: "person";
+    };
+    readonly "profile-circle": {
+        readonly sf: "person.crop.circle";
+        readonly md: "account_circle";
+    };
+    readonly rating: {
+        readonly sf: "star.fill";
+        readonly md: "star";
+    };
+    readonly "rating-empty": {
+        readonly sf: "star";
+        readonly md: "star_border";
+    };
+    readonly receipt: {
+        readonly sf: "receipt";
+        readonly md: "receipt_long";
+    };
+    readonly remove: {
+        readonly sf: "minus";
+        readonly md: "remove";
+    };
+    readonly reorder: {
+        readonly sf: "line.3.horizontal";
+        readonly md: "drag_handle";
+    };
+    readonly save: {
+        readonly sf: "square.and.arrow.down";
+        readonly md: "save";
+    };
+    readonly search: {
+        readonly sf: "magnifyingglass";
+        readonly md: "search";
+    };
+    readonly "search-empty": {
+        readonly sf: "doc.text.magnifyingglass";
+        readonly md: "search_off";
+    };
+    readonly server: {
+        readonly sf: "server.rack";
+        readonly md: "dns";
+    };
+    readonly settings: {
+        readonly sf: "gearshape";
+        readonly md: "settings";
+    };
+    readonly share: {
+        readonly sf: "square.and.arrow.up";
+        readonly md: "share";
+    };
+    readonly stop: {
+        readonly sf: "hand.raised.fill";
+        readonly md: "front_hand";
+    };
+    readonly success: {
+        readonly sf: "checkmark.circle.fill";
+        readonly md: "check_circle";
+    };
+    readonly sync: {
+        readonly sf: "arrow.triangle.2.circlepath";
+        readonly md: "sync";
+    };
+    readonly time: {
+        readonly sf: "clock";
+        readonly md: "schedule";
+    };
+    readonly unlink: {
+        readonly sf: "link";
+        readonly md: "link_off";
+    };
+    readonly up: {
+        readonly sf: "arrow.up";
+        readonly md: "arrow_upward";
+    };
+    readonly upload: {
+        readonly sf: "arrow.up.to.line";
+        readonly md: "upload";
+    };
+    readonly "upload-cloud": {
+        readonly sf: "icloud.and.arrow.up";
+        readonly md: "cloud_upload";
+    };
+    readonly visibility: {
+        readonly sf: "eye";
+        readonly md: "visibility";
+    };
+    readonly volume: {
+        readonly sf: "speaker.wave.2.fill";
+        readonly md: "volume_up";
+    };
+    readonly wallet: {
+        readonly sf: "wallet.bifold";
+        readonly md: "wallet";
+    };
+    readonly warning: {
+        readonly sf: "exclamationmark.triangle.fill";
+        readonly md: "warning";
+    };
+    readonly wifi: {
+        readonly sf: "wifi";
+        readonly md: "wifi";
+    };
+};
+export type IconName = keyof typeof ICON_MAP;

package/dist/Display/icon-map.js

@@ -0,0 +1,86 @@
+export const ICON_MAP = {
+    add: { sf: "plus", md: "add" },
+    "add-circle": { sf: "plus.circle.fill", md: "add_circle" },
+    archive: { sf: "archivebox", md: "archive" },
+    back: { sf: "chevron.left", md: "arrow_back" },
+    bicycle: { sf: "bicycle", md: "directions_bike" },
+    book: { sf: "book", md: "book" },
+    bookmark: { sf: "bookmark.fill", md: "bookmark" },
+    "bookmark-empty": { sf: "bookmark", md: "bookmark_border" },
+    calendar: { sf: "calendar", md: "calendar_month" },
+    camera: { sf: "camera", md: "camera_alt" },
+    card: { sf: "creditcard", md: "credit_card" },
+    cart: { sf: "cart", md: "shopping_cart" },
+    cash: { sf: "banknote", md: "payments" },
+    check: { sf: "checkmark", md: "check" },
+    circle: { sf: "circle", md: "radio_button_unchecked" },
+    close: { sf: "xmark", md: "close" },
+    collapse: { sf: "chevron.up", md: "expand_less" },
+    copy: { sf: "doc.on.doc", md: "content_copy" },
+    "dark-mode": { sf: "moon", md: "dark_mode" },
+    database: { sf: "externaldrive", md: "database" },
+    delete: { sf: "trash", md: "delete" },
+    dismiss: { sf: "xmark.circle.fill", md: "cancel" },
+    document: { sf: "doc.text", md: "description" },
+    down: { sf: "arrow.down", md: "arrow_downward" },
+    download: { sf: "arrow.down.to.line", md: "download" },
+    "download-cloud": { sf: "icloud.and.arrow.down", md: "cloud_download" },
+    edit: { sf: "pencil", md: "edit" },
+    empty: { sf: "tray", md: "inbox" },
+    error: { sf: "exclamationmark.circle.fill", md: "error" },
+    expand: { sf: "chevron.down", md: "expand_more" },
+    filter: { sf: "slider.horizontal.3", md: "tune" },
+    folder: { sf: "folder", md: "folder" },
+    grid: { sf: "square.grid.2x2", md: "grid_view" },
+    help: { sf: "questionmark.circle", md: "help" },
+    hidden: { sf: "eye.slash", md: "visibility_off" },
+    home: { sf: "house.fill", md: "home" },
+    image: { sf: "photo", md: "image" },
+    inbox: { sf: "tray", md: "inbox" },
+    info: { sf: "info.circle.fill", md: "info" },
+    link: { sf: "link", md: "link" },
+    list: { sf: "list.bullet", md: "list" },
+    location: { sf: "mappin", md: "location_on" },
+    "location-disabled": { sf: "location.slash", md: "location_off" },
+    lock: { sf: "lock", md: "lock" },
+    logout: { sf: "rectangle.portrait.and.arrow.right", md: "logout" },
+    mail: { sf: "envelope", md: "mail" },
+    map: { sf: "map", md: "map" },
+    menu: { sf: "line.3.horizontal", md: "menu" },
+    more: { sf: "ellipsis", md: "more_horiz" },
+    "more-vertical": { sf: "ellipsis", md: "more_vert" },
+    mute: { sf: "speaker.slash.fill", md: "volume_off" },
+    next: { sf: "chevron.right", md: "chevron_right" },
+    notifications: { sf: "bell", md: "notifications" },
+    package: { sf: "shippingbox", md: "inventory_2" },
+    pause: { sf: "pause.fill", md: "pause" },
+    people: { sf: "person.2", md: "group" },
+    play: { sf: "play.fill", md: "play_arrow" },
+    printer: { sf: "printer", md: "print" },
+    profile: { sf: "person", md: "person" },
+    "profile-circle": { sf: "person.crop.circle", md: "account_circle" },
+    rating: { sf: "star.fill", md: "star" },
+    "rating-empty": { sf: "star", md: "star_border" },
+    receipt: { sf: "receipt", md: "receipt_long" },
+    remove: { sf: "minus", md: "remove" },
+    reorder: { sf: "line.3.horizontal", md: "drag_handle" },
+    save: { sf: "square.and.arrow.down", md: "save" },
+    search: { sf: "magnifyingglass", md: "search" },
+    "search-empty": { sf: "doc.text.magnifyingglass", md: "search_off" },
+    server: { sf: "server.rack", md: "dns" },
+    settings: { sf: "gearshape", md: "settings" },
+    share: { sf: "square.and.arrow.up", md: "share" },
+    stop: { sf: "hand.raised.fill", md: "front_hand" },
+    success: { sf: "checkmark.circle.fill", md: "check_circle" },
+    sync: { sf: "arrow.triangle.2.circlepath", md: "sync" },
+    time: { sf: "clock", md: "schedule" },
+    unlink: { sf: "link", md: "link_off" },
+    up: { sf: "arrow.up", md: "arrow_upward" },
+    upload: { sf: "arrow.up.to.line", md: "upload" },
+    "upload-cloud": { sf: "icloud.and.arrow.up", md: "cloud_upload" },
+    visibility: { sf: "eye", md: "visibility" },
+    volume: { sf: "speaker.wave.2.fill", md: "volume_up" },
+    wallet: { sf: "wallet.bifold", md: "wallet" },
+    warning: { sf: "exclamationmark.triangle.fill", md: "warning" },
+    wifi: { sf: "wifi", md: "wifi" },
+};

package/dist/Display/index.d.ts

@@ -107,8 +107,10 @@ export { type BadgeProps, BadgeVariants };
 export type { AmountSummaryRootProps, AmountSummaryRowProps, AmountSummaryTotalProps, } from "./Display.AmountSummary.js";
 export type { CarouselControlsProps, CarouselProps, } from "./Display.Carousel.js";
 export type { CircleButtonProps } from "./Display.CircleButton.js";
+export type { IconProps } from "./Display.Icon.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 { ICON_MAP, type IconDefinition, type IconName, } from "./icon-map.js";
 export default Display;

package/dist/Display/index.js

@@ -92,4 +92,5 @@ export const Display = {
     Pattern,
 };
 export { BadgeVariants };
+export { ICON_MAP, } from "./icon-map.js";
 export default Display;

package/dist/Feedback/Feedback.Banner.js

@@ -1,7 +1,7 @@
 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 { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
@@ -13,23 +13,24 @@ const banner = tv({
     },
     variants: {
         tone: {
-            info: { root: "bg-info-light border-info/30", title: "text-info" },
-            success: { root: "bg-success-light border-success/30", title: "text-success" },
-            warning: { root: "bg-warning-light border-warning/30", title: "text-warning" },
-            danger: { root: "bg-danger-light border-danger/30", title: "text-danger" },
+            info: { root: "bg-container-info border-info/30", title: "text-info" },
+            success: { root: "bg-container-success border-success/30", title: "text-success" },
+            warning: { root: "bg-container-warning border-warning/30", title: "text-warning" },
+            danger: { root: "bg-container-danger border-danger/30", title: "text-danger" },
         },
     },
     defaultVariants: { tone: "info" },
 });
 const iconByTone = {
-    info: { name: "information-circle", color: theme.info },
-    success: { name: "checkmark-circle", color: theme.success },
-    warning: { name: "warning", color: theme.warning },
-    danger: { name: "alert-circle", color: theme.danger },
+    info: "info",
+    success: "success",
+    warning: "warning",
+    danger: "error",
 };
 function Banner({ message, title, tone = "info", onClose, action, className, testID, }) {
-    const styles = banner({ tone });
-    const icon = iconByTone[tone ?? "info"];
-    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] }));
+    const theme = useTheme();
+    const resolvedTone = tone ?? "info";
+    const styles = banner({ tone: resolvedTone });
+    return (_jsxs(View, { accessibilityLiveRegion: tone === "danger" ? "assertive" : "polite", accessibilityRole: tone === "danger" ? "alert" : undefined, className: styles.root({ className }), testID: testID, children: [_jsx(Icon, { color: theme[resolvedTone], name: iconByTone[resolvedTone], 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.Empty.js

@@ -4,6 +4,6 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function Empty({ handleGoHome, className }) {
-    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { name: "sad-cry", size: 80, type: "fontawesome5" }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Oops!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: "No se encontraron registros disponibles." })] }));
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), children: [_jsx(Icon, { name: "empty", size: 80 }), _jsx(Typography.Text, { className: "pt-4 text-text-primary", semibold: true, variant: "h3", children: "\u00A1Oops!" }), _jsx(Typography.Text, { className: "pt-2 text-center text-base leading-5.5 text-text-secondary", variant: "h5", children: "No se encontraron registros disponibles." })] }));
 }
 export default Empty;

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

@@ -1,9 +1,10 @@
+import type { IconName } from "../Display/index.js";
 import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
 export interface EmptyStateProps {
     title: string;
     description?: string;
-    icon?: string;
+    icon?: IconName;
     image?: ImageSource;
     actionLabel?: string;
     onAction?: () => void;

package/dist/Feedback/Feedback.EmptyState.js

@@ -6,7 +6,7 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function EmptyState({ title, description, icon = "file-tray-outline", image, actionLabel, onAction, children, className, testID, }) {
+function EmptyState({ title, description, icon = "inbox", 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(ExpoImage, { contentFit: "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, { onPress: onAction, title: actionLabel, variant: "primary" }) })) : null, children] }));
 }
 export default EmptyState;

package/dist/Feedback/Feedback.Error.js

@@ -6,6 +6,6 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 function Error({ message, onRetry, onBack, onHome, className, 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, { 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" }))] })] }));
+    return (_jsxs(View, { className: cn("flex-1 items-center justify-center px-4", className), testID: testID, children: [_jsx(Icon, { color: theme.danger, name: "error", size: 80 }), _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, { 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" }))] })] }));
 }
 export default Error;

package/dist/Feedback/Feedback.PermissionCard.d.ts

@@ -1,8 +1,9 @@
+import type { IconName } from "../Display/index.js";
 export interface PermissionCardProps {
     title: string;
     description?: string;
     granted?: boolean;
-    icon?: string;
+    icon?: IconName;
     grantedLabel?: string;
     deniedLabel?: string;
     actionLabel?: string;

package/dist/Feedback/Feedback.PermissionCard.js

@@ -5,7 +5,7 @@ import { theme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function PermissionCard({ title, description, granted = false, icon = "lock-closed", grantedLabel = "Permiso activo", deniedLabel = "Permiso inactivo", actionLabel = "Permitir", loading = false, onRequest, className, testID, }) {
-    return (_jsx(View, { className: cn("bg-bg-card rounded-xl p-4 border border-border-light", className), style: theme.shadow.sm, testID: testID, children: _jsxs(View, { className: "flex-row items-start gap-3", children: [_jsx(Icon, { color: granted ? theme.success : theme.danger, name: granted ? "checkmark-circle" : icon, size: 32 }), _jsxs(View, { className: "flex-1 gap-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "body", children: title }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null, _jsx(Typography.Text, { style: { color: granted ? theme.success : theme.danger }, variant: "bodySmall", children: granted ? grantedLabel : deniedLabel }), !granted && onRequest ? (_jsx(View, { className: "mt-2 self-start", children: _jsx(BaseButton, { loading: loading, onPress: onRequest, size: "small", title: actionLabel }) })) : null] })] }) }));
+function PermissionCard({ title, description, granted = false, icon = "lock", grantedLabel = "Permiso activo", deniedLabel = "Permiso inactivo", actionLabel = "Permitir", loading = false, onRequest, className, testID, }) {
+    return (_jsx(View, { className: cn("bg-bg-card rounded-xl p-4 border border-border-light", className), style: theme.shadow.sm, testID: testID, children: _jsxs(View, { className: "flex-row items-start gap-3", children: [_jsx(Icon, { color: granted ? theme.success : theme.danger, name: granted ? "success" : icon, size: 32 }), _jsxs(View, { className: "flex-1 gap-1", children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "body", children: title }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null, _jsx(Typography.Text, { style: { color: granted ? theme.success : theme.danger }, variant: "bodySmall", children: granted ? grantedLabel : deniedLabel }), !granted && onRequest ? (_jsx(View, { className: "mt-2 self-start", children: _jsx(BaseButton, { loading: loading, onPress: onRequest, size: "small", title: actionLabel }) })) : null] })] }) }));
 }
 export default PermissionCard;

package/dist/Feedback/Toast.context.js

@@ -70,10 +70,10 @@ const toast = tv({
     },
 });
 const iconByVariant = {
-    info: "information-circle",
-    success: "checkmark-circle",
+    info: "info",
+    success: "success",
     warning: "warning",
-    danger: "close-circle",
+    danger: "dismiss",
 };
 function ToastItem({ entry, onHide, onUpdate, position, }) {
     const variant = entry.variant ?? "info";

package/dist/Form/Form.ControlledDropdown.d.ts

@@ -1,14 +1,8 @@
-import { Control, FieldValues, Path } from "react-hook-form";
-export interface DropdownOption {
-    value: string;
-    label: string;
-}
-interface ControlledDropdownProps<T extends FieldValues> {
+import { type SelectProps } from "./Form.Select.js";
+import { type Control, type FieldValues, type Path } from "react-hook-form";
+export type ControlledDropdownProps<T extends FieldValues> = Omit<SelectProps<string>, "value" | "onChange" | "onBlur" | "error"> & {
     control: Control<T>;
     name: Path<T>;
-    label: string;
-    options: DropdownOption[];
-    placeholder?: string;
-}
-declare function ControlledDropdown<T extends FieldValues>(_props: ControlledDropdownProps<T>): void;
+};
+declare function ControlledDropdown<T extends FieldValues>({ control, name, ...props }: ControlledDropdownProps<T>): import("react").JSX.Element;
 export default ControlledDropdown;

package/dist/Form/Form.ControlledDropdown.js

@@ -1,4 +1,7 @@
-function ControlledDropdown(_props) {
-    throw new Error("ControlledDropdown is not implemented yet. Use Form.Dropdown with manual Controller instead.");
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import Select from "./Form.Select.js";
+import { Controller } from "react-hook-form";
+function ControlledDropdown({ control, name, ...props }) {
+    return (_jsx(Controller, { control: control, name: name, render: ({ field, fieldState }) => (_jsx(Select, { ...props, disabled: props.disabled || field.disabled, error: fieldState.error?.message, onBlur: field.onBlur, onChange: field.onChange, value: typeof field.value === "string" ? field.value : null })) }));
 }
 export default ControlledDropdown;

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

@@ -1,6 +1,6 @@
-export interface DatePickerProps {
+export type DatePickerProps = {
     value: Date | null;
-    onChange: (value: Date) => void;
+    onChange: (value: Date) => void | Promise<void>;
     mode?: "date" | "time" | "datetime";
     label?: string;
     placeholder?: string;
@@ -8,13 +8,9 @@ export interface DatePickerProps {
     minimumDate?: Date;
     maximumDate?: Date;
     disabled?: boolean;
+    readOnly?: boolean;
     className?: string;
     testID?: string;
-}
-/**
- * **Hybrid** date/time field: tokenized trigger (NativeWind) + **native picker**
- * (`@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, readOnly, className, testID, }: DatePickerProps): import("react").JSX.Element;
 export default DatePicker;