@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/chunk-PFZTM6D5.mjs

@@ -0,0 +1,238 @@
+import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
+import { SHADOWS, RADIUS, BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React, { useRef, useEffect, useCallback } from 'react';
+import { Dimensions, Platform, StyleSheet, useWindowDimensions, View, Text, TouchableOpacity, Modal, Pressable, ScrollView } from 'react-native';
+import { BottomSheetBackdrop, BottomSheetFooter, BottomSheetModal, BottomSheetScrollView, BottomSheetView } from '@gorhom/bottom-sheet';
+export { BottomSheetModalProvider, BottomSheetTextInput } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AntDesign } from '@expo/vector-icons';
+
+var SCREEN_HEIGHT = Dimensions.get("window").height;
+var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
+var isAndroid = Platform.OS === "android";
+function SheetHeader({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, style] }, children);
+}
+function SheetContent({ children, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.sheetContent, style] }, children);
+}
+function SheetFooter({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.sheetFooter, { backgroundColor: colors.card, borderTopColor: colors.border }, style] }, children);
+}
+function Sheet({
+  open,
+  onClose,
+  title,
+  subtitle,
+  description,
+  showCloseButton = false,
+  children,
+  style,
+  contentStyle,
+  scrollable,
+  maxHeight,
+  keyboardBehavior,
+  keyboardBlurBehavior = "restore",
+  enableBlurKeyboardOnGesture = true,
+  android_keyboardInputMode = "adjustPan",
+  footer,
+  snapPoints,
+  responsive = false,
+  dialogMaxWidth = 480
+}) {
+  const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
+  const { width: windowWidth } = useWindowDimensions();
+  const ref = useRef(null);
+  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide;
+  const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
+  useEffect(() => {
+    if (open) {
+      impactMedium();
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [open]);
+  const renderBackdrop = useCallback((props) => /* @__PURE__ */ React.createElement(
+    BottomSheetBackdrop,
+    {
+      ...props,
+      disappearsOnIndex: -1,
+      appearsOnIndex: 0,
+      pressBehavior: "close"
+    }
+  ), []);
+  const childArray = React.Children.toArray(children);
+  const customHeader = childArray.find((child) => React.isValidElement(child) && child.type === SheetHeader);
+  const customContent = childArray.find((child) => React.isValidElement(child) && child.type === SheetContent);
+  const customFooter = childArray.find((child) => React.isValidElement(child) && child.type === SheetFooter);
+  const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
+    (child) => !React.isValidElement(child) || child.type !== SheetHeader && child.type !== SheetContent && child.type !== SheetFooter
+  ) : children;
+  const effectiveSubtitle = subtitle ?? description;
+  const showHeader = !!(title || effectiveSubtitle || showCloseButton) && !customHeader;
+  const headerNode = customHeader ? customHeader : showHeader ? /* @__PURE__ */ React.createElement(View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, title ? /* @__PURE__ */ React.createElement(Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: onClose,
+      style: styles.closeButton,
+      activeOpacity: 0.6,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close",
+      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+    },
+    /* @__PURE__ */ React.createElement(AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
+  ) : null), effectiveSubtitle ? /* @__PURE__ */ React.createElement(Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  const contentNode = customContent ? customContent : filteredChildren;
+  const effectiveFooter = customFooter ? customFooter : footer;
+  const renderFooter = useCallback((props) => {
+    if (!effectiveFooter) return null;
+    return /* @__PURE__ */ React.createElement(BottomSheetFooter, { ...props }, effectiveFooter);
+  }, [effectiveFooter]);
+  if (asDialog) {
+    return /* @__PURE__ */ React.createElement(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        style: [
+          styles.dialogCard,
+          { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 }
+        ],
+        onPress: () => {
+        }
+      },
+      headerNode,
+      /* @__PURE__ */ React.createElement(
+        ScrollView,
+        {
+          contentContainerStyle: [styles.dialogContent, style],
+          style: contentStyle,
+          showsVerticalScrollIndicator: true,
+          bounces: false
+        },
+        contentNode
+      ),
+      effectiveFooter
+    )));
+  }
+  const useScroll = scrollable || !!maxHeight;
+  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
+  const useDynamicSizing = !snapPoints;
+  return /* @__PURE__ */ React.createElement(
+    BottomSheetModal,
+    {
+      ref,
+      enableDynamicSizing: useDynamicSizing,
+      snapPoints,
+      maxDynamicContentSize: useDynamicSizing ? effectiveMaxHeight : void 0,
+      onDismiss: onClose,
+      backdropComponent: renderBackdrop,
+      footerComponent: effectiveFooter ? renderFooter : void 0,
+      backgroundStyle: [styles.background, { backgroundColor: colors.card }],
+      handleIndicatorStyle: [styles.handle, { backgroundColor: colors.border }],
+      enablePanDownToClose: true,
+      topInset: insets.top,
+      keyboardBehavior: effectiveKeyboardBehavior,
+      keyboardBlurBehavior,
+      android_keyboardInputMode,
+      enableBlurKeyboardOnGesture
+    },
+    useScroll ? /* @__PURE__ */ React.createElement(
+      BottomSheetScrollView,
+      {
+        contentContainerStyle: [
+          styles.scrollContent,
+          style
+        ],
+        style: contentStyle,
+        showsVerticalScrollIndicator: true,
+        indicatorStyle: "black",
+        persistentScrollbar: isAndroid
+      },
+      headerNode,
+      contentNode
+    ) : /* @__PURE__ */ React.createElement(BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
+  );
+}
+Sheet.Header = SheetHeader;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
+var styles = StyleSheet.create({
+  background: {
+    borderTopLeftRadius: ms(16),
+    borderTopRightRadius: ms(16)
+  },
+  handle: {
+    width: s(36),
+    height: vs(4),
+    borderRadius: ms(2)
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(4),
+    paddingBottom: vs(12),
+    gap: vs(4)
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  title: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(18),
+    flex: 1
+  },
+  subtitle: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  },
+  closeButton: {
+    padding: s(4),
+    marginLeft: s(8)
+  },
+  content: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32)
+  },
+  scrollContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(32),
+    paddingRight: s(16)
+  },
+  sheetContent: {
+    gap: vs(16)
+  },
+  sheetFooter: {
+    paddingHorizontal: s(16),
+    paddingVertical: vs(16),
+    borderTopWidth: 1,
+    flexDirection: "row",
+    gap: s(12)
+  },
+  dialogBackdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: s(24)
+  },
+  dialogCard: {
+    width: "100%",
+    borderRadius: RADIUS.lg,
+    paddingTop: vs(16),
+    overflow: "hidden",
+    ...SHADOWS.xl
+  },
+  dialogContent: {
+    paddingHorizontal: s(16),
+    paddingBottom: vs(16)
+  }
+});
+
+export { Sheet };

package/dist/chunk-QKH5ZOD5.mjs

@@ -0,0 +1,97 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION, SPRING_ELASTIC, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { EaseView } from 'react-native-ease';
+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();
+  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(
+      EaseView,
+      {
+        style: styles.track,
+        animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
+        transition: COLOR_TRANSITION
+      },
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.trackBorder, { borderWidth: 1.5 }],
+          pointerEvents: "none",
+          animate: { borderColor: checked ? "transparent" : colors.border },
+          transition: COLOR_TRANSITION
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
+          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+          transition: SPRING_ELASTIC
+        },
+        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
+        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__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-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-SOA2Z4RB.mjs

@@ -0,0 +1,82 @@
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+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 ListGroup({ children, variant = "plain", style }) {
+  const { colors } = useTheme();
+  const processedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child;
+    if (child.type === ListGroupHeader || child.type === ListGroupFooter) {
+      return child;
+    }
+    const childProps = child.props;
+    const isListItem = "title" in childProps;
+    if (!isListItem) return child;
+    const isLast = index === React.Children.count(children) - 1;
+    if (childProps["showSeparator"] === void 0 && !isLast) {
+      return React.cloneElement(child, {
+        showSeparator: true
+      });
+    }
+    return child;
+  });
+  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,
+    paddingVertical: vs(4)
+  } : {};
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, cardStyle, style] }, processedChildren);
+}
+function ListGroupHeader({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.headerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.header, { borderBottomColor: colors.separator }, style] }, children);
+}
+function ListGroupFooter({ children, style }) {
+  const { colors } = useTheme();
+  if (typeof children === "string") {
+    return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, /* @__PURE__ */ React.createElement(Text, { style: [styles.footerText, { color: colors.foregroundMuted }], allowFontScaling: true }, children));
+  }
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.footer, style] }, children);
+}
+ListGroup.Header = ListGroupHeader;
+ListGroup.Footer = ListGroupFooter;
+var styles = StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  header: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(12),
+    paddingBottom: vs(8),
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerText: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: 13,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  footer: {
+    paddingHorizontal: s(16),
+    paddingTop: vs(8),
+    paddingBottom: vs(12)
+  },
+  footerText: {
+    fontFamily: "Sohne-Regular",
+    fontSize: 12
+  }
+});
+
+export { ListGroup, ListGroupFooter, ListGroupHeader };