import React from 'react'; import { StyleProp, TextStyle, ViewStyle } from 'react-native'; /** * Sheet height presets, matching UX4G specification and Figma `Size` variants: * * | Variant | Screen Height Ratio | Approx Height (800dp screen) | * |------------|---------------------|------------------------------| * | `peek` | 0.26 (26%) | ~208dp | * | `half` | 0.50 (50%) | ~400dp | * | `expanded` | 0.75 (75%) | ~600dp | * | `full` | 0.94 (94%) | ~752dp | */ export type Ux4gBottomSheetSize = 'peek' | 'half' | 'expanded' | 'full'; /** Horizontal arrangement of the footer actions. */ export type Ux4gBottomSheetFooterAlign = 'split' | 'left' | 'center' | 'right'; export interface Ux4gBottomSheetProps { /** Whether the sheet is shown. The component is fully controlled. */ visible: boolean; /** * Called when the sheet asks to close: backdrop tap, close button, Android back, * or swipe-down. Set `visible` to `false` in this callback. */ onDismiss: () => void; /** Height preset from the UX4G `Size` variants ('peek', 'half', 'expanded', 'full'). @default 'half' */ size?: Ux4gBottomSheetSize; /** Alias for `size` for developer convenience. */ snapPoint?: Ux4gBottomSheetSize; /** Explicit sheet height in pixels. Overrides `size` / `snapPoint` when provided. */ height?: number; /** Whether to render the header block. @default true */ showHeader?: boolean; /** Header title text. */ title?: string; /** Secondary subtitle / description text rendered below the title. */ description?: string; /** Subtle tag or muted text rendered next to the title. */ subtleText?: string; /** Leading icon / widget rendered before the title (e.g. logo or symbol). */ icon?: React.ReactNode; /** Whether to show the header close (✕) button. @default true */ showCloseButton?: boolean; /** Custom callback for close button press (defaults to `onDismiss`). */ onCloseClick?: () => void; /** Whether to show a divider under the header. @default false */ showHeaderDivider?: boolean; /** Sheet body content. */ children?: React.ReactNode; /** Wrap `children` in a scrollable ScrollView. @default true */ scrollable?: boolean; /** Whether to show a divider between content and footer. @default false */ showBottomDivider?: boolean; /** Whether to render the footer button bar. @default true */ showFooter?: boolean; /** Whether to show the primary action button. @default true */ showPrimaryButton?: boolean; /** Whether to show the secondary action button. @default true */ showSecondaryButton?: boolean; /** Text for the primary action button. @default 'Button' */ primaryButtonText?: string; /** Text for the secondary action button. @default 'Button' */ secondaryButtonText?: string; /** Callback fired when primary button is clicked (defaults to `onDismiss`). */ onPrimaryPress?: () => void; /** Callback fired when secondary button is clicked (defaults to `onDismiss`). */ onSecondaryPress?: () => void; /** Renders the primary action in the destructive error color. @default false */ isDestructive?: boolean; /** Footer button alignment layout. @default 'split' */ footerAlign?: Ux4gBottomSheetFooterAlign; /** Replaces the standard buttons with custom footer content. */ footerContent?: React.ReactNode; /** Whether swipe / drag gestures are enabled on the bottom sheet. @default true */ draggable?: boolean; /** Alias for `draggable`. @default true */ isDraggable?: boolean; /** Whether dragging up/down expands and collapses between multiple snap points. @default true */ enableDragToExpand?: boolean; /** Allowed snap points for draggable transitions. Defaults to all 4 UX4G sizes: `['peek', 'half', 'expanded', 'full']`. */ snapPoints?: Ux4gBottomSheetSize[]; /** Callback fired when the bottom sheet snaps to a new size during drag. */ onSnapChange?: (size: Ux4gBottomSheetSize) => void; /** Whether to show the top drag handle pill. @default true */ showDragHandle?: boolean; /** Whether to render the darkened background backdrop scrim. @default true */ showBackdrop?: boolean; /** Dismiss when the backdrop scrim is tapped. @default true */ dismissOnBackdropPress?: boolean; /** Whether to automatically apply bottom safe-area padding for device navigation bar (Android navigation buttons/gesture bar, iOS home bar). @default true */ useSafeArea?: boolean; /** Bottom safe-area padding in pixels. When omitted and `useSafeArea` is true, automatically calculates device navigation bar height so bottom buttons are never obscured. Pass explicit number to override. */ bottomInset?: number; /** Background color for the sheet surface. Defaults to theme surface color. */ backgroundColor?: string; /** Color of the backdrop scrim. Defaults to UX4G neutral950 with opacity. */ scrimColor?: string; /** Top-left and top-right corner radius in pixels. @default 16 */ cornerRadius?: number; /** Custom container style override for the sheet. */ style?: StyleProp; /** Custom content container style override. */ contentContainerStyle?: StyleProp; /** Custom title text style override. */ titleStyle?: StyleProp; /** Custom description text style override. */ descriptionStyle?: StyleProp; /** Test identifier for automated testing. */ testID?: string; } /** * **Ux4gBottomSheet** * * Fully draggable, developer-friendly, accessible Modal Bottom Sheet built strictly to UX4G Design System guidelines: * - Full **draggable** gesture support: swipe down to dismiss or drag between snap points (`peek` <-> `half` <-> `expanded` <-> `full`) * - **Fixed Bottom Action Buttons**: Buttons remain anchored at the bottom of the screen at all heights and throughout dragging * - 16dp top-left and top-right rounded corners (`cornerRadius: 16`) * - Top drag handle indicator pill * - Header row with icon, title, description, and close button * - Native UX4G Button components for primary and secondary actions * - Smooth physics with spring animations and velocity detection * - Full Dark Mode & Light Mode support via UX4G Theme Context * - Hardware Back button integration on Android */ export declare const Ux4gBottomSheet: React.FC; //# sourceMappingURL=BottomSheet.d.ts.map