@xaui/native 0.0.17 → 0.0.19

package/dist/datepicker/index.js

@@ -1,8 +1,1627 @@
-import {
-  DatePicker
-} from "../chunk-JJOVGRNI.js";
 import "../chunk-DXXNBF5P.js";
-import "../chunk-MZL77KV5.js";
+import {
+  Portal,
+  useXUITheme
+} from "../chunk-LTKYHG5V.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 } 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: 34,
+        paddingHorizontal: theme.spacing.sm,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.xs,
+        labelSize: theme.fontSizes.xs
+      },
+      sm: {
+        minHeight: 38,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.xs,
+        fontSize: theme.fontSizes.sm,
+        labelSize: theme.fontSizes.xs
+      },
+      md: {
+        minHeight: 42,
+        paddingHorizontal: theme.spacing.md,
+        paddingVertical: theme.spacing.sm,
+        fontSize: theme.fontSizes.md,
+        labelSize: theme.fontSizes.sm
+      },
+      lg: {
+        minHeight: 50,
+        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 === "outlined" || variant === "faded") && themeColor === "default") {
+      borderColor = colors.gray[300];
+    }
+    const variantStyles = {
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: 0
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: 0
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: theme.borderWidth.md,
+        borderColor
+      },
+      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.foreground;
+  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.foreground }] }, selectDateLabel), /* @__PURE__ */ React2.createElement(View2, { style: styles2.headerDateRow }, /* @__PURE__ */ React2.createElement(Text2, { style: [styles2.headerDate, { color: colorScheme.foreground }] }, 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.foreground })
+  ) : 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.foreground;
+  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.foreground;
+  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,
+  radiusStyles,
+  variantStyles,
+  theme,
+  isClearable,
+  label,
+  labelText,
+  isLabelInside,
+  calendarIcon,
+  style,
+  textStyle,
+  onPress: handleTriggerPress,
+  onClear: handleClear,
+  onLayout: handleTriggerLayout
+}) => {
+  const renderLabel = isLabelInside && label;
+  return /* @__PURE__ */ React6.createElement(
+    Pressable6,
+    {
+      ref: triggerRef,
+      onPress: handleTriggerPress,
+      onLayout: handleTriggerLayout,
+      disabled: isDisabled,
+      style: [
+        styles.trigger,
+        {
+          minHeight: sizeStyles.minHeight,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
+          paddingVertical: sizeStyles.paddingVertical
+        },
+        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 = "flat",
+  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,
+      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
 };