@utilitywarehouse/hearth-react-native 0.9.0 → 0.11.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.9.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.11.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.9.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.11.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.11.0
+
+### Minor Changes
+
+- [#674](https://github.com/utilitywarehouse/hearth/pull/674) [`c617257`](https://github.com/utilitywarehouse/hearth/commit/c617257974b11c39d706d6fd46712a284ff5fe10) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DateInput` component
+
+- [#663](https://github.com/utilitywarehouse/hearth/pull/663) [`8889a07`](https://github.com/utilitywarehouse/hearth/commit/8889a07e347e9289928e679cee495d7656a4e9aa) Thanks [@Utakato](https://github.com/Utakato)! - Add Avatar component
+
+## 0.10.0
+
+### Minor Changes
+
+- [#659](https://github.com/utilitywarehouse/hearth/pull/659) [`99afbed`](https://github.com/utilitywarehouse/hearth/commit/99afbed95df550d5d5a8bb6e04f7640077bf4883) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - Adds `Pill` and `PillGroup` components
+
+- [#671](https://github.com/utilitywarehouse/hearth/pull/671) [`706448d`](https://github.com/utilitywarehouse/hearth/commit/706448d91f354cb96a71a5f3acc9d17aaa767078) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Toast` component
+
 ## 0.9.0
 
 ### Minor Changes

package/build/components/Avatar/Avatar.d.ts

@@ -0,0 +1,6 @@
+import AvatarProps from './Avatar.props';
+declare const Avatar: {
+    ({ src, name, size, delayMs, onLoadingStatusChange, style, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Avatar;

package/build/components/Avatar/Avatar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getInitials } from '../../utils';
+import BodyText from '../BodyText/BodyText';
+const Avatar = ({ src, name, size = 'md', delayMs = 0, onLoadingStatusChange, style, ...props }) => {
+    const [status, setStatus] = useState('idle');
+    const [isDelayed, setIsDelayed] = useState(delayMs > 0);
+    const { components } = useTheme();
+    useEffect(() => {
+        if (!src) {
+            setStatus('idle');
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    useEffect(() => {
+        onLoadingStatusChange?.(status);
+    }, [status, onLoadingStatusChange]);
+    useEffect(() => {
+        if (delayMs <= 0) {
+            setIsDelayed(false);
+            return;
+        }
+        const timerId = setTimeout(() => {
+            setIsDelayed(false);
+        }, delayMs);
+        return () => clearTimeout(timerId);
+    }, [delayMs]);
+    styles.useVariants({ size });
+    const initials = getInitials(name);
+    const handleLoad = () => setStatus('loaded');
+    const handleError = () => setStatus('error');
+    const showImage = src && status === 'loaded';
+    const showFallback = !showImage && !isDelayed;
+    const textSize = size === 'sm' ? 'md' : 'lg';
+    const FallbackIcon = size === 'sm' ? UserSmallIcon : UserMediumIcon;
+    return (_jsxs(View, { ...props, style: [styles.container, style], accessibilityRole: showImage && name ? 'image' : undefined, accessibilityLabel: showImage ? name : undefined, children: [src && (_jsx(Image, { source: src, style: styles.image, onLoad: handleLoad, onError: handleError, accessibilityElementsHidden: true })), showFallback && (_jsx(View, { style: styles.fallback, children: name ? (_jsx(BodyText, { size: textSize, weight: "semibold", textTransform: "uppercase", style: styles.text, children: initials })) : (_jsx(FallbackIcon, {})) }))] }));
+};
+Avatar.displayName = 'Avatar';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        backgroundColor: theme.color.surface.pig.subtle,
+        variants: {
+            size: {
+                sm: {
+                    width: theme.components.avatar.sm.width,
+                    height: theme.components.avatar.sm.height,
+                    borderRadius: theme.components.avatar.sm.borderRadius,
+                },
+                md: {
+                    width: theme.components.avatar.md.width,
+                    height: theme.components.avatar.md.height,
+                    borderRadius: theme.components.avatar.md.borderRadius,
+                },
+            },
+        },
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+    },
+    fallback: {
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        color: theme.color.text.primary,
+    },
+}));
+export default Avatar;

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

@@ -0,0 +1,28 @@
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface AvatarProps extends ViewProps {
+    /**
+     * The image source to display.
+     */
+    src?: ImageSourcePropType;
+    /**
+     * The name associated with the avatar, used for creating initials and accessibility label.
+     */
+    name?: string;
+    /**
+     * Sets the avatar size.
+     * @default md
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Delay in milliseconds before the image is rendered.
+     * Useful to prevent flickering when the image loads very quickly.
+     * @default 0
+     */
+    delayMs?: number;
+    /**
+     * Callback fired when the loading status of the image changes.
+     */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+}
+export default AvatarProps;

package/build/components/Avatar/Avatar.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { default as AvatarProps, AvatarLoadingStatus } from './Avatar.props';

package/build/components/Avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

package/build/components/DateInput/DateInput.d.ts

@@ -0,0 +1,6 @@
+import type { DateInputProps } from './DateInput.props';
+declare const DateInput: {
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import DateInputSegment from './DateInputSegment';
+const DateInput = ({ label, helperText, helperIcon, validationStatus = 'initial', validText, invalidText, disabled, readonly, required, hideDay = false, hideMonth = false, hideYear = false, dayPlaceholder = 'DD', monthPlaceholder = 'MM', yearPlaceholder = 'YYYY', dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(DateInputSegment, { label: "Day", placeholder: dayPlaceholder, value: dayValue, onChange: onDayChange, onFocus: onDayFocus, onBlur: onDayBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-day" })), !hideMonth && (_jsx(DateInputSegment, { label: "Month", placeholder: monthPlaceholder, value: monthValue, onChange: onMonthChange, onFocus: onMonthFocus, onBlur: onMonthBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 2, testID: "date-input-month" })), !hideYear && (_jsx(DateInputSegment, { label: "Year", placeholder: yearPlaceholder, value: yearValue, onChange: onYearChange, onFocus: onYearFocus, onBlur: onYearBlur, disabled: disabled, required: required, readonly: readonly, validationStatus: validationStatus, maxLength: 4, testID: "date-input-year" }))] }) }));
+};
+DateInput.displayName = 'DateInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        gap: theme.components.input.gap,
+    },
+    container: {
+        flexDirection: 'row',
+        gap: theme.components.input.date.gap,
+    },
+}));
+export default DateInput;

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

@@ -0,0 +1,79 @@
+import type { TextInputProps } from 'react-native';
+import type { FormFieldBaseProps } from '../FormField/FormField.props';
+export interface DateInputProps extends FormFieldBaseProps {
+    /**
+     * Whether the day segment is hidden.
+     * @default false
+     */
+    hideDay?: boolean;
+    /**
+     * Whether the month segment is hidden.
+     * @default false
+     */
+    hideMonth?: boolean;
+    /**
+     * Whether the year segment is hidden.
+     * @default false
+     */
+    hideYear?: boolean;
+    /**
+     * Placeholder text for the day segment.
+     */
+    dayPlaceholder?: string;
+    /**
+     * Placeholder text for the month segment.
+     */
+    monthPlaceholder?: string;
+    /**
+     * Placeholder text for the year segment.
+     */
+    yearPlaceholder?: string;
+    /**
+     * The controlled value for the day segment. Must be used with an `onDayChange` handler.
+     */
+    dayValue?: string;
+    /**
+     * The controlled value for the month segment. Must be used with an `onMonthChange` handler.
+     */
+    monthValue?: string;
+    /**
+     * The controlled value for the year segment. Must be used with an `onYearChange` handler.
+     */
+    yearValue?: string;
+    /**
+     * Callback fired when the day value changes.
+     */
+    onDayChange?: (text: string) => void;
+    /**
+     * Callback fired when the month value changes.
+     */
+    onMonthChange?: (text: string) => void;
+    /**
+     * Callback fired when the year value changes.
+     */
+    onYearChange?: (text: string) => void;
+    /**
+     * Callback fired when the day segment receives focus.
+     */
+    onDayFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the month segment receives focus.
+     */
+    onMonthFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the year segment receives focus.
+     */
+    onYearFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the day segment loses focus.
+     */
+    onDayBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the month segment loses focus.
+     */
+    onMonthBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the year segment loses focus.
+     */
+    onYearBlur?: TextInputProps['onBlur'];
+}

package/build/components/DateInput/DateInput.props.js

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

package/build/components/DateInput/DateInputSegment.d.ts

@@ -0,0 +1,20 @@
+import type { DateInputProps } from './DateInput.props';
+interface DateInputSegmentProps {
+    label: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (text: string) => void;
+    onFocus?: DateInputProps['onDayFocus'];
+    onBlur?: DateInputProps['onDayBlur'];
+    disabled?: boolean;
+    required?: boolean;
+    validationStatus?: DateInputProps['validationStatus'];
+    maxLength?: number;
+    readonly?: boolean;
+    testID?: string;
+}
+declare const DateInputSegment: {
+    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Input } from '../Input';
+const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }) => {
+    styles.useVariants({ disabled });
+    return (_jsxs(View, { style: styles.container, children: [_jsx(BodyText, { size: "md", style: styles.label, children: label }), _jsx(Input, { value: value, onChangeText: onChange, onFocus: onFocus, onBlur: onBlur, placeholder: disabled ? undefined : placeholder, keyboardType: "number-pad", maxLength: maxLength, testID: testID, accessibilityLabel: label, disabled: disabled, validationStatus: validationStatus, readonly: readonly, style: styles.input })] }));
+};
+DateInputSegment.displayName = 'DateInputSegment';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flex: 1,
+        gap: theme.components.input.gap,
+        maxWidth: 96,
+    },
+    label: {
+        variants: {
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                },
+            },
+        },
+    },
+    input: {
+        flex: 1,
+        maxWidth: 96,
+    },
+}));
+export default DateInputSegment;

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

@@ -0,0 +1,2 @@
+export { default as DateInput } from './DateInput';
+export type { DateInputProps } from './DateInput.props';

package/build/components/DateInput/index.js

@@ -0,0 +1 @@
+export { default as DateInput } from './DateInput';

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;