@trilogy-ds/react 0.0.20-esm-cjs → 0.0.23-esm-cjs

package/lib/chunk-7HQWD2HW.mjs

@@ -0,0 +1,635 @@
+"use client";
+import {
+  Text_native_default
+} from "./chunk-RA7237YI.mjs";
+import {
+  Icon_native_default
+} from "./chunk-5NCBENYK.mjs";
+import {
+  getColorStyle
+} from "./chunk-E4YRRUI3.mjs";
+
+// components/calendar/Calendar.native.tsx
+import translation from "@trilogy-ds/locales/lib/calendar";
+import React from "react";
+import { Modal, Platform, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+var days = [
+  translation.days[1],
+  translation.days[2],
+  translation.days[3],
+  translation.days[4],
+  translation.days[5],
+  translation.days[6],
+  translation.days[0]
+];
+var months = [...translation.months];
+var currentDate = /* @__PURE__ */ new Date();
+var checkIsRange = (date) => {
+  return !(date instanceof Date);
+};
+var Calendar = React.forwardRef(
+  ({
+    value = currentDate,
+    minDate = new Date(currentDate.getFullYear() - 10, 0, 1),
+    maxDate = new Date(currentDate.getFullYear() + 10, 12, 0),
+    disabled,
+    readOnly,
+    disabledDates,
+    onChange,
+    onMonthChange
+  }, ref) => {
+    const [visibleMonth, setVisibleMonth] = React.useState(
+      value instanceof Date ? value : value[0] || currentDate
+    );
+    const [activeDate, setActiveDate] = React.useState(value);
+    const [dateEndHovered, setDateEndHovered] = React.useState();
+    const [showMonthPicker, setShowMonthPicker] = React.useState(false);
+    const [showYearPicker, setShowYearPicker] = React.useState(false);
+    const backgroundColor = getColorStyle("WHITE" /* BACKGROUND */);
+    const shadowColor = getColorStyle("DISABLED" /* DISABLED */);
+    const disabledFadeColor = getColorStyle("DISABLED_FADE" /* DISABLED_FADE */);
+    const mainColor = getColorStyle("MAIN" /* MAIN */);
+    const mainFadeColor = getColorStyle("MAIN_FADE" /* MAIN_FADE */);
+    const disabledColor = getColorStyle("DISABLED" /* DISABLED */);
+    const styles = React.useMemo(
+      () => StyleSheet.create({
+        calendar: {
+          backgroundColor,
+          borderRadius: 8,
+          padding: 24,
+          shadowColor,
+          shadowOffset: {
+            width: 0,
+            height: 2
+          },
+          shadowOpacity: 0.2,
+          shadowRadius: 8,
+          elevation: 4,
+          width: "85%",
+          alignSelf: "center"
+        },
+        header: {
+          alignContent: "center",
+          marginBottom: 16
+        },
+        headerRow: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 16,
+          paddingBottom: 16
+        },
+        navButton: {
+          width: 36,
+          height: 36,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 4,
+          backgroundColor: "transparent"
+        },
+        iconWrapper: {
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        disabledButton: {
+          opacity: 0.5
+        },
+        monthYearContainer: {
+          flex: 1,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        dropdownContainer: {
+          flexDirection: "row",
+          gap: 12,
+          justifyContent: "center"
+        },
+        monthSelector: {
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          backgroundColor,
+          borderRadius: 4,
+          borderWidth: 1,
+          borderColor: disabledFadeColor,
+          width: 80,
+          alignItems: "center",
+          height: 30,
+          justifyContent: "center"
+        },
+        yearSelector: {
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          backgroundColor,
+          borderRadius: 4,
+          borderWidth: 1,
+          borderColor: disabledFadeColor,
+          width: 80,
+          alignItems: "center",
+          height: 30,
+          justifyContent: "center"
+        },
+        selectorContent: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        selectorText: {
+          fontSize: 14,
+          fontWeight: "500",
+          color: "#495057",
+          flex: 1,
+          width: "100%"
+        },
+        dropdownIcon: {
+          marginLeft: 4,
+          width: 12,
+          height: 12,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        daysLabelRow: {
+          flexDirection: "row",
+          marginBottom: 8,
+          justifyContent: "space-between"
+        },
+        dayLabel: {
+          flex: 1,
+          alignItems: "center",
+          paddingVertical: Platform.OS === "android" ? 6 : 4,
+          height: Platform.OS === "android" ? 42 : 36,
+          justifyContent: "center",
+          maxWidth: Platform.OS === "android" ? 42 : 36,
+          minWidth: Platform.OS === "android" ? 42 : 36
+        },
+        dayLabelText: {
+          fontSize: 12,
+          fontWeight: "600",
+          color: "#6c757d",
+          textTransform: "uppercase",
+          width: "100%"
+        },
+        body: {
+          gap: 8
+        },
+        weekRow: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 0
+        },
+        emptyDay: {
+          flex: 1,
+          height: Platform.OS === "android" ? 42 : 36,
+          alignItems: "center",
+          justifyContent: "center",
+          maxWidth: Platform.OS === "android" ? 42 : 36,
+          minWidth: Platform.OS === "android" ? 42 : 36
+        },
+        dayButton: {
+          flex: 1,
+          height: Platform.OS === "android" ? 42 : 36,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 4,
+          backgroundColor: "transparent",
+          maxWidth: Platform.OS === "android" ? 42 : 36,
+          minWidth: Platform.OS === "android" ? 42 : 36
+        },
+        dayText: {
+          fontSize: 14,
+          fontWeight: "400",
+          color: "#212529",
+          width: "100%"
+        },
+        activeDay: {
+          backgroundColor: mainColor
+        },
+        activeDayText: {
+          color: backgroundColor,
+          fontWeight: "600",
+          width: "100%"
+        },
+        disabledDay: {
+          backgroundColor: disabledFadeColor,
+          opacity: 0.6
+        },
+        disabledDayText: {
+          color: disabledColor,
+          width: "100%"
+        },
+        dateStart: {
+          backgroundColor: mainColor,
+          borderTopLeftRadius: 8,
+          borderBottomLeftRadius: 8,
+          borderTopRightRadius: 4,
+          borderBottomRightRadius: 4
+        },
+        dateEnd: {
+          backgroundColor: mainColor,
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8,
+          borderTopLeftRadius: 4,
+          borderBottomLeftRadius: 4
+        },
+        dateInRange: {
+          backgroundColor: mainFadeColor,
+          borderRadius: 0
+        },
+        roundedLeft: {
+          borderTopLeftRadius: 8,
+          borderBottomLeftRadius: 8
+        },
+        roundedRight: {
+          borderTopRightRadius: 8,
+          borderBottomRightRadius: 8
+        },
+        todayButton: {
+          borderWidth: 0,
+          backgroundColor: "transparent"
+        },
+        todayText: {
+          fontWeight: "600",
+          color: mainColor
+        },
+        modalOverlay: {
+          flex: 1,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        pickerContainer: {
+          backgroundColor,
+          borderRadius: 8,
+          maxHeight: 300,
+          width: 200,
+          shadowColor: "#000",
+          shadowOffset: {
+            width: 0,
+            height: 2
+          },
+          shadowOpacity: 0.25,
+          shadowRadius: 8,
+          elevation: 5
+        },
+        pickerScrollView: {
+          maxHeight: 300
+        },
+        pickerItem: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+          borderBottomWidth: 1,
+          borderBottomColor: backgroundColor
+        },
+        pickerItemSelected: {
+          backgroundColor: mainColor
+        },
+        pickerItemDisabled: {
+          opacity: 0.5
+        },
+        pickerItemText: {
+          fontSize: 16,
+          color: "#212529",
+          flex: 1,
+          lineHeight: 20
+        },
+        pickerItemTextSelected: {
+          color: "#ffffff",
+          fontWeight: "600"
+        },
+        pickerItemTextDisabled: {
+          color: "#6c757d"
+        }
+      }),
+      [backgroundColor, shadowColor, disabledFadeColor, mainColor, mainFadeColor, disabledColor]
+    );
+    const isRange = checkIsRange(activeDate);
+    const isNextDisabled = React.useMemo(
+      () => disabled || (maxDate == null ? void 0 : maxDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (maxDate == null ? void 0 : maxDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
+      [maxDate, visibleMonth, disabled]
+    );
+    const isPrevDisabled = React.useMemo(
+      () => disabled || (minDate == null ? void 0 : minDate.getMonth()) === (visibleMonth == null ? void 0 : visibleMonth.getMonth()) && (minDate == null ? void 0 : minDate.getFullYear()) === (visibleMonth == null ? void 0 : visibleMonth.getFullYear()),
+      [minDate, visibleMonth, disabled]
+    );
+    const getAllDaysInMonth = React.useCallback((year, month) => {
+      const date = new Date(year, month, 1);
+      const days2 = [];
+      const firstDayOfMonth = (date.getDay() + 6) % 7;
+      const lastDayOfMonth = new Date(year, month + 1, 0).getDate();
+      const allDays = [];
+      for (let i = 0; i < firstDayOfMonth; i++) days2.push(null);
+      for (let day = 1; day <= lastDayOfMonth; day++) days2.push(new Date(year, month, day));
+      while (days2.length % 7 !== 0) {
+        days2.push(null);
+      }
+      for (let i = 0; i < days2.length; i += 7) allDays.push(days2.slice(i, i + 7));
+      return allDays;
+    }, []);
+    const yearsBetween = React.useMemo(() => {
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      const currentYear = value instanceof Date && (value == null ? void 0 : value.getFullYear());
+      const isCurrentYearInclude = currentYear && currentYear >= minYear && currentYear <= maxYear;
+      let years = Array.from({ length: maxYear - minYear + 1 }, (_, i) => {
+        const year = minYear + i;
+        return {
+          value: year,
+          disabled: false
+        };
+      });
+      if (currentYear && !isCurrentYearInclude) {
+        years = [{ value: currentYear, disabled: true }, ...years];
+      }
+      return years;
+    }, [minDate, maxDate, value]);
+    const availableMonths = React.useMemo(() => {
+      const currentYear = visibleMonth.getFullYear();
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      const minMonth = minDate.getMonth();
+      const maxMonth = maxDate.getMonth();
+      return Array.from({ length: 12 }, (_, monthIndex) => {
+        if (currentYear < minYear || currentYear > maxYear) return false;
+        if (currentYear === minYear && monthIndex < minMonth) return false;
+        if (currentYear === maxYear && monthIndex > maxMonth) return false;
+        return true;
+      });
+    }, [minDate, maxDate, visibleMonth]);
+    const availableYear = React.useMemo(() => {
+      const minYear = minDate.getFullYear();
+      const maxYear = maxDate.getFullYear();
+      return Array.from({ length: maxYear - minYear + 1 }, (_, i) => minYear + i);
+    }, [minDate, maxDate, visibleMonth]);
+    const allDaysInMonth = React.useMemo(() => {
+      const activeYear = visibleMonth.getFullYear();
+      const activeMonth = visibleMonth.getMonth();
+      return getAllDaysInMonth(activeYear, activeMonth);
+    }, [visibleMonth]);
+    const handleClickNextPrevMonth = React.useCallback(
+      (month) => {
+        const nextMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + month, visibleMonth.getDate());
+        setVisibleMonth(nextMonth);
+        onMonthChange && onMonthChange(nextMonth);
+      },
+      [visibleMonth, onMonthChange]
+    );
+    const handleMonthSelect = React.useCallback(
+      (selectedMonth) => {
+        const newDate = new Date(visibleMonth.getFullYear(), selectedMonth, visibleMonth.getDate());
+        setVisibleMonth(newDate);
+        onMonthChange && onMonthChange(newDate);
+      },
+      [visibleMonth, onMonthChange, minDate, maxDate]
+    );
+    const handleYearSelect = React.useCallback(
+      (selectedYear) => {
+        const newDate = new Date(selectedYear, visibleMonth.getMonth(), visibleMonth.getDate());
+        if (newDate.getTime() < minDate.getTime() || newDate.getTime() > maxDate.getTime()) {
+          if (newDate.getTime() < minDate.getTime()) {
+            setVisibleMonth(new Date(selectedYear, minDate.getMonth(), visibleMonth.getDate()));
+            onMonthChange && onMonthChange(new Date(selectedYear, minDate.getMonth(), visibleMonth.getDate()));
+          } else {
+            setVisibleMonth(new Date(selectedYear, maxDate.getMonth(), visibleMonth.getDate()));
+            onMonthChange && onMonthChange(new Date(selectedYear, maxDate.getMonth(), visibleMonth.getDate()));
+          }
+          return;
+        }
+        setVisibleMonth(newDate);
+        onMonthChange && onMonthChange(newDate);
+      },
+      [visibleMonth, onMonthChange, minDate, maxDate]
+    );
+    const handlePressDay = React.useCallback(
+      (day) => {
+        if (readOnly) return;
+        const newDate = day;
+        let newActiveDate = [newDate];
+        if (!isRange) newActiveDate = newDate;
+        if (isRange && activeDate.length === 1 && newDate.getTime() > activeDate[0].getTime()) {
+          newActiveDate = [...activeDate, newDate];
+        }
+        setActiveDate(newActiveDate);
+        setDateEndHovered(void 0);
+        onChange && onChange(newActiveDate);
+      },
+      [onChange, readOnly, activeDate, isRange]
+    );
+    React.useEffect(() => {
+      setActiveDate(value);
+      if (value instanceof Date) return setVisibleMonth(value);
+      if (!(value instanceof Date) && value[0]) {
+        if (value[1]) {
+          return setVisibleMonth(value[1]);
+        }
+        return setVisibleMonth(value[0]);
+      }
+    }, [value]);
+    const renderDayButton = (day, dayIndex) => {
+      if (!day) {
+        return /* @__PURE__ */ React.createElement(View, { key: dayIndex, style: styles.emptyDay });
+      }
+      const isDateStart = isRange && activeDate[0] && (day == null ? void 0 : day.getTime()) === activeDate[0].getTime();
+      const isDateEnd = isRange && activeDate[1] && (day == null ? void 0 : day.getTime()) === activeDate[1].getTime();
+      const today = /* @__PURE__ */ new Date();
+      const isToday = (day == null ? void 0 : day.getFullYear()) === today.getFullYear() && (day == null ? void 0 : day.getMonth()) === today.getMonth() && (day == null ? void 0 : day.getDate()) === today.getDate();
+      const isActive = !isRange ? (day == null ? void 0 : day.getFullYear()) === activeDate.getFullYear() && (day == null ? void 0 : day.getMonth()) === activeDate.getMonth() && (day == null ? void 0 : day.getDate()) === activeDate.getDate() : activeDate == null ? void 0 : activeDate.some(
+        (date) => (date == null ? void 0 : date.getFullYear()) === (day == null ? void 0 : day.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (day == null ? void 0 : day.getMonth()) && (date == null ? void 0 : date.getDate()) === (day == null ? void 0 : day.getDate())
+      );
+      const isDisabled = disabled || day && day.getTime() > (maxDate == null ? void 0 : maxDate.getTime()) || day && day.getTime() < (minDate == null ? void 0 : minDate.getTime()) || day && (disabledDates == null ? void 0 : disabledDates.some(
+        (date) => (date == null ? void 0 : date.getFullYear()) === (day == null ? void 0 : day.getFullYear()) && (date == null ? void 0 : date.getMonth()) === (day == null ? void 0 : day.getMonth()) && (date == null ? void 0 : date.getDate()) === (day == null ? void 0 : day.getDate())
+      )) || false;
+      const isInRange = isRange && activeDate[0] && dateEndHovered && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < dateEndHovered.getTime() || isRange && activeDate[0] && activeDate[1] && day && day.getTime() >= activeDate[0].getTime() && day.getTime() < activeDate[1].getTime();
+      return /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          key: dayIndex,
+          disabled: isDisabled,
+          onPress: () => !isDisabled && handlePressDay(day),
+          onPressIn: () => {
+            if (!isRange) return;
+            if (activeDate[0] !== void 0 && activeDate.length === 1) {
+              setDateEndHovered(day);
+            }
+          },
+          onPressOut: () => {
+            if (isRange && activeDate.length === 1) {
+              setDateEndHovered(void 0);
+            }
+          },
+          accessible: true,
+          accessibilityRole: "button",
+          accessibilityState: {
+            selected: isActive,
+            disabled: isDisabled
+          },
+          style: [
+            styles.dayButton,
+            isToday && styles.todayButton,
+            isActive && styles.activeDay,
+            isDisabled && styles.disabledDay,
+            isInRange && styles.dateInRange,
+            isDateStart && styles.dateStart,
+            isDateEnd && styles.dateEnd,
+            dayIndex === 0 && styles.roundedLeft,
+            dayIndex === 6 && styles.roundedRight
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-centered" /* TEXT_CENTERED */,
+            style: [
+              styles.dayText,
+              isToday && styles.todayText,
+              isActive && styles.activeDayText,
+              isDisabled && styles.disabledDayText
+            ]
+          },
+          day.getDate()
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement(View, { ref, style: styles.calendar }, /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(View, { style: styles.headerRow }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => handleClickNextPrevMonth(-1),
+        disabled: isPrevDisabled,
+        accessible: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isPrevDisabled },
+        style: [styles.navButton, isPrevDisabled && styles.disabledButton]
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.iconWrapper }, /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-left" }))
+    ), /* @__PURE__ */ React.createElement(View, { style: styles.monthYearContainer }, /* @__PURE__ */ React.createElement(View, { style: styles.dropdownContainer }, /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: styles.monthSelector,
+        accessible: true,
+        accessibilityRole: "button",
+        onPress: () => setShowMonthPicker(true)
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.selectorContent }, /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.selectorText }, months[visibleMonth.getMonth()]), /* @__PURE__ */ React.createElement(View, { style: styles.dropdownIcon }, /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-down" })))
+    ), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        style: styles.yearSelector,
+        accessible: true,
+        accessibilityRole: "button",
+        onPress: () => setShowYearPicker(true)
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.selectorContent }, /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.selectorText }, visibleMonth.getFullYear()), /* @__PURE__ */ React.createElement(View, { style: styles.dropdownIcon }, /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-down" })))
+    ))), /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: () => handleClickNextPrevMonth(1),
+        disabled: isNextDisabled,
+        accessible: true,
+        accessibilityRole: "button",
+        accessibilityState: { disabled: isNextDisabled },
+        style: [styles.navButton, isNextDisabled && styles.disabledButton]
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.iconWrapper }, /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-arrow-right" }))
+    )), /* @__PURE__ */ React.createElement(View, { style: styles.daysLabelRow }, days.map((day, index) => /* @__PURE__ */ React.createElement(View, { key: index, style: styles.dayLabel }, /* @__PURE__ */ React.createElement(Text_native_default, { typo: "has-text-centered" /* TEXT_CENTERED */, style: styles.dayLabelText }, day.slice(0, 1)))))), /* @__PURE__ */ React.createElement(View, { style: styles.body }, allDaysInMonth.map((week, weekIndex) => /* @__PURE__ */ React.createElement(View, { key: weekIndex, style: styles.weekRow }, week.map((day, dayIndex) => renderDayButton(day, dayIndex))))), /* @__PURE__ */ React.createElement(
+      Modal,
+      {
+        visible: showMonthPicker,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setShowMonthPicker(false)
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.modalOverlay }, /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          style: StyleSheet.absoluteFillObject,
+          activeOpacity: 1,
+          onPress: () => setShowMonthPicker(false)
+        }
+      ), /* @__PURE__ */ React.createElement(View, { style: styles.pickerContainer }, /* @__PURE__ */ React.createElement(ScrollView, { style: styles.pickerScrollView }, months.map((monthName, monthIndex) => /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          key: monthIndex,
+          style: [
+            styles.pickerItem,
+            visibleMonth.getMonth() === monthIndex && styles.pickerItemSelected,
+            !availableMonths[monthIndex] && styles.pickerItemDisabled
+          ],
+          disabled: !availableMonths[monthIndex],
+          onPress: () => {
+            if (availableMonths[monthIndex]) {
+              handleMonthSelect(monthIndex);
+              setShowMonthPicker(false);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-left" /* TEXT_LEFT */,
+            style: [
+              styles.pickerItemText,
+              visibleMonth.getMonth() === monthIndex && styles.pickerItemTextSelected,
+              !availableMonths[monthIndex] && styles.pickerItemTextDisabled
+            ]
+          },
+          monthName
+        ),
+        visibleMonth.getMonth() === monthIndex && /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-check" })
+      )))))
+    ), /* @__PURE__ */ React.createElement(
+      Modal,
+      {
+        visible: showYearPicker,
+        transparent: true,
+        animationType: "fade",
+        onRequestClose: () => setShowYearPicker(false)
+      },
+      /* @__PURE__ */ React.createElement(View, { style: styles.modalOverlay }, /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          style: StyleSheet.absoluteFillObject,
+          activeOpacity: 1,
+          onPress: () => setShowYearPicker(false)
+        }
+      ), /* @__PURE__ */ React.createElement(View, { style: styles.pickerContainer }, /* @__PURE__ */ React.createElement(ScrollView, { style: styles.pickerScrollView }, yearsBetween.map((year) => /* @__PURE__ */ React.createElement(
+        TouchableOpacity,
+        {
+          key: year.value,
+          style: [
+            styles.pickerItem,
+            visibleMonth.getFullYear() === year.value && styles.pickerItemSelected,
+            !availableYear.includes(year.value) && styles.pickerItemDisabled
+          ],
+          disabled: !availableYear.includes(year.value),
+          onPress: () => {
+            if (availableYear.includes(year.value)) {
+              handleYearSelect(year.value);
+              setShowYearPicker(false);
+            }
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          Text_native_default,
+          {
+            typo: "has-text-left" /* TEXT_LEFT */,
+            style: [
+              styles.pickerItemText,
+              visibleMonth.getFullYear() === year.value && styles.pickerItemTextSelected,
+              !availableYear.includes(year.value) && styles.pickerItemTextDisabled
+            ]
+          },
+          String(year.value)
+        ),
+        visibleMonth.getFullYear() === year.value && /* @__PURE__ */ React.createElement(Icon_native_default, { name: "tri-check" })
+      )))))
+    ));
+  }
+);
+Calendar.displayName = "Calendar" /* Calendar */;
+var Calendar_native_default = Calendar;
+
+export {
+  Calendar_native_default
+};

package/lib/{chunk-ZSBVX26X.mjs → chunk-7LIZKR65.mjs}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-3LXODEBD.mjs";
 import {
   Icon_native_default
-} from "./chunk-UPP3GX33.mjs";
+} from "./chunk-5NCBENYK.mjs";
 import {
   getButtonColorStyle,
   getColorStyle

package/lib/{chunk-T4AH7FLU.mjs → chunk-AVYI3IRF.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   AutoCompleteIem_native_default
-} from "./chunk-XZCE64VV.mjs";
+} from "./chunk-EFI4OPOL.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";

package/lib/{chunk-IOXFCPJQ.mjs → chunk-BNFC4BW2.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-MVQ252OA.mjs";
+} from "./chunk-RA7237YI.mjs";
 import {
   getTypographyBoldStyle
 } from "./chunk-3LXODEBD.mjs";

package/lib/{chunk-U2STNP4N.mjs → chunk-CKEC5R4P.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   AutoLayout_native_default
-} from "./chunk-M2TC4BZG.mjs";
+} from "./chunk-MCQZ43VV.mjs";
 
 // components/autolayout/AutoLayoutWrapper/index.native.tsx
 import * as React from "react";

package/lib/{chunk-Q3NP4BBO.mjs → chunk-CU2FQJB3.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   Text_native_default
-} from "./chunk-MVQ252OA.mjs";
+} from "./chunk-RA7237YI.mjs";
 import {
   Icon_native_default
-} from "./chunk-UPP3GX33.mjs";
+} from "./chunk-5NCBENYK.mjs";
 import {
   getColorStyle
 } from "./chunk-E4YRRUI3.mjs";