@webority-technologies/mobile-ui 0.0.1

package/lib/module/components/TimePicker/TimePicker.js

@@ -0,0 +1,686 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { createAnimatedValue, setNativeValue, useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import Button from "../Button/Button.js";
+import { PickerTrigger } from "../PickerTrigger/PickerTrigger.js";
+
+/**
+ * TimePicker supports two modes:
+ *
+ * 1. Controlled-modal mode — pass `visible`, `onChange`, `onClose`. The
+ *    component renders only the modal sheet and the caller owns open/close
+ *    state plus its own trigger UI.
+ * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
+ *    field (label / value / placeholder / chevron / clear / helper / error)
+ *    and manages its own modal open state. `onChange` is still called on
+ *    confirm.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ITEM_HEIGHT = 40;
+const VISIBLE_ITEMS = 5;
+const PICKER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+const CENTER_OFFSET = Math.floor(VISIBLE_ITEMS / 2);
+const HAPTIC_DEBOUNCE_MS = 35;
+const range = (start, endInclusive, step = 1) => {
+  const out = [];
+  for (let v = start; v <= endInclusive; v += step) {
+    out.push(v);
+  }
+  return out;
+};
+const pad2 = n => n.toString().padStart(2, '0');
+const to24h = (hour, period, format) => {
+  if (format === '24h') {
+    return hour;
+  }
+  if (period === 'AM') {
+    return hour === 12 ? 0 : hour;
+  }
+  return hour === 12 ? 12 : hour + 12;
+};
+const from24h = (hour, format) => {
+  if (format === '24h') {
+    return {
+      displayHour: hour,
+      period: 'AM'
+    };
+  }
+  if (hour === 0) {
+    return {
+      displayHour: 12,
+      period: 'AM'
+    };
+  }
+  if (hour === 12) {
+    return {
+      displayHour: 12,
+      period: 'PM'
+    };
+  }
+  if (hour > 12) {
+    return {
+      displayHour: hour - 12,
+      period: 'PM'
+    };
+  }
+  return {
+    displayHour: hour,
+    period: 'AM'
+  };
+};
+const clampMinuteToStep = (minute, step) => {
+  const rounded = Math.round(minute / step) * step;
+  return Math.min(59, Math.max(0, rounded));
+};
+const Wheel = ({
+  kind,
+  label,
+  data,
+  selectedIndex,
+  onIndexChange,
+  formatItem,
+  theme,
+  haptic,
+  testID
+}) => {
+  const listRef = useRef(null);
+  const scrollY = useRef(createAnimatedValue(selectedIndex * ITEM_HEIGHT)).current;
+  const lastIndexRef = useRef(selectedIndex);
+  const lastHapticAtRef = useRef(0);
+
+  // Keep list aligned when selectedIndex changes externally (e.g. value prop, format flip).
+  useEffect(() => {
+    if (lastIndexRef.current !== selectedIndex) {
+      lastIndexRef.current = selectedIndex;
+      const offset = selectedIndex * ITEM_HEIGHT;
+      setNativeValue(scrollY, offset);
+      // Defer to next frame so FlatList has measured.
+      requestAnimationFrame(() => {
+        listRef.current?.scrollToOffset({
+          offset,
+          animated: false
+        });
+      });
+    }
+  }, [selectedIndex, scrollY]);
+  const hapticDebounceMs = theme.components.timePicker?.hapticDebounceMs ?? HAPTIC_DEBOUNCE_MS;
+  const onScroll = useMemo(() => Animated.event([{
+    nativeEvent: {
+      contentOffset: {
+        y: scrollY
+      }
+    }
+  }], {
+    useNativeDriver: true,
+    listener: event => {
+      const y = event.nativeEvent.contentOffset.y;
+      const idx = Math.round(y / ITEM_HEIGHT);
+      if (idx !== lastIndexRef.current && idx >= 0 && idx < data.length) {
+        const now = Date.now();
+        if (now - lastHapticAtRef.current >= hapticDebounceMs) {
+          const h = resolveHaptic(haptic, 'selection');
+          if (h) {
+            triggerHaptic(h);
+          }
+          lastHapticAtRef.current = now;
+        }
+        lastIndexRef.current = idx;
+      }
+    }
+  }), [scrollY, data.length, haptic, hapticDebounceMs]);
+  const onMomentumScrollEnd = useCallback(event => {
+    const y = event.nativeEvent.contentOffset.y;
+    const idx = Math.max(0, Math.min(data.length - 1, Math.round(y / ITEM_HEIGHT)));
+    if (idx !== selectedIndex) {
+      onIndexChange(idx);
+    }
+  }, [data.length, onIndexChange, selectedIndex]);
+  const handleA11yAction = useCallback(event => {
+    const action = event.nativeEvent.actionName;
+    if (action === 'increment') {
+      const next = Math.min(data.length - 1, selectedIndex + 1);
+      if (next !== selectedIndex) {
+        onIndexChange(next);
+      }
+    } else if (action === 'decrement') {
+      const next = Math.max(0, selectedIndex - 1);
+      if (next !== selectedIndex) {
+        onIndexChange(next);
+      }
+    }
+  }, [data.length, onIndexChange, selectedIndex]);
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => {
+    const distance = Animated.subtract(Animated.divide(scrollY, ITEM_HEIGHT), index);
+    const opacity = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.3, 0.6, 1, 0.6, 0.3],
+      extrapolate: 'clamp'
+    });
+    const scale = distance.interpolate({
+      inputRange: [-2, -1, 0, 1, 2],
+      outputRange: [0.85, 0.95, 1.05, 0.95, 0.85],
+      extrapolate: 'clamp'
+    });
+    const isSelected = index === selectedIndex;
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.wheelItem, {
+        opacity,
+        transform: [{
+          scale
+        }]
+      }],
+      accessible: false,
+      importantForAccessibility: "no",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [{
+          fontSize: theme.typography.fontSize.xl,
+          color: isSelected ? theme.colors.text.primary : theme.colors.text.secondary,
+          fontWeight: isSelected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium,
+          letterSpacing: theme.typography.letterSpacing.normal
+        }],
+        children: formatItem(item)
+      })
+    });
+  }, [scrollY, selectedIndex, theme, formatItem]);
+  const keyExtractor = useCallback((item, index) => `${kind}-${String(item)}-${index}`, [kind]);
+  const getItemLayout = useCallback((_data, index) => ({
+    length: ITEM_HEIGHT,
+    offset: ITEM_HEIGHT * index,
+    index
+  }), []);
+  const currentValueText = formatItem(data[selectedIndex] ?? '');
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wheelColumn,
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wheelA11yLayer,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: currentValueText
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleA11yAction
+    }), /*#__PURE__*/_jsx(Animated.FlatList, {
+      ref: listRef,
+      data: data,
+      keyExtractor: keyExtractor,
+      renderItem: renderItem,
+      getItemLayout: getItemLayout,
+      showsVerticalScrollIndicator: false,
+      snapToInterval: ITEM_HEIGHT,
+      snapToAlignment: "start",
+      decelerationRate: "fast",
+      bounces: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll,
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      contentContainerStyle: {
+        paddingVertical: ITEM_HEIGHT * CENTER_OFFSET
+      },
+      initialScrollIndex: selectedIndex,
+      style: styles.wheelList,
+      importantForAccessibility: "no-hide-descendants"
+    })]
+  });
+};
+const TimePicker = props => {
+  const {
+    visible,
+    value,
+    onChange,
+    onClose,
+    format = '12h',
+    minuteStep = 1,
+    title = 'Select Time',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    testID,
+    style,
+    containerStyle,
+    headerLabelStyle,
+    footerButtonStyle,
+    label,
+    placeholder,
+    helperText,
+    error,
+    required,
+    disabled,
+    size,
+    variant,
+    clearable,
+    onClear,
+    formatValue,
+    triggerStyle,
+    haptic
+  } = props;
+  const isControlled = props.visible !== undefined;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isControlled ? visible : internalOpen;
+
+  // In trigger mode the trigger field is what's on screen by default, so it
+  // carries the bare testID; the modal sheet (rendered alongside it, just
+  // closed) gets a derived id to avoid two nodes sharing the same testID.
+  const modalTestID = isControlled ? testID : testID ? `${testID}-modal` : undefined;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const opacity = useRef(createAnimatedValue(0)).current;
+  const translateY = useRef(createAnimatedValue(40)).current;
+  const finalizeClose = useCallback(() => {
+    if (isControlled) {
+      onClose?.();
+    } else {
+      setInternalOpen(false);
+    }
+  }, [isControlled, onClose]);
+
+  // Animate out before finalizing, matching DatePicker/DateRangePicker — this
+  // sheet used to spring in and then vanish on close.
+  const handleCloseModal = useCallback(() => {
+    Animated.parallel([Animated.timing(opacity, {
+      toValue: 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: false
+    }), Animated.timing(translateY, {
+      toValue: 40,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    })]).start(() => finalizeClose());
+  }, [finalizeClose, opacity, translateY, theme.motion.duration.fast, theme.motion.easing.accelerate]);
+  const hours = useMemo(() => format === '24h' ? range(0, 23) : range(1, 12), [format]);
+  const minutes = useMemo(() => range(0, 59, minuteStep), [minuteStep]);
+  const periods = useMemo(() => ['AM', 'PM'], []);
+  const initial = useMemo(() => {
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const minute = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    return {
+      displayHour,
+      minute,
+      period,
+      hour24: h24
+    };
+  }, [value, format, minuteStep]);
+  const [hourIndex, setHourIndex] = useState(() => {
+    const idx = hours.indexOf(initial.displayHour);
+    return idx >= 0 ? idx : 0;
+  });
+  const [minuteIndex, setMinuteIndex] = useState(() => {
+    const idx = minutes.indexOf(initial.minute);
+    return idx >= 0 ? idx : 0;
+  });
+  const [periodIndex, setPeriodIndex] = useState(() => initial.period === 'PM' ? 1 : 0);
+
+  // Re-sync on open toggle / value change / format / step.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const h24 = value && Number.isFinite(value.hour) ? value.hour : new Date().getHours();
+    const m = value && Number.isFinite(value.minute) ? value.minute : new Date().getMinutes();
+    const stepped = clampMinuteToStep(m, minuteStep);
+    const {
+      displayHour,
+      period
+    } = from24h(h24, format);
+    const hIdx = hours.indexOf(displayHour);
+    setHourIndex(hIdx >= 0 ? hIdx : 0);
+    const mIdx = minutes.indexOf(stepped);
+    setMinuteIndex(mIdx >= 0 ? mIdx : 0);
+    setPeriodIndex(period === 'PM' ? 1 : 0);
+  }, [open, value, format, minuteStep, hours, minutes]);
+
+  // Sheet animations.
+
+  useEffect(() => {
+    let anim;
+    if (open) {
+      anim = Animated.parallel([
+      // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.cubic),
+        useNativeDriver: false
+      }), Animated.spring(translateY, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      })]);
+      anim.start();
+    } else {
+      opacity.setValue(0);
+      setNativeValue(translateY, 40);
+    }
+    return () => anim?.stop();
+  }, [open, opacity, translateY, theme.motion]);
+  const announce = useCallback(msg => {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
+      AccessibilityInfo.announceForAccessibility(msg);
+    }
+  }, []);
+  const handleHourIndex = useCallback(idx => {
+    setHourIndex(idx);
+    announce(`Hour ${hours[idx]}`);
+  }, [hours, announce]);
+  const handleMinuteIndex = useCallback(idx => {
+    setMinuteIndex(idx);
+    announce(`${minutes[idx]} minutes`);
+  }, [minutes, announce]);
+  const handlePeriodIndex = useCallback(idx => {
+    setPeriodIndex(idx);
+    announce(periods[idx] ?? '');
+  }, [periods, announce]);
+  const handleCancel = useCallback(() => {
+    if (haptic !== false) {
+      triggerHaptic('selection');
+    }
+    handleCloseModal();
+  }, [handleCloseModal, haptic]);
+  const handleConfirm = useCallback(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const period = periods[periodIndex] ?? 'AM';
+    const hour24 = to24h(displayHour, period, format);
+    const minute = minutes[minuteIndex] ?? 0;
+    if (haptic !== false) {
+      triggerHaptic('notificationSuccess');
+    }
+    onChange?.({
+      hour: hour24,
+      minute
+    });
+    handleCloseModal();
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, haptic]);
+  const summary = useMemo(() => {
+    const displayHour = hours[hourIndex] ?? 0;
+    const minute = minutes[minuteIndex] ?? 0;
+    if (format === '24h') {
+      return `${pad2(displayHour)}:${pad2(minute)}`;
+    }
+    const period = periods[periodIndex] ?? 'AM';
+    return `${pad2(displayHour)}:${pad2(minute)} ${period}`;
+  }, [hours, hourIndex, minutes, minuteIndex, periods, periodIndex, format]);
+  const formatHourItem = useCallback(item => pad2(Number(item)), []);
+  const formatMinuteItem = useCallback(item => pad2(Number(item)), []);
+  const formatPeriodItem = useCallback(item => String(item), []);
+  const defaultFormatValue = useCallback(t => {
+    if (format === '24h') {
+      return `${pad2(t.hour)}:${pad2(t.minute)}`;
+    }
+    const {
+      displayHour,
+      period
+    } = from24h(t.hour, '12h');
+    return `${displayHour}:${pad2(t.minute)} ${period}`;
+  }, [format]);
+  const triggerValue = !isControlled && value && Number.isFinite(value.hour) && Number.isFinite(value.minute) ? (formatValue ?? defaultFormatValue)(value) : undefined;
+  const modal = /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: handleCloseModal,
+    testID: modalTestID,
+    children: /*#__PURE__*/_jsxs(View
+    // Plain View + collapsable={false} — see Modal.tsx backdrop comment.
+    , {
+      collapsable: false,
+      style: styles.backdrop,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleCloseModal,
+        accessibilityLabel: "Close time picker",
+        accessibilityRole: "button"
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.sheet, {
+          paddingBottom: insets.bottom + theme.spacing.xl,
+          transform: [{
+            translateY
+          }]
+        }, style, containerStyle],
+        accessibilityViewIsModal: true,
+        accessible: true,
+        accessibilityRole: "none",
+        accessibilityLabel: title,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.handle
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.title, headerLabelStyle],
+          accessibilityRole: "header",
+          children: title
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.summaryWrap,
+          accessibilityLiveRegion: "polite",
+          accessibilityLabel: `Selected ${summary}`,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.summary,
+            children: summary
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.wheelsRow,
+          children: [/*#__PURE__*/_jsxs(View, {
+            pointerEvents: "none",
+            style: styles.selectionBand,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.bandLine
+            }), /*#__PURE__*/_jsx(View, {
+              style: [styles.bandLine, styles.bandLineBottom]
+            })]
+          }), /*#__PURE__*/_jsx(Wheel, {
+            kind: "hour",
+            label: "Hour",
+            data: hours,
+            selectedIndex: hourIndex,
+            onIndexChange: handleHourIndex,
+            formatItem: formatHourItem,
+            theme: theme,
+            haptic: haptic,
+            testID: "time-picker-hour"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.separator,
+            children: ":"
+          }), /*#__PURE__*/_jsx(Wheel, {
+            kind: "minute",
+            label: "Minute",
+            data: minutes,
+            selectedIndex: minuteIndex,
+            onIndexChange: handleMinuteIndex,
+            formatItem: formatMinuteItem,
+            theme: theme,
+            haptic: haptic,
+            testID: "time-picker-minute"
+          }), format === '12h' ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(View, {
+              style: styles.spacer
+            }), /*#__PURE__*/_jsx(Wheel, {
+              kind: "period",
+              label: "Period",
+              data: periods,
+              selectedIndex: periodIndex,
+              onIndexChange: handlePeriodIndex,
+              formatItem: formatPeriodItem,
+              theme: theme,
+              haptic: haptic,
+              testID: "time-picker-period"
+            })]
+          }) : null]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.footer,
+          children: [/*#__PURE__*/_jsx(Button, {
+            title: cancelLabel,
+            haptic: false,
+            variant: "ghost",
+            tone: "neutral",
+            onPress: handleCancel,
+            style: [styles.footerBtn, footerButtonStyle],
+            accessibilityHint: "Dismiss without changes",
+            testID: "time-picker-cancel"
+          }), /*#__PURE__*/_jsx(Button, {
+            title: confirmLabel,
+            variant: "solid",
+            tone: "primary",
+            haptic: false,
+            onPress: handleConfirm,
+            style: [styles.footerBtn, footerButtonStyle],
+            accessibilityHint: "Confirm selected time",
+            testID: "time-picker-confirm"
+          })]
+        })]
+      })]
+    })
+  });
+  if (isControlled) {
+    return modal;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      label: label,
+      placeholder: placeholder,
+      helperText: helperText,
+      error: error,
+      required: required,
+      disabled: disabled,
+      size: size,
+      variant: variant,
+      clearable: clearable,
+      onClear: onClear,
+      value: triggerValue,
+      onPress: () => setInternalOpen(true),
+      triggerStyle: triggerStyle,
+      testID: testID
+    }), modal]
+  });
+};
+const styles = StyleSheet.create({
+  wheelColumn: {
+    width: 64,
+    height: PICKER_HEIGHT,
+    overflow: 'hidden'
+  },
+  wheelList: {
+    flexGrow: 0,
+    height: PICKER_HEIGHT
+  },
+  wheelItem: {
+    height: ITEM_HEIGHT,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  wheelA11yLayer: {
+    ...StyleSheet.absoluteFill,
+    zIndex: 2
+  }
+});
+const buildStyles = theme => {
+  const sheetShadow = theme.shadows.xl;
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: theme.colors.background.overlay,
+      justifyContent: 'flex-end'
+    },
+    sheet: {
+      backgroundColor: theme.colors.background.elevated,
+      borderTopLeftRadius: theme.radius.xl,
+      borderTopRightRadius: theme.radius.xl,
+      paddingTop: theme.spacing.sm,
+      paddingHorizontal: theme.spacing.lg,
+      paddingBottom: theme.spacing.xl,
+      shadowColor: sheetShadow.shadowColor,
+      shadowOffset: sheetShadow.shadowOffset,
+      shadowOpacity: sheetShadow.shadowOpacity,
+      shadowRadius: sheetShadow.shadowRadius,
+      elevation: sheetShadow.elevation
+    },
+    handle: {
+      alignSelf: 'center',
+      width: theme.components.timePicker?.handleWidth ?? 36,
+      height: theme.components.timePicker?.handleHeight ?? 4,
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.border.secondary,
+      marginBottom: theme.spacing.sm
+    },
+    title: {
+      textAlign: 'center',
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold,
+      color: theme.colors.text.primary,
+      marginBottom: theme.spacing.sm
+    },
+    summaryWrap: {
+      alignItems: 'center',
+      marginBottom: theme.spacing.md
+    },
+    summary: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.primary,
+      letterSpacing: theme.typography.letterSpacing.wide
+    },
+    wheelsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: PICKER_HEIGHT,
+      position: 'relative',
+      marginBottom: theme.spacing.lg
+    },
+    selectionBand: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: ITEM_HEIGHT * CENTER_OFFSET,
+      height: ITEM_HEIGHT,
+      justifyContent: 'space-between'
+    },
+    bandLine: {
+      height: StyleSheet.hairlineWidth * 2,
+      backgroundColor: theme.colors.primary,
+      opacity: 0.85
+    },
+    bandLineBottom: {
+      // visual rhythm only — same color as top
+    },
+    separator: {
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold,
+      color: theme.colors.text.primary,
+      paddingHorizontal: theme.spacing.xs
+    },
+    spacer: {
+      width: theme.spacing.md
+    },
+    footer: {
+      flexDirection: 'row',
+      gap: theme.spacing.sm
+    },
+    footerBtn: {
+      flex: 1
+    }
+  });
+};
+export { TimePicker };
+export default TimePicker;
+//# sourceMappingURL=TimePicker.js.map

package/lib/module/components/TimePicker/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, TimePicker } from "./TimePicker.js";
+//# sourceMappingURL=index.js.map