@dreamstack-us/kaal 0.0.1

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

@@ -0,0 +1,180 @@
+"use strict";
+
+import { StyleSheet } from 'react-native-unistyles';
+const ITEM_HEIGHT = 44;
+const VISIBLE_ITEMS = 5;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+export const styles = StyleSheet.create(theme => ({
+  // Container styles
+  container: {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.card,
+    padding: theme.spacing(4)
+  },
+  // ============ Wheel Picker Styles (iOS) ============
+  wheelContainer: {
+    flexDirection: 'row',
+    height: CONTAINER_HEIGHT,
+    backgroundColor: theme.colors.background.elevated,
+    // @ts-ignore - web-only property
+    backdropFilter: 'blur(20px)',
+    borderRadius: theme.radii.card,
+    overflow: 'hidden',
+    alignItems: 'center',
+    paddingHorizontal: theme.spacing(2)
+  },
+  wheelColumn: {
+    flex: 1,
+    height: CONTAINER_HEIGHT,
+    overflow: 'hidden',
+    position: 'relative'
+  },
+  wheelSelectionIndicator: {
+    position: 'absolute',
+    top: ITEM_HEIGHT * 2,
+    left: 4,
+    right: 4,
+    height: ITEM_HEIGHT,
+    backgroundColor: theme.colors.datepicker.wheelHighlight,
+    borderRadius: theme.radii.button,
+    zIndex: 0
+  },
+  wheelItemsContainer: {
+    zIndex: 1
+  },
+  wheelItem: {
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  wheelItemText: {
+    fontSize: 22,
+    color: theme.colors.foreground.default,
+    fontWeight: '400',
+    opacity: 0.5
+  },
+  wheelItemTextSelected: {
+    fontWeight: '500',
+    opacity: 1
+  },
+  wheelSeparator: {
+    fontSize: 22,
+    fontWeight: '500',
+    color: theme.colors.foreground.default,
+    paddingHorizontal: theme.spacing(1)
+  },
+  // ============ Material Time Picker Styles ============
+  materialContainer: {
+    backgroundColor: theme.colors.background.subtle,
+    borderRadius: 28,
+    padding: theme.spacing(6),
+    width: 320
+  },
+  materialHeader: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: theme.colors.foreground.muted,
+    letterSpacing: 0.5,
+    marginBottom: theme.spacing(5),
+    textTransform: 'uppercase'
+  },
+  // Time input display
+  timeInputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.spacing(3),
+    marginBottom: theme.spacing(6)
+  },
+  timeFieldsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  timeField: {
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.button,
+    paddingVertical: theme.spacing(3),
+    paddingHorizontal: theme.spacing(2),
+    minWidth: 80,
+    alignItems: 'center'
+  },
+  timeFieldActive: {
+    backgroundColor: theme.colors.primary.default
+  },
+  timeFieldText: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: theme.colors.foreground.default,
+    fontVariant: ['tabular-nums']
+  },
+  timeFieldTextActive: {
+    color: '#FFFFFF'
+  },
+  timeSeparator: {
+    fontSize: 48,
+    fontWeight: '400',
+    color: theme.colors.foreground.default,
+    marginHorizontal: theme.spacing(1)
+  },
+  // Period toggle (AM/PM)
+  periodToggleContainer: {
+    borderWidth: 1,
+    borderColor: theme.colors.border.strong,
+    borderRadius: theme.radii.button,
+    overflow: 'hidden'
+  },
+  periodButton: {
+    paddingVertical: theme.spacing(2),
+    paddingHorizontal: theme.spacing(3),
+    backgroundColor: 'transparent'
+  },
+  periodButtonActive: {
+    backgroundColor: `${theme.colors.primary.default}20` // 20% opacity
+  },
+  periodButtonTop: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.border.strong
+  },
+  periodButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: theme.colors.foreground.muted
+  },
+  periodButtonTextActive: {
+    color: theme.colors.primary.default
+  },
+  // ============ Clock Face Styles ============
+  clockContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: theme.spacing(5)
+  },
+  // ============ Action Buttons ============
+  actionsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  keyboardButton: {
+    padding: theme.spacing(2)
+  },
+  keyboardButtonText: {
+    fontSize: 20,
+    color: theme.colors.foreground.muted
+  },
+  actionButtonsContainer: {
+    flexDirection: 'row',
+    gap: theme.spacing(2)
+  },
+  actionButton: {
+    paddingVertical: theme.spacing(2.5),
+    paddingHorizontal: theme.spacing(4),
+    borderRadius: 20
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: theme.colors.primary.default
+  }
+}));
+//# sourceMappingURL=TimePicker.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","ITEM_HEIGHT","VISIBLE_ITEMS","CONTAINER_HEIGHT","styles","create","theme","container","backgroundColor","colors","background","elevated","borderRadius","radii","card","padding","spacing","wheelContainer","flexDirection","height","backdropFilter","overflow","alignItems","paddingHorizontal","wheelColumn","flex","position","wheelSelectionIndicator","top","left","right","datepicker","wheelHighlight","button","zIndex","wheelItemsContainer","wheelItem","justifyContent","wheelItemText","fontSize","color","foreground","default","fontWeight","opacity","wheelItemTextSelected","wheelSeparator","materialContainer","subtle","width","materialHeader","muted","letterSpacing","marginBottom","textTransform","timeInputContainer","gap","timeFieldsContainer","timeField","paddingVertical","minWidth","timeFieldActive","primary","timeFieldText","fontVariant","timeFieldTextActive","timeSeparator","marginHorizontal","periodToggleContainer","borderWidth","borderColor","border","strong","periodButton","periodButtonActive","periodButtonTop","borderBottomWidth","borderBottomColor","periodButtonText","periodButtonTextActive","clockContainer","actionsContainer","keyboardButton","keyboardButtonText","actionButtonsContainer","actionButton","actionButtonText"],"sourceRoot":"../../../../src","sources":["components/TimePicker/TimePicker.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,MAAMC,WAAW,GAAG,EAAE;AACtB,MAAMC,aAAa,GAAG,CAAC;AACvB,MAAMC,gBAAgB,GAAGF,WAAW,GAAGC,aAAa;AAEpD,OAAO,MAAME,MAAM,GAAGJ,UAAU,CAACK,MAAM,CAAEC,KAAK,KAAM;EAClD;EACAC,SAAS,EAAE;IACTC,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,UAAU,CAACC,QAAQ;IACjDC,YAAY,EAAEN,KAAK,CAACO,KAAK,CAACC,IAAI;IAC9BC,OAAO,EAAET,KAAK,CAACU,OAAO,CAAC,CAAC;EAC1B,CAAC;EAED;EACAC,cAAc,EAAE;IACdC,aAAa,EAAE,KAAK;IACpBC,MAAM,EAAEhB,gBAAgB;IACxBK,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,UAAU,CAACC,QAAQ;IACjD;IACAS,cAAc,EAAE,YAAY;IAC5BR,YAAY,EAAEN,KAAK,CAACO,KAAK,CAACC,IAAI;IAC9BO,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,iBAAiB,EAAEjB,KAAK,CAACU,OAAO,CAAC,CAAC;EACpC,CAAC;EAEDQ,WAAW,EAAE;IACXC,IAAI,EAAE,CAAC;IACPN,MAAM,EAAEhB,gBAAgB;IACxBkB,QAAQ,EAAE,QAAQ;IAClBK,QAAQ,EAAE;EACZ,CAAC;EAEDC,uBAAuB,EAAE;IACvBD,QAAQ,EAAE,UAAU;IACpBE,GAAG,EAAE3B,WAAW,GAAG,CAAC;IACpB4B,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRX,MAAM,EAAElB,WAAW;IACnBO,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACsB,UAAU,CAACC,cAAc;IACvDpB,YAAY,EAAEN,KAAK,CAACO,KAAK,CAACoB,MAAM;IAChCC,MAAM,EAAE;EACV,CAAC;EAEDC,mBAAmB,EAAE;IACnBD,MAAM,EAAE;EACV,CAAC;EAEDE,SAAS,EAAE;IACTjB,MAAM,EAAElB,WAAW;IACnBoC,cAAc,EAAE,QAAQ;IACxBf,UAAU,EAAE;EACd,CAAC;EAEDgB,aAAa,EAAE;IACbC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACC,OAAO;IACtCC,UAAU,EAAE,KAAK;IACjBC,OAAO,EAAE;EACX,CAAC;EAEDC,qBAAqB,EAAE;IACrBF,UAAU,EAAE,KAAK;IACjBC,OAAO,EAAE;EACX,CAAC;EAEDE,cAAc,EAAE;IACdP,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACC,OAAO;IACtCnB,iBAAiB,EAAEjB,KAAK,CAACU,OAAO,CAAC,CAAC;EACpC,CAAC;EAED;EACA+B,iBAAiB,EAAE;IACjBvC,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,UAAU,CAACsC,MAAM;IAC/CpC,YAAY,EAAE,EAAE;IAChBG,OAAO,EAAET,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACzBiC,KAAK,EAAE;EACT,CAAC;EAEDC,cAAc,EAAE;IACdX,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACU,KAAK;IACpCC,aAAa,EAAE,GAAG;IAClBC,YAAY,EAAE/C,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IAC9BsC,aAAa,EAAE;EACjB,CAAC;EAED;EACAC,kBAAkB,EAAE;IAClBrC,aAAa,EAAE,KAAK;IACpBI,UAAU,EAAE,QAAQ;IACpBe,cAAc,EAAE,QAAQ;IACxBmB,GAAG,EAAElD,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACrBqC,YAAY,EAAE/C,KAAK,CAACU,OAAO,CAAC,CAAC;EAC/B,CAAC;EAEDyC,mBAAmB,EAAE;IACnBvC,aAAa,EAAE,KAAK;IACpBI,UAAU,EAAE;EACd,CAAC;EAEDoC,SAAS,EAAE;IACTlD,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACC,UAAU,CAACC,QAAQ;IACjDC,YAAY,EAAEN,KAAK,CAACO,KAAK,CAACoB,MAAM;IAChC0B,eAAe,EAAErD,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACjCO,iBAAiB,EAAEjB,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACnC4C,QAAQ,EAAE,EAAE;IACZtC,UAAU,EAAE;EACd,CAAC;EAEDuC,eAAe,EAAE;IACfrD,eAAe,EAAEF,KAAK,CAACG,MAAM,CAACqD,OAAO,CAACpB;EACxC,CAAC;EAEDqB,aAAa,EAAE;IACbxB,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACC,OAAO;IACtCsB,WAAW,EAAE,CAAC,cAAc;EAC9B,CAAC;EAEDC,mBAAmB,EAAE;IACnBzB,KAAK,EAAE;EACT,CAAC;EAED0B,aAAa,EAAE;IACb3B,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACC,OAAO;IACtCyB,gBAAgB,EAAE7D,KAAK,CAACU,OAAO,CAAC,CAAC;EACnC,CAAC;EAED;EACAoD,qBAAqB,EAAE;IACrBC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEhE,KAAK,CAACG,MAAM,CAAC8D,MAAM,CAACC,MAAM;IACvC5D,YAAY,EAAEN,KAAK,CAACO,KAAK,CAACoB,MAAM;IAChCZ,QAAQ,EAAE;EACZ,CAAC;EAEDoD,YAAY,EAAE;IACZd,eAAe,EAAErD,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACjCO,iBAAiB,EAAEjB,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACnCR,eAAe,EAAE;EACnB,CAAC;EAEDkE,kBAAkB,EAAE;IAClBlE,eAAe,EAAE,GAAGF,KAAK,CAACG,MAAM,CAACqD,OAAO,CAACpB,OAAO,IAAI,CAAE;EACxD,CAAC;EAEDiC,eAAe,EAAE;IACfC,iBAAiB,EAAE,CAAC;IACpBC,iBAAiB,EAAEvE,KAAK,CAACG,MAAM,CAAC8D,MAAM,CAACC;EACzC,CAAC;EAEDM,gBAAgB,EAAE;IAChBvC,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACU;EACjC,CAAC;EAED4B,sBAAsB,EAAE;IACtBvC,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACqD,OAAO,CAACpB;EAC9B,CAAC;EAED;EACAsC,cAAc,EAAE;IACd1D,UAAU,EAAE,QAAQ;IACpBe,cAAc,EAAE,QAAQ;IACxBgB,YAAY,EAAE/C,KAAK,CAACU,OAAO,CAAC,CAAC;EAC/B,CAAC;EAED;EACAiE,gBAAgB,EAAE;IAChB/D,aAAa,EAAE,KAAK;IACpBmB,cAAc,EAAE,eAAe;IAC/Bf,UAAU,EAAE;EACd,CAAC;EAED4D,cAAc,EAAE;IACdnE,OAAO,EAAET,KAAK,CAACU,OAAO,CAAC,CAAC;EAC1B,CAAC;EAEDmE,kBAAkB,EAAE;IAClB5C,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACgC,UAAU,CAACU;EACjC,CAAC;EAEDiC,sBAAsB,EAAE;IACtBlE,aAAa,EAAE,KAAK;IACpBsC,GAAG,EAAElD,KAAK,CAACU,OAAO,CAAC,CAAC;EACtB,CAAC;EAEDqE,YAAY,EAAE;IACZ1B,eAAe,EAAErD,KAAK,CAACU,OAAO,CAAC,GAAG,CAAC;IACnCO,iBAAiB,EAAEjB,KAAK,CAACU,OAAO,CAAC,CAAC,CAAC;IACnCJ,YAAY,EAAE;EAChB,CAAC;EAED0E,gBAAgB,EAAE;IAChB/C,QAAQ,EAAE,EAAE;IACZI,UAAU,EAAE,KAAK;IACjBH,KAAK,EAAElC,KAAK,CAACG,MAAM,CAACqD,OAAO,CAACpB;EAC9B;AACF,CAAC,CAAC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,37 @@
+"use strict";
+
+import { MaterialTimePicker } from "./MaterialTimePicker.js";
+import { TimeWheelPicker } from "./TimeWheelPicker.js";
+
+/**
+ * Web implementation of TimePicker
+ *
+ * - theme="ios": Uses TimeWheelPicker (iOS-style wheel)
+ * - theme="android" or "native": Uses MaterialTimePicker (Material clock face)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TimePicker = ({
+  value,
+  onChange,
+  theme = 'ios',
+  is24Hour = false,
+  minuteInterval = 1
+}) => {
+  // iOS theme uses wheel picker
+  if (theme === 'ios') {
+    return /*#__PURE__*/_jsx(TimeWheelPicker, {
+      value: value,
+      onChange: onChange,
+      is24Hour: is24Hour,
+      minuteInterval: minuteInterval
+    });
+  }
+
+  // Android/native theme uses Material clock face
+  return /*#__PURE__*/_jsx(MaterialTimePicker, {
+    value: value,
+    onChange: onChange,
+    is24Hour: is24Hour
+  });
+};
+//# sourceMappingURL=TimePicker.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["MaterialTimePicker","TimeWheelPicker","jsx","_jsx","TimePicker","value","onChange","theme","is24Hour","minuteInterval"],"sourceRoot":"../../../../src","sources":["components/TimePicker/TimePicker.web.tsx"],"mappings":";;AAEA,SAASA,kBAAkB,QAAQ,yBAAsB;AACzD,SAASC,eAAe,QAAQ,sBAAmB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AALA,SAAAC,GAAA,IAAAC,IAAA;AAMA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,KAAK;EACbC,QAAQ,GAAG,KAAK;EAChBC,cAAc,GAAG;AACnB,CAAC,KAAK;EACJ;EACA,IAAIF,KAAK,KAAK,KAAK,EAAE;IACnB,oBACEJ,IAAA,CAACF,eAAe;MACdI,KAAK,EAAEA,KAAM;MACbC,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAEA,QAAS;MACnBC,cAAc,EAAEA;IAAe,CAChC,CAAC;EAEN;;EAEA;EACA,oBACEN,IAAA,CAACH,kBAAkB;IAACK,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA,QAAS;IAACE,QAAQ,EAAEA;EAAS,CAAE,CAAC;AAEhF,CAAC","ignoreList":[]}

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

@@ -0,0 +1,178 @@
+"use strict";
+
+import { memo, useCallback, useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { to12Hour, to24Hour } from "../../hooks/useTimePicker.js";
+import { styles } from "./TimePicker.styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ITEM_HEIGHT = 44;
+const VISIBLE_ITEMS = 5;
+const CONTAINER_HEIGHT = ITEM_HEIGHT * VISIBLE_ITEMS;
+const WheelColumn = /*#__PURE__*/memo(({
+  items,
+  selectedIndex,
+  onSelect
+}) => {
+  const translateY = useSharedValue(-selectedIndex * ITEM_HEIGHT);
+  const handleSelect = useCallback(index => {
+    onSelect(index);
+  }, [onSelect]);
+  const panGesture = useMemo(() => Gesture.Pan().onUpdate(e => {
+    'worklet';
+
+    translateY.value = e.translationY + -selectedIndex * ITEM_HEIGHT;
+  }).onEnd(e => {
+    'worklet';
+
+    const velocity = e.velocityY;
+    const targetIndex = Math.round(-translateY.value / ITEM_HEIGHT);
+    const clampedIndex = Math.max(0, Math.min(items.length - 1, targetIndex));
+    translateY.value = withSpring(-clampedIndex * ITEM_HEIGHT, {
+      velocity,
+      damping: 20,
+      stiffness: 200
+    });
+    runOnJS(handleSelect)(clampedIndex);
+  }), [selectedIndex, items.length, handleSelect, translateY]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wheelColumn,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wheelSelectionIndicator
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.wheelItemsContainer, animatedStyle],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            height: ITEM_HEIGHT * 2
+          }
+        }), items.map((item, index) => {
+          const isSelected = index === selectedIndex;
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.wheelItem,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.wheelItemText, isSelected && styles.wheelItemTextSelected],
+              children: item.label
+            })
+          }, `${item.value}`);
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            height: ITEM_HEIGHT * 2
+          }
+        })]
+      })
+    })]
+  });
+});
+WheelColumn.displayName = 'WheelColumn';
+export const TimeWheelPicker = /*#__PURE__*/memo(({
+  value,
+  onChange,
+  is24Hour = false,
+  minuteInterval = 1
+}) => {
+  // Generate hour items
+  const hourItems = useMemo(() => {
+    if (is24Hour) {
+      return Array.from({
+        length: 24
+      }, (_, i) => ({
+        value: i,
+        label: i.toString().padStart(2, '0')
+      }));
+    }
+    // 12-hour format: 1-12
+    return Array.from({
+      length: 12
+    }, (_, i) => ({
+      value: i + 1,
+      label: (i + 1).toString().padStart(2, '0')
+    }));
+  }, [is24Hour]);
+
+  // Generate minute items based on interval
+  const minuteItems = useMemo(() => {
+    const items = [];
+    for (let i = 0; i < 60; i += minuteInterval) {
+      items.push({
+        value: i,
+        label: i.toString().padStart(2, '0')
+      });
+    }
+    return items;
+  }, [minuteInterval]);
+
+  // Period items for 12-hour format
+  const periodItems = useMemo(() => [{
+    value: 'AM',
+    label: 'AM'
+  }, {
+    value: 'PM',
+    label: 'PM'
+  }], []);
+
+  // Calculate selected indices
+  const {
+    hour: hour12,
+    period
+  } = to12Hour(value.hours);
+  const hourIndex = is24Hour ? value.hours : hour12 - 1; // 12-hour is 1-indexed
+  const minuteIndex = Math.floor(value.minutes / minuteInterval);
+  const periodIndex = period === 'AM' ? 0 : 1;
+  const handleHourChange = useCallback(index => {
+    let newHours;
+    if (is24Hour) {
+      newHours = index;
+    } else {
+      const hour12 = index + 1; // Convert from 0-indexed to 1-12
+      newHours = to24Hour(hour12, period);
+    }
+    onChange({
+      hours: newHours,
+      minutes: value.minutes
+    });
+  }, [is24Hour, period, value.minutes, onChange]);
+  const handleMinuteChange = useCallback(index => {
+    const newMinutes = index * minuteInterval;
+    onChange({
+      hours: value.hours,
+      minutes: newMinutes
+    });
+  }, [value.hours, minuteInterval, onChange]);
+  const handlePeriodChange = useCallback(index => {
+    const newPeriod = index === 0 ? 'AM' : 'PM';
+    const newHours = to24Hour(hour12, newPeriod);
+    onChange({
+      hours: newHours,
+      minutes: value.minutes
+    });
+  }, [hour12, value.minutes, onChange]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wheelContainer,
+    children: [/*#__PURE__*/_jsx(WheelColumn, {
+      items: hourItems,
+      selectedIndex: hourIndex,
+      onSelect: handleHourChange
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.wheelSeparator,
+      children: ":"
+    }), /*#__PURE__*/_jsx(WheelColumn, {
+      items: minuteItems,
+      selectedIndex: minuteIndex,
+      onSelect: handleMinuteChange
+    }), !is24Hour && /*#__PURE__*/_jsx(WheelColumn, {
+      items: periodItems,
+      selectedIndex: periodIndex,
+      onSelect: handlePeriodChange
+    })]
+  });
+});
+TimeWheelPicker.displayName = 'TimeWheelPicker';
+//# sourceMappingURL=TimeWheelPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["memo","useCallback","useMemo","Text","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedStyle","useSharedValue","withSpring","to12Hour","to24Hour","styles","jsx","_jsx","jsxs","_jsxs","ITEM_HEIGHT","VISIBLE_ITEMS","CONTAINER_HEIGHT","WheelColumn","items","selectedIndex","onSelect","translateY","handleSelect","index","panGesture","Pan","onUpdate","e","value","translationY","onEnd","velocity","velocityY","targetIndex","Math","round","clampedIndex","max","min","length","damping","stiffness","animatedStyle","transform","style","wheelColumn","children","wheelSelectionIndicator","gesture","wheelItemsContainer","height","map","item","isSelected","wheelItem","wheelItemText","wheelItemTextSelected","label","displayName","TimeWheelPicker","onChange","is24Hour","minuteInterval","hourItems","Array","from","_","i","toString","padStart","minuteItems","push","periodItems","hour","hour12","period","hours","hourIndex","minuteIndex","floor","minutes","periodIndex","handleHourChange","newHours","handleMinuteChange","newMinutes","handlePeriodChange","newPeriod","wheelContainer","wheelSeparator"],"sourceRoot":"../../../../src","sources":["components/TimePicker/TimeWheelPicker.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,7 @@
+"use strict";
+
+export { TimePicker } from './TimePicker';
+export { TimeWheelPicker } from "./TimeWheelPicker.js";
+export { ClockFace } from "./ClockFace.js";
+export { MaterialTimePicker } from "./MaterialTimePicker.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["TimePicker","TimeWheelPicker","ClockFace","MaterialTimePicker"],"sourceRoot":"../../../../src","sources":["components/TimePicker/index.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,SAAS,QAAQ,gBAAa;AACvC,SAASC,kBAAkB,QAAQ,yBAAsB","ignoreList":[]}

package/lib/module/components/WheelPicker/WheelPicker.js

@@ -0,0 +1,5 @@
+"use strict";
+
+// Native platforms don't use custom wheel picker - they use native pickers
+export { WheelPicker } from "./WheelPicker.web.js";
+//# sourceMappingURL=WheelPicker.js.map

package/lib/module/components/WheelPicker/WheelPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WheelPicker"],"sourceRoot":"../../../../src","sources":["components/WheelPicker/WheelPicker.tsx"],"mappings":";;AAAA;AACA,SAASA,WAAW,QAAQ,sBAAmB","ignoreList":[]}

package/lib/module/components/WheelPicker/WheelPicker.styles.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import { StyleSheet } from 'react-native-unistyles';
+export const styles = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    height: 220,
+    backgroundColor: theme.colors.background.elevated,
+    borderRadius: theme.radii.card,
+    overflow: 'hidden'
+  },
+  column: {
+    flex: 1,
+    height: 220,
+    overflow: 'hidden'
+  },
+  selectionHighlight: {
+    position: 'absolute',
+    top: 88,
+    left: 4,
+    right: 4,
+    height: 44,
+    backgroundColor: theme.colors.datepicker.wheelHighlight,
+    borderRadius: theme.radii.button,
+    zIndex: 0
+  },
+  itemsContainer: {
+    zIndex: 1
+  },
+  item: {
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  itemText: {
+    fontSize: 21,
+    color: theme.colors.foreground.default,
+    fontWeight: '400'
+  }
+}));
+//# sourceMappingURL=WheelPicker.styles.js.map

package/lib/module/components/WheelPicker/WheelPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","styles","create","theme","container","flexDirection","height","backgroundColor","colors","background","elevated","borderRadius","radii","card","overflow","column","flex","selectionHighlight","position","top","left","right","datepicker","wheelHighlight","button","zIndex","itemsContainer","item","justifyContent","alignItems","itemText","fontSize","color","foreground","default","fontWeight"],"sourceRoot":"../../../../src","sources":["components/WheelPicker/WheelPicker.styles.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,OAAO,MAAMC,MAAM,GAAGD,UAAU,CAACE,MAAM,CAAEC,KAAK,KAAM;EAClDC,SAAS,EAAE;IACTC,aAAa,EAAE,KAAK;IACpBC,MAAM,EAAE,GAAG;IACXC,eAAe,EAAEJ,KAAK,CAACK,MAAM,CAACC,UAAU,CAACC,QAAQ;IACjDC,YAAY,EAAER,KAAK,CAACS,KAAK,CAACC,IAAI;IAC9BC,QAAQ,EAAE;EACZ,CAAC;EACDC,MAAM,EAAE;IACNC,IAAI,EAAE,CAAC;IACPV,MAAM,EAAE,GAAG;IACXQ,QAAQ,EAAE;EACZ,CAAC;EACDG,kBAAkB,EAAE;IAClBC,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,EAAE;IACPC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRf,MAAM,EAAE,EAAE;IACVC,eAAe,EAAEJ,KAAK,CAACK,MAAM,CAACc,UAAU,CAACC,cAAc;IACvDZ,YAAY,EAAER,KAAK,CAACS,KAAK,CAACY,MAAM;IAChCC,MAAM,EAAE;EACV,CAAC;EACDC,cAAc,EAAE;IACdD,MAAM,EAAE;EACV,CAAC;EACDE,IAAI,EAAE;IACJrB,MAAM,EAAE,EAAE;IACVsB,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDC,QAAQ,EAAE;IACRC,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAE7B,KAAK,CAACK,MAAM,CAACyB,UAAU,CAACC,OAAO;IACtCC,UAAU,EAAE;EACd;AACF,CAAC,CAAC,CAAC","ignoreList":[]}