@utilitywarehouse/hearth-react-native 0.24.0 → 0.25.0

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;

package/build/components/TimePickerInput/TimePickerInputDoneButton.web.js

@@ -0,0 +1,5 @@
+const TimePickerInputDoneButton = () => {
+    return null;
+};
+TimePickerInputDoneButton.DisplayName = 'TimePickerInputDoneButton';
+export default TimePickerInputDoneButton;

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

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

package/build/components/TimePickerInput/index.js

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

package/build/components/index.d.ts

@@ -52,6 +52,8 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './TimePicker';
+export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
 export * from './VerificationInput';

package/build/components/index.js

@@ -53,6 +53,8 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './TimePicker';
+export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
 export * from './VerificationInput';

package/docs/components/AllComponents.web.tsx

@@ -92,6 +92,8 @@ import {
   TabsList,
   Textarea,
   ThemedImage,
+  TimePicker,
+  TimePickerInput,
   ToastItem,
   ToggleButtonCard,
   ToggleButtonCardGroup,
@@ -151,6 +153,11 @@ const AllComponents: React.FC = () => {
   const handleDatePickerOpenPress = useCallback(() => {
     datePickerRef.current?.present();
   }, []);
+  const [selectedTime, setSelectedTime] = useState<DateType>();
+  const timePickerRef = useRef<BottomSheetModal>(null);
+  const handleTimePickerOpenPress = useCallback(() => {
+    timePickerRef.current?.present();
+  }, []);
   useEffect(() => {
     if (bottomSheetRef.current) {
       setTimeout(() => {
@@ -381,6 +388,29 @@ const AllComponents: React.FC = () => {
               </BottomSheetModalProvider>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
+            <Center flex={1}>
+              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
+              <BottomSheetModalProvider>
+                <TimePicker
+                  ref={timePickerRef}
+                  date={selectedTime}
+                  onChange={({ date }) => setSelectedTime(date)}
+                  onCancel={() => setSelectedTime(undefined)}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Time Picker Input"
+            link="/?path=/docs/forms-time-picker-input--docs"
+          >
+            <Center flex={1} padding="200">
+              <BottomSheetModalProvider>
+                <TimePickerInput placeholder="HH:mm" />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Description List"
             link="/?path=/docs/components-description-list--docs"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -20,6 +20,7 @@
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
+    "@quidone/react-native-wheel-picker": "^1.6.1",
     "dayjs": "^1.11.13"
   },
   "devDependencies": {

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,30 +1,47 @@
-import { ReactNode } from 'react';
 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 type { CalendarViews } from './enums';
-import TimePicker from './TimePicker';
-
-const CalendarView: Record<CalendarViews, ReactNode> = {
-  year: <Years />,
-  month: <Months />,
-  day: <Days />,
-  time: <TimePicker />,
-};
 
 const Calendar = () => {
-  const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } =
-    useDatePickerContext();
+  const {
+    hideHeader,
+    hideFooter,
+    calendarView,
+    containerHeight,
+    navigationPosition,
+    currentDate,
+    onSelectDate,
+    timeZone,
+    use12Hours,
+  } = useDatePickerContext();
+
+  const calendarContent =
+    calendarView === 'year' ? (
+      <Years />
+    ) : calendarView === 'month' ? (
+      <Months />
+    ) : calendarView === 'time' ? (
+      <TimePickerView
+        currentDate={currentDate}
+        onSelectDate={onSelectDate}
+        timeZone={timeZone}
+        use12Hours={use12Hours}
+        containerHeight={containerHeight}
+      />
+    ) : (
+      <Days />
+    );
 
   return (
     <View style={[styles.container]} testID="calendar">
       {!hideHeader ? <Header navigationPosition={navigationPosition} /> : null}
-      <View style={styles.containerInner(containerHeight)}>{CalendarView[calendarView]}</View>
+      <View style={styles.containerInner(containerHeight)}>{calendarContent}</View>
       {!hideFooter ? <Footer /> : null}
     </View>
   );

package/src/components/TimePicker/TimePicker.docs.mdx

@@ -0,0 +1,84 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Button, Center } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './TimePicker.stories';
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4" />
+
+<Meta title="Components / Time Picker" />
+
+<BackToTopButton />
+
+# Time Picker
+
+`TimePicker` presents a wheel-based time selector inside a bottom sheet, letting people pick hours and minutes without leaving the current context. It supports 12-hour and 24-hour clocks and returns a JavaScript `Date` whenever the selection changes.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+Use the `TimePicker` with a ref to present the bottom sheet when people tap a trigger button.
+
+<UsageWrap>
+  <Center>
+    <Button onPress={() => {}}>Pick a time</Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { useRef, useState } from 'react';
+import {
+  BottomSheetModalProvider,
+  Button,
+  TimePicker,
+  type DateType,
+} from '@utilitywarehouse/hearth-react-native';
+
+const BookingTime = () => {
+  const pickerRef = useRef(null);
+  const [time, setTime] = useState<DateType>();
+
+  return (
+    <BottomSheetModalProvider>
+      <Button onPress={() => pickerRef.current?.present()}>Choose time</Button>
+
+      <TimePicker
+        ref={pickerRef}
+        date={time}
+        onChange={({ date }) => setTime(date)}
+        onCancel={() => setTime(undefined)}
+        use12Hours={false}
+      />
+    </BottomSheetModalProvider>
+  );
+};
+```
+
+## Props
+
+`TimePicker` extends the `BottomSheetModal` component. The table below highlights the main props.
+
+| Prop             | Type                                    | Default    | Description                                                     |
+| ---------------- | --------------------------------------- | ---------- | --------------------------------------------------------------- |
+| `date`           | `DateType`                              | `-`        | Selected time value.                                            |
+| `timeZone`       | `string`                                | `-`        | IANA time zone identifier applied to the selected time.         |
+| `use12Hours`     | `boolean`                               | `false`    | Displays an AM/PM selector and formats hours from 1 to 12.      |
+| `minuteInterval` | `number`                                | `1`        | Step interval for minutes shown in the picker.                  |
+| `hideFooter`     | `boolean`                               | `false`    | Hides the Cancel/Ok actions.                                    |
+| `onChange`       | `(payload: { date: DateType }) => void` | `-`        | Fired whenever the selected time changes.                       |
+| `onCancel`       | `() => void`                            | `() => {}` | Fired when the cancel action is triggered.                      |
+| `ref`            | `Ref<BottomSheetModalMethods>`          | `-`        | Gives imperative access to present or dismiss the bottom sheet. |
+
+## Accessibility
+
+- Screen readers announce the picker when the sheet opens and focus the wheel area on Android.
+- Action buttons are exposed as standard buttons with clear labels.

package/src/components/TimePicker/TimePicker.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import { useRef, useState } from 'react';
+import { BottomSheetModalProvider, Button, DateType, TimePicker } from '../';
+
+figma.connect(
+  TimePicker,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4',
+  {
+    props: {},
+    example: props => {
+      const pickerRef = useRef(null);
+      const [time, setTime] = useState<DateType>();
+
+      return (
+        <BottomSheetModalProvider>
+          <Button onPress={() => pickerRef.current?.present()}>Choose time</Button>
+
+          <TimePicker
+            ref={pickerRef}
+            date={time}
+            onChange={({ date }) => setTime(date)}
+            onCancel={() => setTime(undefined)}
+            use12Hours={false}
+          />
+        </BottomSheetModalProvider>
+      );
+    },
+  }
+);

package/src/components/TimePicker/TimePicker.props.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/src/components/TimePicker/TimePicker.stories.tsx

@@ -0,0 +1,85 @@
+import { Meta, StoryObj } from '@storybook/react-native';
+import { useRef, useState } from 'react';
+import { Platform, View } from 'react-native';
+import { DateType, TimePicker } from '.';
+import { ViewWrap } from '../../../docs/components';
+import { BottomSheetModal } from '../BottomSheet';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Stories / TimePicker',
+  component: TimePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    use12Hours: {
+      control: 'boolean',
+      description: 'Display a 12-hour clock with AM/PM selector',
+      defaultValue: false,
+    },
+    minuteInterval: {
+      control: 'number',
+      description: 'Step interval for minutes shown in the picker',
+      defaultValue: 1,
+    },
+  },
+  args: {
+    use12Hours: false,
+    minuteInterval: 1,
+  },
+} satisfies Meta<typeof TimePicker>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type StoryArgs = Story['args'];
+
+export const Playground: Story = {
+  render: (args: StoryArgs) => {
+    const [selected, setSelected] = useState<DateType>();
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
+          <TimePicker
+            ref={modalRef}
+            date={selected}
+            use12Hours={args.use12Hours}
+            minuteInterval={args.minuteInterval}
+            onChange={({ date }) => setSelected(date)}
+            onCancel={() => setSelected(undefined)}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const TwelveHour: Story = {
+  args: {
+    use12Hours: true,
+  },
+  render: (args: StoryArgs) => {
+    const [selected, setSelected] = useState<DateType>();
+    const modalRef = useRef<BottomSheetModal>(null);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={() => modalRef.current?.present()}>Show 12-hour Time Picker</Button>
+          <TimePicker
+            ref={modalRef}
+            date={selected}
+            use12Hours={args.use12Hours}
+            minuteInterval={args.minuteInterval}
+            onChange={({ date }) => setSelected(date)}
+            onCancel={() => setSelected(undefined)}
+          />
+        </ViewWrap>
+      </View>
+    );
+  },
+};