@xsolla/xui-date-picker 0.117.0 → 0.118.0

package/native/index.js

@@ -30,15 +30,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  Calendar: () => Calendar,
+  Calendar: () => import_xui_calendar2.Calendar,
+  CalendarChips: () => import_xui_calendar2.CalendarChips,
+  CalendarGrid: () => import_xui_calendar2.CalendarGrid,
+  CalendarHeader: () => import_xui_calendar2.CalendarHeader,
   DatePicker: () => DatePicker,
-  formatDate: () => formatDate,
-  getMonthInLocale: () => getMonthInLocale
+  DualCalendar: () => import_xui_calendar2.DualCalendar,
+  formatDate: () => formatDate
 });
 module.exports = __toCommonJS(index_exports);
+var import_xui_calendar2 = require("@xsolla/xui-calendar");
 
 // src/DatePicker.tsx
-var import_react3 = require("react");
+var import_react = require("react");
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -206,468 +210,13 @@ var Box = ({
   );
 };
 
-// ../primitives-native/src/Text.tsx
-var import_react_native2 = require("react-native");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var roleMap = {
-  alert: "alert",
-  heading: "header",
-  button: "button",
-  link: "link",
-  text: "text"
-};
-var parseNumericValue = (value) => {
-  if (value === void 0) return void 0;
-  if (typeof value === "number") return value;
-  const parsed = parseFloat(value);
-  return isNaN(parsed) ? void 0 : parsed;
-};
-var Text = ({
-  children,
-  color,
-  fontSize,
-  fontWeight,
-  fontFamily,
-  textAlign,
-  lineHeight,
-  numberOfLines,
-  id,
-  role,
-  style: styleProp,
-  ...props
-}) => {
-  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
-  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
-    resolvedFontFamily = void 0;
-  }
-  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
-  const baseStyle = {
-    color,
-    fontSize: typeof fontSize === "number" ? fontSize : void 0,
-    fontWeight,
-    fontFamily: resolvedFontFamily,
-    textDecorationLine: props.textDecoration,
-    textAlign: textAlign ?? incomingStyle?.textAlign,
-    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),
-    marginTop: parseNumericValue(
-      incomingStyle?.marginTop
-    ),
-    marginBottom: parseNumericValue(
-      incomingStyle?.marginBottom
-    )
-  };
-  const accessibilityRole = role ? roleMap[role] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_native2.Text,
-    {
-      style: baseStyle,
-      numberOfLines,
-      testID: id,
-      accessibilityRole,
-      children
-    }
-  );
-};
-
 // src/DatePicker.tsx
 var import_xui_input = require("@xsolla/xui-input");
-var import_xui_core2 = require("@xsolla/xui-core");
-var import_date_fns3 = require("date-fns");
-
-// src/Calendar.tsx
-var import_react2 = require("react");
 var import_xui_core = require("@xsolla/xui-core");
-var import_date_fns2 = require("date-fns");
-var locales2 = __toESM(require("date-fns/locale"));
-
-// src/CalendarHeader.tsx
-var import_react = require("react");
-var import_xui_button = require("@xsolla/xui-button");
-var import_xui_select = require("@xsolla/xui-select");
-
-// src/utils.ts
 var import_date_fns = require("date-fns");
-var locales = __toESM(require("date-fns/locale"));
-var defaultLocale = "enUS";
-function formatDate(date, formatStr, locale = defaultLocale) {
-  const localeObj = locales[locale] || locales[defaultLocale];
-  return (0, import_date_fns.format)(date, formatStr, {
-    locale: localeObj
-  });
-}
-function getMonthInLocale(month, locale = defaultLocale) {
-  return formatDate((0, import_date_fns.setMonth)(/* @__PURE__ */ new Date(), month), "LLLL", locale);
-}
-
-// src/CalendarHeader.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ArrowLeft = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: 16,
-    height: 16,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 18 9 12 15 6" })
-  }
-);
-var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: 16,
-    height: 16,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 18 15 12 9 6" })
-  }
-);
-var months = [
-  "january",
-  "february",
-  "march",
-  "april",
-  "may",
-  "june",
-  "july",
-  "august",
-  "september",
-  "october",
-  "november",
-  "december"
-];
-var CalendarHeader = ({
-  monthDate,
-  decreaseMonth,
-  increaseMonth,
-  changeYear,
-  changeMonth,
-  prevMonthButtonDisabled,
-  nextMonthButtonDisabled,
-  locale,
-  minDate,
-  maxDate
-}) => {
-  const handleChangeMonth = (0, import_react.useCallback)(
-    (value) => {
-      changeMonth(months.indexOf(value));
-    },
-    [changeMonth]
-  );
-  const handleChangeYear = (0, import_react.useCallback)(
-    (value) => {
-      changeYear(parseInt(value, 10));
-    },
-    [changeYear]
-  );
-  const monthOptions = (0, import_react.useMemo)(() => {
-    return months.map((month, index) => ({
-      label: getMonthInLocale(index, locale),
-      value: month
-    }));
-  }, [locale]);
-  const yearOptions = (0, import_react.useMemo)(() => {
-    const options = [];
-    const yearStart = minDate ? minDate.getFullYear() : 1900;
-    const yearEnd = maxDate ? maxDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() + 100;
-    for (let i = yearEnd; i >= yearStart; i--) {
-      options.push({ value: i.toString(), label: i.toString() });
-    }
-    return options;
-  }, [minDate, maxDate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    Box,
-    {
-      width: "100%",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: 16,
-      gap: 8,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_xui_button.IconButton,
-          {
-            size: "xs",
-            tone: "mono",
-            variant: "secondary",
-            onPress: decreaseMonth,
-            disabled: prevMonthButtonDisabled,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowLeft, {}),
-            "aria-label": "Previous month"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Box, { flexDirection: "row", flex: 1, gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { flex: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_xui_select.Select,
-            {
-              value: months[monthDate.getMonth()],
-              onValueChange: handleChangeMonth,
-              options: monthOptions,
-              size: "sm"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_xui_select.Select,
-            {
-              value: monthDate.getFullYear().toString(),
-              onValueChange: handleChangeYear,
-              options: yearOptions,
-              size: "sm"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          import_xui_button.IconButton,
-          {
-            size: "xs",
-            tone: "mono",
-            variant: "secondary",
-            onPress: increaseMonth,
-            disabled: nextMonthButtonDisabled,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowRight, {}),
-            "aria-label": "Next month"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/Calendar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var Calendar = (0, import_react2.forwardRef)(
-  ({
-    locale = "enUS",
-    onChange,
-    startDate,
-    endDate,
-    selectedDate,
-    selectsRange = false,
-    contextMenuMaxHeight,
-    topContent,
-    bottomContent,
-    testID,
-    minDate,
-    maxDate,
-    firstDayOfWeek = 0,
-    month,
-    initialMonth
-  }, ref) => {
-    const { theme } = (0, import_xui_core.useDesignSystem)();
-    const localeObj = locales2[locale] || locales2.enUS;
-    const [currentMonth, setCurrentMonth] = (0, import_react2.useState)(
-      month || initialMonth || selectedDate || startDate || /* @__PURE__ */ new Date()
-    );
-    const [selectedStartDate, setSelectedStartDate] = (0, import_react2.useState)(startDate);
-    const [selectedEndDate, setSelectedEndDate] = (0, import_react2.useState)(endDate);
-    const [locSelectedDate, setLocSelectedDate] = (0, import_react2.useState)(selectedDate);
-    const [selectingRange, setSelectingRange] = (0, import_react2.useState)(null);
-    (0, import_react2.useEffect)(() => {
-      setSelectedStartDate(startDate);
-      setSelectedEndDate(endDate);
-      setLocSelectedDate(selectedDate);
-      if (month !== void 0) {
-        setCurrentMonth(month);
-      }
-    }, [startDate, endDate, selectedDate, month]);
-    const handleChange = (0, import_react2.useCallback)(
-      (date) => {
-        const newDate = new Date(
-          currentMonth.getFullYear(),
-          currentMonth.getMonth(),
-          date.getDate()
-        );
-        if (!selectsRange) {
-          setLocSelectedDate(newDate);
-          onChange?.(newDate);
-        } else {
-          if (!selectedStartDate || selectedStartDate && selectedEndDate) {
-            setSelectedStartDate(newDate);
-            setSelectedEndDate(null);
-            setSelectingRange(newDate);
-            onChange?.([newDate, null]);
-          } else {
-            const start = selectedStartDate < newDate ? selectedStartDate : newDate;
-            const end = selectedStartDate < newDate ? newDate : selectedStartDate;
-            setSelectedStartDate(start);
-            setSelectedEndDate(end);
-            setSelectingRange(null);
-            onChange?.([start, end]);
-          }
-        }
-      },
-      [onChange, selectsRange, selectedStartDate, selectedEndDate, currentMonth]
-    );
-    const decreaseMonth = (0, import_react2.useCallback)(
-      () => setCurrentMonth((prev) => (0, import_date_fns2.subMonths)(prev, 1)),
-      []
-    );
-    const increaseMonth = (0, import_react2.useCallback)(
-      () => setCurrentMonth((prev) => (0, import_date_fns2.addMonths)(prev, 1)),
-      []
-    );
-    const changeMonth = (0, import_react2.useCallback)(
-      (m) => setCurrentMonth((prev) => new Date(prev.getFullYear(), m, 1)),
-      []
-    );
-    const changeYear = (0, import_react2.useCallback)(
-      (y) => setCurrentMonth((prev) => new Date(y, prev.getMonth(), 1)),
-      []
-    );
-    const monthStart = (0, import_date_fns2.startOfMonth)(currentMonth);
-    const monthEnd = (0, import_date_fns2.endOfMonth)(currentMonth);
-    const weekStartsOn = firstDayOfWeek ?? 0;
-    const calendarStart = (0, import_date_fns2.startOfWeek)(monthStart, { weekStartsOn });
-    const calendarEnd = (0, import_date_fns2.endOfWeek)(monthEnd, { weekStartsOn });
-    const days = (0, import_date_fns2.eachDayOfInterval)({ start: calendarStart, end: calendarEnd });
-    const weekDays = (0, import_react2.useMemo)(() => {
-      return Array.from({ length: 7 }, (_, i) => {
-        const day = (0, import_date_fns2.addDays)(calendarStart, i);
-        return (0, import_date_fns2.format)(day, "EEEEEE", { locale: localeObj });
-      });
-    }, [calendarStart, localeObj]);
-    const weeks = (0, import_react2.useMemo)(() => {
-      const weekArray = [];
-      for (let i = 0; i < days.length; i += 7) {
-        weekArray.push(days.slice(i, i + 7));
-      }
-      return weekArray;
-    }, [days]);
-    const isDateDisabled = (0, import_react2.useCallback)(
-      (date) => {
-        if (minDate && (0, import_date_fns2.isBefore)(date, (0, import_date_fns2.startOfDay)(minDate))) return true;
-        if (maxDate && (0, import_date_fns2.isAfter)(date, (0, import_date_fns2.endOfDay)(maxDate))) return true;
-        return false;
-      },
-      [minDate, maxDate]
-    );
-    const isDateInRange = (0, import_react2.useCallback)(
-      (date) => {
-        if (!selectsRange || !selectedStartDate) return false;
-        const rangeEnd = selectedEndDate || selectingRange;
-        if (!rangeEnd) return false;
-        const start = selectedStartDate < rangeEnd ? selectedStartDate : rangeEnd;
-        const end = selectedStartDate < rangeEnd ? rangeEnd : selectedStartDate;
-        return (0, import_date_fns2.isWithinInterval)(date, {
-          start: (0, import_date_fns2.startOfDay)(start),
-          end: (0, import_date_fns2.endOfDay)(end)
-        });
-      },
-      [selectsRange, selectedStartDate, selectedEndDate, selectingRange]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      Box,
-      {
-        ref,
-        testID,
-        backgroundColor: theme.colors.background.secondary,
-        borderRadius: 8,
-        padding: 16,
-        overflow: "hidden",
-        style: {
-          boxShadow: "0px 4px 16px 0px rgba(7, 7, 8, 0.1)",
-          width: 312
-        },
-        children: [
-          topContent?.({ close: () => {
-          } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            CalendarHeader,
-            {
-              monthDate: currentMonth,
-              decreaseMonth,
-              increaseMonth,
-              changeYear,
-              changeMonth,
-              locale,
-              minDate,
-              maxDate,
-              contextMenuMaxHeight
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Box,
-            {
-              flexDirection: "row",
-              justifyContent: "space-between",
-              marginBottom: 8,
-              children: weekDays.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { width: 40, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                Text,
-                {
-                  fontSize: 12,
-                  fontWeight: "600",
-                  color: theme.colors.content.tertiary,
-                  children: day.toUpperCase()
-                }
-              ) }, i))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { gap: 2, children: weeks.map((week, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flexDirection: "row", justifyContent: "space-between", children: week.map((day, j) => {
-            const isOutsideMonth = !(0, import_date_fns2.isSameMonth)(day, currentMonth);
-            const isSelected = !selectsRange && locSelectedDate && (0, import_date_fns2.isSameDay)(day, locSelectedDate) || selectsRange && selectedStartDate && selectedEndDate && (0, import_date_fns2.isSameDay)(day, selectedStartDate) && (0, import_date_fns2.isSameDay)(day, selectedEndDate);
-            const isRangeStart = selectsRange && selectedStartDate && (0, import_date_fns2.isSameDay)(day, selectedStartDate);
-            const isRangeEnd = selectsRange && selectedEndDate && (0, import_date_fns2.isSameDay)(day, selectedEndDate);
-            const inRange = isDateInRange(day);
-            const today = (0, import_date_fns2.isToday)(day);
-            const disabled = isDateDisabled(day);
-            let bgColor = "transparent";
-            let textColor = theme.colors.content.primary;
-            if (isSelected || isRangeStart || isRangeEnd) {
-              bgColor = theme.colors.background.brand.primary;
-              textColor = theme.colors.content.on.brand;
-            } else if (inRange) {
-              bgColor = theme.colors.overlay.brand;
-            } else if (today) {
-              bgColor = theme.colors.overlay.mono;
-            }
-            if (isOutsideMonth || disabled) {
-              textColor = theme.colors.content.tertiary;
-            }
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              Box,
-              {
-                width: 40,
-                height: 32,
-                alignItems: "center",
-                justifyContent: "center",
-                borderRadius: isSelected || isRangeStart || isRangeEnd ? 4 : 0,
-                backgroundColor: bgColor,
-                cursor: disabled || isOutsideMonth ? "default" : "pointer",
-                onPress: () => !disabled && !isOutsideMonth && handleChange(day),
-                hoverStyle: !disabled && !isOutsideMonth && !isSelected ? { backgroundColor: theme.colors.overlay.mono } : void 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  Text,
-                  {
-                    color: textColor,
-                    fontSize: 14,
-                    fontWeight: isSelected || isRangeStart || isRangeEnd ? "600" : "400",
-                    children: (0, import_date_fns2.format)(day, "d")
-                  }
-                )
-              },
-              j
-            );
-          }) }, i)) }),
-          bottomContent?.({ close: () => {
-          } })
-        ]
-      }
-    );
-  }
-);
-Calendar.displayName = "Calendar";
-
-// src/DatePicker.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var DatePicker = (0, import_react3.forwardRef)(
+var import_xui_calendar = require("@xsolla/xui-calendar");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DatePicker = (0, import_react.forwardRef)(
   ({
     onChange,
     size = "md",
@@ -681,18 +230,18 @@ var DatePicker = (0, import_react3.forwardRef)(
     testID,
     ...rest
   }) => {
-    const [open, setOpen] = (0, import_react3.useState)(false);
-    const [inputValue, setInputValue] = (0, import_react3.useState)("");
-    const containerRef = (0, import_react3.useRef)(null);
+    const [open, setOpen] = (0, import_react.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react.useState)("");
+    const containerRef = (0, import_react.useRef)(null);
     const formatDateForDisplay = (date) => {
       if (!date) return "";
       try {
-        return (0, import_date_fns3.format)(date, "MM/dd/yyyy");
+        return (0, import_date_fns.format)(date, "MM/dd/yyyy");
       } catch {
         return "";
       }
     };
-    const getDisplayValue = (0, import_react3.useCallback)(() => {
+    const getDisplayValue = (0, import_react.useCallback)(() => {
       if (selectsRange) {
         if (startDate && endDate) {
           return `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
@@ -704,7 +253,7 @@ var DatePicker = (0, import_react3.forwardRef)(
         return formatDateForDisplay(selectedDate);
       }
     }, [selectsRange, startDate, endDate, selectedDate]);
-    (0, import_react3.useEffect)(() => {
+    (0, import_react.useEffect)(() => {
       setInputValue(getDisplayValue());
     }, [getDisplayValue]);
     const handleInputChange = (text) => {
@@ -722,8 +271,8 @@ var DatePicker = (0, import_react3.forwardRef)(
         }
       }
     };
-    (0, import_react3.useEffect)(() => {
-      if (import_xui_core2.isNative) return;
+    (0, import_react.useEffect)(() => {
+      if (import_xui_core.isNative) return;
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
           setOpen(false);
@@ -732,8 +281,8 @@ var DatePicker = (0, import_react3.forwardRef)(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const renderCalendar = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      Calendar,
+    const renderCalendar = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_xui_calendar.Calendar,
       {
         locale,
         startDate,
@@ -744,8 +293,8 @@ var DatePicker = (0, import_react3.forwardRef)(
         ...rest
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { ref: containerRef, position: "relative", width: "100%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_xui_input.Input,
         {
           ...rest,
@@ -758,7 +307,7 @@ var DatePicker = (0, import_react3.forwardRef)(
           testID
         }
       ),
-      open && (import_xui_core2.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      open && (import_xui_core.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Box,
         {
           position: "absolute",
@@ -772,17 +321,31 @@ var DatePicker = (0, import_react3.forwardRef)(
         // Native implementation could use a Modal here
         // For now, we just show it below the input if needed,
         // but usually a bottom sheet or centered modal is better.
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { marginTop: 4, children: renderCalendar() })
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { marginTop: 4, children: renderCalendar() })
       ))
     ] });
   }
 );
 DatePicker.displayName = "DatePicker";
+
+// src/utils.ts
+var import_date_fns2 = require("date-fns");
+var locales = __toESM(require("date-fns/locale"));
+var defaultLocale = "enUS";
+function formatDate(date, formatStr, locale = defaultLocale) {
+  const localeObj = locales[locale] || locales[defaultLocale];
+  return (0, import_date_fns2.format)(date, formatStr, {
+    locale: localeObj
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Calendar,
+  CalendarChips,
+  CalendarGrid,
+  CalendarHeader,
   DatePicker,
-  formatDate,
-  getMonthInLocale
+  DualCalendar,
+  formatDate
 });
 //# sourceMappingURL=index.js.map