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

package/web/index.js

@@ -0,0 +1,944 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Calendar: () => Calendar,
+  DatePicker: () => DatePicker,
+  formatDate: () => formatDate,
+  getMonthInLocale: () => getMonthInLocale
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/DatePicker.tsx
+var import_react6 = require("react");
+
+// ../primitives-web/src/Box.tsx
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var StyledBox = import_styled_components.default.div`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = import_react.default.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledBox,
+      {
+        ref,
+        as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var StyledText = import_styled_components2.default.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 || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  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,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../primitives-web/src/Spinner.tsx
+var import_styled_components3 = __toESM(require("styled-components"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var rotate = import_styled_components3.keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var StyledSpinner = import_styled_components3.default.div`
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  border: ${(props) => props.strokeWidth || 2}px solid
+    ${(props) => props.color || "currentColor"};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: ${rotate} 1s linear infinite;
+`;
+var Spinner = ({
+  role = "status",
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive = "polite",
+  "aria-describedby": ariaDescribedBy,
+  testID,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    StyledSpinner,
+    {
+      role,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testID,
+      ...props
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// ../primitives-web/src/Icon.tsx
+var import_styled_components4 = __toESM(require("styled-components"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var StyledIcon = import_styled_components4.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+
+// ../primitives-web/src/Divider.tsx
+var import_styled_components5 = __toESM(require("styled-components"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var StyledDivider = import_styled_components5.default.div`
+  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
+  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+
+  ${(props) => props.dashStroke && `
+    border-style: dashed;
+    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
+    border-width: 0;
+    ${props.vertical ? `
+      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
+      height: 100%;
+    ` : `
+      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+      width: 100%;
+    `}
+  `}
+`;
+
+// ../primitives-web/src/Input.tsx
+var import_react2 = require("react");
+var import_styled_components6 = __toESM(require("styled-components"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StyledInput = import_styled_components6.default.input`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var InputPrimitive = (0, import_react2.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,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    const inputValue = value !== void 0 ? value : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      StyledInput,
+      {
+        ref,
+        id,
+        value: inputValue,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId,
+        ...rest
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-web/src/TextArea.tsx
+var import_react3 = require("react");
+var import_styled_components7 = __toESM(require("styled-components"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var StyledTextArea = import_styled_components7.default.textarea`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+  resize: none;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var TextAreaPrimitive = (0, import_react3.forwardRef)(
+  ({
+    value,
+    placeholder,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      StyledTextArea,
+      {
+        ref,
+        value,
+        placeholder,
+        onChange: (e) => onChangeText?.(e.target.value),
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        rows
+      }
+    );
+  }
+);
+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_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_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_runtime8 = require("react/jsx-runtime");
+var ArrowLeft = () => /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("polyline", { points: "15 18 9 12 15 6" }) });
+var ArrowRight = () => /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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,
+  contextMenuMaxHeight = 240
+}) => {
+  const handleChangeMonth = (0, import_react4.useCallback)(
+    (value) => {
+      changeMonth(months.indexOf(value));
+    },
+    [changeMonth]
+  );
+  const handleChangeYear = (0, import_react4.useCallback)(
+    (value) => {
+      changeYear(parseInt(value, 10));
+    },
+    [changeYear]
+  );
+  const monthOptions = (0, import_react4.useMemo)(() => {
+    return months.map((month, index) => ({
+      label: getMonthInLocale(index, locale),
+      value: month
+    }));
+  }, [locale]);
+  const yearOptions = (0, import_react4.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_runtime8.jsxs)(
+    Box,
+    {
+      width: "100%",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 16,
+      gap: 8,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_xui_button.IconButton,
+          {
+            size: "xs",
+            tone: "mono",
+            variant: "secondary",
+            onPress: decreaseMonth,
+            disabled: prevMonthButtonDisabled,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime8.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)(
+            import_xui_select.Select,
+            {
+              value: months[monthDate.getMonth()],
+              onValueChange: handleChangeMonth,
+              options: monthOptions,
+              size: "s"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            import_xui_select.Select,
+            {
+              value: monthDate.getFullYear().toString(),
+              onValueChange: handleChangeYear,
+              options: yearOptions,
+              size: "s"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_xui_button.IconButton,
+          {
+            size: "xs",
+            tone: "mono",
+            variant: "secondary",
+            onPress: increaseMonth,
+            disabled: nextMonthButtonDisabled,
+            icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowRight, {}),
+            "aria-label": "Next month"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Calendar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Calendar = (0, import_react5.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_react5.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)(() => {
+      setSelectedStartDate(startDate);
+      setSelectedEndDate(endDate);
+      setLocSelectedDate(selectedDate);
+      if (month !== void 0) {
+        setCurrentMonth(month);
+      }
+    }, [startDate, endDate, selectedDate, month]);
+    const handleChange = (0, import_react5.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_react5.useCallback)(() => setCurrentMonth((prev) => (0, import_date_fns2.subMonths)(prev, 1)), []);
+    const increaseMonth = (0, import_react5.useCallback)(() => setCurrentMonth((prev) => (0, import_date_fns2.addMonths)(prev, 1)), []);
+    const changeMonth = (0, import_react5.useCallback)((m) => setCurrentMonth((prev) => new Date(prev.getFullYear(), m, 1)), []);
+    const changeYear = (0, import_react5.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_react5.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 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)(
+      (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_react5.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_runtime9.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_runtime9.jsx)(
+            CalendarHeader,
+            {
+              monthDate: currentMonth,
+              decreaseMonth,
+              increaseMonth,
+              changeYear,
+              changeMonth,
+              locale,
+              minDate,
+              maxDate,
+              contextMenuMaxHeight
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.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)(Text, { fontSize: 12, fontWeight: "600", color: theme.colors.content.tertiary, children: day.toUpperCase() }) }, 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) => {
+            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_runtime9.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_runtime9.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_runtime10 = require("react/jsx-runtime");
+var DatePicker = (0, import_react6.forwardRef)(
+  ({
+    onChange,
+    size = "m",
+    locale = "enUS",
+    selectsRange = false,
+    startDate,
+    endDate,
+    selectedDate,
+    placeholder,
+    backgroundColor,
+    testID,
+    ...rest
+  }, ref) => {
+    const { theme } = (0, import_xui_core2.useDesignSystem)();
+    const [open, setOpen] = (0, import_react6.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react6.useState)("");
+    const containerRef = (0, import_react6.useRef)(null);
+    const formatDateForDisplay = (date) => {
+      if (!date) return "";
+      try {
+        return (0, import_date_fns3.format)(date, "MM/dd/yyyy");
+      } catch {
+        return "";
+      }
+    };
+    const getDisplayValue = (0, import_react6.useCallback)(() => {
+      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]);
+    (0, import_react6.useEffect)(() => {
+      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);
+        }
+      }
+    };
+    (0, import_react6.useEffect)(() => {
+      if (import_xui_core2.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__ */ (0, import_jsx_runtime10.jsx)(
+      Calendar,
+      {
+        locale,
+        startDate,
+        endDate,
+        selectedDate,
+        onChange: handleDateChange,
+        selectsRange,
+        ...rest
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Box, { ref: containerRef, position: "relative", width: "100%", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_xui_input.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 && (import_xui_core2.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        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__ */ (0, import_jsx_runtime10.jsx)(Box, { marginTop: 4, children: renderCalendar() })
+      ))
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Calendar,
+  DatePicker,
+  formatDate,
+  getMonthInLocale
+});
+//# sourceMappingURL=index.js.map