@retray-dev/ui-kit 6.1.0 → 7.0.1

package/dist/chunk-LG4DO3DK.mjs

@@ -0,0 +1,174 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { usePressScale } from './chunk-QCNARS3X.mjs';
+import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { Entypo } from '@expo/vector-icons';
+
+function ListItemBase({
+  leftRender,
+  rightRender,
+  trailing,
+  icon,
+  leftIcon,
+  rightIcon,
+  leftIconColor,
+  rightIconColor,
+  title,
+  subtitle,
+  caption,
+  variant = "plain",
+  showChevron = false,
+  showSeparator = false,
+  onPress,
+  disabled,
+  style,
+  titleStyle,
+  subtitleStyle,
+  captionStyle,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.row,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled: !onPress || disabled
+  });
+  const handlePress = () => {
+    selectionAsync();
+    onPress?.();
+  };
+  const effectiveLeft = 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,
+    borderRadius: RADIUS.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 6,
+    elevation: 2
+  } : {};
+  const a11yLabel = accessibilityLabel ?? [title, subtitle, caption].filter(Boolean).join(". ");
+  return /* @__PURE__ */ React.createElement(Animated.View, { style: [animatedStyle, disabled && styles.disabled], ...hoverHandlers }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.container, cardStyle, style],
+      onPress: onPress ? handlePress : void 0,
+      onPressIn,
+      onPressOut,
+      disabled,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: onPress ? "button" : void 0,
+      accessibilityLabel: onPress ? a11yLabel : void 0,
+      accessibilityState: onPress ? { disabled: !!disabled } : void 0
+    },
+    effectiveLeft ? /* @__PURE__ */ React.createElement(View, { style: styles.leftContainer }, effectiveLeft) : null,
+    /* @__PURE__ */ React.createElement(View, { style: styles.content }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.title, { color: colors.foreground }, titleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      title
+    ), subtitle ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
+        numberOfLines: 2,
+        allowFontScaling: true
+      },
+      subtitle
+    ) : null, caption ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.caption, { color: colors.foregroundMuted }, captionStyle],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      caption
+    ) : null),
+    effectiveRight !== void 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.rightText, { color: colors.foregroundMuted }],
+        allowFontScaling: true
+      },
+      effectiveRight
+    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null
+  ), showSeparator ? /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.separator,
+        { backgroundColor: colors.separator }
+      ]
+    }
+  ) : null);
+}
+var ListItem = React.memo(ListItemBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: s(16),
+    paddingVertical: vs(10),
+    gap: s(12)
+  },
+  leftContainer: {
+    width: s(44),
+    height: s(44),
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  content: {
+    flex: 1,
+    gap: vs(4)
+  },
+  title: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15),
+    lineHeight: mvs(22)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  caption: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(12),
+    lineHeight: mvs(16),
+    opacity: 0.7
+  },
+  rightContainer: {
+    alignItems: "flex-end",
+    justifyContent: "center",
+    flexShrink: 0,
+    maxWidth: s(160)
+  },
+  rightText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14)
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    marginRight: 0
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+
+export { ListItem };

package/dist/chunk-LWG526VX.mjs

@@ -0,0 +1,139 @@
+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 { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, { useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
+import { FontAwesome5 } from '@expo/vector-icons';
+
+function ToggleIcon({ pressed, iconName, activeIconName, icon, activeIcon, iconColor, activeIconColor, iconSize, primaryColor, mutedColor }) {
+  const renderProp = (prop) => {
+    if (!prop) return null;
+    if (typeof prop === "function") return prop(pressed);
+    return prop;
+  };
+  if (pressed) {
+    if (activeIconName) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(activeIconName, iconSize, activeIconColor ?? primaryColor));
+    const active = renderProp(activeIcon);
+    if (active) return /* @__PURE__ */ React.createElement(React.Fragment, null, active);
+    return /* @__PURE__ */ React.createElement(FontAwesome5, { name: "check-circle", size: iconSize, color: primaryColor });
+  }
+  if (iconName) return /* @__PURE__ */ React.createElement(React.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? mutedColor));
+  const custom = renderProp(icon);
+  if (custom) return /* @__PURE__ */ React.createElement(React.Fragment, null, custom);
+  return /* @__PURE__ */ React.createElement(FontAwesome5, { name: "circle", size: iconSize, color: mutedColor });
+}
+var sizeStyles = {
+  sm: { paddingHorizontal: s(12), paddingVertical: vs(8), minWidth: s(40), minHeight: vs(40) },
+  md: { paddingHorizontal: s(16), paddingVertical: vs(12), minWidth: s(44), minHeight: vs(44) },
+  lg: { paddingHorizontal: s(20), paddingVertical: vs(14), minWidth: s(48), minHeight: vs(48) }
+};
+var iconSizeMap = { sm: 16, md: 18, lg: 20 };
+function Toggle({
+  pressed = false,
+  onPressedChange,
+  variant = "default",
+  size = "md",
+  label,
+  icon,
+  activeIcon,
+  iconName,
+  activeIconName,
+  iconColor,
+  activeIconColor,
+  disabled,
+  style,
+  accessibilityLabel,
+  ...props
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle: scaleStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled
+  });
+  const progress = useColorTransition(pressed);
+  const inactiveBorder = variant === "outline" ? colors.border : "transparent";
+  const surfaceStyle = useAnimatedStyle(() => ({
+    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorder, colors.primary]),
+    backgroundColor: interpolateColor(progress.value, [0, 1], ["transparent", colors.surfaceStrong])
+  }));
+  const textStyle = useAnimatedStyle(() => ({
+    color: interpolateColor(progress.value, [0, 1], [colors.foreground, colors.primary])
+  }));
+  const iconSize = iconSizeMap[size];
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [scaleStyle, disabled && styles.disabled, style],
+      ...hoverHandlers
+    },
+    /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => {
+          selectionAsync();
+          onPressedChange?.(!pressed);
+        },
+        onPressIn,
+        onPressOut,
+        disabled,
+        activeOpacity: 1,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { selected: pressed, disabled: !!disabled },
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(
+        Animated.View,
+        {
+          style: [
+            styles.base,
+            sizeStyles[size],
+            { borderWidth: 2 },
+            surfaceStyle
+          ]
+        },
+        /* @__PURE__ */ React.createElement(View, { style: styles.inner }, /* @__PURE__ */ React.createElement(
+          ToggleIcon,
+          {
+            pressed,
+            iconName,
+            activeIconName,
+            icon,
+            activeIcon,
+            iconColor,
+            activeIconColor,
+            iconSize,
+            primaryColor: colors.primary,
+            mutedColor: colors.foregroundMuted
+          }
+        ), label ? /* @__PURE__ */ React.createElement(Animated.Text, { style: [styles.label, textStyle], allowFontScaling: true }, label) : null)
+      )
+    )
+  );
+}
+var styles = StyleSheet.create({
+  base: {
+    borderRadius: ms(8)
+  },
+  inner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: s(8)
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  }
+});
+
+export { Toggle };

package/dist/chunk-MN7OG7IY.mjs

@@ -0,0 +1,96 @@
+import { Button } from './chunk-CRYBX2CM.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function EmptyState({ icon, iconName, iconColor, title, description, action, actionLabel, onAction, size = "default", style }) {
+  const { colors } = useTheme();
+  const isCompact = size === "compact";
+  const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted) : icon;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        isCompact && styles.containerCompact,
+        { borderColor: colors.border },
+        style
+      ]
+    },
+    effectiveIcon ? /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.iconWrapper,
+          isCompact && styles.iconWrapperCompact,
+          { backgroundColor: colors.surface }
+        ]
+      },
+      effectiveIcon
+    ) : null,
+    /* @__PURE__ */ React.createElement(View, { style: styles.textWrapper }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.title, isCompact && styles.titleCompact, { color: colors.foreground }],
+        allowFontScaling: true
+      },
+      title
+    ), description && !isCompact ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null),
+    !isCompact && (action ? /* @__PURE__ */ React.createElement(View, { style: styles.action }, action) : actionLabel && onAction ? /* @__PURE__ */ React.createElement(View, { style: styles.action }, /* @__PURE__ */ React.createElement(Button, { label: actionLabel, variant: "primary", onPress: onAction })) : null)
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderRadius: ms(12)
+  },
+  containerCompact: {},
+  iconWrapper: {
+    width: s(80),
+    height: s(80),
+    borderRadius: ms(20),
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: s(32)
+  },
+  iconWrapperCompact: {
+    width: s(56),
+    height: s(56),
+    borderRadius: ms(14),
+    marginTop: s(20)
+  },
+  textWrapper: {
+    alignItems: "center",
+    gap: vs(8),
+    maxWidth: s(320),
+    paddingHorizontal: s(32),
+    marginTop: vs(16)
+  },
+  title: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(18),
+    textAlign: "center"
+  },
+  titleCompact: {
+    fontSize: ms(15),
+    marginTop: vs(10)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20),
+    textAlign: "center"
+  },
+  action: {
+    marginTop: vs(8),
+    marginBottom: s(32),
+    paddingHorizontal: s(32)
+  }
+});
+
+export { EmptyState };

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

@@ -0,0 +1,90 @@
+import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useRef } from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import RNSlider from '@react-native-community/slider';
+
+function Slider({
+  value = 0,
+  minimumValue = 0,
+  maximumValue = 1,
+  step = 0,
+  onValueChange,
+  onSlidingComplete,
+  label,
+  showValue = false,
+  formatValue = (v) => v.toFixed(2),
+  accessibilityLabel,
+  disabled,
+  style
+}) {
+  const { colors } = useTheme();
+  const lastSteppedValue = useRef(value);
+  const handleValueChange = (v) => {
+    if (step && v !== lastSteppedValue.current) {
+      lastSteppedValue.current = v;
+      selectionAsync();
+    }
+    onValueChange?.(v);
+  };
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.wrapper, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityValue: {
+        min: minimumValue,
+        max: maximumValue,
+        now: value,
+        text: formatValue(value)
+      }
+    },
+    label || showValue ? /* @__PURE__ */ React.createElement(View, { style: styles.header }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React.createElement(Text, { style: [styles.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue(value)) : null) : null,
+    /* @__PURE__ */ React.createElement(View, { style: disabled ? styles.disabled : void 0 }, /* @__PURE__ */ React.createElement(
+      RNSlider,
+      {
+        value,
+        minimumValue,
+        maximumValue,
+        step: step || 0,
+        disabled,
+        onValueChange: handleValueChange,
+        onSlidingComplete,
+        minimumTrackTintColor: colors.primary,
+        maximumTrackTintColor: colors.surface,
+        thumbTintColor: colors.primary,
+        style: styles.slider,
+        accessibilityLabel
+      }
+    ))
+  );
+}
+var styles = StyleSheet.create({
+  wrapper: {
+    gap: vs(8)
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(15)
+  },
+  valueText: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  slider: {
+    width: "100%",
+    height: vs(60)
+  },
+  disabled: {
+    opacity: 0.45
+  }
+});
+
+export { Slider };

package/dist/chunk-QCNARS3X.mjs

@@ -0,0 +1,46 @@
+import { PRESS_SCALE, SPRINGS } from './chunk-5IKW3VNC.mjs';
+import { useState, useCallback } from 'react';
+import { Platform } from 'react-native';
+import { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+
+function useHover() {
+  const [hovered, setHovered] = useState(false);
+  const onMouseEnter = useCallback(() => setHovered(true), []);
+  const onMouseLeave = useCallback(() => setHovered(false), []);
+  if (Platform.OS !== "web") {
+    return { hovered: false, hoverHandlers: {} };
+  }
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
+}
+function usePressScale({
+  pressScale = PRESS_SCALE.button,
+  hoverScale = 1.02,
+  pressInSpring = SPRINGS.pressIn,
+  pressOutSpring = SPRINGS.pressOut,
+  disabled = false
+} = {}) {
+  const scale = useSharedValue(1);
+  const { hovered, hoverHandlers } = useHover();
+  const onPressIn = useCallback(() => {
+    if (disabled) return;
+    scale.value = withSpring(pressScale, pressInSpring);
+  }, [disabled, pressScale, pressInSpring, scale]);
+  const onPressOut = useCallback(() => {
+    if (disabled) return;
+    scale.value = withSpring(1, pressOutSpring);
+  }, [disabled, pressOutSpring, scale]);
+  const hoverActive = Platform.OS === "web" && hovered && hoverScale !== 1 && !disabled;
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: scale.value * (hoverActive ? hoverScale : 1) }
+    ]
+  }));
+  return {
+    animatedStyle,
+    onPressIn,
+    onPressOut,
+    hoverHandlers
+  };
+}
+
+export { useHover, usePressScale };