@retray-dev/ui-kit 7.0.1 → 9.0.0

package/src/utils/haptics.ts

@@ -1,38 +1,240 @@
-import { Platform } from 'react-native'
+/**
+ * Haptic feedback utilities using expo-haptics.
+ *
+ * Uses expo-haptics which works with both Expo Go and development builds.
+ * react-native-pulsar support is optional for dev builds with native modules.
+ *
+ * All functions are web-safe (no-op on web platform).
+ */
+import { Platform, NativeModules } from 'react-native'
 
+// ─── expo-haptics (primary) ───────────────────────────────────────────────────
 type HapticsModule = typeof import('expo-haptics')
-
 let _haptics: HapticsModule | null = null
+let _hapticsLoaded = false
 
 async function getHaptics(): Promise<HapticsModule | null> {
   if (Platform.OS === 'web') return null
-  if (!_haptics) {
-    _haptics = await import('expo-haptics')
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true
+    try {
+      _haptics = await import('expo-haptics')
+    } catch {
+      _haptics = null
+    }
   }
   return _haptics
 }
 
+// ─── Pulsar (optional for dev builds) ─────────────────────────────────────────
+// Only available in development builds with native modules installed.
+// Gracefully falls back to expo-haptics if not available.
+type PulsarModule = typeof import('react-native-pulsar')
+let _pulsar: PulsarModule | null = null
+let _pulsarChecked = false
+let _pulsarAvailable = false
+
+function isPulsarNativeRegistered(): boolean {
+  // react-native-pulsar's NativeRNPulsar.ts calls
+  // TurboModuleRegistry.getEnforcing('RNPulsar') at module-eval time. When the
+  // native binary is absent (e.g. Expo Go), requiring the package throws during
+  // Metro module eval — and that throw is surfaced by RN's global error handler
+  // (red screen) even when wrapped in try/catch, because guardedLoadModule
+  // reports it before rethrowing. So we must confirm the native module is
+  // actually registered BEFORE requiring the JS wrapper.
+  //
+  // TurboModuleRegistry.get() returns a truthy proxy even for unregistered
+  // modules (false positive), so it can't be trusted. Instead we probe the low
+  // level: the new-arch turbo proxy returns null for unregistered names, and
+  // the old-arch NativeModules map omits them. A direct lookup throws nothing —
+  // unlike a top-level import — so any failure is caught safely here.
+  try {
+    const g = globalThis as {
+      __turboModuleProxy?: (name: string) => unknown
+    }
+    if (typeof g.__turboModuleProxy === 'function') {
+      return g.__turboModuleProxy('RNPulsar') != null
+    }
+    return NativeModules?.RNPulsar != null
+  } catch {
+    return false
+  }
+}
+
+function getPulsar(): PulsarModule | null {
+  if (Platform.OS === 'web') return null
+  if (!_pulsarChecked) {
+    _pulsarChecked = true
+    try {
+      // Only require the package when its native module is registered —
+      // otherwise the require would red-screen the app (see above).
+      if (isPulsarNativeRegistered()) {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        _pulsar = require('react-native-pulsar') as PulsarModule
+        _pulsarAvailable = true
+      }
+    } catch {
+      _pulsar = null
+      _pulsarAvailable = false
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+/**
+ * Light selection feedback — checkboxes, switches, toggles, pickers.
+ */
 export function selectionAsync(): void {
   if (Platform.OS === 'web') return
-  getHaptics().then(h => h?.selectionAsync())
+  // Try expo-haptics first (always available in Expo Go)
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync()
+    } else {
+      // Fallback to Pulsar if available
+      getPulsar()?.Presets.System.selection()
+    }
+  })
 }
 
+/**
+ * Light impact — cards, surfaces, light interactions.
+ */
 export function impactLight(): void {
   if (Platform.OS === 'web') return
-  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Light))
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Light)
+    } else {
+      getPulsar()?.Presets.System.impactLight()
+    }
+  })
 }
 
+/**
+ * Medium impact — buttons, primary actions.
+ */
 export function impactMedium(): void {
   if (Platform.OS === 'web') return
-  getHaptics().then(h => h?.impactAsync(h.ImpactFeedbackStyle.Medium))
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Medium)
+    } else {
+      getPulsar()?.Presets.System.impactMedium()
+    }
+  })
+}
+
+/**
+ * Heavy impact — confirmations, important actions.
+ */
+export function impactHeavy(): void {
+  if (Platform.OS === 'web') return
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Heavy)
+    } else {
+      getPulsar()?.Presets.System.impactHeavy()
+    }
+  })
 }
 
+/**
+ * Success notification — confirmations, completed actions.
+ */
 export function notificationSuccess(): void {
   if (Platform.OS === 'web') return
-  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Success))
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Success)
+    } else {
+      getPulsar()?.Presets.System.notificationSuccess()
+    }
+  })
 }
 
+/**
+ * Error notification — failed actions, errors.
+ */
 export function notificationError(): void {
   if (Platform.OS === 'web') return
-  getHaptics().then(h => h?.notificationAsync(h.NotificationFeedbackType.Error))
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Error)
+    } else {
+      getPulsar()?.Presets.System.notificationError()
+    }
+  })
+}
+
+/**
+ * Warning notification — caution states.
+ */
+export function notificationWarning(): void {
+  if (Platform.OS === 'web') return
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Warning)
+    } else {
+      getPulsar()?.Presets.System.notificationWarning()
+    }
+  })
+}
+
+// ─── Rich Pulsar Presets (enhanced feedback) ──────────────────────────────────
+
+/**
+ * Rich haptic presets from Pulsar — enhanced feedback for special interactions.
+ * Falls back to basic expo-haptics on Expo Go or unsupported devices.
+ */
+export const richHaptics = {
+  /** Hammer strike — strong confirmation feedback. */
+  hammer: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.hammer()
+    else impactHeavy()
+  },
+
+  /** Pulse — rhythmic feedback for toggles or state changes. */
+  pulse: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.pulse()
+    else selectionAsync()
+  },
+
+  /** Buzz — continuous vibration for attention. */
+  buzz: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.buzz()
+    else impactMedium()
+  },
+
+  /** Flick — crisp click feedback. */
+  flick: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.flick()
+    else selectionAsync()
+  },
+
+  /** Soft — gentle, subtle feedback. */
+  soft: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.System.impactSoft()
+    else impactLight()
+  },
+
+  /** Rigid — firm, solid feedback. */
+  rigid: (): void => {
+    if (Platform.OS === 'web') return
+    const p = getPulsar()
+    if (p) p.Presets.System.impactRigid()
+    else impactMedium()
+  },
 }

package/src/utils/pressable.ts

@@ -0,0 +1,66 @@
+/**
+ * Pressto-based pressable primitives for the UI Kit.
+ *
+ * Pressto provides main-thread pressable animations built on react-native-gesture-handler
+ * and react-native-reanimated. Animations run at 60fps with zero JS overhead.
+ *
+ * These custom pressables match the UI Kit's design language:
+ * - Button: 0.95 scale (tight, premium press)
+ * - Card: 0.98 scale (subtle surface response)
+ * - Row: 0.97 scale (list items, menu items)
+ * - Chip: 0.94 scale (compact, snappy)
+ */
+import { createAnimatedPressable } from 'pressto'
+import { PRESS_SCALE } from './animations'
+
+/**
+ * Button pressable — tight 0.95 scale for primary actions.
+ * Use for: Button, IconButton, Toggle, Checkbox triggers.
+ */
+export const PressableButton = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Card pressable — subtle 0.98 scale for surfaces.
+ * Use for: Card (interactive), MediaCard, Pressable component.
+ */
+export const PressableCard = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.card) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Row pressable — balanced 0.97 scale for list interactions.
+ * Use for: ListItem, MenuItem, Accordion triggers.
+ */
+export const PressableRow = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.row) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Chip pressable — snappy 0.94 scale for compact elements.
+ * Use for: Chip, small toggleable items.
+ */
+export const PressableChip = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.chip) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Tab pressable — same as button for tab triggers.
+ */
+export const PressableTab = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress
+  return { transform: [{ scale }] }
+})
+
+// Re-export pressto components for direct use
+export { PressableScale, PressableOpacity, PressablesConfig } from 'pressto'

package/dist/chunk-76PFOSM2.mjs

@@ -1,41 +0,0 @@
-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-DITNP6PL.mjs

@@ -1,106 +0,0 @@
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { SPRINGS, EASINGS, TIMINGS } from './chunk-5IKW3VNC.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { s } from './chunk-2CE3TQVY.mjs';
-import React, { useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import Animated, { useSharedValue, withSpring, useAnimatedStyle, interpolateColor, withTiming } from 'react-native-reanimated';
-import { Feather } from '@expo/vector-icons';
-
-var TRACK_WIDTH = s(52);
-var TRACK_HEIGHT = s(30);
-var THUMB_SIZE = s(24);
-var THUMB_OFFSET = s(3);
-var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
-var ICON_SIZE = s(13);
-function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
-  const { colors } = useTheme();
-  const progress = useSharedValue(checked ? 1 : 0);
-  useEffect(() => {
-    progress.value = withSpring(checked ? 1 : 0, SPRINGS.elastic);
-  }, [checked, progress]);
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: progress.value * THUMB_TRAVEL }]
-  }));
-  const trackStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.surfaceStrong, colors.primary]
-    )
-  }));
-  const trackBorderStyle = useAnimatedStyle(() => ({
-    borderWidth: 1.5,
-    borderColor: interpolateColor(
-      progress.value,
-      [0, 1],
-      [colors.border, "transparent"]
-    )
-  }));
-  const checkIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
-  }));
-  const crossIconStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 0 : 1, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
-  }));
-  return /* @__PURE__ */ React.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
-    {
-      onPress: () => {
-        selectionAsync();
-        onCheckedChange?.(!checked);
-      },
-      disabled,
-      activeOpacity: 0.8,
-      touchSoundDisabled: true,
-      accessibilityRole: "switch",
-      accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled },
-      style: styles.touchable
-    },
-    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.track, trackStyle] }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.trackBorder, trackBorderStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [styles.thumb, { backgroundColor: colors.primaryForeground }, thumbStyle]
-      },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.iconWrapper, checkIconStyle] }, /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
-      /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.iconWrapper, crossIconStyle] }, /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
-    ))
-  ));
-}
-var styles = StyleSheet.create({
-  touchable: {
-    alignSelf: "flex-start"
-  },
-  track: {
-    width: TRACK_WIDTH,
-    height: TRACK_HEIGHT,
-    borderRadius: TRACK_HEIGHT / 2
-  },
-  trackBorder: {
-    ...StyleSheet.absoluteFillObject,
-    borderRadius: TRACK_HEIGHT / 2
-  },
-  thumb: {
-    position: "absolute",
-    top: THUMB_OFFSET,
-    left: THUMB_OFFSET,
-    width: THUMB_SIZE,
-    height: THUMB_SIZE,
-    borderRadius: THUMB_SIZE / 2,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.15,
-    shadowRadius: 2,
-    elevation: 2,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconWrapper: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
-
-export { Switch };

package/dist/chunk-JBLL7U3U.mjs

@@ -1,64 +0,0 @@
-import { TIMINGS } from './chunk-5IKW3VNC.mjs';
-import { useTheme } from './chunk-SOYNZDVY.mjs';
-import { s } from './chunk-2CE3TQVY.mjs';
-import React, { useState, useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
-import Animated, { useSharedValue, withRepeat, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
-import { LinearGradient } from 'expo-linear-gradient';
-
-function Skeleton({
-  width = "100%",
-  height = 16,
-  borderRadius = 6,
-  preset = "base",
-  diameter = 40,
-  style
-}) {
-  const { colors, colorScheme } = useTheme();
-  const shimmer = useSharedValue(0);
-  const [containerWidth, setContainerWidth] = useState(300);
-  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
-  useEffect(() => {
-    shimmer.value = withRepeat(
-      withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
-      -1,
-      false
-    );
-  }, [shimmer]);
-  const shimmerStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
-  }));
-  const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
-  const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
-  const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
-  return /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.base,
-        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
-        style
-      ],
-      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
-      accessibilityRole: "progressbar",
-      accessibilityLabel: "Loading",
-      accessibilityState: { busy: true }
-    },
-    /* @__PURE__ */ React.createElement(Animated.View, { style: [StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React.createElement(
-      LinearGradient,
-      {
-        colors: ["transparent", shimmerHighlight, "transparent"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 0 },
-        style: StyleSheet.absoluteFill
-      }
-    ))
-  );
-}
-var styles = StyleSheet.create({
-  base: {
-    overflow: "hidden"
-  }
-});
-
-export { Skeleton };

package/dist/chunk-LG4DO3DK.mjs

@@ -1,174 +0,0 @@
-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 };