@mirohq/design-system-calendar 0.4.7 → 1.1.0

package/dist/module.js

@@ -1,146 +1,287 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Primitive } from '@mirohq/design-system-primitive';
-import { styled } from '@mirohq/design-system-stitches';
-import * as React from 'react';
-import React__default, { useRef, useCallback } from 'react';
-import { useDialog, usePopover, Overlay, DismissButton, useButton, useFocusRing, mergeProps, useDateFormatter, useCalendarCell, useLocale, useCalendarGrid, useDateRangePicker, useRangeCalendar, useCalendar, useDatePicker } from 'react-aria';
-import { isSameMonth, isSameDay, getDayOfWeek, isWeekend, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
-import { useDateRangePickerState, useRangeCalendarState, useCalendarState, useDatePickerState } from 'react-stately';
-import { Flex } from '@mirohq/design-system-flex';
-import { Button as Button$1 } from '@mirohq/design-system-button';
-import { FloatingLabel } from '@mirohq/design-system-base-form';
-import { IconChevronLeft, IconChevronRight, IconCross, IconCalendarBlank } from '@mirohq/design-system-icons';
+import React, { createContext, useState, useMemo, useCallback, useContext, useRef, useEffect } from 'react';
+import { useDateFormatter, useCalendarCell, useFocusRing, mergeProps, useLocale, useCalendarGrid, useCalendar, useRangeCalendar, I18nProvider } from 'react-aria';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { Trigger as Trigger$1, Content as Content$1 } from '@radix-ui/react-popover';
+import { useFormFieldContext, FloatingLabel } from '@mirohq/design-system-base-form';
+import { IconCross, IconCalendarBlank, IconChevronLeft, IconChevronRight } from '@mirohq/design-system-icons';
 import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
+import { stringAttrValue, booleanify } from '@mirohq/design-system-utils';
+import { Primitive } from '@mirohq/design-system-primitive';
+import { styled, theme } from '@mirohq/design-system-stitches';
 import { textFieldStyles, actionButtonStyles } from '@mirohq/design-system-base-text-field';
-import { focus as focus$1 } from '@mirohq/design-system-styles';
-import { Tooltip } from '@mirohq/design-system-tooltip';
+import { focus } from '@mirohq/design-system-styles';
 import { BaseButton } from '@mirohq/design-system-base-button';
+import { Tooltip } from '@mirohq/design-system-tooltip';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCalendarState, useRangeCalendarState } from 'react-stately';
+import { isSameMonth, isSameDay, isToday, getLocalTimeZone, getWeeksInMonth, createCalendar } from '@internationalized/date';
+import { Flex } from '@mirohq/design-system-flex';
+import { Heading } from '@mirohq/design-system-typography';
+import { IconButton } from '@mirohq/design-system-icon-button';
+import { Button } from '@mirohq/design-system-button';
 
-const Popover = (props) => {
-  const ref = React.useRef(null);
-  const { state, children } = props;
-  const { dialogProps } = useDialog(props, ref);
-  const { popoverProps, underlayProps } = usePopover(
+const StyledPlaceholder = styled(Primitive.span, {
+  ...textFieldStyles.base.placeholder.old,
+  padding: "0 $50"
+});
+const StyledValue$1 = styled(Primitive.span, {
+  padding: "0 $50"
+});
+const StyledIconContainer = styled(Primitive.span, {
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  color: "$text-neutrals-subtle"
+});
+const StyledTrigger = styled(BaseButton, {
+  display: "inline-flex",
+  gap: "$50",
+  justifyContent: "space-between",
+  alignItems: "center",
+  height: "$10",
+  padding: "0 $100",
+  minWidth: "230px",
+  ...textFieldStyles.variants.idle,
+  _hover: textFieldStyles.variants.hovered,
+  '&:disabled, &[aria-disabled="true"]': {
+    ...textFieldStyles.variants.disabled,
+    color: "$text-neutrals-disabled"
+  },
+  variants: {
+    v1: {
+      true: {
+        ...textFieldStyles.v1.idle,
+        ...focus.css(textFieldStyles.v1.focused)
+      },
+      false: {
+        ...focus.css(textFieldStyles.variants.focused)
+      }
+    },
+    withClearButton: {
+      true: {
+        paddingRight: "calc($100 + $400)"
+        // initial left padding + clear button width + gap
+      }
+    }
+  }
+});
+const StyledCustomTrigger = styled(BaseButton, {
+  width: "100%",
+  height: "unset",
+  padding: "0",
+  backgroundColor: "$transparent",
+  border: "none",
+  cursor: "pointer"
+});
+
+const StyledClearAction = styled(BaseButton, {
+  position: "absolute",
+  top: 0,
+  bottom: 0,
+  right: "calc($100 + 1px)",
+  // to compensate border width
+  margin: "auto",
+  ...actionButtonStyles,
+  '&:disabled, &[aria-disabled="true"]': {
+    color: "$icon-neutrals-disabled"
+  }
+});
+
+const ClearAction = React.forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    StyledClearAction,
     {
-      ...props,
-      popoverRef: ref
+      ...restProps,
+      ref: forwardRef,
+      "aria-label": ariaLabel != null ? ariaLabel : label,
+      children: /* @__PURE__ */ jsx(IconCross, {})
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip.Content, { children: label })
+] }));
+
+const CalendarContext = createContext({});
+const CalendarProvider = ({
+  children,
+  visibleMonths = 1,
+  value: valueProp,
+  defaultValue: defaultValueProp,
+  onValueChange,
+  open: openProp,
+  defaultOpen: defaultOpenProp,
+  onOpen,
+  onClose,
+  ...restProps
+}) => {
+  var _a;
+  const [immediateSave, setImmediateSave] = useState(false);
+  const [internalCalendarValue, setInternalCalendarValue] = useState(valueProp != null ? valueProp : defaultValueProp);
+  const visibleDuration = useMemo(
+    () => ({
+      months: visibleMonths
+    }),
+    [visibleMonths]
+  );
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValueProp,
+    onChange: onValueChange
+  });
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpenProp,
+    onChange: (state) => {
+      if (state) {
+        onOpen == null ? void 0 : onOpen();
+      } else {
+        onClose == null ? void 0 : onClose();
+      }
+    }
+  });
+  const onCalendarDateClick = useCallback(
+    (value2) => {
+      if (immediateSave) {
+        setInternalCalendarValue(value2);
+      } else {
+        setValue(value2);
+        setOpen(false);
+      }
     },
-    state
+    [setValue, setOpen, immediateSave, setInternalCalendarValue]
+  );
+  const onSaveClick = () => {
+    setValue(internalCalendarValue);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ 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__ */ jsxs(Overlay, { children: [
-    /* @__PURE__ */ jsx("div", { ...underlayProps }),
-    /* @__PURE__ */ jsxs("div", { ...popoverProps, ref, children: [
-      /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
-      /* @__PURE__ */ jsx("div", { ...dialogProps, ref, children }),
-      /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
-    ] })
-  ] });
 };
+const useCalendarContext = () => useContext(CalendarContext);
 
-const StyledGroup = styled(Primitive.div, {
-  position: "relative"
-});
-const StyledPicker = styled(Primitive.div, {});
-
-const StyledPredefinedRanges = styled(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.forwardRef(
+  ({
+    id,
+    "aria-describedby": ariaDescribedBy,
+    placeholder,
+    asChild = false,
+    clearable = true,
+    clearLabel,
+    onClear,
+    children,
+    ...restProps
+  }, forwardRef) => {
+    const [v1] = useNewDesignLanguage();
+    const { value, setValue, disabled, ariaDisabled } = useCalendarContext();
+    const { formElementId, ariaDescribedBy: formFieldContextDescribedBy } = useFormFieldContext();
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Trigger$1, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Trigger$1, { ref: forwardRef, asChild: true, children: /* @__PURE__ */ jsxs(
+        StyledTrigger,
+        {
+          id: id != null ? id : formElementId,
+          "aria-describedby": stringAttrValue(
+            ariaDescribedBy,
+            formFieldContextDescribedBy
+          ),
+          v1,
+          withClearButton: clearButtonVisible,
+          disabled,
+          "aria-disabled": ariaDisabled,
+          ...restProps,
+          children: [
+            value != null ? /* @__PURE__ */ jsx(StyledValue$1, { children }) : /* @__PURE__ */ jsx(StyledPlaceholder, { children: placeholder }),
+            !clearButtonVisible && /* @__PURE__ */ jsx(StyledIconContainer, { children: /* @__PURE__ */ jsx(IconCalendarBlank, { weight: "thin", size: "small" }) })
+          ]
+        }
+      ) }),
+      clearButtonVisible && /* @__PURE__ */ jsx(
+        ClearAction,
+        {
+          label: clearLabel,
+          onPress: onClearHandler,
+          disabled: disabled != null ? disabled : booleanify(ariaDisabled)
+        }
+      )
+    ] });
   }
-});
-
-const PredefinedRanges = React__default.forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ jsx(StyledPredefinedRanges, { ref: forwardRef, children: range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ jsx(
-  Button$1,
-  {
-    variant: "ghost",
-    size: "medium",
-    type: "button",
-    onClick: () => onClick(date),
-    children: date.label
-  },
-  i
-)) }));
+);
 
-const StyledBody = styled(Primitive.div, {
-  display: "inline-block",
-  background: "$background-neutrals"
-});
-const StyledBodyContent = styled(Flex, {
-  margin: "0 auto",
-  boxShadow: "$100",
+const StyledContent = styled(Content$1, {
+  zIndex: "$calendar",
   background: "$background-neutrals",
-  borderRadius: "$100"
+  borderRadius: "$100",
+  boxShadow: "$100"
 });
-const StyledGridContent = styled(Flex, {
-  paddingBottom: "$200",
-  "& [data-left-calendar]": {
-    paddingLeft: "$200",
-    paddingRight: "$100"
-  },
-  "& [data-right-calendar]": {
-    paddingLeft: "$100",
-    paddingRight: "$200"
-  }
-});
-const StyledBodyContentLeft = styled(Primitive.div, {
-  paddingLeft: "$200",
-  paddingRight: "$100"
+const StyledCalendarBody = styled(Flex, {
+  padding: "$200"
 });
+const StyledGridContent = styled(Flex, {});
+const StyledBodyContentLeft = styled(Primitive.div, {});
 const StyledBodyContentRight = styled(Primitive.div, {
-  paddingLeft: "$100",
-  paddingRight: "$200"
+  paddingLeft: "$200"
 });
 const StyledClearContent = styled(Primitive.div, {
+  display: "flex",
+  gap: "$100",
   padding: "$200",
   borderTop: "1px solid $border-neutrals"
 });
 
-const StyledButton = styled(Primitive.button, {
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer",
-  color: "$text-neutrals",
-  "&[disabled]": {
-    cursor: "not-allowed"
-  }
-});
-
-const Button = React__default.forwardRef((props, forwardRef) => {
-  const { buttonProps } = useButton(props, forwardRef);
-  const { focusProps } = useFocusRing();
-  const { children } = props;
-  return /* @__PURE__ */ jsx(StyledButton, { ...mergeProps(buttonProps, focusProps), ref: forwardRef, children });
+const StyledHeaderTitle = styled(Heading, {
+  margin: 0,
+  flex: "2",
+  textAlign: "center"
 });
-
-const StyledHeaderTitle = styled(Flex, {
-  justifyContent: "center",
-  flex: "3",
-  color: "$text-neutrals"
+const StyledHeaderPlaceholder = styled("div", {
+  height: "$8",
+  // to compensate icon buttons' width and space between 2 calendars
+  width: "calc($8 * 2 + $space$200)"
 });
 const StyledHeader = styled(Flex, {
-  padding: "0 $200",
-  color: "$text-neutrals"
+  color: "$text-neutrals",
+  height: "$8",
+  alignItems: "center",
+  justifyContent: "space-between"
 });
 
+const HeaderButton = React.forwardRef(({ isDisabled, children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(
+  IconButton,
+  {
+    ...restProps,
+    size: "medium",
+    disabled: isDisabled,
+    ref: forwardRef,
+    children
+  }
+));
+
 const Header = ({
   state,
   prevButtonProps,
@@ -153,133 +294,139 @@ const Header = ({
     timeZone: state.timeZone
   });
   return /* @__PURE__ */ jsxs(StyledHeader, { children: [
-    /* @__PURE__ */ jsx(Button, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
-    /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
+    /* @__PURE__ */ jsx(HeaderButton, { ...prevButtonProps, children: /* @__PURE__ */ jsx(IconChevronLeft, {}) }),
+    /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
       state.visibleRange.start.toDate(state.timeZone)
-    ) }) }),
-    visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledHeaderTitle, { children: /* @__PURE__ */ jsx("h2", { children: monthDateFormatter.format(
-      state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
-    ) }) }),
-    /* @__PURE__ */ jsx(Button, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
+    ) }),
+    visibleMonths === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StyledHeaderPlaceholder, {}),
+      /* @__PURE__ */ jsx(StyledHeaderTitle, { level: 2, styledAs: "h3", children: monthDateFormatter.format(
+        state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(HeaderButton, { ...nextButtonProps, children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
   ] });
 };
 
+const StyledCell = styled(Primitive.td, {
+  square: "$10",
+  marginTop: "$50",
+  position: "relative"
+});
 const StyledCellContent = styled(Primitive.div, {
-  square: "28px",
+  cursor: "pointer",
+  square: "$10",
   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]": {
+  ...focus.css({
+    top: "0",
+    left: "0",
+    position: "absolute",
+    zIndex: "1",
+    boxShadow: "$focus-v1",
+    outline: "1px solid transparent"
+  }),
+  '&[aria-disabled="true"]': {
     textDecoration: "line-through",
-    color: "$text-neutrals-disabled"
-  }
-});
-const StyledCell = styled(Primitive.div, {
-  square: "36px",
-  cursor: "pointer",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    background: "$background-primary-subtle-hover",
-    ["& ".concat(StyledCellContent)]: {
-      background: "$background-primary-prominent-hover",
-      color: "$text-primary-inverted"
-    }
-  },
-  "&[data-selected]": {
-    background: "$background-primary-subtle-hover"
+    color: "$text-neutrals-disabled",
+    cursor: "default"
   },
-  "&[data-selection-start]": {
-    borderBottomLeftRadius: "$lg",
-    borderTopLeftRadius: "$lg"
-  },
-  "&[data-selection-end]": {
-    borderBottomRightRadius: "$lg",
-    borderTopRightRadius: "$lg"
-  },
-  "&[data-hidden]": {
-    display: "none"
+  '&:not([aria-disabled="true"])': {
+    _hover: {
+      backgroundColor: "$background-neutrals-subtle-hover",
+      color: "$text-neutrals"
+    }
   },
-  "&[data-disabled]": {
-    cursor: "not-allowed",
-    "&:hover": {
-      backgroundColor: "$transparent",
-      ["& ".concat(StyledCellContent)]: {
-        backgroundColor: "$transparent",
-        color: "$text-neutrals-disabled"
+  variants: {
+    today: {
+      true: {
+        backgroundColor: "$background-neutrals-subtle-hover",
+        color: "$text-neutrals"
+      }
+    },
+    selected: {
+      true: {
+        backgroundColor: "$background-primary-prominent-selected",
+        color: "$text-neutrals-inverted",
+        '&:not([aria-disabled="true"])': {
+          _hover: {
+            backgroundColor: "$background-primary-prominent-hover",
+            color: "$text-neutrals-inverted"
+          }
+        }
+      }
+    },
+    range: {
+      middle: {
+        backgroundColor: "$background-primary-subtle-selected",
+        color: "$text-neutrals",
+        borderRadius: 0,
+        '&:not([aria-disabled="true"])': {
+          _hover: {
+            backgroundColor: "$background-primary-subtle-hover"
+          }
+        }
+      },
+      start: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      end: {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      }
+    },
+    hidden: {
+      true: {
+        display: "none"
       }
     }
   }
 });
 
-const Cell = React__default.forwardRef(
-  (props, forwardRef) => {
-    const { state, date, currentMonth } = props;
-    const ref = useRef(null);
-    const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
-    const isOutsideMonth = !isSameMonth(currentMonth, date);
-    const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.start) : isSelected;
-    const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.end) : isSelected;
-    const { locale } = useLocale();
-    const dayOfWeek = getDayOfWeek(date, locale);
-    const isWeekendDay = isWeekend(date, locale);
-    const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date.day === 1);
-    const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
-    const { focusProps } = useFocusRing();
-    return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
-      StyledCell,
-      {
-        ...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__ */ jsx(
-          StyledCellContent,
-          {
-            "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
-            "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
-            "data-disabled": isDisabled ? "" : void 0,
-            "data-today": isToday(date, getLocalTimeZone()) ? "" : void 0,
-            "data-weekend": isWeekendDay ? "" : void 0,
-            children: formattedDate
-          }
-        )
-      }
-    ) });
-  }
-);
+const Cell = (props) => {
+  const { state, date, currentMonth } = props;
+  const ref = useRef(null);
+  const { cellProps, buttonProps, isSelected, formattedDate } = useCalendarCell(
+    { date },
+    state,
+    ref
+  );
+  const isOutsideMonth = !isSameMonth(currentMonth, date);
+  const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.start) : isSelected;
+  const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.end) : isSelected;
+  const { focusProps } = useFocusRing();
+  const isRange = isSelected && (!isSelectionStart || !isSelectionEnd);
+  const rangeVariant = isRange ? isSelectionStart ? "start" : isSelectionEnd ? "end" : "middle" : void 0;
+  return /* @__PURE__ */ jsx(StyledCell, { ...cellProps, children: /* @__PURE__ */ jsx(
+    StyledCellContent,
+    {
+      ...mergeProps(buttonProps, focusProps),
+      ref,
+      selected: isSelected && (isSelectionStart || isSelectionEnd),
+      today: isToday(date, getLocalTimeZone()),
+      range: rangeVariant,
+      hidden: isOutsideMonth,
+      children: formattedDate
+    }
+  ) });
+};
 
 const StyledGrid = styled(Primitive.table, {
   borderCollapse: "separate",
   borderSpacing: " 0 $50"
 });
 const StyledDays = styled(Primitive.th, {
-  square: "36px",
-  color: "$text-neutrals"
+  height: "$10",
+  color: "$text-neutrals-subtle",
+  fontWeight: "$regular",
+  paddingTop: "$50"
 });
 
-const Grid = React__default.forwardRef(
+const Grid = React.forwardRef(
   (props, forwardRef) => {
     const { locale } = useLocale();
     const { state, offset = {} } = props;
@@ -306,411 +453,282 @@ const Grid = React__default.forwardRef(
   }
 );
 
-const StyledPlaceholder = styled(Primitive.span, {
-  ...textFieldStyles.base.placeholder.old,
-  padding: "0 $50"
-});
-const StyledValue = styled(Primitive.span, {
-  padding: "0 $50"
-});
-const StyledTriggerContainer = styled(Primitive.div, {
-  position: "relative"
-});
-const StyledTrigger = styled(Primitive.button, {
-  all: "unset",
-  display: "inline-flex",
-  gap: "$50",
-  justifyContent: "space-between",
-  alignItems: "center",
-  height: "$10",
-  padding: "0 $100",
-  minWidth: "230px",
-  ...textFieldStyles.variants.idle,
-  "& svg": {
-    color: "$text-neutrals-subtle",
-    square: "22px"
-  },
-  _hover: textFieldStyles.variants.hovered,
-  variants: {
-    v1: {
-      true: {
-        ...textFieldStyles.v1.idle,
-        ...focus$1.css(textFieldStyles.v1.focused)
-      },
-      false: {
-        ...focus$1.css(textFieldStyles.variants.focused)
-      }
-    },
-    withClearButton: {
-      true: {
-        paddingRight: "calc($100 + $400)"
-        // initial left padding + clear button width + gap
+const CONTENT_OFFSET = parseInt(theme.space[50]);
+const SharedContent = React.forwardRef(
+  ({ calendarProps, prevButtonProps, nextButtonProps, state }, forwardRef) => {
+    const { visibleDuration } = useCalendarContext();
+    return /* @__PURE__ */ jsxs(
+      StyledCalendarBody,
+      {
+        direction: "column",
+        ...calendarProps,
+        ref: forwardRef,
+        children: [
+          /* @__PURE__ */ jsx(
+            Header,
+            {
+              state,
+              prevButtonProps,
+              nextButtonProps,
+              visibleMonths: visibleDuration.months
+            }
+          ),
+          /* @__PURE__ */ jsxs(StyledGridContent, { children: [
+            /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
+            visibleDuration.months === 2 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
+          ] })
+        ]
       }
-    }
-  }
-});
-const StyledCustomTrigger = styled(Primitive.button, {
-  width: "100%",
-  height: "unset",
-  padding: "0",
-  backgroundColor: "$transparent",
-  border: "none",
-  cursor: "pointer"
-});
-
-const StyledClearButton = styled(BaseButton, {
-  position: "absolute",
-  top: 0,
-  bottom: 0,
-  right: "calc($100 + 1px)",
-  // to compensate border width
-  margin: "auto",
-  ...actionButtonStyles
-});
-
-const ClearButton = React__default.forwardRef(({ "aria-label": ariaLabel, label, ...restProps }, forwardRef) => /* @__PURE__ */ jsxs(Tooltip, { children: [
-  /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-    StyledClearButton,
-    {
-      ...restProps,
-      ref: forwardRef,
-      "aria-label": ariaLabel != null ? ariaLabel : label,
-      children: /* @__PURE__ */ jsx(IconCross, {})
-    }
-  ) }),
-  /* @__PURE__ */ jsx(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.forwardRef(
-  ({
-    placeholder,
-    displayValue,
-    stateValue,
-    asChild = false,
-    clearable = true,
-    clearActionLabel,
-    onClear,
-    ...restProps
-  }, forwardRef) => {
-    const [v1] = useNewDesignLanguage();
-    const { buttonProps } = useButton(
-      restProps,
-      forwardRef
     );
-    const { children } = restProps;
-    if (asChild) {
-      return /* @__PURE__ */ jsx(StyledCustomTrigger, { ...buttonProps, children });
-    }
-    const valueToDisplay = displayValue != null ? displayValue : dateToString(stateValue);
-    const clearButtonVisible = clearable && clearActionLabel !== void 0 && valueToDisplay != null;
-    return /* @__PURE__ */ jsxs(StyledTriggerContainer, { children: [
-      /* @__PURE__ */ jsxs(
-        StyledTrigger,
-        {
-          "data-custom": "",
-          ...buttonProps,
-          v1,
-          ref: forwardRef,
-          withClearButton: clearButtonVisible,
-          children: [
-            valueToDisplay != null ? /* @__PURE__ */ jsx(StyledValue, { children: valueToDisplay }) : /* @__PURE__ */ jsx(StyledPlaceholder, { children: placeholder }),
-            !clearButtonVisible && /* @__PURE__ */ jsx(IconCalendarBlank, { weight: "thin" })
-          ]
-        }
-      ),
-      clearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { label: clearActionLabel, onPress: onClear })
-    ] });
   }
 );
-
-const RangePicker = React__default.forwardRef((props, forwardRef) => {
+const DatePickerContent = () => {
+  const { locale } = useLocale();
   const {
-    predefinedRanges,
+    calendarValue,
+    visibleDuration,
     minDate,
     maxDate,
-    visibleMonths,
-    clearButtonText,
-    children,
-    defaultOpen,
-    onClear,
-    label,
-    placeholder,
-    displayValue
-  } = props;
-  const state = useDateRangePickerState(
-    props
+    onCalendarDateClick
+  } = useCalendarContext();
+  const state = useCalendarState({
+    value: calendarValue,
+    visibleDuration,
+    minValue: minDate,
+    maxValue: maxDate,
+    autoFocus: true,
+    onChange: onCalendarDateClick,
+    locale,
+    createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    {},
+    state
   );
-  const ref = useRef(null);
-  const { locale } = useLocale();
-  const { groupProps, labelProps, buttonProps } = useDateRangePicker(
+  return /* @__PURE__ */ jsx(
+    SharedContent,
     {
-      ...props,
-      isOpen: defaultOpen,
-      label
-    },
-    state,
-    ref
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      state
+    }
   );
-  const change = (value) => {
-    state.setValue(value);
-    state.close();
-  };
-  const rangeState = useRangeCalendarState({
-    ...props,
-    visibleDuration: visibleMonths,
+};
+const RangePickerContent = () => {
+  const { locale } = useLocale();
+  const {
+    calendarValue,
+    visibleDuration,
+    minDate,
+    maxDate,
+    onCalendarDateClick
+  } = useCalendarContext();
+  const ref = useRef(null);
+  const state = useRangeCalendarState({
+    value: calendarValue,
+    visibleDuration,
     minValue: minDate,
     maxValue: maxDate,
     autoFocus: true,
-    onFocusChange: focus,
-    onChange: change,
+    onChange: onCalendarDateClick,
     locale,
     createCalendar
   });
   const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(
-    props,
-    rangeState,
+    {},
+    state,
     ref
   );
-  const rangeClick = useCallback(
-    (selectedRange) => {
-      if (selectedRange.range !== void 0) {
-        state.setValue(selectedRange.range);
-        rangeState.setValue(selectedRange.range);
+  return /* @__PURE__ */ jsx(
+    SharedContent,
+    {
+      ref,
+      calendarProps,
+      prevButtonProps,
+      nextButtonProps,
+      state
+    }
+  );
+};
+const Content = React.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__ */ jsx(
+      StyledContent,
+      {
+        ...restProps,
+        ref: forwardRef,
+        side,
+        sideOffset,
+        align,
+        alignOffset,
+        collisionPadding,
+        avoidCollisions,
+        sticky,
+        hideWhenDetached,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+          picker === "single" ? /* @__PURE__ */ jsx(DatePickerContent, {}) : /* @__PURE__ */ jsx(RangePickerContent, {}),
+          children != null && /* @__PURE__ */ jsx(StyledClearContent, { children })
+        ] })
       }
-    },
-    [rangeState, state]
+    );
+  }
+);
+
+const StyledValue = styled(Primitive.span, {});
+
+const DEFAULT_FORMAT = {
+  day: "2-digit",
+  month: "short",
+  year: "numeric"
+};
+function formatDate(date, formatter, timeZone) {
+  return formatter.format(date.toDate(timeZone));
+}
+function formatValue(value, formatter, timeZone) {
+  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, timeZone), " - ").concat(formatDate(
+      value.end,
+      formatter,
+      timeZone
+    ));
+  }
+  return formatDate(value, formatter, timeZone);
+}
+const Value = React.forwardRef(({ format = DEFAULT_FORMAT, ...restProps }, forwardRef) => {
+  const { value } = useCalendarContext();
+  const timeZone = useMemo(getLocalTimeZone, [format]);
+  const formatWithTimeZone = useMemo(
+    () => ({ ...format, timeZone }),
+    [format, timeZone]
   );
+  const dateFormatter = useDateFormatter(formatWithTimeZone);
+  const valueToDisplay = formatValue(value, dateFormatter, timeZone);
+  return /* @__PURE__ */ jsx(StyledValue, { ref: forwardRef, ...restProps, children: valueToDisplay });
+});
+
+const ClearButton = React.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__ */ jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxs(StyledGroup, { ...groupProps, ref, children: [
-      label !== void 0 && // todo refactoring: use Form Field context
-      /* @__PURE__ */ jsx(FloatingLabel, { floating: true, ...labelProps, children: label }),
-      /* @__PURE__ */ jsx(
-        Trigger,
-        {
-          ...buttonProps,
-          placeholder,
-          displayValue,
-          stateValue: state.value,
-          clearable: clearableTrigger,
-          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
-          onClear: clearableTrigger ? onClearHandler : void 0
-        }
-      )
-    ] }),
-    children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
-    state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxs(StyledBodyContent, { children: [
-      predefinedRanges !== void 0 && /* @__PURE__ */ jsx(
-        PredefinedRanges,
-        {
-          range: predefinedRanges,
-          onClick: rangeClick
-        }
-      ),
-      /* @__PURE__ */ jsxs(Flex, { direction: "column", ...calendarProps, children: [
-        /* @__PURE__ */ jsx(
-          Header,
-          {
-            state: rangeState,
-            prevButtonProps,
-            nextButtonProps,
-            visibleMonths
-          }
-        ),
-        /* @__PURE__ */ jsxs(StyledGridContent, { children: [
-          /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state: rangeState }) }),
-          visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(
-            Grid,
-            {
-              onChange: change,
-              state: rangeState,
-              offset: { months: 1 }
-            }
-          ) })
-        ] }),
-        onClear !== void 0 && /* @__PURE__ */ jsx(StyledClearContent, { children: /* @__PURE__ */ jsx(
-          Button$1,
-          {
-            size: "medium",
-            type: "button",
-            onClick: onClearHandler,
-            disabled: rangeState.value === null,
-            children: clearButtonText
-          }
-        ) })
-      ] })
-    ] }) }) })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...restProps,
+      ref: forwardRef,
+      variant: "ghost",
+      size: "medium",
+      onClick: onClearHandler,
+      disabled: value === null,
+      children
+    }
+  );
 });
 
-const DatePickerBody = React__default.forwardRef((props, forwardRef) => {
-  const {
-    predefinedRanges,
-    visibleMonths,
-    onClear,
-    minDate,
-    maxDate,
-    clearButtonText
-  } = props;
-  const { locale } = useLocale();
-  const state = useCalendarState({
-    ...props,
-    visibleDuration: visibleMonths,
-    minValue: minDate,
-    maxValue: maxDate,
-    locale,
-    createCalendar
-  });
-  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
-    props,
-    state
-  );
-  const dateClick = useCallback(
-    (selectedRange) => {
-      if (selectedRange.date !== void 0)
-        state.setValue(selectedRange.date);
-    },
-    [state]
+const SaveButton = React.forwardRef(({ onSave, children, ...restProps }, forwardRef) => {
+  const { setImmediateSave, onSaveClick } = useCalendarContext();
+  useEffect(() => {
+    setImmediateSave(true);
+    return () => setImmediateSave(false);
+  }, [setImmediateSave]);
+  const onSaveHandler = () => {
+    onSaveClick();
+    if (onSave !== void 0) {
+      onSave();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref: forwardRef,
+      ...restProps,
+      variant: "primary",
+      size: "medium",
+      onClick: onSaveHandler,
+      children
+    }
   );
-  return /* @__PURE__ */ jsx(StyledBody, { ref: forwardRef, children: /* @__PURE__ */ jsxs(StyledBodyContent, { ...calendarProps, children: [
-    predefinedRanges !== void 0 && /* @__PURE__ */ jsx(PredefinedRanges, { range: predefinedRanges, onClick: dateClick }),
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(
-        Header,
-        {
-          state,
-          prevButtonProps,
-          nextButtonProps,
-          visibleMonths
-        }
-      ),
-      /* @__PURE__ */ jsxs(StyledGridContent, { children: [
-        /* @__PURE__ */ jsx(StyledBodyContentLeft, { children: /* @__PURE__ */ jsx(Grid, { state }) }),
-        visibleMonths !== void 0 && /* @__PURE__ */ jsx(StyledBodyContentRight, { children: /* @__PURE__ */ jsx(Grid, { state, offset: { months: 1 } }) })
-      ] }),
-      onClear !== void 0 && /* @__PURE__ */ jsx(StyledClearContent, { children: /* @__PURE__ */ jsx(
-        Button$1,
-        {
-          size: "medium",
-          onClick: onClear,
-          disabled: state.value === null,
-          children: clearButtonText
-        }
-      ) })
-    ] })
-  ] }) });
 });
 
-const DatePicker = React__default.forwardRef((props, forwardRef) => {
-  const {
+const StyledCalendar = styled(Primitive.div, {
+  position: "relative"
+});
+
+const Root = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const { open, setOpen } = useCalendarContext();
+  const { label, isFloatingLabel } = useFormFieldContext();
+  return /* @__PURE__ */ jsx(RadixPopover.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(StyledCalendar, { ref: forwardRef, ...restProps, children: [
+    label !== null && isFloatingLabel && /* @__PURE__ */ jsx(FloatingLabel, { floating: true, size: "medium", children: label }),
+    children
+  ] }) });
+});
+const Calendar = React.forwardRef(
+  ({
     picker,
-    predefinedRanges,
-    visibleMonths,
     defaultValue,
+    value,
+    onValueChange,
+    defaultOpen,
+    open,
+    onClose,
+    onOpen,
+    locale,
+    visibleMonths,
     minDate,
     maxDate,
+    disabled,
+    "aria-disabled": ariaDisabled,
     children,
-    clearButtonText,
-    defaultOpen,
-    onClear,
-    label,
-    placeholder,
-    displayValue
-  } = props;
-  const ref = useRef(null);
-  const state = useDatePickerState(props);
-  const { groupProps, buttonProps, calendarProps, labelProps } = 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__ */ jsx(Fragment, { children: picker === "single" ? /* @__PURE__ */ jsxs(StyledPicker, { ref: forwardRef, children: [
-    children === void 0 && /* @__PURE__ */ jsxs(StyledGroup, { ...groupProps, ref, children: [
-      label !== void 0 && // todo refactoring: use Form Field context
-      /* @__PURE__ */ jsx(FloatingLabel, { floating: true, ...labelProps, children: label }),
-      /* @__PURE__ */ jsx(
-        Trigger,
-        {
-          ...buttonProps,
-          placeholder,
-          displayValue,
-          stateValue: state.value,
-          clearable: clearableTrigger,
-          clearActionLabel: clearableTrigger ? clearButtonText : void 0,
-          onClear: clearableTrigger ? onClearHandler : void 0
-        }
-      )
-    ] }),
-    children !== void 0 && /* @__PURE__ */ jsx("div", { ...groupProps, ref, children: /* @__PURE__ */ jsx(Trigger, { ...buttonProps, asChild: true, children }) }),
-    state.isOpen && /* @__PURE__ */ jsx(Popover, { triggerRef: ref, state, placement: "bottom start", children: /* @__PURE__ */ 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__ */ 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 = styled(Primitive.div, {});
-const Calendar = React__default.forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledCalendar, { ref: forwardRef, children: picker === "range" ? /* @__PURE__ */ jsx(RangePicker, { defaultValue, ...props }) : /* @__PURE__ */ jsx(
-  DatePicker,
-  {
-    defaultValue,
-    ...props,
-    picker
+      defaultOpen,
+      open,
+      onClose,
+      onOpen,
+      disabled,
+      ariaDisabled
+    };
+    return /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(CalendarProvider, { ...providerProps, children: /* @__PURE__ */ jsx(Root, { ...props, ref: forwardRef, children }) }) });
   }
-) }));
+);
+Calendar.Trigger = Trigger;
+Calendar.Content = Content;
+Calendar.Value = Value;
+Calendar.ClearButton = ClearButton;
+Calendar.SaveButton = SaveButton;
 
 export { Calendar };
 //# sourceMappingURL=module.js.map