@retray-dev/ui-kit 12.2.0 → 13.2.0

package/dist/{chunk-NHDI3VQB.mjs → chunk-422IVD3H.mjs}

@@ -1,11 +1,12 @@
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { EASINGS, TIMINGS } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { TIMINGS } from './chunk-M53LC4Q7.mjs';
+import { PressableRow } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
-import { StyleSheet, View, Pressable, Text } from 'react-native';
-import Animated, { useSharedValue, useDerivedValue, withTiming, useAnimatedStyle } from 'react-native-reanimated';
+import { StyleSheet, View, Text } from 'react-native';
+import Animated, { useSharedValue, useDerivedValue, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
 import { Entypo } from '@expo/vector-icons';
 
 function AccordionItemComponent({
@@ -14,7 +15,7 @@ function AccordionItemComponent({
   onToggle
 }) {
   const { colors } = useTheme();
-  const resolvedIcon = item.iconName ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted) : item.icon;
+  const resolvedIcon = item.iconName ? /* @__PURE__ */ React.createElement(Icon, { name: item.iconName, size: ms(16), color: item.iconColor ?? colors.foregroundMuted }) : item.icon;
   const isExpanded = useSharedValue(isOpen);
   const height = useSharedValue(0);
   React.useEffect(() => {
@@ -23,13 +24,13 @@ function AccordionItemComponent({
   const derivedHeight = useDerivedValue(
     () => withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
+      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease)
     })
   );
   const derivedRotation = useDerivedValue(
     () => withTiming(isExpanded.value ? 1 : 0, {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
-      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
+      easing: isExpanded.value ? Easing.bezier(0.23, 1, 0.32, 1) : Easing.in(Easing.ease)
     })
   );
   const bodyStyle = useAnimatedStyle(() => ({
@@ -40,16 +41,19 @@ function AccordionItemComponent({
     transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
   }));
   return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React.createElement(
-    Pressable,
+    PressableRow,
     {
-      style: ({ pressed }) => [styles.trigger, { opacity: pressed ? 0.6 : 1 }],
       onPress: () => {
         selectionAsync();
         onToggle();
       },
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
-      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0
+      accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0,
+      accessibilityHint: item.accessibilityHint,
+      style: styles.trigger
     },
     /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
     item.triggerActions ? /* @__PURE__ */ React.createElement(

package/dist/{chunk-DF7JA72E.mjs → chunk-4NQFTHN3.mjs}

@@ -1,6 +1,6 @@
-import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';
 import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
@@ -9,14 +9,16 @@ import { EaseView } from 'react-native-ease';
 import { AntDesign } from '@expo/vector-icons';
 
 var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
-function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
+function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, autoCapitalize, autoCorrect, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const isDisabled = disabled || editable === false;
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
-  const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
+  const effectiveAutoCapitalize = isPassword ? "none" : autoCapitalize;
+  const effectiveAutoCorrect = isPassword ? false : autoCorrect;
+  const effectivePrefix = prefixIcon ? /* @__PURE__ */ React.createElement(Icon, { name: prefixIcon, size: 20, color: prefixIconColor ?? colors.foregroundMuted }) : prefix;
   const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
@@ -24,10 +26,10 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
       style: styles.passwordToggle,
       activeOpacity: 0.6,
       accessibilityRole: "button",
-      accessibilityLabel: showPassword ? "Hide password" : "Show password"
+      accessibilityLabel: showPassword ? "Ocultar contrase\xF1a" : "Mostrar contrase\xF1a"
     },
     /* @__PURE__ */ React.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
-  ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
+  ) : suffixIcon ? /* @__PURE__ */ React.createElement(Icon, { name: suffixIcon, size: 20, color: suffixIconColor ?? colors.foregroundMuted }) : suffix;
   const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
     EaseView,
@@ -64,6 +66,8 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
         secureTextEntry: effectiveSecure,
         editable: isDisabled ? false : editable,
         accessibilityLabel: accessibilityLabel ?? label,
+        autoCapitalize: effectiveAutoCapitalize,
+        autoCorrect: effectiveAutoCorrect,
         ...props
       }
     ) : /* @__PURE__ */ React.createElement(
@@ -88,6 +92,8 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
         secureTextEntry: effectiveSecure,
         editable: isDisabled ? false : editable,
         accessibilityLabel: accessibilityLabel ?? label,
+        autoCapitalize: effectiveAutoCapitalize,
+        autoCorrect: effectiveAutoCorrect,
         ...props
       }
     ),

package/dist/{chunk-3XCFYSX4.mjs → chunk-5MYNAAFE.mjs}

@@ -1,13 +1,12 @@
-import { usePressScale } from './chunk-YNROWHQJ.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { PressableChip } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useCallback } from 'react';
-import { TouchableOpacity, View, Text, StyleSheet, ScrollView } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
 import { EaseView } from 'react-native-ease';
 
 var CategoryChip = React.memo(function CategoryChip2({
@@ -16,19 +15,16 @@ var CategoryChip = React.memo(function CategoryChip2({
   onSelect
 }) {
   const { colors } = useTheme();
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip
-  });
   const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
-  const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, iconColor) : item.icon ?? null;
-  return /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  const resolvedIcon = typeof item.icon === "string" ? /* @__PURE__ */ React.createElement(Icon, { name: item.icon, size: 16, color: iconColor }) : item.icon ?? null;
+  return /* @__PURE__ */ React.createElement(
+    PressableChip,
     {
       onPress: () => onSelect(item.value),
-      onPressIn,
-      onPressOut,
-      activeOpacity: 1,
+      enabled: true,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
+      activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: item.label,
       accessibilityState: { selected }
@@ -54,7 +50,7 @@ var CategoryChip = React.memo(function CategoryChip2({
       ),
       item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React.createElement(View, { style: [styles.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
     )
-  ));
+  );
 });
 function CategoryStrip({
   categories,

package/dist/{chunk-E7NEHHXV.mjs → chunk-62BBSSUF.mjs}

@@ -1,6 +1,6 @@
-import { PressableCard } from './chunk-3DKJ2GIC.mjs';
-import { impactLight } from './chunk-EJ7ZPXOH.mjs';
-import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { PRESS_SCALE } from './chunk-M53LC4Q7.mjs';
+import { PressableCard } from './chunk-IFYMBOEN.mjs';
+import { impactLight } from './chunk-ARONDO7M.mjs';
 import React from 'react';
 
 function Pressable({

package/dist/{chunk-UBUXUMER.mjs → chunk-77UOVFIS.mjs}

@@ -1,7 +1,7 @@
-import { PressableButton } from './chunk-3DKJ2GIC.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { COLOR_TRANSITION, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { COLOR_TRANSITION, OPACITY_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { PressableButton } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -13,7 +13,8 @@ function Checkbox({
   label,
   disabled,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -34,6 +35,7 @@ function Checkbox({
         touchSoundDisabled: true,
         accessibilityRole: "checkbox",
         accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityHint,
         accessibilityState: { checked, disabled: !!disabled }
       },
       /* @__PURE__ */ React.createElement(

package/dist/{chunk-M3C7XM2M.mjs → chunk-7BZJRB77.mjs}

@@ -1,7 +1,7 @@
-import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { impactMedium } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
-import React, { useRef, useId, useCallback, useEffect } from 'react';
+import React, { useRef, useId, useState, useEffect, useCallback } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
@@ -39,23 +39,33 @@ function Sheet({
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const ref = useRef(null);
-  const wasOpened = useRef(false);
-  const isPresentedRef = useRef(false);
+  const sheetState = useRef("idle");
+  const onCloseRef = useRef(onClose);
   const name = useId();
-  const handleDismiss = useCallback(() => {
-    isPresentedRef.current = false;
-    onClose?.();
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    onCloseRef.current = onClose;
   }, [onClose]);
+  const handleDismiss = useCallback(() => {
+    sheetState.current = "idle";
+    onCloseRef.current?.();
+    setTick((t) => t + 1);
+  }, []);
   useEffect(() => {
-    if (open && !isPresentedRef.current) {
-      impactMedium();
-      ref.current?.present();
-      wasOpened.current = true;
-      isPresentedRef.current = true;
-    } else if (!open && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss();
+    if (open) {
+      if (sheetState.current === "idle") {
+        sheetState.current = "presenting";
+        impactMedium();
+        ref.current?.present();
+        sheetState.current = "presented";
+      }
+    } else {
+      if (sheetState.current === "presented" || sheetState.current === "presenting") {
+        sheetState.current = "dismissing";
+        ref.current?.dismiss();
+      }
     }
-  }, [open]);
+  }, [open, tick]);
   const renderBackdrop = useCallback(
     (props) => /* @__PURE__ */ React.createElement(
       BottomSheetBackdrop,
@@ -84,7 +94,7 @@ function Sheet({
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Close",
+      accessibilityLabel: "Cerrar",
       hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
     },
     /* @__PURE__ */ React.createElement(AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
@@ -191,4 +201,4 @@ var styles = StyleSheet.create({
   }
 });
 
-export { Sheet };
+export { Sheet, SheetContent, SheetFooter, SheetHeader };

package/dist/chunk-ARONDO7M.mjs

@@ -0,0 +1,40 @@
+import { Platform } from 'react-native';
+
+// src/utils/haptics.ts
+var _haptics = null;
+var _loaded = false;
+async function getHaptics() {
+  if (Platform.OS === "web") return null;
+  if (!_loaded) {
+    _loaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+function selectionAsync() {
+  getHaptics().then((h) => h?.selectionAsync());
+}
+function impactLight() {
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
+}
+function impactMedium() {
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium));
+}
+function impactHeavy() {
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Heavy));
+}
+function notificationSuccess() {
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
+}
+function notificationError() {
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Error));
+}
+function notificationWarning() {
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Warning));
+}
+
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, selectionAsync };

package/dist/{chunk-GH67YXG6.mjs → chunk-AZV7KNJI.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -44,7 +44,7 @@ function BadgeBase({ label, children, variant = "default", size = "md", icon, ic
     destructiveOutline: colors.destructive,
     warningOutline: colors.warning
   }[variant];
-  const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
+  const effectiveIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: sizeIconSize[size], color: iconColor ?? textColor }) : icon;
   const content = children ?? label;
   const a11yLabel = typeof content === "string" ? content : label;
   return /* @__PURE__ */ React.createElement(

package/dist/{chunk-2P2CB235.mjs → chunk-BULKGOIZ.mjs}

@@ -1,8 +1,8 @@
-import { impactLight } from './chunk-EJ7ZPXOH.mjs';
-import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { impactLight } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { createContext, useContext } from 'react';
 import { StyleSheet, View, Pressable, Text } from 'react-native';
@@ -92,15 +92,14 @@ function SelectableCard({
     }
     return base;
   })();
-  const resolvedIcon = iconName ? renderIcon(iconName, ms(22), disabled ? colors.foregroundMuted : colors.foregroundMuted) : icon;
+  const resolvedIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: ms(22), color: disabled ? colors.foregroundMuted : colors.foregroundMuted }) : icon;
   const resolvedIconElement = resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: [styles.iconWrapper, disabled && { opacity: 0.45 }] }, resolvedIcon) : null;
-  const selectorAccessibilityRole = type === "radio" ? "radio" : "checkbox";
   return /* @__PURE__ */ React.createElement(
     Pressable,
     {
       onPress: handlePress,
       disabled,
-      accessibilityRole: "button",
+      accessibilityRole: type === "radio" ? "radio" : "checkbox",
       accessibilityLabel: `${title}${description ? `, ${description}` : ""}`,
       accessibilityState: { selected: isSelected, disabled },
       style: [
@@ -110,7 +109,7 @@ function SelectableCard({
         style
       ]
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles.row }, /* @__PURE__ */ React.createElement(View, { style: styles.selectorContainer, accessibilityRole: selectorAccessibilityRole, accessibilityState: { selected: isSelected, disabled } }, type === "radio" ? /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles.row }, /* @__PURE__ */ React.createElement(View, { style: styles.selectorContainer }, type === "radio" ? /* @__PURE__ */ React.createElement(
       EaseView,
       {
         style: styles.radioCircle,

package/dist/{chunk-RJNLAH76.mjs → chunk-C5ZRMR2E.mjs}

@@ -1,5 +1,5 @@
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -16,6 +16,7 @@ function Slider({
   showValue = false,
   formatValue = (v) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style
 }) {
@@ -34,6 +35,7 @@ function Slider({
       style: [styles.wrapper, style],
       accessibilityRole: "adjustable",
       accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
       accessibilityValue: {
         min: minimumValue,
         max: maximumValue,

package/dist/chunk-CM2DG4MR.mjs

@@ -0,0 +1,142 @@
+import { PressableCard } from './chunk-IFYMBOEN.mjs';
+import { impactLight } from './chunk-ARONDO7M.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { Image } from 'expo-image';
+import { StyleSheet, View, TouchableOpacity, Platform, Text } from 'react-native';
+
+var aspectRatioMap = {
+  "1:1": 1,
+  "4:3": 3 / 4,
+  "16:9": 9 / 16,
+  "4:5": 5 / 4,
+  "3:2": 2 / 3
+};
+function MediaCardBase({
+  imageSource,
+  aspectRatio = "4:3",
+  badge,
+  actionIcon,
+  actionIconName,
+  actionActive = false,
+  onActionPress,
+  title,
+  subtitle,
+  caption,
+  onPress,
+  style,
+  imageStyle,
+  footer,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const handlePress = () => {
+    if (!onPress) return;
+    impactLight();
+    onPress();
+  };
+  const ratio = aspectRatioMap[aspectRatio];
+  const resolvedActionIcon = actionIconName ? /* @__PURE__ */ React.createElement(Icon, { name: actionIconName, size: 18, color: actionActive ? colors.primary : colors.background }) : actionIcon ?? /* @__PURE__ */ React.createElement(Icon, { name: "heart", size: 18, color: actionActive ? colors.primary : colors.background });
+  const a11yLabel = accessibilityLabel ?? [title, subtitle].filter(Boolean).join(". ");
+  const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, style] }, /* @__PURE__ */ React.createElement(View, { style: [styles.imageContainer, imageStyle] }, /* @__PURE__ */ React.createElement(View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React.createElement(View, { style: StyleSheet.absoluteFill }, imageSource ? /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      source: imageSource,
+      style: styles.image,
+      contentFit: "cover"
+    }
+  ) : /* @__PURE__ */ React.createElement(View, { style: [styles.imagePlaceholder, { backgroundColor: colors.surface }] }))), badge && /* @__PURE__ */ React.createElement(View, { style: styles.badgeContainer }, badge), (onActionPress || actionIcon || actionIconName) && /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
+      onPress: (e) => {
+        e?.stopPropagation?.();
+        impactLight();
+        onActionPress?.();
+      },
+      activeOpacity: 0.8,
+      touchSoundDisabled: true,
+      accessibilityRole: Platform.OS === "web" && onPress ? void 0 : "button",
+      accessibilityLabel: actionIconName ?? "acci\xF3n",
+      accessibilityState: { selected: actionActive }
+    },
+    resolvedActionIcon
+  )), (title || subtitle || caption || footer) && /* @__PURE__ */ React.createElement(View, { style: styles.meta }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React.createElement(Text, { style: [styles.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer));
+  if (onPress) {
+    return /* @__PURE__ */ React.createElement(
+      PressableCard,
+      {
+        onPress: handlePress,
+        enabled: true,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        activateOnHover: true,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { disabled: false }
+      },
+      cardContent
+    );
+  }
+  return cardContent;
+}
+var MediaCard = React.memo(MediaCardBase);
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    overflow: "hidden",
+    backgroundColor: "transparent"
+  },
+  imageContainer: {
+    borderRadius: RADIUS.md,
+    overflow: "hidden"
+  },
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  imagePlaceholder: {
+    width: "100%",
+    height: "100%"
+  },
+  badgeContainer: {
+    position: "absolute",
+    top: s(8),
+    left: s(8)
+  },
+  actionButton: {
+    position: "absolute",
+    top: s(8),
+    right: s(8),
+    width: s(32),
+    height: s(32),
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  meta: {
+    paddingTop: vs(8),
+    paddingBottom: vs(4),
+    gap: vs(2)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  caption: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: mvs(16)
+  }
+});
+
+export { MediaCard };

package/dist/{chunk-UQ4742ET.mjs → chunk-COA2YZOX.mjs}

@@ -1,8 +1,8 @@
-import { PressableRow } from './chunk-3DKJ2GIC.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PressableRow } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -22,14 +22,15 @@ function MenuItemBase({
   showSeparator = false,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
     selectionAsync();
     onPress();
   };
-  const resolvedIcon = iconName ? renderIcon(iconName, 22, iconColor ?? colors.foreground) : icon;
+  const resolvedIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: 22, color: iconColor ?? colors.foreground }) : icon;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
     borderRadius: RADIUS.md,
@@ -53,6 +54,7 @@ function MenuItemBase({
       activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
+      accessibilityHint,
       accessibilityState: { disabled }
     },
     resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.iconContainer }, resolvedIcon) : null,

package/dist/{chunk-EDLCGYIO.mjs → chunk-CZN6L2QU.mjs}

@@ -1,11 +1,12 @@
-import { PressableRow } from './chunk-3DKJ2GIC.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PressableRow } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, Image, View, Text } from 'react-native';
+import { Image } from 'expo-image';
+import { StyleSheet, View, Text } from 'react-native';
 import { Entypo } from '@expo/vector-icons';
 
 function ListItemBase({
@@ -30,14 +31,15 @@ function ListItemBase({
   subtitleStyle,
   subtitleNumberOfLines = 2,
   captionStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
     selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = imageSource ? /* @__PURE__ */ React.createElement(Image, { source: imageSource, style: styles.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender;
+  const effectiveLeft = imageSource ? /* @__PURE__ */ React.createElement(Image, { source: imageSource, style: styles.image }) : leftIcon ? /* @__PURE__ */ React.createElement(Icon, { name: leftIcon, size: 24, color: leftIconColor ?? colors.foreground }) : leftRender;
   const hasRightContent = !!(rightIcon || rightActions && rightActions.length > 0 || rightRender !== void 0 || showChevron);
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
@@ -75,7 +77,7 @@ function ListItemBase({
       allowFontScaling: true
     },
     caption
-  ) : null), hasRightContent ? rightIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted)) : rightActions && rightActions.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightActionsContainer }, rightActions.map((action, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, action))) : rightRender !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof rightRender === "string" ? /* @__PURE__ */ React.createElement(
+  ) : null), hasRightContent ? rightIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, /* @__PURE__ */ React.createElement(Icon, { name: rightIcon, size: 24, color: rightIconColor ?? colors.foregroundMuted })) : rightActions && rightActions.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightActionsContainer }, rightActions.map((action, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: i }, action))) : rightRender !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof rightRender === "string" ? /* @__PURE__ */ React.createElement(
     Text,
     {
       style: [styles.rightText, { color: colors.foregroundMuted }],
@@ -95,6 +97,7 @@ function ListItemBase({
         activateOnHover: true,
         accessibilityRole: "button",
         accessibilityLabel: a11yLabel,
+        accessibilityHint,
         accessibilityState: { disabled: !!disabled }
       },
       content