@utilitywarehouse/hearth-react-native 0.23.0 → 0.25.0

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;

package/build/components/TimePicker/TimePickerWheel.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WheelPicker from '@quidone/react-native-wheel-picker';
+import { useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+const ITEM_HEIGHT = 40;
+const VISIBLE_REST = 3;
+const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
+    const theme = useTheme();
+    const fadeHeight = ITEM_HEIGHT * 1.5;
+    const gradientId = useMemo(() => `wheel-fade-${Math.random().toString(36).slice(2)}`, []);
+    const displayCount = VISIBLE_REST * 2 + 1;
+    const pickerHeight = ITEM_HEIGHT * displayCount;
+    const data = useMemo(() => items.map(item => ({
+        value: item.value,
+        label: item.text,
+    })), [items]);
+    const handleValueChanged = useCallback(({ item }) => {
+        if (item?.value === value) {
+            return;
+        }
+        if (item && item.value !== undefined) {
+            setValue(item.value);
+        }
+    }, [setValue, value]);
+    const renderOverlay = useCallback(() => (_jsxs(View, { style: [styles.overlayContainer], pointerEvents: "none", children: [_jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-top`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 1 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 0 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-top)` })] }) }), _jsx(View, { pointerEvents: "none", style: [styles.fadeOverlay, styles.fadeOverlayBottom, { height: fadeHeight }], children: _jsxs(Svg, { width: "100%", height: "100%", preserveAspectRatio: "none", children: [_jsx(Defs, { children: _jsxs(LinearGradient, { id: `${gradientId}-bottom`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx(Stop, { offset: "0", stopColor: theme.color.background.secondary, stopOpacity: 0 }), _jsx(Stop, { offset: "1", stopColor: theme.color.background.secondary, stopOpacity: 1 })] }) }), _jsx(Rect, { width: "100%", height: "100%", fill: `url(#${gradientId}-bottom)` })] }) })] })), [fadeHeight, gradientId, theme.color.background.secondary]);
+    const renderItem = useCallback(({ item }) => (_jsx(View, { style: styles.indicator, children: _jsx(BodyText, { size: "lg", children: item.label }) })), []);
+    return (_jsxs(View, { style: [styles.container, { height: pickerHeight }], children: [_jsx(View, { style: styles.overlayContainer, children: _jsx(View, { style: [styles.selection] }) }), _jsx(WheelPicker, { data: data, value: value, onValueChanged: handleValueChanged, itemHeight: ITEM_HEIGHT, visibleItemCount: displayCount, width: theme.components.timePicker.time.item.width, renderItem: renderItem, renderOverlay: renderOverlay })] }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        minWidth: theme.components.timePicker.time.item.width,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+    },
+    indicator: {
+        width: theme.components.timePicker.time.item.width,
+        height: theme.components.timePicker.time.item.height,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    overlayContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    selection: {
+        alignSelf: 'stretch',
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        borderRadius: theme.borderRadius.md,
+        width: theme.components.timePicker.time.item.width,
+        height: theme.components.timePicker.time.item.height,
+    },
+    fadeOverlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+    },
+    fadeOverlayBottom: {
+        top: undefined,
+        bottom: 0,
+    },
+}));
+export default TimePickerWheel;

package/build/components/{DatePicker/time-picker/wheel-web.d.ts → TimePicker/TimePickerWheel.web.d.ts}

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

package/build/components/TimePicker/TimePickerWheel.web.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from 'react';
+import { Platform, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { Extrapolate, interpolate, runOnJS, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
+import { StyleSheet } from 'react-native-unistyles';
+import { isEqual } from '../../utils';
+import { BodyText } from '../BodyText';
+const ITEM_HEIGHT = 44;
+const WheelWebItem = ({ displayValue, index, currentIndex, translateY, radius, displayCount, value, }) => {
+    const baseOpacity = displayValue?.value !== value ? 0.3 : 1;
+    const animatedStyle = useAnimatedStyle(() => {
+        const offset = (radius * 2) / displayCount;
+        const shifted = interpolate(translateY.value, [-radius, radius], [-radius + offset * (index - currentIndex), radius + offset * (index - currentIndex)], Extrapolate.EXTEND);
+        const angle = interpolate(shifted, [-radius, radius], [-Math.PI / 2, Math.PI / 2], Extrapolate.CLAMP);
+        const translate = radius * Math.sin(angle);
+        const rotateX = (angle * 180) / Math.PI;
+        return {
+            position: 'absolute',
+            height: ITEM_HEIGHT - 10,
+            opacity: baseOpacity,
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: [{ translateY: translate }, { rotateX: `${rotateX}deg` }],
+        };
+    }, [baseOpacity, currentIndex, displayCount, index, radius, translateY]);
+    return (_jsx(Animated.View, { style: animatedStyle, children: _jsx(BodyText, { size: "lg", children: displayValue?.text }) }));
+};
+const TimePickerWheel = ({ value, setValue = () => { }, items }) => {
+    const displayCount = 5;
+    const translateY = useSharedValue(0);
+    const renderCount = displayCount * 2 < items.length ? displayCount * 8 : displayCount * 2 - 1;
+    const circular = items.length >= displayCount;
+    const height = 140;
+    const radius = height / 2;
+    const valueIndex = useMemo(() => {
+        return Math.max(0, items.findIndex(item => item.value === value));
+    }, [items, value]);
+    const handlePanEnd = useCallback((deltaY) => {
+        let newValueIndex = valueIndex - Math.round(deltaY / ((radius * 2) / displayCount));
+        if (circular) {
+            newValueIndex = (newValueIndex + items.length) % items.length;
+        }
+        else {
+            if (newValueIndex < 0) {
+                newValueIndex = 0;
+            }
+            else if (newValueIndex >= items.length) {
+                newValueIndex = items.length - 1;
+            }
+        }
+        const newValue = items[newValueIndex];
+        if (newValue?.value === value) {
+            return;
+        }
+        if (newValue?.value) {
+            setValue(newValue.value);
+        }
+        else if (items[0]?.value) {
+            setValue(items[0].value);
+        }
+    }, [circular, displayCount, items, radius, setValue, value, valueIndex]);
+    const panGesture = useMemo(() => Gesture.Pan()
+        .onUpdate(event => {
+        translateY.value = event.translationY;
+    })
+        .onEnd(event => {
+        runOnJS(handlePanEnd)(event.translationY);
+        translateY.value = 0;
+    }), [handlePanEnd, translateY]);
+    const displayValues = useMemo(() => {
+        const centerIndex = Math.floor(renderCount / 2);
+        return Array.from({ length: renderCount }, (_, index) => {
+            let targetIndex = valueIndex + index - centerIndex;
+            if (circular) {
+                targetIndex = ((targetIndex % items.length) + items.length) % items.length;
+            }
+            else {
+                targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+            }
+            return items[targetIndex] || items[0];
+        });
+    }, [renderCount, valueIndex, items, circular]);
+    const currentIndex = Math.max(0, displayValues.findIndex(item => item?.value === value));
+    return (_jsx(GestureDetector, { gesture: panGesture, children: _jsxs(View, { style: styles.container, children: [_jsx(View, { style: [
+                        styles.selectedIndicator,
+                        {
+                            transform: [{ translateY: -ITEM_HEIGHT / 2 }],
+                            height: ITEM_HEIGHT,
+                        },
+                    ] }), displayValues?.map((displayValue, index) => (_jsx(WheelWebItem, { displayValue: displayValue, index: index, currentIndex: currentIndex, translateY: translateY, radius: radius, displayCount: displayCount, value: value }, `${displayValue?.text}-${index}`)))] }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    container: {
+        minWidth: 30,
+        overflow: 'hidden',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 208,
+        ...Platform.select({
+            web: {
+                cursor: 'pointer',
+                userSelect: 'none',
+            },
+        }),
+    },
+    selectedIndicator: {
+        position: 'absolute',
+        width: theme.components.timePicker.time.item.width,
+        height: theme.components.timePicker.time.item.height,
+        top: '50%',
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        borderRadius: theme.borderRadius.md,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+}));
+const customComparator = (prev, next) => {
+    const areEqual = prev.value === next.value && prev.setValue === next.setValue && isEqual(prev.items, next.items);
+    return areEqual;
+};
+export default memo(TimePickerWheel, customComparator);

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

@@ -0,0 +1,6 @@
+import 'dayjs/locale/en';
+import '../DatePicker/polyfill';
+export type { BottomSheetMethods as TimePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+export type { DateType } from '../DatePicker/DatePicker.props';
+export { default as TimePicker } from './TimePicker';
+export type { TimePickerProps } from './TimePicker.props';

package/build/components/TimePicker/index.js

@@ -0,0 +1,3 @@
+import 'dayjs/locale/en';
+import '../DatePicker/polyfill';
+export { default as TimePicker } from './TimePicker';

package/build/components/TimePickerInput/TimePickerInput.d.ts

@@ -0,0 +1,6 @@
+import type TimePickerInputProps from './TimePickerInput.props';
+declare const TimePickerInput: {
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, format, openButtonLabel, autoCloseOnSelect, label, labelVariant, helperText, helperIcon, validText, invalidText, required, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }: TimePickerInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TimePickerInput;

package/build/components/TimePickerInput/TimePickerInput.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloseSmallIcon, TimeSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { TimePicker } from '../TimePicker';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import TimePickerInputDoneButton from './TimePickerInputDoneButton';
+dayjs.extend(customParseFormat);
+const DEFAULT_FORMAT_24 = 'HH:mm';
+const DEFAULT_FORMAT_12 = 'hh:mm A';
+const maskDefaultFormat = (value) => {
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 4);
+    const hours = digitsOnly.slice(0, 2);
+    const minutes = digitsOnly.slice(2, 4);
+    return [hours, minutes].filter(Boolean).join(':');
+};
+const TimePickerInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder = '--:--', inBottomSheet = false, format, openButtonLabel = 'Open time picker', autoCloseOnSelect = true, label, labelVariant, helperText, helperIcon, validText, invalidText, required = true, onChange, onChangeText, onBlur, onFocus, value, timePickerProps, onClear, ...rest }) => {
+    const formFieldContext = useFormFieldContext();
+    const isDisabled = formFieldContext?.disabled ?? disabled;
+    const isReadonly = formFieldContext?.readonly ?? readonly;
+    const pickerRef = useRef(null);
+    const accessoryViewID = useMemo(() => {
+        if (Platform.OS !== 'ios')
+            return undefined;
+        return `timepicker-input-${Math.random().toString(36).slice(2)}`;
+    }, []);
+    const use12Hours = timePickerProps?.use12Hours ?? false;
+    const resolvedFormat = useMemo(() => format ?? (use12Hours ? DEFAULT_FORMAT_12 : DEFAULT_FORMAT_24), [format, use12Hours]);
+    const formatTime = useCallback((dateValue) => {
+        if (!dateValue)
+            return '';
+        const parsed = dayjs(dateValue);
+        return parsed.isValid() ? parsed.format(resolvedFormat) : '';
+    }, [resolvedFormat]);
+    const isDefaultFormat = resolvedFormat === DEFAULT_FORMAT_24;
+    const [inputValue, setInputValue] = useState(() => formatTime(value));
+    useEffect(() => {
+        setInputValue(formatTime(value));
+    }, [value, formatTime]);
+    const handleTextChange = useCallback((text) => {
+        const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+        setInputValue(nextValue);
+        onChangeText?.(nextValue);
+        if (!nextValue) {
+            onChange?.({ date: undefined });
+            return;
+        }
+        const parsed = dayjs(nextValue, resolvedFormat, true);
+        if (parsed.isValid()) {
+            onChange?.({ date: parsed.toDate() });
+        }
+        else {
+            onChange?.({ date: undefined });
+        }
+    }, [isDefaultFormat, onChange, onChangeText, resolvedFormat]);
+    const handleClear = useCallback(() => {
+        setInputValue('');
+        onChange?.({ date: undefined });
+        onClear?.();
+    }, [onChange, onClear]);
+    const closeKeyboard = useCallback(() => {
+        Keyboard.dismiss();
+    }, []);
+    const openPicker = useCallback(() => {
+        if (isDisabled || isReadonly)
+            return;
+        closeKeyboard();
+        pickerRef.current?.present();
+    }, [closeKeyboard, isDisabled, isReadonly]);
+    const selectedDate = useMemo(() => {
+        if (value) {
+            return value;
+        }
+        const parsed = dayjs(inputValue, resolvedFormat, true);
+        return parsed.isValid() ? parsed.toDate() : undefined;
+    }, [value, inputValue, resolvedFormat]);
+    const handlePickerChange = useCallback(({ date }) => {
+        if (!date) {
+            handleClear();
+            return;
+        }
+        const formatted = formatTime(date);
+        setInputValue(formatted);
+        onChange?.({ date });
+        if (autoCloseOnSelect) {
+            pickerRef.current?.close?.();
+        }
+    }, [autoCloseOnSelect, formatTime, handleClear, onChange]);
+    const handleBlur = useCallback((event) => {
+        onBlur?.(event);
+    }, [onBlur]);
+    const handleFocus = useCallback((event) => {
+        onFocus?.(event);
+    }, [onFocus]);
+    const { onCancel: pickerOnCancel, ...restTimePickerProps } = timePickerProps ?? {};
+    const { style: inputStyle, keyboardType: keyboardTypeProp, inputMode: inputModeProp, accessibilityHint: accessibilityHintProp, accessibilityLabel: accessibilityLabelProp, accessible: accessibleProp, importantForAccessibility: importantForAccessibilityProp, ...textInputProps } = rest;
+    const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+    const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+    const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the time in ${resolvedFormat} format`;
+    const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Time input';
+    const resolvedAccessible = accessibleProp ?? true;
+    const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+    const handleCancel = useCallback(() => {
+        pickerOnCancel?.();
+        pickerRef.current?.close?.();
+    }, [pickerOnCancel]);
+    const placeholderValue = placeholder;
+    return (_jsxs(_Fragment, { children: [_jsxs(Input, { validationStatus: validationStatus, disabled: disabled, readonly: readonly, focused: focused, label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validText: validText, invalidText: invalidText, required: required, style: styles.wrap, accessible: false, children: [_jsx(InputField, { editable: !isReadonly && !isDisabled, value: inputValue, placeholder: placeholderValue, onChangeText: handleTextChange, onBlur: handleBlur, onFocus: handleFocus, inBottomSheet: inBottomSheet, keyboardType: resolvedKeyboardType, inputMode: resolvedInputMode, accessibilityHint: resolvedAccessibilityHint, "aria-label": "Time input", accessibilityLabel: resolvedAccessibilityLabel, accessible: resolvedAccessible, accessibilityState: {
+                            disabled: isDisabled || isReadonly,
+                        }, importantForAccessibility: resolvedImportantForAccessibility, inputAccessoryViewID: Platform.OS === 'ios' ? accessoryViewID : undefined, ...textInputProps, style: [styles.input, inputStyle] }), !!inputValue && onClear && !isReadonly && !isDisabled && (_jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: "Clear time", accessibilityHint: "Removes the current time", icon: CloseSmallIcon, onPress: handleClear }) })), _jsx(InputSlot, { accessibilityElementsHidden: false, children: _jsx(UnstyledIconButton, { accessibilityLabel: openButtonLabel, accessibilityHint: "Opens the time picker", icon: TimeSmallIcon, onPress: openPicker, disabled: isDisabled || isReadonly }) })] }), _jsx(TimePicker, { ref: pickerRef, date: selectedDate, onChange: handlePickerChange, onCancel: handleCancel, ...restTimePickerProps }), Platform.OS === 'ios' && accessoryViewID && (_jsx(TimePickerInputDoneButton, { accessoryViewID: accessoryViewID, closeKeyboard: closeKeyboard }))] }));
+};
+TimePickerInput.displayName = 'TimePickerInput';
+const styles = StyleSheet.create(theme => ({
+    wrap: {
+        gap: theme.components.input.date.gap,
+    },
+    input: {
+        paddingLeft: 0,
+        paddingRight: 0,
+    },
+}));
+export default TimePickerInput;

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

@@ -0,0 +1,52 @@
+import type { TextInputProps, ViewProps } from 'react-native';
+import type { DateType } from '../DatePicker/DatePicker.props';
+import type { TimePickerProps } from '../TimePicker/TimePicker.props';
+export interface TimePickerInputBaseProps {
+    disabled?: boolean;
+    validationStatus?: 'initial' | 'valid' | 'invalid';
+    readonly?: boolean;
+    focused?: boolean;
+    label?: string;
+    labelVariant?: 'heading' | 'body';
+    helperText?: string;
+    helperIcon?: React.ComponentType;
+    validText?: string;
+    invalidText?: string;
+    placeholder?: string;
+    inBottomSheet?: boolean;
+    required?: boolean;
+    /**
+     * Controls how the selected time is formatted when displayed inside the input.
+     * Accepts any Day.js format string.
+     */
+    format?: string;
+    /**
+     * Accessible label announced when activating the time picker trigger button.
+     */
+    openButtonLabel?: string;
+    /**
+     * When true (default), the picker sheet is dismissed as soon as a time is picked.
+     */
+    autoCloseOnSelect?: boolean;
+    /**
+     * Additional props forwarded to the underlying TimePicker instance.
+     */
+    timePickerProps?: Omit<TimePickerProps, 'date' | 'onChange' | 'ref'>;
+    /**
+     * Handles cleared input values.
+     */
+    onClear?: () => void;
+}
+export type TimePickerInputProps = TimePickerInputBaseProps & Omit<TextInputProps, 'value' | 'onChange' | 'children'> & ViewProps & {
+    /**
+     * Controlled time value. Accepts Date, string, number or Day.js instances.
+     */
+    value?: DateType;
+    /**
+     * Fired after a valid time is parsed either from typing or the picker selection.
+     */
+    onChange?: (params: {
+        date: DateType;
+    }) => void;
+};
+export default TimePickerInputProps;

package/build/components/TimePickerInput/TimePickerInput.props.js

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

package/build/components/TimePickerInput/TimePickerInputDoneButton.d.ts

@@ -0,0 +1,8 @@
+declare const TimePickerInputDoneButton: {
+    ({ accessoryViewID, closeKeyboard, }: {
+        accessoryViewID: string;
+        closeKeyboard: () => void;
+    }): import("react/jsx-runtime").JSX.Element;
+    DisplayName: string;
+};
+export default TimePickerInputDoneButton;

package/build/components/TimePickerInput/TimePickerInputDoneButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+const TimePickerInputDoneButton = ({ accessoryViewID, closeKeyboard, }) => {
+    return (_jsx(InputAccessoryView, { nativeID: accessoryViewID, children: _jsx(View, { style: styles.accessory, children: _jsx(Button, { accessibilityRole: "button", accessibilityLabel: "Done", onPress: closeKeyboard, variant: "ghost", colorScheme: "functional", children: "Done" }) }) }));
+};
+const styles = StyleSheet.create(theme => ({
+    accessory: {
+        paddingHorizontal: 16,
+        paddingVertical: 2,
+        alignItems: 'flex-end',
+        backgroundColor: theme.color.surface.neutral.strong,
+        borderTopWidth: theme.borderWidth[1],
+        borderTopColor: theme.color.border.subtle,
+    },
+}));
+TimePickerInputDoneButton.DisplayName = 'TimePickerInputDoneButton';
+export default TimePickerInputDoneButton;

package/build/components/TimePickerInput/TimePickerInputDoneButton.web.d.ts

@@ -0,0 +1,5 @@
+declare const TimePickerInputDoneButton: {
+    (): null;
+    DisplayName: string;
+};
+export default TimePickerInputDoneButton;