@utilitywarehouse/hearth-react-native 0.24.0 → 0.26.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.24.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.26.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.24.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.26.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -31,8 +31,8 @@
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   75:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  291:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
   66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
@@ -60,13 +60,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1400.036 |    60.2%
-react-hooks/exhaustive-deps               |   100.065 |     4.3%
-react-hooks/rules-of-hooks                |    83.204 |     3.6%
-no-global-assign                          |    71.807 |     3.1%
-@typescript-eslint/ban-ts-comment         |    53.514 |     2.3%
-no-loss-of-precision                      |    35.722 |     1.5%
-@typescript-eslint/triple-slash-reference |    35.355 |     1.5%
-no-unexpected-multiline                   |    32.651 |     1.4%
-no-useless-escape                         |    30.776 |     1.3%
-no-misleading-character-class             |    29.528 |     1.3%
+@typescript-eslint/no-unused-vars         |  1316.387 |    59.6%
+react-hooks/exhaustive-deps               |    96.698 |     4.4%
+no-global-assign                          |    93.436 |     4.2%
+react-hooks/rules-of-hooks                |    81.760 |     3.7%
+no-unexpected-multiline                   |    47.972 |     2.2%
+no-misleading-character-class             |    43.286 |     2.0%
+@typescript-eslint/triple-slash-reference |    33.417 |     1.5%
+@typescript-eslint/ban-ts-comment         |    32.258 |     1.5%
+no-regex-spaces                           |    29.418 |     1.3%
+no-loss-of-precision                      |    25.945 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.26.0
+
+### Minor Changes
+
+- [#981](https://github.com/utilitywarehouse/hearth/pull/981) [`df56387`](https://github.com/utilitywarehouse/hearth/commit/df563872e6bf040d419f6c7fce2343ebe560edb9) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🌟 [ENHANCEMENT]: Improve `Modal` behaviour when used inside a React Navigation modal (`inNavModal`).
+
+  The following improvements have been made to the `Modal` component when used in a navigation context with `inNavModal={true}`:
+  - **`scrollable` prop**: Content is now rendered inside a `ScrollView` by default. Set `scrollable={false}` to opt out, for example when you need to centre content or use a custom layout.
+  - **`stickyFooter` support**: The `stickyFooter` prop now works correctly in `inNavModal` mode.
+  - **Auto full-screen detection**: When the modal fills the entire screen (e.g. with `presentation: 'fullScreenModal'`), the `fullscreen` style is applied automatically. The `fullscreen` prop is no longer available when `inNavModal` is `true`.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. If you were passing `fullscreen` alongside `inNavModal={true}`, remove the `fullscreen` prop — full-screen styling is now detected automatically:
+
+  ```diff
+  - <Modal inNavModal fullscreen>
+  + <Modal inNavModal>
+  ```
+
+  To disable the default `ScrollView` wrapping in `inNavModal` mode:
+
+  ```tsx
+  <Modal inNavModal scrollable={false}>
+    {/* custom layout */}
+  </Modal>
+  ```
+
+## 0.25.0
+
+### Minor Changes
+
+- [#982](https://github.com/utilitywarehouse/hearth/pull/982) [`506b388`](https://github.com/utilitywarehouse/hearth/commit/506b388ae1ef1065f013024a14bd9e2599a6442d) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `TimePicker` and `TimePickerInput` components with 12/24-hour support and minute intervals.
+
+  Includes a shared time picker view, updated wheel behavior for native platforms, and polished visuals like gradient fades.
+
+  **Components affected**:
+  - `TimePicker`
+  - `TimePickerInput`
+
+  ```tsx
+  import { TimePicker, TimePickerInput } from '@utilitywarehouse/hearth-react-native';
+  import { useRef, useState } from 'react';
+  import type { DateType } from '@utilitywarehouse/hearth-react-native';
+
+  const Example = () => {
+    const [value, setValue] = useState<DateType>();
+    const pickerRef = useRef(null);
+
+    return (
+      <>
+        <TimePickerInput
+          value={value}
+          onChange={({ date }) => setValue(date ?? undefined)}
+          onClear={() => setValue(undefined)}
+          timePickerProps={{ use12Hours: true, minuteInterval: 5 }}
+        />
+        <TimePicker
+          ref={pickerRef}
+          date={value}
+          onChange={({ date }) => setValue(date)}
+          use12Hours
+          minuteInterval={5}
+        />
+      </>
+    );
+  };
+  ```
+
 ## 0.24.0
 
 ### Minor Changes

package/build/components/DatePicker/DatePickerCalendar.js

@@ -1,22 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import TimePickerView from '../TimePicker/TimePickerView';
 import { useDatePickerContext } from './DatePicker.context';
 import Days from './DatePickerDays';
 import Footer from './DatePickerFooter';
 import Header from './DatePickerHeader';
 import Months from './DatePickerMonths';
 import Years from './DatePickerYears';
-import TimePicker from './TimePicker';
-const CalendarView = {
-    year: _jsx(Years, {}),
-    month: _jsx(Months, {}),
-    day: _jsx(Days, {}),
-    time: _jsx(TimePicker, {}),
-};
 const Calendar = () => {
-    const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } = useDatePickerContext();
-    return (_jsxs(View, { style: [styles.container], testID: "calendar", children: [!hideHeader ? _jsx(Header, { navigationPosition: navigationPosition }) : null, _jsx(View, { style: styles.containerInner(containerHeight), children: CalendarView[calendarView] }), !hideFooter ? _jsx(Footer, {}) : null] }));
+    const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition, currentDate, onSelectDate, timeZone, use12Hours, } = useDatePickerContext();
+    const calendarContent = calendarView === 'year' ? (_jsx(Years, {})) : calendarView === 'month' ? (_jsx(Months, {})) : calendarView === 'time' ? (_jsx(TimePickerView, { currentDate: currentDate, onSelectDate: onSelectDate, timeZone: timeZone, use12Hours: use12Hours, containerHeight: containerHeight })) : (_jsx(Days, {}));
+    return (_jsxs(View, { style: [styles.container], testID: "calendar", children: [!hideHeader ? _jsx(Header, { navigationPosition: navigationPosition }) : null, _jsx(View, { style: styles.containerInner(containerHeight), children: calendarContent }), !hideFooter ? _jsx(Footer, {}) : null] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, scrollable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 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, ScrollView, View, findNodeHandle } from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -13,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, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', scrollable = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -21,6 +21,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const isBrandBackground = background === 'brand';
+    const [inNavModalHeight, setInNavModalHeight] = useState();
+    const isNavModalFullScreen = useMemo(() => {
+        if (!inNavModalHeight || !inNavModal)
+            return false;
+        const screenHeight = Dimensions.get('window').height;
+        return inNavModalHeight >= screenHeight;
+    }, [inNavModalHeight, inNavModal]);
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -107,9 +114,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         stickyFooter,
         showHandle: props.showHandle,
         background: isBrandBackground ? 'brand' : 'primary',
+        ...(inNavModal && {
+            fullscreen: isNavModalFullScreen,
+        }),
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const InNavModalContainer = scrollable ? ScrollView : View;
+    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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -118,7 +129,9 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { style: {
+    return inNavModal ? (_jsxs(View, { onLayout: (e) => {
+            setInNavModalHeight(e.nativeEvent.layout.height);
+        }, style: {
             flex: 1,
             backgroundColor: theme.color.background[isBrandBackground ? 'brand' : '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 })] }));
@@ -227,8 +240,6 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        gap: theme.components.modal.gap,
-        padding: theme.components.modal.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
         variants: {
             background: {
@@ -237,8 +248,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     backgroundColor: theme.color.background.brand,
                 },
             },
+            fullscreen: {
+                true: {
+                    padding: theme.components.modal.padding,
+                    paddingTop: rt.insets.top,
+                },
+                false: {
+                    padding: theme.components.modal.padding,
+                }
+            }
         },
     },
+    inNavModalFooterContainer: {
+        paddingTop: theme.components.modal.padding,
+    },
     androidContainer: {
         height: rt.insets.top + 18,
         paddingLeft: theme.components.modal.padding,

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

@@ -11,6 +11,7 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
     loadingHeading?: string;
     description?: string;
     fullscreen?: boolean;
+    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
@@ -25,11 +26,12 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
 }
 type ModalProps = (ModalPropsBase & {
     inNavModal?: false | undefined;
-    stickyFooter?: boolean;
+    scrollable?: never;
     background?: never;
 }) | (ModalPropsBase & {
     inNavModal: true;
-    stickyFooter?: never;
+    fullscreen?: never;
+    scrollable?: boolean;
     background?: 'default' | 'brand';
 });
 export default ModalProps;

package/build/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,6 @@
+import type { TimePickerProps } from './TimePicker.props';
+declare const TimePicker: {
+    ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimePicker;

package/build/components/TimePicker/TimePicker.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BottomSheetModal, BottomSheetView } from '../BottomSheet';
+import { Button } from '../Button';
+import TimePickerView from './TimePickerView';
+dayjs.extend(utc);
+dayjs.extend(timezone);
+const Footer = ({ onCancel, onConfirm }) => {
+    return (_jsxs(RNView, { style: styles.footer, testID: "footer", children: [_jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onCancel, children: "Cancel" }), _jsx(Button, { variant: "ghost", colorScheme: "functional", onPress: onConfirm, children: "Ok" })] }));
+};
+const TimePicker = ({ timeZone, date, onChange, use12Hours, minuteInterval, hideFooter, style, ref, onCancel = () => { }, }) => {
+    dayjs.tz.setDefault(timeZone);
+    dayjs.locale('en');
+    const modalRef = useRef(null);
+    const pickerViewRef = useRef(null);
+    useImperativeHandle(ref, () => modalRef.current);
+    const [currentDate, setCurrentDate] = useState(() => {
+        return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+    });
+    useEffect(() => {
+        const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
+        const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
+        if (!isSameMinute) {
+            setCurrentDate(nextDate);
+        }
+    }, [currentDate, date, timeZone]);
+    const closeTimePicker = useCallback(() => {
+        modalRef.current?.close();
+    }, []);
+    const handleSelectDate = useCallback((selectedDate) => {
+        const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
+        if (!dayjs(currentDate).isSame(newDate, 'minute')) {
+            setCurrentDate(newDate);
+        }
+        onChange?.({ date: newDate ? dayjs(newDate).toDate() : newDate });
+    }, [currentDate, onChange, timeZone]);
+    const handleCancel = useCallback(() => {
+        onCancel?.();
+        closeTimePicker();
+    }, [closeTimePicker, onCancel]);
+    const handleConfirm = useCallback(() => {
+        closeTimePicker();
+    }, [closeTimePicker]);
+    const handleChange = useCallback((index) => {
+        if (index > -1) {
+            setTimeout(() => {
+                AccessibilityInfo.announceForAccessibility('Time picker opened.');
+                const targetRef = pickerViewRef.current;
+                if (targetRef) {
+                    const nodeHandle = findNodeHandle(targetRef);
+                    if (nodeHandle) {
+                        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+                    }
+                }
+            }, 50);
+        }
+    }, []);
+    const contentStyle = useMemo(() => [styles.container, style], [style]);
+    return (_jsx(BottomSheetModal, { ref: modalRef, onChange: handleChange, accessible: false, enableContentPanningGesture: false, children: _jsx(BottomSheetView, { children: _jsxs(RNView, { ref: pickerViewRef, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Time picker' : undefined, importantForAccessibility: Platform.OS === 'android' ? 'yes' : 'auto', style: contentStyle, children: [_jsx(TimePickerView, { currentDate: currentDate, onSelectDate: handleSelectDate, timeZone: timeZone, use12Hours: use12Hours, minuteInterval: minuteInterval }), !hideFooter ? _jsx(Footer, { onCancel: handleCancel, onConfirm: handleConfirm }) : null] }) }) }));
+};
+TimePicker.displayName = 'TimePicker';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        backgroundColor: theme.color.background.secondary,
+        gap: theme.components.datePicker.calendar.gap,
+    },
+    footer: {
+        flexDirection: 'row',
+        gap: theme.components.datePicker.calendar.footer.gap,
+        justifyContent: 'flex-end',
+    },
+}));
+export default TimePicker;

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

@@ -0,0 +1,45 @@
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Ref } from 'react';
+import type { ViewStyle } from 'react-native';
+import type { DateType, PickerOption } from '../DatePicker/DatePicker.props';
+export interface TimePickerProps {
+    /**
+     * IANA time zone identifier applied when normalising and comparing times.
+     */
+    timeZone?: string;
+    /**
+     * Controlled time value.
+     */
+    date?: DateType;
+    /**
+     * Fired whenever a time is picked.
+     */
+    onChange?: (params: {
+        date: DateType;
+    }) => void;
+    /**
+     * Display a 12-hour clock with AM/PM selector.
+     */
+    use12Hours?: boolean;
+    /**
+     * Step interval for minutes shown in the picker.
+     */
+    minuteInterval?: number;
+    /**
+     * Hide the footer actions.
+     */
+    hideFooter?: boolean;
+    /**
+     * Custom container styling for the time picker surface.
+     */
+    style?: ViewStyle;
+    /**
+     * Gives imperative access to the bottom sheet instance.
+     */
+    ref?: Ref<BottomSheetModalMethods<any>>;
+    /**
+     * Fired when the cancel action is triggered.
+     */
+    onCancel?: () => void;
+}
+export type { DateType, PickerOption };

package/build/components/TimePicker/TimePicker.props.js

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

package/build/components/TimePicker/TimePickerView.d.ts

@@ -0,0 +1,12 @@
+import type { DateType } from './TimePicker.props';
+export type Period = 'AM' | 'PM';
+type TimePickerViewProps = {
+    currentDate: DateType;
+    onSelectDate: (date: DateType) => void;
+    timeZone?: string;
+    use12Hours?: boolean;
+    minuteInterval?: number;
+    containerHeight?: number;
+};
+declare const _default: import("react").MemoExoticComponent<({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval, }: TimePickerViewProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/TimePicker/TimePickerView.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { formatNumber, getParsedDate } from '../DatePicker/utils';
+import TimePickerWheel from './TimePickerWheel';
+const createNumberList = (num, numerals, startFrom = 0) => {
+    return Array.from({ length: num }, (_, i) => ({
+        value: i + startFrom,
+        text: i + startFrom < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
+            : `${formatNumber(i + startFrom, numerals)}`,
+    }));
+};
+const createMinuteList = (interval, numerals) => {
+    const safeInterval = Math.min(59, Math.max(1, Math.floor(interval)));
+    const values = Array.from({ length: Math.ceil(60 / safeInterval) }, (_, index) => Math.min(index * safeInterval, 59)).filter((value, index, array) => array.indexOf(value) === index && value < 60);
+    return values.map(value => ({
+        value,
+        text: value < 10
+            ? `${formatNumber(0, numerals)}${formatNumber(value, numerals)}`
+            : `${formatNumber(value, numerals)}`,
+    }));
+};
+const getClosestMinute = (value, options) => {
+    if (!options.length)
+        return value;
+    const values = options.map(option => option.value);
+    if (values.includes(value))
+        return value;
+    let closest = values[0] ?? value;
+    let closestDiff = Math.abs(value - closest);
+    values.forEach(optionValue => {
+        const diff = Math.abs(value - optionValue);
+        if (diff < closestDiff) {
+            closestDiff = diff;
+            closest = optionValue;
+        }
+    });
+    return closest;
+};
+const TimePickerView = ({ currentDate, onSelectDate, timeZone, use12Hours, minuteInterval = 1, }) => {
+    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, 'latn', use12Hours ? 1 : 0), [use12Hours]);
+    const minutes = useMemo(() => createMinuteList(minuteInterval, 'latn'), [minuteInterval]);
+    const periodOptions = useMemo(() => [
+        { value: 'AM', text: 'AM' },
+        { value: 'PM', text: 'PM' },
+    ], []);
+    const baseDate = currentDate;
+    const { hour, hour12, minute, period } = getParsedDate(baseDate);
+    const minuteValue = useMemo(() => getClosestMinute(minute, minutes), [minute, minutes]);
+    const handleChangeHour = useCallback((value) => {
+        let hour24 = value;
+        if (use12Hours) {
+            if (period === 'AM' && value === 12) {
+                hour24 = 0;
+            }
+            else if (period === 'PM' && value < 12) {
+                hour24 = value + 12;
+            }
+            else {
+                hour24 = value;
+            }
+        }
+        const newDate = dayjs.tz(baseDate, timeZone).hour(hour24).minute(minuteValue);
+        onSelectDate(newDate);
+    }, [baseDate, onSelectDate, timeZone, use12Hours, period, minuteValue]);
+    const handleChangeMinute = useCallback((value) => {
+        const newDate = dayjs.tz(baseDate, timeZone).minute(value);
+        onSelectDate(newDate);
+    }, [baseDate, onSelectDate, timeZone]);
+    const handlePeriodChange = useCallback((newPeriod) => {
+        let newHour = hour12;
+        if (newPeriod === 'PM' && hour12 < 12) {
+            newHour = hour12 + 12;
+        }
+        else if (newPeriod === 'AM' && hour12 === 12) {
+            newHour = 0;
+        }
+        else if (newPeriod === 'AM' && hour >= 12) {
+            newHour = hour12;
+        }
+        const newDate = dayjs.tz(baseDate, timeZone).hour(newHour);
+        onSelectDate(newDate);
+    }, [baseDate, onSelectDate, timeZone, hour, hour12]);
+    return (_jsxs(View, { style: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, size: "lg", children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(TimePickerWheel, { value: minuteValue, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(TimePickerWheel, { value: period, items: periodOptions, setValue: handlePeriodChange }) })) : null] }));
+};
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+    },
+    wheelContainer: {
+        flex: 1,
+    },
+    timePickerContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 146,
+        height: 208,
+        flexDirection: 'row',
+        marginBottom: -30,
+    },
+    timeSeparator: {
+        marginHorizontal: 5,
+    },
+    periodContainer: {
+        marginLeft: 10,
+    },
+});
+const customComparator = (prev, next) => {
+    if (prev.onSelectDate !== next.onSelectDate) {
+        return false;
+    }
+    if (prev.timeZone !== next.timeZone) {
+        return false;
+    }
+    if (prev.use12Hours !== next.use12Hours) {
+        return false;
+    }
+    if (prev.minuteInterval !== next.minuteInterval) {
+        return false;
+    }
+    return dayjs(prev.currentDate).isSame(next.currentDate, 'minute');
+};
+export default memo(TimePickerView, customComparator);

package/build/components/TimePicker/TimePickerWheel.d.ts

@@ -0,0 +1,8 @@
+import type { PickerOption } from './TimePicker.props';
+type TimePickerWheelProps = {
+    value: number | string;
+    setValue?: (value: any) => void;
+    items: PickerOption[];
+};
+declare const TimePickerWheel: ({ value, setValue, items }: TimePickerWheelProps) => import("react/jsx-runtime").JSX.Element;
+export default TimePickerWheel;