@retray-dev/ui-kit 6.1.0 → 7.0.1

package/dist/chunk-QXGYKWI7.mjs

@@ -0,0 +1,134 @@
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { EASINGS, TIMINGS } from './chunk-5IKW3VNC.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, ms } 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;
+      }
+    },
+    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%"
+  }
+});
+
+export { Accordion };

package/dist/chunk-QY3X2UYR.mjs

@@ -0,0 +1,191 @@
+// src/tokens.ts
+var SPACING = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  base: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  section: 64
+};
+var ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  "2xl": 32
+};
+var RADIUS = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 14,
+  lg: 20,
+  xl: 32,
+  full: 9999
+};
+var SHADOWS = {
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.16,
+    shadowRadius: 16,
+    elevation: 10
+  },
+  xl: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.24,
+    shadowRadius: 24,
+    elevation: 18
+  }
+};
+var BREAKPOINTS = {
+  wide: 700
+};
+var TYPOGRAPHY = {
+  "display-hero": {
+    fontFamily: "Sohne-Bold",
+    fontSize: 64,
+    fontWeight: "700",
+    lineHeight: 70,
+    letterSpacing: -1
+  },
+  "display-xl": {
+    fontFamily: "Sohne-Bold",
+    fontSize: 28,
+    fontWeight: "700",
+    lineHeight: 40,
+    letterSpacing: 0
+  },
+  // AUDIT FIX: was 22px/500 — raised to 24px/600; removes weight inversion vs display-md
+  "display-lg": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 24,
+    fontWeight: "600",
+    lineHeight: 32,
+    letterSpacing: -0.3
+  },
+  // AUDIT FIX: was 21px/700 — lowered to 20px/600; weight normalised, 4px gap preserved
+  "display-md": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 20,
+    fontWeight: "600",
+    lineHeight: 28,
+    letterSpacing: 0
+  },
+  "display-sm": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 18,
+    fontWeight: "600",
+    lineHeight: 24,
+    letterSpacing: -0.18
+  },
+  // AUDIT FIX: was 16px — raised to 17px so title-md > title-sm is size-visible
+  "title-md": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 17,
+    fontWeight: "600",
+    lineHeight: 22,
+    letterSpacing: 0
+  },
+  // AUDIT FIX: was 16px — lowered to 15px; now distinct from title-md
+  "title-sm": {
+    fontFamily: "Sohne-Medium",
+    fontSize: 15,
+    fontWeight: "500",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  "body-md": {
+    fontFamily: "Sohne-Regular",
+    fontSize: 16,
+    fontWeight: "400",
+    lineHeight: 24,
+    letterSpacing: 0
+  },
+  "body-sm": {
+    fontFamily: "Sohne-Regular",
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  "caption": {
+    fontFamily: "Sohne-Medium",
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 18,
+    letterSpacing: 0
+  },
+  "caption-sm": {
+    fontFamily: "Sohne-Regular",
+    fontSize: 13,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  "badge-text": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0
+  },
+  // AUDIT FIX: added badge-text-md so Badge md size has a canonical token
+  "badge-text-md": {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    fontWeight: "600",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  "micro-label": {
+    fontFamily: "Sohne-Bold",
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  // AUDIT FIX: was 10px/0.8 letterSpacing — raised to 11px/0.6; minimum mobile readability
+  "uppercase-tag": {
+    fontFamily: "Sohne-Bold",
+    fontSize: 11,
+    fontWeight: "700",
+    lineHeight: 14,
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  },
+  "button-lg": {
+    fontFamily: "Sohne-Medium",
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 22,
+    letterSpacing: 0
+  },
+  "button-sm": {
+    fontFamily: "Sohne-Medium",
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 18,
+    letterSpacing: 0
+  }
+};
+
+export { BREAKPOINTS, ICON_SIZES, RADIUS, SHADOWS, SPACING, TYPOGRAPHY };

package/dist/chunk-RKLHUDZS.mjs

@@ -0,0 +1,92 @@
+import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import { Entypo } from '@expo/vector-icons';
+
+var MONTH_NAMES = {
+  en: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
+  es: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
+  pt: ["janeiro", "fevereiro", "mar\xE7o", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"],
+  fr: ["janvier", "f\xE9vrier", "mars", "avril", "mai", "juin", "juillet", "ao\xFBt", "septembre", "octobre", "novembre", "d\xE9cembre"]
+};
+function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
+  const { colors } = useTheme();
+  const getLabel = () => {
+    if (formatLabel) return formatLabel(value);
+    const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en;
+    return `${names[value.month - 1]} ${value.year}`;
+  };
+  const handlePrev = () => {
+    selectionAsync();
+    if (value.month === 1) {
+      onChange({ month: 12, year: value.year - 1 });
+    } else {
+      onChange({ month: value.month - 1, year: value.year });
+    }
+  };
+  const handleNext = () => {
+    selectionAsync();
+    if (value.month === 12) {
+      onChange({ month: 1, year: value.year + 1 });
+    } else {
+      onChange({ month: value.month + 1, year: value.year });
+    }
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: styles.arrow,
+      onPress: handlePrev,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Previous month",
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+    },
+    /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
+  ), /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.label, { color: colors.foreground }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    getLabel()
+  ), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: styles.arrow,
+      onPress: handleNext,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Next month",
+      hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
+    },
+    /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
+  ));
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  arrow: {
+    width: s(44),
+    height: s(44),
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(17),
+    lineHeight: mvs(24),
+    textAlign: "center",
+    minWidth: s(160)
+  }
+});
+
+export { MonthPicker };

package/dist/chunk-RMMK64W5.mjs

@@ -0,0 +1,54 @@
+import { usePressScale } from './chunk-QCNARS3X.mjs';
+import { impactLight } from './chunk-RTC3CFXF.mjs';
+import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+function Pressable({
+  children,
+  onPress,
+  pressScale = PRESS_SCALE.card,
+  haptics = true,
+  style,
+  disabled,
+  hoverScale = 1.02,
+  ...touchableProps
+}) {
+  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
+    pressScale,
+    hoverScale,
+    pressInSpring: SPRINGS.surfacePressIn,
+    pressOutSpring: SPRINGS.surfacePressOut,
+    disabled
+  });
+  const handlePress = () => {
+    if (disabled || !onPress) return;
+    if (haptics) impactLight();
+    onPress();
+  };
+  return /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [animatedStyle, style],
+      ...Platform.OS === "web" ? hoverHandlers : {}
+    },
+    /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePress,
+        onPressIn,
+        onPressOut,
+        activeOpacity: 1,
+        disabled,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: !!disabled },
+        ...touchableProps
+      },
+      children
+    )
+  );
+}
+
+export { Pressable };

package/dist/chunk-RR2VQLKE.mjs

@@ -0,0 +1,190 @@
+import { usePressScale } from './chunk-QCNARS3X.mjs';
+import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
+import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
+
+function TabTrigger({
+  tab,
+  isActive,
+  onPress,
+  onLayout,
+  variant
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button
+  });
+  const isUnderline = variant === "underline";
+  return /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles.trigger,
+        isUnderline && styles.triggerUnderline,
+        isUnderline && isActive && { borderBottomColor: colors.primary }
+      ],
+      onPress,
+      onPressIn,
+      onPressOut,
+      onLayout,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "tab",
+      accessibilityState: { selected: isActive },
+      accessibilityLabel: tab.label
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: animatedStyle }, /* @__PURE__ */ React.createElement(View, { style: styles.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.triggerLabel,
+          // AUDIT FIX: active state now only changes color, never font metrics.
+          // Previously: inactive=Regular, active=Medium (pill) or SemiBold+fontSize14 (underline)
+          // The weight/size change caused measurable layout reflow every tab switch.
+          // Solution: all labels render at SemiBold always; active = foreground, inactive = foregroundMuted.
+          { color: isActive ? colors.foreground : colors.foregroundMuted }
+        ],
+        allowFontScaling: true
+      },
+      tab.label
+    )))
+  );
+}
+function Tabs({ tabs, variant = "pill", value, onValueChange, children, style }) {
+  const [internal, setInternal] = useState(tabs[0]?.value ?? "");
+  const { colors } = useTheme();
+  const active = value ?? internal;
+  const tabLayouts = useRef({});
+  const pillX = useSharedValue(0);
+  const pillWidth = useSharedValue(0);
+  const initialised = useRef(false);
+  const animatePill = useCallback((tabValue, animate) => {
+    const layout = tabLayouts.current[tabValue];
+    if (!layout) return;
+    if (animate) {
+      pillX.value = withSpring(layout.x, SPRINGS.glide);
+      pillWidth.value = withSpring(layout.width, SPRINGS.glide);
+    } else {
+      pillX.value = layout.x;
+      pillWidth.value = layout.width;
+    }
+  }, [pillX, pillWidth]);
+  useEffect(() => {
+    if (initialised.current) animatePill(active, true);
+  }, [active, animatePill]);
+  const handlePress = (v) => {
+    selectionAsync();
+    if (!value) setInternal(v);
+    onValueChange?.(v);
+  };
+  const pillAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: pillX.value }],
+    width: pillWidth.value
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        variant === "pill" ? [styles.list, { backgroundColor: colors.surface }] : styles.listUnderline
+      ],
+      accessibilityRole: "tablist"
+    },
+    variant === "pill" && /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [
+          styles.pill,
+          {
+            backgroundColor: colors.background,
+            position: "absolute",
+            top: 4,
+            bottom: 4,
+            left: 0,
+            borderRadius: 8,
+            shadowColor: "#000",
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.08,
+            shadowRadius: 2,
+            elevation: 2
+          },
+          pillAnimatedStyle
+        ]
+      }
+    ),
+    tabs.map((tab) => /* @__PURE__ */ React.createElement(
+      TabTrigger,
+      {
+        key: tab.value,
+        tab,
+        isActive: tab.value === active,
+        onPress: () => handlePress(tab.value),
+        variant,
+        onLayout: (e) => {
+          const { x, width } = e.nativeEvent.layout;
+          tabLayouts.current[tab.value] = { x, width };
+          if (tab.value === active) {
+            animatePill(tab.value, false);
+            initialised.current = true;
+          }
+        }
+      }
+    ))
+  ), children);
+}
+function TabsContent({ value, activeValue, children, style }) {
+  if (value !== activeValue) return null;
+  return /* @__PURE__ */ React.createElement(View, { style, accessibilityRole: "none" }, children);
+}
+var styles = StyleSheet.create({
+  list: {
+    flexDirection: "row",
+    borderRadius: 12,
+    padding: s(4),
+    gap: s(4)
+  },
+  listUnderline: {
+    flexDirection: "row",
+    // AUDIT FIX: was missing borderBottomColor — the 1px hairline would render
+    // as transparent on some platforms. Explicit token reference ensures visibility.
+    borderBottomWidth: 1
+  },
+  pill: {},
+  trigger: {
+    flex: 1,
+    paddingVertical: vs(7),
+    paddingHorizontal: s(10),
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1
+  },
+  triggerUnderline: {
+    flex: 0,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: "transparent"
+  },
+  triggerInner: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: s(4)
+  },
+  // AUDIT FIX: was Sohne-Regular at rest, Sohne-Medium/SemiBold when active.
+  // Font-weight changes at runtime cause advance-width shifts → the tab bar would
+  // visibly jump/reflow on every selection. Now always SemiBold; active state
+  // is communicated by color alone (foreground vs foregroundMuted). The pill
+  // indicator provides additional active signal without text layout side-effects.
+  triggerLabel: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(13)
+  }
+});
+
+export { Tabs, TabsContent };

package/dist/chunk-RTC3CFXF.mjs

@@ -0,0 +1,29 @@
+import { Platform } from 'react-native';
+
+// src/utils/haptics.ts
+var _haptics = null;
+async function getHaptics() {
+  if (Platform.OS === "web") return null;
+  if (!_haptics) {
+    _haptics = await import('expo-haptics');
+  }
+  return _haptics;
+}
+function selectionAsync() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.selectionAsync());
+}
+function impactLight() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Light));
+}
+function impactMedium() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium));
+}
+function notificationSuccess() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => h?.notificationAsync(h.NotificationFeedbackType.Success));
+}
+
+export { impactLight, impactMedium, notificationSuccess, selectionAsync };