@retray-dev/ui-kit 9.2.0 → 9.3.0

package/dist/fonts.mjs

@@ -0,0 +1,37 @@
+import { __require } from './chunk-Y6FXYEAI.mjs';
+
+// src/fonts.ts
+var SohneFonts = {
+  // Sohne base
+  "Sohne-ExtraLight": __require("../src/assets/fonts/Sohne-ExtraLight.otf"),
+  "Sohne-ExtraLightItalic": __require("../src/assets/fonts/Sohne-ExtraLightItalic.otf"),
+  "Sohne-Light": __require("../src/assets/fonts/Sohne-Light.otf"),
+  "Sohne-LightItalic": __require("../src/assets/fonts/Sohne-LightItalic.otf"),
+  "Sohne-Regular": __require("../src/assets/fonts/Sohne-Regular.otf"),
+  "Sohne-Italic": __require("../src/assets/fonts/Sohne-Italic.otf"),
+  "Sohne-Medium": __require("../src/assets/fonts/Sohne-Medium.otf"),
+  "Sohne-MediumItalic": __require("../src/assets/fonts/Sohne-MediumItalic.otf"),
+  "Sohne-SemiBold": __require("../src/assets/fonts/Sohne-SemiBold.otf"),
+  "Sohne-SemiBoldItalic": __require("../src/assets/fonts/Sohne-SemiBoldItalic.otf"),
+  "Sohne-Bold": __require("../src/assets/fonts/Sohne-Bold.otf"),
+  "Sohne-BoldItalic": __require("../src/assets/fonts/Sohne-BoldItalic.otf"),
+  "Sohne-ExtraBold": __require("../src/assets/fonts/Sohne-ExtraBold.otf"),
+  "Sohne-ExtraBoldItalic": __require("../src/assets/fonts/Sohne-ExtraBoldItalic.otf"),
+  // SohneMono
+  "SohneMono-ExtraLight": __require("../src/assets/fonts/SohneMono-ExtraLight.otf"),
+  "SohneMono-ExtraLightItalic": __require("../src/assets/fonts/SohneMono-ExtraLightItalic.otf"),
+  "SohneMono-Light": __require("../src/assets/fonts/SohneMono-Light.otf"),
+  "SohneMono-LightItalic": __require("../src/assets/fonts/SohneMono-LightItalic.otf"),
+  "SohneMono-Regular": __require("../src/assets/fonts/SohneMono-Regular.otf"),
+  "SohneMono-Italic": __require("../src/assets/fonts/SohneMono-Italic.otf"),
+  "SohneMono-Medium": __require("../src/assets/fonts/SohneMono-Medium.otf"),
+  "SohneMono-MediumItalic": __require("../src/assets/fonts/SohneMono-MediumItalic.otf"),
+  "SohneMono-SemiBold": __require("../src/assets/fonts/SohneMono-SemiBold.otf"),
+  "SohneMono-SemiBoldItalic": __require("../src/assets/fonts/SohneMono-SemiBoldItalic.otf"),
+  "SohneMono-Bold": __require("../src/assets/fonts/SohneMono-Bold.otf"),
+  "SohneMono-BoldItalic": __require("../src/assets/fonts/SohneMono-BoldItalic.otf"),
+  "SohneMono-ExtraBold": __require("../src/assets/fonts/SohneMono-ExtraBold.otf"),
+  "SohneMono-ExtraBoldItalic": __require("../src/assets/fonts/SohneMono-ExtraBoldItalic.otf")
+};
+
+export { SohneFonts };

package/dist/index.js

@@ -10,12 +10,12 @@ var FontAwesome5 = require('@expo/vector-icons/FontAwesome5');
 var MaterialIcons = require('@expo/vector-icons/MaterialIcons');
 var Ionicons = require('@expo/vector-icons/Ionicons');
 var pressto = require('pressto');
-var Animated13 = require('react-native-reanimated');
+var Animated12 = require('react-native-reanimated');
 var expoFont = require('expo-font');
 var bottomSheet = require('@gorhom/bottom-sheet');
+var reactNativeEase = require('react-native-ease');
 var vectorIcons = require('@expo/vector-icons');
 var expoLinearGradient = require('expo-linear-gradient');
-var reactNativeEase = require('react-native-ease');
 var RNSlider = require('@react-native-community/slider');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var picker = require('@react-native-picker/picker');
@@ -31,7 +31,7 @@ var Feather__default = /*#__PURE__*/_interopDefault(Feather);
 var FontAwesome5__default = /*#__PURE__*/_interopDefault(FontAwesome5);
 var MaterialIcons__default = /*#__PURE__*/_interopDefault(MaterialIcons);
 var Ionicons__default = /*#__PURE__*/_interopDefault(Ionicons);
-var Animated13__default = /*#__PURE__*/_interopDefault(Animated13);
+var Animated12__default = /*#__PURE__*/_interopDefault(Animated12);
 var RNSlider__default = /*#__PURE__*/_interopDefault(RNSlider);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -611,11 +611,11 @@ var TIMINGS = {
 };
 var EASINGS = {
   /** Material-style ease-out — natural deceleration for state changes. */
-  standard: Animated13.Easing.bezier(0.2, 0, 0, 1),
+  standard: Animated12.Easing.bezier(0.2, 0, 0, 1),
   /** Strong ease-out for expanding surfaces (Accordion open). */
-  expand: Animated13.Easing.bezier(0.23, 1, 0.32, 1),
+  expand: Animated12.Easing.bezier(0.23, 1, 0.32, 1),
   /** Quick ease-in for collapsing. */
-  collapse: Animated13.Easing.in(Animated13.Easing.ease)
+  collapse: Animated12.Easing.in(Animated12.Easing.ease)
 };
 var COLOR_TRANSITION = {
   type: "timing",
@@ -1000,24 +1000,11 @@ function TextBase({ variant = "body-md", color, style, children, ...props }) {
   );
 }
 var Text3 = React25__default.default.memo(TextBase);
-function useColorTransition(active, options = {}) {
-  const { duration = TIMINGS.state.duration } = options;
-  const progress = Animated13.useSharedValue(active ? 1 : 0);
-  React25.useEffect(() => {
-    progress.value = Animated13.withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
-  }, [active, duration, progress]);
-  return progress;
-}
-
-// src/components/Input/Input.tsx
 var webInputResetStyle = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, sheetMode = false, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
   const { colors } = useTheme();
   const [focused, setFocused] = React25.useState(false);
   const [showPassword, setShowPassword] = React25.useState(false);
-  const focusProgress = useColorTransition(focused, {
-    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
-  });
   const isDisabled = disabled || editable === false;
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
@@ -1033,20 +1020,19 @@ function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suff
     },
     /* @__PURE__ */ React25__default.default.createElement(vectorIcons.AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
   ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
-  const borderAnimStyle = Animated13.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated13.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error ? 2 : Animated13.interpolate(focusProgress.value, [0, 1], [1, 2])
-  }));
+  const borderColor = error ? colors.destructive : focused ? colors.primary : colors.border;
   return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles4.container, isDisabled && styles4.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles4.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React25__default.default.createElement(
-    Animated13__default.default.View,
+    reactNativeEase.EaseView,
     {
       style: [
         styles4.inputWrapper,
         { backgroundColor: isDisabled ? colors.surface : colors.background },
+        error && styles4.inputWrapperError,
         inputWrapperStyle
-      ]
+      ],
+      animate: { borderColor },
+      transition: COLOR_TRANSITION
     },
-    /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles4.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles4.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles4.prefixContainer }, effectivePrefix) : null,
     sheetMode ? /* @__PURE__ */ React25__default.default.createElement(
       bottomSheet.BottomSheetTextInput,
@@ -1122,16 +1108,14 @@ var styles4 = reactNative.StyleSheet.create({
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
-    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
-    // never resizes this box. Wrapper itself carries no border.
     borderRadius: 8,
+    borderWidth: 1,
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
     minHeight: 48
   },
-  borderOverlay: {
-    ...reactNative.StyleSheet.absoluteFillObject,
-    borderRadius: 8
+  inputWrapperError: {
+    borderWidth: 2
   },
   input: {
     fontFamily: "Sohne-Regular",
@@ -1421,17 +1405,17 @@ function Skeleton({
   style
 }) {
   const { colors, colorScheme } = useTheme();
-  const shimmer = Animated13.useSharedValue(0);
+  const shimmer = Animated12.useSharedValue(0);
   const [containerWidth, setContainerWidth] = React25.useState(300);
   const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
   React25.useEffect(() => {
-    shimmer.value = Animated13.withRepeat(
-      Animated13.withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Animated13.Easing.linear }),
+    shimmer.value = Animated12.withRepeat(
+      Animated12.withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Animated12.Easing.linear }),
       -1,
       false
     );
   }, [shimmer]);
-  const shimmerStyle = Animated13.useAnimatedStyle(() => ({
+  const shimmerStyle = Animated12.useAnimatedStyle(() => ({
     transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
   }));
   const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
@@ -1450,7 +1434,7 @@ function Skeleton({
       accessibilityLabel: "Loading",
       accessibilityState: { busy: true }
     },
-    /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [reactNative.StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React25__default.default.createElement(
+    /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [reactNative.StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React25__default.default.createElement(
       expoLinearGradient.LinearGradient,
       {
         colors: ["transparent", shimmerHighlight, "transparent"],
@@ -1702,12 +1686,12 @@ function Progress({ value = 0, max = 100, variant = "default", style, accessibil
   const { colors } = useTheme();
   const percent = Math.min(Math.max(value / max * 100, 0), 100);
   const [trackWidth, setTrackWidth] = React25.useState(0);
-  const animatedWidth = Animated13.useSharedValue(0);
+  const animatedWidth = Animated12.useSharedValue(0);
   React25.useEffect(() => {
     if (trackWidth === 0) return;
-    animatedWidth.value = Animated13.withSpring(percent / 100 * trackWidth, SPRINGS.glide);
+    animatedWidth.value = Animated12.withSpring(percent / 100 * trackWidth, SPRINGS.glide);
   }, [percent, trackWidth, animatedWidth]);
-  const indicatorAnimatedStyle = Animated13.useAnimatedStyle(() => ({
+  const indicatorAnimatedStyle = Animated12.useAnimatedStyle(() => ({
     width: animatedWidth.value
   }));
   const indicatorColor = variant === "success" ? colors.success : variant === "warning" ? colors.warning : variant === "destructive" ? colors.destructive : colors.primary;
@@ -1721,7 +1705,7 @@ function Progress({ value = 0, max = 100, variant = "default", style, accessibil
       accessibilityValue: { min: 0, max: 100, now: Math.round(percent) }
     },
     /* @__PURE__ */ React25__default.default.createElement(
-      Animated13__default.default.View,
+      Animated12__default.default.View,
       {
         style: [styles12.indicator, { backgroundColor: indicatorColor }, indicatorAnimatedStyle]
       }
@@ -1829,6 +1813,16 @@ var styles13 = reactNative.StyleSheet.create({
     paddingHorizontal: s(32)
   }
 });
+function useColorTransition(active, options = {}) {
+  const { duration = TIMINGS.state.duration } = options;
+  const progress = Animated12.useSharedValue(active ? 1 : 0);
+  React25.useEffect(() => {
+    progress.value = Animated12.withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
+  }, [active, duration, progress]);
+  return progress;
+}
+
+// src/components/Textarea/Textarea.tsx
 var webInputResetStyle2 = reactNative.Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
 function Textarea({
   label,
@@ -1851,19 +1845,19 @@ function Textarea({
     duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
   });
   const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
-  const borderAnimStyle = Animated13.useAnimatedStyle(() => ({
-    borderColor: error ? colors.destructive : Animated13.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
-    borderWidth: error ? 2 : Animated13.interpolate(focusProgress.value, [0, 1], [1, 2])
+  const borderAnimStyle = Animated12.useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : Animated12.interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : Animated12.interpolate(focusProgress.value, [0, 1], [1, 2])
   }));
   return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles14.container, containerStyle] }, label ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles14.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React25__default.default.createElement(
-    Animated13__default.default.View,
+    Animated12__default.default.View,
     {
       style: [
         styles14.inputWrapper,
         { backgroundColor: colors.background }
       ]
     },
-    /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles14.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
+    /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles14.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
     resolvedPrefixIcon ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles14.prefixIcon }, resolvedPrefixIcon) : null,
     /* @__PURE__ */ React25__default.default.createElement(
       reactNative.TextInput,
@@ -2243,18 +2237,18 @@ function usePressScale({
   pressOutSpring = SPRINGS.pressOut,
   disabled = false
 } = {}) {
-  const scale2 = Animated13.useSharedValue(1);
+  const scale2 = Animated12.useSharedValue(1);
   const { hovered, hoverHandlers } = useHover();
   const onPressIn = React25.useCallback(() => {
     if (disabled) return;
-    scale2.value = Animated13.withSpring(pressScale, pressInSpring);
+    scale2.value = Animated12.withSpring(pressScale, pressInSpring);
   }, [disabled, pressScale, pressInSpring, scale2]);
   const onPressOut = React25.useCallback(() => {
     if (disabled) return;
-    scale2.value = Animated13.withSpring(1, pressOutSpring);
+    scale2.value = Animated12.withSpring(1, pressOutSpring);
   }, [disabled, pressOutSpring, scale2]);
   const hoverActive = reactNative.Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
-  const animatedStyle = Animated13.useAnimatedStyle(() => ({
+  const animatedStyle = Animated12.useAnimatedStyle(() => ({
     transform: [
       { scale: scale2.value * (hoverActive ? hoverScale : 1) }
     ]
@@ -2301,7 +2295,7 @@ function RadioItem({
         accessibilityLabel: option.label,
         accessibilityState: { checked: selected, disabled: !!option.disabled }
       },
-      /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React25__default.default.createElement(
+      /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: scaleStyle }, /* @__PURE__ */ React25__default.default.createElement(
         reactNativeEase.EaseView,
         {
           style: styles18.radio,
@@ -2436,15 +2430,15 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
   const { colors } = useTheme();
   const active = value ?? internal;
   const tabLayouts = React25.useRef({});
-  const pillX = Animated13.useSharedValue(0);
-  const pillWidth = Animated13.useSharedValue(0);
+  const pillX = Animated12.useSharedValue(0);
+  const pillWidth = Animated12.useSharedValue(0);
   const initialised = React25.useRef(false);
   const animatePill = React25.useCallback((tabValue, animate) => {
     const layout = tabLayouts.current[tabValue];
     if (!layout) return;
     if (animate) {
-      pillX.value = Animated13.withSpring(layout.x, SPRINGS.glide);
-      pillWidth.value = Animated13.withSpring(layout.width, SPRINGS.glide);
+      pillX.value = Animated12.withSpring(layout.x, SPRINGS.glide);
+      pillWidth.value = Animated12.withSpring(layout.width, SPRINGS.glide);
     } else {
       pillX.value = layout.x;
       pillWidth.value = layout.width;
@@ -2458,7 +2452,7 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
-  const pillAnimatedStyle = Animated13.useAnimatedStyle(() => ({
+  const pillAnimatedStyle = Animated12.useAnimatedStyle(() => ({
     transform: [{ translateX: pillX.value }],
     width: pillWidth.value
   }));
@@ -2471,7 +2465,7 @@ function Tabs({ tabs, variant = "pill", value, onValueChange, children, style })
       accessibilityRole: "tablist"
     },
     variant === "pill" && /* @__PURE__ */ React25__default.default.createElement(
-      Animated13__default.default.View,
+      Animated12__default.default.View,
       {
         style: [
           styles19.pill,
@@ -2573,28 +2567,28 @@ function AccordionItemComponent({
 }) {
   const { colors } = useTheme();
   const resolvedIcon = item.iconName ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted) : item.icon;
-  const isExpanded = Animated13.useSharedValue(isOpen);
-  const height = Animated13.useSharedValue(0);
+  const isExpanded = Animated12.useSharedValue(isOpen);
+  const height = Animated12.useSharedValue(0);
   React25__default.default.useEffect(() => {
     isExpanded.value = isOpen;
   }, [isOpen, isExpanded]);
-  const derivedHeight = Animated13.useDerivedValue(
-    () => Animated13.withTiming(height.value * Number(isExpanded.value), {
+  const derivedHeight = Animated12.useDerivedValue(
+    () => Animated12.withTiming(height.value * Number(isExpanded.value), {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
     })
   );
-  const derivedRotation = Animated13.useDerivedValue(
-    () => Animated13.withTiming(isExpanded.value ? 1 : 0, {
+  const derivedRotation = Animated12.useDerivedValue(
+    () => Animated12.withTiming(isExpanded.value ? 1 : 0, {
       duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
       easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
     })
   );
-  const bodyStyle = Animated13.useAnimatedStyle(() => ({
+  const bodyStyle = Animated12.useAnimatedStyle(() => ({
     height: derivedHeight.value,
     overflow: "hidden"
   }));
-  const rotationStyle = Animated13.useAnimatedStyle(() => ({
+  const rotationStyle = Animated12.useAnimatedStyle(() => ({
     transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
   }));
   return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles20.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React25__default.default.createElement(
@@ -2610,8 +2604,8 @@ function AccordionItemComponent({
       accessibilityLabel: item.trigger
     },
     /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.triggerContent }, resolvedIcon ? /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles20.icon }, resolvedIcon) : null, /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles20.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
-    /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
-  ), /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React25__default.default.createElement(
+    /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles20.chevron, rotationStyle] }, /* @__PURE__ */ React25__default.default.createElement(vectorIcons.Entypo, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
+  ), /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: bodyStyle }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.View,
     {
       style: styles20.content,
@@ -3042,7 +3036,7 @@ function Select({
     }
     setPickerVisible(false);
   };
-  return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles23.container, style] }, label ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles23.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb2 ? /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [animatedStyle, { opacity: disabled ? 0.45 : 1 }] }, /* @__PURE__ */ React25__default.default.createElement(
+  return /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: [styles23.container, style] }, label ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles23.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb2 ? /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [animatedStyle, { opacity: disabled ? 0.45 : 1 }] }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       style: [
@@ -3382,6 +3376,7 @@ var styles24 = reactNative.StyleSheet.create({
   }
 });
 function ListItemBase({
+  imageSource,
   leftRender,
   rightRender,
   trailing,
@@ -3410,7 +3405,7 @@ function ListItemBase({
     selectionAsync();
     onPress?.();
   };
-  const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
+  const effectiveLeft = imageSource ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Image, { source: imageSource, style: styles25.image }) : leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
   const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
@@ -3491,6 +3486,11 @@ var styles25 = reactNative.StyleSheet.create({
     justifyContent: "center",
     flexShrink: 0
   },
+  image: {
+    width: s(40),
+    height: s(40),
+    borderRadius: 8
+  },
   content: {
     flex: 1,
     gap: vs(4)
@@ -4212,7 +4212,7 @@ function MediaCardBase({
     (title || subtitle || caption || footer) && /* @__PURE__ */ React25__default.default.createElement(reactNative.View, { style: styles33.meta }, title ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles33.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles33.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React25__default.default.createElement(reactNative.Text, { style: [styles33.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
   );
   if (onPress) {
-    return /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: animatedStyle }, /* @__PURE__ */ React25__default.default.createElement(
+    return /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: animatedStyle }, /* @__PURE__ */ React25__default.default.createElement(
       reactNative.TouchableOpacity,
       {
         onPress: handlePress,
@@ -4297,7 +4297,7 @@ var CategoryChip = React25__default.default.memo(function CategoryChip2({
   });
   const iconColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
   const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, iconColor) : item.icon ?? null;
-  return /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React25__default.default.createElement(
+  return /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: scaleStyle, ...hoverHandlers }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress: () => onSelect(item.value),
@@ -4720,15 +4720,15 @@ var styles38 = reactNative.StyleSheet.create({
   }
 });
 function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }) {
-  const progress = Animated13.useSharedValue(active ? 1 : 0);
+  const progress = Animated12.useSharedValue(active ? 1 : 0);
   React25.useEffect(() => {
-    progress.value = Animated13.withSpring(active ? 1 : 0, SPRINGS.glide);
+    progress.value = Animated12.withSpring(active ? 1 : 0, SPRINGS.glide);
   }, [active, progress]);
-  const animatedStyle = Animated13.useAnimatedStyle(() => ({
+  const animatedStyle = Animated12.useAnimatedStyle(() => ({
     width: size + progress.value * size * 1.5,
-    backgroundColor: Animated13.interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor])
+    backgroundColor: Animated12.interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor])
   }));
-  const dot = /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [{ height: size, borderRadius: size / 2 }, animatedStyle] });
+  const dot = /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [{ height: size, borderRadius: size / 2 }, animatedStyle] });
   if (!onPress) return dot;
   const handlePress = () => {
     selectionAsync();
@@ -4967,7 +4967,7 @@ function Cell({ item, selected, width, onPress }) {
   });
   const iconColor = selected ? colors.primary : colors.foregroundSubtle;
   const iconNode = item.icon ?? (item.iconName ? renderIcon(item.iconName, ms(24), iconColor) : null);
-  return /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [{ width }, animatedStyle] }, /* @__PURE__ */ React25__default.default.createElement(
+  return /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [{ width }, animatedStyle] }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.TouchableOpacity,
     {
       onPress,
@@ -5329,22 +5329,22 @@ var styles43 = reactNative.StyleSheet.create({
 var MAX_SCALE = 3;
 var DOUBLE_TAP_SCALE = 2.5;
 function ZoomableImage({ source, width, height, onZoomChange }) {
-  const scale2 = Animated13.useSharedValue(1);
-  const savedScale = Animated13.useSharedValue(1);
-  const translateX = Animated13.useSharedValue(0);
-  const translateY = Animated13.useSharedValue(0);
-  const savedX = Animated13.useSharedValue(0);
-  const savedY = Animated13.useSharedValue(0);
+  const scale2 = Animated12.useSharedValue(1);
+  const savedScale = Animated12.useSharedValue(1);
+  const translateX = Animated12.useSharedValue(0);
+  const translateY = Animated12.useSharedValue(0);
+  const savedX = Animated12.useSharedValue(0);
+  const savedY = Animated12.useSharedValue(0);
   const reportZoom = React25.useCallback((zoomed) => onZoomChange(zoomed), [onZoomChange]);
   const reset = () => {
     "worklet";
-    scale2.value = Animated13.withTiming(1);
+    scale2.value = Animated12.withTiming(1);
     savedScale.value = 1;
-    translateX.value = Animated13.withTiming(0);
-    translateY.value = Animated13.withTiming(0);
+    translateX.value = Animated12.withTiming(0);
+    translateY.value = Animated12.withTiming(0);
     savedX.value = 0;
     savedY.value = 0;
-    Animated13.runOnJS(reportZoom)(false);
+    Animated12.runOnJS(reportZoom)(false);
   };
   const pinch = reactNativeGestureHandler.Gesture.Pinch().onUpdate((e) => {
     scale2.value = Math.max(1, Math.min(savedScale.value * e.scale, MAX_SCALE));
@@ -5353,7 +5353,7 @@ function ZoomableImage({ source, width, height, onZoomChange }) {
     if (scale2.value <= 1) {
       reset();
     } else {
-      Animated13.runOnJS(reportZoom)(true);
+      Animated12.runOnJS(reportZoom)(true);
     }
   });
   const pan = reactNativeGestureHandler.Gesture.Pan().onUpdate((e) => {
@@ -5368,21 +5368,21 @@ function ZoomableImage({ source, width, height, onZoomChange }) {
     if (scale2.value > 1) {
       reset();
     } else {
-      scale2.value = Animated13.withTiming(DOUBLE_TAP_SCALE);
+      scale2.value = Animated12.withTiming(DOUBLE_TAP_SCALE);
       savedScale.value = DOUBLE_TAP_SCALE;
-      Animated13.runOnJS(reportZoom)(true);
+      Animated12.runOnJS(reportZoom)(true);
     }
   });
   const composed = reactNativeGestureHandler.Gesture.Exclusive(doubleTap, reactNativeGestureHandler.Gesture.Simultaneous(pinch, pan));
-  const animatedStyle = Animated13.useAnimatedStyle(() => ({
+  const animatedStyle = Animated12.useAnimatedStyle(() => ({
     transform: [
       { translateX: translateX.value },
       { translateY: translateY.value },
       { scale: scale2.value }
     ]
   }));
-  return /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: composed }, /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [{ width, height }, styles44.imageWrap] }, /* @__PURE__ */ React25__default.default.createElement(
-    Animated13__default.default.Image,
+  return /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: composed }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [{ width, height }, styles44.imageWrap] }, /* @__PURE__ */ React25__default.default.createElement(
+    Animated12__default.default.Image,
     {
       source,
       style: [{ width, height }, animatedStyle],
@@ -5405,25 +5405,25 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
     });
     return () => cancelAnimationFrame(handle);
   }, [visible, initialIndex, width]);
-  const dragY = Animated13.useSharedValue(0);
+  const dragY = Animated12.useSharedValue(0);
   const DISMISS_THRESHOLD = height * 0.18;
   const closeViewer = React25.useCallback(() => onClose(), [onClose]);
   const swipeDown = reactNativeGestureHandler.Gesture.Pan().enabled(pagingEnabled).activeOffsetY(12).failOffsetX([-16, 16]).onUpdate((e) => {
     dragY.value = Math.max(0, e.translationY);
   }).onEnd((e) => {
     if (e.translationY > DISMISS_THRESHOLD || e.velocityY > 800) {
-      Animated13.runOnJS(closeViewer)();
+      Animated12.runOnJS(closeViewer)();
     } else {
-      dragY.value = Animated13.withTiming(0);
+      dragY.value = Animated12.withTiming(0);
     }
   });
   React25__default.default.useEffect(() => {
     if (visible) dragY.value = 0;
   }, [visible, dragY]);
-  const dismissStyle = Animated13.useAnimatedStyle(() => ({
+  const dismissStyle = Animated12.useAnimatedStyle(() => ({
     transform: [{ translateY: dragY.value }]
   }));
-  const backdropStyle = Animated13.useAnimatedStyle(() => ({
+  const backdropStyle = Animated12.useAnimatedStyle(() => ({
     opacity: 1 - Math.min(dragY.value / (height * 0.5), 0.85)
   }));
   const onMomentumEnd = (e) => {
@@ -5434,7 +5434,7 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
     scrollRef.current?.scrollTo({ x: page * width, animated: true });
     setIndex(page);
   };
-  return /* @__PURE__ */ React25__default.default.createElement(reactNative.Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles44.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: [styles44.container, dismissStyle] }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React25__default.default.createElement(Animated13__default.default.View, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(
+  return /* @__PURE__ */ React25__default.default.createElement(reactNative.Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureHandlerRootView, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: [styles44.container, dismissStyle] }, /* @__PURE__ */ React25__default.default.createElement(reactNativeGestureHandler.GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React25__default.default.createElement(Animated12__default.default.View, { style: styles44.root }, /* @__PURE__ */ React25__default.default.createElement(
     reactNative.ScrollView,
     {
       ref: scrollRef,

package/dist/index.mjs

@@ -1,14 +1,15 @@
+export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Text } from './chunk-WJLKJMKR.mjs';
-export { Textarea } from './chunk-EH745HE5.mjs';
+export { Textarea } from './chunk-CZCQZHG6.mjs';
 export { Toggle } from './chunk-KIHCWCWL.mjs';
 export { VirtualList } from './chunk-NC5ZTR2Y.mjs';
+export { Separator } from './chunk-MX6HRKMI.mjs';
 export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
 export { SheetSelect } from './chunk-URI2WBIV.mjs';
 export { Skeleton } from './chunk-AJ7ZDNBT.mjs';
 export { Slider } from './chunk-JMOZEC77.mjs';
 export { Switch } from './chunk-QKH5ZOD5.mjs';
 export { TabBar } from './chunk-MLF3EZFW.mjs';
-export { Tabs, TabsContent } from './chunk-GQYFLP3D.mjs';
 export { Pressable } from './chunk-MBMXYJJV.mjs';
 export { PricingCard } from './chunk-4I7D47FH.mjs';
 export { Progress } from './chunk-OB4JUQ3O.mjs';
@@ -17,14 +18,14 @@ export { RetrayProvider } from './chunk-YFZ3ELX5.mjs';
 export { ToastProvider, sonnerToast as toast, useToast } from './chunk-2UYENBLV.mjs';
 export { Select } from './chunk-A3A6KNQN.mjs';
 export { SelectableGrid } from './chunk-NA7PARID.mjs';
-export { Separator } from './chunk-MX6HRKMI.mjs';
 export { LabelValue } from './chunk-A4MDAP7G.mjs';
 export { ListGroup, ListGroupFooter, ListGroupHeader } from './chunk-SOA2Z4RB.mjs';
-export { ListItem } from './chunk-T4I5WVHA.mjs';
+export { ListItem } from './chunk-OHBNABL5.mjs';
 export { MediaCard } from './chunk-VGTDN7SW.mjs';
 export { MenuGroup, MenuGroupFooter, MenuGroupHeader } from './chunk-IRRY3CRZ.mjs';
 export { MenuItem } from './chunk-ZJKGQMYH.mjs';
 export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate } from './chunk-GD6KXMG5.mjs';
+export { DetailRow } from './chunk-JB67UOB5.mjs';
 export { EmptyState } from './chunk-6OAZJ577.mjs';
 export { ErrorBoundary } from './chunk-LXJIIOYQ.mjs';
 export { Form, FormField, FormFooter, FormSection } from './chunk-6Q64UFIA.mjs';
@@ -32,6 +33,7 @@ export { ImageUpload } from './chunk-Y4GL2MHX.mjs';
 export { Spinner } from './chunk-WBOOUHSS.mjs';
 export { ImageViewer } from './chunk-Z4BVUWW6.mjs';
 export { PagerDots } from './chunk-4K625MVM.mjs';
+export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-ID72TK46.mjs';
 export { CategoryStrip } from './chunk-VQ57HWPL.mjs';
 import './chunk-YNROWHQJ.mjs';
@@ -39,10 +41,8 @@ export { Checkbox } from './chunk-AV4EMIRH.mjs';
 export { Chip, ChipGroup } from './chunk-UREA2GYY.mjs';
 export { ConfirmDialog } from './chunk-FZZLPJ6B.mjs';
 export { CurrencyDisplay } from './chunk-BRKYVJVV.mjs';
-export { CurrencyInput } from './chunk-KNSENOV4.mjs';
-export { Input } from './chunk-LVYEU5ZK.mjs';
-import './chunk-26BCI223.mjs';
-export { DetailRow } from './chunk-JB67UOB5.mjs';
+export { CurrencyInput } from './chunk-JUXSWN54.mjs';
+export { Input } from './chunk-ZUR7AU5R.mjs';
 export { Accordion } from './chunk-O3HA6TYM.mjs';
 export { AlertBanner } from './chunk-6MKGPAR2.mjs';
 export { AppHeader } from './chunk-AZJF2BLK.mjs';
@@ -56,7 +56,6 @@ import './chunk-DVK4G2GT.mjs';
 export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY } from './chunk-QY3X2UYR.mjs';
 export { Icon, configureIconFamilies, renderIcon } from './chunk-T7XZ7H7Y.mjs';
 export { ThemeProvider, defaultDark, defaultLight, deriveColors, useTheme } from './chunk-SOYNZDVY.mjs';
-export { ButtonGroup } from './chunk-3BBOZ3OQ.mjs';
 import './chunk-2CE3TQVY.mjs';
 import './chunk-Y6FXYEAI.mjs';
 import { useState, useCallback } from 'react';