@retray-dev/ui-kit 13.0.0 → 13.2.0

package/dist/index.js

@@ -35,12 +35,7 @@ var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
 var Animated6__default = /*#__PURE__*/_interopDefault(Animated6);
 var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
 
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
+// src/theme/ThemeProvider.tsx
 
 // src/theme/colorUtils.ts
 function hexToRgb(hex) {
@@ -1828,7 +1823,8 @@ function Checkbox({
   label,
   disabled,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -1849,6 +1845,7 @@ function Checkbox({
         touchSoundDisabled: true,
         accessibilityRole: "checkbox",
         accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityHint,
         accessibilityState: { checked, disabled: !!disabled }
       },
       /* @__PURE__ */ React54__default.default.createElement(
@@ -1912,7 +1909,7 @@ var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
 var ICON_SIZE = s(13);
 var DISABLED_OPACITY = 0.45;
-function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
+function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel, accessibilityHint }) {
   const { colors } = useTheme();
   const isDisabled = !!disabled;
   return /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React54__default.default.createElement(
@@ -1927,6 +1924,7 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
+      accessibilityHint,
       accessibilityState: { checked, disabled: isDisabled },
       style: styles16.touchable
     },
@@ -2456,6 +2454,7 @@ function AccordionItemComponent({
       accessibilityRole: "button",
       accessibilityState: { expanded: isOpen },
       accessibilityLabel: typeof item.trigger === "string" ? item.trigger : void 0,
+      accessibilityHint: item.accessibilityHint,
       style: styles20.trigger
     },
     /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: styles20.icon }, resolvedIcon) : null, typeof item.trigger === "string" ? /* @__PURE__ */ React54__default.default.createElement(reactNative.Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger) : item.trigger),
@@ -2567,6 +2566,7 @@ function Slider({
   showValue = false,
   formatValue: formatValue2 = (v) => v.toFixed(2),
   accessibilityLabel,
+  accessibilityHint,
   disabled,
   style
 }) {
@@ -2585,6 +2585,7 @@ function Slider({
       style: [styles21.wrapper, style],
       accessibilityRole: "adjustable",
       accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
       accessibilityValue: {
         min: minimumValue,
         max: maximumValue,
@@ -2668,23 +2669,33 @@ function Sheet({
   const { colors } = useTheme();
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const ref = React54.useRef(null);
-  const wasOpened = React54.useRef(false);
-  const isPresentedRef = React54.useRef(false);
+  const sheetState = React54.useRef("idle");
+  const onCloseRef = React54.useRef(onClose);
   const name = React54.useId();
-  const handleDismiss = React54.useCallback(() => {
-    isPresentedRef.current = false;
-    onClose?.();
+  const [tick, setTick] = React54.useState(0);
+  React54.useEffect(() => {
+    onCloseRef.current = onClose;
   }, [onClose]);
+  const handleDismiss = React54.useCallback(() => {
+    sheetState.current = "idle";
+    onCloseRef.current?.();
+    setTick((t) => t + 1);
+  }, []);
   React54.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 = React54.useCallback(
     (props) => /* @__PURE__ */ React54__default.default.createElement(
       bottomSheet.BottomSheetBackdrop,
@@ -2832,7 +2843,8 @@ function Select({
   error,
   disabled,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const [pickerVisible, setPickerVisible] = React54.useState(false);
@@ -2876,6 +2888,7 @@ function Select({
       touchSoundDisabled: true,
       accessibilityRole: "combobox",
       accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
       accessibilityValue: { text: selected?.label ?? placeholder },
       accessibilityState: { disabled: !!disabled, expanded: pickerVisible }
     },
@@ -3219,7 +3232,8 @@ function ListItemBase({
   subtitleStyle,
   subtitleNumberOfLines = 2,
   captionStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -3284,6 +3298,7 @@ function ListItemBase({
         activateOnHover: true,
         accessibilityRole: "button",
         accessibilityLabel: a11yLabel,
+        accessibilityHint,
         accessibilityState: { disabled: !!disabled }
       },
       content
@@ -3444,7 +3459,8 @@ function MenuItemBase({
   showSeparator = false,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const handlePress = () => {
@@ -3475,6 +3491,7 @@ function MenuItemBase({
       activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
+      accessibilityHint,
       accessibilityState: { disabled }
     },
     resolvedIcon ? /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: styles27.iconContainer }, resolvedIcon) : null,
@@ -3734,28 +3751,39 @@ function ConfirmDialog({
   loading = false,
   showCloseButton = false,
   onConfirm,
-  onCancel
+  onCancel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   const ref = React54.useRef(null);
-  const wasOpened = React54.useRef(false);
-  const isPresentedRef = React54.useRef(false);
+  const dialogState = React54.useRef("idle");
+  const onCancelRef = React54.useRef(onCancel);
   const name = React54.useId();
-  const handleDismiss = React54.useCallback(() => {
-    isPresentedRef.current = false;
-    onCancel();
+  const [tick, setTick] = React54.useState(0);
+  React54.useEffect(() => {
+    onCancelRef.current = onCancel;
   }, [onCancel]);
+  const handleDismiss = React54.useCallback(() => {
+    dialogState.current = "idle";
+    onCancelRef.current?.();
+    setTick((t) => t + 1);
+  }, []);
   React54.useEffect(() => {
-    if (visible && !isPresentedRef.current) {
-      impactMedium();
-      ref.current?.present();
-      wasOpened.current = true;
-      isPresentedRef.current = true;
-    } else if (!visible && wasOpened.current && isPresentedRef.current) {
-      ref.current?.dismiss();
+    if (visible) {
+      if (dialogState.current === "idle") {
+        dialogState.current = "presenting";
+        impactMedium();
+        ref.current?.present();
+        dialogState.current = "presented";
+      }
+    } else {
+      if (dialogState.current === "presented" || dialogState.current === "presenting") {
+        dialogState.current = "dismissing";
+        ref.current?.dismiss();
+      }
     }
-  }, [visible]);
+  }, [visible, tick]);
   const renderBackdrop = React54.useCallback(
     (props) => /* @__PURE__ */ React54__default.default.createElement(
       bottomSheet.BottomSheetBackdrop,
@@ -3805,6 +3833,7 @@ function ConfirmDialog({
           notificationSuccess();
           onConfirm();
         },
+        accessibilityHint,
         icon: /* @__PURE__ */ React54__default.default.createElement(
           vectorIcons.Feather,
           {
@@ -4686,6 +4715,7 @@ function AppHeader({
   subtitle,
   onBack,
   backIconName = "chevron-left",
+  iconName,
   left,
   right,
   titleAlign = "auto",
@@ -4699,7 +4729,7 @@ function AppHeader({
   const { width } = reactNative.useWindowDimensions();
   const isWide = width >= BREAKPOINTS.wide;
   const centered = titleAlign === "center" || titleAlign === "auto" && isWide;
-  const leftNode = left ?? (onBack ? /* @__PURE__ */ React54__default.default.createElement(
+  const leftNode = left ?? /* @__PURE__ */ React54__default.default.createElement(React54__default.default.Fragment, null, onBack ? /* @__PURE__ */ React54__default.default.createElement(
     IconButton,
     {
       iconName: backIconName,
@@ -4708,7 +4738,7 @@ function AppHeader({
       onPress: onBack,
       accessibilityLabel: "Atr\xE1s"
     }
-  ) : null);
+  ) : null, iconName && !left ? /* @__PURE__ */ React54__default.default.createElement(Icon, { name: iconName, size: 20, color: colors.foreground }) : null);
   const titleBlock = /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: [styles40.titleBlock, centered && styles40.titleBlockCentered], pointerEvents: "none" }, title ? /* @__PURE__ */ React54__default.default.createElement(
     reactNative.Text,
     {
@@ -4758,10 +4788,13 @@ var styles40 = reactNative.StyleSheet.create({
     minWidth: s(44),
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-start"
+    justifyContent: "flex-start",
+    paddingLeft: s(8),
+    gap: s(4)
   },
   sideRight: {
-    justifyContent: "flex-end"
+    justifyContent: "flex-end",
+    paddingRight: s(8)
   },
   titleBlock: {
     flex: 1,
@@ -4809,7 +4842,6 @@ function Cell({ item, selected, width, onPress }) {
         { width },
         styles41.cell,
         {
-          backgroundColor: selected ? colors.primary + "14" : colors.surface,
           borderColor: selected ? colors.primary : "transparent"
         },
         item.disabled && styles41.cellDisabled
@@ -5694,7 +5726,6 @@ function ImageUpload({
   height = 200,
   borderRadius = RADIUS.lg,
   resizeMode = "cover",
-  allowsEditing = true,
   disabled = false,
   style,
   accessibilityLabel,
@@ -5702,25 +5733,32 @@ function ImageUpload({
 }) {
   const { colors } = useTheme();
   const [imageLoaded, setImageLoaded] = React54.useState(false);
+  const [isPicking, setIsPicking] = React54.useState(false);
   const handlePress = async () => {
-    if (disabled || loading) return;
+    if (disabled || loading || isPicking) return;
     impactLight();
     onPickerStarting?.();
-    let picker;
+    setIsPicking(true);
     try {
-      picker = __require("expo-image-picker");
+      const { launchImageLibrary } = await import('react-native-image-picker');
+      const result = await new Promise((resolve) => {
+        launchImageLibrary(
+          {
+            mediaType: "photo",
+            quality: 0.8,
+            selectionLimit: 1,
+            includeBase64: false
+          },
+          resolve
+        );
+      });
+      if (!result.didCancel && !result.errorCode && result.assets?.[0]?.uri) {
+        setImageLoaded(false);
+        onChange?.(result.assets[0].uri);
+      }
     } catch {
-      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed.");
-      return;
-    }
-    const result = await picker.launchImageLibraryAsync({
-      mediaTypes: ["images"],
-      allowsEditing,
-      quality: 0.8
-    });
-    if (!result.canceled && result.assets?.[0]) {
-      setImageLoaded(false);
-      onChange?.(result.assets[0].uri);
+    } finally {
+      setIsPicking(false);
     }
   };
   const containerStyle = {
@@ -5763,7 +5801,7 @@ function ImageUpload({
       },
       placeholder
     ) : null),
-    loading ? /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: [styles47.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React54__default.default.createElement(Spinner, { size: "md" })) : null,
+    loading || isPicking ? /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: [styles47.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React54__default.default.createElement(Spinner, { size: "md" })) : null,
     value && !loading ? /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: styles47.editBadge, pointerEvents: "none" }, /* @__PURE__ */ React54__default.default.createElement(reactNative.View, { style: [styles47.editBadgeInner, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React54__default.default.createElement(vectorIcons.Feather, { name: "edit-2", size: ms(12), color: "#fff" }))) : null
   );
 }
@@ -5786,12 +5824,12 @@ var styles47 = reactNative.StyleSheet.create({
   },
   editBadge: {
     position: "absolute",
-    bottom: vs(8),
-    right: s(8)
+    bottom: vs(14),
+    right: s(14)
   },
   editBadgeInner: {
-    width: s(28),
-    height: s(28),
+    width: s(24),
+    height: s(24),
     borderRadius: 999,
     alignItems: "center",
     justifyContent: "center"
@@ -6379,7 +6417,8 @@ function NumberStepperBase({
   size = "md",
   disabled = false,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const canDecrement = value > min && !disabled;
@@ -6415,6 +6454,7 @@ function NumberStepperBase({
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: `Disminuir, valor actual ${displayValue}`,
+      accessibilityHint,
       accessibilityState: { disabled: !canDecrement }
     },
     /* @__PURE__ */ React54__default.default.createElement(Icon, { name: "minus", size: iconSize, color: canDecrement ? colors.foreground : colors.foregroundMuted })
@@ -6454,6 +6494,7 @@ function NumberStepperBase({
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: `Aumentar, valor actual ${displayValue}`,
+      accessibilityHint,
       accessibilityState: { disabled: !canIncrement }
     },
     /* @__PURE__ */ React54__default.default.createElement(Icon, { name: "plus", size: iconSize, color: canIncrement ? colors.foreground : colors.foregroundMuted })
@@ -6759,6 +6800,9 @@ exports.SelectableCardGroup = SelectableCardGroup;
 exports.SelectableGrid = SelectableGrid;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
+exports.SheetContent = SheetContent;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
 exports.SheetSelect = SheetSelect;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;

package/dist/index.mjs

@@ -1,20 +1,20 @@
 export { Toggle } from './chunk-RRKM4MKB.mjs';
 export { Stats } from './chunk-ZKDKKQCE.mjs';
-export { Switch } from './chunk-BTUW5LSG.mjs';
+export { Switch } from './chunk-E2PONRJG.mjs';
 export { TabBar } from './chunk-U6DEBYU5.mjs';
 export { Tabs, TabsContent } from './chunk-KC5QDYGZ.mjs';
 export { Text } from './chunk-EHGBHFMH.mjs';
 export { Textarea } from './chunk-L3YKPTJQ.mjs';
-export { Select } from './chunk-URIH43IJ.mjs';
+export { Select } from './chunk-IDVUZIVY.mjs';
 export { SelectableCard, SelectableCardGroup } from './chunk-BULKGOIZ.mjs';
-export { SelectableGrid } from './chunk-MP7GLMIR.mjs';
+export { SelectableGrid } from './chunk-NPCBNGNE.mjs';
 export { Separator } from './chunk-EW2FIDSM.mjs';
-export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-2QOHHBJC.mjs';
+export { BottomSheetModalProvider, Sheet, SheetContent, SheetFooter, SheetHeader, BottomSheetTextInput as SheetTextInput } from './chunk-7BZJRB77.mjs';
 export { SheetSelect } from './chunk-WIPEDNSD.mjs';
 export { Skeleton } from './chunk-XCIG6HT2.mjs';
-export { Slider } from './chunk-UOKFSFNJ.mjs';
+export { Slider } from './chunk-C5ZRMR2E.mjs';
 export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-ITG4JQM3.mjs';
-export { NumberStepper } from './chunk-TETMEKZE.mjs';
+export { NumberStepper } from './chunk-2QXJDRVU.mjs';
 export { Pressable } from './chunk-62BBSSUF.mjs';
 export { PricingCard } from './chunk-K3QX2M26.mjs';
 export { Progress } from './chunk-DBHSUUKU.mjs';
@@ -25,29 +25,29 @@ export { ImageViewer } from './chunk-PGQ6FMXS.mjs';
 export { PagerDots } from './chunk-S44XWTTC.mjs';
 export { LabelValue } from './chunk-DE25XTVQ.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-OBV72JD4.mjs';
-export { ListItem } from './chunk-6QLBHUEG.mjs';
+export { ListItem } from './chunk-CZN6L2QU.mjs';
 export { MediaCard } from './chunk-CM2DG4MR.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-S2VGME7X.mjs';
-export { MenuItem } from './chunk-E4EQSCKR.mjs';
+export { MenuItem } from './chunk-COA2YZOX.mjs';
 export { DetailRow } from './chunk-KAGADD2O.mjs';
 export { EmptyState } from './chunk-FTTI6T5Q.mjs';
 export { ErrorBoundary } from './chunk-ESQDPO5E.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-KPTY7UYQ.mjs';
 export { IconPicker } from './chunk-NGEN2EES.mjs';
-export { ImageUpload } from './chunk-EROPDCB5.mjs';
+export { ImageUpload } from './chunk-HHOOFDBA.mjs';
 export { Spinner } from './chunk-2VIDP72N.mjs';
 export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-TMH263OK.mjs';
 export { CategoryStrip } from './chunk-5MYNAAFE.mjs';
-export { Checkbox } from './chunk-4ZO5PTKF.mjs';
+export { Checkbox } from './chunk-77UOVFIS.mjs';
 export { Chip, ChipGroup } from './chunk-RA6SAAFE.mjs';
-export { ConfirmDialog } from './chunk-V2ZB2XNS.mjs';
+export { ConfirmDialog } from './chunk-UMZTPUB3.mjs';
 export { CurrencyDisplay } from './chunk-PI6RULJX.mjs';
 export { CurrencyInput } from './chunk-HUSSF6TF.mjs';
 export { Input } from './chunk-4NQFTHN3.mjs';
-export { Accordion } from './chunk-CBIZLRYH.mjs';
+export { Accordion } from './chunk-422IVD3H.mjs';
 export { AlertBanner } from './chunk-K7TKID3V.mjs';
-export { AppHeader } from './chunk-6CR4S6W2.mjs';
+export { AppHeader } from './chunk-H6MQL7PS.mjs';
 export { IconButton } from './chunk-ZTPYUU5C.mjs';
 export { Avatar, AvatarGroup } from './chunk-IGU223UM.mjs';
 export { Badge } from './chunk-AZV7KNJI.mjs';
@@ -59,7 +59,6 @@ export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from '.
 export { Icon } from './chunk-MZ6WRTD2.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha } from './chunk-KSSVIFYR.mjs';
 import './chunk-2CE3TQVY.mjs';
-import './chunk-Y6FXYEAI.mjs';
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // src/utils/typography.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retray-dev/ui-kit",
-  "version": "13.0.0",
+  "version": "13.2.0",
   "description": "Personal UI Kit for React Native / Expo",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -26,11 +26,11 @@
     "dist",
     "src",
     "scripts",
-    "COMPONENTS.md",
     "CONSUMER.md",
     "EXAMPLES.md",
     "FONTS.md",
-    "DESIGN.md"
+    "DESIGN.md",
+    "SKILL.md"
   ],
   "scripts": {
     "postinstall": "node scripts/copy-fonts.js",
@@ -66,8 +66,9 @@
     "expo-font": ">=14.0.0",
     "expo-haptics": ">=14.0.0",
     "expo-image": ">=3.0.0",
-    "expo-image-picker": ">=15.0.0",
+    "react-native-image-picker": ">=7.0.0",
     "expo-linear-gradient": ">=13.0.0",
+    "expo-modules-core": ">=3.0.0",
     "expo-sensors": ">=13.0.0",
     "pressto": ">=0.6.0",
     "react": ">=17",
@@ -89,14 +90,15 @@
     "expo-sensors": {
       "optional": true
     },
-"expo-image-picker": {
-      "optional": true
-    },
+
     "react-native-ease": {
       "optional": false
     },
     "pressto": {
       "optional": false
+    },
+    "react-native-image-picker": {
+      "optional": true
     }
   },
   "pnpm": {
@@ -133,21 +135,21 @@
     "expo-haptics": "~15.0.8",
     "expo-image": "~3.0.11",
     "expo-linear-gradient": "~15.0.8",
-    "expo-sensors": "~15.0.7",
+    "expo-sensors": "~15.0.8",
     "jest-expo": "~54.0.17",
-    "pressto": "^0.6.1",
+    "pressto": "^0.7.0",
     "prettier": "^3.8.3",
     "react": "19.1.0",
     "react-native": "0.81.5",
-    "react-native-ease": "^0.7.2",
+    "react-native-ease": "^0.7.3",
     "react-native-gesture-handler": "~2.28.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "5.6.2",
     "react-native-screens": "4.16.0",
     "react-native-size-matters": "^0.4.2",
-    "react-native-svg": "15.12.1",
+    "react-native-svg": "15.15.5",
     "react-native-worklets": "~0.5.1",
-    "sonner-native": "0.23.1",
+    "sonner-native": "0.26.3",
     "test-renderer": "^1.2.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",

package/src/components/Accordion/Accordion.tsx

@@ -30,12 +30,14 @@ export interface AccordionItem {
   icon?: React.ReactNode
   /** Override icon color. Defaults to foregroundMuted. */
   iconColor?: string
+  /**
   /**
    * Action buttons rendered after the trigger content but before the chevron.
    * Automatically touch-isolated — taps on actions won't toggle the accordion.
    * Use this instead of embedding interactive elements inside `trigger`.
    */
   triggerActions?: React.ReactNode
+  accessibilityHint?: string
 }
 
 export interface AccordionProps {
@@ -111,6 +113,7 @@ function AccordionItemComponent({
         accessibilityRole="button"
         accessibilityState={{ expanded: isOpen }}
         accessibilityLabel={typeof item.trigger === 'string' ? item.trigger : undefined}
+        accessibilityHint={item.accessibilityHint}
         style={styles.trigger}
       >
         <View style={styles.triggerContent}>

package/src/components/AppHeader/AppHeader.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, ViewStyle, useWindowDimensions } from 'react-na
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../theme'
 import { IconButton } from '../IconButton'
+import { Icon } from '../../utils/icons'
 import { s, vs, ms, mvs } from '../../utils/scaling'
 import { BREAKPOINTS } from '../../tokens'
 
@@ -15,7 +16,9 @@ export interface AppHeaderProps {
   onBack?: () => void
   /** Icon name for the back button. Defaults to `'chevron-left'`. */
   backIconName?: string
-  /** Custom left content — overrides the back button. */
+  /** Icon name for a decorative icon shown left of the title, after the back button. Ignored when `left` is provided. */
+  iconName?: string
+  /** Custom left content — overrides the back button and `iconName`. */
   left?: React.ReactNode
   /** Custom right content (actions). */
   right?: React.ReactNode
@@ -40,12 +43,14 @@ export interface AppHeaderProps {
  *
  * @example
  * <AppHeader title="Settings" onBack={navigation.goBack} right={<IconButton iconName="more-horizontal" variant="text" />} />
+ * <AppHeader title="Perfil" iconName="user" onBack={navigation.goBack} />
  */
 export function AppHeader({
   title,
   subtitle,
   onBack,
   backIconName = 'chevron-left',
+  iconName,
   left,
   right,
   titleAlign = 'auto',
@@ -61,15 +66,22 @@ export function AppHeader({
   const isWide = width >= BREAKPOINTS.wide
   const centered = titleAlign === 'center' || (titleAlign === 'auto' && isWide)
 
-  const leftNode = left ?? (onBack ? (
-    <IconButton
-      iconName={backIconName}
-      variant="text"
-      size="md"
-      onPress={onBack}
-      accessibilityLabel="Atrás"
-    />
-  ) : null)
+  const leftNode = left ?? (
+    <>
+      {onBack ? (
+        <IconButton
+          iconName={backIconName}
+          variant="text"
+          size="md"
+          onPress={onBack}
+          accessibilityLabel="Atrás"
+        />
+      ) : null}
+      {iconName && !left ? (
+        <Icon name={iconName} size={20} color={colors.foreground} />
+      ) : null}
+    </>
+  )
 
   const titleBlock = (
     <View style={[styles.titleBlock, centered && styles.titleBlockCentered]} pointerEvents="none">
@@ -143,9 +155,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start',
+    paddingLeft: s(8),
+    gap: s(4),
   },
   sideRight: {
     justifyContent: 'flex-end',
+    paddingRight: s(8),
   },
   titleBlock: {
     flex: 1,

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ export interface CheckboxProps {
   disabled?: boolean
   style?: ViewStyle
   accessibilityLabel?: string
+  accessibilityHint?: string
 }
 
 export function Checkbox({
@@ -23,6 +24,7 @@ export function Checkbox({
   disabled,
   style,
   accessibilityLabel,
+  accessibilityHint,
 }: CheckboxProps) {
   const { colors } = useTheme()
 
@@ -43,6 +45,7 @@ export function Checkbox({
       touchSoundDisabled
       accessibilityRole="checkbox"
       accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityHint={accessibilityHint}
       accessibilityState={{ checked, disabled: !!disabled }}
     >
       <EaseView