@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-2TFTAWVJ.mjs

@@ -0,0 +1,131 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
+import { TYPOGRAPHY, RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+
+var containerSizeStyles = {
+  // AUDIT FIX: sm was 40pt — below Apple HIG 44pt minimum touch target.
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(12), minHeight: 44 },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
+  lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 }
+};
+var labelSizeStyles = {
+  sm: { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize) },
+  md: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize) },
+  lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1), lineHeight: mvs(24) }
+};
+var iconSizeMap = { sm: 16, md: 18, lg: 20 };
+function ButtonBase({
+  label,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  icon,
+  iconName,
+  iconColor,
+  iconPosition = "left",
+  disabled,
+  style,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading;
+  const handlePress = () => {
+    impactMedium();
+    onPress?.();
+  };
+  const containerVariantStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
+    text: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.destructive }
+  }[variant];
+  const labelVariantStyle = {
+    primary: { color: colors.primaryForeground },
+    secondary: { color: colors.primary },
+    // AUDIT FIX: was colors.foreground — visually indistinguishable from plain text,
+    // no affordance that it's a CTA. Now uses accentResolved so text-only buttons
+    // carry the brand voltage. Falls back to primary when no accent is defined.
+    text: { color: colors.accentResolved },
+    destructive: { color: colors.destructiveForeground }
+  }[variant];
+  const textColor = iconColor ?? labelVariantStyle.color;
+  const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], textColor) : typeof icon === "function" ? icon({ label, size, variant, color: textColor }) : icon;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.accentResolved;
+  const styleArray = Array.isArray(style) ? style : style ? [style] : [];
+  const flatStyle = StyleSheet.flatten(styleArray);
+  const { flex, ...restStyle } = flatStyle || {};
+  return /* @__PURE__ */ React.createElement(View, { style: [fullWidth && styles.fullWidth, flex !== void 0 && { flex }] }, /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.base,
+        containerVariantStyle,
+        containerSizeStyles[size],
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        restStyle
+      ],
+      enabled: !isDisabled,
+      onPress: handlePress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityHint,
+      accessibilityState: { disabled: isDisabled, busy: loading }
+    },
+    loading ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor, style: { marginRight: s(6) } }), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, labelVariantStyle, labelSizeStyles[size], styles.labelLoading],
+        allowFontScaling: true,
+        numberOfLines: 1
+      },
+      label
+    )) : /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+        allowFontScaling: true,
+        numberOfLines: 1
+      },
+      label
+    ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React.createElement(React.Fragment, null, effectiveIcon))
+  ));
+}
+var Button = React.memo(ButtonBase);
+var styles = StyleSheet.create({
+  base: {
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  label: {
+    fontFamily: "Sohne-Medium",
+    flexShrink: 1
+  },
+  labelWithIcon: {
+    marginHorizontal: s(6)
+  },
+  labelLoading: {
+    opacity: 0.6
+  }
+});
+
+export { Button };

package/dist/chunk-2UYENBLV.mjs

@@ -0,0 +1,49 @@
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { toast, Toaster } from 'sonner-native';
+export { toast as sonnerToast } from 'sonner-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+function useToast() {
+  return {
+    toast: toast,
+    dismiss: toast.dismiss
+  };
+}
+function ToastProvider({ children }) {
+  const { colorScheme } = useTheme();
+  const insets = useSafeAreaInsets();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(
+    Toaster,
+    {
+      theme: colorScheme,
+      position: "top-center",
+      richColors: true,
+      gap: vs(8),
+      offset: insets.top + vs(8),
+      visibleToasts: 3,
+      closeButton: false,
+      swipeToDismissDirection: "up",
+      duration: 4e3,
+      toastOptions: {
+        style: {
+          borderRadius: ms(12),
+          paddingHorizontal: s(12),
+          paddingVertical: vs(10)
+        },
+        titleStyle: {
+          fontFamily: "Sohne-Medium",
+          fontSize: ms(13)
+        },
+        descriptionStyle: {
+          fontFamily: "Sohne-Regular",
+          fontSize: ms(12),
+          opacity: 0.85
+        }
+      }
+    }
+  ));
+}
+
+export { ToastProvider, useToast };

package/dist/chunk-3BBOZ3OQ.mjs

@@ -0,0 +1,41 @@
+import { s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+function ButtonGroup({ children, gap = 12, vertical = false, style }) {
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.container,
+        vertical ? styles.vertical : styles.horizontal,
+        { gap: s(gap) },
+        style
+      ]
+    },
+    React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      const childProps = child.props;
+      const extraProps = {
+        style: [child.props.style, { flex: 1 }]
+      };
+      if (!vertical && "label" in childProps && childProps["size"] === void 0) {
+        extraProps["size"] = "sm";
+      }
+      return React.cloneElement(child, extraProps);
+    })
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    width: "100%"
+  },
+  horizontal: {
+    flexDirection: "row"
+  },
+  vertical: {
+    flexDirection: "column"
+  }
+});
+
+export { ButtonGroup };

package/dist/chunk-3DKJ2GIC.mjs

@@ -0,0 +1,30 @@
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
+import { createAnimatedPressable } from 'pressto';
+
+var PressableButton = createAnimatedPressable((progress) => {
+  "worklet";
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale }] };
+});
+var PressableCard = createAnimatedPressable((progress) => {
+  "worklet";
+  const scale = 1 - (1 - PRESS_SCALE.card) * progress;
+  return { transform: [{ scale }] };
+});
+var PressableRow = createAnimatedPressable((progress) => {
+  "worklet";
+  const scale = 1 - (1 - PRESS_SCALE.row) * progress;
+  return { transform: [{ scale }] };
+});
+var PressableChip = createAnimatedPressable((progress) => {
+  "worklet";
+  const scale = 1 - (1 - PRESS_SCALE.chip) * progress;
+  return { transform: [{ scale }] };
+});
+var PressableTab = createAnimatedPressable((progress) => {
+  "worklet";
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress;
+  return { transform: [{ scale }] };
+});
+
+export { PressableButton, PressableCard, PressableChip, PressableRow, PressableTab };

package/dist/chunk-3U4SSNWP.mjs

@@ -0,0 +1,120 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
+
+var sizeMap = {
+  // AUDIT FIX: sm was 32pt — below Apple HIG 44pt minimum touch target.
+  sm: { container: s(44), icon: 18 },
+  md: { container: s(44), icon: 20 },
+  lg: { container: s(52), icon: 24 }
+};
+function IconButtonBase({
+  iconName,
+  icon,
+  iconColor,
+  variant = "primary",
+  size = "md",
+  loading = false,
+  badge,
+  disabled,
+  style,
+  onPress,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const { colors } = useTheme();
+  const isDisabled = disabled || loading;
+  const handlePress = () => {
+    impactLight();
+    onPress?.();
+  };
+  const containerVariantStyle = {
+    primary: { backgroundColor: colors.primary },
+    secondary: { backgroundColor: colors.surface },
+    outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
+    text: { backgroundColor: "transparent" },
+    destructive: { backgroundColor: colors.destructive }
+  }[variant];
+  const defaultIconColor = {
+    primary: colors.primaryForeground,
+    secondary: colors.foreground,
+    outline: colors.foreground,
+    text: colors.foreground,
+    destructive: colors.destructiveForeground
+  }[variant];
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
+  const { container: containerSize, icon: iconSize } = sizeMap[size];
+  const resolvedIcon = iconName ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor) : icon;
+  const showBadge = badge !== void 0 && badge !== false && badge !== 0;
+  const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
+  const showCount = typeof badge === "number" && badge > 0;
+  return /* @__PURE__ */ React.createElement(View, { style: styles.wrapper }, /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.base,
+        containerVariantStyle,
+        { width: containerSize, height: containerSize },
+        isDisabled && styles.disabled,
+        style
+      ],
+      enabled: !isDisabled,
+      onPress: handlePress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? iconName ?? "icon button",
+      accessibilityHint,
+      accessibilityState: { disabled: isDisabled, busy: loading }
+    },
+    loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
+  ), showBadge && /* @__PURE__ */ React.createElement(View, { style: [
+    styles.badge,
+    { backgroundColor: colors.primary },
+    showCount ? styles.badgeCount : styles.badgeDot
+  ] }, showCount && /* @__PURE__ */ React.createElement(Text, { style: [styles.badgeText, { color: colors.primaryForeground }] }, badgeCount)));
+}
+var IconButton = React.memo(IconButtonBase);
+var styles = StyleSheet.create({
+  wrapper: {
+    alignSelf: "flex-start"
+  },
+  base: {
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: {
+    opacity: 0.45
+  },
+  badge: {
+    position: "absolute",
+    top: -2,
+    right: -2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badgeDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 9999
+  },
+  badgeCount: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3
+  },
+  badgeText: {
+    fontFamily: "Sohne-Bold",
+    fontSize: ms(9),
+    lineHeight: 14
+  }
+});
+
+export { IconButton };

package/dist/chunk-4I7D47FH.mjs

@@ -0,0 +1,139 @@
+import { Badge } from './chunk-TERDKCLE.mjs';
+import { Button } from './chunk-2TFTAWVJ.mjs';
+import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var normalize = (f) => typeof f === "string" ? { label: f, included: true } : { included: true, ...f };
+function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features = [],
+  ctaLabel,
+  onCtaPress,
+  badge,
+  highlighted = false,
+  footnote,
+  style
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.card,
+        {
+          backgroundColor: colors.card,
+          borderColor: highlighted ? colors.primary : colors.border,
+          borderWidth: highlighted ? 2 : StyleSheet.hairlineWidth
+        },
+        highlighted && SHADOWS.md,
+        style
+      ],
+      accessibilityRole: "summary"
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.name, { color: colors.foreground }], allowFontScaling: true }, name), badge ? /* @__PURE__ */ React.createElement(Badge, { label: badge, variant: highlighted ? "default" : "secondary", size: "sm" }) : null),
+    /* @__PURE__ */ React.createElement(View, { style: styles.priceRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.price, { color: colors.foreground }], allowFontScaling: true }, price), period ? /* @__PURE__ */ React.createElement(Text, { style: [styles.period, { color: colors.foregroundMuted }], allowFontScaling: true }, period) : null),
+    description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null,
+    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, renderIcon(
+      f.included ? "check" : "minus",
+      ms(16),
+      f.included ? colors.success : colors.foregroundMuted
+    ), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.featureLabel,
+          { color: f.included ? colors.foreground : colors.foregroundMuted },
+          !f.included && styles.featureExcluded
+        ],
+        allowFontScaling: true
+      },
+      f.label
+    )))) : null,
+    ctaLabel ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label: ctaLabel,
+        variant: highlighted ? "primary" : "secondary",
+        fullWidth: true,
+        onPress: onCtaPress,
+        style: styles.cta
+      }
+    ) : null,
+    footnote ? /* @__PURE__ */ React.createElement(Text, { style: [styles.footnote, { color: colors.foregroundMuted }], allowFontScaling: true }, footnote) : null
+  );
+}
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    padding: s(16),
+    gap: vs(8)
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: s(8)
+  },
+  name: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(20)
+  },
+  priceRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: s(3)
+  },
+  price: {
+    fontFamily: "Sohne-Bold",
+    fontSize: ms(28),
+    lineHeight: mvs(32),
+    letterSpacing: -0.5
+  },
+  period: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(16)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  features: {
+    gap: vs(6),
+    marginTop: vs(2)
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(6)
+  },
+  featureLabel: {
+    flex: 1,
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  featureExcluded: {
+    textDecorationLine: "line-through"
+  },
+  cta: {
+    marginTop: vs(2)
+  },
+  footnote: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(11),
+    lineHeight: mvs(14),
+    textAlign: "center"
+  }
+});
+
+export { PricingCard };

package/dist/chunk-4K625MVM.mjs

@@ -0,0 +1,142 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { SPRINGS } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.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 } from 'react-native-reanimated';
+
+function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }) {
+  const progress = useSharedValue(active ? 1 : 0);
+  useEffect(() => {
+    progress.value = withSpring(active ? 1 : 0, SPRINGS.glide);
+  }, [active, progress]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: size + progress.value * size * 1.5,
+    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor])
+  }));
+  const dot = /* @__PURE__ */ React.createElement(Animated.View, { style: [{ height: size, borderRadius: size / 2 }, animatedStyle] });
+  if (!onPress) return dot;
+  const handlePress = () => {
+    selectionAsync();
+    onPress();
+  };
+  return /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: handlePress,
+      activeOpacity: 0.7,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Page ${index + 1} of ${total}${active ? ", current page" : ""}`,
+      hitSlop: { top: 8, bottom: 8, left: 4, right: 4 }
+    },
+    dot
+  );
+}
+function PagerDots({
+  count,
+  activeIndex,
+  onDotPress,
+  showControls = false,
+  dotSize = 8,
+  spacing = 8,
+  activeColor,
+  inactiveColor,
+  style
+}) {
+  const { colors } = useTheme();
+  const resolvedActive = activeColor ?? colors.primary;
+  const resolvedInactive = inactiveColor ?? colors.border;
+  const size = s(dotSize);
+  const hasControls = showControls !== false;
+  const canGoPrev = activeIndex > 0;
+  const canGoNext = activeIndex < count - 1;
+  const handlePrevious = () => {
+    if (!canGoPrev) return;
+    selectionAsync();
+    if (typeof showControls === "object" && showControls.onPrevious) {
+      showControls.onPrevious();
+    } else if (onDotPress) {
+      onDotPress(activeIndex - 1);
+    }
+  };
+  const handleNext = () => {
+    if (!canGoNext) return;
+    selectionAsync();
+    if (typeof showControls === "object" && showControls.onNext) {
+      showControls.onNext();
+    } else if (onDotPress) {
+      onDotPress(activeIndex + 1);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, { gap: s(spacing) }, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: `Page ${activeIndex + 1} of ${count}`
+    },
+    hasControls && /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePrevious,
+        disabled: !canGoPrev,
+        activeOpacity: 0.7,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Previous page",
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+        style: [styles.controlBtn, !canGoPrev && styles.controlBtnDisabled]
+      },
+      renderIcon("chevron-left", s(18), canGoPrev ? colors.foreground : colors.foregroundMuted)
+    ),
+    /* @__PURE__ */ React.createElement(View, { style: [styles.dotsRow, { gap: s(spacing) }] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(
+      Dot,
+      {
+        key: i,
+        active: i === activeIndex,
+        size,
+        activeColor: resolvedActive,
+        inactiveColor: resolvedInactive,
+        index: i,
+        total: count,
+        onPress: onDotPress ? () => onDotPress(i) : void 0
+      }
+    ))),
+    hasControls && /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: handleNext,
+        disabled: !canGoNext,
+        activeOpacity: 0.7,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Next page",
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+        style: [styles.controlBtn, !canGoNext && styles.controlBtnDisabled]
+      },
+      renderIcon("chevron-right", s(18), canGoNext ? colors.foreground : colors.foregroundMuted)
+    )
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotsRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  controlBtn: {
+    padding: s(4)
+  },
+  controlBtnDisabled: {
+    opacity: 0.3
+  }
+});
+
+export { PagerDots };