@utilitywarehouse/hearth-react-native 0.14.1 → 0.15.1

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.14.1 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.15.1 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,60 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.15.1
+
+### Patch Changes
+
+- [#768](https://github.com/utilitywarehouse/hearth/pull/768) [`570f240`](https://github.com/utilitywarehouse/hearth/commit/570f240a448eae546b893ed3ad69235213ee5fac) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Makes `Modal` footer sticky by default
+
+  This change updates the `Modal` component to have a sticky footer by default, enhancing user experience by keeping action buttons accessible. The `stickyFooter` prop has been added to allow developers to disable this behavior if needed.
+
+## 0.15.0
+
+### Minor Changes
+
+- [#766](https://github.com/utilitywarehouse/hearth/pull/766) [`183155a`](https://github.com/utilitywarehouse/hearth/commit/183155a1aaf7713f0ab8a39ab1e5684ef6190d0c) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE] Custom `ListItem` styles for `UL` and `OL` components
+
+  Added new props to `UL`, `OL`, and `ListItem` components to support custom list markers, including icons, images, and colors. This brings the functionality closer to CSS-like list styling. We also fixed a layout issue where list item text could overflow the container.
+
+  **Components affected**:
+
+  - `UL` (UnorderedList)
+  - `OL` (OrderedList)
+  - `ListItem`
+
+  **Developer changes**:
+
+  You can now customise list bullets/markers using the new `listStyle*` props. These can be set on the list container to apply to all items, or overridden on individual list items.
+
+  ```tsx
+  import { UL, LI } from '@utilitywarehouse/hearth-react-native';
+  import { TickIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+  <UL listStyleColour="feedbackPositiveSurfaceDefault" listStyleIcon={TickIcon}>
+    <LI>Success item 1</LI>
+    <LI listStyleColour="feedbackDangerSurfaceDefault">Error item override</LI>
+  </UL>;
+  ```
+
+  Supported props:
+
+  - `listStyleImage`: React Element (e.g. `<Image />`)
+  - `listStyleIcon`: Icon component
+  - `listStyleWidth` / `listStyleHeight`: Dimensions for the marker (default: 20)
+  - `listStyleColour`: Color token or value for the marker
+
+### Patch Changes
+
+- [#762](https://github.com/utilitywarehouse/hearth/pull/762) [`2d2bbd2`](https://github.com/utilitywarehouse/hearth/commit/2d2bbd2ba109b9acb2e0b220766eb02c0ad5710e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fixes Android error when passing boolean or number as a `Checkbox` value
+
+- [#764](https://github.com/utilitywarehouse/hearth/pull/764) [`46f115d`](https://github.com/utilitywarehouse/hearth/commit/46f115dd4bd9da824496e8ec19e29276523931a1) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fixes `HelperText` wrapping issue
+
+- [#762](https://github.com/utilitywarehouse/hearth/pull/762) [`2d2bbd2`](https://github.com/utilitywarehouse/hearth/commit/2d2bbd2ba109b9acb2e0b220766eb02c0ad5710e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Fixes `PillGroup` `onChange` prop types
+
+- [#764](https://github.com/utilitywarehouse/hearth/pull/764) [`46f115d`](https://github.com/utilitywarehouse/hearth/commit/46f115dd4bd9da824496e8ec19e29276523931a1) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: `DescriptionListItem` description disappearing when direction is `column`
+
+- [#762](https://github.com/utilitywarehouse/hearth/pull/762) [`2d2bbd2`](https://github.com/utilitywarehouse/hearth/commit/2d2bbd2ba109b9acb2e0b220766eb02c0ad5710e) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Input styles are now passed to the correct View
+
 ## 0.14.1
 
 ### Patch Changes

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

@@ -1,7 +1,7 @@
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
-export { default as BottomSheetFlatList } from './BottomSheetFlatList';
-export { BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/build/components/BottomSheet/index.js

@@ -1,6 +1,6 @@
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
-export { BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/build/components/Checkbox/Checkbox.d.ts

@@ -10,7 +10,7 @@ declare const CheckboxIcon: import("react").ForwardRefExoticComponent<import("re
 }>;
 declare const CheckboxLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Checkbox: {
-    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, value, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const CheckboxTile: {

package/build/components/Checkbox/Checkbox.js

@@ -25,15 +25,13 @@ CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxIndicator.displayName = 'CheckboxIndicator';
 CheckboxIcon.displayName = 'CheckboxIcon';
 CheckboxLabel.displayName = 'CheckboxLabel';
-const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, ...props }) => {
+const Checkbox = ({ children, label, disabled, checked, helperIcon, helperText, invalidText, validText, validationStatus: validation, showValidationIcon, type = 'default', image, value, ...props }) => {
     const { validationStatus: fieldValidationStatus } = useFormFieldContext();
     const { validationStatus: groupValidationStatus, type: groupType } = useCheckboxGroupContext();
     const validationStatus = fieldValidationStatus ?? groupValidationStatus ?? validation ?? 'initial';
     const checkboxType = groupType ?? type;
     const checkboxChildren = children ? (children) : (_jsxs(_Fragment, { children: [_jsx(CheckboxIndicator, { children: _jsx(CheckboxIcon, {}) }), image ? image : null, _jsxs(CheckboxTextContent, { children: [!!label && _jsx(CheckboxLabel, { children: label }), !!helperText && _jsx(Helper, { disabled: disabled, icon: helperIcon, text: helperText }), validationStatus === 'invalid' && !!invalidText && (_jsx(Helper, { showIcon: showValidationIcon, disabled: disabled, validationStatus: "invalid", text: invalidText })), validationStatus === 'valid' && !!validText && (_jsx(Helper, { disabled: disabled, showIcon: showValidationIcon, validationStatus: "valid", text: validText }))] })] }));
-    return (
-    // @ts-expect-error - type
-    _jsx(CheckboxComponent, { ...props, isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
+    return (_jsx(CheckboxComponent, { ...props, value: (value ?? '').toString(), isDisabled: disabled, isChecked: checked, children: checkboxType === 'tile' ? (_jsx(CheckboxTileRoot, { children: checkboxChildren })) : (checkboxChildren) }));
 };
 const CheckboxTile = ({ type = 'tile', ...props }) => {
     return _jsx(Checkbox, { ...props, type: type });

package/build/components/DescriptionList/DescriptionListItem.js

@@ -44,7 +44,14 @@ const styles = StyleSheet.create(theme => ({
         color: theme.color.text.secondary,
     },
     descriptionWrapper: {
-        flex: 1,
+        variants: {
+            direction: {
+                row: {
+                    flex: 1,
+                },
+                column: {},
+            },
+        },
     },
 }));
 export default DescriptionListItem;

package/build/components/HTMLElements/ListItem.d.ts

@@ -1,5 +1,13 @@
 import { ViewProps } from 'react-native';
-export interface ListItemProps extends ViewProps {
+import { ColorValue } from '../../types';
+export interface ListStyleProps {
+    listStyleImage?: React.ReactElement;
+    listStyleIcon?: React.ComponentType<any>;
+    listStyleWidth?: number;
+    listStyleHeight?: number;
+    listStyleColour?: ColorValue;
+}
+export interface ListItemProps extends ViewProps, ListStyleProps {
     children: ViewProps['children'];
 }
 declare const ListItem: {

package/build/components/HTMLElements/ListItem.js

@@ -7,8 +7,7 @@ const ListItem = ({ children, style, ...rest }) => {
 ListItem.displayName = 'ListItem';
 const styles = StyleSheet.create({
     item: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
+        flexShrink: 1,
     },
 });
 export default ListItem;

package/build/components/HTMLElements/OrderedList.d.ts

@@ -1,12 +1,13 @@
 import { ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
-export interface OrderedListProps extends ViewProps {
+import { ListStyleProps } from './ListItem';
+export interface OrderedListProps extends ViewProps, ListStyleProps {
     children: ViewProps['children'];
     gap?: SpaceValue;
     bulletStyle?: ViewStyle;
 }
 declare const OrderedList: {
-    ({ children, gap, style, ...rest }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, gap, style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }: OrderedListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default OrderedList;

package/build/components/HTMLElements/OrderedList.js

@@ -1,15 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useStyleProps } from '../../hooks';
+import { useStyleProps, useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
 import { BodyText } from '../BodyText';
-const OrderedList = ({ children, gap = '100', style, ...rest }) => {
+const OrderedList = ({ children, gap = '100', style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }) => {
     const { computedStyles } = useStyleProps({ gap });
+    const theme = useTheme();
     let itemNumber = 0;
     return (_jsx(View, { style: [computedStyles, style], ...rest, children: React.Children.map(children, child => {
             if (React.isValidElement(child)) {
                 itemNumber++;
-                return (_jsxs(View, { style: styles.listItemContainer, children: [_jsx(BodyText, { style: styles.number, children: `${itemNumber}.` }), React.cloneElement(child, {})] }));
+                const childProps = child.props;
+                const image = childProps.listStyleImage ?? listStyleImage;
+                const Icon = childProps.listStyleIcon ?? listStyleIcon;
+                const width = childProps.listStyleWidth ?? listStyleWidth ?? 20;
+                const height = childProps.listStyleHeight ?? listStyleHeight ?? 20;
+                const colourRaw = childProps.listStyleColour ?? listStyleColour;
+                const colour = colourRaw ? getFlattenedColorValue(colourRaw, theme.color) : undefined;
+                let bullet;
+                if (image) {
+                    const imageEl = image;
+                    bullet = React.cloneElement(imageEl, {
+                        style: [{ width, height }, imageEl.props.style],
+                    });
+                }
+                else if (Icon) {
+                    bullet = (_jsx(Icon, { width: width, height: height, color: colour ?? theme.color.text.primary }));
+                }
+                else {
+                    bullet = (_jsx(BodyText, { style: [styles.number, colour && { color: colour }], children: `${itemNumber}.` }));
+                }
+                const isCustom = !!(image || Icon);
+                return (_jsxs(View, { style: styles.listItemContainer, children: [isCustom ? _jsx(View, { style: { marginRight: 8 }, children: bullet }) : bullet, React.cloneElement(child, {
+                            style: [childProps.style, { flex: 1 }],
+                        })] }));
             }
             return child;
         }) }));
@@ -22,7 +47,7 @@ const styles = StyleSheet.create({
     },
     number: {
         marginRight: 8,
-        lineHeight: undefined, // Allow number to align with first line of text
+        lineHeight: undefined,
     },
 });
 export default OrderedList;

package/build/components/HTMLElements/UnorderedList.d.ts

@@ -1,12 +1,13 @@
 import { ViewProps, ViewStyle } from 'react-native';
 import { SpaceValue } from '../../types';
-export interface UnorderedListProps extends ViewProps {
+import { ListStyleProps } from './ListItem';
+export interface UnorderedListProps extends ViewProps, ListStyleProps {
     children: ViewProps['children'];
     gap?: SpaceValue;
     bulletStyle?: ViewStyle;
 }
 declare const UnorderedList: {
-    ({ children, gap, style, ...rest }: UnorderedListProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, gap, style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }: UnorderedListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default UnorderedList;

package/build/components/HTMLElements/UnorderedList.js

@@ -1,13 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useStyleProps } from '../../hooks';
+import { useStyleProps, useTheme } from '../../hooks';
+import { getFlattenedColorValue } from '../../utils';
 import { BodyText } from '../BodyText';
-const UnorderedList = ({ children, gap = '100', style, ...rest }) => {
+const UnorderedList = ({ children, gap = '100', style, listStyleImage, listStyleIcon, listStyleWidth, listStyleHeight, listStyleColour, ...rest }) => {
     const { computedStyles } = useStyleProps({ gap });
+    const theme = useTheme();
     return (_jsx(View, { style: [computedStyles, style], ...rest, children: React.Children.map(children, child => {
             if (React.isValidElement(child)) {
-                return (_jsxs(View, { style: styles.listItemContainer, children: [_jsx(BodyText, { style: styles.bullet, children: "\u2022" }), React.cloneElement(child, {})] }));
+                const childProps = child.props;
+                const image = childProps.listStyleImage ?? listStyleImage;
+                const Icon = childProps.listStyleIcon ?? listStyleIcon;
+                const width = childProps.listStyleWidth ?? listStyleWidth ?? 20;
+                const height = childProps.listStyleHeight ?? listStyleHeight ?? 20;
+                const colourRaw = childProps.listStyleColour ?? listStyleColour;
+                const colour = colourRaw ? getFlattenedColorValue(colourRaw, theme.color) : undefined;
+                let bullet;
+                if (image) {
+                    const imageEl = image;
+                    bullet = React.cloneElement(imageEl, {
+                        style: [{ width, height }, imageEl.props.style],
+                    });
+                }
+                else if (Icon) {
+                    bullet = (_jsx(Icon, { width: width, height: height, color: colour ?? theme.color.text.primary }));
+                }
+                else {
+                    bullet = _jsx(BodyText, { style: [styles.bullet, colour && { color: colour }], children: "\u2022" });
+                }
+                const isCustom = !!(image || Icon);
+                return (_jsxs(View, { style: styles.listItemContainer, children: [isCustom ? _jsx(View, { style: { marginRight: 8 }, children: bullet }) : bullet, React.cloneElement(child, {
+                            style: [childProps.style, { flex: 1 }],
+                        })] }));
             }
             return child;
         }) }));
@@ -20,7 +45,7 @@ const styles = StyleSheet.create({
     },
     bullet: {
         marginRight: 8,
-        lineHeight: undefined, // Allow bullet to align with first line of text
+        lineHeight: undefined,
     },
 });
 export default UnorderedList;

package/build/components/Helper/Helper.js

@@ -23,7 +23,7 @@ const styles = StyleSheet.create(theme => ({
     container: {
         flexDirection: 'row',
         gap: theme.components.formField.helper.gap,
-        alignItems: 'center',
+        alignItems: 'flex-start',
         variants: {
             disabled: {
                 true: {

package/build/components/Helper/HelperText.js

@@ -11,6 +11,7 @@ HelperText.displayName = 'HelperText';
 const styles = StyleSheet.create(theme => ({
     text: {
         color: theme.color.text.secondary,
+        flexShrink: 1,
         variants: {
             validationStatus: {
                 valid: {

package/build/components/Input/Input.js

@@ -19,7 +19,7 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, ...props }, ref) => {
+const Input = forwardRef(({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, style, ...props }, ref) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
@@ -46,7 +46,7 @@ const Input = forwardRef(({ validationStatus = 'initial', children, disabled, fo
         }
         return undefined;
     })();
-    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
+    return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, style: style, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), _jsx(InputField
                 // @ts-expect-error - ref forwarding issue
                 , { 
                     // @ts-expect-error - ref forwarding issue

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, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...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, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
@@ -12,7 +13,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, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -97,9 +98,24 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
-    styles.useVariants({ loading });
-    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: [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 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 }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content })] }));
+    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    styles.useVariants({
+        loading,
+        bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
+        noButtons,
+        stickyFooter,
+    });
+    const footer = (_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] }));
+    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: [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, !stickyFooter && !noButtons ? footer : null] })) }));
+    const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
+        onPressPrimaryButton,
+        primaryButtonText,
+        onPressSecondaryButton,
+        secondaryButtonText,
+        primaryButtonProps,
+        secondaryButtonProps,
+    ]);
+    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 }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -116,6 +132,30 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
         },
     },
+    scrollView: {
+        flex: 1,
+        variants: {
+            bothButtons: {
+                true: {
+                    paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+                },
+                false: {
+                    paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+                },
+            },
+            noButtons: {
+                true: {
+                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                },
+            },
+            stickyFooter: {
+                true: {},
+                false: {
+                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                },
+            },
+        },
+    },
     header: {
         flexDirection: 'row',
         gap: theme.components.modal.gap,
@@ -149,6 +189,11 @@ const styles = StyleSheet.create((theme, rt) => ({
     footer: {
         gap: theme.components.modal.action.gap,
     },
+    footerWrap: {
+        backgroundColor: theme.color.surface.neutral.strong,
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+    },
     inNavModalContainer: {
         flex: 1,
         ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),

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

@@ -11,6 +11,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     description?: string;
     inNavModal?: boolean;
     fullscreen?: boolean;
+    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;

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

@@ -1,15 +1,27 @@
 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;
+export interface PillGroupBaseProps extends Omit<ScrollViewProps, 'horizontal' | 'contentContainerStyle' | 'showsHorizontalScrollIndicator'> {
     /** 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[];
 }
+interface SinglePillGroupProps extends PillGroupBaseProps {
+    /** Multi-select mode. Default = false */
+    multiple?: false;
+    /** Controlled selected value */
+    value: string;
+    /** Handle selection changes */
+    onChange?: (value: string) => void;
+}
+interface MultiPillGroupProps extends PillGroupBaseProps {
+    /** Multi-select mode. Default = false */
+    multiple: true;
+    /** Controlled selected value(s) */
+    value: string[];
+    /** Handle selection changes */
+    onChange?: (value: string[]) => void;
+}
+export type PillGroupProps = SinglePillGroupProps | MultiPillGroupProps;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.14.1",
+  "version": "0.15.1",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/components/BottomSheet/index.ts

@@ -1,9 +1,6 @@
-export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
-export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export {
+  BottomSheetFlashList,
+  BottomSheetFooter,
   BottomSheetModalProvider,
   BottomSheetSectionList,
   BottomSheetVirtualizedList,
@@ -14,4 +11,9 @@ export {
   type BottomSheetHandleProps,
   type BottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
+export { default as BottomSheet } from './BottomSheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/src/components/Checkbox/Checkbox.tsx

@@ -42,6 +42,7 @@ const Checkbox = ({
   showValidationIcon,
   type = 'default',
   image,
+  value,
   ...props
 }: CheckboxProps) => {
   const { validationStatus: fieldValidationStatus } = useFormFieldContext();
@@ -80,8 +81,12 @@ const Checkbox = ({
     </>
   );
   return (
-    // @ts-expect-error - type
-    <CheckboxComponent {...props} isDisabled={disabled} isChecked={checked}>
+    <CheckboxComponent
+      {...props}
+      value={(value ?? '').toString()}
+      isDisabled={disabled}
+      isChecked={checked}
+    >
       {checkboxType === 'tile' ? (
         <CheckboxTileRoot>{checkboxChildren}</CheckboxTileRoot>
       ) : (

package/src/components/DescriptionList/DescriptionListItem.tsx

@@ -86,7 +86,14 @@ const styles = StyleSheet.create(theme => ({
     color: theme.color.text.secondary,
   },
   descriptionWrapper: {
-    flex: 1,
+    variants: {
+      direction: {
+        row: {
+          flex: 1,
+        },
+        column: {},
+      },
+    },
   },
 }));
 

package/src/components/HTMLElements/ListItem.tsx

@@ -1,7 +1,16 @@
 import { StyleSheet, View, ViewProps } from 'react-native';
+import { ColorValue } from '../../types';
 import { BodyText } from '../BodyText';
 
-export interface ListItemProps extends ViewProps {
+export interface ListStyleProps {
+  listStyleImage?: React.ReactElement;
+  listStyleIcon?: React.ComponentType<any>;
+  listStyleWidth?: number;
+  listStyleHeight?: number;
+  listStyleColour?: ColorValue;
+}
+
+export interface ListItemProps extends ViewProps, ListStyleProps {
   children: ViewProps['children'];
 }
 
@@ -17,8 +26,7 @@ ListItem.displayName = 'ListItem';
 
 const styles = StyleSheet.create({
   item: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
+    flexShrink: 1,
   },
 });