@xaui/native 0.0.21 → 0.0.23

package/dist/timepicker/index.js

@@ -0,0 +1,813 @@
+import {
+  BottomSheet
+} from "../chunk-HC2SSHNU.js";
+import "../chunk-DXXNBF5P.js";
+import {
+  useXUITheme
+} from "../chunk-LTKYHG5V.js";
+
+// src/components/timepicker/timepicker.tsx
+import React, { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import { View, Text, Pressable, TextInput } from "react-native";
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
+} from "react-native-reanimated";
+
+// src/components/timepicker/timepicker.hook.ts
+import { useMemo, useState } from "react";
+import { getSafeThemeColor, withOpacity } from "@xaui/core";
+
+// 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] = useState(initialValue || getCurrentTime());
+  const [mode, setMode] = useState("hour");
+  const { hours: displayHours, period } = 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[getSafeThemeColor(themeColor)];
+  return useMemo(() => {
+    return {
+      background: theme.colors.background,
+      surface: withOpacity(colorScheme.main, 0.12),
+      primary: colorScheme.main,
+      onPrimary: colorScheme.foreground,
+      text: theme.colors.foreground,
+      textSecondary: withOpacity(theme.colors.foreground, 0.6),
+      border: withOpacity(theme.colors.foreground, 0.12),
+      clockFace: withOpacity(colorScheme.main, 0.08),
+      selectedDigit: withOpacity(colorScheme.main, 0.12)
+    };
+  }, [colorScheme.main, colorScheme.foreground, theme.colors.background, theme.colors.foreground]);
+};
+
+// src/components/timepicker/timepicker.style.ts
+import { StyleSheet } from "react-native";
+var styles = 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 colors = useTimePickerColors(themeColor);
+  const hourAngle = useMemo2(() => getHourAngle(displayHours, is24Hour), [displayHours, is24Hour]);
+  const minuteAngle = useMemo2(() => getMinuteAngle(time.minutes), [time.minutes]);
+  const currentAngle = mode === "hour" ? hourAngle : minuteAngle;
+  const handRotation = useSharedValue(currentAngle);
+  const [hourInput, setHourInput] = useState2(displayHours.toString().padStart(2, "0"));
+  const [minuteInput, setMinuteInput] = useState2(time.minutes.toString().padStart(2, "0"));
+  useEffect(() => {
+    handRotation.value = withTiming(currentAngle - 180, {
+      duration: 120,
+      easing: Easing.out(Easing.cubic)
+    });
+  }, [currentAngle, handRotation]);
+  useEffect(() => {
+    setHourInput(displayHours.toString().padStart(2, "0"));
+  }, [displayHours]);
+  useEffect(() => {
+    setMinuteInput(time.minutes.toString().padStart(2, "0"));
+  }, [time.minutes]);
+  const handStyle = 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__ */ React.createElement(React.Fragment, { key: `hour-24-slot-${slot}` }, /* @__PURE__ */ React.createElement(
+          Pressable,
+          {
+            onPress: () => handleHourChange(outerValue),
+            style: [
+              styles.clockNumber,
+              {
+                transform: [{ translateX: outerX }, { translateY: outerY }],
+                backgroundColor: outerSelected ? colors.primary : "transparent"
+              }
+            ]
+          },
+          /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              style: [
+                styles.clockNumberText,
+                { color: outerSelected ? colors.onPrimary : colors.text }
+              ]
+            },
+            outerValue
+          )
+        ), /* @__PURE__ */ React.createElement(
+          Pressable,
+          {
+            onPress: () => handleHourChange(innerValue),
+            style: [
+              styles.clockNumber,
+              {
+                transform: [{ translateX: innerX }, { translateY: innerY }],
+                backgroundColor: innerSelected ? colors.primary : "transparent"
+              }
+            ]
+          },
+          /* @__PURE__ */ React.createElement(
+            Text,
+            {
+              style: [
+                styles.clockNumberText,
+                { color: innerSelected ? colors.onPrimary : colors.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__ */ React.createElement(
+        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 ? colors.primary : "transparent"
+            }
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            style: [
+              styles.clockNumberText,
+              { color: isSelected ? colors.onPrimary : colors.text }
+            ]
+          },
+          mode === "minute" && value2 < 10 ? `0${value2}` : value2
+        )
+      );
+    });
+  };
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.headerTitle, { color: colors.textSecondary }] }, "Select time"), /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.timeDisplay,
+        !is24Hour && styles.timeDisplayWithPeriod
+      ]
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.timeSection }, /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        style: [
+          styles.timeDigit,
+          {
+            color: mode === "hour" ? colors.primary : colors.text,
+            backgroundColor: mode === "hour" ? colors.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__ */ React.createElement(Text, { style: [styles.timeSeparator, { color: colors.text }] }, ":"), /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        style: [
+          styles.timeDigit,
+          {
+            color: mode === "minute" ? colors.primary : colors.text,
+            backgroundColor: mode === "minute" ? colors.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__ */ React.createElement(View, { style: styles.periodSelector }, /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: () => handlePeriodToggle("AM"),
+        style: [
+          styles.periodButton,
+          {
+            backgroundColor: period === "AM" ? colors.surface : "transparent",
+            borderColor: period === "AM" ? colors.primary : colors.border
+          }
+        ]
+      },
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles.periodText,
+            { color: period === "AM" ? colors.primary : colors.text }
+          ]
+        },
+        "AM"
+      )
+    ), /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: () => handlePeriodToggle("PM"),
+        style: [
+          styles.periodButton,
+          {
+            backgroundColor: period === "PM" ? colors.surface : "transparent",
+            borderColor: period === "PM" ? colors.primary : colors.border
+          }
+        ]
+      },
+      /* @__PURE__ */ React.createElement(
+        Text,
+        {
+          style: [
+            styles.periodText,
+            { color: period === "PM" ? colors.primary : colors.text }
+          ]
+        },
+        "PM"
+      )
+    ))
+  )), /* @__PURE__ */ React.createElement(View, { style: styles.clockContainer }, /* @__PURE__ */ React.createElement(View, { style: [styles.clockFace, { backgroundColor: colors.clockFace }] }, renderClockNumbers(), /* @__PURE__ */ React.createElement(View, { style: [styles.clockCenter, { backgroundColor: colors.primary }] }), /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [
+        styles.clockHand,
+        {
+          height: 84,
+          top: "50%",
+          left: "50%",
+          marginLeft: -1
+        },
+        handStyle
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [
+          styles.clockHandLine,
+          { height: "100%", backgroundColor: colors.primary }
+        ]
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      View,
+      {
+        style: [styles.clockHandDot, { backgroundColor: colors.primary }]
+      }
+    )
+  ))));
+};
+
+// src/components/timepicker/timepicker-dialog.tsx
+import React2, { useState as useState3 } from "react";
+import { View as View2, Text as Text2, Pressable as Pressable2 } from "react-native";
+var TimePickerDialog = ({
+  isOpen,
+  onClose,
+  value,
+  onChange,
+  is24Hour = false,
+  themeColor = "primary",
+  confirmText = "OK",
+  cancelText = "Cancel",
+  onConfirm,
+  onCancel
+}) => {
+  const [tempValue, setTempValue] = useState3(value);
+  const colors = useTimePickerColors(themeColor);
+  const handleChange = (time) => {
+    setTempValue(time);
+    onChange?.(time);
+  };
+  const handleConfirm = () => {
+    if (tempValue) {
+      onConfirm?.(tempValue);
+    }
+    onClose();
+  };
+  const handleCancel = () => {
+    onCancel?.();
+    onClose();
+  };
+  return /* @__PURE__ */ React2.createElement(BottomSheet, { isOpen, onClose, snapPoints: [0.7] }, /* @__PURE__ */ React2.createElement(View2, null, /* @__PURE__ */ React2.createElement(
+    TimePicker,
+    {
+      value: tempValue,
+      onChange: handleChange,
+      is24Hour,
+      themeColor
+    }
+  ), /* @__PURE__ */ React2.createElement(View2, { style: styles.actions }, /* @__PURE__ */ React2.createElement(
+    Pressable2,
+    {
+      onPress: handleCancel,
+      style: [styles.actionButton, { backgroundColor: "transparent" }]
+    },
+    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, cancelText)
+  ), /* @__PURE__ */ React2.createElement(
+    Pressable2,
+    {
+      onPress: handleConfirm,
+      style: [styles.actionButton, { backgroundColor: "transparent" }]
+    },
+    /* @__PURE__ */ React2.createElement(Text2, { style: [styles.actionButtonText, { color: colors.primary }] }, confirmText)
+  ))));
+};
+
+// src/components/timepicker/timepicker-trigger.tsx
+import React3, { useMemo as useMemo3 } from "react";
+import { Pressable as Pressable3, Text as Text3, TouchableOpacity, View as View3 } from "react-native";
+import { CloseIcon, TimeIcon } from "@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 colors = useTimePickerColors(themeColor);
+  const hasValue = Boolean(value);
+  const displayValue = useMemo3(() => {
+    if (!value) return placeholder;
+    return formatTimeValue(value, is24Hour);
+  }, [value, placeholder, is24Hour]);
+  const triggerStyle = {
+    borderColor: colors.border,
+    backgroundColor: colors.background
+  };
+  const triggerTextStyle = {
+    color: hasValue ? theme.colors.foreground : colors.textSecondary
+  };
+  const isBlocked = isDisabled || isReadOnly;
+  return /* @__PURE__ */ React3.createElement(
+    Pressable3,
+    {
+      onPress: isBlocked ? void 0 : onPress,
+      disabled: isBlocked,
+      style: [styles.trigger, triggerStyle, isBlocked && styles.disabled, style],
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isBlocked }
+    },
+    /* @__PURE__ */ React3.createElement(View3, { style: styles.triggerContent }, /* @__PURE__ */ React3.createElement(
+      Text3,
+      {
+        style: [styles.triggerText, triggerTextStyle, textStyle],
+        numberOfLines: 1,
+        ellipsizeMode: "tail"
+      },
+      displayValue
+    )),
+    isClearable && hasValue && !isBlocked ? /* @__PURE__ */ React3.createElement(
+      TouchableOpacity,
+      {
+        onPress: onClear,
+        style: styles.clearButton,
+        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
+      },
+      /* @__PURE__ */ React3.createElement(CloseIcon, { color: theme.colors.foreground, size: 20 })
+    ) : icon ?? /* @__PURE__ */ React3.createElement(TimeIcon, { color: theme.colors.foreground, size: 20 })
+  );
+};
+export {
+  TimePicker,
+  TimePickerDialog,
+  TimePickerTrigger,
+  angleToHour,
+  angleToMinute,
+  calculateAngleFromPosition,
+  clampHour,
+  clampMinute,
+  formatTimeValue,
+  getCurrentTime,
+  getHourAngle,
+  getMinuteAngle,
+  isTimeInRange,
+  to12HourFormat,
+  to24HourFormat
+};