@xsolla/xui-date-picker 0.117.0 → 0.118.0

package/web/index.mjs

@@ -1,5 +1,14 @@
+// src/index.tsx
+import {
+  Calendar as Calendar2,
+  DualCalendar,
+  CalendarHeader,
+  CalendarGrid,
+  CalendarChips
+} from "@xsolla/xui-calendar";
+
 // src/DatePicker.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback3, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 
 // ../primitives-web/src/Box.tsx
 import React from "react";
@@ -170,456 +179,13 @@ var Box = React.forwardRef(
 );
 Box.displayName = "Box";
 
-// ../primitives-web/src/Text.tsx
-import styled2 from "styled-components";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var StyledText = styled2.span`
-  color: ${(props) => props.color || "inherit"};
-  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
-  font-weight: ${(props) => props.fontWeight || "normal"};
-  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
-  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
-  white-space: ${(props) => props.whiteSpace || "normal"};
-  text-align: ${(props) => props.textAlign || "inherit"};
-  text-decoration: ${(props) => props.textDecoration || "none"};
-`;
-var Text = ({
-  style,
-  className,
-  id,
-  role,
-  numberOfLines: _numberOfLines,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx2(
-    StyledText,
-    {
-      ...props,
-      style,
-      className,
-      id,
-      role
-    }
-  );
-};
-
 // src/DatePicker.tsx
 import { Input } from "@xsolla/xui-input";
 import { isWeb, isNative } from "@xsolla/xui-core";
-import { format as format3 } from "date-fns";
-
-// src/Calendar.tsx
-import { forwardRef, useCallback as useCallback2, useEffect, useMemo as useMemo2, useState } from "react";
-import { useDesignSystem } from "@xsolla/xui-core";
-import {
-  addDays,
-  addMonths,
-  eachDayOfInterval,
-  endOfDay,
-  endOfMonth,
-  endOfWeek,
-  format as format2,
-  isAfter,
-  isBefore,
-  isSameDay,
-  isSameMonth,
-  isToday,
-  isWithinInterval,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-  subMonths
-} from "date-fns";
-import * as locales2 from "date-fns/locale";
-
-// src/CalendarHeader.tsx
-import { useCallback, useMemo } from "react";
-import { IconButton } from "@xsolla/xui-button";
-import { Select } from "@xsolla/xui-select";
-
-// src/utils.ts
-import { format, setMonth } from "date-fns";
-import * as locales from "date-fns/locale";
-var defaultLocale = "enUS";
-function formatDate(date, formatStr, locale = defaultLocale) {
-  const localeObj = locales[locale] || locales[defaultLocale];
-  return format(date, formatStr, {
-    locale: localeObj
-  });
-}
-function getMonthInLocale(month, locale = defaultLocale) {
-  return formatDate(setMonth(/* @__PURE__ */ new Date(), month), "LLLL", locale);
-}
-
-// src/CalendarHeader.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var ArrowLeft = () => /* @__PURE__ */ jsx3(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: 16,
-    height: 16,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx3("polyline", { points: "15 18 9 12 15 6" })
-  }
-);
-var ArrowRight = () => /* @__PURE__ */ jsx3(
-  "svg",
-  {
-    viewBox: "0 0 24 24",
-    width: 16,
-    height: 16,
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx3("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 = useCallback(
-    (value) => {
-      changeMonth(months.indexOf(value));
-    },
-    [changeMonth]
-  );
-  const handleChangeYear = useCallback(
-    (value) => {
-      changeYear(parseInt(value, 10));
-    },
-    [changeYear]
-  );
-  const monthOptions = useMemo(() => {
-    return months.map((month, index) => ({
-      label: getMonthInLocale(index, locale),
-      value: month
-    }));
-  }, [locale]);
-  const yearOptions = 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__ */ jsxs(
-    Box,
-    {
-      width: "100%",
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: 16,
-      gap: 8,
-      children: [
-        /* @__PURE__ */ jsx3(
-          IconButton,
-          {
-            size: "xs",
-            tone: "mono",
-            variant: "secondary",
-            onPress: decreaseMonth,
-            disabled: prevMonthButtonDisabled,
-            icon: /* @__PURE__ */ jsx3(ArrowLeft, {}),
-            "aria-label": "Previous month"
-          }
-        ),
-        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", flex: 1, gap: 4, children: [
-          /* @__PURE__ */ jsx3(Box, { flex: 1.5, children: /* @__PURE__ */ jsx3(
-            Select,
-            {
-              value: months[monthDate.getMonth()],
-              onValueChange: handleChangeMonth,
-              options: monthOptions,
-              size: "sm"
-            }
-          ) }),
-          /* @__PURE__ */ jsx3(Box, { flex: 1, children: /* @__PURE__ */ jsx3(
-            Select,
-            {
-              value: monthDate.getFullYear().toString(),
-              onValueChange: handleChangeYear,
-              options: yearOptions,
-              size: "sm"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx3(
-          IconButton,
-          {
-            size: "xs",
-            tone: "mono",
-            variant: "secondary",
-            onPress: increaseMonth,
-            disabled: nextMonthButtonDisabled,
-            icon: /* @__PURE__ */ jsx3(ArrowRight, {}),
-            "aria-label": "Next month"
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/Calendar.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Calendar = forwardRef(
-  ({
-    locale = "enUS",
-    onChange,
-    startDate,
-    endDate,
-    selectedDate,
-    selectsRange = false,
-    contextMenuMaxHeight,
-    topContent,
-    bottomContent,
-    testID,
-    minDate,
-    maxDate,
-    firstDayOfWeek = 0,
-    month,
-    initialMonth
-  }, ref) => {
-    const { theme } = useDesignSystem();
-    const localeObj = locales2[locale] || locales2.enUS;
-    const [currentMonth, setCurrentMonth] = useState(
-      month || initialMonth || selectedDate || startDate || /* @__PURE__ */ new Date()
-    );
-    const [selectedStartDate, setSelectedStartDate] = useState(startDate);
-    const [selectedEndDate, setSelectedEndDate] = useState(endDate);
-    const [locSelectedDate, setLocSelectedDate] = useState(selectedDate);
-    const [selectingRange, setSelectingRange] = useState(null);
-    useEffect(() => {
-      setSelectedStartDate(startDate);
-      setSelectedEndDate(endDate);
-      setLocSelectedDate(selectedDate);
-      if (month !== void 0) {
-        setCurrentMonth(month);
-      }
-    }, [startDate, endDate, selectedDate, month]);
-    const handleChange = useCallback2(
-      (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 = useCallback2(
-      () => setCurrentMonth((prev) => subMonths(prev, 1)),
-      []
-    );
-    const increaseMonth = useCallback2(
-      () => setCurrentMonth((prev) => addMonths(prev, 1)),
-      []
-    );
-    const changeMonth = useCallback2(
-      (m) => setCurrentMonth((prev) => new Date(prev.getFullYear(), m, 1)),
-      []
-    );
-    const changeYear = useCallback2(
-      (y) => setCurrentMonth((prev) => new Date(y, prev.getMonth(), 1)),
-      []
-    );
-    const monthStart = startOfMonth(currentMonth);
-    const monthEnd = endOfMonth(currentMonth);
-    const weekStartsOn = firstDayOfWeek ?? 0;
-    const calendarStart = startOfWeek(monthStart, { weekStartsOn });
-    const calendarEnd = endOfWeek(monthEnd, { weekStartsOn });
-    const days = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
-    const weekDays = useMemo2(() => {
-      return Array.from({ length: 7 }, (_, i) => {
-        const day = addDays(calendarStart, i);
-        return format2(day, "EEEEEE", { locale: localeObj });
-      });
-    }, [calendarStart, localeObj]);
-    const weeks = useMemo2(() => {
-      const weekArray = [];
-      for (let i = 0; i < days.length; i += 7) {
-        weekArray.push(days.slice(i, i + 7));
-      }
-      return weekArray;
-    }, [days]);
-    const isDateDisabled = useCallback2(
-      (date) => {
-        if (minDate && isBefore(date, startOfDay(minDate))) return true;
-        if (maxDate && isAfter(date, endOfDay(maxDate))) return true;
-        return false;
-      },
-      [minDate, maxDate]
-    );
-    const isDateInRange = useCallback2(
-      (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 isWithinInterval(date, {
-          start: startOfDay(start),
-          end: endOfDay(end)
-        });
-      },
-      [selectsRange, selectedStartDate, selectedEndDate, selectingRange]
-    );
-    return /* @__PURE__ */ jsxs2(
-      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__ */ jsx4(
-            CalendarHeader,
-            {
-              monthDate: currentMonth,
-              decreaseMonth,
-              increaseMonth,
-              changeYear,
-              changeMonth,
-              locale,
-              minDate,
-              maxDate,
-              contextMenuMaxHeight
-            }
-          ),
-          /* @__PURE__ */ jsx4(
-            Box,
-            {
-              flexDirection: "row",
-              justifyContent: "space-between",
-              marginBottom: 8,
-              children: weekDays.map((day, i) => /* @__PURE__ */ jsx4(Box, { width: 40, alignItems: "center", children: /* @__PURE__ */ jsx4(
-                Text,
-                {
-                  fontSize: 12,
-                  fontWeight: "600",
-                  color: theme.colors.content.tertiary,
-                  children: day.toUpperCase()
-                }
-              ) }, i))
-            }
-          ),
-          /* @__PURE__ */ jsx4(Box, { gap: 2, children: weeks.map((week, i) => /* @__PURE__ */ jsx4(Box, { flexDirection: "row", justifyContent: "space-between", children: week.map((day, j) => {
-            const isOutsideMonth = !isSameMonth(day, currentMonth);
-            const isSelected = !selectsRange && locSelectedDate && isSameDay(day, locSelectedDate) || selectsRange && selectedStartDate && selectedEndDate && isSameDay(day, selectedStartDate) && isSameDay(day, selectedEndDate);
-            const isRangeStart = selectsRange && selectedStartDate && isSameDay(day, selectedStartDate);
-            const isRangeEnd = selectsRange && selectedEndDate && isSameDay(day, selectedEndDate);
-            const inRange = isDateInRange(day);
-            const today = 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__ */ jsx4(
-              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__ */ jsx4(
-                  Text,
-                  {
-                    color: textColor,
-                    fontSize: 14,
-                    fontWeight: isSelected || isRangeStart || isRangeEnd ? "600" : "400",
-                    children: format2(day, "d")
-                  }
-                )
-              },
-              j
-            );
-          }) }, i)) }),
-          bottomContent?.({ close: () => {
-          } })
-        ]
-      }
-    );
-  }
-);
-Calendar.displayName = "Calendar";
-
-// src/DatePicker.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var DatePicker = forwardRef2(
+import { format } from "date-fns";
+import { Calendar } from "@xsolla/xui-calendar";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DatePicker = forwardRef(
   ({
     onChange,
     size = "md",
@@ -633,18 +199,18 @@ var DatePicker = forwardRef2(
     testID,
     ...rest
   }) => {
-    const [open, setOpen] = useState2(false);
-    const [inputValue, setInputValue] = useState2("");
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState("");
     const containerRef = useRef(null);
     const formatDateForDisplay = (date) => {
       if (!date) return "";
       try {
-        return format3(date, "MM/dd/yyyy");
+        return format(date, "MM/dd/yyyy");
       } catch {
         return "";
       }
     };
-    const getDisplayValue = useCallback3(() => {
+    const getDisplayValue = useCallback(() => {
       if (selectsRange) {
         if (startDate && endDate) {
           return `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
@@ -656,7 +222,7 @@ var DatePicker = forwardRef2(
         return formatDateForDisplay(selectedDate);
       }
     }, [selectsRange, startDate, endDate, selectedDate]);
-    useEffect2(() => {
+    useEffect(() => {
       setInputValue(getDisplayValue());
     }, [getDisplayValue]);
     const handleInputChange = (text) => {
@@ -674,7 +240,7 @@ var DatePicker = forwardRef2(
         }
       }
     };
-    useEffect2(() => {
+    useEffect(() => {
       if (isNative) return;
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -684,7 +250,7 @@ var DatePicker = forwardRef2(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const renderCalendar = () => /* @__PURE__ */ jsx5(
+    const renderCalendar = () => /* @__PURE__ */ jsx2(
       Calendar,
       {
         locale,
@@ -696,8 +262,8 @@ var DatePicker = forwardRef2(
         ...rest
       }
     );
-    return /* @__PURE__ */ jsxs3(Box, { ref: containerRef, position: "relative", width: "100%", children: [
-      /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+      /* @__PURE__ */ jsx2(
         Input,
         {
           ...rest,
@@ -710,7 +276,7 @@ var DatePicker = forwardRef2(
           testID
         }
       ),
-      open && (isWeb ? /* @__PURE__ */ jsx5(
+      open && (isWeb ? /* @__PURE__ */ jsx2(
         Box,
         {
           position: "absolute",
@@ -724,16 +290,30 @@ var DatePicker = forwardRef2(
         // 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__ */ jsx5(Box, { marginTop: 4, children: renderCalendar() })
+        /* @__PURE__ */ jsx2(Box, { marginTop: 4, children: renderCalendar() })
       ))
     ] });
   }
 );
 DatePicker.displayName = "DatePicker";
+
+// src/utils.ts
+import { format as format2 } from "date-fns";
+import * as locales from "date-fns/locale";
+var defaultLocale = "enUS";
+function formatDate(date, formatStr, locale = defaultLocale) {
+  const localeObj = locales[locale] || locales[defaultLocale];
+  return format2(date, formatStr, {
+    locale: localeObj
+  });
+}
 export {
-  Calendar,
+  Calendar2 as Calendar,
+  CalendarChips,
+  CalendarGrid,
+  CalendarHeader,
   DatePicker,
-  formatDate,
-  getMonthInLocale
+  DualCalendar,
+  formatDate
 };
 //# sourceMappingURL=index.mjs.map