@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-MAC465BB.mjs

@@ -0,0 +1,61 @@
+import { Input } from './chunk-756RAKE4.mjs';
+import { ms, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+
+function formatCurrency(raw, separator) {
+  const digits = raw.replace(/\D/g, "");
+  if (!digits) return "";
+  return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+function CurrencyInput({
+  value,
+  onChangeText,
+  onChangeValue,
+  prefix = "$",
+  thousandsSeparator = ".",
+  size = "default",
+  label,
+  error,
+  hint,
+  placeholder,
+  editable,
+  containerStyle,
+  style
+}) {
+  const handleChange = (text) => {
+    const withoutPrefix = prefix && text.startsWith(prefix) ? text.slice(prefix.length) : text;
+    const formatted = formatCurrency(withoutPrefix, thousandsSeparator);
+    const display = formatted;
+    onChangeText?.(display);
+    const separatorRegex = new RegExp(`\\${thousandsSeparator}`, "g");
+    const raw = parseFloat(formatted.replace(separatorRegex, "") || "0");
+    onChangeValue?.(isNaN(raw) ? 0 : raw);
+  };
+  const isLarge = size === "large";
+  const inputStyle = isLarge ? { fontFamily: "Sohne-Regular", fontSize: ms(36) } : { fontFamily: "Sohne-Regular" };
+  const prefixStyle = {
+    fontFamily: "Sohne-Regular",
+    fontSize: isLarge ? ms(32) : ms(17)
+  };
+  const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
+  return /* @__PURE__ */ React.createElement(
+    Input,
+    {
+      value: displayValue,
+      onChangeText: handleChange,
+      keyboardType: "numeric",
+      label,
+      error,
+      hint,
+      placeholder: placeholder ?? "0",
+      editable,
+      prefix,
+      prefixStyle,
+      containerStyle,
+      inputWrapperStyle: isLarge ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
+      style: [inputStyle, style]
+    }
+  );
+}
+
+export { CurrencyInput };

package/dist/chunk-MBMXYJJV.mjs

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

package/dist/chunk-MLF3EZFW.mjs

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

package/dist/chunk-MX6HRKMI.mjs

@@ -0,0 +1,29 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+function Separator({ orientation = "horizontal", style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        orientation === "horizontal" ? styles.horizontal : styles.vertical,
+        { backgroundColor: colors.separator },
+        style
+      ]
+    }
+  );
+}
+var styles = StyleSheet.create({
+  horizontal: {
+    height: 1,
+    width: "100%"
+  },
+  vertical: {
+    width: 1,
+    height: "100%"
+  }
+});
+
+export { Separator };

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-NC5ZTR2Y.mjs

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { FlatList } from 'react-native';
+
+// src/components/VirtualList/VirtualList.tsx
+var defaultKeyExtractor = (item, index) => {
+  const id = item?.id;
+  return id !== void 0 ? String(id) : String(index);
+};
+function VirtualListInner({ itemHeight, keyExtractor, renderItem, ...props }, ref) {
+  const getItemLayout = useCallback(
+    (_data, index) => ({
+      length: itemHeight ?? 0,
+      offset: (itemHeight ?? 0) * index,
+      index
+    }),
+    [itemHeight]
+  );
+  return /* @__PURE__ */ React.createElement(
+    FlatList,
+    {
+      ref,
+      keyExtractor: keyExtractor ?? defaultKeyExtractor,
+      renderItem,
+      getItemLayout: itemHeight !== void 0 ? getItemLayout : void 0,
+      removeClippedSubviews: true,
+      ...props
+    }
+  );
+}
+var VirtualList = React.forwardRef(VirtualListInner);
+
+export { VirtualList };

package/dist/chunk-O3HA6TYM.mjs

@@ -0,0 +1,139 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { EASINGS, TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.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 { Entypo } from '@expo/vector-icons';
+
+function AccordionItemComponent({
+  item,
+  isOpen,
+  onToggle
+}) {
+  const { colors } = useTheme();
+  const resolvedIcon = item.iconName ? renderIcon(item.iconName, ms(16), item.iconColor ?? colors.foregroundMuted) : item.icon;
+  const isExpanded = useSharedValue(isOpen);
+  const height = useSharedValue(0);
+  React.useEffect(() => {
+    isExpanded.value = isOpen;
+  }, [isOpen, isExpanded]);
+  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
+    })
+  );
+  const derivedRotation = useDerivedValue(
+    () => withTiming(isExpanded.value ? 1 : 0, {
+      duration: isExpanded.value ? TIMINGS.expand.duration : TIMINGS.collapse.duration,
+      easing: isExpanded.value ? EASINGS.expand : EASINGS.collapse
+    })
+  );
+  const bodyStyle = useAnimatedStyle(() => ({
+    height: derivedHeight.value,
+    overflow: "hidden"
+  }));
+  const rotationStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${derivedRotation.value * 180}deg` }]
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { backgroundColor: colors.card, borderColor: colors.border }] }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      style: ({ pressed }) => [styles.trigger, { opacity: pressed ? 0.6 : 1 }],
+      onPress: () => {
+        selectionAsync();
+        onToggle();
+      },
+      accessibilityRole: "button",
+      accessibilityState: { expanded: isOpen },
+      accessibilityLabel: item.trigger
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.triggerContent }, resolvedIcon ? /* @__PURE__ */ React.createElement(View, { style: styles.icon }, resolvedIcon) : null, /* @__PURE__ */ React.createElement(Text, { style: [styles.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger)),
+    /* @__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,
+    {
+      style: styles.content,
+      onLayout: (e) => {
+        height.value = e.nativeEvent.layout.height;
+      }
+    },
+    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 }) {
+  const [openValues, setOpenValues] = useState(() => {
+    if (!defaultValue) return [];
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+  });
+  const toggle = (value) => {
+    if (type === "single") {
+      setOpenValues((prev) => prev.includes(value) ? [] : [value]);
+    } else {
+      setOpenValues(
+        (prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+      );
+    }
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.list, style] }, items.map((item) => /* @__PURE__ */ React.createElement(
+    AccordionItemComponent,
+    {
+      key: item.value,
+      item,
+      isOpen: openValues.includes(item.value),
+      onToggle: () => toggle(item.value)
+    }
+  )));
+}
+var styles = StyleSheet.create({
+  list: {
+    gap: s(6)
+  },
+  item: {
+    borderWidth: 1,
+    borderRadius: ms(10),
+    overflow: "hidden"
+  },
+  trigger: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: s(14),
+    paddingVertical: vs(12)
+  },
+  triggerContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(8),
+    flex: 1
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  triggerText: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  chevron: {
+    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: {
+    paddingHorizontal: s(8),
+    paddingBottom: vs(12),
+    position: "absolute",
+    width: "100%"
+  },
+  contentText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: ms(20)
+  }
+});
+
+export { Accordion };

package/dist/chunk-OB4JUQ3O.mjs

@@ -0,0 +1,51 @@
+import { SPRINGS } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+
+function Progress({ value = 0, max = 100, variant = "default", style, accessibilityLabel }) {
+  const { colors } = useTheme();
+  const percent = Math.min(Math.max(value / max * 100, 0), 100);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const animatedWidth = useSharedValue(0);
+  useEffect(() => {
+    if (trackWidth === 0) return;
+    animatedWidth.value = withSpring(percent / 100 * trackWidth, SPRINGS.glide);
+  }, [percent, trackWidth, animatedWidth]);
+  const indicatorAnimatedStyle = useAnimatedStyle(() => ({
+    width: animatedWidth.value
+  }));
+  const indicatorColor = variant === "success" ? colors.success : variant === "warning" ? colors.warning : variant === "destructive" ? colors.destructive : colors.primary;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.track, { backgroundColor: colors.surface }, style],
+      onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+      accessibilityRole: "progressbar",
+      accessibilityLabel,
+      accessibilityValue: { min: 0, max: 100, now: Math.round(percent) }
+    },
+    /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [styles.indicator, { backgroundColor: indicatorColor }, indicatorAnimatedStyle]
+      }
+    )
+  );
+}
+var styles = StyleSheet.create({
+  track: {
+    height: vs(8),
+    borderRadius: 9999,
+    overflow: "hidden",
+    width: "100%"
+  },
+  indicator: {
+    height: "100%",
+    borderRadius: 9999
+  }
+});
+
+export { Progress };