@mirohq/design-system-calendar 0.4.6 → 1.0.0

package/dist/main.js

@@ -3,21 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var designSystemPrimitive = require('@mirohq/design-system-primitive');
-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 designSystemButton = require('@mirohq/design-system-button');
+var RadixPopover = require('@radix-ui/react-popover');
 var designSystemBaseForm = require('@mirohq/design-system-base-form');
 var designSystemIcons = require('@mirohq/design-system-icons');
 var designSystemExperiments = require('@mirohq/design-system-experiments');
+var designSystemUtils = require('@mirohq/design-system-utils');
+var designSystemPrimitive = require('@mirohq/design-system-primitive');
+var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemBaseTextField = require('@mirohq/design-system-base-text-field');
 var designSystemStyles = require('@mirohq/design-system-styles');
-var designSystemTooltip = require('@mirohq/design-system-tooltip');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
+var designSystemTooltip = require('@mirohq/design-system-tooltip');
+var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var reactStately = require('react-stately');
+var date = require('@internationalized/date');
+var designSystemFlex = require('@mirohq/design-system-flex');
+var designSystemButton = require('@mirohq/design-system-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,73 +42,205 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var RadixPopover__namespace = /*#__PURE__*/_interopNamespace(RadixPopover);
 
-const Popover = (props) => {
-  const ref = React__namespace.useRef(null);
-  const { state, children } = props;
-  const { dialogProps } = reactAria.useDialog(props, ref);
-  const { popoverProps, underlayProps } = reactAria.usePopover(
+const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
+  padding: "0 $50"
+});
+const StyledValue$1 = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
+  padding: "0 $50"
+});
+const StyledTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  display: "inline-flex",
+  gap: "$50",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: "$10",
+  padding: "0 $100",
+  minWidth: "230px",
+  ...designSystemBaseTextField.textFieldStyles.variants.idle,
+  "& svg": {
+    color: "$text-neutrals-subtle",
+    square: "22px"
+  },
+  _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
+  variants: {
+    v1: {
+      true: {
+        ...designSystemBaseTextField.textFieldStyles.v1.idle,
+        ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
+      },
+      false: {
+        ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
+      }
+    },
+    withClearButton: {
+      true: {
+        paddingRight: "calc($100 + $400)"
+        // initial left padding + clear button width + gap
+      }
+    }
+  }
+});
+const StyledCustomTrigger = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  width: "100%",
+  height: "unset",
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer"
+});
+
+const StyledClearAction = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: "calc($100 + 1px)",
+  // to compensate border width
+  margin: "auto",
+  ...designSystemBaseTextField.actionButtonStyles
+});
+
+const ClearAction = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledClearAction,
     {
-      ...props,
-      popoverRef: ref
+      ...restProps,
+      ref: forwardRef,
+      "aria-label": ariaLabel != null ? ariaLabel : label,
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
+    }
+  ) }),
+  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
+] }));
+
+const CalendarContext = React.createContext({});
+const CalendarProvider = ({
+  children,
+  visibleMonths = 1,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  onValueChange,
+  open: openProp,
+  defaultOpen: defaultOpenProp,
+  onOpen,
+  onClose,
+  ...restProps
+}) => {
+  var _a;
+  const [immediateSave, setImmediateSave] = React.useState(false);
+  const [internalCalendarValue, setInternalCalendarValue] = React.useState(valueProp != null ? valueProp : defaultValueProp);
+  const visibleDuration = React.useMemo(
+    () => ({
+      months: visibleMonths
+    }),
+    [visibleMonths]
+  );
+  const [value, setValue] = reactUseControllableState.useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange
+  });
+  const [open = false, setOpen] = reactUseControllableState.useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpenProp,
+    onChange: (state) => {
+      if (state) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const onCalendarDateClick = React.useCallback(
+    (value2) => {
+      if (immediateSave) {
+        setInternalCalendarValue(value2);
+      } else {
+        setValue(value2);
+        setOpen(false);
+      }
     },
-    state
+    [setValue, setOpen, immediateSave, setInternalCalendarValue]
+  );
+  const onSaveClick = () => {
+    setValue(internalCalendarValue);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CalendarContext.Provider,
+    {
+      value: {
+        ...restProps,
+        visibleDuration,
+        value,
+        setValue,
+        open,
+        setOpen,
+        onCalendarDateClick,
+        setImmediateSave,
+        onSaveClick,
+        // value should not be undefined otherwise react-aria calendar will complain in console
+        calendarValue: (_a = immediateSave ? internalCalendarValue : value) != null ? _a : null
+      },
+      children
+    }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactAria.Overlay, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ...underlayProps }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ...dialogProps, ref, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close })
-    ] })
-  ] });
 };
+const useCalendarContext = () => React.useContext(CalendarContext);
 
-const StyledGroup = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  position: "relative"
-});
-const StyledPicker = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
-
-const StyledPredefinedRanges = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  display: "flex",
-  flexDirection: "column",
-  borderRight: "1px solid $border-neutrals",
-  padding: "$300 $200 0 $200",
-  "& button": {
-    backgroundColor: "$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 Trigger = React__default["default"].forwardRef(
+  ({
+    id,
+    "aria-describedby": ariaDescribedBy,
+    placeholder,
+    asChild = false,
+    clearable = true,
+    clearLabel,
+    onClear,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
+    const { value, setValue } = useCalendarContext();
+    const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = designSystemBaseForm.useFormFieldContext();
+    if (asChild) {
+      return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { asChild: true, ...restProps, children }) });
     }
+    const onClearHandler = () => {
+      setValue(void 0);
+      if (onClear !== void 0) {
+        onClear();
+      }
+    };
+    const clearButtonVisible = clearable && value != null && clearLabel !== void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(RadixPopover.Trigger, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        StyledTrigger,
+        {
+          id: id != null ? id : formElementId,
+          "aria-describedby": designSystemUtils.stringAttrValue(
+            ariaDescribedBy,
+            formFieldContextDescribedBy
+          ),
+          v1,
+          withClearButton: clearButtonVisible,
+          ...restProps,
+          children: [
+            value != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
+            !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
+          ]
+        }
+      ) }),
+      clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearAction, { label: clearLabel, onPress: onClearHandler })
+    ] });
   }
-});
-
-const PredefinedRanges = React__default["default"].forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledPredefinedRanges, { ref: forwardRef, children: range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ jsxRuntime.jsx(
-  designSystemButton.Button,
-  {
-    variant: "ghost",
-    size: "medium",
-    type: "button",
-    onClick: () => onClick(date),
-    children: date.label
-  },
-  i
-)) }));
+);
 
-const StyledBody = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+const StyledContent = designSystemStitches.styled(RadixPopover.Content, {
+  zIndex: "$calendar",
   display: "inline-block",
   background: "$background-neutrals"
 });
@@ -135,11 +270,23 @@ const StyledBodyContentRight = designSystemStitches.styled(designSystemPrimitive
   paddingRight: "$200"
 });
 const StyledClearContent = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  display: "flex",
+  gap: "$100",
   padding: "$200",
   borderTop: "1px solid $border-neutrals"
 });
 
-const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
+const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
+  justifyContent: "center",
+  flex: "3",
+  color: "$text-neutrals"
+});
+const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
+  padding: "0 $200",
+  color: "$text-neutrals"
+});
+
+const StyledHeaderButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
   padding: "0",
   backgroundColor: "$transparent",
   border: "none",
@@ -150,21 +297,18 @@ const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive
   }
 });
 
-const Button = React__default["default"].forwardRef((props, forwardRef) => {
+const HeaderButton = React__default["default"].forwardRef((props, forwardRef) => {
   const { buttonProps } = reactAria.useButton(props, forwardRef);
   const { focusProps } = reactAria.useFocusRing();
   const { children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledButton, { ...reactAria.mergeProps(buttonProps, focusProps), ref: forwardRef, children });
-});
-
-const StyledHeaderTitle = designSystemStitches.styled(designSystemFlex.Flex, {
-  justifyContent: "center",
-  flex: "3",
-  color: "$text-neutrals"
-});
-const StyledHeader = designSystemStitches.styled(designSystemFlex.Flex, {
-  padding: "0 $200",
-  color: "$text-neutrals"
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StyledHeaderButton,
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps),
+      ref: forwardRef,
+      children
+    }
+  );
 });
 
 const Header = ({
@@ -179,14 +323,14 @@ const Header = ({
     timeZone: state.timeZone
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronLeft, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
       state.visibleRange.start.toDate(state.timeZone)
     ) }) }),
-    visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
+    visibleMonths === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: monthDateFormatter.format(
       state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
+    /* @__PURE__ */ jsxRuntime.jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconChevronRight, {}) })
   ] });
 };
 
@@ -256,45 +400,43 @@ const StyledCell = designSystemStitches.styled(designSystemPrimitive.Primitive.d
   }
 });
 
-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__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
-      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,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          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,
-            children: formattedDate
-          }
-        )
-      }
-    ) });
-  }
-);
+const Cell = (props) => {
+  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__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    StyledCell,
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps),
+      ref,
+      "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,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        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,
+          children: formattedDate
+        }
+      )
+    }
+  ) });
+};
 
 const StyledGrid = designSystemStitches.styled(designSystemPrimitive.Primitive.table, {
   borderCollapse: "separate",
@@ -332,411 +474,269 @@ const Grid = React__default["default"].forwardRef(
   }
 );
 
-const StyledPlaceholder = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  ...designSystemBaseTextField.textFieldStyles.base.placeholder.old,
-  padding: "0 $50"
-});
-const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
-  padding: "0 $50"
-});
-const StyledTriggerContainer = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
-  position: "relative"
-});
-const StyledTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
-  all: "unset",
-  display: "inline-flex",
-  gap: "$50",
-  justifyContent: "space-between",
-  alignItems: "center",
-  height: "$10",
-  padding: "0 $100",
-  minWidth: "230px",
-  ...designSystemBaseTextField.textFieldStyles.variants.idle,
-  "& svg": {
-    color: "$text-neutrals-subtle",
-    square: "22px"
-  },
-  _hover: designSystemBaseTextField.textFieldStyles.variants.hovered,
-  variants: {
-    v1: {
-      true: {
-        ...designSystemBaseTextField.textFieldStyles.v1.idle,
-        ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.v1.focused)
-      },
-      false: {
-        ...designSystemStyles.focus.css(designSystemBaseTextField.textFieldStyles.variants.focused)
-      }
-    },
-    withClearButton: {
-      true: {
-        paddingRight: "calc($100 + $400)"
-        // initial left padding + clear button width + gap
-      }
-    }
-  }
-});
-const StyledCustomTrigger = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
-  width: "100%",
-  height: "unset",
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer"
-});
-
-const StyledClearButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
-  position: "absolute",
-  top: 0,
-  bottom: 0,
-  right: "calc($100 + 1px)",
-  // to compensate border width
-  margin: "auto",
-  ...designSystemBaseTextField.actionButtonStyles
-});
-
-const ClearButton = React__default["default"].forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
-  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    StyledClearButton,
-    {
-      ...restProps,
-      ref: forwardRef,
-      "aria-label": ariaLabel != null ? ariaLabel : label,
-      children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
-    }
-  ) }),
-  /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: label })
-] }));
-
-function dateToString(value) {
-  if (value == null) {
-    return void 0;
-  }
-  if ("start" in value) {
-    if (value.start == null || value.end == null) {
-      return void 0;
-    }
-    return "".concat(value.start, " - ").concat(value.end);
-  }
-  return value.toString();
-}
-const Trigger = React__default["default"].forwardRef(
-  ({
-    placeholder,
-    displayValue,
-    stateValue,
-    asChild = false,
-    clearable = true,
-    clearActionLabel,
-    onClear,
-    ...restProps
-  }, forwardRef) => {
-    const [v1] = designSystemExperiments.useNewDesignLanguage();
-    const { buttonProps } = reactAria.useButton(
-      restProps,
-      forwardRef
-    );
-    const { children } = restProps;
-    if (asChild) {
-      return /* @__PURE__ */ jsxRuntime.jsx(StyledCustomTrigger, { ...buttonProps, children });
-    }
-    const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
-    const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(StyledTriggerContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        StyledTrigger,
+const CONTENT_OFFSET = parseInt(designSystemStitches.theme.space[50]);
+const SharedContent = React__default["default"].forwardRef(
+  ({ calendarProps, prevButtonProps, nextButtonProps, children, state }, forwardRef) => {
+    const { visibleDuration } = useCalendarContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContent, { ...calendarProps, ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Header,
         {
-          "data-custom": "",
-          ...buttonProps,
-          v1,
-          ref: forwardRef,
-          withClearButton: clearButtonVisible,
-          children: [
-            valueToDisplay != null ? /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsxRuntime.jsx(StyledPlaceholder, { children: placeholder }),
-            !clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCalendarBlank, { weight: "thin" })
-          ]
+          state,
+          prevButtonProps,
+          nextButtonProps,
+          visibleMonths: visibleDuration.months
         }
       ),
-      clearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
-    ] });
+      /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
+        visibleDuration.months === 2 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
+      ] }),
+      children != null && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children })
+    ] }) });
   }
 );
-
-const RangePicker = React__default["default"].forwardRef((props, forwardRef) => {
+const DatePickerContent = ({ children }) => {
+  const { locale } = reactAria.useLocale();
   const {
-    predefinedRanges,
+    calendarValue,
+    visibleDuration,
     minDate,
     maxDate,
-    visibleMonths,
-    clearButtonText,
-    children,
-    defaultOpen,
-    onClear,
-    label,
-    placeholder,
-    displayValue
-  } = props;
-  const state = reactStately.useDateRangePickerState(
-    props
+    onCalendarDateClick
+  } = useCalendarContext();
+  const state = reactStately.useCalendarState({
+    value: calendarValue,
+    visibleDuration,
+    minValue: minDate,
+    maxValue: maxDate,
+    autoFocus: true,
+    onChange: onCalendarDateClick,
+    locale,
+    createCalendar: date.createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
+    {},
+    state
   );
-  const ref = React.useRef(null);
-  const { locale } = reactAria.useLocale();
-  const { groupProps, labelProps, buttonProps } = reactAria.useDateRangePicker(
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SharedContent,
     {
-      ...props,
-      isOpen: defaultOpen,
-      label
-    },
-    state,
-    ref
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      state,
+      children
+    }
   );
-  const change = (value) => {
-    state.setValue(value);
-    state.close();
-  };
-  const rangeState = reactStately.useRangeCalendarState({
-    ...props,
-    visibleDuration: visibleMonths,
+};
+const RangePickerContent = ({ children }) => {
+  const { locale } = reactAria.useLocale();
+  const {
+    calendarValue,
+    visibleDuration,
+    minDate,
+    maxDate,
+    onCalendarDateClick
+  } = useCalendarContext();
+  const ref = React.useRef(null);
+  const state = reactStately.useRangeCalendarState({
+    value: calendarValue,
+    visibleDuration,
     minValue: minDate,
     maxValue: maxDate,
     autoFocus: true,
-    onFocusChange: focus,
-    onChange: change,
+    onChange: onCalendarDateClick,
     locale,
     createCalendar: date.createCalendar
   });
   const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useRangeCalendar(
-    props,
-    rangeState,
+    {},
+    state,
     ref
   );
-  const rangeClick = React.useCallback(
-    (selectedRange) => {
-      if (selectedRange.range !== void 0) {
-        state.setValue(selectedRange.range);
-        rangeState.setValue(selectedRange.range);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SharedContent,
+    {
+      ref,
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      state,
+      children
+    }
+  );
+};
+const Content = React__default["default"].forwardRef(
+  ({
+    side = "bottom",
+    sideOffset = CONTENT_OFFSET,
+    align = "start",
+    alignOffset = 0,
+    collisionPadding = 0,
+    avoidCollisions = true,
+    sticky = "partial",
+    hideWhenDetached = true,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const { picker, open } = useCalendarContext();
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      StyledContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        collisionPadding,
+        avoidCollisions,
+        sticky,
+        hideWhenDetached,
+        children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsx(DatePickerContent, { children }) : /* @__PURE__ */ jsxRuntime.jsx(RangePickerContent, { children })
       }
-    },
-    [rangeState, state]
+    );
+  }
+);
+
+const StyledValue = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {});
+
+const DEFAULT_FORMAT = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric"
+};
+const DEFAULT_TIMEZONE = "UTC";
+function formatDate(date, formatter) {
+  return formatter.format(date.toDate(DEFAULT_TIMEZONE));
+}
+function formatValue(value, formatter) {
+  if (value == null) {
+    return void 0;
+  }
+  if ("start" in value) {
+    if (value.start == null || value.end == null) {
+      return void 0;
+    }
+    return "".concat(formatDate(value.start, formatter), " - ").concat(formatDate(
+      value.end,
+      formatter
+    ));
+  }
+  return formatDate(value, formatter);
+}
+const Value = React__default["default"].forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
+  const { value } = useCalendarContext();
+  const formatWithTimeZone = React.useMemo(
+    () => ({ ...format, DEFAULT_TIMEZONE }),
+    [format]
   );
+  const dateFormatter = reactAria.useDateFormatter(formatWithTimeZone);
+  const valueToDisplay = formatValue(value, dateFormatter);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
+});
+
+const ClearButton = React__default["default"].forwardRef(({ onClear, children, ...restProps }, forwardRef) => {
+  const { value, setValue } = useCalendarContext();
   const onClearHandler = () => {
-    state.setValue({ start: null, end: null });
+    setValue(void 0);
     if (onClear !== void 0) {
       onClear();
-      state.close();
     }
   };
-  const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
-      label !== void 0 && // todo refactoring: use Form Field context
-      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Trigger,
-        {
-          ...buttonProps,
-          placeholder,
-          displayValue,
-          stateValue: state.value,
-          clearable: clearableTrigger,
-          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
-          onClear: clearableTrigger ? onClearHandler : void 0
-        }
-      )
-    ] }),
-    children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
-    state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { children: [
-      predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        PredefinedRanges,
-        {
-          range: predefinedRanges,
-          onClick: rangeClick
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", ...calendarProps, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Header,
-          {
-            state: rangeState,
-            prevButtonProps,
-            nextButtonProps,
-            visibleMonths
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state: rangeState }) }),
-          visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Grid,
-            {
-              onChange: change,
-              state: rangeState,
-              offset: { months: 1 }
-            }
-          ) })
-        ] }),
-        onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          designSystemButton.Button,
-          {
-            size: "medium",
-            type: "button",
-            onClick: onClearHandler,
-            disabled: rangeState.value === null,
-            children: clearButtonText
-          }
-        ) })
-      ] })
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystemButton.Button,
+    {
+      ...restProps,
+      ref: forwardRef,
+      variant: "ghost",
+      size: "medium",
+      onClick: onClearHandler,
+      disabled: value === null,
+      children
+    }
+  );
 });
 
-const DatePickerBody = React__default["default"].forwardRef((props, forwardRef) => {
-  const {
-    predefinedRanges,
-    visibleMonths,
-    onClear,
-    minDate,
-    maxDate,
-    clearButtonText
-  } = props;
-  const { locale } = reactAria.useLocale();
-  const state = reactStately.useCalendarState({
-    ...props,
-    visibleDuration: visibleMonths,
-    minValue: minDate,
-    maxValue: maxDate,
-    locale,
-    createCalendar: date.createCalendar
-  });
-  const { calendarProps, prevButtonProps, nextButtonProps } = reactAria.useCalendar(
-    props,
-    state
-  );
-  const dateClick = React.useCallback(
-    (selectedRange) => {
-      if (selectedRange.date !== void 0)
-        state.setValue(selectedRange.date);
-    },
-    [state]
+const SaveButton = React__default["default"].forwardRef(({ onSave, children, ...restProps }, forwardRef) => {
+  const { setImmediateSave, onSaveClick } = useCalendarContext();
+  React.useEffect(() => {
+    setImmediateSave(true);
+    return () => setImmediateSave(false);
+  }, [setImmediateSave]);
+  const onSaveHandler = () => {
+    onSaveClick();
+    if (onSave !== void 0) {
+      onSave();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystemButton.Button,
+    {
+      ref: forwardRef,
+      ...restProps,
+      variant: "primary",
+      size: "medium",
+      onClick: onSaveHandler,
+      children
+    }
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledBodyContent, { ...calendarProps, children: [
-    predefinedRanges !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystemFlex.Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Header,
-        {
-          state,
-          prevButtonProps,
-          nextButtonProps,
-          visibleMonths
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(StyledGridContent, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state }) }),
-        visibleMonths !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { state, offset: { months: 1 } }) })
-      ] }),
-      onClear !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledClearContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        designSystemButton.Button,
-        {
-          size: "medium",
-          onClick: onClear,
-          disabled: state.value === null,
-          children: clearButtonText
-        }
-      ) })
-    ] })
-  ] }) });
 });
 
-const DatePicker = React__default["default"].forwardRef((props, forwardRef) => {
-  const {
+const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
+  position: "relative"
+});
+
+const Root = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { open, setOpen } = useCalendarContext();
+  const { label, isFloatingLabel } = designSystemBaseForm.useFormFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCalendar, { ref: forwardRef, ...restProps, children: [
+    label !== null && isFloatingLabel && /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, size: "medium", children: label }),
+    children
+  ] }) });
+});
+const Calendar = React__default["default"].forwardRef(
+  ({
     picker,
-    predefinedRanges,
-    visibleMonths,
     defaultValue,
+    value,
+    onValueChange,
+    defaultOpen,
+    open,
+    onClose,
+    onOpen,
+    locale,
+    visibleMonths,
     minDate,
     maxDate,
     children,
-    clearButtonText,
-    defaultOpen,
-    onClear,
-    label,
-    placeholder,
-    displayValue
-  } = props;
-  const ref = React.useRef(null);
-  const state = reactStately.useDatePickerState(props);
-  const { groupProps, buttonProps, calendarProps, labelProps } = reactAria.useDatePicker(
-    {
-      ...props,
-      isOpen: defaultOpen,
-      label
-    },
-    state,
-    ref
-  );
-  const onClearHandler = () => {
-    state.setValue(null);
-    if (onClear !== void 0) {
-      onClear();
-    }
-  };
-  const clearableTrigger = clearButtonText !== void 0 && onClear !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxRuntime.jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxRuntime.jsxs(StyledGroup, { ...groupProps, ref, children: [
-      label !== void 0 && // todo refactoring: use Form Field context
-      /* @__PURE__ */ jsxRuntime.jsx(designSystemBaseForm.FloatingLabel, { floating: true, ...labelProps, children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Trigger,
-        {
-          ...buttonProps,
-          placeholder,
-          displayValue,
-          stateValue: state.value,
-          clearable: clearableTrigger,
-          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
-          onClear: clearableTrigger ? onClearHandler : void 0
-        }
-      )
-    ] }),
-    children !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
-    state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsxRuntime.jsx(
-      DatePickerBody,
-      {
-        ...calendarProps,
-        defaultValue,
-        predefinedRanges,
-        visibleMonths,
-        onClear: onClear !== void 0 ? onClearHandler : void 0,
-        minDate,
-        maxDate,
-        clearButtonText: onClear !== void 0 ? clearButtonText : void 0,
-        ref: forwardRef
-      }
-    ) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-    DatePickerBody,
-    {
-      ...calendarProps,
-      ref: forwardRef,
+    ...props
+  }, forwardRef) => {
+    const providerProps = {
+      picker,
       defaultValue,
-      predefinedRanges,
+      value,
+      onValueChange,
       visibleMonths,
-      onClear: onClear !== void 0 ? onClearHandler : void 0,
       minDate,
       maxDate,
-      clearButtonText: onClear !== void 0 ? clearButtonText : void 0
-    }
-  ) });
-});
-
-const StyledCalendar = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
-const Calendar = React__default["default"].forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledCalendar, { ref: forwardRef, children: picker === "range" ? /* @__PURE__ */ jsxRuntime.jsx(RangePicker, { defaultValue, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
-  DatePicker,
-  {
-    defaultValue,
-    ...props,
-    picker
+      defaultOpen,
+      open,
+      onClose,
+      onOpen
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(reactAria.I18nProvider, { locale, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsxRuntime.jsx(Root, { ...props, ref: forwardRef, children }) }) });
   }
-) }));
+);
+Calendar.Trigger = Trigger;
+Calendar.Content = Content;
+Calendar.Value = Value;
+Calendar.ClearButton = ClearButton;
+Calendar.SaveButton = SaveButton;
 
 exports.Calendar = Calendar;
 //# sourceMappingURL=main.js.map