@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-6OAZJ577.mjs

@@ -0,0 +1,98 @@
+import { Button } from './chunk-2TFTAWVJ.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),
+    paddingBottom: vs(32)
+  },
+  containerCompact: {
+    paddingBottom: vs(20)
+  },
+  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),
+    paddingHorizontal: s(32)
+  }
+});
+
+export { EmptyState };

package/dist/chunk-6Q64UFIA.mjs

@@ -0,0 +1,71 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+function Form({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.form, style] }, children);
+}
+function FormField({
+  children,
+  label,
+  error,
+  required,
+  style,
+  labelStyle,
+  errorStyle
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.field, style] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }, labelStyle], allowFontScaling: true }, label, required ? /* @__PURE__ */ React.createElement(Text, { style: { color: colors.destructive } }, " *") : null) : null, children, error ? /* @__PURE__ */ React.createElement(Text, { style: [styles.error, { color: colors.destructive }, errorStyle], allowFontScaling: true }, error) : null);
+}
+function FormSection({ children, title, description, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.section, style] }, title ? /* @__PURE__ */ React.createElement(View, { style: styles.sectionHeader }, /* @__PURE__ */ React.createElement(Text, { style: [styles.sectionTitle, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.sectionDescription, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null, children);
+}
+function FormFooter({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
+}
+Form.Field = FormField;
+Form.Section = FormSection;
+Form.Footer = FormFooter;
+var styles = StyleSheet.create({
+  form: {
+    gap: vs(16)
+  },
+  field: {
+    gap: vs(6)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  error: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12,
+    lineHeight: 16
+  },
+  section: {
+    gap: vs(16)
+  },
+  sectionHeader: {
+    gap: vs(4)
+  },
+  sectionTitle: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 16,
+    lineHeight: 24
+  },
+  sectionDescription: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 14,
+    lineHeight: 20
+  },
+  footer: {
+    flexDirection: "row",
+    gap: s(12),
+    paddingTop: vs(8)
+  }
+});
+
+export { Form, FormField, FormFooter, FormSection };

package/dist/chunk-756RAKE4.mjs

@@ -0,0 +1,145 @@
+import { useColorTransition } from './chunk-26BCI223.mjs';
+import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
+import React, { useState } from 'react';
+import { Platform, StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
+import Animated, { useAnimatedStyle, interpolate, interpolateColor } from 'react-native-reanimated';
+import { AntDesign } from '@expo/vector-icons';
+
+var webInputResetStyle = Platform.OS === "web" ? { outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent", boxShadow: "none" } : {};
+function Input({ label, error, hint, disabled, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type = "text", containerStyle, inputWrapperStyle, style, onFocus, onBlur, secureTextEntry, editable, accessibilityLabel, ...props }) {
+  const { colors } = useTheme();
+  const [focused, setFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const focusProgress = useColorTransition(focused, {
+    duration: focused ? TIMINGS.focusIn.duration : TIMINGS.focusOut.duration
+  });
+  const isDisabled = disabled || editable === false;
+  const isPassword = type === "password";
+  const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
+  const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
+  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => setShowPassword(!showPassword),
+      style: styles.passwordToggle,
+      activeOpacity: 0.6,
+      accessibilityRole: "button",
+      accessibilityLabel: showPassword ? "Hide password" : "Show password"
+    },
+    /* @__PURE__ */ React.createElement(AntDesign, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })
+  ) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
+  const borderAnimStyle = useAnimatedStyle(() => ({
+    borderColor: error ? colors.destructive : interpolateColor(focusProgress.value, [0, 1], [colors.border, colors.primary]),
+    borderWidth: error ? 2 : interpolate(focusProgress.value, [0, 1], [1, 2])
+  }));
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, isDisabled && styles.containerDisabled, containerStyle] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.inputWrapper,
+        { backgroundColor: isDisabled ? colors.surface : colors.background },
+        inputWrapperStyle
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.borderOverlay, borderAnimStyle], pointerEvents: "none" }),
+    effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React.createElement(View, { style: styles.prefixContainer }, effectivePrefix) : null,
+    /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        style: [
+          styles.input,
+          { color: colors.foreground },
+          webInputResetStyle,
+          style
+        ],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        placeholderTextColor: colors.foregroundMuted,
+        allowFontScaling: true,
+        secureTextEntry: effectiveSecure,
+        editable: isDisabled ? false : editable,
+        accessibilityLabel: accessibilityLabel ?? label,
+        ...props
+      }
+    ),
+    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React.createElement(Text, { style: [styles.suffixText, { color: colors.foregroundMuted }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React.createElement(View, { style: styles.suffixContainer }, effectiveSuffix) : null
+  ), error ? /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [styles.helperText, { color: colors.destructive }],
+      allowFontScaling: true,
+      accessibilityLiveRegion: "polite"
+    },
+    error
+  ) : null, !error && hint ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(8)
+  },
+  containerDisabled: {
+    opacity: 0.6
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(14)
+  },
+  inputWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    // Border lives on borderOverlay (absolute) so its 1px→2px focus change
+    // never resizes this box. Wrapper itself carries no border.
+    borderRadius: 8,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    minHeight: 48
+  },
+  borderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 8
+  },
+  input: {
+    fontFamily: "Sohne-Regular",
+    flex: 1,
+    fontSize: ms(16),
+    paddingVertical: vs(2),
+    includeFontPadding: false
+  },
+  prefixContainer: {
+    marginRight: s(8)
+  },
+  prefixText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(15),
+    marginRight: s(8)
+  },
+  suffixContainer: {
+    marginLeft: s(8)
+  },
+  suffixText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(15),
+    marginLeft: s(8)
+  },
+  // AUDIT FIX: was padding: s(4) → ~28px tap target. Now 12px padding → ~44px.
+  // Negative margin compensates so the visual icon position is unchanged.
+  passwordToggle: {
+    padding: s(12),
+    margin: -s(8)
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  }
+});
+
+export { Input };

package/dist/chunk-7QHVVCB3.mjs

@@ -0,0 +1,115 @@
+import { Button } from './chunk-2TFTAWVJ.mjs';
+import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
+import React, { useRef, useEffect } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { Feather } from '@expo/vector-icons';
+
+function ConfirmDialog({
+  visible,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "primary",
+  onConfirm,
+  onCancel
+}) {
+  const { colors } = useTheme();
+  const ref = useRef(null);
+  useEffect(() => {
+    if (visible) {
+      impactMedium();
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [visible]);
+  const renderBackdrop = (props) => /* @__PURE__ */ React.createElement(
+    BottomSheetBackdrop,
+    {
+      ...props,
+      disappearsOnIndex: -1,
+      appearsOnIndex: 0,
+      pressBehavior: "close"
+    }
+  );
+  return /* @__PURE__ */ React.createElement(
+    BottomSheetModal,
+    {
+      ref,
+      enableDynamicSizing: true,
+      onDismiss: onCancel,
+      backdropComponent: renderBackdrop,
+      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
+      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
+      enablePanDownToClose: true
+    },
+    /* @__PURE__ */ React.createElement(BottomSheetView, { style: styles.content }, /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React.createElement(View, { style: styles.actions }, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label: confirmLabel,
+        variant: confirmVariant,
+        fullWidth: true,
+        onPress: () => {
+          notificationSuccess();
+          onConfirm();
+        },
+        icon: /* @__PURE__ */ React.createElement(
+          Feather,
+          {
+            name: confirmVariant === "destructive" ? "trash-2" : "check",
+            size: 15,
+            color: confirmVariant === "destructive" ? colors.destructiveForeground : colors.primaryForeground
+          }
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label: cancelLabel,
+        variant: "secondary",
+        fullWidth: true,
+        onPress: () => {
+          selectionAsync();
+          onCancel();
+        },
+        icon: /* @__PURE__ */ React.createElement(Feather, { name: "x", size: 15, color: colors.foreground })
+      }
+    )))
+  );
+}
+var styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16)
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2)
+  },
+  content: {
+    paddingHorizontal: s(24),
+    paddingBottom: vs(32),
+    gap: vs(12)
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    lineHeight: mvs(26)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(15),
+    lineHeight: mvs(22)
+  },
+  actions: {
+    gap: vs(10),
+    marginTop: vs(8)
+  }
+});
+
+export { ConfirmDialog };

package/dist/chunk-A3A6KNQN.mjs

@@ -0,0 +1,245 @@
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useRef } from 'react';
+import { Platform, StyleSheet, View, Text, TouchableOpacity, Modal } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { Picker } from '@react-native-picker/picker';
+import { Entypo } from '@expo/vector-icons';
+
+var isIOS = Platform.OS === "ios";
+var isAndroid = Platform.OS === "android";
+var isWeb = Platform.OS === "web";
+function Select({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select an option",
+  label,
+  error,
+  disabled,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const { animatedStyle, onPressIn, onPressOut } = usePressScale({
+    pressScale: PRESS_SCALE.button,
+    disabled
+  });
+  const [pickerVisible, setPickerVisible] = useState(false);
+  const [pendingValue, setPendingValue] = useState(value);
+  const pickerRef = useRef(null);
+  const selected = options.find((o) => o.value === value);
+  const handleOpen = () => {
+    if (disabled) return;
+    selectionAsync();
+    if (isIOS) {
+      setPendingValue(value);
+      setPickerVisible(true);
+    } else if (isAndroid) {
+      pickerRef.current?.focus?.();
+    }
+  };
+  const handleDismiss = () => {
+    setPickerVisible(false);
+  };
+  const handleConfirm = () => {
+    if (pendingValue !== void 0 && pendingValue !== "") {
+      selectionAsync();
+      onValueChange?.(pendingValue);
+    }
+    setPickerVisible(false);
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, !isWeb ? /* @__PURE__ */ React.createElement(Animated.View, { style: [animatedStyle, { opacity: disabled ? 0.45 : 1 }] }, /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles.trigger,
+        {
+          borderColor: error ? colors.destructive : colors.border,
+          backgroundColor: colors.background
+        }
+      ],
+      onPress: handleOpen,
+      onPressIn,
+      onPressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true,
+      accessibilityRole: "combobox",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityValue: { text: selected?.label ?? placeholder },
+      accessibilityState: { disabled: !!disabled, expanded: pickerVisible }
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.triggerText,
+          { color: selected ? colors.foreground : colors.foregroundMuted }
+        ],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      selected?.label ?? placeholder
+    ),
+    /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-down", size: 20, color: colors.foregroundMuted })
+  )) : null, isIOS ? /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      visible: pickerVisible,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: handleDismiss
+    },
+    /* @__PURE__ */ React.createElement(TouchableOpacity, { style: styles.iosBackdrop, activeOpacity: 1, onPress: handleDismiss }),
+    /* @__PURE__ */ React.createElement(View, { style: [styles.iosSheet, { backgroundColor: colors.card }] }, /* @__PURE__ */ React.createElement(View, { style: [styles.iosToolbar, { borderBottomColor: colors.border }] }, label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.iosToolbarTitle, { color: colors.foreground }], allowFontScaling: true }, label) : /* @__PURE__ */ React.createElement(View, null), /* @__PURE__ */ React.createElement(TouchableOpacity, { onPress: handleConfirm, style: styles.iosDoneBtn, hitSlop: { top: 8, bottom: 8, left: 8, right: 8 } }, /* @__PURE__ */ React.createElement(Text, { style: [styles.iosDoneBtnText, { color: colors.primary }], allowFontScaling: true }, "Done"))), /* @__PURE__ */ React.createElement(
+      Picker,
+      {
+        selectedValue: pendingValue ?? "",
+        onValueChange: (val) => setPendingValue(val),
+        itemStyle: { color: colors.foreground }
+      },
+      !value ? /* @__PURE__ */ React.createElement(Picker.Item, { label: placeholder, value: "", color: colors.foregroundMuted, enabled: false }) : null,
+      options.map((o) => /* @__PURE__ */ React.createElement(
+        Picker.Item,
+        {
+          key: o.value,
+          label: o.label,
+          value: o.value,
+          enabled: !o.disabled,
+          color: o.disabled ? colors.foregroundMuted : colors.foreground
+        }
+      ))
+    ))
+  ) : null, isAndroid ? /* @__PURE__ */ React.createElement(
+    Picker,
+    {
+      ref: pickerRef,
+      selectedValue: value ?? "",
+      onValueChange: (val) => {
+        if (val !== "") {
+          selectionAsync();
+          onValueChange?.(val);
+        }
+      },
+      mode: "dialog",
+      enabled: !disabled,
+      prompt: label,
+      style: styles.androidHiddenPicker
+    },
+    !value ? /* @__PURE__ */ React.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }) : null,
+    options.map((o) => /* @__PURE__ */ React.createElement(
+      Picker.Item,
+      {
+        key: o.value,
+        label: o.label,
+        value: o.value,
+        enabled: !o.disabled
+      }
+    ))
+  ) : null, isWeb ? /* @__PURE__ */ React.createElement(
+    Picker,
+    {
+      selectedValue: value ?? "",
+      onValueChange: (val) => {
+        if (val !== "") {
+          onValueChange?.(val);
+        }
+      },
+      enabled: !disabled,
+      style: [
+        styles.webPicker,
+        {
+          borderColor: error ? colors.destructive : colors.border,
+          color: selected ? colors.foreground : colors.foregroundMuted,
+          backgroundColor: colors.background,
+          opacity: disabled ? 0.45 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Picker.Item, { label: placeholder, value: "", enabled: false }),
+    options.map((o) => /* @__PURE__ */ React.createElement(
+      Picker.Item,
+      {
+        key: o.value,
+        label: o.label,
+        value: o.value,
+        enabled: !o.disabled
+      }
+    ))
+  ) : null, error ? /* @__PURE__ */ React.createElement(Text, { style: [styles.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null);
+}
+var styles = StyleSheet.create({
+  container: {
+    gap: vs(8)
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    fontSize: ms(13)
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderWidth: 1,
+    borderRadius: ms(8),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11)
+  },
+  triggerText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(15),
+    flex: 1
+  },
+  chevron: {
+    marginLeft: s(8)
+  },
+  helperText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13)
+  },
+  iosBackdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)"
+  },
+  iosSheet: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16),
+    paddingBottom: vs(32)
+  },
+  iosToolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: s(16),
+    paddingVertical: vs(12),
+    borderBottomWidth: 1
+  },
+  iosToolbarTitle: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(17)
+  },
+  iosDoneBtn: {
+    padding: s(4)
+  },
+  iosDoneBtnText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(17)
+  },
+  androidHiddenPicker: {
+    height: 0,
+    opacity: 0,
+    position: "absolute"
+  },
+  webPicker: {
+    borderWidth: 1,
+    borderRadius: ms(8),
+    paddingHorizontal: s(14),
+    paddingVertical: vs(11),
+    fontSize: ms(15)
+  }
+});
+
+export { Select };