@utilitywarehouse/hearth-react-native 0.9.0 → 0.11.0

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';

package/build/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordion';
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
 export * from './Banner';
 export * from './BodyText';
@@ -12,6 +13,7 @@ export * from './Center';
 export * from './Checkbox';
 export * from './Container';
 export * from './CurrencyInput';
+export * from './DateInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
 export * from './DescriptionList';
@@ -37,6 +39,7 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './PillGroup';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -48,6 +51,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Toast';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/components/index.js

@@ -1,6 +1,7 @@
 // Custom
 export * from './Accordion';
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
 export * from './Banner';
 export * from './BodyText';
@@ -13,6 +14,7 @@ export * from './Center';
 export * from './Checkbox';
 export * from './Container';
 export * from './CurrencyInput';
+export * from './DateInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
 export * from './DescriptionList';
@@ -38,6 +40,7 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './PillGroup';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -49,6 +52,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Toast';
 export * from './ToggleButtonCard';
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';
 export { Pressable } from 'react-native';

package/build/tokens/components/dark/checkbox.d.ts

@@ -27,6 +27,9 @@ declare const _default: {
         readonly gap: 8;
         readonly group: {
             readonly gap: 12;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/dark/checkbox.js

@@ -27,6 +27,9 @@ export default {
         gap: 8,
         group: {
             gap: 12,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },

package/build/tokens/components/dark/input.d.ts

@@ -13,6 +13,12 @@ declare const _default: {
         readonly gap: 8;
     };
     readonly gap: 6;
+    readonly heading: {
+        readonly gap: 12;
+        readonly text: {
+            readonly gap: 0;
+        };
+    };
     readonly height: 48;
     readonly label: {
         readonly gap: 6;

package/build/tokens/components/dark/input.js

@@ -13,6 +13,12 @@ export default {
         gap: 8,
     },
     gap: 6,
+    heading: {
+        gap: 12,
+        text: {
+            gap: 0,
+        },
+    },
     height: 48,
     label: {
         gap: 6,

package/build/tokens/components/dark/radio.d.ts

@@ -24,6 +24,9 @@ declare const _default: {
         readonly gap: 8;
         readonly group: {
             readonly gap: 8;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/dark/radio.js

@@ -24,6 +24,9 @@ export default {
         gap: 8,
         group: {
             gap: 8,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },

package/build/tokens/components/dark/table.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly cell: {
         readonly borderWidth: 1;
+        readonly minHeight: 48;
         readonly padding: 12;
     };
     readonly emphasis: {
@@ -13,6 +14,7 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly height: 56;
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/dark/table.js

@@ -5,6 +5,7 @@ export default {
     borderRadius: 16,
     cell: {
         borderWidth: 1,
+        minHeight: 48,
         padding: 12,
     },
     emphasis: {
@@ -13,6 +14,7 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        height: 56,
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/dark/toast.d.ts

@@ -4,10 +4,14 @@
 declare const _default: {
     readonly backgroundColor: "#3f3f3f";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 16;
+    readonly bottomPosition: 32;
+    readonly gap: 16;
     readonly padding: 14;
     readonly stack: {
-        readonly gapHorizontal: 8;
+        readonly gap: 12;
+    };
+    readonly text: {
+        readonly gap: 8;
     };
 };
 export default _default;

package/build/tokens/components/dark/toast.js

@@ -4,9 +4,13 @@
 export default {
     backgroundColor: '#3f3f3f',
     borderRadius: 8,
-    gapHorizontal: 16,
+    bottomPosition: 32,
+    gap: 16,
     padding: 14,
     stack: {
-        gapHorizontal: 8,
+        gap: 12,
+    },
+    text: {
+        gap: 8,
     },
 };

package/build/tokens/components/light/checkbox.d.ts

@@ -27,6 +27,9 @@ declare const _default: {
         readonly gap: 12;
         readonly group: {
             readonly gap: 6;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/light/checkbox.js

@@ -27,6 +27,9 @@ export default {
         gap: 12,
         group: {
             gap: 6,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },

package/build/tokens/components/light/input.d.ts

@@ -13,6 +13,12 @@ declare const _default: {
         readonly gap: 8;
     };
     readonly gap: 6;
+    readonly heading: {
+        readonly gap: 12;
+        readonly text: {
+            readonly gap: 2;
+        };
+    };
     readonly height: 48;
     readonly label: {
         readonly gap: 2;

package/build/tokens/components/light/input.js

@@ -13,6 +13,12 @@ export default {
         gap: 8,
     },
     gap: 6,
+    heading: {
+        gap: 12,
+        text: {
+            gap: 2,
+        },
+    },
     height: 48,
     label: {
         gap: 2,

package/build/tokens/components/light/radio.d.ts

@@ -24,6 +24,9 @@ declare const _default: {
         readonly gap: 8;
         readonly group: {
             readonly gap: 12;
+            readonly heading: {
+                readonly gap: 2;
+            };
             readonly stack: {
                 readonly gap: 12;
             };

package/build/tokens/components/light/radio.js

@@ -24,6 +24,9 @@ export default {
         gap: 8,
         group: {
             gap: 12,
+            heading: {
+                gap: 2,
+            },
             stack: {
                 gap: 12,
             },

package/build/tokens/components/light/table.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     readonly borderRadius: 16;
     readonly cell: {
         readonly borderWidth: 1;
+        readonly minHeight: 48;
         readonly padding: 12;
     };
     readonly emphasis: {
@@ -13,6 +14,7 @@ declare const _default: {
     readonly headerCell: {
         readonly borderWidth: 2;
         readonly gap: 8;
+        readonly height: 56;
         readonly paddingHorizontal: 12;
         readonly paddingVertical: 16;
     };

package/build/tokens/components/light/table.js

@@ -5,6 +5,7 @@ export default {
     borderRadius: 16,
     cell: {
         borderWidth: 1,
+        minHeight: 48,
         padding: 12,
     },
     emphasis: {
@@ -13,6 +14,7 @@ export default {
     headerCell: {
         borderWidth: 2,
         gap: 8,
+        height: 56,
         paddingHorizontal: 12,
         paddingVertical: 16,
     },

package/build/tokens/components/light/toast.d.ts

@@ -4,10 +4,14 @@
 declare const _default: {
     readonly backgroundColor: "#101010";
     readonly borderRadius: 8;
-    readonly gapHorizontal: 16;
+    readonly bottomPosition: 32;
+    readonly gap: 16;
     readonly padding: 14;
     readonly stack: {
-        readonly gapHorizontal: 8;
+        readonly gap: 12;
+    };
+    readonly text: {
+        readonly gap: 8;
     };
 };
 export default _default;

package/build/tokens/components/light/toast.js

@@ -4,9 +4,13 @@
 export default {
     backgroundColor: '#101010',
     borderRadius: 8,
-    gapHorizontal: 16,
+    bottomPosition: 32,
+    gap: 16,
     padding: 14,
     stack: {
-        gapHorizontal: 8,
+        gap: 12,
+    },
+    text: {
+        gap: 8,
     },
 };

package/build/utils/getInitials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name?: string): string | undefined;

package/build/utils/getInitials.js

@@ -0,0 +1,8 @@
+export function getInitials(name) {
+    if (!name)
+        return undefined;
+    const regex = new RegExp(/(\p{L}{1})\p{L}+/gu);
+    const names = [...name.matchAll(regex)];
+    const initials = (names.shift()?.[1] || '') + (names.pop()?.[1] || '');
+    return initials.toUpperCase();
+}

package/build/utils/index.d.ts

@@ -3,6 +3,7 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
 export * from './themeValueHelpers';

package/build/utils/index.js

@@ -3,6 +3,7 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
 export * from './themeValueHelpers';