@utilitywarehouse/hearth-react-native 0.8.1 → 0.9.0

package/.storybook/preview.tsx

@@ -72,6 +72,7 @@ const preview = {
           'Theme Tokens',
           'Hooks',
           'Layout Components',
+          'Guides',
           'All Components',
           'Primitives',
           'Typography',

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.8.1 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.9.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.8.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.9.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,29 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.9.0
+
+### Minor Changes
+
+- [#658](https://github.com/utilitywarehouse/hearth/pull/658) [`2ac2366`](https://github.com/utilitywarehouse/hearth/commit/2ac2366aaa7f3b253fd9336664a73a64f1ab91a5) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `Menu` component
+
+- [#656](https://github.com/utilitywarehouse/hearth/pull/656) [`a01a49a`](https://github.com/utilitywarehouse/hearth/commit/a01a49a49ec1dd3c04684ce010281030d45c77a1) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `fullscreen` and `inNavModal` props to `Modal`
+
+## 0.8.2
+
+### Patch Changes
+
+- [#652](https://github.com/utilitywarehouse/hearth/pull/652) [`5119703`](https://github.com/utilitywarehouse/hearth/commit/5119703a31f663cc8c0a8bb2c6ba5b10f9bf72d6) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `RadioCard` label wrapping issue
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `ListAction` icon size
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Banner` text gap size
+
+- [#651](https://github.com/utilitywarehouse/hearth/pull/651) [`4ee77b7`](https://github.com/utilitywarehouse/hearth/commit/4ee77b75e58ac4abbeba375ecb367d8899c7f1a0) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `Banner` image and height issue
+
+- [#649](https://github.com/utilitywarehouse/hearth/pull/649) [`7374535`](https://github.com/utilitywarehouse/hearth/commit/737453598ad5e885b35b5fcd2e4c4ccff4910c43) Thanks [@jordmccord](https://github.com/jordmccord)! - Fixes `List` to only show `Card` container if it has children
+
+- [#648](https://github.com/utilitywarehouse/hearth/pull/648) [`c90ea5c`](https://github.com/utilitywarehouse/hearth/commit/c90ea5ce165f27ccfc9774ec58ac642d02b349d1) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `shadowColor` prop to `Card` and exposes helpers in theme
+
 ## 0.8.1
 
 ### Patch Changes

package/build/components/Banner/Banner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronRightSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Pressable, View } from 'react-native';
+import { Image, Pressable, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Card } from '../Card';
@@ -8,6 +8,9 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { ThemedImage } from '../ThemedImage';
 import { UnstyledIconButton } from '../UnstyledIconButton';
+const isThemedImageProps = (props) => {
+    return 'light' in props && 'dark' in props;
+};
 const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', colorScheme = 'pig', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
     styles.useVariants({ direction, hasIllustration });
@@ -16,10 +19,16 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
             return (_jsx(IconContainer, { icon: icon, variant: iconContainerVariant, size: iconContainerSize, color: iconContainerColor, style: styles.media }));
         }
         if (illustration) {
-            return (_jsx(ThemedImage, { light: illustration.light, dark: illustration.dark, style: styles.image, accessible: true, accessibilityLabel: heading }));
+            if (isThemedImageProps(illustration)) {
+                return (_jsx(ThemedImage, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
+            }
+            return (_jsx(Image, { ...illustration, resizeMode: "cover", style: [styles.media, styles.imageWrapper, illustration.style] }));
         }
         if (image) {
-            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { light: image.light, dark: image.dark, style: styles.image, accessible: true, accessibilityLabel: heading }) }));
+            if (isThemedImageProps(image)) {
+                return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(ThemedImage, { ...image, style: [styles.image, image.style] }) }));
+            }
+            return (_jsx(View, { style: [styles.media, styles.imageWrapper], children: _jsx(Image, { ...image, style: [styles.image, image.style] }) }));
         }
         return null;
     };
@@ -32,7 +41,7 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
         }
         return null;
     };
-    const content = (_jsxs(View, { style: styles.container, children: [renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
+    const content = (_jsxs(View, { style: styles.container, children: [onClose && direction === 'vertical' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" })), renderIconOrImage(), _jsxs(View, { style: styles.contentContainer, children: [_jsxs(View, { style: styles.contentTextContainer, children: [_jsxs(View, { style: styles.textContainer, children: [_jsx(Heading, { size: "sm", style: styles.heading, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: heading }), _jsx(BodyText, { size: "md", style: styles.description, textAlign: hasIllustration && direction === 'vertical' ? 'center' : 'left', children: description })] }), renderAction()] }), onPress && (_jsx(UnstyledIconButton, { icon: ChevronRightSmallIcon, size: "sm", onPress: onPress, style: styles.chevron })), onClose && direction === 'horizontal' && (_jsx(UnstyledIconButton, { icon: CloseSmallIcon, size: "sm", onPress: onClose, style: styles.closeButton, accessibilityLabel: "Close banner" }))] })] }));
     if (onPress) {
         return (_jsx(Card, { variant: variant, style: [styles.card, style], ...props, children: _jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: styles.pressable, children: content }) }));
     }
@@ -40,9 +49,9 @@ const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md
 };
 Banner.displayName = 'Banner';
 const styles = StyleSheet.create(theme => ({
-    card: {},
+    card: { flexDirection: 'row', _web: { flexDirection: 'column' } },
     pressable: {
-        width: '100%',
+        flex: 1,
     },
     container: {
         flexDirection: 'row',
@@ -92,6 +101,7 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     imageWrapper: {
+        flexDirection: 'row',
         variants: {
             direction: {
                 horizontal: {},
@@ -103,8 +113,8 @@ const styles = StyleSheet.create(theme => ({
     },
     image: {
         borderRadius: theme.borderRadius.md,
-        borderWidth: theme.borderWidth[1],
         borderColor: theme.color.border.strong,
+        borderWidth: theme.borderWidth[1],
         variants: {
             direction: {
                 horizontal: { width: 160, height: 95 },
@@ -116,15 +126,34 @@ const styles = StyleSheet.create(theme => ({
         },
     },
     contentContainer: {
-        flex: 1,
-        flexDirection: 'row',
         alignItems: 'flex-start',
         justifyContent: 'space-between',
         gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flex: 1,
+                    flexDirection: 'row',
+                },
+                vertical: {
+                    flexDirection: 'column',
+                },
+            },
+        },
     },
     textContainer: {
-        flex: 1,
+        gap: theme.space.sm,
+    },
+    contentTextContainer: {
         gap: theme.space.lg,
+        variants: {
+            direction: {
+                horizontal: {
+                    flex: 1,
+                },
+                vertical: {},
+            },
+        },
     },
     heading: {
         compoundVariants: [
@@ -156,6 +185,16 @@ const styles = StyleSheet.create(theme => ({
     },
     closeButton: {
         alignSelf: 'flex-start',
+        variants: {
+            direction: {
+                vertical: {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                },
+                horizontal: {},
+            },
+        },
     },
 }));
 export default Banner;

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

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import { ImageProps } from 'react-native';
 import type CardProps from '../Card/Card.props';
+import { ThemedImageProps } from '../ThemedImage';
 export type BannerDirection = 'horizontal' | 'vertical';
 export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'colorScheme' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
     /**
@@ -27,18 +28,12 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * Illustration to display in the banner
      * Mutually exclusive with icon and image
      */
-    illustration?: {
-        light: ImageSourcePropType | ReactElement | ComponentType;
-        dark: ImageSourcePropType | ReactElement | ComponentType;
-    };
+    illustration?: ThemedImageProps | ImageProps;
     /**
      * Image to display in the banner
      * Mutually exclusive with icon and illustration
      */
-    image?: {
-        light: ImageSourcePropType | ReactElement | ComponentType;
-        dark: ImageSourcePropType | ReactElement | ComponentType;
-    };
+    image?: ThemedImageProps | ImageProps;
     /**
      * Heading text
      */

package/build/components/BottomSheet/BottomSheetHandle.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
+import { Platform, View } from 'react-native';
 import { StyleSheet, withUnistyles } from 'react-native-unistyles';
 const StyledBottomSheetHandle = withUnistyles(Handle);
 const BottomSheetHandle = ({ style, indicatorStyle, ...props }) => {
+    if (Platform.OS === 'web') {
+        return (_jsx(View, { style: [styles.handle, style], children: _jsx(View, { style: [styles.indicator, indicatorStyle] }) }));
+    }
     return (_jsx(StyledBottomSheetHandle, { style: [styles.handle, style], indicatorStyle: [styles.indicator, indicatorStyle], ...props }));
 };
 const styles = StyleSheet.create(theme => ({
@@ -13,6 +17,10 @@ const styles = StyleSheet.create(theme => ({
         paddingTop: theme.components.bottomSheet.padding,
         paddingHorizontal: theme.components.bottomSheet.padding,
         paddingBottom: theme.components.bottomSheet.gap,
+        _web: {
+            alignItems: 'center',
+            cursor: 'grab',
+        },
     },
     indicator: {
         width: theme.components.bottomSheet.handle.width,

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

@@ -3,6 +3,7 @@ import { SpaceValue, SpacingValues } from '../../types';
 interface CardProps extends PressableProps {
     variant?: 'emphasis' | 'subtle';
     colorScheme?: 'neutralStrong' | 'neutralSubtle' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
+    shadowColor?: 'functional' | 'brand' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'pig';
     noPadding?: boolean;
     disabled?: boolean;
     space?: SpacingValues;

package/build/components/Card/CardRoot.d.ts

@@ -1,6 +1,6 @@
 import CardProps from './Card.props';
 declare const Card: {
-    ({ children, variant, colorScheme, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
+    ({ children, variant, colorScheme, shadowColor, noPadding, style, states, space, disabled, onPress, ...rest }: CardProps & {
         states?: {
             active?: boolean;
             disabled?: boolean;

package/build/components/Card/CardRoot.js

@@ -83,7 +83,7 @@ const collectChildActionHandlers = (children) => React.Children.toArray(children
     }
     return handlers;
 }, []);
-const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
+const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', shadowColor, noPadding = false, style, states, space, disabled = false, onPress, ...rest }) => {
     const { active } = states || { active: false };
     const childActionHandlers = collectChildActionHandlers(children);
     const hasActions = checkForComponentType(children, 'CardAction');
@@ -123,6 +123,7 @@ const Card = ({ children, variant = 'subtle', colorScheme = 'neutralStrong', noP
         showPressed,
         disabled,
         space: hasActions || hasContent ? 'none' : space,
+        shadowColor,
     });
     const renderChildren = () => {
         // Default: render children as-is
@@ -190,6 +191,32 @@ const styles = StyleSheet.create(theme => ({
                     borderWidth: theme.components.card.brand.borderWidth,
                 },
             },
+            shadowColor: {
+                functional: {
+                    boxShadow: theme.helpers.shadow.functional,
+                },
+                brand: {
+                    boxShadow: theme.helpers.shadow.brand,
+                },
+                energy: {
+                    boxShadow: theme.helpers.shadow.energy,
+                },
+                broadband: {
+                    boxShadow: theme.helpers.shadow.broadband,
+                },
+                mobile: {
+                    boxShadow: theme.helpers.shadow.mobile,
+                },
+                insurance: {
+                    boxShadow: theme.helpers.shadow.insurance,
+                },
+                cashback: {
+                    boxShadow: theme.helpers.shadow.cashback,
+                },
+                pig: {
+                    boxShadow: theme.helpers.shadow.pig,
+                },
+            },
             noPadding: {
                 true: {
                     padding: theme.components.card.mobile.paddingNone,

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ImageProps } from 'react-native';
 import CardProps from '../Card/Card.props';
-interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent'> {
+interface HighlightBannerProps extends Omit<CardProps, 'noPadding' | 'variant' | 'space' | 'gap' | 'rowGap' | 'columnGap' | 'flexDirection' | 'flexWrap' | 'alignItems' | 'justifyContent' | 'colorScheme'> {
     heading?: string;
     headingColor?: 'pig' | 'energy' | 'broadband' | 'mobile' | 'insurance' | 'cashback' | 'highlight';
     variant?: 'emphasis' | 'subtle';

package/build/components/List/List.js

@@ -44,7 +44,7 @@ const List = ({ children, heading, helperText, headerTrailingContent, ...props }
     const updatedChildren = markFirstListItem(children);
     const value = useMemo(() => ({ loading, disabled, container }), [loading, disabled, container]);
     styles.useVariants({ disabled });
-    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) }))] }) }));
+    return (_jsx(ListContext.Provider, { value: value, children: _jsxs(View, { ...props, style: [styles.container, props.style], children: [heading ? (_jsx(SectionHeader, { heading: heading, helperText: helperText, trailingContent: headerTrailingContent })) : null, container === 'none' ? (_jsx(View, { children: updatedChildren })) : (React.Children.count(updatedChildren) > 0 && (_jsx(Card, { ...containerToCard, noPadding: true, style: styles.card, children: _jsx(_Fragment, { children: updatedChildren }) })))] }) }));
 };
 List.displayName = 'List';
 const styles = StyleSheet.create(theme => ({

package/build/components/List/ListAction/ListActionTrailingIcon.js

@@ -12,8 +12,8 @@ ListActionTrailingIcon.displayName = 'ListActionTrailingIcon';
 const styles = StyleSheet.create(theme => ({
     icon: {
         color: theme.color.icon.primary,
-        width: 24,
-        height: 24,
+        minWidth: 20,
+        minHeight: 20,
     },
 }));
 export default ListActionTrailingIcon;

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

@@ -0,0 +1,5 @@
+export interface IMenuContext {
+    close: () => void;
+}
+export declare const MenuContext: import("react").Context<IMenuContext | undefined>;
+export declare const useMenuContext: () => IMenuContext;

package/build/components/Menu/Menu.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const MenuContext = createContext(undefined);
+export const useMenuContext = () => {
+    const context = useContext(MenuContext);
+    if (!context) {
+        throw new Error('useMenuContext must be used within a Menu component');
+    }
+    return context;
+};

package/build/components/Menu/Menu.d.ts

@@ -0,0 +1,4 @@
+import type MenuProps from './Menu.props';
+import type { MenuMethods } from './Menu.props';
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<MenuMethods>>;
+export default Menu;

package/build/components/Menu/Menu.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { BottomSheetModal, BottomSheetScrollView } from '../BottomSheet';
+import { MenuContext } from './Menu.context';
+const Menu = forwardRef(({ heading, children, bottomSheetProps }, ref) => {
+    const bottomSheetModalRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        present: () => bottomSheetModalRef.current?.present(),
+        dismiss: () => bottomSheetModalRef.current?.dismiss(),
+    }), []);
+    const handleClose = useCallback(() => {
+        bottomSheetModalRef.current?.dismiss();
+    }, []);
+    const contextValue = useMemo(() => ({ close: handleClose }), [handleClose]);
+    return (_jsx(BottomSheetModal, { ref: bottomSheetModalRef, ...bottomSheetProps, children: _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, children: _jsxs(MenuContext.Provider, { value: contextValue, children: [heading && (_jsx(BodyText, { size: "md", weight: "semibold", children: heading })), children] }) }) }));
+});
+Menu.displayName = 'Menu';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        gap: theme.components.bottomSheet.gap,
+    },
+}));
+export default Menu;

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

@@ -0,0 +1,21 @@
+import type { BottomSheetModalProps } from '@gorhom/bottom-sheet';
+import type { ReactNode } from 'react';
+export interface MenuMethods {
+    present: () => void;
+    dismiss: () => void;
+}
+export interface MenuProps {
+    /**
+     * Heading text displayed at the top of the menu
+     */
+    heading?: string;
+    /**
+     * Menu items to display
+     */
+    children: ReactNode;
+    /**
+     * Optional bottom sheet modal props to customise the menu behavior
+     */
+    bottomSheetProps?: Partial<BottomSheetModalProps>;
+}
+export default MenuProps;

package/build/components/Menu/Menu.props.js

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

package/build/components/Menu/MenuItem.d.ts

@@ -0,0 +1,18 @@
+import type MenuItemProps from './MenuItem.props';
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & {
+    states?: {
+        active?: boolean;
+        disabled?: 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>>;
+export default MenuItem;

package/build/components/Menu/MenuItem.js

@@ -0,0 +1,115 @@
+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 { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { useMenuContext } from './Menu.context';
+const MenuItemRoot = ({ icon, iconPosition = 'left', text, colorScheme = 'functional', disabled = false, onPress, states = {}, ...props }) => {
+    const { active } = states;
+    const { close } = useMenuContext();
+    styles.useVariants({ colorScheme, disabled, iconPosition, active });
+    const handlePress = (event) => {
+        if (disabled)
+            return;
+        onPress?.(event);
+        close();
+    };
+    return (_jsxs(Pressable, { ...props, onPress: handlePress, disabled: disabled, style: styles.container, accessibilityRole: "button", accessibilityState: { disabled }, children: [!!icon && _jsx(Icon, { as: icon, style: styles.icon }), _jsx(BodyText, { size: "lg", style: styles.text, children: text })] }));
+};
+const MenuItem = createPressable({ Root: MenuItemRoot });
+MenuItem.displayName = 'MenuItem';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: theme.components.menu.item.padding,
+        paddingHorizontal: theme.components.menu.mobile.item.padding,
+        gap: theme.components.menu.item.gap,
+        borderRadius: theme.components.menu.item.borderRadius,
+        variants: {
+            active: {
+                true: {
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                },
+            },
+            disabled: {
+                true: {
+                    opacity: theme.opacity.disabled,
+                    cursor: 'auto',
+                },
+                false: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+            iconPosition: {
+                left: {
+                    flexDirection: 'row',
+                },
+                right: {
+                    flexDirection: 'row-reverse',
+                },
+            },
+            colorScheme: {
+                functional: {},
+                destructive: {},
+            },
+        },
+        compoundVariants: [
+            {
+                colorScheme: 'destructive',
+                active: true,
+                styles: {
+                    backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+                },
+            },
+            {
+                colorScheme: 'destructive',
+                disabled: false,
+                styles: {
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
+                        },
+                        _active: {
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    text: {
+        flex: 1,
+        variants: {
+            colorScheme: {
+                functional: {
+                    color: theme.color.text.primary,
+                },
+                destructive: {
+                    color: theme.color.interactive.destructive.foreground.subtle,
+                },
+            },
+        },
+    },
+    icon: {
+        variants: {
+            colorScheme: {
+                functional: {
+                    color: theme.color.icon.primary,
+                },
+                destructive: {
+                    color: theme.color.interactive.destructive.foreground.subtle,
+                },
+            },
+        },
+    },
+}));
+export default MenuItem;

package/build/components/Menu/MenuItem.props.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+import type { PressableProps } from 'react-native';
+export interface MenuItemProps extends Omit<PressableProps, 'children'> {
+    /**
+     * Icon component to display
+     */
+    icon?: ComponentType;
+    /**
+     * Position of the icon
+     * @default 'left'
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Text to display in the menu item
+     */
+    text: string;
+    /**
+     * Color scheme for the menu item
+     * @default 'functional'
+     */
+    colorScheme?: 'functional' | 'destructive';
+    /**
+     * Whether the menu item is disabled
+     */
+    disabled?: boolean;
+}
+export default MenuItemProps;

package/build/components/Menu/MenuItem.props.js

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

package/build/components/Menu/MenuTrigger.d.ts

@@ -0,0 +1,9 @@
+import type MenuTriggerProps from './MenuTrigger.props';
+interface MenuTriggerInternalProps extends MenuTriggerProps {
+    onPress: () => void;
+}
+declare const MenuTrigger: {
+    ({ children, onPress }: MenuTriggerInternalProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
+};
+export default MenuTrigger;

package/build/components/Menu/MenuTrigger.js

@@ -0,0 +1,11 @@
+import { cloneElement, isValidElement } from 'react';
+const MenuTrigger = ({ children, onPress }) => {
+    if (!isValidElement(children)) {
+        throw new Error('MenuTrigger: children must be a valid React element');
+    }
+    return cloneElement(children, {
+        onPress,
+    });
+};
+MenuTrigger.displayName = 'MenuTrigger';
+export default MenuTrigger;

package/build/components/Menu/MenuTrigger.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+export interface MenuTriggerProps {
+    /**
+     * The child element that triggers the menu (should be a single pressable element like Button)
+     */
+    children: ReactElement;
+    /**
+     * Called when the trigger is pressed.
+     */
+    onPress?: () => void;
+}
+export default MenuTriggerProps;

package/build/components/Menu/MenuTrigger.props.js

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

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

@@ -0,0 +1,7 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export type { MenuMethods, default as MenuProps } from './Menu.props';
+export { default as MenuItem } from './MenuItem';
+export type { default as MenuItemProps } from './MenuItem.props';
+export { default as MenuTrigger } from './MenuTrigger';
+export type { default as MenuTriggerProps } from './MenuTrigger.props';

package/build/components/Menu/index.js

@@ -0,0 +1,4 @@
+export { default as Menu } from './Menu';
+export { useMenuContext } from './Menu.context';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuTrigger } from './MenuTrigger';

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, fullscreen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;