@mirohq/design-system-calendar 0.1.0-calendar-component.0

package/dist/main.js

@@ -0,0 +1,709 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designSystem = require('@mirohq/design-system');
+var designSystemStitches = require('@mirohq/design-system-stitches');
+var React = require('react');
+var reactAria = require('react-aria');
+var date = require('@internationalized/date');
+var reactStately = require('react-stately');
+var designSystemFlex = require('@mirohq/design-system-flex');
+var designSystemIcons = require('@mirohq/design-system-icons');
+var designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemButton = require('@mirohq/design-system-button');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const StyledDataSegment = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  color: "$text-neutrals-subtle",
+  "&[data-value]": {
+    color: "$text-neutrals"
+  },
+  "& span": {
+    pointerEvents: "none",
+    "&[data-placeholder]": {
+      display: "none",
+      height: "0",
+      color: "$text-neutrals-subtle"
+    }
+  }
+});
+
+const FieldDateSegment = React__default["default"].forwardRef(({ segment, state }) => {
+  const ref = React.useRef(null);
+  const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledDataSegment, {
+    ...segmentProps,
+    ref,
+    "data-value": state.value !== null ? "" : void 0
+  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+    "aria-hidden": "true",
+    "data-placeholder": !segment.isPlaceholder ? "" : void 0
+  }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
+});
+const TextField = (props) => {
+  const ref = React.useRef(null);
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useDateFieldState({
+    ...props,
+    isReadOnly: true,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const { fieldProps } = reactAria.useDateField(props, state, ref);
+  return /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
+    ...fieldProps,
+    ref
+  }, state.segments.map((segment, i) => /* @__PURE__ */ React__default["default"].createElement(FieldDateSegment, {
+    key: i,
+    segment,
+    state
+  })));
+};
+
+const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+  padding: "0",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  color: "$text-neutrals",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  }
+});
+const StyledFieldButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+  padding: "0",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  square: "28px",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  },
+  "& svg": {
+    color: "$text-neutrals-subtle",
+    square: "22px"
+  },
+  "&[data-custom]": {
+    width: "100%",
+    height: "unset"
+  }
+});
+
+const Button = React__default["default"].forwardRef((props, forwardRef) => {
+  const ref = React.useRef(null);
+  const { buttonProps } = reactAria.useButton(props, ref);
+  const { focusProps } = reactAria.useFocusRing();
+  const { children } = props;
+  const refs = designSystemUtils.mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledButton, {
+    ...reactAria.mergeProps(buttonProps, focusProps),
+    ref: refs
+  }, children);
+});
+const FieldButton = (props) => {
+  const ref = React.useRef(null);
+  const { buttonProps } = reactAria.useButton(props, ref);
+  const { customButton = false, children } = props;
+  return /* @__PURE__ */ React__default["default"].createElement(StyledFieldButton, {
+    "data-custom": customButton ? "" : void 0,
+    ...buttonProps,
+    ref
+  }, children);
+};
+
+const Popover = (props) => {
+  const ref = React__namespace.useRef(null);
+  const { state, children } = props;
+  const { dialogProps } = reactAria.useDialog(props, ref);
+  const { popoverProps, underlayProps } = reactAria.usePopover(
+    {
+      ...props,
+      popoverRef: ref
+    },
+    state
+  );
+  return /* @__PURE__ */ React__namespace.createElement(reactAria.Overlay, null, /* @__PURE__ */ React__namespace.createElement("div", {
+    ...underlayProps
+  }), /* @__PURE__ */ React__namespace.createElement("div", {
+    ...popoverProps,
+    ref
+  }, /* @__PURE__ */ React__namespace.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ React__namespace.createElement("div", {
+    ...dialogProps,
+    ref
+  }, children), /* @__PURE__ */ React__namespace.createElement(reactAria.DismissButton, {
+    onDismiss: state.close
+  })));
+};
+
+const StyledRangePicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "inline-block"
+});
+const StyledRangePickerInput$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  padding: "$100",
+  paddingLeft: "$150",
+  border: "1px solid $border-neutrals",
+  borderRadius: "$50",
+  background: "$background-neutrals",
+  color: "$text-neutrals",
+  minWidth: "230px",
+  "&:hover": {
+    border: "1px solid $border-primary-hover",
+    cursor: "pointer"
+  }
+});
+const StyledRangePickerInputContent$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "$200",
+  lineHeight: "24px",
+  width: "100%"
+});
+
+const StyledPredefinedRanges = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  flexDirection: "column",
+  borderRight: "1px solid $border-neutrals",
+  padding: "$300 $200 0 $200",
+  "& button": {
+    background: "transparent",
+    border: "none",
+    fontSize: "$200",
+    padding: "0 0 0 $100",
+    textAlign: "left",
+    lineHeight: "24px",
+    color: "$text-neutrals",
+    marginBottom: "$150",
+    borderRadius: "$50",
+    minWidth: "125px",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "$background-primary-prominent-hover",
+      color: "$text-primary-inverted",
+      fontWeight: "600"
+    }
+  }
+});
+
+const PredefinedRanges = React__default["default"].forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledPredefinedRanges, {
+  ref: forwardRef
+}, range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ React__default["default"].createElement("button", {
+  key: i,
+  type: "button",
+  onClick: () => onClick(date)
+}, date.label))));
+
+const StyledBody = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "inline-block",
+  background: "$background-neutrals"
+});
+const StyledBodyContent = designSystemStitches.styled(designSystem.Flex, {
+  margin: "0 auto",
+  boxShadow: "$100",
+  background: "$background-neutrals",
+  borderRadius: "$100"
+});
+const StyledGridContent = designSystemStitches.styled(designSystem.Flex, {
+  paddingBottom: "$200",
+  "& [data-left-calendar]": {
+    paddingLeft: "$200",
+    paddingRight: "$100"
+  },
+  "& [data-right-calendar]": {
+    paddingLeft: "$100",
+    paddingRight: "$200"
+  }
+});
+const StyledBodyContentLeft = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  paddingLeft: "$200",
+  paddingRight: "$100"
+});
+const StyledBodyContentRight = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  paddingLeft: "$100",
+  paddingRight: "$200"
+});
+const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  padding: "$200",
+  borderTop: "1px solid $border-neutrals"
+});
+
+const StyledHeaderTitle = designSystemStitches.styled(designSystem.Flex, {
+  justifyContent: "center",
+  flex: "3",
+  color: "$text-neutrals"
+});
+const StyledHeader = designSystemStitches.styled(designSystem.Flex, {
+  padding: "0 $200",
+  color: "$text-neutrals"
+});
+
+const Header = ({
+  state,
+  prevButtonProps,
+  nextButtonProps,
+  visibleMonths
+}) => {
+  const monthDateFormatter = reactAria.useDateFormatter({
+    month: "long",
+    year: "numeric",
+    timeZone: state.timeZone
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(StyledHeader, null, /* @__PURE__ */ React__default["default"].createElement(Button, {
+    ...prevButtonProps
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronLeft, null)), /* @__PURE__ */ React__default["default"].createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default["default"].createElement("h2", null, monthDateFormatter.format(
+    state.visibleRange.start.toDate(state.timeZone)
+  ))), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default["default"].createElement("h2", null, monthDateFormatter.format(
+    state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+  ))), /* @__PURE__ */ React__default["default"].createElement(Button, {
+    ...nextButtonProps
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconChevronRight, null)));
+};
+
+const StyledCellContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  square: "28px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$50",
+  color: "$text-neutrals",
+  "&[data-today]": {
+    color: "$text-primary"
+  },
+  "&[data-weekend]": {
+    color: "$text-neutrals-subtle"
+  },
+  "&[data-selected-middle]": {
+    color: "$text-neutrals"
+  },
+  "&[data-selection]": {
+    borderRadius: "$50",
+    background: "$background-primary-prominent-selected",
+    color: "$text-primary-inverted",
+    fontWeight: "600"
+  },
+  "&[data-disabled]": {
+    textDecoration: "line-through",
+    color: "$text-neutrals-disabled"
+  }
+});
+const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  square: "36px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&:hover": {
+    background: "$background-primary-subtle-hover",
+    [`& ${StyledCellContent}`]: {
+      background: "$background-primary-prominent-hover",
+      color: "$text-primary-inverted"
+    }
+  },
+  "&[data-selected]": {
+    background: "$background-primary-subtle-hover"
+  },
+  "&[data-selection-start]": {
+    borderBottomLeftRadius: "$lg",
+    borderTopLeftRadius: "$lg"
+  },
+  "&[data-selection-end]": {
+    borderBottomRightRadius: "$lg",
+    borderTopRightRadius: "$lg"
+  },
+  "&[data-hidden]": {
+    display: "none"
+  },
+  "&[data-disabled]": {
+    cursor: "not-allowed",
+    "&:hover": {
+      background: "transparent",
+      [`& ${StyledCellContent}`]: {
+        background: "transparent",
+        color: "$text-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const Cell = React__default["default"].forwardRef(
+  (props, forwardRef) => {
+    const { state, date: date$1, currentMonth } = props;
+    const ref = React.useRef(null);
+    const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
+    const isOutsideMonth = !date.isSameMonth(currentMonth, date$1);
+    const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.start) : isSelected;
+    const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? date.isSameDay(date$1, state.highlightedRange.end) : isSelected;
+    const { locale } = reactAria.useLocale();
+    const dayOfWeek = date.getDayOfWeek(date$1, locale);
+    const isWeekendDay = date.isWeekend(date$1, locale);
+    const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date$1.day === 1);
+    const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date$1.day === date$1.calendar.getDaysInMonth(date$1));
+    const { focusProps } = reactAria.useFocusRing();
+    return /* @__PURE__ */ React__default["default"].createElement("td", {
+      ...cellProps
+    }, /* @__PURE__ */ React__default["default"].createElement(StyledCell, {
+      ...reactAria.mergeProps(buttonProps, focusProps),
+      ref: forwardRef,
+      "data-selected": isSelected ? "" : void 0,
+      "data-selection-start": isRoundedLeft ? "" : void 0,
+      "data-selection-end": isRoundedRight ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-hidden": isOutsideMonth ? "" : void 0
+    }, /* @__PURE__ */ React__default["default"].createElement(StyledCellContent, {
+      "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
+      "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-today": date.isToday(date$1, date.getLocalTimeZone()) ? "" : void 0,
+      "data-weekend": isWeekendDay ? "" : void 0
+    }, formattedDate)));
+  }
+);
+
+const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.table, {
+  borderCollapse: "separate",
+  borderSpacing: " 0 $50"
+});
+const StyledDays = designSystemStitches.styled(designSystemPrimitive.Primitive.th, {
+  square: "36px",
+  color: "$text-neutrals"
+});
+
+const Grid = React__default["default"].forwardRef(
+  (props, forwardRef) => {
+    const { locale } = reactAria.useLocale();
+    const { state, offset = {} } = props;
+    const startDate = state.visibleRange.start.add(offset);
+    const { gridProps, headerProps, weekDays } = reactAria.useCalendarGrid(
+      props,
+      state
+    );
+    const weeksInMonth = date.getWeeksInMonth(startDate, locale);
+    return /* @__PURE__ */ React__default["default"].createElement(StyledGrid, {
+      ref: forwardRef,
+      ...gridProps,
+      cellPadding: "0"
+    }, /* @__PURE__ */ React__default["default"].createElement("thead", {
+      ...headerProps
+    }, /* @__PURE__ */ React__default["default"].createElement("tr", null, weekDays.map((day, i) => /* @__PURE__ */ React__default["default"].createElement(StyledDays, {
+      key: i
+    }, /* @__PURE__ */ React__default["default"].createElement("div", null, day))))), /* @__PURE__ */ React__default["default"].createElement("tbody", null, Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ React__default["default"].createElement("tr", {
+      key: weekIndex
+    }, state.getDatesInWeek(weekIndex, startDate).map(
+      (date, i) => date !== null ? /* @__PURE__ */ React__default["default"].createElement(Cell, {
+        key: i,
+        state,
+        date,
+        currentMonth: startDate
+      }) : /* @__PURE__ */ React__default["default"].createElement("td", {
+        key: i
+      })
+    )))));
+  }
+);
+
+const RangePicker = React__default["default"].forwardRef((props, forwardRef) => {
+  const {
+    predefinedRanges,
+    minDate,
+    maxDate,
+    visibleMonths,
+    clearString,
+    children,
+    defaultOpen,
+    onClear
+  } = props;
+  const state = reactStately.useDateRangePickerState(
+    props
+  );
+  const ref = React.useRef(null);
+  const { locale } = reactAria.useLocale();
+  const { groupProps, startFieldProps, endFieldProps, buttonProps } = reactAria.useDateRangePicker(
+    {
+      ...props,
+      isOpen: defaultOpen
+    },
+    state,
+    ref
+  );
+  const change = (value) => {
+    state.setValue(value);
+    state.close();
+  };
+  const rangeState = reactStately.useRangeCalendarState({
+    ...props,
+    visibleDuration: visibleMonths,
+    minValue: minDate,
+    maxValue: maxDate,
+    autoFocus: true,
+    onFocusChange: focus,
+    onChange: change,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useRangeCalendar(
+    props,
+    rangeState,
+    ref
+  );
+  const rangeClick = React.useCallback(
+    (selectedRange) => {
+      if (selectedRange.range !== void 0) {
+        state.setValue(selectedRange.range);
+        rangeState.setValue(selectedRange.range);
+      }
+    },
+    [rangeState, state]
+  );
+  const clear = () => {
+    state.setValue({ start: null, end: null });
+    if (onClear !== void 0) {
+      onClear();
+      state.close();
+    }
+  };
+  const refs = designSystemUtils.mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledRangePicker, {
+    ref: refs
+  }, children === void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInput$1, {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInputContent$1, null, /* @__PURE__ */ React__default["default"].createElement(TextField, {
+    ...startFieldProps
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    "aria-hidden": "true"
+  }, "\u2013"), /* @__PURE__ */ React__default["default"].createElement(TextField, {
+    ...endFieldProps
+  }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
+    css: { marginLeft: "auto" }
+  }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
+    ...buttonProps
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCalendarBlank, null))))), children !== null && /* @__PURE__ */ React__default["default"].createElement("div", {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
+    ...buttonProps,
+    customButton: true
+  }, children)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(Popover, {
+    triggerRef: ref,
+    state,
+    placement: "bottom start"
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledBody, {
+    ref: refs
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContent, null, predefinedRanges !== void 0 && /* @__PURE__ */ React__default["default"].createElement(PredefinedRanges, {
+    range: predefinedRanges,
+    onClick: rangeClick
+  }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
+    direction: "column",
+    ...calendarProps
+  }, /* @__PURE__ */ React__default["default"].createElement(Header, {
+    state: rangeState,
+    prevButtonProps,
+    nextButtonProps,
+    visibleMonths
+  }), /* @__PURE__ */ React__default["default"].createElement(StyledGridContent, null, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
+    state: rangeState
+  })), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
+    onChange: change,
+    state: rangeState,
+    offset: { months: 1 }
+  }))), onClear !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledClearContent, null, /* @__PURE__ */ React__default["default"].createElement(designSystemButton.Button, {
+    size: "medium",
+    type: "button",
+    onClick: clear,
+    disabled: rangeState.value === null
+  }, clearString)))))));
+});
+
+const StyledRangePickerInput = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  padding: "$100",
+  paddingLeft: "$150",
+  border: "1px solid $border-neutrals",
+  borderRadius: "$50",
+  background: "$background-neutrals",
+  color: "$text-neutrals",
+  minWidth: "230px",
+  "&:hover": {
+    border: "1px solid $border-primary-hover",
+    cursor: "pointer"
+  }
+});
+const StyledRangePickerInputContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "$200",
+  lineHeight: "24px",
+  width: "100%"
+});
+const StyledDatePicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "inline-block"
+});
+
+const DatePickerBody = React__default["default"].forwardRef((props, forwardRef) => {
+  const {
+    predefinedRanges,
+    visibleMonths,
+    onClear,
+    minDate,
+    maxDate,
+    clearString
+  } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useCalendarState({
+    ...props,
+    visibleDuration: visibleMonths,
+    minValue: minDate,
+    maxValue: maxDate,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const ref = React.useRef(null);
+  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
+    props,
+    state
+  );
+  const dateClick = React.useCallback(
+    (selectedRange) => {
+      if (selectedRange.date !== void 0)
+        state.setValue(selectedRange.date);
+    },
+    [state]
+  );
+  const refs = designSystemUtils.mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default["default"].createElement(StyledBody, {
+    ref: refs
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContent, {
+    ...calendarProps
+  }, predefinedRanges !== void 0 && /* @__PURE__ */ React__default["default"].createElement(PredefinedRanges, {
+    range: predefinedRanges,
+    onClick: dateClick
+  }), /* @__PURE__ */ React__default["default"].createElement(designSystem.Flex, {
+    direction: "column"
+  }, /* @__PURE__ */ React__default["default"].createElement(Header, {
+    state,
+    prevButtonProps,
+    nextButtonProps,
+    visibleMonths
+  }), /* @__PURE__ */ React__default["default"].createElement(StyledGridContent, null, /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
+    state
+  })), visibleMonths !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default["default"].createElement(Grid, {
+    state,
+    offset: { months: 1 }
+  }))), onClear !== void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledClearContent, null, /* @__PURE__ */ React__default["default"].createElement(designSystemButton.Button, {
+    size: "medium",
+    onClick: onClear,
+    disabled: state.value === null
+  }, clearString)))));
+});
+
+const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
+  const {
+    picker,
+    predefinedRanges,
+    visibleMonths,
+    defaultValue,
+    minDate,
+    maxDate,
+    children,
+    clearString,
+    defaultOpen,
+    onClear
+  } = props;
+  const ref = React.useRef(null);
+  const refs = designSystem.mergeRefs([ref, forwardRef]);
+  const state = reactStately.useDatePickerState(props);
+  const { groupProps, fieldProps, buttonProps, calendarProps } = reactAria.useDatePicker(
+    { ...props, isOpen: defaultOpen },
+    state,
+    ref
+  );
+  const clearState = () => {
+    state.setValue(null);
+    if (onClear !== void 0) {
+      onClear();
+    }
+  };
+  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, picker === "single" ? /* @__PURE__ */ React__default["default"].createElement(StyledDatePicker, {
+    ref: refs
+  }, children === void 0 && /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInput, {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default["default"].createElement(StyledRangePickerInputContent, null, /* @__PURE__ */ React__default["default"].createElement(TextField, {
+    ...fieldProps
+  }), /* @__PURE__ */ React__default["default"].createElement(designSystemFlex.Flex, {
+    css: { marginLeft: "auto" }
+  }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
+    ...buttonProps
+  }, /* @__PURE__ */ React__default["default"].createElement(designSystemIcons.IconCalendarBlank, null))))), children !== void 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default["default"].createElement(FieldButton, {
+    ...buttonProps,
+    customButton: true
+  }, children)), state.isOpen && /* @__PURE__ */ React__default["default"].createElement(Popover, {
+    triggerRef: ref,
+    state,
+    placement: "bottom start"
+  }, /* @__PURE__ */ React__default["default"].createElement(DatePickerBody, {
+    ...calendarProps,
+    defaultValue,
+    predefinedRanges,
+    visibleMonths,
+    onClear: clearState,
+    minDate,
+    maxDate,
+    clearString
+  }))) : /* @__PURE__ */ React__default["default"].createElement(DatePickerBody, {
+    ...calendarProps,
+    defaultValue,
+    predefinedRanges,
+    visibleMonths,
+    onClear: onClear !== void 0 ? clearState : void 0,
+    minDate,
+    maxDate,
+    clearString: onClear !== void 0 ? clearString : void 0
+  }));
+});
+
+const StyledCalendar = designSystemStitches.styled(designSystem.Primitive.div, {});
+const Calendar = React__default["default"].forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledCalendar, {
+  ref: forwardRef
+}, picker === "range" ? /* @__PURE__ */ React__default["default"].createElement(RangePicker, {
+  defaultValue,
+  ...props
+}) : /* @__PURE__ */ React__default["default"].createElement(DatePicker, {
+  defaultValue,
+  ...props,
+  picker
+})));
+
+exports.Calendar = Calendar;
+//# sourceMappingURL=main.js.map