@xsolla/xui-date-picker 0.64.0-pr56.1768440195

package/native/index.mjs

@@ -0,0 +1,938 @@
+// src/DatePicker.tsx
+import { forwardRef as forwardRef4, useCallback as useCallback3, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+
+// ../primitives-native/src/Box.tsx
+import {
+  View,
+  Pressable,
+  Image
+} from "react-native";
+import { jsx } from "react/jsx-runtime";
+var Box = ({
+  children,
+  onPress,
+  onLayout,
+  onMoveShouldSetResponder,
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  onResponderTerminate,
+  backgroundColor,
+  borderColor,
+  borderWidth,
+  borderBottomWidth,
+  borderBottomColor,
+  borderTopWidth,
+  borderTopColor,
+  borderLeftWidth,
+  borderLeftColor,
+  borderRightWidth,
+  borderRightColor,
+  borderRadius,
+  borderStyle,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  margin,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  flex,
+  overflow,
+  zIndex,
+  hoverStyle,
+  pressStyle,
+  style,
+  "data-testid": dataTestId,
+  testID,
+  as,
+  src,
+  alt,
+  ...rest
+}) => {
+  const getContainerStyle = (pressed) => ({
+    backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
+    borderColor,
+    borderWidth,
+    borderBottomWidth,
+    borderBottomColor,
+    borderTopWidth,
+    borderTopColor,
+    borderLeftWidth,
+    borderLeftColor,
+    borderRightWidth,
+    borderRightColor,
+    borderRadius,
+    borderStyle,
+    overflow,
+    zIndex,
+    height,
+    width,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    flex,
+    ...style
+  });
+  const finalTestID = dataTestId || testID;
+  const {
+    role,
+    tabIndex,
+    onKeyDown,
+    onKeyUp,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-current": _ariaCurrent,
+    "aria-disabled": _ariaDisabled,
+    "aria-live": _ariaLive,
+    className,
+    "data-testid": _dataTestId,
+    ...nativeRest
+  } = rest;
+  if (as === "img" && src) {
+    const imageStyle = {
+      width,
+      height,
+      borderRadius,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        source: { uri: src },
+        style: imageStyle,
+        testID: finalTestID,
+        resizeMode: "cover",
+        ...nativeRest
+      }
+    );
+  }
+  if (onPress) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        onLayout,
+        onMoveShouldSetResponder,
+        onResponderGrant,
+        onResponderMove,
+        onResponderRelease,
+        onResponderTerminate,
+        style: ({ pressed }) => getContainerStyle(pressed),
+        testID: finalTestID,
+        ...nativeRest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: getContainerStyle(),
+      testID: finalTestID,
+      onLayout,
+      onMoveShouldSetResponder,
+      onResponderGrant,
+      onResponderMove,
+      onResponderRelease,
+      onResponderTerminate,
+      ...nativeRest,
+      children
+    }
+  );
+};
+
+// ../primitives-native/src/Text.tsx
+import { Text as RNText } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var roleMap = {
+  alert: "alert",
+  heading: "header",
+  button: "button",
+  link: "link",
+  text: "text"
+};
+var Text = ({
+  children,
+  color,
+  fontSize,
+  fontWeight,
+  fontFamily,
+  id,
+  role,
+  ...props
+}) => {
+  let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
+  if (resolvedFontFamily === "Pilat Wide Bold") {
+    resolvedFontFamily = void 0;
+  }
+  const style = {
+    color,
+    fontSize: typeof fontSize === "number" ? fontSize : void 0,
+    fontWeight,
+    fontFamily: resolvedFontFamily,
+    textDecorationLine: props.textDecoration
+  };
+  const accessibilityRole = role ? roleMap[role] : void 0;
+  return /* @__PURE__ */ jsx2(RNText, { style, testID: id, accessibilityRole, children });
+};
+
+// ../primitives-native/src/Spinner.tsx
+import { ActivityIndicator, View as View2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Spinner = ({
+  color,
+  size,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  "aria-describedby": ariaDescribedBy,
+  testID
+}) => {
+  return /* @__PURE__ */ jsx3(
+    View2,
+    {
+      accessible: true,
+      accessibilityRole: role === "status" ? "none" : void 0,
+      accessibilityLabel: ariaLabel,
+      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
+      testID,
+      children: /* @__PURE__ */ jsx3(
+        ActivityIndicator,
+        {
+          color,
+          size: typeof size === "number" ? size : "small"
+        }
+      )
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-native/src/Icon.tsx
+import React from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Divider.tsx
+import { View as View4 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../primitives-native/src/Input.tsx
+import { forwardRef } from "react";
+import { TextInput as RNTextInput } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var keyboardTypeMap = {
+  text: "default",
+  number: "numeric",
+  email: "email-address",
+  tel: "phone-pad",
+  url: "url",
+  decimal: "decimal-pad"
+};
+var inputModeToKeyboardType = {
+  none: "default",
+  text: "default",
+  decimal: "decimal-pad",
+  numeric: "number-pad",
+  tel: "phone-pad",
+  search: "default",
+  email: "email-address",
+  url: "url"
+};
+var autoCompleteToTextContentType = {
+  "one-time-code": "oneTimeCode",
+  email: "emailAddress",
+  username: "username",
+  password: "password",
+  "new-password": "newPassword",
+  tel: "telephoneNumber",
+  "postal-code": "postalCode",
+  name: "name"
+};
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
+    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
+    return /* @__PURE__ */ jsx6(
+      RNTextInput,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        secureTextEntry: secureTextEntry || type === "password",
+        keyboardType,
+        textContentType,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-native/src/TextArea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { TextInput as RNTextInput2 } from "react-native";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TextAreaPrimitive = forwardRef2(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId
+  }, ref) => {
+    const handleChangeText = (text) => {
+      onChangeText?.(text);
+      if (onChange) {
+        const syntheticEvent = {
+          target: { value: text },
+          currentTarget: { value: text },
+          type: "change",
+          nativeEvent: { text },
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isTrusted: false
+        };
+        onChange(syntheticEvent);
+      }
+    };
+    return /* @__PURE__ */ jsx7(
+      RNTextInput2,
+      {
+        ref,
+        value,
+        placeholder,
+        onChangeText: handleChangeText,
+        onFocus,
+        onBlur,
+        onKeyPress: (e) => {
+          if (onKeyDown) {
+            onKeyDown({
+              key: e.nativeEvent.key,
+              preventDefault: () => {
+              }
+            });
+          }
+        },
+        editable: !disabled,
+        multiline: true,
+        numberOfLines: rows || 4,
+        style: [
+          {
+            color,
+            fontSize: typeof fontSize === "number" ? fontSize : void 0,
+            flex: 1,
+            padding: 0,
+            textAlignVertical: "top",
+            textAlign: style?.textAlign || "left"
+          },
+          style
+        ],
+        placeholderTextColor,
+        maxLength,
+        testID: dataTestId || id,
+        accessibilityLabel: ariaLabel,
+        accessibilityHint: ariaDescribedBy,
+        accessibilityState: {
+          disabled: disabled || ariaDisabled
+        },
+        accessible: true
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/DatePicker.tsx
+import { Input } from "@xsolla/xui-input";
+import { useDesignSystem as useDesignSystem2, isWeb, isNative } from "@xsolla/xui-core";
+import { format as format3 } from "date-fns";
+
+// src/Calendar.tsx
+import { forwardRef as forwardRef3, 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 jsx8, jsxs } from "react/jsx-runtime";
+var ArrowLeft = () => /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("polyline", { points: "15 18 9 12 15 6" }) });
+var ArrowRight = () => /* @__PURE__ */ jsx8("svg", { viewBox: "0 0 24 24", width: 16, height: 16, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx8("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,
+  contextMenuMaxHeight = 240
+}) => {
+  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__ */ jsx8(
+          IconButton,
+          {
+            size: "xs",
+            tone: "mono",
+            variant: "secondary",
+            onPress: decreaseMonth,
+            disabled: prevMonthButtonDisabled,
+            icon: /* @__PURE__ */ jsx8(ArrowLeft, {}),
+            "aria-label": "Previous month"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", flex: 1, gap: 4, children: [
+          /* @__PURE__ */ jsx8(Box, { flex: 1.5, children: /* @__PURE__ */ jsx8(
+            Select,
+            {
+              value: months[monthDate.getMonth()],
+              onValueChange: handleChangeMonth,
+              options: monthOptions,
+              size: "s"
+            }
+          ) }),
+          /* @__PURE__ */ jsx8(Box, { flex: 1, children: /* @__PURE__ */ jsx8(
+            Select,
+            {
+              value: monthDate.getFullYear().toString(),
+              onValueChange: handleChangeYear,
+              options: yearOptions,
+              size: "s"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx8(
+          IconButton,
+          {
+            size: "xs",
+            tone: "mono",
+            variant: "secondary",
+            onPress: increaseMonth,
+            disabled: nextMonthButtonDisabled,
+            icon: /* @__PURE__ */ jsx8(ArrowRight, {}),
+            "aria-label": "Next month"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Calendar.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var Calendar = forwardRef3(
+  ({
+    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__ */ jsx9(
+            CalendarHeader,
+            {
+              monthDate: currentMonth,
+              decreaseMonth,
+              increaseMonth,
+              changeYear,
+              changeMonth,
+              locale,
+              minDate,
+              maxDate,
+              contextMenuMaxHeight
+            }
+          ),
+          /* @__PURE__ */ jsx9(Box, { flexDirection: "row", justifyContent: "space-between", marginBottom: 8, children: weekDays.map((day, i) => /* @__PURE__ */ jsx9(Box, { width: 40, alignItems: "center", children: /* @__PURE__ */ jsx9(Text, { fontSize: 12, fontWeight: "600", color: theme.colors.content.tertiary, children: day.toUpperCase() }) }, i)) }),
+          /* @__PURE__ */ jsx9(Box, { gap: 2, children: weeks.map((week, i) => /* @__PURE__ */ jsx9(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__ */ jsx9(
+              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__ */ jsx9(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 jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+var DatePicker = forwardRef4(
+  ({
+    onChange,
+    size = "m",
+    locale = "enUS",
+    selectsRange = false,
+    startDate,
+    endDate,
+    selectedDate,
+    placeholder,
+    backgroundColor,
+    testID,
+    ...rest
+  }, ref) => {
+    const { theme } = useDesignSystem2();
+    const [open, setOpen] = useState2(false);
+    const [inputValue, setInputValue] = useState2("");
+    const containerRef = useRef(null);
+    const formatDateForDisplay = (date) => {
+      if (!date) return "";
+      try {
+        return format3(date, "MM/dd/yyyy");
+      } catch {
+        return "";
+      }
+    };
+    const getDisplayValue = useCallback3(() => {
+      if (selectsRange) {
+        if (startDate && endDate) {
+          return `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
+        } else if (startDate) {
+          return formatDateForDisplay(startDate);
+        }
+        return "";
+      } else {
+        return formatDateForDisplay(selectedDate);
+      }
+    }, [selectsRange, startDate, endDate, selectedDate]);
+    useEffect2(() => {
+      setInputValue(getDisplayValue());
+    }, [getDisplayValue]);
+    const handleInputChange = (text) => {
+      setInputValue(text);
+    };
+    const handleDateChange = (date) => {
+      if (!selectsRange) {
+        onChange?.(date);
+        setOpen(false);
+      } else {
+        const range = date;
+        onChange?.(range);
+        if (range[0] && range[1]) {
+          setOpen(false);
+        }
+      }
+    };
+    useEffect2(() => {
+      if (isNative) return;
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const renderCalendar = () => /* @__PURE__ */ jsx10(
+      Calendar,
+      {
+        locale,
+        startDate,
+        endDate,
+        selectedDate,
+        onChange: handleDateChange,
+        selectsRange,
+        ...rest
+      }
+    );
+    return /* @__PURE__ */ jsxs3(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+      /* @__PURE__ */ jsx10(
+        Input,
+        {
+          ...rest,
+          size,
+          placeholder: placeholder || (selectsRange ? "MM/DD/YYYY - MM/DD/YYYY" : "MM/DD/YYYY"),
+          value: inputValue,
+          onChangeText: handleInputChange,
+          onFocus: () => setOpen(true),
+          backgroundColor,
+          testID
+        }
+      ),
+      open && (isWeb ? /* @__PURE__ */ jsx10(
+        Box,
+        {
+          position: "absolute",
+          top: "100%",
+          left: 0,
+          marginTop: 4,
+          zIndex: 1e3,
+          children: renderCalendar()
+        }
+      ) : (
+        // 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__ */ jsx10(Box, { marginTop: 4, children: renderCalendar() })
+      ))
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+export {
+  Calendar,
+  DatePicker,
+  formatDate,
+  getMonthInLocale
+};
+//# sourceMappingURL=index.mjs.map