@retray-dev/ui-kit 12.2.0 → 13.2.0

package/dist/chunk-IJCMPVW5.mjs

@@ -0,0 +1,121 @@
+import { COLOR_TRANSITION, SPRING_ELASTIC } 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, s, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+function RadioItem({
+  option,
+  selected,
+  onSelect
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [styles.row, option.disabled && styles.rowDisabled],
+      onPress: () => {
+        if (!option.disabled) {
+          selectionAsync();
+          onSelect();
+        }
+      },
+      enabled: !option.disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "radio",
+      accessibilityLabel: option.label,
+      accessibilityState: { checked: selected, disabled: !!option.disabled }
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.radio,
+        animate: { borderColor: selected ? colors.primary : colors.border },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.dot, { backgroundColor: colors.primary }],
+          animate: { scale: selected ? 1 : 0, opacity: selected ? 1 : 0 },
+          transition: SPRING_ELASTIC
+        }
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, { color: colors.foreground }],
+        allowFontScaling: true
+      },
+      option.label
+    )
+  );
+}
+function RadioGroup({
+  options,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  style,
+  accessibilityLabel
+}) {
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, orientation === "horizontal" && styles.horizontal, style],
+      accessibilityRole: "radiogroup",
+      accessibilityLabel
+    },
+    options.map((option) => /* @__PURE__ */ React.createElement(
+      RadioItem,
+      {
+        key: option.value,
+        option,
+        selected: option.value === value,
+        onSelect: () => onValueChange?.(option.value)
+      }
+    ))
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(12)
+  },
+  horizontal: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  rowDisabled: {
+    opacity: 0.45
+  },
+  radio: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  }
+});
+
+export { RadioGroup };

package/dist/{chunk-AENAVIKT.mjs → chunk-ITG4JQM3.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 { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
@@ -50,7 +50,7 @@ function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", forma
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Previous month",
+      accessibilityLabel: "Mes anterior",
       accessibilityState: { disabled: prevDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
@@ -72,7 +72,7 @@ function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", forma
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
-      accessibilityLabel: "Next month",
+      accessibilityLabel: "Mes siguiente",
       accessibilityState: { disabled: nextDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },

package/dist/{chunk-E5UKLSJZ.mjs → chunk-K3QX2M26.mjs}

@@ -1,8 +1,8 @@
-import { Badge } from './chunk-GH67YXG6.mjs';
-import { Button } from './chunk-4J2PXL36.mjs';
+import { Badge } from './chunk-AZV7KNJI.mjs';
+import { Button } from './chunk-Y6YS33GM.mjs';
 import { RADIUS, SHADOWS } 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 from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -40,10 +40,13 @@ function PricingCard({
     /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.name, { color: colors.foreground }], allowFontScaling: true }, name), badge ? /* @__PURE__ */ React.createElement(Badge, { label: badge, variant: highlighted ? "default" : "secondary", size: "sm" }) : null),
     /* @__PURE__ */ React.createElement(View, { style: styles.priceRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.price, { color: colors.foreground }], allowFontScaling: true }, price), period ? /* @__PURE__ */ React.createElement(Text, { style: [styles.period, { color: colors.foregroundMuted }], allowFontScaling: true }, period) : null),
     description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null,
-    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, renderIcon(
-      f.included ? "check" : "minus",
-      ms(16),
-      f.included ? colors.success : colors.foregroundMuted
+    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, /* @__PURE__ */ React.createElement(
+      Icon,
+      {
+        name: f.included ? "check" : "minus",
+        size: ms(16),
+        color: f.included ? colors.success : colors.foregroundMuted
+      }
     ), /* @__PURE__ */ React.createElement(
       Text,
       {

package/dist/{chunk-4OORJ2DY.mjs → chunk-K7TKID3V.mjs}

@@ -1,6 +1,6 @@
 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 { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
@@ -18,7 +18,7 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
     // a meaningful chromatic signal when an accent is defined.
     /* @__PURE__ */ React.createElement(Entypo, { name: "info-with-circle", size: ms(16), color: accentColor })
   );
-  const effectiveIcon = iconName ? renderIcon(iconName, ms(16), iconColor ?? accentColor) : icon ?? defaultIcon;
+  const effectiveIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: ms(16), color: iconColor ?? accentColor }) : icon ?? defaultIcon;
   const a11yLabel = description ? `${title}. ${description}` : title;
   return /* @__PURE__ */ React.createElement(
     View,
@@ -38,9 +38,10 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
       {
         onPress: onDismiss,
         style: styles.dismissButton,
+        hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
         activeOpacity: 0.6,
         accessibilityRole: "button",
-        accessibilityLabel: "Dismiss"
+        accessibilityLabel: "Descartar"
       },
       /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ms(16), color: colors.foregroundMuted })
     ) : null
@@ -71,9 +72,9 @@ var styles = StyleSheet.create({
     fontSize: ms(12)
   },
   dismissButton: {
-    padding: s(4),
-    marginTop: vs(-2),
-    marginRight: -s(4)
+    padding: s(10),
+    marginTop: vs(-8),
+    marginRight: -s(10)
   }
 });
 

package/dist/{chunk-2LG326TT.mjs → chunk-KAGADD2O.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 { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
@@ -26,8 +26,8 @@ function DetailRowBase({
   valueStyle
 }) {
   const { colors } = useTheme();
-  const resolvedLeftIcon = leftIconName ? renderIcon(leftIconName, ms(14), leftIconColor ?? colors.foregroundMuted) : leftIcon;
-  const resolvedRightIcon = rightIconName ? renderIcon(rightIconName, ms(14), rightIconColor ?? colors.foregroundMuted) : null;
+  const resolvedLeftIcon = leftIconName ? /* @__PURE__ */ React.createElement(Icon, { name: leftIconName, size: ms(14), color: leftIconColor ?? colors.foregroundMuted }) : leftIcon;
+  const resolvedRightIcon = rightIconName ? /* @__PURE__ */ React.createElement(Icon, { name: rightIconName, size: ms(14), color: rightIconColor ?? colors.foregroundMuted }) : null;
   const separatorStyle = separator === "none" ? null : {
     flex: 1,
     height: 1,

package/dist/{chunk-IVSRW4HS.mjs → chunk-KC5QDYGZ.mjs}

@@ -1,7 +1,7 @@
-import { PressableTab } from './chunk-3DKJ2GIC.mjs';
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { SPRINGS } from './chunk-M53LC4Q7.mjs';
+import { PressableTab } from './chunk-IFYMBOEN.mjs';
+import { selectionAsync } from './chunk-ARONDO7M.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-7AFZWSCI.mjs → chunk-KPTY7UYQ.mjs}

@@ -1,4 +1,4 @@
-import { useTheme } from './chunk-YTXRIXNZ.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { StyleSheet, View, Text } from 'react-native';

package/dist/{chunk-YTXRIXNZ.mjs → chunk-KSSVIFYR.mjs}

@@ -12,6 +12,13 @@ function hexToRgb(hex) {
     b: parseInt(full.slice(4, 6), 16)
   };
 }
+function withAlpha(hex, alpha) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
+}
+
+// src/theme/colors.ts
 function componentToHex(c) {
   return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
 }
@@ -52,13 +59,6 @@ function darken(hex, amount) {
   if (!rgb) return hex;
   return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
 }
-function withAlpha(hex, alpha) {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`;
-}
-
-// src/theme/colors.ts
 var defaultLight = {
   background: "#ffffff",
   foreground: "#1a1a1a",
@@ -132,10 +132,7 @@ function deriveColors(t, scheme) {
     separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
   };
 }
-var ThemeContext = createContext({
-  colors: deriveColors(defaultLight, "light"),
-  colorScheme: "light"
-});
+var ThemeContext = createContext(void 0);
 function ThemeProvider({ children, theme, colorScheme = "system" }) {
   const systemScheme = useColorScheme() ?? "light";
   const resolvedScheme = colorScheme === "system" ? systemScheme : colorScheme;
@@ -155,4 +152,4 @@ function useTheme() {
   return context;
 }
 
-export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme, withAlpha };
+export { ThemeProvider, defaultDark, defaultLight, deriveColors, hexToRgb, useTheme, withAlpha };

package/dist/chunk-L3YKPTJQ.mjs

@@ -0,0 +1,119 @@
+import { COLOR_TRANSITION } from './chunk-M53LC4Q7.mjs';
+import { Icon } from './chunk-MZ6WRTD2.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
+import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { Platform, StyleSheet, View, Text, TextInput } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Textarea({
+  label,
+  error,
+  hint,
+  disabled,
+  rows = 4,
+  prefixIcon,
+  prefixIconNode,
+  prefixIconColor,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const resolvedPrefixIcon = prefixIcon ? /* @__PURE__ */ React.createElement(Icon, { name: prefixIcon, size: ms(16), color: prefixIconColor ?? colors.foregroundMuted }) : prefixIconNode;
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(View, { style: [styles.inputWrapper, { backgroundColor: colors.background }] }, /* @__PURE__ */ React.createElement(
+    EaseView,
+    {
+      style: [styles.borderOverlay, { borderWidth: error ? 2 : 1 }],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION,
+      pointerEvents: "none"
+    }
+  ), resolvedPrefixIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null, /* @__PURE__ */ React.createElement(
+    TextInput,
+    {
+      multiline: true,
+      numberOfLines: rows,
+      textAlignVertical: "top",
+      editable: !disabled,
+      style: [
+        styles.input,
+        {
+          color: colors.foreground,
+          minHeight: rows * vs(30)
+        },
+        disabled && { opacity: 0.45 },
+        webInputResetStyle,
+        style
+      ],
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        onBlur?.(e);
+      },
+      placeholderTextColor: colors.foregroundMuted,
+      allowFontScaling: true,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { disabled: !!disabled },
+      ...props
+    }
+  )), error ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(4)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: vs(18),
+    marginBottom: vs(2)
+  },
+  inputWrapper: {
+    borderRadius: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    gap: s(8)
+  },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
+  prefixIcon: {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingTop: vs(2)
+  },
+  input: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: vs(22),
+    padding: 0,
+    margin: 0
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: vs(16),
+    marginTop: vs(4)
+  }
+});
+
+export { Textarea };

package/dist/chunk-M53LC4Q7.mjs

@@ -0,0 +1,35 @@
+// src/utils/animations.ts
+var SPRINGS = {
+  glide: { stiffness: 380, damping: 38, mass: 1 },
+  elastic: { stiffness: 320, damping: 22, mass: 0.7 }
+};
+var TIMINGS = {
+  state: { duration: 160 },
+  expand: { duration: 240 },
+  collapse: { duration: 200 },
+  shimmer: { duration: 1400 }
+};
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var OPACITY_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var SPRING_ELASTIC = {
+  type: "spring",
+  stiffness: 320,
+  damping: 22,
+  mass: 0.7
+};
+var PRESS_SCALE = {
+  button: 0.95,
+  card: 0.98,
+  row: 0.97,
+  chip: 0.94
+};
+
+export { COLOR_TRANSITION, OPACITY_TRANSITION, PRESS_SCALE, SPRINGS, SPRING_ELASTIC, TIMINGS };

package/dist/chunk-MZ6WRTD2.mjs

@@ -0,0 +1,40 @@
+import React from 'react';
+import AntDesign from '@expo/vector-icons/AntDesign';
+import Entypo from '@expo/vector-icons/Entypo';
+import Feather from '@expo/vector-icons/Feather';
+import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+
+// src/utils/icons.ts
+var ALL_FAMILIES = [
+  { name: "Feather", component: Feather },
+  { name: "AntDesign", component: AntDesign },
+  { name: "Entypo", component: Entypo },
+  { name: "FontAwesome5", component: FontAwesome5 },
+  { name: "MaterialIcons", component: MaterialIcons },
+  { name: "Ionicons", component: Ionicons }
+];
+var glyphCacheInitialized = false;
+function ensureGlyphCache() {
+  if (glyphCacheInitialized) return;
+  glyphCacheInitialized = true;
+  for (const entry of ALL_FAMILIES) {
+    try {
+      entry.glyphMap = entry.component.glyphMap;
+    } catch {
+      entry.glyphMap = {};
+    }
+  }
+}
+function Icon({ name, size, color, family }) {
+  ensureGlyphCache();
+  const entry = family ? ALL_FAMILIES.find((f) => f.name === family) : ALL_FAMILIES.find((f) => {
+    const glyphMap = f.glyphMap;
+    return glyphMap ? name in glyphMap : false;
+  });
+  if (!entry) return null;
+  return React.createElement(entry.component, { name, size, color });
+}
+
+export { Icon };