@retray-dev/ui-kit 12.1.0 → 13.0.0

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-3UYAZ7I4.mjs → chunk-AZV7KNJI.mjs}

@@ -1,5 +1,5 @@
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.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-HLMPMUK2.mjs → chunk-BTUW5LSG.mjs}

@@ -1,9 +1,10 @@
-import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
-import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { COLOR_TRANSITION, SPRING_ELASTIC, 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 { s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { EaseView } from 'react-native-ease';
 import { Feather } from '@expo/vector-icons';
 
@@ -18,14 +19,14 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
   const { colors } = useTheme();
   const isDisabled = !!disabled;
   return /* @__PURE__ */ React.createElement(View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+    PressableButton,
     {
       onPress: () => {
         selectionAsync();
         onCheckedChange?.(!checked);
       },
-      disabled,
-      activeOpacity: 0.8,
+      enabled: !disabled,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
@@ -77,7 +78,9 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
 }
 var styles = StyleSheet.create({
   touchable: {
-    alignSelf: "flex-start"
+    alignSelf: "flex-start",
+    minHeight: 44,
+    justifyContent: "center"
   },
   trackContainer: {
     position: "relative",

package/dist/chunk-BULKGOIZ.mjs

@@ -0,0 +1,235 @@
+import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-M53LC4Q7.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, { createContext, useContext } from 'react';
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
+
+var SelectableCardContext = createContext(null);
+function SelectableCardGroup({
+  type,
+  value,
+  onValueChange,
+  variant = "elevated",
+  gap = s(8),
+  style,
+  children
+}) {
+  return /* @__PURE__ */ React.createElement(SelectableCardContext.Provider, { value: { type, value, onValueChange, variant } }, /* @__PURE__ */ React.createElement(View, { style: [styles.group, { gap }, style] }, children));
+}
+function SelectableCard({
+  value,
+  title,
+  description,
+  iconName,
+  icon,
+  disabled = false,
+  style
+}) {
+  const ctx = useContext(SelectableCardContext);
+  if (!ctx) {
+    throw new Error("SelectableCard must be used inside <SelectableCard.Group>");
+  }
+  const { colors } = useTheme();
+  const { type, value: selectedValue, onValueChange, variant } = ctx;
+  const isSelected = type === "radio" ? selectedValue === value : Array.isArray(selectedValue) && selectedValue.includes(value);
+  const handlePress = () => {
+    if (disabled) return;
+    impactLight();
+    if (type === "radio") {
+      onValueChange(value);
+    } else {
+      const arr = Array.isArray(selectedValue) ? selectedValue : [];
+      if (arr.includes(value)) {
+        onValueChange(arr.filter((v) => v !== value));
+      } else {
+        onValueChange([...arr, value]);
+      }
+    }
+  };
+  const variantStyle = (() => {
+    const borderWidth = 2;
+    const base = {
+      elevated: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: "transparent"
+        // reserve space for selected border
+      },
+      outlined: {
+        backgroundColor: colors.card,
+        borderWidth,
+        borderColor: colors.border
+      },
+      filled: {
+        backgroundColor: colors.surfaceStrong,
+        borderWidth,
+        borderColor: colors.border
+      }
+    }[variant];
+    if (isSelected && !disabled) {
+      return {
+        ...base,
+        borderColor: colors.primary,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0
+      };
+    }
+    if (disabled) {
+      return {
+        ...base,
+        shadowColor: "transparent",
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        elevation: 0,
+        borderColor: colors.border
+      };
+    }
+    return base;
+  })();
+  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;
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: type === "radio" ? "radio" : "checkbox",
+      accessibilityLabel: `${title}${description ? `, ${description}` : ""}`,
+      accessibilityState: { selected: isSelected, disabled },
+      style: [
+        styles.card,
+        variantStyle,
+        isSelected && !disabled && styles.cardSelected,
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.row }, /* @__PURE__ */ React.createElement(View, { style: styles.selectorContainer }, type === "radio" ? /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.radioCircle,
+        animate: { borderColor: !disabled && isSelected ? colors.primary : colors.border },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          animate: {
+            scale: !disabled && isSelected ? 1 : 0,
+            opacity: !disabled && isSelected ? 1 : 0
+          },
+          transition: SPRING_ELASTIC
+        },
+        /* @__PURE__ */ React.createElement(View, { style: [styles.radioDot, { backgroundColor: colors.primary }] })
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.checkboxBox,
+        animate: {
+          borderColor: !disabled && isSelected ? colors.primary : colors.border,
+          backgroundColor: !disabled && isSelected ? colors.primary : "transparent"
+        },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          animate: { opacity: !disabled && isSelected ? 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] })
+      )
+    )), resolvedIconElement, /* @__PURE__ */ React.createElement(View, { style: styles.textArea }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.title, { color: disabled ? colors.foregroundMuted : colors.foreground }],
+        allowFontScaling: true,
+        numberOfLines: 2
+      },
+      title
+    ), description ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.description, { color: disabled ? colors.foregroundMuted : colors.foregroundSubtle }],
+        allowFontScaling: true,
+        numberOfLines: 4
+      },
+      description
+    ) : null))
+  );
+}
+var styles = StyleSheet.create({
+  group: {
+    width: "100%"
+  },
+  card: {
+    borderRadius: RADIUS.md,
+    borderWidth: 1
+  },
+  cardSelected: {
+    backgroundColor: void 0
+    // overridden by variantStyle
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: s(16),
+    gap: s(12)
+  },
+  selectorContainer: {
+    paddingTop: vs(1)
+  },
+  radioCircle: {
+    width: s(24),
+    height: s(24),
+    borderRadius: s(12),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  radioDot: {
+    width: s(10),
+    height: s(10),
+    borderRadius: s(5)
+  },
+  checkboxBox: {
+    width: s(24),
+    height: s(24),
+    borderRadius: ms(4),
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  checkmark: {
+    width: s(12),
+    height: vs(7),
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: "-45deg" }, { translateY: -1 }]
+  },
+  iconWrapper: {
+    paddingTop: vs(1)
+  },
+  textArea: {
+    flex: 1,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(22)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  }
+});
+
+export { SelectableCard, SelectableCardGroup };

package/dist/{chunk-265G6A46.mjs → chunk-CBIZLRYH.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-EMUWGDWC.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,18 +41,28 @@ 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,
+      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(
+      View,
+      {
+        style: styles.triggerActions,
+        onTouchEnd: (e) => e.stopPropagation()
+      },
+      item.triggerActions
+    ) : null,
     /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.chevron, rotationStyle] }, /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React.createElement(Animated.View, { style: bodyStyle }, /* @__PURE__ */ React.createElement(
     View,
@@ -121,6 +132,12 @@ var styles = StyleSheet.create({
   chevron: {
     marginLeft: s(8)
   },
+  triggerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4),
+    marginLeft: s(8)
+  },
   // position:'absolute' is the key — the inner View escapes the animated wrapper's
   // clipped height so onLayout always reports the true content height.
   content: {

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-2I2AYECM.mjs → chunk-DBHSUUKU.mjs}

@@ -1,5 +1,5 @@
-import { SPRINGS } from './chunk-DVK4G2GT.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { SPRINGS } from './chunk-M53LC4Q7.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';

package/dist/{chunk-P64WHW4A.mjs → chunk-DE25XTVQ.mjs}

@@ -1,12 +1,12 @@
-import { renderIcon } from './chunk-KA7LTET3.mjs';
-import { useTheme } from './chunk-EMUWGDWC.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';
 
 function LabelValueBase({ label, value, iconName, iconColor, style }) {
   const { colors } = useTheme();
-  const resolvedIcon = iconName ? renderIcon(iconName, ms(14), iconColor ?? colors.foregroundMuted) : null;
+  const resolvedIcon = iconName ? /* @__PURE__ */ React.createElement(Icon, { name: iconName, size: ms(14), color: iconColor ?? colors.foregroundMuted }) : null;
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.labelSide }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label)), typeof value === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
 }
 var LabelValue = React.memo(LabelValueBase);

package/dist/{chunk-DI7CBDL6.mjs → chunk-E4EQSCKR.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-EMUWGDWC.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';
@@ -29,7 +29,7 @@ function MenuItemBase({
     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,

package/dist/{chunk-357YO24D.mjs → chunk-EHGBHFMH.mjs}

@@ -1,26 +1,10 @@
 import { TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
-import { useTheme } from './chunk-EMUWGDWC.mjs';
+import { useTheme } from './chunk-KSSVIFYR.mjs';
 import { mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 import { Text as Text$1 } from 'react-native';
 import { isLoaded } from 'expo-font';
 
-var warned = false;
-function warnIfFontsMissing() {
-  if (warned) return;
-  if (typeof __DEV__ !== "undefined" && !__DEV__) return;
-  warned = true;
-  try {
-    if (!isLoaded("Sohne-Regular")) {
-      console.warn(
-        "[retray-ui-kit] Sohne fonts are not loaded \u2014 text will fall back to the system font. Load them at your app root before rendering any UI kit component:\n\n  import { useFonts } from 'expo-font'\n  import { SohneFontNames } from '@retray-dev/ui-kit/fonts'\n  // Copy the SohneFonts boilerplate from CONSUMER.md into your App.tsx\n\n  const [fontsLoaded] = useFonts(SohneFonts)\n  if (!fontsLoaded) return null\n"
-      );
-    }
-  } catch {
-  }
-}
-
-// src/components/Text/Text.tsx
 var variantStyles = {
   "display-hero": { ...TYPOGRAPHY["display-hero"], fontSize: ms(TYPOGRAPHY["display-hero"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-hero"].lineHeight) },
   "display-xl": { ...TYPOGRAPHY["display-xl"], fontSize: ms(TYPOGRAPHY["display-xl"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-xl"].lineHeight) },
@@ -58,6 +42,14 @@ var defaultColorVariant = {
   "button-lg": "foreground",
   "button-sm": "foreground"
 };
+var fontWarned = false;
+function warnIfFontsMissing() {
+  if (fontWarned || typeof __DEV__ === "undefined" || !__DEV__) return;
+  fontWarned = true;
+  if (!isLoaded("Sohne-Regular")) {
+    console.warn("[retray-ui-kit] Sohne fonts not loaded \u2014 text falls back to system font.");
+  }
+}
 function TextBase({ variant = "body-md", color, style, uppercase, children, ...props }) {
   warnIfFontsMissing();
   const { colors } = useTheme();