@xaui/native 0.0.21 → 0.0.24

package/dist/timepicker/index.cjs

@@ -0,0 +1,1280 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/timepicker/index.ts
+var timepicker_exports = {};
+__export(timepicker_exports, {
+  TimePicker: () => TimePicker,
+  TimePickerDialog: () => TimePickerDialog,
+  TimePickerTrigger: () => TimePickerTrigger,
+  angleToHour: () => angleToHour,
+  angleToMinute: () => angleToMinute,
+  calculateAngleFromPosition: () => calculateAngleFromPosition,
+  clampHour: () => clampHour,
+  clampMinute: () => clampMinute,
+  formatTimeValue: () => formatTimeValue,
+  getCurrentTime: () => getCurrentTime,
+  getHourAngle: () => getHourAngle,
+  getMinuteAngle: () => getMinuteAngle,
+  isTimeInRange: () => isTimeInRange,
+  to12HourFormat: () => to12HourFormat,
+  to24HourFormat: () => to24HourFormat
+});
+module.exports = __toCommonJS(timepicker_exports);
+
+// src/components/timepicker/timepicker.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_native5 = require("react-native");
+var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
+
+// src/components/timepicker/timepicker.hook.ts
+var import_react6 = require("react");
+var import_core = require("@xaui/core");
+
+// src/core/theme-context.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_native2 = require("react-native");
+var import_theme = require("@xaui/core/theme");
+var import_palette = require("@xaui/core/palette");
+
+// src/core/portal/portal.tsx
+var import_react2 = require("react");
+
+// src/core/portal/portal-context.ts
+var import_react = require("react");
+var PortalContext = (0, import_react.createContext)(null);
+
+// src/core/portal/portal.tsx
+var portalId = 0;
+var Portal = ({ children }) => {
+  const context = (0, import_react2.useContext)(PortalContext);
+  const keyRef = (0, import_react2.useRef)(`portal-${++portalId}`);
+  (0, import_react2.useLayoutEffect)(() => {
+    if (!context) return;
+    context.addPortal(keyRef.current, children);
+  }, [children, context]);
+  (0, import_react2.useEffect)(() => {
+    if (!context) return;
+    const key = keyRef.current;
+    return () => {
+      context.removePortal(key);
+    };
+  }, [context]);
+  return null;
+};
+
+// src/core/portal/portal-host.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_native = require("react-native");
+var hostStyles = import_react_native.StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+// src/core/theme-context.tsx
+var XUIThemeContext = (0, import_react4.createContext)(null);
+
+// src/core/theme-hooks.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+function useXUITheme() {
+  const theme = (0, import_react5.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/index.ts
+var import_theme2 = require("@xaui/core/theme");
+
+// src/components/timepicker/timepicker.utils.ts
+var to12HourFormat = (hours) => {
+  if (hours === 0) {
+    return { hours: 12, period: "AM" };
+  }
+  if (hours < 12) {
+    return { hours, period: "AM" };
+  }
+  if (hours === 12) {
+    return { hours: 12, period: "PM" };
+  }
+  return { hours: hours - 12, period: "PM" };
+};
+var to24HourFormat = (hours, period) => {
+  if (period === "AM") {
+    return hours === 12 ? 0 : hours;
+  }
+  return hours === 12 ? 12 : hours + 12;
+};
+var formatTimeValue = (time, is24Hour) => {
+  const { hours, minutes } = time;
+  if (is24Hour) {
+    return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+  }
+  const { hours: displayHours, period } = to12HourFormat(hours);
+  return `${displayHours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")} ${period}`;
+};
+var getHourAngle = (hour, is24Hour) => {
+  const displayHour = is24Hour ? hour % 12 : hour;
+  return displayHour * 30 % 360;
+};
+var getMinuteAngle = (minute) => {
+  return minute * 6 % 360;
+};
+var angleToHour = (angle, _is24Hour) => {
+  const normalizedAngle = (angle % 360 + 360) % 360;
+  const hour = Math.round(normalizedAngle / 30) % 12;
+  return hour === 0 ? 12 : hour;
+};
+var angleToMinute = (angle) => {
+  const normalizedAngle = (angle % 360 + 360) % 360;
+  return Math.round(normalizedAngle / 6) % 60;
+};
+var calculateAngleFromPosition = (centerX, centerY, touchX, touchY) => {
+  const deltaX = touchX - centerX;
+  const deltaY = touchY - centerY;
+  const radians = Math.atan2(deltaY, deltaX);
+  const degrees = radians * 180 / Math.PI;
+  return (degrees + 90 + 360) % 360;
+};
+var isTimeInRange = (time, minTime, maxTime) => {
+  if (!minTime && !maxTime) return true;
+  const timeInMinutes = time.hours * 60 + time.minutes;
+  if (minTime) {
+    const minInMinutes = minTime.hours * 60 + minTime.minutes;
+    if (timeInMinutes < minInMinutes) return false;
+  }
+  if (maxTime) {
+    const maxInMinutes = maxTime.hours * 60 + maxTime.minutes;
+    if (timeInMinutes > maxInMinutes) return false;
+  }
+  return true;
+};
+var getCurrentTime = () => {
+  const now = /* @__PURE__ */ new Date();
+  return {
+    hours: now.getHours(),
+    minutes: now.getMinutes()
+  };
+};
+var clampHour = (hour, is24Hour) => {
+  if (is24Hour) {
+    return Math.max(0, Math.min(23, hour));
+  }
+  return Math.max(1, Math.min(12, hour));
+};
+var clampMinute = (minute) => {
+  return Math.max(0, Math.min(59, minute));
+};
+
+// src/components/timepicker/timepicker.hook.ts
+var useTimePickerState = (initialValue, is24Hour = false, onChange) => {
+  const [time, setTime] = (0, import_react6.useState)(initialValue || getCurrentTime());
+  const [mode, setMode] = (0, import_react6.useState)("hour");
+  const { hours: displayHours, period } = (0, import_react6.useMemo)(
+    () => is24Hour ? { hours: time.hours, period: "AM" } : to12HourFormat(time.hours),
+    [time.hours, is24Hour]
+  );
+  const handleHourChange = (hour) => {
+    const newTime = {
+      ...time,
+      hours: hour
+    };
+    setTime(newTime);
+    onChange?.(newTime);
+    setMode("minute");
+  };
+  const handleMinuteChange = (minute) => {
+    const newTime = {
+      ...time,
+      minutes: minute
+    };
+    setTime(newTime);
+    onChange?.(newTime);
+  };
+  const handlePeriodToggle = (newPeriod) => {
+    if (is24Hour) return;
+    const newHours = to24HourFormat(displayHours, newPeriod);
+    const newTime = {
+      ...time,
+      hours: newHours
+    };
+    setTime(newTime);
+    onChange?.(newTime);
+  };
+  const handleManualInput = (hours, minutes) => {
+    const newTime = { hours, minutes };
+    setTime(newTime);
+    onChange?.(newTime);
+  };
+  const toggleMode = () => {
+    setMode((prev) => prev === "hour" ? "minute" : "hour");
+  };
+  return {
+    time,
+    displayHours,
+    period,
+    mode,
+    handleHourChange,
+    handleMinuteChange,
+    handlePeriodToggle,
+    handleManualInput,
+    toggleMode,
+    setMode
+  };
+};
+var useTimePickerColors = (themeColor) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[(0, import_core.getSafeThemeColor)(themeColor)];
+  return (0, import_react6.useMemo)(() => {
+    return {
+      background: theme.colors.background,
+      surface: (0, import_core.withOpacity)(colorScheme.main, 0.12),
+      primary: colorScheme.main,
+      onPrimary: colorScheme.foreground,
+      text: theme.colors.foreground,
+      textSecondary: (0, import_core.withOpacity)(theme.colors.foreground, 0.6),
+      border: (0, import_core.withOpacity)(theme.colors.foreground, 0.12),
+      clockFace: (0, import_core.withOpacity)(colorScheme.main, 0.08),
+      selectedDigit: (0, import_core.withOpacity)(colorScheme.main, 0.12)
+    };
+  }, [
+    colorScheme.main,
+    colorScheme.foreground,
+    theme.colors.background,
+    theme.colors.foreground
+  ]);
+};
+
+// src/components/timepicker/timepicker.style.ts
+var import_react_native4 = require("react-native");
+var styles = import_react_native4.StyleSheet.create({
+  container: {
+    padding: 24,
+    alignItems: "center"
+  },
+  header: {
+    alignSelf: "stretch",
+    marginBottom: 24
+  },
+  headerTitle: {
+    fontSize: 14,
+    fontWeight: "400",
+    marginBottom: 16
+  },
+  timeDisplay: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  timeDisplayWithPeriod: {
+    justifyContent: "space-between"
+  },
+  timeSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  timeDigit: {
+    fontSize: 57,
+    fontWeight: "400",
+    lineHeight: 64,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    minWidth: 96,
+    textAlign: "center"
+  },
+  timeSeparator: {
+    fontSize: 57,
+    fontWeight: "400",
+    lineHeight: 64
+  },
+  periodSelector: {
+    gap: 4
+  },
+  periodButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    minWidth: 52,
+    alignItems: "center"
+  },
+  periodText: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  clockContainer: {
+    width: 256,
+    height: 256,
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 24
+  },
+  clockFace: {
+    width: 256,
+    height: 256,
+    borderRadius: 128,
+    justifyContent: "center",
+    alignItems: "center",
+    position: "relative"
+  },
+  clockCenter: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    position: "absolute"
+  },
+  clockHand: {
+    position: "absolute",
+    width: 2,
+    backgroundColor: "transparent",
+    transformOrigin: "top center"
+  },
+  clockHandLine: {
+    width: 2,
+    backgroundColor: "transparent"
+  },
+  clockHandDot: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    position: "absolute",
+    top: -8,
+    left: -7,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  clockNumber: {
+    position: "absolute",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  clockNumberText: {
+    fontSize: 16,
+    fontWeight: "400"
+  },
+  actions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: 8,
+    alignSelf: "stretch"
+  },
+  actionButton: {
+    paddingVertical: 10,
+    paddingHorizontal: 24,
+    borderRadius: 20
+  },
+  actionButtonText: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  keyboardButton: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  inputContainer: {
+    width: 256,
+    height: 256,
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 16
+  },
+  inputRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  input: {
+    width: 96,
+    height: 80,
+    borderRadius: 8,
+    borderWidth: 1,
+    fontSize: 57,
+    fontWeight: "400",
+    textAlign: "center",
+    padding: 8
+  },
+  inputSeparator: {
+    fontSize: 36,
+    fontWeight: "400"
+  },
+  trigger: {
+    minHeight: 52,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  triggerContent: {
+    flex: 1,
+    minWidth: 0
+  },
+  triggerText: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  clearButton: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/timepicker/timepicker.tsx
+var TimePicker = ({
+  value,
+  onChange,
+  is24Hour = false,
+  themeColor = "primary",
+  style
+}) => {
+  const {
+    time,
+    displayHours,
+    period,
+    mode,
+    handleHourChange,
+    handleMinuteChange,
+    handlePeriodToggle,
+    handleManualInput,
+    setMode
+  } = useTimePickerState(value, is24Hour, onChange);
+  const colors2 = useTimePickerColors(themeColor);
+  const hourAngle = (0, import_react7.useMemo)(
+    () => getHourAngle(displayHours, is24Hour),
+    [displayHours, is24Hour]
+  );
+  const minuteAngle = (0, import_react7.useMemo)(() => getMinuteAngle(time.minutes), [time.minutes]);
+  const currentAngle = mode === "hour" ? hourAngle : minuteAngle;
+  const handRotation = (0, import_react_native_reanimated.useSharedValue)(currentAngle);
+  const [hourInput, setHourInput] = (0, import_react7.useState)(
+    displayHours.toString().padStart(2, "0")
+  );
+  const [minuteInput, setMinuteInput] = (0, import_react7.useState)(
+    time.minutes.toString().padStart(2, "0")
+  );
+  (0, import_react7.useEffect)(() => {
+    handRotation.value = (0, import_react_native_reanimated.withTiming)(currentAngle - 180, {
+      duration: 120,
+      easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic)
+    });
+  }, [currentAngle, handRotation]);
+  (0, import_react7.useEffect)(() => {
+    setHourInput(displayHours.toString().padStart(2, "0"));
+  }, [displayHours]);
+  (0, import_react7.useEffect)(() => {
+    setMinuteInput(time.minutes.toString().padStart(2, "0"));
+  }, [time.minutes]);
+  const handStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => ({
+    transform: [{ rotate: `${handRotation.value}deg` }]
+  }));
+  const commitHourInput = () => {
+    if (hourInput.trim() === "") {
+      setHourInput(displayHours.toString().padStart(2, "0"));
+      return;
+    }
+    const hours = parseInt(hourInput, 10);
+    if (isNaN(hours)) {
+      setHourInput(displayHours.toString().padStart(2, "0"));
+      return;
+    }
+    const clampedHours = clampHour(hours, is24Hour);
+    const finalHours = is24Hour ? clampedHours : period === "PM" && clampedHours !== 12 ? clampedHours + 12 : clampedHours === 12 && period === "AM" ? 0 : clampedHours;
+    handleManualInput(finalHours, time.minutes);
+  };
+  const commitMinuteInput = () => {
+    if (minuteInput.trim() === "") {
+      setMinuteInput(time.minutes.toString().padStart(2, "0"));
+      return;
+    }
+    const minutes = parseInt(minuteInput, 10);
+    if (isNaN(minutes)) {
+      setMinuteInput(time.minutes.toString().padStart(2, "0"));
+      return;
+    }
+    handleManualInput(time.hours, clampMinute(minutes));
+  };
+  const renderClockNumbers = () => {
+    if (mode === "hour" && is24Hour) {
+      const outerRadius = 104;
+      const innerRadius = 70;
+      return Array.from({ length: 12 }, (_, slot) => {
+        const angle = slot * 30;
+        const radian = (angle - 90) * Math.PI / 180;
+        const outerValue = slot === 0 ? 12 : slot;
+        const innerValue = slot === 0 ? 0 : slot + 12;
+        const outerX = outerRadius * Math.cos(radian);
+        const outerY = outerRadius * Math.sin(radian);
+        const innerX = innerRadius * Math.cos(radian);
+        const innerY = innerRadius * Math.sin(radian);
+        const outerSelected = outerValue === displayHours;
+        const innerSelected = innerValue === displayHours;
+        return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, { key: `hour-24-slot-${slot}` }, /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Pressable,
+          {
+            onPress: () => handleHourChange(outerValue),
+            style: [
+              styles.clockNumber,
+              {
+                transform: [{ translateX: outerX }, { translateY: outerY }],
+                backgroundColor: outerSelected ? colors2.primary : "transparent"
+              }
+            ]
+          },
+          /* @__PURE__ */ import_react7.default.createElement(
+            import_react_native5.Text,
+            {
+              style: [
+                styles.clockNumberText,
+                { color: outerSelected ? colors2.onPrimary : colors2.text }
+              ]
+            },
+            outerValue
+          )
+        ), /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Pressable,
+          {
+            onPress: () => handleHourChange(innerValue),
+            style: [
+              styles.clockNumber,
+              {
+                transform: [{ translateX: innerX }, { translateY: innerY }],
+                backgroundColor: innerSelected ? colors2.primary : "transparent"
+              }
+            ]
+          },
+          /* @__PURE__ */ import_react7.default.createElement(
+            import_react_native5.Text,
+            {
+              style: [
+                styles.clockNumberText,
+                { color: innerSelected ? colors2.onPrimary : colors2.text }
+              ]
+            },
+            innerValue === 0 ? 24 : innerValue
+          )
+        ));
+      });
+    }
+    const numbers = mode === "hour" ? 12 : 60;
+    const step = mode === "hour" ? 1 : 5;
+    const radius = 100;
+    return Array.from({ length: numbers / step }, (_, i) => {
+      const value2 = mode === "hour" ? i === 0 ? 12 : i * step : i * step;
+      const angle = value2 / (mode === "hour" ? 12 : 60) * 360;
+      const radian = (angle - 90) * Math.PI / 180;
+      const x = radius * Math.cos(radian);
+      const y = radius * Math.sin(radian);
+      const isSelected = mode === "hour" ? value2 === displayHours : value2 === time.minutes;
+      return /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Pressable,
+        {
+          key: `${mode}-${value2}`,
+          onPress: () => {
+            if (mode === "hour") {
+              handleHourChange(value2 === 12 && period === "PM" ? 12 : value2);
+            } else {
+              handleMinuteChange(value2);
+            }
+          },
+          style: [
+            styles.clockNumber,
+            {
+              transform: [{ translateX: x }, { translateY: y }],
+              backgroundColor: isSelected ? colors2.primary : "transparent"
+            }
+          ]
+        },
+        /* @__PURE__ */ import_react7.default.createElement(
+          import_react_native5.Text,
+          {
+            style: [
+              styles.clockNumberText,
+              { color: isSelected ? colors2.onPrimary : colors2.text }
+            ]
+          },
+          mode === "minute" && value2 < 10 ? `0${value2}` : value2
+        )
+      );
+    });
+  };
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.container, style] }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.header }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [styles.headerTitle, { color: colors2.textSecondary }] }, "Select time"), /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native5.View,
+    {
+      style: [styles.timeDisplay, !is24Hour && styles.timeDisplayWithPeriod]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.timeSection }, /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.TextInput,
+      {
+        style: [
+          styles.timeDigit,
+          {
+            color: mode === "hour" ? colors2.primary : colors2.text,
+            backgroundColor: mode === "hour" ? colors2.selectedDigit : "transparent"
+          }
+        ],
+        value: hourInput,
+        onChangeText: (text) => {
+          const numeric = text.replace(/[^0-9]/g, "");
+          if (numeric.length > 2) return;
+          setHourInput(numeric);
+          if (numeric === "") return;
+          const hours = parseInt(numeric, 10);
+          if (isNaN(hours)) return;
+          const clampedHours = clampHour(hours, is24Hour);
+          const finalHours = is24Hour ? clampedHours : period === "PM" && clampedHours !== 12 ? clampedHours + 12 : clampedHours === 12 && period === "AM" ? 0 : clampedHours;
+          handleManualInput(finalHours, time.minutes);
+        },
+        onFocus: () => setMode("hour"),
+        onBlur: commitHourInput,
+        onSubmitEditing: commitHourInput,
+        keyboardType: "number-pad",
+        maxLength: 2,
+        selectTextOnFocus: true
+      }
+    ), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.Text, { style: [styles.timeSeparator, { color: colors2.text }] }, ":"), /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.TextInput,
+      {
+        style: [
+          styles.timeDigit,
+          {
+            color: mode === "minute" ? colors2.primary : colors2.text,
+            backgroundColor: mode === "minute" ? colors2.selectedDigit : "transparent"
+          }
+        ],
+        value: minuteInput,
+        onChangeText: (text) => {
+          const numeric = text.replace(/[^0-9]/g, "");
+          if (numeric.length > 2) return;
+          setMinuteInput(numeric);
+          if (numeric === "") return;
+          const minutes = parseInt(numeric, 10);
+          if (isNaN(minutes)) return;
+          handleManualInput(time.hours, clampMinute(minutes));
+        },
+        onFocus: () => setMode("minute"),
+        onBlur: commitMinuteInput,
+        onSubmitEditing: commitMinuteInput,
+        keyboardType: "number-pad",
+        maxLength: 2,
+        selectTextOnFocus: true
+      }
+    )),
+    !is24Hour && /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.periodSelector }, /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Pressable,
+      {
+        onPress: () => handlePeriodToggle("AM"),
+        style: [
+          styles.periodButton,
+          {
+            backgroundColor: period === "AM" ? colors2.surface : "transparent",
+            borderColor: period === "AM" ? colors2.primary : colors2.border
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Text,
+        {
+          style: [
+            styles.periodText,
+            { color: period === "AM" ? colors2.primary : colors2.text }
+          ]
+        },
+        "AM"
+      )
+    ), /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.Pressable,
+      {
+        onPress: () => handlePeriodToggle("PM"),
+        style: [
+          styles.periodButton,
+          {
+            backgroundColor: period === "PM" ? colors2.surface : "transparent",
+            borderColor: period === "PM" ? colors2.primary : colors2.border
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react7.default.createElement(
+        import_react_native5.Text,
+        {
+          style: [
+            styles.periodText,
+            { color: period === "PM" ? colors2.primary : colors2.text }
+          ]
+        },
+        "PM"
+      )
+    ))
+  )), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: styles.clockContainer }, /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.clockFace, { backgroundColor: colors2.clockFace }] }, renderClockNumbers(), /* @__PURE__ */ import_react7.default.createElement(import_react_native5.View, { style: [styles.clockCenter, { backgroundColor: colors2.primary }] }), /* @__PURE__ */ import_react7.default.createElement(
+    import_react_native_reanimated.default.View,
+    {
+      style: [
+        styles.clockHand,
+        {
+          height: 84,
+          top: "50%",
+          left: "50%",
+          marginLeft: -1
+        },
+        handStyle
+      ]
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.View,
+      {
+        style: [
+          styles.clockHandLine,
+          { height: "100%", backgroundColor: colors2.primary }
+        ]
+      }
+    ),
+    /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native5.View,
+      {
+        style: [styles.clockHandDot, { backgroundColor: colors2.primary }]
+      }
+    )
+  ))));
+};
+
+// src/components/timepicker/timepicker-dialog.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_native10 = require("react-native");
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_native9 = require("react-native");
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var import_react8 = require("react");
+var import_react_native7 = require("react-native");
+var import_core4 = require("@xaui/core");
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+var import_react_native6 = require("react-native");
+var SPRING_CONFIG = {
+  useNativeDriver: true,
+  speed: 14,
+  bounciness: 4
+};
+var TIMING_CONFIG = {
+  duration: 280,
+  easing: import_react_native6.Easing.bezier(0.2, 0, 0, 1),
+  useNativeDriver: true
+};
+var runOpenAnimation = (translateY, backdropOpacity, targetTranslateY) => {
+  const animation = import_react_native6.Animated.parallel([
+    import_react_native6.Animated.spring(translateY, {
+      ...SPRING_CONFIG,
+      toValue: targetTranslateY
+    }),
+    import_react_native6.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 1
+    })
+  ]);
+  animation.start();
+  return animation;
+};
+var runCloseAnimation = (translateY, backdropOpacity, screenHeight, onComplete) => {
+  const animation = import_react_native6.Animated.parallel([
+    import_react_native6.Animated.timing(translateY, {
+      ...TIMING_CONFIG,
+      toValue: screenHeight
+    }),
+    import_react_native6.Animated.timing(backdropOpacity, {
+      ...TIMING_CONFIG,
+      toValue: 0
+    })
+  ]);
+  animation.start(({ finished }) => {
+    if (finished && onComplete) {
+      onComplete();
+    }
+  });
+  return animation;
+};
+var runSnapAnimation = (translateY, targetTranslateY) => {
+  const animation = import_react_native6.Animated.spring(translateY, {
+    ...SPRING_CONFIG,
+    toValue: targetTranslateY
+  });
+  animation.start();
+  return animation;
+};
+
+// src/components/bottom-sheet/bottom-sheet.hook.ts
+var DISMISS_VELOCITY_THRESHOLD = 0.5;
+var DISMISS_DISTANCE_FRACTION = 0.3;
+var SCREEN_HEIGHT = import_react_native7.Dimensions.get("window").height;
+var getTranslateYForSnap = (snapFraction) => SCREEN_HEIGHT * (1 - snapFraction);
+var useBottomSheetAnimation = ({
+  isOpen,
+  snapPoints,
+  initialSnapIndex,
+  enableSwipeToDismiss,
+  disableAnimation,
+  onClose,
+  onSnapChange
+}) => {
+  const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
+  const currentSnapIndex = (0, import_react8.useRef)(initialSnapIndex);
+  const animationRef = (0, import_react8.useRef)(null);
+  const translateY = (0, import_react8.useRef)(new import_react_native7.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropOpacity = (0, import_react8.useRef)(new import_react_native7.Animated.Value(0)).current;
+  const sortedSnapPoints = (0, import_react8.useMemo)(
+    () => [...snapPoints].sort((a, b) => a - b),
+    [snapPoints]
+  );
+  const snapTranslateValues = (0, import_react8.useMemo)(
+    () => sortedSnapPoints.map(getTranslateYForSnap),
+    [sortedSnapPoints]
+  );
+  const open = (0, import_react8.useCallback)(() => {
+    setShouldRender(true);
+    const targetIndex = Math.min(initialSnapIndex, sortedSnapPoints.length - 1);
+    currentSnapIndex.current = targetIndex;
+    if (disableAnimation) {
+      translateY.setValue(snapTranslateValues[targetIndex]);
+      backdropOpacity.setValue(1);
+      return;
+    }
+    translateY.setValue(SCREEN_HEIGHT);
+    backdropOpacity.setValue(0);
+    animationRef.current?.stop();
+    animationRef.current = runOpenAnimation(
+      translateY,
+      backdropOpacity,
+      snapTranslateValues[targetIndex]
+    );
+  }, [
+    initialSnapIndex,
+    sortedSnapPoints,
+    snapTranslateValues,
+    disableAnimation,
+    translateY,
+    backdropOpacity
+  ]);
+  const close = (0, import_react8.useCallback)(() => {
+    if (disableAnimation) {
+      translateY.setValue(SCREEN_HEIGHT);
+      backdropOpacity.setValue(0);
+      setShouldRender(false);
+      onClose?.();
+      return;
+    }
+    animationRef.current?.stop();
+    animationRef.current = runCloseAnimation(
+      translateY,
+      backdropOpacity,
+      SCREEN_HEIGHT,
+      () => {
+        setShouldRender(false);
+        onClose?.();
+      }
+    );
+  }, [disableAnimation, translateY, backdropOpacity, onClose]);
+  const snapTo = (0, import_react8.useCallback)(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(index, sortedSnapPoints.length - 1));
+      currentSnapIndex.current = clampedIndex;
+      onSnapChange?.(clampedIndex);
+      if (disableAnimation) {
+        translateY.setValue(snapTranslateValues[clampedIndex]);
+        return;
+      }
+      animationRef.current?.stop();
+      animationRef.current = runSnapAnimation(
+        translateY,
+        snapTranslateValues[clampedIndex]
+      );
+    },
+    [
+      sortedSnapPoints,
+      snapTranslateValues,
+      disableAnimation,
+      translateY,
+      onSnapChange
+    ]
+  );
+  (0, import_react8.useEffect)(() => {
+    if (isOpen) {
+      open();
+    } else if (shouldRender) {
+      close();
+    }
+  }, [isOpen]);
+  const panResponder = (0, import_react8.useMemo)(
+    () => import_react_native7.PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => Math.abs(gestureState.dy) > 5,
+      onPanResponderMove: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const newTranslateY = currentTranslate + gestureState.dy;
+        const maxExpanded = snapTranslateValues[snapTranslateValues.length - 1];
+        const clamped = Math.max(maxExpanded, newTranslateY);
+        translateY.setValue(clamped);
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const currentTranslate = snapTranslateValues[currentSnapIndex.current];
+        const finalPosition = currentTranslate + gestureState.dy;
+        if (enableSwipeToDismiss && (gestureState.vy > DISMISS_VELOCITY_THRESHOLD || finalPosition > SCREEN_HEIGHT * (1 - sortedSnapPoints[0] * DISMISS_DISTANCE_FRACTION))) {
+          close();
+          return;
+        }
+        if (gestureState.vy < -DISMISS_VELOCITY_THRESHOLD) {
+          const nextIndex = Math.min(
+            currentSnapIndex.current + 1,
+            sortedSnapPoints.length - 1
+          );
+          snapTo(nextIndex);
+          return;
+        }
+        if (gestureState.vy > DISMISS_VELOCITY_THRESHOLD) {
+          const prevIndex = Math.max(currentSnapIndex.current - 1, 0);
+          if (prevIndex === currentSnapIndex.current && enableSwipeToDismiss) {
+            close();
+            return;
+          }
+          snapTo(prevIndex);
+          return;
+        }
+        let closestIndex = 0;
+        let minDistance = Infinity;
+        snapTranslateValues.forEach((snapVal, index) => {
+          const distance = Math.abs(finalPosition - snapVal);
+          if (distance < minDistance) {
+            minDistance = distance;
+            closestIndex = index;
+          }
+        });
+        snapTo(closestIndex);
+      }
+    }),
+    [
+      snapTranslateValues,
+      sortedSnapPoints,
+      enableSwipeToDismiss,
+      translateY,
+      close,
+      snapTo
+    ]
+  );
+  return {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    snapTo,
+    screenHeight: SCREEN_HEIGHT
+  };
+};
+var useBottomSheetStyles = (themeColor, radius) => {
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core4.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const sheetStyles = (0, import_react8.useMemo)(
+    () => ({
+      backgroundColor: colorScheme.background ?? theme.colors.background ?? "#ffffff",
+      borderTopLeftRadius: theme.borderRadius[radius],
+      borderTopRightRadius: theme.borderRadius[radius]
+    }),
+    [theme, colorScheme, radius]
+  );
+  const handleIndicatorColor = (0, import_react8.useMemo)(
+    () => theme.mode === "dark" ? `${colorScheme.main}60` : `${colorScheme.main}40`,
+    [theme, colorScheme]
+  );
+  return { sheetStyles, handleIndicatorColor };
+};
+
+// src/components/bottom-sheet/bottom-sheet.style.ts
+var import_react_native8 = require("react-native");
+var styles2 = import_react_native8.StyleSheet.create({
+  backdrop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)"
+  },
+  container: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sheet: {
+    overflow: "hidden"
+  },
+  handle: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 10
+  },
+  handleIndicator: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+var BottomSheet = ({
+  children,
+  isOpen,
+  snapPoints = [0.4, 0.9],
+  initialSnapIndex = 0,
+  themeColor = "default",
+  radius = "lg",
+  showBackdrop = true,
+  closeOnBackdropPress = true,
+  enableSwipeToDismiss = true,
+  showHandle = true,
+  disableAnimation = false,
+  style,
+  handleContent,
+  onClose,
+  onSnapChange
+}) => {
+  const {
+    shouldRender,
+    translateY,
+    backdropOpacity,
+    panResponder,
+    close,
+    screenHeight
+  } = useBottomSheetAnimation({
+    isOpen,
+    snapPoints,
+    initialSnapIndex,
+    enableSwipeToDismiss,
+    disableAnimation,
+    onClose,
+    onSnapChange
+  });
+  const { sheetStyles, handleIndicatorColor } = useBottomSheetStyles(
+    themeColor,
+    radius
+  );
+  if (!shouldRender) {
+    return null;
+  }
+  const handleBackdropPress = () => {
+    if (closeOnBackdropPress) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ import_react9.default.createElement(Portal, null, showBackdrop && /* @__PURE__ */ import_react9.default.createElement(import_react_native9.Animated.View, { style: [styles2.backdrop, { opacity: backdropOpacity }] }, /* @__PURE__ */ import_react9.default.createElement(import_react_native9.Pressable, { style: styles2.backdrop, onPress: handleBackdropPress })), /* @__PURE__ */ import_react9.default.createElement(
+    import_react_native9.Animated.View,
+    {
+      style: [
+        styles2.container,
+        {
+          height: screenHeight,
+          transform: [{ translateY }]
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react9.default.createElement(
+      import_react_native9.View,
+      {
+        style: [styles2.sheet, { height: screenHeight }, sheetStyles, style],
+        ...panResponder.panHandlers
+      },
+      showHandle && /* @__PURE__ */ import_react9.default.createElement(import_react_native9.View, { style: styles2.handle }, handleContent ?? /* @__PURE__ */ import_react9.default.createElement(
+        import_react_native9.View,
+        {
+          style: [
+            styles2.handleIndicator,
+            { backgroundColor: handleIndicatorColor }
+          ]
+        }
+      )),
+      /* @__PURE__ */ import_react9.default.createElement(import_react_native9.View, { style: styles2.content }, children)
+    )
+  ));
+};
+
+// src/components/timepicker/timepicker-dialog.tsx
+var TimePickerDialog = ({
+  isOpen,
+  onClose,
+  value,
+  onChange,
+  is24Hour = false,
+  themeColor = "primary",
+  confirmText = "OK",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel
+}) => {
+  const [tempValue, setTempValue] = (0, import_react10.useState)(value);
+  const colors2 = useTimePickerColors(themeColor);
+  const handleChange = (time) => {
+    setTempValue(time);
+    onChange?.(time);
+  };
+  const handleConfirm = () => {
+    if (tempValue) {
+      onConfirm?.(tempValue);
+    }
+    onClose();
+  };
+  const handleCancel = () => {
+    onCancel?.();
+    onClose();
+  };
+  return /* @__PURE__ */ import_react10.default.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ import_react10.default.createElement(import_react_native10.View, null, /* @__PURE__ */ import_react10.default.createElement(
+    TimePicker,
+    {
+      value: tempValue,
+      onChange: handleChange,
+      is24Hour,
+      themeColor
+    }
+  ), /* @__PURE__ */ import_react10.default.createElement(import_react_native10.View, { style: styles.actions }, /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native10.Pressable,
+    {
+      onPress: handleCancel,
+      style: [styles.actionButton, { backgroundColor: "transparent" }]
+    },
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native10.Text, { style: [styles.actionButtonText, { color: colors2.primary }] }, cancelText)
+  ), /* @__PURE__ */ import_react10.default.createElement(
+    import_react_native10.Pressable,
+    {
+      onPress: handleConfirm,
+      style: [styles.actionButton, { backgroundColor: "transparent" }]
+    },
+    /* @__PURE__ */ import_react10.default.createElement(import_react_native10.Text, { style: [styles.actionButtonText, { color: colors2.primary }] }, confirmText)
+  ))));
+};
+
+// src/components/timepicker/timepicker-trigger.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_native11 = require("react-native");
+var import_icons = require("@xaui/icons");
+var TimePickerTrigger = ({
+  value,
+  placeholder = "Select time",
+  is24Hour = false,
+  themeColor = "primary",
+  isDisabled = false,
+  isReadOnly = false,
+  isClearable = true,
+  icon,
+  style,
+  textStyle,
+  onPress,
+  onClear
+}) => {
+  const theme = useXUITheme();
+  const colors2 = useTimePickerColors(themeColor);
+  const hasValue = Boolean(value);
+  const displayValue = (0, import_react11.useMemo)(() => {
+    if (!value) return placeholder;
+    return formatTimeValue(value, is24Hour);
+  }, [value, placeholder, is24Hour]);
+  const triggerStyle = {
+    borderColor: colors2.border,
+    backgroundColor: colors2.background
+  };
+  const triggerTextStyle = {
+    color: hasValue ? theme.colors.foreground : colors2.textSecondary
+  };
+  const isBlocked = isDisabled || isReadOnly;
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_react_native11.Pressable,
+    {
+      onPress: isBlocked ? void 0 : onPress,
+      disabled: isBlocked,
+      style: [styles.trigger, triggerStyle, isBlocked && styles.disabled, style],
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isBlocked }
+    },
+    /* @__PURE__ */ import_react11.default.createElement(import_react_native11.View, { style: styles.triggerContent }, /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native11.Text,
+      {
+        style: [styles.triggerText, triggerTextStyle, textStyle],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      },
+      displayValue
+    )),
+    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ import_react11.default.createElement(
+      import_react_native11.TouchableOpacity,
+      {
+        onPress: onClear,
+        style: styles.clearButton,
+        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
+      },
+      /* @__PURE__ */ import_react11.default.createElement(import_icons.CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : icon ?? /* @__PURE__ */ import_react11.default.createElement(import_icons.TimeIcon, { color: theme.colors.foreground, size: 20 })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimePicker,
+  TimePickerDialog,
+  TimePickerTrigger,
+  angleToHour,
+  angleToMinute,
+  calculateAngleFromPosition,
+  clampHour,
+  clampMinute,
+  formatTimeValue,
+  getCurrentTime,
+  getHourAngle,
+  getMinuteAngle,
+  isTimeInRange,
+  to12HourFormat,
+  to24HourFormat
+});