@retray-dev/ui-kit 6.1.0 → 7.0.1

package/dist/Sheet.d.mts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
+
+interface SheetHeaderProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetContentProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetFooterProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
+    description?: string;
+    /** Show an X close button in the header. */
+    showCloseButton?: boolean;
+    children?: React.ReactNode;
+    /** Style for the inner content container. */
+    style?: ViewStyle;
+    /** Style for the content wrapper (outside the scroll container). */
+    contentStyle?: ViewStyle;
+    /** Render children inside BottomSheetScrollView. */
+    scrollable?: boolean;
+    /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+    maxHeight?: number;
+    /**
+     * Keyboard behavior — how the sheet responds to keyboard appearance.
+     * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
+     * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
+     * - 'extend': extend sheet to maximum snap point
+     *
+     * Default: 'interactive' on both platforms.
+     */
+    keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
+    /**
+     * Keyboard blur behavior — what happens when keyboard dismisses.
+     * - 'none': do nothing
+     * - 'restore': restore sheet to previous position (default)
+     */
+    keyboardBlurBehavior?: 'none' | 'restore';
+    /**
+     * Blur keyboard when user starts dragging the sheet down.
+     * Default: true (recommended for better UX)
+     */
+    enableBlurKeyboardOnGesture?: boolean;
+    /**
+     * Android-only: defines keyboard input mode.
+     * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
+     * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
+     */
+    android_keyboardInputMode?: 'adjustPan' | 'adjustResize';
+    /** Sticky footer rendered below the scroll area. */
+    footer?: React.ReactNode;
+    /**
+     * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+     * When provided, disables enableDynamicSizing.
+     * When omitted, sheet uses dynamic sizing (auto-fits content).
+     */
+    snapPoints?: (string | number)[];
+}
+declare function SheetHeader({ children, style }: SheetHeaderProps): React.JSX.Element;
+declare function SheetContent({ children, style }: SheetContentProps): React.JSX.Element;
+declare function SheetFooter({ children, style }: SheetFooterProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, subtitle, description, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, }: SheetProps): React.JSX.Element;
+declare namespace Sheet {
+    var Header: typeof SheetHeader;
+    var Content: typeof SheetContent;
+    var Footer: typeof SheetFooter;
+}
+
+export { Sheet, type SheetProps };

package/dist/Sheet.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
+
+interface SheetHeaderProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetContentProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetFooterProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+interface SheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    /** Secondary text below title. */
+    subtitle?: string;
+    /** @deprecated Use `subtitle` instead. */
+    description?: string;
+    /** Show an X close button in the header. */
+    showCloseButton?: boolean;
+    children?: React.ReactNode;
+    /** Style for the inner content container. */
+    style?: ViewStyle;
+    /** Style for the content wrapper (outside the scroll container). */
+    contentStyle?: ViewStyle;
+    /** Render children inside BottomSheetScrollView. */
+    scrollable?: boolean;
+    /** Cap sheet height (dp). Children scroll when content exceeds this value. */
+    maxHeight?: number;
+    /**
+     * Keyboard behavior — how the sheet responds to keyboard appearance.
+     * - 'interactive': offset sheet by keyboard size (default, works on both platforms)
+     * - 'fillParent': extend sheet to fill parent view (can cause restore issues with dynamic sizing)
+     * - 'extend': extend sheet to maximum snap point
+     *
+     * Default: 'interactive' on both platforms.
+     */
+    keyboardBehavior?: 'extend' | 'fillParent' | 'interactive';
+    /**
+     * Keyboard blur behavior — what happens when keyboard dismisses.
+     * - 'none': do nothing
+     * - 'restore': restore sheet to previous position (default)
+     */
+    keyboardBlurBehavior?: 'none' | 'restore';
+    /**
+     * Blur keyboard when user starts dragging the sheet down.
+     * Default: true (recommended for better UX)
+     */
+    enableBlurKeyboardOnGesture?: boolean;
+    /**
+     * Android-only: defines keyboard input mode.
+     * - 'adjustPan': pan the sheet content (default, fixes restore issues with dynamic sizing)
+     * - 'adjustResize': resize the sheet container (can cause transparent gap on dismiss)
+     */
+    android_keyboardInputMode?: 'adjustPan' | 'adjustResize';
+    /** Sticky footer rendered below the scroll area. */
+    footer?: React.ReactNode;
+    /**
+     * Array of snap points for the sheet (e.g., ['50%', '85%'] or [200, 500]).
+     * When provided, disables enableDynamicSizing.
+     * When omitted, sheet uses dynamic sizing (auto-fits content).
+     */
+    snapPoints?: (string | number)[];
+}
+declare function SheetHeader({ children, style }: SheetHeaderProps): React.JSX.Element;
+declare function SheetContent({ children, style }: SheetContentProps): React.JSX.Element;
+declare function SheetFooter({ children, style }: SheetFooterProps): React.JSX.Element;
+declare function Sheet({ open, onClose, title, subtitle, description, showCloseButton, children, style, contentStyle, scrollable, maxHeight, keyboardBehavior, keyboardBlurBehavior, enableBlurKeyboardOnGesture, android_keyboardInputMode, footer, snapPoints, }: SheetProps): React.JSX.Element;
+declare namespace Sheet {
+    var Header: typeof SheetHeader;
+    var Content: typeof SheetContent;
+    var Footer: typeof SheetFooter;
+}
+
+export { Sheet, type SheetProps };

package/dist/Sheet.js

@@ -0,0 +1,340 @@
+'use strict';
+
+var React2 = require('react');
+var reactNative = require('react-native');
+var bottomSheet = require('@gorhom/bottom-sheet');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
+var vectorIcons = require('@expo/vector-icons');
+var reactNativeSizeMatters = require('react-native-size-matters');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+// src/components/Sheet/Sheet.tsx
+var _haptics = null;
+async function getHaptics() {
+  if (reactNative.Platform.OS === "web") return null;
+  if (!_haptics) {
+    _haptics = await import('expo-haptics');
+  }
+  return _haptics;
+}
+function impactMedium() {
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => h?.impactAsync(h.ImpactFeedbackStyle.Medium));
+}
+
+// src/theme/colorUtils.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  if (full.length !== 6) return null;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function componentToHex(c) {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
+}
+function rgbToHex(r, g, b) {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function withAlphaOnWhite(hex, alpha) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const r = rgb.r * alpha + 255 * (1 - alpha);
+  const g = rgb.g * alpha + 255 * (1 - alpha);
+  const b = rgb.b * alpha + 255 * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
+  const rgb = hexToRgb(hex);
+  const bg = hexToRgb(bgHex);
+  if (!rgb || !bg) return hex;
+  const r = rgb.r * alpha + bg.r * (1 - alpha);
+  const g = rgb.g * alpha + bg.g * (1 - alpha);
+  const b = rgb.b * alpha + bg.b * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function mixWithBackground(fgHex, bgHex, opacity) {
+  const fg = hexToRgb(fgHex);
+  const bg = hexToRgb(bgHex);
+  if (!fg || !bg) return fgHex;
+  const r = fg.r * opacity + bg.r * (1 - opacity);
+  const g = fg.g * opacity + bg.g * (1 - opacity);
+  const b = fg.b * opacity + bg.b * (1 - opacity);
+  return rgbToHex(r, g, b);
+}
+function lighten(hex, amount) {
+  return withAlphaOnWhite(hex, 1 - amount);
+}
+function darken(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
+}
+
+// src/theme/colors.ts
+var defaultLight = {
+  background: "#ffffff",
+  foreground: "#1a1a1a",
+  card: "#ffffff",
+  primary: "#1a1a1a",
+  primaryForeground: "#ffffff",
+  // AUDIT FIX: brand accent — was undefined; falls back to primary when omitted
+  accent: "#d4561d",
+  accentForeground: "#ffffff",
+  border: "#dddddd",
+  // AUDIT FIX: was #e53935 (4.22:1 on white — fails AA); #c72828 = 5.59:1 ✓
+  destructive: "#c72828",
+  destructiveForeground: "#ffffff",
+  success: "#1a7a45",
+  successForeground: "#ffffff",
+  // AUDIT FIX: was #e67e00 (2.86:1 — severe fail); #9a5200 = 5.86:1 ✓ AAA-near
+  warning: "#9a5200",
+  warningForeground: "#ffffff"
+};
+function deriveColors(t, scheme) {
+  const dark = scheme === "dark";
+  const bg = t.background;
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.7);
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.62);
+  const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
+  const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
+  const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
+  const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
+  const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
+  const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
+  const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
+  return {
+    ...t,
+    foregroundSubtle,
+    foregroundMuted,
+    surface,
+    surfaceStrong,
+    destructiveTint,
+    destructiveBorder,
+    successTint,
+    successBorder,
+    warningTint,
+    warningBorder,
+    overlay: t.overlay ?? "rgba(0,0,0,0.45)",
+    accentResolved: t.accent ?? t.primary,
+    accentForegroundResolved: t.accentForeground ?? t.primaryForeground,
+    ring: t.accent ?? t.primary,
+    input: t.border,
+    separator: dark ? lighten(t.border, 0.22) : darken(t.border, 0.16)
+  };
+}
+
+// src/theme/ThemeProvider.tsx
+var ThemeContext = React2.createContext({
+  colors: deriveColors(defaultLight, "light"),
+  colorScheme: "light"
+});
+function useTheme() {
+  const context = React2.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var isWeb = reactNative.Platform.OS === "web";
+var s = isWeb ? (n) => n : reactNativeSizeMatters.scale;
+var vs = isWeb ? (n) => n : reactNativeSizeMatters.verticalScale;
+var ms = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateScale;
+var mvs = isWeb ? (n, _factor) => n : reactNativeSizeMatters.moderateVerticalScale;
+
+// src/components/Sheet/Sheet.tsx
+var SCREEN_HEIGHT = reactNative.Dimensions.get("window").height;
+var DEFAULT_MAX_HEIGHT = SCREEN_HEIGHT * 0.85;
+var isAndroid = reactNative.Platform.OS === "android";
+function SheetHeader({ children, style }) {
+  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.header, style] }, children);
+}
+function SheetContent({ children, style }) {
+  return /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: [styles.sheetContent, style] }, children);
+}
+function SheetFooter({ children, style }) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React2__default.default.createElement(reactNative.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
+}) {
+  const { colors } = useTheme();
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const ref = React2.useRef(null);
+  const effectiveKeyboardBehavior = keyboardBehavior ?? "interactive";
+  React2.useEffect(() => {
+    if (open) {
+      impactMedium();
+      ref.current?.present();
+    } else {
+      ref.current?.dismiss();
+    }
+  }, [open]);
+  const renderBackdrop = React2.useCallback((props) => /* @__PURE__ */ React2__default.default.createElement(
+    bottomSheet.BottomSheetBackdrop,
+    {
+      ...props,
+      disappearsOnIndex: -1,
+      appearsOnIndex: 0,
+      pressBehavior: "close"
+    }
+  ), []);
+  const childArray = React2__default.default.Children.toArray(children);
+  const customHeader = childArray.find((child) => React2__default.default.isValidElement(child) && child.type === SheetHeader);
+  const customContent = childArray.find((child) => React2__default.default.isValidElement(child) && child.type === SheetContent);
+  const customFooter = childArray.find((child) => React2__default.default.isValidElement(child) && child.type === SheetFooter);
+  const filteredChildren = customHeader || customContent || customFooter ? childArray.filter(
+    (child) => !React2__default.default.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__ */ React2__default.default.createElement(reactNative.View, { style: styles.header, accessibilityRole: "header" }, /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: styles.headerRow }, title ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.title, { color: colors.foreground }], allowFontScaling: true }, title) : /* @__PURE__ */ React2__default.default.createElement(reactNative.View, { style: { flex: 1 } }), showCloseButton ? /* @__PURE__ */ React2__default.default.createElement(
+    reactNative.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__ */ React2__default.default.createElement(vectorIcons.AntDesign, { name: "close", size: ms(18), color: colors.foregroundMuted })
+  ) : null), effectiveSubtitle ? /* @__PURE__ */ React2__default.default.createElement(reactNative.Text, { style: [styles.subtitle, { color: colors.foregroundMuted }], allowFontScaling: true }, effectiveSubtitle) : null) : null;
+  const contentNode = customContent ? customContent : filteredChildren;
+  const effectiveFooter = customFooter ? customFooter : footer;
+  const renderFooter = React2.useCallback((props) => {
+    if (!effectiveFooter) return null;
+    return /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetFooter, { ...props }, effectiveFooter);
+  }, [effectiveFooter]);
+  const useScroll = scrollable || !!maxHeight;
+  const effectiveMaxHeight = maxHeight ?? DEFAULT_MAX_HEIGHT;
+  const useDynamicSizing = !snapPoints;
+  return /* @__PURE__ */ React2__default.default.createElement(
+    bottomSheet.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__ */ React2__default.default.createElement(
+      bottomSheet.BottomSheetScrollView,
+      {
+        contentContainerStyle: [
+          styles.scrollContent,
+          style
+        ],
+        style: contentStyle,
+        showsVerticalScrollIndicator: true,
+        indicatorStyle: "black",
+        persistentScrollbar: isAndroid
+      },
+      headerNode,
+      contentNode
+    ) : /* @__PURE__ */ React2__default.default.createElement(bottomSheet.BottomSheetView, { style: [styles.content, contentStyle, style] }, headerNode, contentNode)
+  );
+}
+Sheet.Header = SheetHeader;
+Sheet.Content = SheetContent;
+Sheet.Footer = SheetFooter;
+var styles = reactNative.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)
+  }
+});
+
+Object.defineProperty(exports, "BottomSheetModalProvider", {
+  enumerable: true,
+  get: function () { return bottomSheet.BottomSheetModalProvider; }
+});
+Object.defineProperty(exports, "SheetTextInput", {
+  enumerable: true,
+  get: function () { return bottomSheet.BottomSheetTextInput; }
+});
+exports.Sheet = Sheet;

package/dist/Sheet.mjs

@@ -0,0 +1,4 @@
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-AU2VDY4P.mjs';
+import './chunk-RTC3CFXF.mjs';
+import './chunk-SOYNZDVY.mjs';
+import './chunk-2CE3TQVY.mjs';

package/dist/Skeleton.d.mts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type SkeletonPreset = 'base' | 'circle' | 'text';
+interface SkeletonProps {
+    width?: number | string;
+    height?: number;
+    borderRadius?: number;
+    /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
+    preset?: SkeletonPreset;
+    /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
+    diameter?: number;
+    style?: ViewStyle;
+}
+declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
+
+export { Skeleton, type SkeletonProps };

package/dist/Skeleton.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+
+type SkeletonPreset = 'base' | 'circle' | 'text';
+interface SkeletonProps {
+    width?: number | string;
+    height?: number;
+    borderRadius?: number;
+    /** Preset shape. `'circle'` forces width=height square with full radius. `'text'` renders a short line. */
+    preset?: SkeletonPreset;
+    /** Only used with `preset='circle'` — overrides the diameter. Defaults to 40. */
+    diameter?: number;
+    style?: ViewStyle;
+}
+declare function Skeleton({ width, height, borderRadius, preset, diameter, style, }: SkeletonProps): React.JSX.Element;
+
+export { Skeleton, type SkeletonProps };