@sincpro/mobile-ui 2.0.1 → 3.0.0

package/dist/Display/Display.GradientSurface.d.ts

@@ -64,15 +64,7 @@ declare const GRADIENT_PRESETS: {
         };
     };
 };
-/**
- * Aliases kept for backwards compatibility. These were the original names; the
- * canonical ones are above. Use the canonical names in new code.
- * @deprecated use `warm` instead of `gold-mesh`.
- */
-declare const DEPRECATED_PRESETS: {
-    readonly "gold-mesh": "warm";
-};
-export type GradientPreset = keyof typeof GRADIENT_PRESETS | keyof typeof DEPRECATED_PRESETS | "brand";
+export type GradientPreset = keyof typeof GRADIENT_PRESETS | "brand";
 declare const surface: import("tailwind-variants").TVReturnType<{
     radius: {
         none: "rounded-none";
@@ -125,6 +117,57 @@ export interface GradientSurfaceProps extends VariantProps<typeof surface> {
     style?: ViewStyle;
     testID?: string;
 }
+export declare function resolveGradientPreset(preset?: GradientPreset): {
+    colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
+    start: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    end: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+} | {
+    colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
+    start: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    end: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+} | {
+    colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
+    start: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    end: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+} | {
+    colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
+    start: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    end: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+} | {
+    colors: readonly [string, string] | readonly ["#1A1714", "#C89B3C", "#B88A2E"] | readonly ["#1C3765", "#2A4A85", "#8FA9E8"];
+    start: {
+        readonly x: 0;
+        readonly y: 0;
+    };
+    end: {
+        readonly x: 1;
+        readonly y: 1;
+    };
+};
 /**
  * Modern gradient surface. Wraps `expo-linear-gradient` with named presets +
  * tokenized radius/padding. iOS + Android (no native dep beyond the already-peer

package/dist/Display/Display.GradientSurface.js

@@ -35,14 +35,6 @@ const GRADIENT_PRESETS = {
         end: { x: 1, y: 1 },
     },
 };
-/**
- * Aliases kept for backwards compatibility. These were the original names; the
- * canonical ones are above. Use the canonical names in new code.
- * @deprecated use `warm` instead of `gold-mesh`.
- */
-const DEPRECATED_PRESETS = {
-    "gold-mesh": "warm",
-};
 const surface = tv({
     variants: {
         radius: {
@@ -60,18 +52,21 @@ const surface = tv({
     },
     defaultVariants: { radius: "lg", padding: "none" },
 });
+export function resolveGradientPreset(preset = "warm") {
+    const surface = preset === "brand" ? GRADIENT_PRESETS.warm : GRADIENT_PRESETS[preset];
+    return {
+        ...surface,
+        colors: preset === "brand" ? theme.gradient.primary : surface.colors,
+    };
+}
 /**
  * Modern gradient surface. Wraps `expo-linear-gradient` with named presets +
  * tokenized radius/padding. iOS + Android (no native dep beyond the already-peer
  * `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
  */
 function GradientSurface({ preset = "warm", colors, start, end, radius, padding, children, className, style, testID, }) {
-    const resolvedPreset = (preset in DEPRECATED_PRESETS
-        ? DEPRECATED_PRESETS[preset]
-        : preset);
-    const p = resolvedPreset === "brand" ? GRADIENT_PRESETS.warm : GRADIENT_PRESETS[resolvedPreset];
-    const presetColors = resolvedPreset === "brand" ? theme.gradient.primary : p.colors;
-    const resolvedColors = (colors ?? presetColors);
+    const p = resolveGradientPreset(preset);
+    const resolvedColors = colors ?? p.colors;
     return (_jsxs(View, { className: cn("overflow-hidden", surface({ radius })), style: style, testID: testID, children: [_jsx(LinearGradient, { colors: [...resolvedColors], end: end ?? p.end, start: start ?? p.start, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } }), _jsx(View, { className: cn(surface({ padding }), className), children: children })] }));
 }
 export default GradientSurface;

package/dist/Display/Display.Icon.d.ts

@@ -1,15 +1,11 @@
-import { IconType } from "../utils/icon.js";
-import { ComponentType, FC } from "react";
-export interface IconProps {
-    name?: any;
+import { type IconName } from "./icon-map.js";
+import type { FC } from "react";
+import { type ColorValue, type ViewProps } from "react-native";
+export type IconProps = Omit<ViewProps, "children"> & {
+    name: IconName;
     size?: number;
-    color?: string;
-    type?: IconType;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
+    color?: ColorValue;
     className?: string;
-}
+};
 declare const Icon: FC<IconProps>;
 export default Icon;

package/dist/Display/Display.Icon.js

@@ -1,36 +1,21 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { AntDesign, Feather, FontAwesome, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, SimpleLineIcons, } from "@expo/vector-icons";
+import { ICON_MAP } from "./icon-map.js";
 import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { SymbolView } from "expo-symbols";
 import { View } from "react-native";
-const Icon = ({ name, size = 24, color, type = "ionicons", customIcon, className, }) => {
+const Icon = ({ name, size = 24, color, className, style, accessible, accessibilityLabel, accessibilityRole, ...viewProps }) => {
     const theme = useTheme();
-    const iconColor = color || theme.text.primary;
-    const renderIcon = () => {
-        if (type === "custom" && customIcon) {
-            const CustomIconComponent = customIcon;
-            return _jsx(CustomIconComponent, { color: iconColor, size: size });
-        }
-        switch (type) {
-            case "ionicons":
-                return _jsx(Ionicons, { color: iconColor, name: name, size: size });
-            case "fontawesome":
-                return _jsx(FontAwesome, { color: iconColor, name: name, size: size });
-            case "material":
-                return _jsx(MaterialIcons, { color: iconColor, name: name, size: size });
-            case "fontawesome5":
-                return _jsx(FontAwesome5, { color: iconColor, name: name, size: size });
-            case "simplelineicons":
-                return _jsx(SimpleLineIcons, { color: iconColor, name: name, size: size });
-            case "antdesign":
-                return _jsx(AntDesign, { color: iconColor, name: name, size: size });
-            case "feather":
-                return _jsx(Feather, { color: iconColor, name: name, size: size });
-            case "MaterialCommunityIcons":
-                return _jsx(MaterialCommunityIcons, { color: iconColor, name: name, size: size });
-            default:
-                return null;
-        }
-    };
-    return (_jsx(View, { className: `justify-center items-center ${className || ""}`, children: renderIcon() }));
+    if (typeof name !== "string" || !Object.hasOwn(ICON_MAP, name)) {
+        throw new Error(`Unknown icon name: ${String(name)}`);
+    }
+    if (!Number.isFinite(size) || size <= 0) {
+        throw new RangeError(`Invalid icon size: ${String(size)}`);
+    }
+    if (["type", "customIcon", "fallback", "children"].some((key) => Object.hasOwn(viewProps, key))) {
+        throw new Error("Display.Icon accepts semantic names, not icon families or custom renderers");
+    }
+    const icon = ICON_MAP[name];
+    return (_jsx(View, { ...viewProps, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole ?? (accessibilityLabel ? "image" : undefined), accessible: accessible ?? Boolean(accessibilityLabel), className: cn("justify-center items-center", className), style: style, children: _jsx(SymbolView, { accessibilityElementsHidden: true, accessible: false, importantForAccessibility: "no-hide-descendants", name: { ios: icon.sf, android: icon.md, web: icon.md }, size: size, tintColor: color ?? theme.text.primary }) }));
 };
 export default Icon;

package/dist/Display/Display.Image.d.ts

@@ -1,3 +1,4 @@
+import type { IconName } from "./index.js";
 import { type ExpoImageProps } from "./Display.ExpoImage.js";
 import { type ImageSource } from "../utils/image.js";
 import { type ReactNode } from "react";
@@ -8,7 +9,7 @@ export interface DisplayImageProps extends Omit<ExpoImageProps, "source" | "styl
     height?: number;
     aspectRatio?: number;
     radius?: number;
-    fallbackIcon?: string;
+    fallbackIcon?: IconName;
     className?: string;
     style?: ExpoImageProps["style"];
     containerStyle?: StyleProp<ViewStyle>;

package/dist/Display/Display.Image.js

@@ -8,7 +8,7 @@ import { cn } from "../theme/tw.js";
 import { imageSourceKey } from "../utils/image.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { View } from "react-native";
-function ImageContent({ source, width = "100%", height, aspectRatio, radius = 12, contentFit = "cover", placeholder, fallbackIcon = "image-outline", className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, retry, ...imageProps }) {
+function ImageContent({ source, width = "100%", height, aspectRatio, radius = 12, contentFit = "cover", placeholder, fallbackIcon = "image", className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, retry, ...imageProps }) {
     const theme = useTheme();
     const [loading, setLoading] = useState(true);
     const [failed, setFailed] = useState(false);

package/dist/Display/Display.KeyValue.js

@@ -6,6 +6,6 @@ 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)] }));
+    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: "min-w-0 shrink text-text-secondary", variant: "labelSmall", 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.ListItem.js

@@ -14,7 +14,7 @@ function ListItem({ title, subtitle, leading, trailing, chevron = false, onPress
         (value !== undefined || trailing != null) &&
         (layout === "stacked" || (layout === "auto" && (fontScale > 1.3 || width < 360)));
     const right = trailing ??
-        (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);
+        (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: "next", 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", semibold: !mobile || comfortable, variant: comfortable ? "bodyReadable" : "body", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", 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) {

package/dist/Display/Display.MenuButton.js

@@ -12,7 +12,7 @@ function BadgeChip({ badge }) {
                 flexDirection: "row",
                 alignItems: "center",
                 gap: 4,
-                backgroundColor: theme.successLight,
+                backgroundColor: theme.container.success,
                 paddingHorizontal: 8,
                 paddingVertical: 3,
                 borderRadius: 999,
@@ -23,7 +23,7 @@ function BadgeChip({ badge }) {
                 flexDirection: "row",
                 alignItems: "center",
                 gap: 4,
-                backgroundColor: theme.warningLight,
+                backgroundColor: theme.container.warning,
                 paddingHorizontal: 8,
                 paddingVertical: 3,
                 borderRadius: 999,
@@ -63,11 +63,11 @@ const menuButton = tv({
                 label: "text-text-primary",
             },
             danger: {
-                iconContainer: "bg-danger-light",
+                iconContainer: "bg-container-danger",
                 label: "text-danger",
             },
             success: {
-                iconContainer: "bg-success-light",
+                iconContainer: "bg-container-success",
                 label: "text-success",
             },
         },

package/dist/Display/Display.MenuCard.d.ts

@@ -1,15 +1,10 @@
-import { IconType } from "../utils/icon.js";
-import { ComponentType } from "react";
+import type { IconName } from "./index.js";
 export interface MenuCardProps {
     title: string;
-    iconType?: IconType;
     onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
+    icon: IconName;
     /** `"md"` = 2-column grid (default). `"sm"` = 3-column grid, smaller icon. */
     size?: "sm" | "md";
 }
-export declare function MenuCard({ title, iconType, onPress, customIcon, size, }: MenuCardProps): import("react").JSX.Element;
+export declare function MenuCard({ title, onPress, icon, size }: MenuCardProps): import("react").JSX.Element;
 export default MenuCard;

package/dist/Display/Display.MenuCard.js

@@ -3,7 +3,7 @@ import CircleButton from "./Display.CircleButton.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, size = "md", }) {
+export function MenuCard({ title, onPress, icon, size = "md" }) {
     const theme = useTheme();
     const isSmall = size === "sm";
     return (_jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onPress, style: {
@@ -15,7 +15,7 @@ export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, si
             borderWidth: 1,
             borderColor: theme.border.default,
             ...theme.shadow.sm,
-        }, children: _jsxs(View, { style: { alignItems: "center", justifyContent: "center" }, children: [_jsx(CircleButton, { customIcon: customIcon, iconType: iconType, size: isSmall ? "sm" : "md" }), _jsx(Typography.Text, { numberOfLines: 2, style: {
+        }, children: _jsxs(View, { style: { alignItems: "center", justifyContent: "center" }, children: [_jsx(CircleButton, { icon: icon, size: isSmall ? "sm" : "md" }), _jsx(Typography.Text, { numberOfLines: 2, style: {
                         color: theme.text.primary,
                         marginTop: isSmall ? 8 : 12,
                         textAlign: "center",

package/dist/Display/Display.MenuGrid.d.ts

@@ -1,14 +1,9 @@
-import { IconType } from "../utils/icon.js";
-import { ComponentType } from "react";
+import type { IconName } from "./index.js";
 export interface MenuGridItem {
     id: string;
     title: string;
-    iconType?: IconType;
     onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
+    icon: IconName;
 }
 export interface MenuGridProps {
     items: MenuGridItem[];

package/dist/Display/Display.MenuGrid.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import MenuCard from "./Display.MenuCard.js";
 import { View } from "react-native";
 export function MenuGrid({ items, size = "md" }) {
-    return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { customIcon: item.customIcon, iconType: item.iconType, onPress: item.onPress, size: size, title: item.title }, item.id))) }));
+    return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { icon: item.icon, onPress: item.onPress, size: size, title: item.title }, item.id))) }));
 }
 export default MenuGrid;

package/dist/Display/Display.Monetary.d.ts

@@ -4,16 +4,12 @@ interface MonetaryFieldProps {
     value: number | string | null | undefined;
     currencySymbol?: string;
     prefix?: string;
-    /** @deprecated Use className="text-{color}" instead */
-    color?: string;
     textVariant?: keyof typeof typographyVariants;
-    /** @deprecated Use className for styling */
     style?: StyleProp<TextStyle>;
-    /** @deprecated Use className="text-{color}" instead */
-    symbolColor?: string;
+    symbolStyle?: StyleProp<TextStyle>;
     semibold?: boolean;
     bold?: boolean;
     className?: string;
 }
-declare function MonetaryField({ value, currencySymbol, prefix, color, textVariant, style, symbolColor, semibold, bold, className, }: MonetaryFieldProps): import("react").JSX.Element;
+declare function MonetaryField({ value, currencySymbol, prefix, textVariant, style, symbolStyle, semibold, bold, className, }: MonetaryFieldProps): import("react").JSX.Element;
 export default MonetaryField;

package/dist/Display/Display.Monetary.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Typography } from "../Typography/index.js";
 import { formatTwoDecimals } from "../utils/monetary.js";
-function MonetaryField({ value, currencySymbol = "₡", prefix = "", color, textVariant = "data", style = {}, symbolColor, semibold = true, bold = false, className, }) {
+function MonetaryField({ value, currencySymbol = "₡", prefix = "", textVariant = "data", style = {}, symbolStyle, semibold = true, bold = false, className, }) {
     const isEmptyValue = value === null || value === undefined || value === "";
     const formatted = isEmptyValue ? "0.00" : formatTwoDecimals(value);
-    return (_jsxs(Typography.Text, { bold: bold, className: className, color: color, semibold: semibold && !bold, style: style, variant: textVariant, children: [_jsx(Typography.Text, { className: className, color: symbolColor || color, variant: textVariant, children: currencySymbol }), " ", prefix && `${prefix} `, formatted] }));
+    return (_jsxs(Typography.Text, { bold: bold, className: className, semibold: semibold && !bold, style: style, variant: textVariant, children: [_jsx(Typography.Text, { className: className, style: [style, symbolStyle], variant: textVariant, children: currencySymbol }), " ", prefix && `${prefix} `, formatted] }));
 }
 export default MonetaryField;

package/dist/Display/Display.PriceTag.js

@@ -18,6 +18,6 @@ function PriceTag({ amount, originalAmount, currency = "Bs", size = "md", classN
     const variants = sizeMap[size];
     const hasDiscount = typeof originalAmount === "number" && originalAmount > amount;
     const off = hasDiscount ? Math.round((1 - amount / originalAmount) * 100) : 0;
-    return (_jsxs(View, { className: cn("flex-row items-baseline gap-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: variants.price, children: format(amount, currency) }), hasDiscount ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: "text-text-tertiary", style: { textDecorationLine: "line-through" }, variant: variants.original, children: format(originalAmount, currency) }), _jsx(View, { className: "bg-danger-light rounded px-1.5 py-0.5", children: _jsxs(Typography.Text, { className: "text-danger font-semibold", variant: "caption", children: ["-", off, "%"] }) })] })) : null] }));
+    return (_jsxs(View, { className: cn("flex-row items-baseline gap-2", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: variants.price, children: format(amount, currency) }), hasDiscount ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { className: "text-text-tertiary", style: { textDecorationLine: "line-through" }, variant: variants.original, children: format(originalAmount, currency) }), _jsx(View, { className: "bg-container-danger rounded px-1.5 py-0.5", children: _jsxs(Typography.Text, { className: "text-danger font-semibold", variant: "caption", children: ["-", off, "%"] }) })] })) : null] }));
 }
 export default PriceTag;

package/dist/Display/Display.Rating.js

@@ -7,7 +7,7 @@ function Rating({ value, max = 5, size = 24, onChange, readOnly = false, classNa
     const interactive = !readOnly && !!onChange;
     return (_jsx(View, { accessibilityLabel: `Calificación ${value} de ${max}`, accessibilityRole: interactive ? "adjustable" : "image", className: className, style: { flexDirection: "row", gap: 4 }, testID: testID, children: Array.from({ length: max }).map((_, index) => {
             const filled = index < Math.round(value);
-            const star = (_jsx(Icon, { color: filled ? theme.warning : theme.icon.disabled, name: filled ? "star" : "star-outline", size: size }));
+            const star = (_jsx(Icon, { color: filled ? theme.warning : theme.icon.disabled, name: filled ? "rating" : "rating-empty", size: size }));
             if (!interactive)
                 return _jsx(View, { children: star }, index);
             return (_jsx(Pressable, { accessibilityLabel: `${index + 1} estrellas`, hitSlop: 6, onPress: () => onChange?.(index + 1), children: star }, index));

package/dist/Display/Display.SearchHistory.d.ts

@@ -1,10 +1,11 @@
+import type { IconName } from "./index.js";
 export interface SearchHistoryProps {
     items: string[];
     onSelect: (value: string) => void;
     onRemove: (value: string) => void;
     onClearAll?: () => void;
     title?: string;
-    icon?: string;
+    icon?: IconName;
     className?: string;
     testID?: string;
 }

package/dist/Display/Display.SearchHistory.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 SearchHistory({ items, onSelect, onRemove, onClearAll, title = "Búsquedas recientes", icon = "time-outline", className, testID, }) {
+function SearchHistory({ items, onSelect, onRemove, onClearAll, title = "Búsquedas recientes", icon = "time", className, testID, }) {
     if (items.length === 0)
         return null;
     return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between px-4 py-1", children: [_jsx(Typography.Text, { className: "text-text-secondary", semibold: true, variant: "bodySmall", children: title }), onClearAll ? (_jsx(Pressable, { accessibilityLabel: "Borrar todo", hitSlop: 8, onPress: onClearAll, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Borrar todo" }) })) : null] }), items.map((value) => (_jsxs(Pressable, { accessibilityLabel: value, className: "flex-row items-center gap-3 px-4 py-2.5", onPress: () => onSelect(value), children: [_jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 18 }), _jsx(Typography.Text, { className: "flex-1 text-text-primary", numberOfLines: 1, children: value }), _jsx(Pressable, { accessibilityLabel: `Quitar ${value}`, hitSlop: 10, onPress: () => onRemove(value), children: _jsx(Icon, { color: theme.icon.tertiary, name: "close", size: 16 }) })] }, value)))] }));

package/dist/Display/Display.StatCard.d.ts

@@ -1,8 +1,9 @@
+import type { IconName } from "./index.js";
 import type { ReactNode } from "react";
 export interface StatCardProps {
     label: string;
     value: string | number;
-    icon?: string;
+    icon?: IconName;
     delta?: number;
     deltaSuffix?: string;
     hint?: string;

package/dist/Display/Display.StatCard.js

@@ -8,6 +8,6 @@ function StatCard({ label, value, icon, delta, deltaSuffix = "%", hint, trailing
     const hasDelta = typeof delta === "number";
     const up = hasDelta && delta >= 0;
     const deltaColor = up ? theme.success : theme.danger;
-    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className), style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), icon ? _jsx(Icon, { color: theme.icon.secondary, name: icon, size: 18 }) : null, trailing] }), _jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "h3", children: value }), hasDelta || hint ? (_jsxs(View, { className: "flex-row items-center gap-1", children: [hasDelta ? (_jsxs(_Fragment, { children: [_jsx(Icon, { color: deltaColor, name: up ? "arrow-up" : "arrow-down", size: 14 }), _jsxs(Typography.Text, { style: { color: deltaColor }, variant: "caption", children: [Math.abs(delta), deltaSuffix] })] })) : null, hint ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: hint })) : null] })) : null] }));
+    return (_jsxs(View, { className: cn("bg-bg-card rounded-lg border border-border-light p-4 gap-1", className), style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between", children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label }), icon ? _jsx(Icon, { color: theme.icon.secondary, name: icon, size: 18 }) : null, trailing] }), _jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "h3", children: value }), hasDelta || hint ? (_jsxs(View, { className: "flex-row items-center gap-1", children: [hasDelta ? (_jsxs(_Fragment, { children: [_jsx(Icon, { color: deltaColor, name: up ? "up" : "down", size: 14 }), _jsxs(Typography.Text, { style: { color: deltaColor }, variant: "caption", children: [Math.abs(delta), deltaSuffix] })] })) : null, hint ? (_jsx(Typography.Text, { className: "text-text-tertiary", variant: "caption", children: hint })) : null] })) : null] }));
 }
 export default StatCard;

package/dist/Display/Display.StoryViewer.js

@@ -2,14 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import ExpoImage from "./Display.ExpoImage.js";
 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 { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { Modal, Pressable as RNPressable, View } from "react-native";
+import { KeyboardStickyView } from "react-native-keyboard-controller";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, subtitle, time, avatar, progress = 1, muted, paused, onToggleMute, onTogglePause, onMore, footer, testID, }) {
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
     const reducedMotion = useReducedMotion();
     const current = slides[index];
     const goPrev = () => {
@@ -45,7 +47,8 @@ function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, su
                         left: 0,
                         right: 0,
                         paddingTop: insets.top + 8,
-                        paddingHorizontal: 10,
+                        paddingLeft: insets.left + 10,
+                        paddingRight: insets.right + 10,
                     }, children: [_jsx(View, { style: { flexDirection: "row", gap: 4 }, children: slides.map((_, i) => (_jsx(View, { style: {
                                     flex: 1,
                                     height: 2.5,
@@ -60,9 +63,9 @@ function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, su
                                                 ? `${Math.round(progress * 100)}%`
                                                 : "0%",
                                         backgroundColor: "#fff",
-                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(ExpoImage, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "volume-mute" : "volume-high", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "ellipsis-horizontal", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
+                                    } }) }, i))) }), _jsxs(View, { style: { flexDirection: "row", alignItems: "center", marginTop: 12 }, children: [avatar ? (_jsx(ExpoImage, { source: avatar, style: { width: 36, height: 36, borderRadius: 18, marginRight: 8 } })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [_jsx(Typography.Text, { className: "text-white", semibold: true, variant: "body", children: title }), time ? (_jsx(Typography.Text, { style: { color: "rgba(255,255,255,0.7)" }, variant: "caption", children: time })) : null] }), subtitle ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color: "rgba(255,255,255,0.8)" }, variant: "caption", children: subtitle })) : null] }), onToggleMute ? (_jsx(Pressable, { accessibilityLabel: muted ? "Activar sonido" : "Silenciar", hitSlop: 8, onPress: onToggleMute, children: _jsx(Icon, { color: "#fff", name: muted ? "mute" : "volume", size: 22 }) })) : null, onTogglePause ? (_jsx(Pressable, { accessibilityLabel: paused ? "Reanudar" : "Pausar", hitSlop: 8, onPress: onTogglePause, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: paused ? "play" : "pause", size: 22 }) })) : null, onMore ? (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", hitSlop: 8, onPress: onMore, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "more", size: 22 }) })) : null, _jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: onClose, style: { marginLeft: 14 }, children: _jsx(Icon, { color: "#fff", name: "close", size: 24 }) })] })] }), index < slides.length - 1 ? (_jsx(Pressable, { accessibilityLabel: "Siguiente", onPress: goNext, style: {
                         position: "absolute",
-                        right: 8,
+                        right: insets.right + 8,
                         top: "50%",
                         width: 36,
                         height: 36,
@@ -70,13 +73,14 @@ function StoryViewer({ visible, slides, index, onIndexChange, onClose, title, su
                         backgroundColor: "rgba(255,255,255,0.9)",
                         alignItems: "center",
                         justifyContent: "center",
-                    }, children: _jsx(Icon, { color: theme.text.primary, name: "chevron-forward", size: 22 }) })) : null, footer ? (_jsx(View, { style: {
+                    }, children: _jsx(Icon, { color: theme.text.primary, name: "next", size: 22 }) })) : null, footer ? (_jsx(KeyboardStickyView, { style: {
                         position: "absolute",
                         left: 0,
                         right: 0,
                         bottom: 0,
                         paddingBottom: insets.bottom + 8,
-                        paddingHorizontal: 16,
+                        paddingLeft: insets.left + 16,
+                        paddingRight: insets.right + 16,
                     }, children: footer })) : null] }) }));
 }
 export default StoryViewer;

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

@@ -1,7 +1,8 @@
+import type { IconName } from "./index.js";
 import { type ReactNode } from "react";
 export interface SwipeRowAction {
     label?: string;
-    icon?: string;
+    icon?: IconName;
     color?: string;
     onPress: () => void;
 }

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));
         }) }));