@retray-dev/ui-kit 7.0.1 → 9.0.0

package/dist/{chunk-Y6MXOREN.mjs → chunk-ID72TK46.mjs}

@@ -1,21 +1,13 @@
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { impactLight } from './chunk-RTC3CFXF.mjs';
-import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { PressableCard } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { StyleSheet, View, Text } from 'react-native';
 
 function Card({ children, variant = "elevated", onPress, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.card,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled: !onPress
-  });
   const handlePress = () => {
     if (!onPress) return;
     impactLight();
@@ -49,19 +41,18 @@ function Card({ children, variant = "elevated", onPress, style, accessibilityLab
   }[variant];
   const cardContent = /* @__PURE__ */ React.createElement(View, { style: [styles.card, variantStyle, style] }, children);
   if (onPress) {
-    return /* @__PURE__ */ React.createElement(Animated.View, { style: animatedStyle, ...hoverHandlers }, /* @__PURE__ */ React.createElement(
-      TouchableOpacity,
+    return /* @__PURE__ */ React.createElement(
+      PressableCard,
       {
         onPress: handlePress,
-        onPressIn,
-        onPressOut,
-        activeOpacity: 1,
+        rippleColor: "transparent",
         touchSoundDisabled: true,
+        activateOnHover: true,
         accessibilityRole: "button",
         accessibilityLabel
       },
       cardContent
-    ));
+    );
   }
   return cardContent;
 }

package/dist/{chunk-NQGVLMWG.mjs → chunk-JMOZEC77.mjs}

@@ -1,4 +1,4 @@
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef } from 'react';

package/dist/{chunk-GCWOGZYL.mjs → chunk-JT7HKXRB.mjs}

@@ -38,7 +38,7 @@ function AvatarBase({ src, fallback, fallbackText, size = "md", status, style })
   const showFallback = !src || imageError;
   const statusSize = typeof size === "number" ? size * 0.25 : statusSizeMap[size];
   const statusColor = {
-    online: "#22c55e",
+    online: colors.success,
     offline: "transparent",
     busy: colors.destructive,
     away: colors.warning
@@ -50,36 +50,46 @@ function AvatarBase({ src, fallback, fallbackText, size = "md", status, style })
     backgroundColor: colors.surface,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.wrapper, style] }, /* @__PURE__ */ React.createElement(View, { style: [styles.base, containerStyle] }, !showFallback ? /* @__PURE__ */ React.createElement(
-    Image,
-    {
-      source: { uri: src },
-      style: { width: dimension, height: dimension },
-      onError: () => setImageError(true)
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    Text,
-    {
-      style: [styles.fallback, { color: colors.foregroundMuted, fontSize }],
-      allowFontScaling: true
-    },
-    getInitials(fallback, fallbackText)
-  )), status && /* @__PURE__ */ React.createElement(
+  const a11yLabel = fallbackText || fallback || "Avatar";
+  return /* @__PURE__ */ React.createElement(
     View,
     {
-      style: [
-        styles.statusDot,
-        {
-          width: statusSize,
-          height: statusSize,
-          borderRadius: statusSize / 2,
-          backgroundColor: statusColor[status],
-          borderWidth: status === "offline" ? 2 : 1.5,
-          borderColor: status === "offline" ? colors.border : colors.background
-        }
-      ]
-    }
-  ));
+      style: [styles.wrapper, style],
+      accessibilityRole: "image",
+      accessibilityLabel: a11yLabel
+    },
+    /* @__PURE__ */ React.createElement(View, { style: [styles.base, containerStyle] }, !showFallback ? /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        source: { uri: src },
+        style: { width: dimension, height: dimension },
+        onError: () => setImageError(true)
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.fallback, { color: colors.foregroundMuted, fontSize }],
+        allowFontScaling: true
+      },
+      getInitials(fallback, fallbackText)
+    )),
+    status && /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.statusDot,
+          {
+            width: statusSize,
+            height: statusSize,
+            borderRadius: statusSize / 2,
+            backgroundColor: statusColor[status],
+            borderWidth: status === "offline" ? 2 : 1.5,
+            borderColor: status === "offline" ? colors.border : colors.background
+          }
+        ]
+      }
+    )
+  );
 }
 var Avatar = React.memo(AvatarBase);
 var styles = StyleSheet.create({

package/dist/{chunk-LWG526VX.mjs → chunk-KIHCWCWL.mjs}

@@ -1,13 +1,12 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import Animated, { useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
 import { FontAwesome5 } from '@expo/vector-icons';
 
 function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }) {
@@ -47,75 +46,61 @@ function Toggle({
   activeIconColor,
   disabled,
   style,
-  accessibilityLabel,
-  ...props
+  accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled
-  });
-  const progress = useColorTransition(pressed);
   const inactiveBorder = variant === "outline" ? colors.border : "transparent";
-  const surfaceStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
-    backgroundColor: interpolateColor(progress.value, [0, 1], ["transparent", colors.surfaceStrong])
-  }));
-  const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary])
-  }));
   const iconSize = iconSizeMap[size];
-  return /* @__PURE__ */ React.createElement(
-    Animated.View,
+  const handlePress = () => {
+    selectionAsync();
+    onPressedChange?.(!pressed);
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [disabled && styles.disabled, style] }, /* @__PURE__ */ React.createElement(
+    PressableButton,
     {
-      style: [scaleStyle, disabled && styles.disabled, style],
-      ...hoverHandlers
+      onPress: handlePress,
+      enabled: !disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { selected: pressed, disabled: !!disabled }
     },
     /* @__PURE__ */ React.createElement(
-      TouchableOpacity,
+      EaseView,
       {
-        onPress: () => {
-          selectionAsync();
-          onPressedChange?.(!pressed);
+        style: [styles.base, sizeStyles[size], { borderWidth: 2 }],
+        animate: {
+          borderColor: pressed ? colors.primary : inactiveBorder,
+          backgroundColor: pressed ? colors.surfaceStrong : "transparent"
         },
-        onPressIn,
-        onPressOut,
-        disabled,
-        activeOpacity: 1,
-        touchSoundDisabled: true,
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ?? label,
-        accessibilityState: { selected: pressed, disabled: !!disabled },
-        ...props
+        transition: COLOR_TRANSITION
       },
-      /* @__PURE__ */ React.createElement(
-        Animated.View,
+      /* @__PURE__ */ React.createElement(View, { style: styles.inner }, /* @__PURE__ */ React.createElement(
+        ToggleIcon,
+        {
+          pressed,
+          iconName,
+          activeIconName,
+          icon,
+          activeIcon,
+          iconColor,
+          activeIconColor,
+          iconSize,
+          primaryColor: colors.primary,
+          mutedColor: colors.foregroundMuted
+        }
+      ), label ? /* @__PURE__ */ React.createElement(
+        Text,
         {
-          style: [
-            styles.base,
-            sizeStyles[size],
-            { borderWidth: 2 },
-            surfaceStyle
-          ]
+          style: [styles.label, { color: pressed ? colors.primary : colors.foreground }],
+          allowFontScaling: true
         },
-        /* @__PURE__ */ React.createElement(View, { style: styles.inner }, /* @__PURE__ */ React.createElement(
-          ToggleIcon,
-          {
-            pressed,
-            iconName,
-            activeIconName,
-            icon,
-            activeIcon,
-            iconColor,
-            activeIconColor,
-            iconSize,
-            primaryColor: colors.primary,
-            mutedColor: colors.foregroundMuted
-          }
-        ), label ? /* @__PURE__ */ React.createElement(Animated.Text, { style: [styles.label, textStyle], allowFontScaling: true }, label) : null)
-      )
+        label
+      ) : null)
     )
-  );
+  ));
 }
 var styles = StyleSheet.create({
   base: {

package/dist/chunk-LXJIIOYQ.mjs

@@ -0,0 +1,104 @@
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+
+function DefaultErrorFallback({
+  error,
+  reset,
+  title = "Something went wrong",
+  message
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, { backgroundColor: colors.background }], accessibilityRole: "alert" }, /* @__PURE__ */ React.createElement(View, { style: [styles.iconCircle, { backgroundColor: colors.destructiveTint }] }, renderIcon("alert-triangle", ms(28), colors.destructive)), /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), /* @__PURE__ */ React.createElement(Text, { style: [styles.message, { color: colors.foregroundMuted }], allowFontScaling: true }, message ?? error.message ?? "An unexpected error occurred."), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.button, { backgroundColor: colors.primary }],
+      onPress: () => {
+        impactLight();
+        reset();
+      },
+      activeOpacity: 0.85,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Try again"
+    },
+    /* @__PURE__ */ React.createElement(Text, { style: [styles.buttonLabel, { color: colors.primaryForeground }], allowFontScaling: true }, "Try again")
+  ));
+}
+var ErrorBoundary = class extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+    this.reset = () => {
+      this.setState({ error: null });
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    const { error } = this.state;
+    if (error) {
+      const { fallback, title, message } = this.props;
+      if (typeof fallback === "function") {
+        return fallback({ error, reset: this.reset });
+      }
+      if (fallback !== void 0) {
+        return fallback;
+      }
+      return /* @__PURE__ */ React.createElement(DefaultErrorFallback, { error, reset: this.reset, title, message });
+    }
+    return this.props.children;
+  }
+};
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: s(32),
+    gap: vs(12)
+  },
+  iconCircle: {
+    width: s(64),
+    height: s(64),
+    borderRadius: RADIUS.full,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    lineHeight: mvs(24),
+    textAlign: "center"
+  },
+  message: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: "center"
+  },
+  button: {
+    marginTop: vs(8),
+    paddingHorizontal: s(20),
+    paddingVertical: vs(10),
+    borderRadius: RADIUS.md,
+    minHeight: vs(44),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonLabel: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15)
+  }
+});
+
+export { ErrorBoundary };

package/dist/{chunk-SBZYEV4S.mjs → chunk-M6ZXVBTK.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
@@ -19,6 +19,7 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
     /* @__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 a11yLabel = description ? `${title}. ${description}` : title;
   return /* @__PURE__ */ React.createElement(
     View,
     {
@@ -26,7 +27,9 @@ function AlertBanner({ title, description, variant = "default", icon, iconName,
         styles.container,
         { backgroundColor: bgColor, borderWidth: 1, borderColor },
         style
-      ]
+      ],
+      accessibilityRole: "alert",
+      accessibilityLabel: a11yLabel
     },
     /* @__PURE__ */ React.createElement(View, { style: styles.iconSlot }, effectiveIcon),
     /* @__PURE__ */ React.createElement(View, { style: styles.content }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foreground, opacity: 0.85 }], allowFontScaling: true }, description) : null)

package/dist/{chunk-XDMN67KV.mjs → chunk-MAC465BB.mjs}

@@ -1,6 +1,4 @@
-import { Input } from './chunk-L7E7TVEZ.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { Input } from './chunk-756RAKE4.mjs';
 import { ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 
@@ -24,7 +22,6 @@ function CurrencyInput({
   containerStyle,
   style
 }) {
-  const { colors } = useTheme();
   const handleChange = (text) => {
     const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
     const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
@@ -34,8 +31,12 @@ function CurrencyInput({
     const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
-  const inputStyle = size === "large" ? { fontFamily: "Sohne-Regular", fontSize: ms(36) } : { fontFamily: "Sohne-Regular" };
-  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.foregroundMuted);
+  const isLarge = size === "large";
+  const inputStyle = isLarge ? { fontFamily: "Sohne-Regular", fontSize: ms(36) } : { fontFamily: "Sohne-Regular" };
+  const prefixStyle = {
+    fontFamily: "Sohne-Regular",
+    fontSize: isLarge ? ms(32) : ms(17)
+  };
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React.createElement(
     Input,
@@ -48,9 +49,10 @@ function CurrencyInput({
       hint,
       placeholder: placeholder ?? "0",
       editable,
-      prefix: dollarIcon,
+      prefix,
+      prefixStyle,
       containerStyle,
-      inputWrapperStyle: size === "large" ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
+      inputWrapperStyle: isLarge ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
       style: [inputStyle, style]
     }
   );

package/dist/chunk-MBMXYJJV.mjs

@@ -0,0 +1,36 @@
+import { PressableCard } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import React from 'react';
+
+function Pressable({
+  children,
+  onPress,
+  pressScale: _pressScale = PRESS_SCALE.card,
+  haptics = true,
+  style,
+  disabled,
+  hoverScale: _hoverScale = 1.02
+}) {
+  const handlePress = () => {
+    if (disabled || !onPress) return;
+    if (haptics) impactLight();
+    onPress();
+  };
+  return /* @__PURE__ */ React.createElement(
+    PressableCard,
+    {
+      style,
+      onPress: handlePress,
+      enabled: !disabled,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: !!disabled }
+    },
+    children
+  );
+}
+
+export { Pressable };

package/dist/chunk-MLF3EZFW.mjs

@@ -0,0 +1,119 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, vs, mvs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function TabBar({
+  items,
+  activeKey,
+  onTabPress,
+  activeColor,
+  inactiveColor,
+  withSafeArea = true,
+  style
+}) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const resolvedActive = activeColor ?? colors.primary;
+  const resolvedInactive = inactiveColor ?? colors.foregroundMuted;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          paddingBottom: withSafeArea ? insets.bottom : 0
+        },
+        style
+      ],
+      accessibilityRole: "tablist"
+    },
+    items.map((item) => {
+      const active = item.key === activeKey;
+      const tint = active ? resolvedActive : resolvedInactive;
+      const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), tint) : null);
+      const showBadge = item.badge !== void 0 && item.badge !== false;
+      const badgeCount = typeof item.badge === "number" ? item.badge : void 0;
+      return /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          key: item.key,
+          style: styles.tab,
+          onPress: () => {
+            if (!active) selectionAsync();
+            onTabPress(item.key);
+          },
+          activeOpacity: 0.7,
+          touchSoundDisabled: true,
+          accessibilityRole: "tab",
+          accessibilityState: { selected: active },
+          accessibilityLabel: item.label ?? item.key
+        },
+        /* @__PURE__ */ React.createElement(View, null, iconNode, showBadge ? /* @__PURE__ */ React.createElement(
+          View,
+          {
+            style: [
+              styles.badge,
+              { backgroundColor: colors.destructive, borderColor: colors.card },
+              badgeCount === void 0 && styles.badgeDot
+            ]
+          },
+          badgeCount !== void 0 ? /* @__PURE__ */ React.createElement(Text, { style: [styles.badgeText, { color: colors.destructiveForeground }], allowFontScaling: false }, badgeCount > 99 ? "99+" : badgeCount) : null
+        ) : null),
+        item.label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: tint }], numberOfLines: 1, allowFontScaling: true }, item.label) : null
+      );
+    })
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    borderTopWidth: StyleSheet.hairlineWidth
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingTop: vs(8),
+    paddingBottom: vs(6),
+    gap: vs(2),
+    minHeight: vs(48)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(11),
+    lineHeight: mvs(14)
+  },
+  badge: {
+    position: "absolute",
+    top: -vs(4),
+    right: -s(10),
+    minWidth: s(16),
+    height: s(16),
+    borderRadius: s(8),
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: s(3)
+  },
+  badgeDot: {
+    minWidth: s(10),
+    height: s(10),
+    borderRadius: s(5),
+    top: -vs(2),
+    right: -s(6),
+    paddingHorizontal: 0
+  },
+  badgeText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(9),
+    lineHeight: ms(11)
+  }
+});
+
+export { TabBar };