@xaui/native 0.2.8 → 0.9.1-alpha.1

package/dist/datepicker/index.js

@@ -1,1625 +0,0 @@
-import "../chunk-SHBDANQN.js";
-import {
-  Portal,
-  useXUITheme
-} from "../chunk-RBSA4NH4.js";
-
-// src/components/datepicker/datepicker.tsx
-import React7, { useCallback as useCallback5, useMemo as useMemo6, useRef as useRef6 } from "react";
-import { Text as Text7, View as View7 } from "react-native";
-
-// src/components/datepicker/datepicker.hook.ts
-import { useMemo } from "react";
-import { getSafeThemeColor, withOpacity } from "@xaui/core";
-import { colors } from "@xaui/core/palette";
-var useDatePickerColorScheme = (themeColor) => {
-  const theme = useXUITheme();
-  const safeThemeColor = getSafeThemeColor(themeColor);
-  const colorScheme = theme.colors[safeThemeColor];
-  return { theme, colorScheme };
-};
-var useDatePickerSizeStyles = (size) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const sizes = {
-      xs: {
-        minHeight: theme.componentSizes.xs,
-        paddingHorizontal: theme.spacing.sm,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.xs,
-        labelSize: theme.fontSizes.xs
-      },
-      sm: {
-        minHeight: theme.componentSizes.sm,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.xs,
-        fontSize: theme.fontSizes.sm,
-        labelSize: theme.fontSizes.xs
-      },
-      md: {
-        minHeight: theme.componentSizes.md,
-        paddingHorizontal: theme.spacing.md,
-        paddingVertical: theme.spacing.sm,
-        fontSize: theme.fontSizes.md,
-        labelSize: theme.fontSizes.sm
-      },
-      lg: {
-        minHeight: theme.componentSizes.lg,
-        paddingHorizontal: theme.spacing.lg,
-        paddingVertical: theme.spacing.md,
-        fontSize: theme.fontSizes.lg,
-        labelSize: theme.fontSizes.md
-      }
-    };
-    return sizes[size];
-  }, [size, theme]);
-};
-var useDatePickerRadiusStyles = (radius) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    const radii = {
-      none: theme.borderRadius.none,
-      sm: theme.borderRadius.sm,
-      md: theme.borderRadius.md,
-      lg: theme.borderRadius.lg,
-      full: theme.borderRadius.full
-    };
-    return { borderRadius: radii[radius] };
-  }, [radius, theme]);
-};
-var useDatePickerVariantStyles = (themeColor, variant, isInvalid) => {
-  const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
-  return useMemo(() => {
-    let borderColor = isInvalid ? theme.colors.danger.main : colorScheme.main;
-    if (variant === "bordered" && themeColor === "default") {
-      borderColor = colors.gray[300];
-    }
-    const variantStyles = {
-      bordered: {
-        backgroundColor: "transparent",
-        borderWidth: theme.borderWidth.md,
-        borderColor
-      },
-      colored: {
-        backgroundColor: withOpacity(colorScheme.container, 0.5),
-        borderWidth: 0
-      },
-      light: {
-        backgroundColor: "transparent",
-        borderWidth: 0
-      },
-      underlined: {
-        backgroundColor: "transparent",
-        borderBottomWidth: theme.borderWidth.md,
-        borderColor
-      }
-    };
-    return variantStyles[variant];
-  }, [variant, theme, colorScheme, isInvalid, themeColor]);
-};
-var useDatePickerLabelStyle = (themeColor, isInvalid, labelSize) => {
-  const { theme, colorScheme } = useDatePickerColorScheme(themeColor);
-  return useMemo(() => {
-    let baseColor = theme.colors.foreground;
-    if (isInvalid) {
-      baseColor = theme.colors.danger.main;
-    } else if (themeColor !== "default") {
-      baseColor = colorScheme.main;
-    }
-    return {
-      fontSize: labelSize,
-      color: baseColor
-    };
-  }, [isInvalid, labelSize, theme, themeColor, colorScheme]);
-};
-var useDatePickerHelperColor = (isInvalid) => {
-  const theme = useXUITheme();
-  return useMemo(() => {
-    if (isInvalid) {
-      return theme.colors.danger.main;
-    }
-    return colors.gray[600];
-  }, [isInvalid, theme]);
-};
-
-// src/components/datepicker/datepicker.state.hook.ts
-import { useCallback, useState } from "react";
-var useDatePickerState = ({
-  value,
-  defaultValue,
-  onChange
-}) => {
-  const [internalValue, setInternalValue] = useState(
-    defaultValue ?? null
-  );
-  const selectedDate = value !== void 0 ? value : internalValue;
-  const updateDate = useCallback(
-    (date) => {
-      if (value === void 0) {
-        setInternalValue(date);
-      }
-      onChange?.(date);
-    },
-    [value, onChange]
-  );
-  return { selectedDate, updateDate };
-};
-var useDatePickerOpenState = ({
-  isDisabled,
-  onOpenChange,
-  onOpen,
-  onClose
-}) => {
-  const [isOpen, setInternalOpen] = useState(false);
-  const setOpen = useCallback(
-    (open) => {
-      if (isDisabled && open) return;
-      setInternalOpen(open);
-      onOpenChange?.(open);
-      if (open) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    },
-    [isDisabled, onOpenChange, onOpen, onClose]
-  );
-  return { isOpen, setOpen };
-};
-var useDatePickerViewState = (initialDate) => {
-  const now = /* @__PURE__ */ new Date();
-  const [viewDate, setViewDate] = useState(initialDate ?? now);
-  const [viewMode, setViewMode] = useState("calendar");
-  const goToPreviousMonth = useCallback(() => {
-    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
-  }, []);
-  const goToNextMonth = useCallback(() => {
-    setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
-  }, []);
-  const goToYear = useCallback((year) => {
-    setViewDate((prev) => new Date(year, prev.getMonth(), 1));
-    setViewMode("month");
-  }, []);
-  const goToMonth = useCallback((month) => {
-    setViewDate((prev) => new Date(prev.getFullYear(), month, 1));
-    setViewMode("calendar");
-  }, []);
-  const goToToday = useCallback(() => {
-    setViewDate(/* @__PURE__ */ new Date());
-    setViewMode("calendar");
-  }, []);
-  const toggleYearPicker = useCallback(() => {
-    setViewMode((prev) => prev === "year" ? "calendar" : "year");
-  }, []);
-  const syncViewToDate = useCallback((date) => {
-    setViewDate(date);
-  }, []);
-  return {
-    viewDate,
-    viewMode,
-    goToPreviousMonth,
-    goToNextMonth,
-    goToYear,
-    goToMonth,
-    goToToday,
-    toggleYearPicker,
-    syncViewToDate
-  };
-};
-
-// src/components/datepicker/datepicker.utils.ts
-var getWeekdayNames = (locale, firstDayOfWeek) => {
-  const baseDate = new Date(2024, 0, 1);
-  const dayIndex = baseDate.getDay();
-  const offset = firstDayOfWeek - dayIndex;
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(2024, 0, 1 + offset + i);
-    days.push(date.toLocaleDateString(locale, { weekday: "short" }).slice(0, 2));
-  }
-  return days;
-};
-var getMonthNames = (locale) => {
-  const months = [];
-  for (let i = 0; i < 12; i++) {
-    const date = new Date(2024, i, 1);
-    months.push(date.toLocaleDateString(locale, { month: "long" }));
-  }
-  return months;
-};
-var getMonthName = (month, locale) => {
-  const date = new Date(2024, month, 1);
-  return date.toLocaleDateString(locale, { month: "long" });
-};
-var formatDate = (date, locale) => {
-  return date.toLocaleDateString(locale, {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
-};
-var isSameDay = (a, b) => {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-};
-var isToday = (date) => {
-  return isSameDay(date, /* @__PURE__ */ new Date());
-};
-var isDateInRange = (date, minDate, maxDate) => {
-  const normalized = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  if (minDate) {
-    const minNormalized = new Date(
-      minDate.getFullYear(),
-      minDate.getMonth(),
-      minDate.getDate()
-    );
-    if (normalized < minNormalized) return false;
-  }
-  if (maxDate) {
-    const maxNormalized = new Date(
-      maxDate.getFullYear(),
-      maxDate.getMonth(),
-      maxDate.getDate()
-    );
-    if (normalized > maxNormalized) return false;
-  }
-  return true;
-};
-var getCalendarDays = (year, month, firstDayOfWeek, minDate, maxDate) => {
-  const firstOfMonth = new Date(year, month, 1);
-  const lastOfMonth = new Date(year, month + 1, 0);
-  const daysInMonth = lastOfMonth.getDate();
-  let startDayOfWeek = firstOfMonth.getDay() - firstDayOfWeek;
-  if (startDayOfWeek < 0) startDayOfWeek += 7;
-  const days = [];
-  const prevMonth = new Date(year, month, 0);
-  const prevMonthDays = prevMonth.getDate();
-  for (let i = startDayOfWeek - 1; i >= 0; i--) {
-    const day = prevMonthDays - i;
-    const date = new Date(year, month - 1, day);
-    days.push({
-      date,
-      day,
-      isCurrentMonth: false,
-      isToday: isToday(date),
-      isDisabled: !isDateInRange(date, minDate, maxDate)
-    });
-  }
-  for (let day = 1; day <= daysInMonth; day++) {
-    const date = new Date(year, month, day);
-    days.push({
-      date,
-      day,
-      isCurrentMonth: true,
-      isToday: isToday(date),
-      isDisabled: !isDateInRange(date, minDate, maxDate)
-    });
-  }
-  const remainingSlots = 42 - days.length;
-  for (let day = 1; day <= remainingSlots; day++) {
-    const date = new Date(year, month + 1, day);
-    days.push({
-      date,
-      day,
-      isCurrentMonth: false,
-      isToday: isToday(date),
-      isDisabled: !isDateInRange(date, minDate, maxDate)
-    });
-  }
-  return days;
-};
-var getYearRange = (minDate, maxDate) => {
-  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
-  const startYear = minDate ? minDate.getFullYear() : currentYear - 50;
-  const endYear = maxDate ? maxDate.getFullYear() : currentYear + 50;
-  const years = [];
-  for (let year = startYear; year <= endYear; year++) {
-    years.push(year);
-  }
-  return years;
-};
-var LOCALE_LABELS = {
-  fr: { selectDate: "Choisir une date", today: "Aujourd'hui", confirm: "OK" },
-  de: { selectDate: "Datum ausw\xE4hlen", today: "Heute", confirm: "OK" },
-  es: { selectDate: "Seleccionar fecha", today: "Hoy", confirm: "OK" },
-  it: { selectDate: "Seleziona data", today: "Oggi", confirm: "OK" },
-  pt: { selectDate: "Selecionar data", today: "Hoje", confirm: "OK" },
-  nl: { selectDate: "Datum selecteren", today: "Vandaag", confirm: "OK" },
-  pl: { selectDate: "Wybierz dat\u0119", today: "Dzisiaj", confirm: "OK" },
-  ru: { selectDate: "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0434\u0430\u0442\u0443", today: "\u0421\u0435\u0433\u043E\u0434\u043D\u044F", confirm: "OK" },
-  ja: { selectDate: "\u65E5\u4ED8\u3092\u9078\u629E", today: "\u4ECA\u65E5", confirm: "OK" },
-  ko: { selectDate: "\uB0A0\uC9DC \uC120\uD0DD", today: "\uC624\uB298", confirm: "\uD655\uC778" },
-  zh: { selectDate: "\u9009\u62E9\u65E5\u671F", today: "\u4ECA\u5929", confirm: "\u786E\u5B9A" },
-  ar: { selectDate: "\u0627\u062E\u062A\u0631 \u0627\u0644\u062A\u0627\u0631\u064A\u062E", today: "\u0627\u0644\u064A\u0648\u0645", confirm: "\u0645\u0648\u0627\u0641\u0642" },
-  tr: { selectDate: "Tarih se\xE7in", today: "Bug\xFCn", confirm: "Tamam" }
-};
-var DEFAULT_LABELS = {
-  selectDate: "Select date",
-  today: "Today",
-  confirm: "OK"
-};
-var getDatePickerLabels = (locale) => {
-  const baseLocale = locale.split("-")[0].toLowerCase();
-  return LOCALE_LABELS[baseLocale] ?? DEFAULT_LABELS;
-};
-var getFirstDayOfWeek = (locale) => {
-  const mondayLocales = [
-    "fr",
-    "de",
-    "es",
-    "it",
-    "pt",
-    "nl",
-    "pl",
-    "ru",
-    "sv",
-    "da",
-    "fi",
-    "nb",
-    "nn",
-    "cs",
-    "sk",
-    "hu",
-    "ro",
-    "bg",
-    "hr",
-    "sl",
-    "uk",
-    "tr",
-    "el",
-    "et",
-    "lt",
-    "lv"
-  ];
-  const baseLocale = locale.split("-")[0].toLowerCase();
-  return mondayLocales.includes(baseLocale) ? 1 : 0;
-};
-
-// src/components/datepicker/datepicker.style.ts
-import { StyleSheet } from "react-native";
-var styles = StyleSheet.create({
-  container: {
-    gap: 6,
-    position: "relative"
-  },
-  fullWidth: {
-    flexShrink: 1,
-    flexBasis: "auto",
-    width: "100%"
-  },
-  minWidth: {
-    minWidth: 170
-  },
-  label: {
-    fontWeight: "500"
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8
-  },
-  triggerContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    gap: 8
-  },
-  triggerText: {
-    flex: 1
-  },
-  clearButton: {
-    padding: 2,
-    paddingLeft: 4,
-    marginRight: -4
-  },
-  helperText: {
-    fontSize: 12
-  },
-  disabled: {
-    opacity: 0.5
-  },
-  outsideLeftRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  }
-});
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog.tsx
-import React5, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef5 } from "react";
-import {
-  Animated as Animated5,
-  BackHandler,
-  Pressable as Pressable5,
-  Text as Text5,
-  View as View5,
-  useWindowDimensions
-} from "react-native";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog.animation.ts
-import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
-import { Animated, Easing } from "react-native";
-var useDatePickerDialogAnimation = ({
-  visible,
-  fadeAnim,
-  slideAnim,
-  scaleAnim,
-  onCloseComplete
-}) => {
-  const [shouldRender, setShouldRender] = useState2(false);
-  const isClosingRef = useRef(false);
-  useEffect(() => {
-    if (visible) {
-      setShouldRender(true);
-      isClosingRef.current = false;
-      Animated.parallel([
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 220,
-          useNativeDriver: true
-        }),
-        Animated.spring(slideAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          damping: 20,
-          stiffness: 300,
-          mass: 0.8
-        }),
-        Animated.spring(scaleAnim, {
-          toValue: 1,
-          useNativeDriver: true,
-          damping: 18,
-          stiffness: 280,
-          mass: 0.8
-        })
-      ]).start();
-      return;
-    }
-    if (!shouldRender || isClosingRef.current) return;
-    isClosingRef.current = true;
-    Animated.parallel([
-      Animated.timing(fadeAnim, {
-        toValue: 0,
-        duration: 180,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: true
-      }),
-      Animated.timing(slideAnim, {
-        toValue: 0,
-        duration: 180,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: true
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 0,
-        duration: 180,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: true
-      })
-    ]).start(() => {
-      setShouldRender(false);
-      isClosingRef.current = false;
-      onCloseComplete();
-    });
-  }, [visible, fadeAnim, slideAnim, scaleAnim, shouldRender, onCloseComplete]);
-  return { shouldRender };
-};
-var useViewTransitionAnimation = ({
-  fadeAnim
-}) => {
-  const animate = useCallback2(() => {
-    fadeAnim.setValue(0);
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true
-    }).start();
-  }, [fadeAnim]);
-  return { animate };
-};
-var useMonthSlideAnimation = ({
-  slideAnim,
-  fadeAnim
-}) => {
-  const animate = useCallback2(
-    (direction) => {
-      const startX = direction === "right" ? 60 : -60;
-      slideAnim.setValue(startX);
-      fadeAnim.setValue(0);
-      Animated.parallel([
-        Animated.spring(slideAnim, {
-          toValue: 0,
-          useNativeDriver: true,
-          damping: 22,
-          stiffness: 280,
-          mass: 0.7
-        }),
-        Animated.timing(fadeAnim, {
-          toValue: 1,
-          duration: 180,
-          useNativeDriver: true
-        })
-      ]).start();
-    },
-    [slideAnim, fadeAnim]
-  );
-  return { animate };
-};
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog-calendar.tsx
-import React, { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
-import { Animated as Animated2, Pressable, Text, View } from "react-native";
-import {
-  PanGestureHandler,
-  State
-} from "react-native-gesture-handler";
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog.style.ts
-import { StyleSheet as StyleSheet2 } from "react-native";
-var styles2 = StyleSheet2.create({
-  backdrop: {
-    ...StyleSheet2.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.5)"
-  },
-  dialogContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    zIndex: 1,
-    paddingHorizontal: 24
-  },
-  container: {
-    width: "100%",
-    maxWidth: 360,
-    borderRadius: 16,
-    overflow: "hidden",
-    elevation: 6,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 8
-  },
-  header: {
-    paddingHorizontal: 24,
-    paddingTop: 16,
-    paddingBottom: 12
-  },
-  headerLabel: {
-    fontSize: 12,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    marginBottom: 8
-  },
-  headerDateRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  headerDate: {
-    fontSize: 24,
-    fontWeight: "400"
-  },
-  navigationRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 8
-  },
-  monthYearButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 20
-  },
-  monthYearText: {
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  navButtons: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  navButton: {
-    padding: 8,
-    borderRadius: 20
-  },
-  calendarGrid: {
-    paddingHorizontal: 12
-  },
-  weekdayRow: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    marginBottom: 4
-  },
-  weekdayCell: {
-    width: 44,
-    height: 32,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  weekdayText: {
-    fontSize: 12,
-    fontWeight: "500"
-  },
-  dayRow: {
-    flexDirection: "row",
-    justifyContent: "space-around"
-  },
-  dayCell: {
-    width: 44,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22
-  },
-  dayText: {
-    fontSize: 14
-  },
-  todayCell: {
-    borderWidth: 1
-  },
-  selectedCell: {
-    borderWidth: 0
-  },
-  selectedCellInner: {
-    width: 44,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22
-  },
-  disabledText: {
-    opacity: 0.3
-  },
-  otherMonthText: {
-    opacity: 0.4
-  },
-  footer: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12
-  },
-  footerButton: {
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    borderRadius: 20
-  },
-  footerButtonText: {
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  yearPickerContainer: {
-    paddingHorizontal: 12,
-    height: 280
-  },
-  yearGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "center",
-    gap: 4
-  },
-  yearCell: {
-    width: 76,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22,
-    margin: 2
-  },
-  yearCellInner: {
-    width: 76,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22
-  },
-  yearText: {
-    fontSize: 14
-  },
-  monthPickerContainer: {
-    paddingHorizontal: 24,
-    paddingVertical: 8
-  },
-  monthGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "center",
-    gap: 8
-  },
-  monthCell: {
-    width: 90,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22
-  },
-  monthCellInner: {
-    width: 90,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: 22
-  },
-  monthText: {
-    fontSize: 14
-  }
-});
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog-calendar.tsx
-var AnimatedDayCell = ({
-  isSelected,
-  isToday: isToday2,
-  isCurrentMonth,
-  isDisabled,
-  day,
-  date,
-  locale,
-  themeColor,
-  onSelectDay
-}) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const isDefault = themeColor === "default";
-  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
-  const scaleAnim = useRef2(new Animated2.Value(isSelected ? 1 : 0)).current;
-  useEffect2(() => {
-    if (isSelected) {
-      scaleAnim.setValue(0.92);
-      Animated2.spring(scaleAnim, {
-        toValue: 1,
-        useNativeDriver: true,
-        damping: 20,
-        stiffness: 300,
-        mass: 0.6
-      }).start();
-    } else {
-      scaleAnim.setValue(0);
-    }
-  }, [isSelected, scaleAnim]);
-  const animatedStyle = isSelected ? { transform: [{ scale: scaleAnim }] } : void 0;
-  return /* @__PURE__ */ React.createElement(
-    Pressable,
-    {
-      style: [
-        styles2.dayCell,
-        isToday2 && !isSelected && {
-          ...styles2.todayCell,
-          borderColor: accentColor
-        }
-      ],
-      onPress: () => {
-        if (!isDisabled) {
-          onSelectDay(date);
-        }
-      },
-      disabled: isDisabled,
-      accessibilityLabel: date.toLocaleDateString(locale),
-      accessibilityRole: "button",
-      accessibilityState: {
-        selected: isSelected,
-        disabled: isDisabled
-      }
-    },
-    isSelected ? /* @__PURE__ */ React.createElement(
-      Animated2.View,
-      {
-        style: [
-          styles2.selectedCellInner,
-          { backgroundColor: accentColor },
-          animatedStyle
-        ]
-      },
-      /* @__PURE__ */ React.createElement(Text, { style: [styles2.dayText, { color: accentFg }] }, day)
-    ) : /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          styles2.dayText,
-          { color: theme.colors.foreground },
-          !isCurrentMonth && styles2.otherMonthText,
-          isDisabled && styles2.disabledText,
-          isToday2 && {
-            color: accentColor,
-            fontWeight: "600"
-          }
-        ]
-      },
-      day
-    )
-  );
-};
-var DatePickerDialogCalendar = ({
-  viewDate,
-  selectedDate,
-  locale,
-  firstDayOfWeek,
-  themeColor,
-  minDate,
-  maxDate,
-  onSelectDay,
-  onPreviousMonth,
-  onNextMonth
-}) => {
-  const theme = useXUITheme();
-  const swipeHandledRef = useRef2(false);
-  const weekdays = useMemo2(
-    () => getWeekdayNames(locale, firstDayOfWeek),
-    [locale, firstDayOfWeek]
-  );
-  const days = useMemo2(
-    () => getCalendarDays(
-      viewDate.getFullYear(),
-      viewDate.getMonth(),
-      firstDayOfWeek,
-      minDate,
-      maxDate
-    ),
-    [viewDate, firstDayOfWeek, minDate, maxDate]
-  );
-  const weeks = useMemo2(() => {
-    const result = [];
-    for (let i = 0; i < days.length; i += 7) {
-      result.push(days.slice(i, i + 7));
-    }
-    return result;
-  }, [days]);
-  const onSwipeEnd = (event) => {
-    const { state, translationX, velocityX } = event.nativeEvent;
-    if (state !== State.END || swipeHandledRef.current) return;
-    const shouldSwipe = Math.abs(translationX) > 40 || Math.abs(velocityX) > 600;
-    if (!shouldSwipe) return;
-    swipeHandledRef.current = true;
-    if (translationX < 0) {
-      onNextMonth();
-    } else {
-      onPreviousMonth();
-    }
-  };
-  const onSwipeStateChange = (event) => {
-    if (event.nativeEvent.state === State.BEGAN) {
-      swipeHandledRef.current = false;
-    }
-    onSwipeEnd(event);
-  };
-  return /* @__PURE__ */ React.createElement(
-    PanGestureHandler,
-    {
-      activeOffsetX: [-12, 12],
-      failOffsetY: [-12, 12],
-      onHandlerStateChange: onSwipeStateChange
-    },
-    /* @__PURE__ */ React.createElement(View, { style: styles2.calendarGrid }, /* @__PURE__ */ React.createElement(View, { style: styles2.weekdayRow }, weekdays.map((day, index) => /* @__PURE__ */ React.createElement(View, { key: index, style: styles2.weekdayCell }, /* @__PURE__ */ React.createElement(
-      Text,
-      {
-        style: [
-          styles2.weekdayText,
-          { color: theme.colors.foreground, opacity: 0.6 }
-        ]
-      },
-      day
-    )))), weeks.map((week, weekIndex) => /* @__PURE__ */ React.createElement(View, { key: weekIndex, style: styles2.dayRow }, week.map((dayInfo, dayIndex) => /* @__PURE__ */ React.createElement(
-      AnimatedDayCell,
-      {
-        key: dayIndex,
-        isSelected: !!(selectedDate && isSameDay(dayInfo.date, selectedDate)),
-        isToday: dayInfo.isToday,
-        isCurrentMonth: dayInfo.isCurrentMonth,
-        isDisabled: dayInfo.isDisabled,
-        day: dayInfo.day,
-        date: dayInfo.date,
-        locale,
-        themeColor,
-        onSelectDay
-      }
-    )))))
-  );
-};
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog-header.tsx
-import React2, { useMemo as useMemo3 } from "react";
-import { Pressable as Pressable2, Text as Text2, View as View2 } from "react-native";
-import { ChevronDownIcon } from "@xaui/icons/chevron-down";
-import { ChevronLeftIcon } from "@xaui/icons/chevron-left";
-import { ChevronRightIcon } from "@xaui/icons/chevron-right";
-import { CloseIcon } from "@xaui/icons/close";
-var DatePickerDialogHeader = ({
-  viewDate,
-  selectedDate,
-  locale,
-  themeColor,
-  selectDateLabel,
-  onClearValue,
-  onPreviousMonth,
-  onNextMonth,
-  onToggleYearPicker
-}) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const dateText = useMemo3(() => {
-    if (!selectedDate) return "---";
-    return formatDate(selectedDate, locale);
-  }, [selectedDate, locale]);
-  const monthYearLabel = useMemo3(() => {
-    const month = getMonthName(viewDate.getMonth(), locale);
-    return `${month} ${viewDate.getFullYear()}`;
-  }, [viewDate, locale]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(View2, { style: [styles2.header, { backgroundColor: colorScheme.main }] }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerLabel, { color: colorScheme.onMain }] }, selectDateLabel), /* @__PURE__ */ React2.createElement(View2, { style: styles2.headerDateRow }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerDate, { color: colorScheme.onMain }] }, dateText), selectedDate ? /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      onPress: onClearValue,
-      hitSlop: { top: 8, right: 8, bottom: 8, left: 8 },
-      accessibilityLabel: "Clear date",
-      accessibilityRole: "button"
-    },
-    /* @__PURE__ */ React2.createElement(CloseIcon, { size: 20, color: colorScheme.onMain })
-  ) : null)), /* @__PURE__ */ React2.createElement(View2, { style: styles2.navigationRow }, /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      style: styles2.monthYearButton,
-      onPress: onToggleYearPicker,
-      accessibilityLabel: `${monthYearLabel}, tap to change`,
-      accessibilityRole: "button"
-    },
-    /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.monthYearText, { color: theme.colors.foreground }] }, monthYearLabel),
-    /* @__PURE__ */ React2.createElement(ChevronDownIcon, { size: 18, color: theme.colors.foreground })
-  ), /* @__PURE__ */ React2.createElement(View2, { style: styles2.navButtons }, /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      style: styles2.navButton,
-      onPress: onPreviousMonth,
-      accessibilityLabel: "Previous month",
-      accessibilityRole: "button"
-    },
-    /* @__PURE__ */ React2.createElement(ChevronLeftIcon, { size: 20, color: theme.colors.foreground })
-  ), /* @__PURE__ */ React2.createElement(
-    Pressable2,
-    {
-      style: styles2.navButton,
-      onPress: onNextMonth,
-      accessibilityLabel: "Next month",
-      accessibilityRole: "button"
-    },
-    /* @__PURE__ */ React2.createElement(ChevronRightIcon, { size: 20, color: theme.colors.foreground })
-  ))));
-};
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog-month-picker.tsx
-import React3, { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3 } from "react";
-import { Animated as Animated3, Easing as Easing2, Pressable as Pressable3, Text as Text3, View as View3 } from "react-native";
-var DatePickerDialogMonthPicker = ({ viewDate, locale, themeColor, onSelectMonth }) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const isDefault = themeColor === "default";
-  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
-  const months = useMemo4(() => getMonthNames(locale), [locale]);
-  const currentMonth = viewDate.getMonth();
-  const groupAnim = useRef3(new Animated3.Value(0)).current;
-  useEffect3(() => {
-    groupAnim.setValue(0);
-    Animated3.timing(groupAnim, {
-      toValue: 1,
-      duration: 220,
-      easing: Easing2.out(Easing2.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [groupAnim]);
-  return /* @__PURE__ */ React3.createElement(View3, { style: styles2.monthPickerContainer }, /* @__PURE__ */ React3.createElement(
-    Animated3.View,
-    {
-      style: {
-        opacity: groupAnim,
-        transform: [
-          {
-            translateY: groupAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: [12, 0]
-            })
-          }
-        ]
-      }
-    },
-    /* @__PURE__ */ React3.createElement(View3, { style: styles2.monthGrid }, months.map((name, index) => {
-      const isCurrentMonth = index === currentMonth;
-      return /* @__PURE__ */ React3.createElement(
-        Pressable3,
-        {
-          key: index,
-          style: [
-            styles2.monthCell,
-            isCurrentMonth && { backgroundColor: accentColor }
-          ],
-          onPress: () => onSelectMonth(index),
-          accessibilityLabel: name,
-          accessibilityRole: "button",
-          accessibilityState: { selected: isCurrentMonth }
-        },
-        /* @__PURE__ */ React3.createElement(
-          Text3,
-          {
-            style: [
-              styles2.monthText,
-              { color: theme.colors.foreground },
-              isCurrentMonth && {
-                color: accentFg,
-                fontWeight: "600"
-              }
-            ]
-          },
-          name
-        )
-      );
-    }))
-  ));
-};
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog-year-picker.tsx
-import React4, { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo5, useRef as useRef4 } from "react";
-import { Animated as Animated4, Easing as Easing3, FlatList, Pressable as Pressable4, Text as Text4, View as View4 } from "react-native";
-var ITEM_HEIGHT = 48;
-var NUM_COLUMNS = 4;
-var DatePickerDialogYearPicker = ({ viewDate, themeColor, minDate, maxDate, onSelectYear }) => {
-  const listRef = useRef4(null);
-  const groupAnim = useRef4(new Animated4.Value(0)).current;
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const isDefault = themeColor === "default";
-  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const accentFg = isDefault ? theme.colors.background : colorScheme.onMain;
-  const years = useMemo5(() => getYearRange(minDate, maxDate), [minDate, maxDate]);
-  const currentYear = viewDate.getFullYear();
-  const initialIndex = useMemo5(() => {
-    const index = years.indexOf(currentYear);
-    const rowIndex = Math.floor(index / NUM_COLUMNS);
-    return Math.max(0, rowIndex);
-  }, [years, currentYear]);
-  useEffect4(() => {
-    groupAnim.setValue(0);
-    Animated4.timing(groupAnim, {
-      toValue: 1,
-      duration: 220,
-      easing: Easing3.out(Easing3.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [groupAnim]);
-  const getItemLayout = useCallback3(
-    (_, index) => ({
-      length: ITEM_HEIGHT,
-      offset: ITEM_HEIGHT * index,
-      index
-    }),
-    []
-  );
-  const renderYear = useCallback3(
-    ({ item }) => {
-      const isCurrentYear = item === currentYear;
-      return /* @__PURE__ */ React4.createElement(
-        Pressable4,
-        {
-          style: [
-            styles2.yearCell,
-            isCurrentYear && { backgroundColor: accentColor }
-          ],
-          onPress: () => onSelectYear(item),
-          accessibilityLabel: `${item}`,
-          accessibilityRole: "button",
-          accessibilityState: { selected: isCurrentYear }
-        },
-        /* @__PURE__ */ React4.createElement(
-          Text4,
-          {
-            style: [
-              styles2.yearText,
-              { color: theme.colors.foreground },
-              isCurrentYear && {
-                color: accentFg,
-                fontWeight: "600"
-              }
-            ]
-          },
-          item
-        )
-      );
-    },
-    [currentYear, onSelectYear, accentColor, accentFg, theme.colors.foreground]
-  );
-  return /* @__PURE__ */ React4.createElement(View4, { style: styles2.yearPickerContainer }, /* @__PURE__ */ React4.createElement(
-    Animated4.View,
-    {
-      style: {
-        opacity: groupAnim,
-        transform: [
-          {
-            translateY: groupAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: [12, 0]
-            })
-          }
-        ]
-      }
-    },
-    /* @__PURE__ */ React4.createElement(
-      FlatList,
-      {
-        ref: listRef,
-        data: years,
-        renderItem: renderYear,
-        keyExtractor: (item) => String(item),
-        numColumns: NUM_COLUMNS,
-        getItemLayout,
-        initialScrollIndex: initialIndex,
-        showsVerticalScrollIndicator: false,
-        columnWrapperStyle: { justifyContent: "center" }
-      }
-    )
-  ));
-};
-
-// src/components/dialogs/datepicker-dialog/datepicker-dialog.tsx
-var DatePickerDialog = ({
-  visible,
-  selectedDate,
-  locale,
-  firstDayOfWeek,
-  themeColor = "primary",
-  minDate,
-  maxDate,
-  style,
-  todayLabel,
-  confirmLabel,
-  onDateSelect,
-  onClearValue,
-  onClose
-}) => {
-  const theme = useXUITheme();
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const fadeAnim = useRef5(new Animated5.Value(0)).current;
-  const slideAnim = useRef5(new Animated5.Value(0)).current;
-  const scaleAnim = useRef5(new Animated5.Value(0)).current;
-  const viewFadeAnim = useRef5(new Animated5.Value(1)).current;
-  const monthSlideXAnim = useRef5(new Animated5.Value(0)).current;
-  const monthFadeAnim = useRef5(new Animated5.Value(1)).current;
-  const colorScheme = theme.colors[themeColor] ?? theme.colors.primary;
-  const isDefault = themeColor === "default";
-  const accentColor = isDefault ? theme.colors.foreground : colorScheme.main;
-  const labels = getDatePickerLabels(locale);
-  const resolvedTodayLabel = todayLabel ?? labels.today;
-  const resolvedConfirmLabel = confirmLabel ?? labels.confirm;
-  const {
-    viewDate,
-    viewMode,
-    goToPreviousMonth,
-    goToNextMonth,
-    goToYear,
-    goToMonth,
-    goToToday,
-    toggleYearPicker,
-    syncViewToDate
-  } = useDatePickerViewState(selectedDate);
-  const onCloseComplete = useCallback4(() => {
-    fadeAnim.setValue(0);
-    slideAnim.setValue(0);
-    scaleAnim.setValue(0);
-    viewFadeAnim.setValue(1);
-    monthSlideXAnim.setValue(0);
-    monthFadeAnim.setValue(1);
-  }, [fadeAnim, slideAnim, scaleAnim, viewFadeAnim, monthSlideXAnim, monthFadeAnim]);
-  const { shouldRender } = useDatePickerDialogAnimation({
-    visible,
-    fadeAnim,
-    slideAnim,
-    scaleAnim,
-    onCloseComplete
-  });
-  const { animate: animateViewTransition } = useViewTransitionAnimation({
-    fadeAnim: viewFadeAnim
-  });
-  const { animate: animateMonthSlide } = useMonthSlideAnimation({
-    slideAnim: monthSlideXAnim,
-    fadeAnim: monthFadeAnim
-  });
-  const prevViewModeRef = useRef5(viewMode);
-  useEffect5(() => {
-    if (prevViewModeRef.current !== viewMode) {
-      prevViewModeRef.current = viewMode;
-      animateViewTransition();
-    }
-  }, [viewMode, animateViewTransition]);
-  useEffect5(() => {
-    if (visible && selectedDate) {
-      syncViewToDate(selectedDate);
-    }
-  }, [visible, selectedDate, syncViewToDate]);
-  useEffect5(() => {
-    if (!visible) return;
-    const sub = BackHandler.addEventListener("hardwareBackPress", () => {
-      onClose();
-      return true;
-    });
-    return () => sub.remove();
-  }, [visible, onClose]);
-  const handlePreviousMonth = useCallback4(() => {
-    goToPreviousMonth();
-    animateMonthSlide("left");
-  }, [goToPreviousMonth, animateMonthSlide]);
-  const handleNextMonth = useCallback4(() => {
-    goToNextMonth();
-    animateMonthSlide("right");
-  }, [goToNextMonth, animateMonthSlide]);
-  const handleDaySelect = useCallback4(
-    (date) => {
-      onDateSelect(date);
-    },
-    [onDateSelect]
-  );
-  const handleTodayPress = useCallback4(() => {
-    const today = /* @__PURE__ */ new Date();
-    if (!isDateInRange(today, minDate, maxDate)) return;
-    goToToday();
-    onDateSelect(today);
-  }, [goToToday, onDateSelect, minDate, maxDate]);
-  if (!shouldRender) return null;
-  const overlayStyle = {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: screenWidth,
-    height: screenHeight
-  };
-  const containerAnimatedStyle = {
-    opacity: fadeAnim,
-    transform: [
-      {
-        scale: scaleAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [0.92, 1]
-        })
-      },
-      {
-        translateY: slideAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [40, 0]
-        })
-      }
-    ]
-  };
-  const viewTransitionStyle = {
-    opacity: viewFadeAnim,
-    transform: [
-      {
-        translateY: viewFadeAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [8, 0]
-        })
-      }
-    ]
-  };
-  const monthSlideStyle = {
-    opacity: monthFadeAnim,
-    transform: [{ translateX: monthSlideXAnim }]
-  };
-  const renderContent = () => {
-    switch (viewMode) {
-      case "year":
-        return /* @__PURE__ */ React5.createElement(
-          DatePickerDialogYearPicker,
-          {
-            viewDate,
-            themeColor,
-            minDate,
-            maxDate,
-            onSelectYear: goToYear
-          }
-        );
-      case "month":
-        return /* @__PURE__ */ React5.createElement(
-          DatePickerDialogMonthPicker,
-          {
-            viewDate,
-            locale,
-            themeColor,
-            onSelectMonth: goToMonth
-          }
-        );
-      case "calendar":
-      default:
-        return /* @__PURE__ */ React5.createElement(Animated5.View, { style: [viewTransitionStyle, monthSlideStyle] }, /* @__PURE__ */ React5.createElement(
-          DatePickerDialogCalendar,
-          {
-            viewDate,
-            selectedDate,
-            locale,
-            firstDayOfWeek,
-            themeColor,
-            minDate,
-            maxDate,
-            onSelectDay: handleDaySelect,
-            onPreviousMonth: handlePreviousMonth,
-            onNextMonth: handleNextMonth
-          }
-        ));
-    }
-  };
-  return /* @__PURE__ */ React5.createElement(Portal, null, /* @__PURE__ */ React5.createElement(GestureHandlerRootView, { style: [overlayStyle, style] }, /* @__PURE__ */ React5.createElement(View5, { style: overlayStyle }, /* @__PURE__ */ React5.createElement(Animated5.View, { style: [styles2.backdrop, { opacity: fadeAnim }] }, /* @__PURE__ */ React5.createElement(
-    Pressable5,
-    {
-      style: { flex: 1 },
-      onPress: onClose,
-      accessibilityLabel: "Close calendar",
-      accessibilityRole: "button"
-    }
-  )), /* @__PURE__ */ React5.createElement(Animated5.View, { style: [styles2.dialogContainer, containerAnimatedStyle] }, /* @__PURE__ */ React5.createElement(
-    View5,
-    {
-      style: [
-        styles2.container,
-        { backgroundColor: theme.colors.background }
-      ]
-    },
-    /* @__PURE__ */ React5.createElement(
-      DatePickerDialogHeader,
-      {
-        viewDate,
-        selectedDate,
-        locale,
-        themeColor,
-        selectDateLabel: labels.selectDate,
-        onClearValue,
-        onPreviousMonth: handlePreviousMonth,
-        onNextMonth: handleNextMonth,
-        onToggleYearPicker: toggleYearPicker
-      }
-    ),
-    renderContent(),
-    /* @__PURE__ */ React5.createElement(View5, { style: styles2.footer }, /* @__PURE__ */ React5.createElement(
-      Pressable5,
-      {
-        style: styles2.footerButton,
-        onPress: handleTodayPress,
-        accessibilityLabel: resolvedTodayLabel,
-        accessibilityRole: "button"
-      },
-      /* @__PURE__ */ React5.createElement(Text5, { style: [styles2.footerButtonText, { color: accentColor }] }, resolvedTodayLabel)
-    ), /* @__PURE__ */ React5.createElement(
-      Pressable5,
-      {
-        style: styles2.footerButton,
-        onPress: onClose,
-        accessibilityLabel: resolvedConfirmLabel,
-        accessibilityRole: "button"
-      },
-      /* @__PURE__ */ React5.createElement(Text5, { style: [styles2.footerButtonText, { color: accentColor }] }, resolvedConfirmLabel)
-    ))
-  )))));
-};
-
-// src/components/datepicker/datepicker-trigger.tsx
-import React6 from "react";
-import { Pressable as Pressable6, Text as Text6, TouchableOpacity, View as View6 } from "react-native";
-import { CalendarIcon } from "@xaui/icons/calendar";
-import { CloseIcon as CloseIcon2 } from "@xaui/icons/close";
-var DatePickerTrigger = ({
-  triggerRef,
-  isDisabled,
-  hasValue,
-  displayValue,
-  sizeStyles,
-  variant,
-  radiusStyles,
-  variantStyles,
-  theme,
-  isClearable,
-  label,
-  labelText,
-  isLabelInside,
-  calendarIcon,
-  style,
-  textStyle,
-  onPress: handleTriggerPress,
-  onClear: handleClear,
-  onLayout: handleTriggerLayout
-}) => {
-  const renderLabel = isLabelInside && label;
-  const horizontalPadding = variant === "light" || variant === "underlined" ? 0 : sizeStyles.paddingHorizontal;
-  return /* @__PURE__ */ React6.createElement(
-    Pressable6,
-    {
-      ref: triggerRef,
-      onPress: handleTriggerPress,
-      onLayout: handleTriggerLayout,
-      disabled: isDisabled,
-      style: [
-        styles.trigger,
-        {
-          minHeight: sizeStyles.minHeight,
-          paddingHorizontal: horizontalPadding,
-          paddingVertical: sizeStyles.paddingVertical
-        },
-        variant === "underlined" ? { borderRadius: 0 } : radiusStyles,
-        variantStyles,
-        isDisabled && styles.disabled,
-        style
-      ],
-      accessibilityLabel: labelText ?? (typeof label === "string" ? label : void 0),
-      accessibilityRole: "button",
-      accessibilityState: { disabled: isDisabled }
-    },
-    /* @__PURE__ */ React6.createElement(View6, { style: styles.triggerContent }, isLabelInside && renderLabel, /* @__PURE__ */ React6.createElement(
-      Text6,
-      {
-        style: [
-          styles.triggerText,
-          { fontSize: sizeStyles.fontSize, color: theme.colors.foreground },
-          !hasValue && { opacity: 0.5 },
-          textStyle
-        ],
-        numberOfLines: 1,
-        ellipsizeMode: "tail"
-      },
-      displayValue
-    )),
-    isClearable && hasValue ? /* @__PURE__ */ React6.createElement(
-      TouchableOpacity,
-      {
-        onPress: handleClear,
-        style: styles.clearButton,
-        hitSlop: { top: 8, right: 8, bottom: 8, left: 8 }
-      },
-      /* @__PURE__ */ React6.createElement(CloseIcon2, { color: theme.colors.foreground, size: 20 })
-    ) : calendarIcon ?? /* @__PURE__ */ React6.createElement(CalendarIcon, { color: theme.colors.foreground, size: 20 })
-  );
-};
-
-// src/components/datepicker/datepicker.tsx
-var DatePicker = ({
-  value,
-  defaultValue,
-  onChange,
-  locale = "en",
-  minDate,
-  maxDate,
-  firstDayOfWeek: firstDayOfWeekProp,
-  variant = "colored",
-  themeColor = "default",
-  size = "md",
-  radius = "md",
-  label,
-  placeholder = "Select a date",
-  description,
-  errorMessage,
-  labelPlacement = "outside",
-  fullWidth = false,
-  isDisabled = false,
-  isInvalid = false,
-  isReadOnly = false,
-  isClearable = true,
-  customAppearance,
-  calendarIcon,
-  onOpen,
-  onClose,
-  onOpenChange
-}) => {
-  const theme = useXUITheme();
-  const { selectedDate, updateDate } = useDatePickerState({
-    value,
-    defaultValue,
-    onChange
-  });
-  const { isOpen, setOpen } = useDatePickerOpenState({
-    isDisabled: isDisabled || isReadOnly,
-    onOpenChange,
-    onOpen,
-    onClose
-  });
-  const triggerRef = useRef6(null);
-  const handleTriggerLayout = useCallback5(() => {
-  }, []);
-  const firstDayOfWeek = useMemo6(
-    () => firstDayOfWeekProp ?? getFirstDayOfWeek(locale),
-    [firstDayOfWeekProp, locale]
-  );
-  const sizeStyles = useDatePickerSizeStyles(size);
-  const radiusStyles = useDatePickerRadiusStyles(radius);
-  const variantStyles = useDatePickerVariantStyles(themeColor, variant, isInvalid);
-  const labelStyle = useDatePickerLabelStyle(
-    themeColor,
-    isInvalid,
-    sizeStyles.labelSize
-  );
-  const helperColor = useDatePickerHelperColor(isInvalid);
-  const displayValue = useMemo6(() => {
-    if (!selectedDate) return placeholder;
-    return formatDate(selectedDate, locale);
-  }, [selectedDate, locale, placeholder]);
-  const handleTriggerPress = useCallback5(() => {
-    if (!isDisabled && !isReadOnly) {
-      setOpen(true);
-    }
-  }, [isDisabled, isReadOnly, setOpen]);
-  const handleClear = useCallback5(() => {
-    if (isDisabled || isReadOnly) return;
-    updateDate(null);
-  }, [isDisabled, isReadOnly, updateDate]);
-  const handleDateSelect = useCallback5(
-    (date) => {
-      updateDate(date);
-    },
-    [updateDate]
-  );
-  const handleClose = useCallback5(() => {
-    setOpen(false);
-  }, [setOpen]);
-  const isLabelInside = labelPlacement === "inside";
-  const isLabelOutsideLeft = labelPlacement === "outside-left";
-  const isLabelOutside = labelPlacement === "outside" || labelPlacement === "outside-top";
-  const renderLabel = label ? typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ React7.createElement(Text7, { style: [styles.label, labelStyle] }, label) : /* @__PURE__ */ React7.createElement(View7, null, label) : null;
-  const shouldShowHelper = Boolean(description || errorMessage);
-  const helperContent = isInvalid && errorMessage ? errorMessage : description;
-  const triggerContent = /* @__PURE__ */ React7.createElement(
-    DatePickerTrigger,
-    {
-      triggerRef,
-      isDisabled: isDisabled || isReadOnly,
-      hasValue: !!selectedDate,
-      displayValue,
-      sizeStyles,
-      variant,
-      radiusStyles,
-      variantStyles,
-      theme,
-      isClearable,
-      label: renderLabel,
-      labelText: typeof label === "string" ? label : void 0,
-      isLabelInside,
-      calendarIcon,
-      style: customAppearance?.trigger,
-      textStyle: customAppearance?.text,
-      onPress: handleTriggerPress,
-      onClear: handleClear,
-      onLayout: handleTriggerLayout
-    }
-  );
-  const labelBlock = isLabelOutside || isLabelInside ? renderLabel : null;
-  return /* @__PURE__ */ React7.createElement(
-    View7,
-    {
-      style: [
-        styles.container,
-        fullWidth ? styles.fullWidth : styles.minWidth,
-        customAppearance?.container
-      ]
-    },
-    isLabelOutside && labelBlock,
-    isLabelOutsideLeft ? /* @__PURE__ */ React7.createElement(View7, { style: styles.outsideLeftRow }, renderLabel, triggerContent) : triggerContent,
-    shouldShowHelper && helperContent ? typeof helperContent === "string" || typeof helperContent === "number" ? /* @__PURE__ */ React7.createElement(Text7, { style: [styles.helperText, { color: helperColor }] }, helperContent) : /* @__PURE__ */ React7.createElement(View7, null, helperContent) : null,
-    /* @__PURE__ */ React7.createElement(
-      DatePickerDialog,
-      {
-        visible: isOpen,
-        selectedDate,
-        locale,
-        firstDayOfWeek,
-        themeColor,
-        minDate,
-        maxDate,
-        style: customAppearance?.calendar,
-        onDateSelect: handleDateSelect,
-        onClearValue: handleClear,
-        onClose: handleClose
-      }
-    )
-  );
-};
-export {
-  DatePicker
-};