@xsolla/xui-date-picker 0.87.0 → 0.89.0-pr137.1770210437

package/native/index.js

@@ -38,7 +38,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/DatePicker.tsx
-var import_react6 = require("react");
+var import_react3 = require("react");
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -241,272 +241,19 @@ var Text = ({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style, testID: id, accessibilityRole, children });
 };
 
-// ../primitives-native/src/Spinner.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Spinner = ({
-  color,
-  size,
-  role,
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive,
-  testID
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_native3.View,
-    {
-      accessible: true,
-      accessibilityRole: role === "status" ? "none" : void 0,
-      accessibilityLabel: ariaLabel,
-      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
-      testID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native3.ActivityIndicator,
-        {
-          color,
-          size: typeof size === "number" ? size : "small"
-        }
-      )
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// ../primitives-native/src/Icon.tsx
-var import_react = __toESM(require("react"));
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Input.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("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 = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "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__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
-      {
-        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
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "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__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        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
 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_react5 = require("react");
+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_react4 = require("react");
+var import_react = require("react");
 var import_xui_button = require("@xsolla/xui-button");
 var import_xui_select = require("@xsolla/xui-select");
 
@@ -525,8 +272,8 @@ function getMonthInLocale(month, locale = defaultLocale) {
 }
 
 // src/CalendarHeader.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ArrowLeft = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ArrowLeft = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -537,10 +284,10 @@ var ArrowLeft = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "15 18 9 12 15 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 18 9 12 15 6" })
   }
 );
-var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -551,7 +298,7 @@ var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 var months = [
@@ -580,25 +327,25 @@ var CalendarHeader = ({
   minDate,
   maxDate
 }) => {
-  const handleChangeMonth = (0, import_react4.useCallback)(
+  const handleChangeMonth = (0, import_react.useCallback)(
     (value) => {
       changeMonth(months.indexOf(value));
     },
     [changeMonth]
   );
-  const handleChangeYear = (0, import_react4.useCallback)(
+  const handleChangeYear = (0, import_react.useCallback)(
     (value) => {
       changeYear(parseInt(value, 10));
     },
     [changeYear]
   );
-  const monthOptions = (0, import_react4.useMemo)(() => {
+  const monthOptions = (0, import_react.useMemo)(() => {
     return months.map((month, index) => ({
       label: getMonthInLocale(index, locale),
       value: month
     }));
   }, [locale]);
-  const yearOptions = (0, import_react4.useMemo)(() => {
+  const yearOptions = (0, import_react.useMemo)(() => {
     const options = [];
     const yearStart = minDate ? minDate.getFullYear() : 1900;
     const yearEnd = maxDate ? maxDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() + 100;
@@ -607,7 +354,7 @@ var CalendarHeader = ({
     }
     return options;
   }, [minDate, maxDate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Box,
     {
       width: "100%",
@@ -617,7 +364,7 @@ var CalendarHeader = ({
       marginBottom: 16,
       gap: 8,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_xui_button.IconButton,
           {
             size: "xs",
@@ -625,12 +372,12 @@ var CalendarHeader = ({
             variant: "secondary",
             onPress: decreaseMonth,
             disabled: prevMonthButtonDisabled,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowLeft, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowLeft, {}),
             "aria-label": "Previous month"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Box, { flexDirection: "row", flex: 1, gap: 4, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__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()],
@@ -639,7 +386,7 @@ var CalendarHeader = ({
               size: "sm"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_xui_select.Select,
             {
               value: monthDate.getFullYear().toString(),
@@ -649,7 +396,7 @@ var CalendarHeader = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_xui_button.IconButton,
           {
             size: "xs",
@@ -657,7 +404,7 @@ var CalendarHeader = ({
             variant: "secondary",
             onPress: increaseMonth,
             disabled: nextMonthButtonDisabled,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowRight, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrowRight, {}),
             "aria-label": "Next month"
           }
         )
@@ -667,8 +414,8 @@ var CalendarHeader = ({
 };
 
 // src/Calendar.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Calendar = (0, import_react5.forwardRef)(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Calendar = (0, import_react2.forwardRef)(
   ({
     locale = "enUS",
     onChange,
@@ -688,14 +435,14 @@ var Calendar = (0, import_react5.forwardRef)(
   }, ref) => {
     const { theme } = (0, import_xui_core.useDesignSystem)();
     const localeObj = locales2[locale] || locales2.enUS;
-    const [currentMonth, setCurrentMonth] = (0, import_react5.useState)(
+    const [currentMonth, setCurrentMonth] = (0, import_react2.useState)(
       month || initialMonth || selectedDate || startDate || /* @__PURE__ */ new Date()
     );
-    const [selectedStartDate, setSelectedStartDate] = (0, import_react5.useState)(startDate);
-    const [selectedEndDate, setSelectedEndDate] = (0, import_react5.useState)(endDate);
-    const [locSelectedDate, setLocSelectedDate] = (0, import_react5.useState)(selectedDate);
-    const [selectingRange, setSelectingRange] = (0, import_react5.useState)(null);
-    (0, import_react5.useEffect)(() => {
+    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);
@@ -703,7 +450,7 @@ var Calendar = (0, import_react5.forwardRef)(
         setCurrentMonth(month);
       }
     }, [startDate, endDate, selectedDate, month]);
-    const handleChange = (0, import_react5.useCallback)(
+    const handleChange = (0, import_react2.useCallback)(
       (date) => {
         const newDate = new Date(
           currentMonth.getFullYear(),
@@ -731,19 +478,19 @@ var Calendar = (0, import_react5.forwardRef)(
       },
       [onChange, selectsRange, selectedStartDate, selectedEndDate, currentMonth]
     );
-    const decreaseMonth = (0, import_react5.useCallback)(
+    const decreaseMonth = (0, import_react2.useCallback)(
       () => setCurrentMonth((prev) => (0, import_date_fns2.subMonths)(prev, 1)),
       []
     );
-    const increaseMonth = (0, import_react5.useCallback)(
+    const increaseMonth = (0, import_react2.useCallback)(
       () => setCurrentMonth((prev) => (0, import_date_fns2.addMonths)(prev, 1)),
       []
     );
-    const changeMonth = (0, import_react5.useCallback)(
+    const changeMonth = (0, import_react2.useCallback)(
       (m) => setCurrentMonth((prev) => new Date(prev.getFullYear(), m, 1)),
       []
     );
-    const changeYear = (0, import_react5.useCallback)(
+    const changeYear = (0, import_react2.useCallback)(
       (y) => setCurrentMonth((prev) => new Date(y, prev.getMonth(), 1)),
       []
     );
@@ -753,20 +500,20 @@ var Calendar = (0, import_react5.forwardRef)(
     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_react5.useMemo)(() => {
+    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_react5.useMemo)(() => {
+    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_react5.useCallback)(
+    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;
@@ -774,7 +521,7 @@ var Calendar = (0, import_react5.forwardRef)(
       },
       [minDate, maxDate]
     );
-    const isDateInRange = (0, import_react5.useCallback)(
+    const isDateInRange = (0, import_react2.useCallback)(
       (date) => {
         if (!selectsRange || !selectedStartDate) return false;
         const rangeEnd = selectedEndDate || selectingRange;
@@ -788,7 +535,7 @@ var Calendar = (0, import_react5.forwardRef)(
       },
       [selectsRange, selectedStartDate, selectedEndDate, selectingRange]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       Box,
       {
         ref,
@@ -804,7 +551,7 @@ var Calendar = (0, import_react5.forwardRef)(
         children: [
           topContent?.({ close: () => {
           } }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             CalendarHeader,
             {
               monthDate: currentMonth,
@@ -818,13 +565,13 @@ var Calendar = (0, import_react5.forwardRef)(
               contextMenuMaxHeight
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             Box,
             {
               flexDirection: "row",
               justifyContent: "space-between",
               marginBottom: 8,
-              children: weekDays.map((day, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { width: 40, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              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,
@@ -835,7 +582,7 @@ var Calendar = (0, import_react5.forwardRef)(
               ) }, i))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { gap: 2, children: weeks.map((week, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", justifyContent: "space-between", children: week.map((day, j) => {
+          /* @__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);
@@ -856,7 +603,7 @@ var Calendar = (0, import_react5.forwardRef)(
             if (isOutsideMonth || disabled) {
               textColor = theme.colors.content.tertiary;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               Box,
               {
                 width: 40,
@@ -868,7 +615,7 @@ var Calendar = (0, import_react5.forwardRef)(
                 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_runtime9.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   Text,
                   {
                     color: textColor,
@@ -891,8 +638,8 @@ var Calendar = (0, import_react5.forwardRef)(
 Calendar.displayName = "Calendar";
 
 // src/DatePicker.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var DatePicker = (0, import_react6.forwardRef)(
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DatePicker = (0, import_react3.forwardRef)(
   ({
     onChange,
     size = "md",
@@ -906,9 +653,9 @@ var DatePicker = (0, import_react6.forwardRef)(
     testID,
     ...rest
   }) => {
-    const [open, setOpen] = (0, import_react6.useState)(false);
-    const [inputValue, setInputValue] = (0, import_react6.useState)("");
-    const containerRef = (0, import_react6.useRef)(null);
+    const [open, setOpen] = (0, import_react3.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react3.useState)("");
+    const containerRef = (0, import_react3.useRef)(null);
     const formatDateForDisplay = (date) => {
       if (!date) return "";
       try {
@@ -917,7 +664,7 @@ var DatePicker = (0, import_react6.forwardRef)(
         return "";
       }
     };
-    const getDisplayValue = (0, import_react6.useCallback)(() => {
+    const getDisplayValue = (0, import_react3.useCallback)(() => {
       if (selectsRange) {
         if (startDate && endDate) {
           return `${formatDateForDisplay(startDate)} - ${formatDateForDisplay(endDate)}`;
@@ -929,7 +676,7 @@ var DatePicker = (0, import_react6.forwardRef)(
         return formatDateForDisplay(selectedDate);
       }
     }, [selectsRange, startDate, endDate, selectedDate]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       setInputValue(getDisplayValue());
     }, [getDisplayValue]);
     const handleInputChange = (text) => {
@@ -947,7 +694,7 @@ var DatePicker = (0, import_react6.forwardRef)(
         }
       }
     };
-    (0, import_react6.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (import_xui_core2.isNative) return;
       const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -957,7 +704,7 @@ var DatePicker = (0, import_react6.forwardRef)(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const renderCalendar = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const renderCalendar = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Calendar,
       {
         locale,
@@ -969,8 +716,8 @@ var DatePicker = (0, import_react6.forwardRef)(
         ...rest
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { ref: containerRef, position: "relative", width: "100%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_xui_input.Input,
         {
           ...rest,
@@ -983,7 +730,7 @@ var DatePicker = (0, import_react6.forwardRef)(
           testID
         }
       ),
-      open && (import_xui_core2.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      open && (import_xui_core2.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Box,
         {
           position: "absolute",
@@ -997,7 +744,7 @@ var DatePicker = (0, import_react6.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_runtime10.jsx)(Box, { marginTop: 4, children: renderCalendar() })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { marginTop: 4, children: renderCalendar() })
       ))
     ] });
   }