@retray-dev/ui-kit 7.0.1 → 9.1.0

package/dist/chunk-NA7PARID.mjs

@@ -0,0 +1,147 @@
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { StyleSheet, ScrollView, View, TouchableOpacity, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+function isSelected(value, candidate) {
+  if (value == null) return false;
+  return Array.isArray(value) ? value.includes(candidate) : value === candidate;
+}
+function Cell({ item, selected, width, onPress }) {
+  const { colors } = useTheme();
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.chip,
+    disabled: item.disabled
+  });
+  const iconColor = selected ? colors.primary : colors.foregroundSubtle;
+  const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null);
+  return /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width }, animatedStyle] }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress,
+      onPressIn,
+      onPressOut,
+      disabled: item.disabled,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityState: { selected, disabled: item.disabled },
+      accessibilityLabel: item.label ?? String(item.value),
+      ...hoverHandlers,
+      style: [
+        styles.cell,
+        {
+          backgroundColor: selected ? colors.primary + "14" : colors.surface,
+          borderColor: selected ? colors.primary : "transparent"
+        },
+        item.disabled && styles.cellDisabled
+      ]
+    },
+    iconNode,
+    item.label ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, { color: selected ? colors.primary : colors.foreground }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      item.label
+    ) : null
+  ));
+}
+function SelectableGrid({
+  items,
+  value,
+  onChange,
+  multiple = false,
+  numColumns = 4,
+  gap = 12,
+  orientation = "grid",
+  style
+}) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const gapPx = s(gap);
+  const cellWidth = containerWidth > 0 ? (containerWidth - gapPx * (numColumns - 1)) / numColumns - 0.5 : 0;
+  const horizCellWidth = s(72);
+  const handlePress = (item) => {
+    if (item.disabled) return;
+    selectionAsync();
+    onChange(item.value);
+  };
+  if (orientation === "horizontal") {
+    return /* @__PURE__ */ React.createElement(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        contentContainerStyle: [styles.horizontal, { gap: gapPx }, style],
+        accessibilityRole: multiple ? void 0 : "radiogroup"
+      },
+      items.map((item) => /* @__PURE__ */ React.createElement(
+        Cell,
+        {
+          key: String(item.value),
+          item,
+          selected: isSelected(value, item.value),
+          width: horizCellWidth,
+          onPress: () => handlePress(item)
+        }
+      ))
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.grid, { gap: gapPx }, style],
+      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
+      accessibilityRole: multiple ? void 0 : "radiogroup"
+    },
+    cellWidth > 0 ? items.map((item) => /* @__PURE__ */ React.createElement(
+      Cell,
+      {
+        key: String(item.value),
+        item,
+        selected: isSelected(value, item.value),
+        width: cellWidth,
+        onPress: () => handlePress(item)
+      }
+    )) : null
+  );
+}
+var styles = StyleSheet.create({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  horizontal: {
+    flexDirection: "row",
+    paddingHorizontal: s(4)
+  },
+  cell: {
+    flex: 1,
+    borderRadius: RADIUS.md,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: vs(4),
+    paddingHorizontal: s(12),
+    paddingVertical: vs(12)
+  },
+  cellDisabled: {
+    opacity: 0.4
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(12),
+    lineHeight: mvs(15),
+    textAlign: "center"
+  }
+});
+
+export { SelectableGrid };

package/dist/{chunk-QXGYKWI7.mjs → chunk-O3HA6TYM.mjs}

@@ -1,8 +1,8 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { EASINGS, TIMINGS } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { EASINGS, TIMINGS } from './chunk-5IKW3VNC.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { vs, s, ms } from './chunk-2CE3TQVY.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';
@@ -61,7 +61,7 @@ function AccordionItemComponent({
         height.value = e.nativeEvent.layout.height;
       }
     },
-    item.content
+    typeof item.content === "string" || typeof item.content === "number" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.contentText, { color: colors.foregroundMuted }], allowFontScaling: true }, item.content) : item.content
   )));
 }
 function Accordion({ items, type = "single", defaultValue, style }) {
@@ -128,6 +128,11 @@ var styles = StyleSheet.create({
     paddingBottom: vs(12),
     position: "absolute",
     width: "100%"
+  },
+  contentText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: ms(20)
   }
 });
 

package/dist/{chunk-63357L2X.mjs → chunk-OB4JUQ3O.mjs}

@@ -1,4 +1,4 @@
-import { SPRINGS } from './chunk-5IKW3VNC.mjs';
+import { SPRINGS } from './chunk-DVK4G2GT.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';

package/dist/{chunk-AU2VDY4P.mjs → chunk-PFZTM6D5.mjs}

@@ -1,8 +1,9 @@
-import { impactMedium } from './chunk-RTC3CFXF.mjs';
+import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
+import { SHADOWS, RADIUS, BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useEffect, useCallback } from 'react';
-import { Dimensions, Platform, StyleSheet, View, Text, TouchableOpacity } from 'react-native';
+import { Dimensions, Platform, StyleSheet, useWindowDimensions, View, Text, TouchableOpacity, Modal, Pressable, ScrollView } from 'react-native';
 import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -38,11 +39,15 @@ function Sheet({
   enableBlurKeyboardOnGesture = true,
   android_keyboardInputMode = "adjustPan",
   footer,
-  snapPoints
+  snapPoints,
+  responsive = false,
+  dialogMaxWidth = 480
 }) {
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
+  const { width: windowWidth } = useWindowDimensions();
   const ref = useRef(null);
+  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide;
   const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
   useEffect(() => {
     if (open) {
@@ -89,6 +94,31 @@ function Sheet({
     if (!effectiveFooter) return null;
     return /* @__PURE__ */ React.createElement(BottomSheetFooter, { ...props }, effectiveFooter);
   }, [effectiveFooter]);
+  if (asDialog) {
+    return /* @__PURE__ */ React.createElement(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        style: [
+          styles.dialogCard,
+          { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 }
+        ],
+        onPress: () => {
+        }
+      },
+      headerNode,
+      /* @__PURE__ */ React.createElement(
+        ScrollView,
+        {
+          contentContainerStyle: [styles.dialogContent, style],
+          style: contentStyle,
+          showsVerticalScrollIndicator: true,
+          bounces: false
+        },
+        contentNode
+      ),
+      effectiveFooter
+    )));
+  }
   const useScroll = scrollable || !!maxHeight;
   const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
   const useDynamicSizing = !snapPoints;
@@ -184,6 +214,24 @@ var styles = StyleSheet.create({
     borderTopWidth: 1,
     flexDirection: "row",
     gap: s(12)
+  },
+  dialogBackdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: s(24)
+  },
+  dialogCard: {
+    width: "100%",
+    borderRadius: RADIUS.lg,
+    paddingTop: vs(16),
+    overflow: "hidden",
+    ...SHADOWS.xl
+  },
+  dialogContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(16)
   }
 });
 

package/dist/chunk-QKH5ZOD5.mjs

@@ -0,0 +1,97 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { EaseView } from 'react-native-ease';
+import { Feather } from '@expo/vector-icons';
+
+var TRACK_WIDTH = s(52);
+var TRACK_HEIGHT = s(30);
+var THUMB_SIZE = s(24);
+var THUMB_OFFSET = s(3);
+var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
+var ICON_SIZE = s(13);
+function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        selectionAsync();
+        onCheckedChange?.(!checked);
+      },
+      disabled,
+      activeOpacity: 0.8,
+      touchSoundDisabled: true,
+      accessibilityRole: "switch",
+      accessibilityLabel,
+      accessibilityState: { checked, disabled: !!disabled },
+      style: styles.touchable
+    },
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.track,
+        animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.trackBorder, { borderWidth: 1.5 }],
+          pointerEvents: "none",
+          animate: { borderColor: checked ? "transparent" : colors.border },
+          transition: COLOR_TRANSITION
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
+          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+          transition: SPRING_ELASTIC
+        },
+        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
+        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+      )
+    )
+  ));
+}
+var styles = StyleSheet.create({
+  touchable: {
+    alignSelf: "flex-start"
+  },
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  trackBorder: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: TRACK_HEIGHT / 2
+  },
+  thumb: {
+    position: "absolute",
+    top: THUMB_OFFSET,
+    left: THUMB_OFFSET,
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.15,
+    shadowRadius: 2,
+    elevation: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconWrapper: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
+export { Switch };

package/dist/{chunk-KZJRQOIU.mjs → chunk-TERDKCLE.mjs}

@@ -46,7 +46,17 @@ function BadgeBase({ label, children, variant = "default", size = "md", icon, ic
   }[variant];
   const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
   const content = children ?? label;
-  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style] }, effectiveIcon, typeof content === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content);
+  const a11yLabel = typeof content === "string" ? content : label;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, containerStyle, sizePadding[size], { gap: sizeIconGap[size] }, style],
+      accessibilityRole: "text",
+      accessibilityLabel: a11yLabel
+    },
+    effectiveIcon,
+    typeof content === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: textColor }, sizeFontSize[size]], allowFontScaling: true }, content) : content
+  );
 }
 var Badge = React.memo(BadgeBase);
 var styles = StyleSheet.create({

package/dist/{chunk-U4N7WF4Z.mjs → chunk-UREA2GYY.mjs}

@@ -1,45 +1,50 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
+import { PressableChip } 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 { s, mvs, ms, vs } 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';
 
 function ChipBase({ label, selected = false, onPress, icon, iconName, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.chip
-  });
-  const colorProgress = useColorTransition(selected);
-  const surfaceStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(colorProgress.value, [0, 1], [colors.surface, colors.primary]),
-    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary])
-  }));
-  const textStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(colorProgress.value, [0, 1], [colors.foreground, colors.primaryForeground])
-  }));
   const handlePress = () => {
     selectionAsync();
     onPress?.();
   };
   const resolvedIcon = iconName ? renderIcon(iconName, ms(13), selected ? colors.primaryForeground : colors.foreground) : icon;
-  return /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.wrapper, scaleStyle, style], ...hoverHandlers }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.wrapper, style] }, /* @__PURE__ */ React.createElement(
+    PressableChip,
     {
       onPress: handlePress,
-      onPressIn,
-      onPressOut,
-      activeOpacity: 1,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: accessibilityLabel ?? label,
       accessibilityState: { selected }
     },
-    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.chip, surfaceStyle] }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon) : null, /* @__PURE__ */ React.createElement(Animated.Text, { style: [styles.label, textStyle], allowFontScaling: true }, label))
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.chip,
+        animate: {
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border
+        },
+        transition: COLOR_TRANSITION
+      },
+      resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon) : null,
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: selected ? colors.primaryForeground : colors.foreground }],
+          allowFontScaling: true
+        },
+        label
+      )
+    )
   ));
 }
 var Chip = React.memo(ChipBase);

package/dist/{chunk-TAJ2PQ2O.mjs → chunk-VGTDN7SW.mjs}

@@ -1,8 +1,8 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { useHover, usePressScale } from './chunk-QCNARS3X.mjs';
-import { impactLight } from './chunk-RTC3CFXF.mjs';
-import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { useHover, usePressScale } from './chunk-YNROWHQJ.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { SPRINGS, PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
@@ -70,13 +70,14 @@ function MediaCardBase({
       TouchableOpacity,
       {
         style: [styles.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
-        onPress: () => {
+        onPress: (e) => {
+          e?.stopPropagation?.();
           impactLight();
           onActionPress?.();
         },
         activeOpacity: 0.8,
         touchSoundDisabled: true,
-        accessibilityRole: "button",
+        accessibilityRole: Platform.OS === "web" && onPress ? void 0 : "button",
         accessibilityLabel: actionIconName ?? "action",
         accessibilityState: { selected: actionActive }
       },

package/dist/{chunk-URDE3EUU.mjs → chunk-VQ57HWPL.mjs}

@@ -1,14 +1,14 @@
-import { useColorTransition } from './chunk-7H2OR44A.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 { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useCallback } from 'react';
 import { TouchableOpacity, View, Text, StyleSheet, ScrollView } from 'react-native';
-import Animated, { useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+import { EaseView } from 'react-native-ease';
 
 var CategoryChip = React.memo(function CategoryChip2({
   item,
@@ -19,14 +19,6 @@ var CategoryChip = React.memo(function CategoryChip2({
   const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
     pressScale: PRESS_SCALE.chip
   });
-  const progress = useColorTransition(selected);
-  const surfaceStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(progress.value, [0, 1], [colors.surface, colors.primary]),
-    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary])
-  }));
-  const textColorStyle = useAnimatedStyle(() => ({
-    color: interpolateColor(progress.value, [0, 1], [colors.foregroundSubtle, colors.primaryForeground])
-  }));
   const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
   const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, iconColor) : item.icon ?? null;
   return /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React.createElement(
@@ -41,7 +33,27 @@ var CategoryChip = React.memo(function CategoryChip2({
       accessibilityLabel: item.label,
       accessibilityState: { selected }
     },
-    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.chip, surfaceStyle] }, resolvedIcon && /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon), /* @__PURE__ */ React.createElement(Animated.Text, { style: [styles.chipLabel, textColorStyle], allowFontScaling: true }, item.label), item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React.createElement(View, { style: [styles.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99))))
+    /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: styles.chip,
+        animate: {
+          backgroundColor: selected ? colors.primary : colors.surface,
+          borderColor: selected ? colors.primary : colors.border
+        },
+        transition: COLOR_TRANSITION
+      },
+      resolvedIcon && /* @__PURE__ */ React.createElement(View, { style: styles.chipIcon }, resolvedIcon),
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.chipLabel, { color: selected ? colors.primaryForeground : colors.foregroundSubtle }],
+          allowFontScaling: true
+        },
+        item.label
+      ),
+      item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React.createElement(View, { style: [styles.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
+    )
   ));
 });
 function CategoryStrip({

package/dist/chunk-WBOOUHSS.mjs

@@ -0,0 +1,62 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, mvs, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+
+var sizeMap = {
+  sm: "small",
+  md: "small",
+  lg: "large"
+};
+var labelFontSize = {
+  sm: ms(11),
+  md: ms(13),
+  lg: ms(14)
+};
+function Spinner({ size = "md", color, label, ...props }) {
+  const { colors } = useTheme();
+  const a11yLabel = label || "Loading";
+  if (label) {
+    return /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: styles.wrapper,
+        accessibilityRole: "progressbar",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { busy: true }
+      },
+      /* @__PURE__ */ React.createElement(ActivityIndicator, { size: sizeMap[size], color: color ?? colors.primary, ...props }),
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
+          allowFontScaling: true
+        },
+        label
+      )
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    ActivityIndicator,
+    {
+      size: sizeMap[size],
+      color: color ?? colors.primary,
+      accessibilityRole: "progressbar",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: { busy: true },
+      ...props
+    }
+  );
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    lineHeight: mvs(18)
+  }
+});
+
+export { Spinner };

package/dist/{chunk-GNGLDL6Z.mjs → chunk-WJLKJMKR.mjs}

@@ -3,7 +3,24 @@ import { useTheme } from './chunk-SOYNZDVY.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 { SohneFonts } from '@retray-dev/ui-kit/fonts'\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) },
@@ -42,6 +59,7 @@ var defaultColorVariant = {
   "button-sm": "foreground"
 };
 function TextBase({ variant = "body-md", color, style, children, ...props }) {
+  warnIfFontsMissing();
   const { colors } = useTheme();
   const colorKey = defaultColorVariant[variant] ?? "foreground";
   const resolvedColor = color ?? colors[colorKey];