@retray-dev/ui-kit 6.2.0 → 9.0.0

package/dist/Sheet.d.mts

@@ -0,0 +1,93 @@
+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)[];
+    /**
+     * When true, render as a centered modal dialog on wide screens (width ≥
+     * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
+     * bottom sheet. Use for store/category/picker dialogs that should feel native
+     * on tablets and web.
+     *
+     * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
+     * is not required there — use a regular `TextInput`.
+     */
+    responsive?: boolean;
+    /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
+    dialogMaxWidth?: 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, responsive, dialogMaxWidth, }: 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,93 @@
+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)[];
+    /**
+     * When true, render as a centered modal dialog on wide screens (width ≥
+     * `BREAKPOINTS.wide`) instead of a bottom sheet. On narrow screens it stays a
+     * bottom sheet. Use for store/category/picker dialogs that should feel native
+     * on tablets and web.
+     *
+     * Note: the centered-dialog path uses a plain RN `Modal`, so `SheetTextInput`
+     * is not required there — use a regular `TextInput`.
+     */
+    responsive?: boolean;
+    /** Max width of the centered dialog (dp). Only applies when `responsive`. Defaults to 480. */
+    dialogMaxWidth?: 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, responsive, dialogMaxWidth, }: 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,450 @@
+'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);
+
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var _haptics = null;
+var _hapticsLoaded = false;
+async function getHaptics() {
+  if (reactNative.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 reactNative.NativeModules?.RNPulsar != null;
+  } catch {
+    return false;
+  }
+}
+function getPulsar() {
+  if (reactNative.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 impactMedium() {
+  if (reactNative.Platform.OS === "web") return;
+  getHaptics().then((h) => {
+    if (h) {
+      h.impactAsync(h.ImpactFeedbackStyle.Medium);
+    } else {
+      getPulsar()?.Presets.System.impactMedium();
+    }
+  });
+}
+
+// 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/tokens.ts
+var RADIUS = {
+  lg: 20};
+var SHADOWS = {
+  xl: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.24,
+    shadowRadius: 24,
+    elevation: 18
+  }
+};
+var BREAKPOINTS = {
+  wide: 700
+};
+
+// 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,
+  responsive = false,
+  dialogMaxWidth = 480
+}) {
+  const { colors } = useTheme();
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const { width: windowWidth } = reactNative.useWindowDimensions();
+  const ref = React2.useRef(null);
+  const asDialog = responsive && windowWidth >= BREAKPOINTS.wide;
+  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]);
+  if (asDialog) {
+    return /* @__PURE__ */ React2__default.default.createElement(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: onClose }, /* @__PURE__ */ React2__default.default.createElement(reactNative.Pressable, { style: styles.dialogBackdrop, onPress: onClose, accessibilityRole: "button", accessibilityLabel: "Close" }, /* @__PURE__ */ React2__default.default.createElement(
+      reactNative.Pressable,
+      {
+        style: [
+          styles.dialogCard,
+          { backgroundColor: colors.card, maxWidth: dialogMaxWidth, maxHeight: SCREEN_HEIGHT * 0.85 }
+        ],
+        onPress: () => {
+        }
+      },
+      headerNode,
+      /* @__PURE__ */ React2__default.default.createElement(
+        reactNative.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__ */ 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)
+  },
+  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)
+  }
+});
+
+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,6 @@
+export { BottomSheetModalProvider, Sheet, BottomSheetTextInput as SheetTextInput } from './chunk-PFZTM6D5.mjs';
+import './chunk-EJ7ZPXOH.mjs';
+import './chunk-QY3X2UYR.mjs';
+import './chunk-SOYNZDVY.mjs';
+import './chunk-2CE3TQVY.mjs';
+import './chunk-Y6FXYEAI.mjs';