@retray-dev/ui-kit 6.1.0 → 7.0.1

package/dist/chunk-6LQYY7HC.mjs

@@ -0,0 +1,127 @@
+import { useColorTransition } from './chunk-7H2OR44A.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { TIMINGS } from './chunk-5IKW3VNC.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { Platform, StyleSheet, View, Text, TextInput } from 'react-native';
+import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
+
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Textarea({
+  label,
+  error,
+  hint,
+  rows = 4,
+  prefixIcon,
+  prefixIconNode,
+  prefixIconColor,
+  containerStyle,
+  style,
+  onFocus,
+  onBlur,
+  accessibilityLabel,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
+  });
+  const resolvedPrefixIcon = prefixIcon ? renderIcon(prefixIcon, ms(16), prefixIconColor ?? colors.foregroundMuted) : prefixIconNode;
+  const borderAnimStyle = useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : interpolate(focusProgress.value, [0, 1], [1, 2])
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.inputWrapper,
+        { backgroundColor: colors.background }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
+    resolvedPrefixIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.prefixIcon }, resolvedPrefixIcon) : null,
+    /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        multiline: true,
+        numberOfLines: rows,
+        textAlignVertical: "top",
+        style: [
+          styles.input,
+          {
+            color: colors.foreground,
+            minHeight: rows * vs(30)
+          },
+          webInputResetStyle,
+          style
+        ],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        placeholderTextColor: colors.foregroundMuted,
+        allowFontScaling: true,
+        accessibilityLabel: accessibilityLabel ?? label,
+        ...props
+      }
+    )
+  ), error ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(4)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13),
+    lineHeight: vs(18),
+    marginBottom: vs(2)
+  },
+  inputWrapper: {
+    // Border lives on borderOverlay (absolute); wrapper carries none so the
+    // focus weight change never reflows content.
+    borderRadius: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    gap: s(8)
+  },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
+  prefixIcon: {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    paddingTop: vs(2)
+  },
+  input: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: vs(22),
+    padding: 0,
+    margin: 0
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: vs(16),
+    marginTop: vs(4)
+  }
+});
+
+export { Textarea };

package/dist/chunk-6Q64UFIA.mjs

@@ -0,0 +1,71 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function Form({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.form, style] }, children);
+}
+function FormField({
+  children,
+  label,
+  error,
+  required,
+  style,
+  labelStyle,
+  errorStyle
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.field, style] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }, labelStyle], allowFontScaling: true }, label, required ? /* @__PURE__ */ React.createElement(Text, { style: { color: colors.destructive } }, " *") : null) : null, children, error ? /* @__PURE__ */ React.createElement(Text, { style: [styles.error, { color: colors.destructive }, errorStyle], allowFontScaling: true }, error) : null);
+}
+function FormSection({ children, title, description, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.section, style] }, title ? /* @__PURE__ */ React.createElement(View, { style: styles.sectionHeader }, /* @__PURE__ */ React.createElement(Text, { style: [styles.sectionTitle, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.sectionDescription, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children);
+}
+function FormFooter({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
+}
+Form.Field = FormField;
+Form.Section = FormSection;
+Form.Footer = FormFooter;
+var styles = StyleSheet.create({
+  form: {
+    gap: vs(16)
+  },
+  field: {
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  error: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12,
+    lineHeight: 16
+  },
+  section: {
+    gap: vs(16)
+  },
+  sectionHeader: {
+    gap: vs(4)
+  },
+  sectionTitle: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 16,
+    lineHeight: 24
+  },
+  sectionDescription: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  footer: {
+    flexDirection: "row",
+    gap: s(12),
+    paddingTop: vs(8)
+  }
+});
+
+export { Form, FormField, FormFooter, FormSection };

package/dist/chunk-76PFOSM2.mjs

@@ -0,0 +1,41 @@
+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();
+  if (label) {
+    return /* @__PURE__ */ React.createElement(View, { style: styles.wrapper }, /* @__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, ...props });
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    alignItems: "center",
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    lineHeight: mvs(18)
+  }
+});
+
+export { Spinner };

package/dist/chunk-7H2OR44A.mjs

@@ -0,0 +1,14 @@
+import { TIMINGS, EASINGS } from './chunk-5IKW3VNC.mjs';
+import { useEffect } from 'react';
+import { useSharedValue, withTiming } from 'react-native-reanimated';
+
+function useColorTransition(active, options = {}) {
+  const { duration = TIMINGS.state.duration } = options;
+  const progress = useSharedValue(active ? 1 : 0);
+  useEffect(() => {
+    progress.value = withTiming(active ? 1 : 0, { duration, easing: EASINGS.standard });
+  }, [active, duration, progress]);
+  return progress;
+}
+
+export { useColorTransition };

package/dist/chunk-A4MDAP7G.mjs

@@ -0,0 +1,42 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.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;
+  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);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: s(12)
+  },
+  labelSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(4)
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  value: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: "right"
+  }
+});
+
+export { LabelValue };

package/dist/chunk-AU2VDY4P.mjs

@@ -0,0 +1,190 @@
+import { impactMedium } from './chunk-RTC3CFXF.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { Dimensions, Platform, StyleSheet, View, Text, TouchableOpacity } 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';
+import { AntDesign } from '@expo/vector-icons';
+
+var SCREEN_HEIGHT = Dimensions.get("window").height;
+var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
+var isAndroid = Platform.OS === "android";
+function SheetHeader({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, style] }, children);
+}
+function SheetContent({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.sheetContent, style] }, children);
+}
+function SheetFooter({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style] }, children);
+}
+function Sheet({
+  open,
+  onClose,
+  title,
+  subtitle,
+  description,
+  showCloseButton = false,
+  children,
+  style,
+  contentStyle,
+  scrollable,
+  maxHeight,
+  keyboardBehavior,
+  keyboardBlurBehavior = "restore",
+  enableBlurKeyboardOnGesture = true,
+  android_keyboardInputMode = "adjustPan",
+  footer,
+  snapPoints
+}) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const ref = useRef(null);
+  const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
+  useEffect(() => {
+    if (open) {
+      impactMedium();
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [open]);
+  const renderBackdrop = useCallback((props) => /* @__PURE__ */ React.createElement(
+    BottomSheetBackdrop,
+    {
+      ...props,
+      disappearsOnIndex: -1,
+      appearsOnIndex: 0,
+      pressBehavior: "close"
+    }
+  ), []);
+  const childArray = React.Children.toArray(children);
+  const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader);
+  const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent);
+  const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter);
+  const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
+    (child) => !React.isValidElement(child) || child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter
+  ) : children;
+  const effectiveSubtitle = subtitle ?? description;
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: onClose,
+      style: styles.closeButton,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close",
+      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+    },
+    /* @__PURE__ */ React.createElement(AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
+  ) : null), effectiveSubtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  const contentNode = customContent ? customContent : filteredChildren;
+  const effectiveFooter = customFooter ? customFooter : footer;
+  const renderFooter = useCallback((props) => {
+    if (!effectiveFooter) return null;
+    return /* @__PURE__ */ React.createElement(BottomSheetFooter, { ...props }, effectiveFooter);
+  }, [effectiveFooter]);
+  const useScroll = scrollable || !!maxHeight;
+  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
+  const useDynamicSizing = !snapPoints;
+  return /* @__PURE__ */ React.createElement(
+    BottomSheetModal,
+    {
+      ref,
+      enableDynamicSizing: useDynamicSizing,
+      snapPoints,
+      maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
+      onDismiss: onClose,
+      backdropComponent: renderBackdrop,
+      footerComponent: effectiveFooter ? renderFooter : void 0,
+      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
+      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
+      enablePanDownToClose: true,
+      topInset: insets.top,
+      keyboardBehavior: effectiveKeyboardBehavior,
+      keyboardBlurBehavior,
+      android_keyboardInputMode,
+      enableBlurKeyboardOnGesture
+    },
+    useScroll ? /* @__PURE__ */ React.createElement(
+      BottomSheetScrollView,
+      {
+        contentContainerStyle: [
+          styles.scrollContent,
+          style
+        ],
+        style: contentStyle,
+        showsVerticalScrollIndicator: true,
+        indicatorStyle: "black",
+        persistentScrollbar: isAndroid
+      },
+      headerNode,
+      contentNode
+    ) : /* @__PURE__ */ React.createElement(BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
+  );
+}
+Sheet.Header = SheetHeader;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
+var styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16)
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2)
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4)
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    flex: 1
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
+  },
+  content: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32)
+  },
+  scrollContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32),
+    paddingRight: s(16)
+  },
+  sheetContent: {
+    gap: vs(16)
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: "row",
+    gap: s(12)
+  }
+});
+
+export { Sheet };

package/dist/chunk-BRKYVJVV.mjs

@@ -0,0 +1,60 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var variantFontSize = {
+  hero: ms(48),
+  large: ms(32),
+  medium: ms(18),
+  small: ms(14)
+};
+var variantLetterSpacing = {
+  hero: -2,
+  large: -1,
+  medium: -0.5,
+  small: 0
+};
+function formatValue(value, prefix, showDecimals) {
+  const num = typeof value === "string" ? parseFloat(value.replace(/[^0-9.-]/g, "")) : value;
+  if (isNaN(num)) return `${prefix}0`;
+  const abs = Math.abs(num);
+  const sign = num < 0 ? "-" : "";
+  const intPart = Math.floor(abs).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+  if (showDecimals) {
+    const decStr = (abs % 1).toFixed(2).slice(2);
+    return `${sign}${prefix}${intPart},${decStr}`;
+  }
+  return `${sign}${prefix}${intPart}`;
+}
+function CurrencyDisplayBase({ value, prefix = "$", showDecimals = false, textColor, variant, autoScale, maxFontSize, style }) {
+  const { colors } = useTheme();
+  const formatted = formatValue(value, prefix, showDecimals);
+  const baseFontSize = variant ? variantFontSize[variant] : ms(56);
+  const fontSize = maxFontSize ?? baseFontSize;
+  const letterSpacing = variant ? variantLetterSpacing[variant] : -2;
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.amount, { color: textColor ?? colors.foreground, fontSize, letterSpacing }],
+      allowFontScaling: true,
+      numberOfLines: autoScale ? 1 : void 0,
+      adjustsFontSizeToFit: autoScale,
+      minimumFontScale: autoScale ? 0.5 : void 0
+    },
+    formatted
+  ));
+}
+var CurrencyDisplay = React.memo(CurrencyDisplayBase);
+var styles = StyleSheet.create({
+  container: {
+    alignSelf: "flex-start"
+  },
+  amount: {
+    fontFamily: "Sohne-Bold",
+    includeFontPadding: false,
+    textAlignVertical: "top"
+  }
+});
+
+export { CurrencyDisplay };

package/dist/chunk-CRYBX2CM.mjs

@@ -0,0 +1,146 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { usePressScale } from './chunk-QCNARS3X.mjs';
+import { impactMedium } from './chunk-RTC3CFXF.mjs';
+import { PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { TYPOGRAPHY, 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, TouchableOpacity, ActivityIndicator, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+var containerSizeStyles = {
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
+  lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 }
+};
+var labelSizeStyles = {
+  sm: { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize) },
+  md: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize) },
+  lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1), lineHeight: mvs(24) }
+};
+var iconSizeMap = { sm: 16, md: 18, lg: 20 };
+function ButtonBase({
+  label,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  icon,
+  iconName,
+  iconColor,
+  iconPosition = "left",
+  disabled,
+  style,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading;
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled: isDisabled
+  });
+  const handlePress = (e) => {
+    impactMedium();
+    onPress?.(e);
+  };
+  const containerVariantStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
+    text: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.destructive }
+  }[variant];
+  const labelVariantStyle = {
+    primary: { color: colors.primaryForeground },
+    secondary: { color: colors.primary },
+    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
+    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
+    // carry the brand voltage. Falls back to primary when no accent is defined.
+    text: { color: colors.accentResolved },
+    destructive: { color: colors.destructiveForeground }
+  }[variant];
+  const textColor = iconColor ?? labelVariantStyle.color;
+  const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
+  const styleArray = Array.isArray(style) ? style : style ? [style] : [];
+  const flatStyle = StyleSheet.flatten(styleArray);
+  const { flex, ...restStyle } = flatStyle || {};
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }, animatedStyle],
+      ...hoverHandlers
+    },
+    /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: [
+          styles.base,
+          containerVariantStyle,
+          containerSizeStyles[size],
+          fullWidth && styles.fullWidth,
+          isDisabled && styles.disabled,
+          restStyle
+        ],
+        disabled: isDisabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        onPress: handlePress,
+        onPressIn,
+        onPressOut,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityHint,
+        accessibilityState: { disabled: isDisabled, busy: loading },
+        ...props
+      },
+      loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
+          allowFontScaling: true,
+          numberOfLines: 1
+        },
+        label
+      )) : /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon), /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+          allowFontScaling: true,
+          numberOfLines: 1
+        },
+        label
+      ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon))
+    )
+  );
+}
+var Button = React.memo(ButtonBase);
+var styles = StyleSheet.create({
+  base: {
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    flexShrink: 1
+  },
+  labelWithIcon: {
+    marginHorizontal: s(6)
+  },
+  labelLoading: {
+    opacity: 0.6
+  }
+});
+
+export { Button };