@utilitywarehouse/hearth-react-native 0.8.2 → 0.10.0

package/build/components/Modal/Modal.web.js

@@ -12,7 +12,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -20,7 +20,7 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const triggerCloseAnimation = useCallback(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
                 duration: 50,
                 easing: Easing.in(Easing.quad),
@@ -30,14 +30,14 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.in(Easing.quad),
             });
         }
-    }, [Platform.OS, fullscreen, pretendContentTranslateY, backgroundOpacity]);
+    }, [Platform.OS, inNavModal, pretendContentTranslateY, backgroundOpacity]);
     useImperativeHandle(ref, () => ({
         ...bottomSheetModalRef.current,
         triggerCloseAnimation,
     }));
-    // Trigger animations on render for fullscreen Android modal
+    // Trigger animations on render for inNavModal Android modal
     useEffect(() => {
-        if (Platform.OS === 'android' && fullscreen) {
+        if (Platform.OS === 'android' && inNavModal) {
             backgroundOpacity.value = withDelay(300, withTiming(1, {
                 duration: 200,
                 easing: Easing.out(Easing.quad),
@@ -47,11 +47,11 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
                 easing: Easing.out(Easing.quad),
             }));
         }
-    }, [fullscreen, backgroundOpacity, pretendContentTranslateY]);
+    }, [inNavModal, backgroundOpacity, pretendContentTranslateY]);
     const animatedBackgroundStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
-    const animatedFullscreenStyle = useAnimatedStyle(() => ({
+    const animatedInNavModalStyle = useAnimatedStyle(() => ({
         backgroundColor: hexWithOpacity(theme.components.overlay.backgroundColor, backgroundOpacity.value * (theme.components.overlay.opacity / 100)),
     }));
     const animatedPretendContentStyle = useAnimatedStyle(() => ({
@@ -98,20 +98,20 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         }
     };
     const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [_jsx(Image, { style: styles.image, ...image }), _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
-    return fullscreen ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.fullscreenContainer, Platform.OS === 'android' && animatedFullscreenStyle], children: _jsx(View, { style: styles.fullscreenContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
+    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, ...props, onChange: handleChange, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content }) }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     container: {
         flex: 1,
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     header: {
         flexDirection: 'row',
-        gap: theme.components.dialog.gap,
+        gap: theme.components.modal.gap,
     },
     headerTextContent: {
         flex: 1,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     image: {
         width: 260,
@@ -123,40 +123,40 @@ const styles = StyleSheet.create((theme, rt) => ({
         flex: 1,
     },
     textContent: {
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     loadingContainer: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
         minHeight: 140,
-        gap: theme.components.dialog.content.gap,
+        gap: theme.components.modal.content.gap,
     },
     footer: {
-        gap: theme.components.dialog.action.gap,
+        gap: theme.components.modal.action.gap,
     },
-    fullscreenContainer: {
+    inNavModalContainer: {
         flex: 1,
         ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),
     },
-    fullscreenContent: {
+    inNavModalContent: {
         flex: 1,
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        gap: theme.components.dialog.gap,
-        padding: theme.components.dialog.padding,
-        paddingBottom: theme.components.dialog.padding + rt.insets.bottom,
+        gap: theme.components.modal.gap,
+        padding: theme.components.modal.padding,
+        paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     },
     androidContainer: {
         height: rt.insets.top + 18,
-        paddingLeft: theme.components.dialog.padding,
-        paddingRight: theme.components.dialog.padding,
+        paddingLeft: theme.components.modal.padding,
+        paddingRight: theme.components.modal.padding,
         justifyContent: 'flex-end',
     },
     pretendContent: {
-        borderTopLeftRadius: theme.components.dialog.borderRadius,
-        borderTopRightRadius: theme.components.dialog.borderRadius,
+        borderTopLeftRadius: theme.components.modal.borderRadius,
+        borderTopRightRadius: theme.components.modal.borderRadius,
         height: 12,
         backgroundColor: theme.components.parts.modalStack.backgroundColorCardTop,
     },

package/build/components/PillGroup/Pill.d.ts

@@ -0,0 +1,16 @@
+import type { PillProps } from './Pill.props';
+export declare const Pill: import("react").ForwardRefExoticComponent<PillProps & {
+    states?: {
+        active?: boolean;
+    };
+} & Omit<import("react-native").PressableProps, "children"> & {
+    tabIndex?: 0 | -1 | undefined;
+} & {
+    children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
+        hovered?: boolean | undefined;
+        pressed?: boolean | undefined;
+        focused?: boolean | undefined;
+        focusVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => import("react").ReactNode);
+} & import("react").RefAttributes<unknown>>;

package/build/components/PillGroup/Pill.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPressable } from '@gluestack-ui/pressable';
+import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Icon } from '../Icon';
+import { BodyText } from '../BodyText';
+import { usePillGroupContext } from './PillGroup.context';
+const PillRoot = ({ value, label, icon, states = {}, ...props }) => {
+    const { active } = states;
+    const context = usePillGroupContext();
+    const isSelected = context?.value.includes(value) ?? false;
+    styles.useVariants({ selected: isSelected, active });
+    const handlePress = () => {
+        context?.onChange(value);
+    };
+    return (_jsxs(Pressable, { ...props, style: styles.pill, accessibilityRole: "button", accessibilityState: { selected: isSelected }, onPress: handlePress, children: [icon && _jsx(Icon, { as: icon, size: "sm", style: styles.icon }), _jsx(BodyText, { weight: "semibold", style: styles.text, children: label })] }));
+};
+export const Pill = createPressable({ Root: PillRoot });
+Pill.displayName = 'Pill';
+const styles = StyleSheet.create(theme => ({
+    pill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: theme.components.pill.height,
+        minWidth: theme.components.pill.minWidth,
+        gap: theme.components.pill.gap,
+        paddingHorizontal: theme.components.pill.paddingHorizontal,
+        paddingVertical: theme.components.pill.paddingVertical,
+        borderRadius: theme.components.pill.borderRadius,
+        borderWidth: theme.components.pill.borderWidth,
+        borderColor: theme.color.interactive.neutral.border.subtle,
+        backgroundColor: 'transparent',
+        _web: {
+            _hover: {
+                backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+            },
+            '_focus-visible': theme.helpers.focusVisible,
+        },
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+                },
+            },
+            selected: {
+                true: {
+                    backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    borderColor: theme.color.interactive.brand.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+                            borderColor: theme.color.interactive.brand.surface.strong.hover,
+                        },
+                    },
+                },
+            },
+        },
+        compoundVariants: [
+            {
+                selected: true,
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.brand.surface.strong.active,
+                    borderColor: theme.color.interactive.brand.surface.strong.active,
+                },
+            },
+        ],
+    },
+    text: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.text.inverted,
+                },
+                false: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+    icon: {
+        variants: {
+            selected: {
+                true: {
+                    color: theme.color.icon.inverted,
+                },
+                false: {
+                    color: theme.color.icon.primary,
+                },
+            },
+        },
+    },
+}));

package/build/components/PillGroup/Pill.props.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PressableProps } from 'react-native';
+export interface PillProps extends Omit<PressableProps, 'children'> {
+    /** Value returned when selected */
+    value: string;
+    /** Text label shown inside the pill */
+    label: string;
+    /** Left icon */
+    icon?: React.ComponentType<any>;
+}

package/build/components/PillGroup/Pill.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/PillGroup/PillGroup.context.d.ts

@@ -0,0 +1,6 @@
+export interface PillGroupContextValue {
+    value: string[];
+    onChange: (value: string) => void;
+}
+export declare const PillGroupContext: import("react").Context<PillGroupContextValue | null>;
+export declare const usePillGroupContext: () => PillGroupContextValue | null;

package/build/components/PillGroup/PillGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const PillGroupContext = createContext(null);
+export const usePillGroupContext = () => {
+    return useContext(PillGroupContext);
+};

package/build/components/PillGroup/PillGroup.d.ts

@@ -0,0 +1,5 @@
+import type { PillGroupProps } from './PillGroup.props';
+export declare const PillGroup: {
+    ({ children, value, multiple, wrap, onChange, style, ...props }: PillGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/build/components/PillGroup/PillGroup.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ScrollView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Box } from '../Box';
+import { PillGroupContext } from './PillGroup.context';
+export const PillGroup = ({ children, value, multiple = false, wrap = true, onChange, style, ...props }) => {
+    const normalizedValue = Array.isArray(value) ? value : [value];
+    const contextValue = useMemo(() => ({
+        value: normalizedValue,
+        onChange: (pillValue) => {
+            if (multiple) {
+                const newValue = normalizedValue.includes(pillValue)
+                    ? normalizedValue.filter(v => v !== pillValue)
+                    : [...normalizedValue, pillValue];
+                onChange?.(newValue);
+            }
+            else {
+                onChange?.(pillValue);
+            }
+        },
+    }), [normalizedValue, multiple, onChange]);
+    return (_jsx(PillGroupContext.Provider, { value: contextValue, children: wrap ? (_jsx(Box, { style: [styles.group, styles.wrap, style], ...props, children: children })) : (_jsx(ScrollView, { horizontal: true, contentContainerStyle: [styles.group, style], showsHorizontalScrollIndicator: false, ...props, children: children })) }));
+};
+PillGroup.displayName = 'PillGroup';
+const styles = StyleSheet.create(theme => ({
+    group: {
+        flexDirection: 'row',
+        gap: theme.components.pill.group.gap,
+    },
+    wrap: {
+        flexWrap: 'wrap',
+    },
+}));

package/build/components/PillGroup/PillGroup.props.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ScrollViewProps, ViewStyle } from 'react-native';
+export interface PillGroupProps extends Omit<ScrollViewProps, 'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'> {
+    /** Controlled selected value(s) */
+    value: string | string[];
+    /** Multi-select mode. Default = false */
+    multiple?: boolean;
+    /** Allow pills to wrap lines. Default = true */
+    wrap?: boolean;
+    /** Handle selection changes */
+    onChange?: (value: string | string[]) => void;
+    /** Children must be <Pill> elements */
+    children: React.ReactNode;
+    style?: ViewStyle | ViewStyle[];
+}

package/build/components/PillGroup/PillGroup.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/PillGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { PillGroup } from './PillGroup';
+export type { PillGroupProps } from './PillGroup.props';
+export { Pill } from './Pill';
+export type { PillProps } from './Pill.props';

package/build/components/PillGroup/index.js

@@ -0,0 +1,2 @@
+export { PillGroup } from './PillGroup';
+export { Pill } from './Pill';

package/build/components/Select/Select.js

@@ -77,7 +77,7 @@ const Select = ({ options = [], value, onValueChange, label, placeholder = 'Sele
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {
@@ -161,6 +161,7 @@ const styles = StyleSheet.create(theme => ({
     emptyContainer: {
         alignItems: 'center',
         justifyContent: 'center',
+        marginTop: theme.space.md,
     },
 }));
 Select.displayName = 'Select';

package/build/components/Toast/Toast.context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { ToastContextValue } from './Toast.props';
+declare const ToastContext: React.Context<ToastContextValue | undefined>;
+export declare const useToastContext: () => ToastContextValue;
+export declare const ToastProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useToast: () => ToastContextValue;
+export default ToastContext;

package/build/components/Toast/Toast.context.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import ToastItem from './ToastItem';
+const ToastContext = createContext(undefined);
+export const useToastContext = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error('useToastContext must be used within ToastProvider');
+    return ctx;
+};
+export const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const timers = useRef({});
+    const toastRefs = useRef({});
+    const removeToast = useCallback((id) => {
+        setToasts(s => s.filter(t => t.id !== id));
+        const timer = timers.current[id];
+        if (timer) {
+            clearTimeout(timer);
+            delete timers.current[id];
+        }
+        delete toastRefs.current[id];
+    }, []);
+    const addToast = useCallback((opts) => {
+        const id = opts.id ?? `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        const toast = {
+            id,
+            text: opts.text,
+            actionText: opts.actionText,
+            onPress: opts.onPress,
+            onDismiss: opts.onDismiss,
+            icon: opts.icon,
+            duration: opts.duration ?? 6000,
+            showDismissIcon: opts.showDismissIcon,
+            dismissOnPress: opts.dismissOnPress ?? true,
+        };
+        setToasts(s => [toast, ...s]);
+        // set auto-dismiss timer
+        if (toast.duration && toast.duration > 0) {
+            const t = setTimeout(() => {
+                // call dismiss animation if ref exists, otherwise remove immediately
+                const ref = toastRefs.current[id];
+                if (ref) {
+                    ref.dismiss();
+                }
+                else {
+                    removeToast(id);
+                }
+            }, toast.duration);
+            timers.current[id] = t;
+        }
+        return id;
+    }, [removeToast]);
+    useEffect(() => {
+        return () => {
+            // cleanup timers on unmount
+            Object.values(timers.current).forEach(t => clearTimeout(t));
+            timers.current = {};
+        };
+    }, []);
+    return (_jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [children, _jsx(View, { pointerEvents: "box-none", style: styles.container, children: _jsx(View, { style: styles.stack, children: toasts.map(t => (_jsx(ToastItem, { ref: el => {
+                            toastRefs.current[t.id] = el;
+                        }, toast: t, onClose: removeToast }, t.id))) }) })] }));
+};
+export const useToast = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error('useToast must be used within ToastProvider');
+    return ctx;
+};
+export default ToastContext;
+const styles = StyleSheet.create(theme => ({
+    container: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'stretch',
+        paddingBottom: theme.space['200'],
+        pointerEvents: 'box-none',
+    },
+    stack: {
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: theme.components.toast.stack.gap,
+    },
+}));

package/build/components/Toast/Toast.props.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export interface ToastOptions {
+    id?: string;
+    text: string | ReactNode;
+    /** Optional action text to display as a link */
+    actionText?: string;
+    /** Optional callback when action link or toast is pressed */
+    onPress?: () => void;
+    /** Optional callback when toast is dismissed */
+    onDismiss?: () => void;
+    /** Optional icon component */
+    icon?: React.ComponentType;
+    /** Duration in milliseconds; default 6000 */
+    duration?: number;
+    /** Whether to show the dismiss icon button; default true */
+    showDismissIcon?: boolean;
+    /** Whether to dismiss the toast when pressed; default true */
+    dismissOnPress?: boolean;
+}
+export interface ToastInstance extends ToastOptions {
+    id: string;
+    /** resolved duration */
+    duration: number;
+}
+export interface ToastContextValue {
+    addToast: (opts: ToastOptions) => string;
+    removeToast: (id: string) => void;
+}
+export default ToastOptions;

package/build/components/Toast/Toast.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Toast/ToastItem.d.ts

@@ -0,0 +1,10 @@
+import type { ToastInstance } from './Toast.props';
+export interface ToastItemHandle {
+    dismiss: () => void;
+}
+interface Props {
+    toast: ToastInstance;
+    onClose: (id: string) => void;
+}
+declare const ToastItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<ToastItemHandle>>;
+export default ToastItem;

package/build/components/Toast/ToastItem.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { scheduleOnRN } from 'react-native-worklets';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+const AnimatedView = Platform.OS === 'web' ? withUnistyles(Animated.View) : Animated.View;
+const ToastItem = forwardRef(({ toast, onClose }, ref) => {
+    const translateY = useSharedValue(30);
+    const opacity = useSharedValue(0);
+    const gestureTranslateY = useSharedValue(0);
+    useEffect(() => {
+        translateY.value = withTiming(0, { duration: 300 });
+        opacity.value = withTiming(1, { duration: 300 });
+        // Announce toast content to screen readers
+        // Use a slight delay to ensure iOS VoiceOver picks it up
+        const timer = setTimeout(() => {
+            const message = typeof toast.text === 'string' ? toast.text : 'Toast notification';
+            const announcement = toast.actionText ? `${message}, ${toast.actionText}` : message;
+            AccessibilityInfo.announceForAccessibility(announcement);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [toast.text, toast.actionText]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value + gestureTranslateY.value }],
+        opacity: opacity.value,
+    }));
+    const handleDismiss = (fromGesture = false) => {
+        'worklet';
+        // Call onDismiss callback if provided
+        if (toast.onDismiss) {
+            scheduleOnRN(toast.onDismiss);
+        }
+        // animate out then call onClose
+        if (!fromGesture) {
+            gestureTranslateY.value = 0;
+        }
+        // Continue from current position and animate further down
+        translateY.value = withTiming(100, { duration: 250 });
+        opacity.value = withTiming(0, { duration: 250 }, finished => {
+            if (finished)
+                scheduleOnRN(onClose, toast.id);
+        });
+    };
+    useImperativeHandle(ref, () => ({
+        dismiss: handleDismiss,
+    }));
+    const panGesture = Gesture.Pan()
+        .onUpdate(event => {
+        // only allow downward drag
+        if (event.translationY > 0) {
+            gestureTranslateY.value = event.translationY;
+        }
+    })
+        .onEnd(event => {
+        if (event.translationY > 30 || event.velocityY > 800) {
+            handleDismiss(true);
+        }
+        else {
+            // spring back to original position
+            gestureTranslateY.value = withSpring(0, {
+                damping: 20,
+                stiffness: 300,
+            });
+        }
+    });
+    const IconComp = toast.icon;
+    const showDismissIcon = toast.showDismissIcon !== false; // default true
+    const dismissOnPress = toast.dismissOnPress === true; // default false
+    const handlePress = () => {
+        if (toast.onPress) {
+            toast.onPress();
+            if (dismissOnPress) {
+                handleDismiss(false);
+            }
+        }
+    };
+    const toastContent = (_jsxs(View, { style: styles.inner, children: [_jsxs(View, { style: styles.content, children: [IconComp ? (_jsx(View, { style: styles.iconWrap, children: _jsx(Icon, { as: IconComp, style: styles.icon }) })) : null, _jsx(BodyText, { inverted: true, children: toast.text })] }), toast.actionText ? (_jsx(Link, { onPress: handlePress, showIcon: false, inverted: true, children: toast.actionText })) : null, showDismissIcon ? (_jsx(View, { style: styles.actions, children: _jsx(UnstyledIconButton, { icon: CloseSmallIcon, accessibilityLabel: "Dismiss", inverted: true, onPress: () => handleDismiss(false) }) })) : null] }));
+    return (_jsx(GestureDetector, { gesture: panGesture, children: _jsx(AnimatedView, { style: [styles.toast, animatedStyle], ...(Platform.OS === 'ios' && {
+                accessible: true,
+                accessibilityRole: 'alert',
+                accessibilityLiveRegion: 'polite',
+            }), importantForAccessibility: Platform.OS === 'android' ? 'no-hide-descendants' : undefined, children: toast.onPress ? (_jsx(Pressable, { onPress: handlePress, style: styles.pressable, children: toastContent })) : (toastContent) }) }));
+});
+ToastItem.displayName = 'ToastItem';
+const styles = StyleSheet.create(theme => ({
+    toast: {
+        backgroundColor: theme.components.toast.backgroundColor,
+        borderRadius: theme.components.toast.borderRadius,
+        padding: theme.components.toast.padding,
+        width: '95%',
+    },
+    pressable: {
+        width: '100%',
+    },
+    inner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        gap: theme.components.toast.gap,
+    },
+    iconWrap: {
+        width: 24,
+        height: 24,
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexShrink: 0,
+    },
+    icon: {
+        color: theme.color.icon.inverted,
+    },
+    content: {
+        flex: 1,
+        gap: theme.components.toast.text.gap,
+        flexDirection: 'row',
+        alignItems: 'center',
+        minWidth: 0,
+    },
+    actions: {
+        flexShrink: 0,
+    },
+}));
+export default ToastItem;

package/build/components/Toast/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast, useToastContext } from './Toast.context';
+export type { ToastInstance, ToastOptions } from './Toast.props';
+export { default as ToastItem } from './ToastItem';

package/build/components/Toast/index.js

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast, useToastContext } from './Toast.context';
+export { default as ToastItem } from './ToastItem';