@xaui/native 0.2.8 → 0.9.1-alpha.0

package/dist/timepicker/index.js

@@ -1,823 +0,0 @@
-import "../chunk-DECMUMCI.js";
-import {
-  BottomSheet
-} from "../chunk-4JFWQ5XT.js";
-import "../chunk-SHBDANQN.js";
-import {
-  useXUITheme
-} from "../chunk-RBSA4NH4.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.onMain,
-      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.onMain,
-    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
-};