diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 80ece0c0c9..fead8b49bb 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -34,6 +34,7 @@ export function Outer({ control, testID, nativeOptions, + type = 'sheet', }: React.PropsWithChildren<{ control: Dialog.DialogControlProps testID?: string @@ -41,6 +42,12 @@ export function Outer({ * Native-specific options for the prompt. Extends `BottomSheetViewProps` */ nativeOptions?: Omit + /** + * The presentation style of the prompt. + * - `sheet` (default): Bottom sheet on native, standard modal on web. + * - `alert`: Centered alert modal on all platforms. + */ + type?: 'sheet' | 'alert' }>) { const titleId = useId() const descriptionId = useId() @@ -54,9 +61,10 @@ export function Outer({ - + {type !== 'alert' && } + color?: ButtonColor +}) { + const t = useTheme() + + let iconColor: string + switch (color) { + case 'negative': + iconColor = t.palette.negative_500 + break + case 'primary': + iconColor = t.palette.primary_500 + break + default: + iconColor = t.atoms.text.color + break + } + + return ( + + + + ) +} + export function TitleText({ children, style, @@ -210,6 +247,8 @@ export function Basic({ onConfirm, confirmButtonColor, showCancel = true, + type, + icon, }: React.PropsWithChildren<{ control: Dialog.DialogOuterProps['control'] title: string @@ -226,10 +265,13 @@ export function Basic({ onConfirm: (e: GestureResponderEvent) => void confirmButtonColor?: ButtonColor showCancel?: boolean + type?: 'sheet' | 'alert' + icon?: React.ComponentType }>) { return ( - + + {icon && } {title} {description && {description}}