@retray-dev/ui-kit 7.0.1 → 9.0.0

package/dist/chunk-AZJF2BLK.mjs

@@ -0,0 +1,115 @@
+import { IconButton } from './chunk-3U4SSNWP.mjs';
+import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, useWindowDimensions, View, Text } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function AppHeader({
+  title,
+  subtitle,
+  onBack,
+  backIconName = "chevron-left",
+  left,
+  right,
+  titleAlign = "auto",
+  bordered = true,
+  withSafeArea = true,
+  backgroundColor,
+  style
+}) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const isWide = width >= BREAKPOINTS.wide;
+  const centered = titleAlign === "center" || titleAlign === "auto" && isWide;
+  const leftNode = left ?? (onBack ? /* @__PURE__ */ React.createElement(
+    IconButton,
+    {
+      iconName: backIconName,
+      variant: "text",
+      size: "md",
+      onPress: onBack,
+      accessibilityLabel: "Go back"
+    }
+  ) : null);
+  const titleBlock = /* @__PURE__ */ React.createElement(View, { style: [styles.titleBlock, centered && styles.titleBlockCentered], pointerEvents: "none" }, title ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.title, { color: colors.foreground }, centered && styles.textCentered],
+      numberOfLines: 1,
+      allowFontScaling: true,
+      accessibilityRole: "header"
+    },
+    title
+  ) : null, subtitle ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.subtitle, { color: colors.foregroundMuted }, centered && styles.textCentered],
+      numberOfLines: 1,
+      allowFontScaling: true
+    },
+    subtitle
+  ) : null);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        {
+          backgroundColor: backgroundColor ?? colors.background,
+          paddingTop: withSafeArea ? insets.top : 0,
+          borderBottomWidth: bordered ? StyleSheet.hairlineWidth : 0,
+          borderBottomColor: colors.border
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.bar }, centered ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: StyleSheet.absoluteFill }, titleBlock), /* @__PURE__ */ React.createElement(View, { style: styles.side }, leftNode), /* @__PURE__ */ React.createElement(View, { style: [styles.side, styles.sideRight] }, right)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { style: styles.side }, leftNode), titleBlock, /* @__PURE__ */ React.createElement(View, { style: [styles.side, styles.sideRight] }, right)))
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  bar: {
+    minHeight: vs(48),
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: s(8)
+  },
+  side: {
+    minWidth: s(44),
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  },
+  sideRight: {
+    justifyContent: "flex-end"
+  },
+  titleBlock: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: s(8),
+    gap: vs(1)
+  },
+  titleBlockCentered: {
+    alignItems: "center"
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    lineHeight: mvs(24)
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(16)
+  },
+  textCentered: {
+    textAlign: "center"
+  }
+});
+
+export { AppHeader };

package/dist/chunk-BNP626TY.mjs

@@ -0,0 +1,159 @@
+import { PressableRow } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+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 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(". ");
+  const content = /* @__PURE__ */ React.createElement(React.Fragment, null, 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);
+  if (onPress) {
+    return /* @__PURE__ */ React.createElement(View, { style: disabled && styles.disabled }, /* @__PURE__ */ React.createElement(
+      PressableRow,
+      {
+        style: [styles.container, cardStyle, style],
+        onPress: handlePress,
+        enabled: !disabled,
+        rippleColor: "transparent",
+        touchSoundDisabled: true,
+        activateOnHover: true,
+        accessibilityRole: "button",
+        accessibilityLabel: a11yLabel,
+        accessibilityState: { disabled: !!disabled }
+      },
+      content
+    ), showSeparator ? /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [disabled && styles.disabled] }, /* @__PURE__ */ React.createElement(View, { style: [styles.container, cardStyle, style] }, content), 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-5IKW3VNC.mjs → chunk-DVK4G2GT.mjs}

@@ -33,6 +33,22 @@ var EASINGS = {
   /** Quick ease-in for collapsing. */
   collapse: Easing.in(Easing.ease)
 };
+var COLOR_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var OPACITY_TRANSITION = {
+  type: "timing",
+  duration: TIMINGS.state.duration,
+  easing: [0.2, 0, 0, 1]
+};
+var SPRING_ELASTIC = {
+  type: "spring",
+  stiffness: 320,
+  damping: 22,
+  mass: 0.7
+};
 var PRESS_SCALE = {
   button: 0.95,
   card: 0.98,
@@ -40,4 +56,4 @@ var PRESS_SCALE = {
   chip: 0.94
 };
 
-export { EASINGS, PRESS_SCALE, SPRINGS, TIMINGS };
+export { COLOR_TRANSITION, EASINGS, OPACITY_TRANSITION, PRESS_SCALE, SPRINGS, SPRING_ELASTIC, TIMINGS };

package/dist/{chunk-6LQYY7HC.mjs → chunk-EH745HE5.mjs}

@@ -1,6 +1,6 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
+import { useColorTransition } from './chunk-26BCI223.mjs';
+import { TIMINGS } from './chunk-DVK4G2GT.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';

package/dist/chunk-EJ7ZPXOH.mjs

@@ -0,0 +1,163 @@
+import { __require } from './chunk-Y6FXYEAI.mjs';
+import { Platform, NativeModules } from 'react-native';
+
+var _haptics = null;
+var _hapticsLoaded = false;
+async function getHaptics() {
+  if (Platform.OS === "web") return null;
+  if (!_hapticsLoaded) {
+    _hapticsLoaded = true;
+    try {
+      _haptics = await import('expo-haptics');
+    } catch {
+      _haptics = null;
+    }
+  }
+  return _haptics;
+}
+var _pulsar = null;
+var _pulsarChecked = false;
+var _pulsarAvailable = false;
+function isPulsarNativeRegistered() {
+  try {
+    const g = globalThis;
+    if (typeof g.__turboModuleProxy === "function") {
+      return g.__turboModuleProxy("RNPulsar") != null;
+    }
+    return NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (Platform.OS === "web") return null;
+  if (!_pulsarChecked) {
+    _pulsarChecked = true;
+    try {
+      if (isPulsarNativeRegistered()) {
+        _pulsar = __require("react-native-pulsar");
+        _pulsarAvailable = true;
+      }
+    } catch {
+      _pulsar = null;
+      _pulsarAvailable = false;
+    }
+  }
+  return _pulsarAvailable ? _pulsar : null;
+}
+function selectionAsync() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.selectionAsync();
+    } else {
+      getPulsar()?.Presets.System.selection();
+    }
+  });
+}
+function impactLight() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Light);
+    } else {
+      getPulsar()?.Presets.System.impactLight();
+    }
+  });
+}
+function impactMedium() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Medium);
+    } else {
+      getPulsar()?.Presets.System.impactMedium();
+    }
+  });
+}
+function impactHeavy() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Heavy);
+    } else {
+      getPulsar()?.Presets.System.impactHeavy();
+    }
+  });
+}
+function notificationSuccess() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Success);
+    } else {
+      getPulsar()?.Presets.System.notificationSuccess();
+    }
+  });
+}
+function notificationError() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Error);
+    } else {
+      getPulsar()?.Presets.System.notificationError();
+    }
+  });
+}
+function notificationWarning() {
+  if (Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.notificationAsync(h.NotificationFeedbackType.Warning);
+    } else {
+      getPulsar()?.Presets.System.notificationWarning();
+    }
+  });
+}
+var richHaptics = {
+  /** Hammer strike — strong confirmation feedback. */
+  hammer: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.hammer();
+    else impactHeavy();
+  },
+  /** Pulse — rhythmic feedback for toggles or state changes. */
+  pulse: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.pulse();
+    else selectionAsync();
+  },
+  /** Buzz — continuous vibration for attention. */
+  buzz: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.buzz();
+    else impactMedium();
+  },
+  /** Flick — crisp click feedback. */
+  flick: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.flick();
+    else selectionAsync();
+  },
+  /** Soft — gentle, subtle feedback. */
+  soft: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.System.impactSoft();
+    else impactLight();
+  },
+  /** Rigid — firm, solid feedback. */
+  rigid: () => {
+    if (Platform.OS === "web") return;
+    const p = getPulsar();
+    if (p) p.Presets.System.impactRigid();
+    else impactMedium();
+  }
+};
+
+export { impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, richHaptics, selectionAsync };

package/dist/{chunk-RKLHUDZS.mjs → chunk-GD6KXMG5.mjs}

@@ -1,4 +1,4 @@
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
@@ -11,38 +11,47 @@ var MONTH_NAMES = {
   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 }) {
+function dateToMonthPickerValue(date) {
+  return { month: date.getMonth() + 1, year: date.getFullYear() };
+}
+function monthPickerValueToDate(value) {
+  return new Date(value.year, value.month - 1, 1);
+}
+var toIndex = (v) => v.year * 12 + (v.month - 1);
+var fromIndex = (i) => ({ year: Math.floor(i / 12), month: i % 12 + 1 });
+function MonthPicker({ value, onChange, minValue, maxValue, locale = "en", formatLabel, style }) {
   const { colors } = useTheme();
+  const index = toIndex(value);
+  const minIndex = minValue ? toIndex(minValue) : -Infinity;
+  const maxIndex = maxValue ? toIndex(maxValue) : Infinity;
+  const prevDisabled = index - 1 < minIndex;
+  const nextDisabled = index + 1 > maxIndex;
   const getLabel = () => {
     if (formatLabel) return formatLabel(value);
     const names = MONTH_NAMES[locale] ?? MONTH_NAMES.en;
     return `${names[value.month - 1]} ${value.year}`;
   };
   const handlePrev = () => {
+    if (prevDisabled) return;
     selectionAsync();
-    if (value.month === 1) {
-      onChange({ month: 12, year: value.year - 1 });
-    } else {
-      onChange({ month: value.month - 1, year: value.year });
-    }
+    onChange(fromIndex(index - 1));
   };
   const handleNext = () => {
+    if (nextDisabled) return;
     selectionAsync();
-    if (value.month === 12) {
-      onChange({ month: 1, year: value.year + 1 });
-    } else {
-      onChange({ month: value.month + 1, year: value.year });
-    }
+    onChange(fromIndex(index + 1));
   };
   return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style], accessibilityRole: "adjustable", accessibilityLabel: getLabel() }, /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
-      style: styles.arrow,
+      style: [styles.arrow, prevDisabled && styles.arrowDisabled],
       onPress: handlePrev,
+      disabled: prevDisabled,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: "Previous month",
+      accessibilityState: { disabled: prevDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-left", size: 22, color: colors.foreground })
@@ -57,12 +66,14 @@ function MonthPicker({ value, onChange, locale = "en", formatLabel, style }) {
   ), /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
-      style: styles.arrow,
+      style: [styles.arrow, nextDisabled && styles.arrowDisabled],
       onPress: handleNext,
+      disabled: nextDisabled,
       activeOpacity: 0.6,
       touchSoundDisabled: true,
       accessibilityRole: "button",
       accessibilityLabel: "Next month",
+      accessibilityState: { disabled: nextDisabled },
       hitSlop: { top: 8, bottom: 8, left: 8, right: 8 }
     },
     /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-right", size: 22, color: colors.foreground })
@@ -80,6 +91,9 @@ var styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  arrowDisabled: {
+    opacity: 0.3
+  },
   label: {
     fontFamily: "Sohne-Medium",
     fontSize: ms(17),
@@ -89,4 +103,4 @@ var styles = StyleSheet.create({
   }
 });
 
-export { MonthPicker };
+export { MonthPicker, dateToMonthPickerValue, monthPickerValueToDate };

package/dist/{chunk-RR2VQLKE.mjs → chunk-GQYFLP3D.mjs}

@@ -1,10 +1,10 @@
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { PressableTab } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { SPRINGS } from './chunk-DVK4G2GT.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 { StyleSheet, View, Text } from 'react-native';
 import Animated, { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';
 
 function TabTrigger({
@@ -15,12 +15,9 @@ function TabTrigger({
   variant
 }) {
   const { colors } = useTheme();
-  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button
-  });
   const isUnderline = variant === "underline";
-  return /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React.createElement(View, { onLayout, style: styles.triggerWrap }, /* @__PURE__ */ React.createElement(
+    PressableTab,
     {
       style: [
         styles.trigger,
@@ -28,16 +25,13 @@ function TabTrigger({
         isUnderline && isActive && { borderBottomColor: colors.primary }
       ],
       onPress,
-      onPressIn,
-      onPressOut,
-      onLayout,
-      activeOpacity: 1,
+      rippleColor: "transparent",
       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(
+    /* @__PURE__ */ React.createElement(View, { style: styles.triggerInner }, tab.icon ? typeof tab.icon === "function" ? tab.icon(isActive) : tab.icon : null, /* @__PURE__ */ React.createElement(
       Text,
       {
         style: [
@@ -51,8 +45,8 @@ function TabTrigger({
         allowFontScaling: true
       },
       tab.label
-    )))
-  );
+    ))
+  ));
 }
 function Tabs({ tabs, variant = "pill", value, onValueChange, children, style }) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? "");
@@ -153,6 +147,9 @@ var styles = StyleSheet.create({
     borderBottomWidth: 1
   },
   pill: {},
+  triggerWrap: {
+    flex: 1
+  },
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
@@ -163,7 +160,7 @@ var styles = StyleSheet.create({
     zIndex: 1
   },
   triggerUnderline: {
-    flex: 0,
+    flex: 1,
     paddingVertical: vs(12),
     paddingHorizontal: s(16),
     borderRadius: 0,