@saas-ui/date-picker/dist/index.js

Chakra UI - Date Picker Component

'use client'
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  BuddhistCalendar: () => import_date9.BuddhistCalendar,
  CalendarDate: () => import_date9.CalendarDate,
  CalendarDateTime: () => import_date9.CalendarDateTime,
  CopticCalendar: () => import_date9.CopticCalendar,
  DateFormatter: () => import_date9.DateFormatter,
  DateInput: () => DateInput,
  DatePicker: () => DatePicker,
  DatePickerAnchor: () => DatePickerAnchor,
  DatePickerCalendar: () => DatePickerCalendar,
  DatePickerContainer: () => DatePickerContainer,
  DatePickerDialog: () => DatePickerDialog,
  DatePickerEndTimeField: () => DatePickerEndTimeField,
  DatePickerInput: () => DatePickerInput,
  DatePickerModal: () => DatePickerModal,
  DatePickerStartTimeField: () => DatePickerStartTimeField,
  DatePickerStatic: () => DatePickerStatic,
  DatePickerTimeField: () => DatePickerTimeField,
  DatePickerTrigger: () => DatePickerTrigger,
  DateRangeInput: () => DateRangeInput,
  DateRangePicker: () => DateRangePicker,
  DateRangePickerCalendar: () => DateRangePickerCalendar,
  DateRangePickerContainer: () => DateRangePickerContainer,
  DateRangePickerDialog: () => DateRangePickerDialog,
  DateRangePickerTimeField: () => DateRangePickerTimeField,
  DateTimeInput: () => DateTimeInput,
  EthiopicAmeteAlemCalendar: () => import_date9.EthiopicAmeteAlemCalendar,
  EthiopicCalendar: () => import_date9.EthiopicCalendar,
  GregorianCalendar: () => import_date9.GregorianCalendar,
  HebrewCalendar: () => import_date9.HebrewCalendar,
  IndianCalendar: () => import_date9.IndianCalendar,
  InputSegment: () => InputSegment,
  IslamicCivilCalendar: () => import_date9.IslamicCivilCalendar,
  IslamicTabularCalendar: () => import_date9.IslamicTabularCalendar,
  IslamicUmalquraCalendar: () => import_date9.IslamicUmalquraCalendar,
  JapaneseCalendar: () => import_date9.JapaneseCalendar,
  PersianCalendar: () => import_date9.PersianCalendar,
  SegmentedInput: () => SegmentedInput,
  TaiwanCalendar: () => import_date9.TaiwanCalendar,
  Time: () => import_date9.Time,
  ZonedDateTime: () => import_date9.ZonedDateTime,
  createCalendar: () => import_date9.createCalendar,
  endOfMonth: () => import_date9.endOfMonth,
  endOfWeek: () => import_date9.endOfWeek,
  endOfYear: () => import_date9.endOfYear,
  getDayOfWeek: () => import_date9.getDayOfWeek,
  getHoursInDay: () => import_date9.getHoursInDay,
  getLocalTimeZone: () => import_date9.getLocalTimeZone,
  getMinimumDayInMonth: () => import_date9.getMinimumDayInMonth,
  getMinimumMonthInYear: () => import_date9.getMinimumMonthInYear,
  getWeeksInMonth: () => import_date9.getWeeksInMonth,
  isEqualDay: () => import_date9.isEqualDay,
  isEqualMonth: () => import_date9.isEqualMonth,
  isEqualYear: () => import_date9.isEqualYear,
  isSameDay: () => import_date9.isSameDay,
  isSameMonth: () => import_date9.isSameMonth,
  isSameYear: () => import_date9.isSameYear,
  isToday: () => import_date9.isToday,
  isWeekday: () => import_date9.isWeekday,
  isWeekend: () => import_date9.isWeekend,
  maxDate: () => import_date9.maxDate,
  minDate: () => import_date9.minDate,
  now: () => import_date9.now,
  parseAbsolute: () => import_date9.parseAbsolute,
  parseAbsoluteToLocal: () => import_date9.parseAbsoluteToLocal,
  parseDate: () => import_date9.parseDate,
  parseDateTime: () => import_date9.parseDateTime,
  parseTime: () => import_date9.parseTime,
  parseZonedDateTime: () => import_date9.parseZonedDateTime,
  startOfMonth: () => import_date9.startOfMonth,
  startOfWeek: () => import_date9.startOfWeek,
  startOfYear: () => import_date9.startOfYear,
  toCalendar: () => import_date9.toCalendar,
  toCalendarDate: () => import_date9.toCalendarDate,
  toCalendarDateTime: () => import_date9.toCalendarDateTime,
  toLocalTimeZone: () => import_date9.toLocalTimeZone,
  toTime: () => import_date9.toTime,
  toTimeZone: () => import_date9.toTimeZone,
  toZoned: () => import_date9.toZoned,
  today: () => import_date9.today,
  useDatePickerInput: () => useDatePickerInput,
  useDateRangePickerInput: () => useDateRangePickerInput
});
module.exports = __toCommonJS(index_exports);

// src/date-picker.tsx
var import_react2 = require("react");
var import_datepicker = require("@react-stately/datepicker");
var import_datepicker2 = require("@react-aria/datepicker");
var import_i18n = require("@react-aria/i18n");
var import_react3 = require("@chakra-ui/react");

// src/date-picker-context.tsx
var React = __toESM(require("react"));
var import_calendar = require("@react-aria/calendar");
var import_utils = require("@chakra-ui/utils");
var import_date2 = require("@internationalized/date");

// src/date-utils.ts
var import_date = require("@internationalized/date");
var isDateInRange = (date, range) => {
  if (!date || !range) {
    return false;
  }
  return !!((range == null ? void 0 : range.start) && date.compare(range.start) >= 0 && (range == null ? void 0 : range.end) && date.compare(range.end) <= 0);
};

// src/date-picker-context.tsx
var import_react = require("@chakra-ui/react");
var [DatePickerStylesProvider, useDatePickerStyles] = (0, import_utils.createContext)({
  name: "DatePickerStylesContext"
});
var [DatePickerProvider, useContext] = (0, import_utils.createContext)({
  name: "DatePickerProvider"
});
var useDatePickerContext = () => {
  const context = useContext();
  if ("dateRange" in context.state) {
    throw new Error(
      "useDatePickerContext must be used within a DatePickerProvider"
    );
  }
  return context;
};
var useDateRangePickerContext = () => {
  const context = useContext();
  if (!("dateRange" in context.state)) {
    throw new Error(
      "useDateRangePickerContext must be used within a DateRangePicker"
    );
  }
  return context;
};
var useDatePickerDialog = () => {
  const { dialogProps, state, datePickerRef } = useContext();
  React.useEffect(() => {
    if (state.isOpen) {
      setTimeout(() => {
        var _a;
        const parent = (_a = datePickerRef.current) == null ? void 0 : _a.parentNode;
        const el = (parent == null ? void 0 : parent.querySelector("[data-selected]")) || (parent == null ? void 0 : parent.querySelector("[data-today]")) || (parent == null ? void 0 : parent.querySelector(
          'td button:not([aria-disabled="true"])'
        ));
        el == null ? void 0 : el.focus();
      }, 0);
    }
  }, [datePickerRef, state.isOpen]);
  return {
    dialogProps: {
      ...dialogProps
    }
  };
};
var useDatePickerInput = () => {
  const popover = (0, import_react.usePopoverContext)();
  const { onClick, ...triggerProps } = popover.getTriggerProps();
  const context = useDatePickerContext();
  const { state, locale, groupProps, datePickerRef } = context;
  const buttonProps = {
    ...context.buttonProps,
    ...triggerProps
  };
  return {
    fieldProps: context.fieldProps,
    groupProps,
    buttonProps,
    datePickerRef,
    locale,
    state
  };
};
var useDateRangePickerInput = () => {
  const popover = (0, import_react.usePopoverContext)();
  const { onClick, ...triggerProps } = popover.getTriggerProps();
  const context = useDateRangePickerContext();
  const { state, locale, groupProps, datePickerRef } = context;
  const buttonProps = {
    ...context.buttonProps,
    ...triggerProps
  };
  return {
    groupProps,
    buttonProps,
    datePickerRef,
    locale,
    state,
    startFieldProps: context.startFieldProps,
    endFieldProps: context.endFieldProps
  };
};
var useCalendarCell = (props, state, ref) => {
  const context = useContext();
  const { date, currentMonth } = props;
  const {
    cellProps,
    buttonProps,
    isSelected,
    isInvalid,
    formattedDate,
    isOutsideVisibleRange,
    isUnavailable
  } = (0, import_calendar.useCalendarCell)({ date }, state, ref);
  const highlightedRange = "highlightedRange" in state && state.highlightedRange;
  const dayOfWeek = (0, import_date2.getDayOfWeek)(props.date, context.locale);
  const isSelectionStart = isSelected && highlightedRange && (0, import_date2.isSameDay)(date, highlightedRange.start);
  const isSelectionEnd = isSelected && highlightedRange && (0, import_date2.isSameDay)(date, highlightedRange.end);
  const isRangeStart = isSelected && (dayOfWeek === 0 || date.day === 1);
  const isRangeEnd = isSelected && (dayOfWeek === 6 || date.day === currentMonth.calendar.getDaysInMonth(currentMonth));
  const isRange = isSelected && highlightedRange && isDateInRange(date, highlightedRange);
  return {
    cellProps,
    buttonProps: {
      ...buttonProps,
      ["data-selected"]: (0, import_utils.dataAttr)(isSelected),
      ["data-invalid"]: (0, import_utils.dataAttr)(isInvalid),
      ["data-selection-start"]: (0, import_utils.dataAttr)(isSelectionStart != null ? isSelectionStart : void 0),
      ["data-selection-end"]: (0, import_utils.dataAttr)(isSelectionEnd != null ? isSelectionEnd : void 0),
      ["data-range-start"]: (0, import_utils.dataAttr)(isRangeStart),
      ["data-range-end"]: (0, import_utils.dataAttr)(isRangeEnd),
      ["data-highlighted"]: (0, import_utils.dataAttr)(isRange != null ? isRange : void 0),
      ["data-today"]: (0, import_utils.dataAttr)((0, import_date2.isSameDay)(date, (0, import_date2.now)(context.timeZone))),
      ["data-outside-visible-range"]: (0, import_utils.dataAttr)(isOutsideVisibleRange),
      ["data-unavailable"]: (0, import_utils.dataAttr)(isUnavailable)
    },
    isSelected,
    isInvalid,
    formattedDate
  };
};

// src/date-picker-styles.ts
var import_styled_system = require("@chakra-ui/styled-system");
var import_theme_tools = require("@chakra-ui/theme-tools");
var parts = [
  "dialog",
  "calendar",
  "header",
  "title",
  "weekday",
  "day",
  "dayButton",
  "dayLabel"
];
var { definePartsStyle, defineMultiStyleConfig } = (0, import_styled_system.createMultiStyleConfigHelpers)(parts);
var baseStyle = definePartsStyle((props) => {
  const { colorScheme: c } = props;
  const selected = {
    bg: `${c}.500`,
    color: "white",
    _dark: {
      bg: `${c}.500`,
      color: "white"
    }
  };
  return {
    dialog: {},
    calendar: {},
    header: {
      alignItems: "center"
    },
    title: {
      fontWeight: "bold",
      fontSize: "sm",
      flex: 1,
      px: 3
    },
    weekday: {
      fontWeight: "normal",
      color: "muted",
      fontSize: "sm",
      h: 10
    },
    day: {
      py: "1px",
      position: "relative"
    },
    dayButton: {
      borderRadius: "md",
      fontSize: "sm",
      px: 3,
      h: 8,
      outline: "none",
      _focus: {
        outline: "none"
      },
      _focusVisible: {
        outline: "none",
        boxShadow: "outline",
        borderRadius: "md"
      },
      "&[data-today]": {
        bg: "blackAlpha.50",
        _dark: {
          bg: "whiteAlpha.50"
        }
      },
      _hover: {
        bg: "blackAlpha.100",
        borderRadius: "md",
        _dark: {
          bg: "whiteAlpha.100"
        }
      },
      _selected: selected,
      _highlighted: {
        bg: `${c}.100`,
        borderRadius: "none",
        color: "black",
        _dark: {
          bg: (0, import_theme_tools.transparentize)(`${c}.400`, 0.2)(props.theme),
          color: "white"
        },
        "&[data-range-start]": {
          borderStartRadius: "md"
        },
        "&[data-range-end]": {
          borderEndRadius: "md"
        },
        "&[data-selection-start]": {
          borderStartRadius: "md",
          color: "white",
          _before: {
            content: '""',
            position: "absolute",
            inset: "1px",
            borderRadius: "md",
            ...selected
          }
        },
        "&[data-selection-end]": {
          borderEndRadius: "md",
          color: "white",
          _before: {
            content: '""',
            position: "absolute",
            inset: "1px",
            borderRadius: "md",
            ...selected
          }
        }
      },
      _disabled: {
        color: "muted",
        cursor: "not-allowed",
        _hover: {
          bg: "transparent"
        }
      },
      "&[data-week-start], &[data-month-start]": { borderStartRadius: "md" },
      "&[data-week-end], &[data-month-end]": {
        borderEndRadius: "md"
      }
    },
    dayLabel: {
      position: "relative",
      zIndex: 1
    },
    year: {
      py: 2,
      px: 3,
      fontSize: "sm",
      borderRadius: "md",
      transitionProperty: "common",
      transitionDuration: "normal"
    }
  };
});
var datePickerStyleConfig = defineMultiStyleConfig({
  defaultProps: {
    colorScheme: "primary"
  },
  baseStyle
});

// src/date-picker.tsx
var import_date3 = require("@internationalized/date");
var import_utils2 = require("@chakra-ui/utils");
var import_react_dom = require("react-dom");
var import_jsx_runtime = require("react/jsx-runtime");
var DatePickerContainer = (props) => {
  var _a;
  const {
    children,
    value: valueProp,
    minValue,
    maxValue,
    defaultValue,
    onChange,
    closeOnSelect,
    createCalendar: createCalendar3,
    ...rest
  } = props;
  const {
    locale: localeProp,
    timeZone = (0, import_date3.getLocalTimeZone)() || "UTC",
    hourCycle = 12,
    firstDayOfWeek
  } = props;
  const { locale } = (0, import_i18n.useLocale)();
  const theme = (0, import_react3.useTheme)();
  const styleConfig = (_a = theme.components["SuiDatePicker"]) != null ? _a : datePickerStyleConfig;
  const styles = (0, import_react3.useMultiStyleConfig)("SuiDatePicker", {
    styleConfig,
    ...props
  });
  const state = (0, import_datepicker.useDatePickerState)({
    value: valueProp,
    minValue,
    maxValue,
    defaultValue,
    onChange,
    shouldCloseOnSelect: closeOnSelect,
    ...rest
  });
  const datePickerRef = (0, import_react2.useRef)(null);
  const {
    groupProps,
    labelProps,
    fieldProps,
    buttonProps,
    dialogProps,
    descriptionProps,
    errorMessageProps,
    calendarProps,
    isInvalid,
    validationDetails,
    validationErrors
  } = (0, import_datepicker2.useDatePicker)(
    {
      ["aria-label"]: "Date Picker",
      value: state.value,
      minValue,
      maxValue,
      onChange: state.setValue,
      ...rest
    },
    state,
    datePickerRef
  );
  const context = {
    locale: localeProp || locale,
    state,
    hourCycle,
    timeZone,
    firstDayOfWeek,
    groupProps,
    labelProps,
    fieldProps,
    buttonProps,
    dialogProps,
    calendarProps,
    descriptionProps,
    errorMessageProps,
    datePickerRef,
    isInvalid,
    validationDetails,
    validationErrors,
    createCalendar: createCalendar3
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePickerProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePickerStylesProvider, { value: styles, children: (0, import_utils2.runIfFn)(children, state) }) });
};
var DatePicker = (props) => {
  const {
    children,
    arrowPadding,
    arrowShadowColor,
    arrowSize,
    autoFocus,
    boundary,
    closeDelay,
    closeOnBlur,
    closeOnEsc,
    computePositionOnMount,
    defaultIsOpen,
    direction,
    eventListeners,
    flip,
    gutter,
    isLazy = false,
    lazyBehavior = "keepMounted",
    modifiers,
    offset,
    openDelay,
    placement,
    preventOverflow,
    returnFocusOnClose,
    strategy,
    trigger,
    ...containerProps
  } = props;
  const popoverProps = {
    arrowPadding,
    arrowShadowColor,
    arrowSize,
    autoFocus,
    boundary,
    closeDelay,
    closeOnBlur,
    closeOnEsc,
    computePositionOnMount,
    defaultIsOpen,
    direction,
    eventListeners,
    flip,
    gutter,
    isLazy,
    lazyBehavior,
    modifiers,
    offset,
    openDelay,
    placement,
    preventOverflow,
    returnFocusOnClose,
    strategy,
    trigger
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePickerContainer, { ...containerProps, defaultOpen: defaultIsOpen, children: (state) => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_react3.Popover,
      {
        ...popoverProps,
        isOpen: state.isOpen,
        onOpen: () => (0, import_react_dom.flushSync)(() => state.setOpen(true)),
        onClose: () => (0, import_react_dom.flushSync)(() => state.setOpen(false)),
        children
      }
    );
  } });
};
var DatePickerStatic = (props) => {
  const { children, ...rest } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DatePickerContainer, { ...rest, children });
};

// src/date-picker-dialog.tsx
var import_utils3 = require("@chakra-ui/utils");
var import_react4 = require("@chakra-ui/react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var DatePickerTrigger = import_react4.PopoverTrigger;
var DatePickerAnchor = import_react4.PopoverAnchor;
var DatePickerDialog = (props) => {
  const { children, hideArrow = true, ...rest } = props;
  const { dialogProps } = useDatePickerDialog();
  const styles = useDatePickerStyles();
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    import_react4.PopoverContent,
    {
      ...rest,
      ...dialogProps,
      width: "auto",
      minW: "300px",
      sx: styles.dialog,
      className: (0, import_utils3.cx)("sui-date-picker__dialog", props.className),
      children: [
        !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.PopoverArrow, {}),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.PopoverBody, { children })
      ]
    }
  );
};

// src/calendar.tsx
var import_react11 = require("@chakra-ui/react");
var import_core = require("@saas-ui/core");

// src/button.tsx
var import_react5 = require("@chakra-ui/react");
var import_utils4 = require("@chakra-ui/utils");
var import_interactions = require("@react-aria/interactions");
var import_jsx_runtime3 = require("react/jsx-runtime");
var FieldButton = (0, import_react5.forwardRef)(
  (props, ref) => {
    const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props;
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_interactions.Pressable, { onPress, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
      import_react5.Button,
      {
        ref,
        size: "sm",
        h: "1.75rem",
        mr: "2",
        onFocus: () => (0, import_utils4.callAllHandlers)(() => onFocusChange == null ? void 0 : onFocusChange(true), props.onFocus),
        onBlur: () => (0, import_utils4.callAllHandlers)(() => onFocusChange == null ? void 0 : onFocusChange(false), props.onBlur),
        ...rest,
        children: props.children
      }
    ) });
  }
);
var NavButton = (0, import_react5.forwardRef)((props, ref) => {
  const { onPress, onFocusChange, onFocus, onBlur, ...rest } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_interactions.Pressable, { onPress, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    import_react5.IconButton,
    {
      ref,
      size: "sm",
      variant: "ghost",
      onFocus: () => (0, import_utils4.callAllHandlers)(() => onFocusChange == null ? void 0 : onFocusChange(true), props.onFocus),
      onBlur: () => (0, import_utils4.callAllHandlers)(() => onFocusChange == null ? void 0 : onFocusChange(false), props.onBlur),
      ...rest,
      children: props.children
    }
  ) });
});

// src/calendar-context.ts
var import_utils5 = require("@chakra-ui/utils");
var [CalendarProvider, useCalendarContext] = (0, import_utils5.createContext)({
  name: "CalendarProvider"
});

// src/calendar-grid.tsx
var import_calendar2 = require("@react-aria/calendar");
var import_date5 = require("@internationalized/date");

// src/calendar-cell.tsx
var import_react6 = require("react");
var import_date4 = require("@internationalized/date");
var import_react7 = require("@chakra-ui/react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var CalendarCell = ({
  state,
  date,
  currentMonth
}) => {
  const ref = (0, import_react6.useRef)(null);
  const { cellProps, buttonProps, formattedDate } = useCalendarCell(
    {
      date,
      currentMonth
    },
    state,
    ref
  );
  const isOutsideMonth = !(0, import_date4.isSameMonth)(currentMonth, date);
  const styles = useDatePickerStyles();
  const cellStyles = {
    textAlign: "center",
    padding: 0,
    ...styles.day
  };
  const buttonStyles = {
    ...styles.dayButton
  };
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.chakra.td, { as: "td", ...cellProps, __css: cellStyles, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    import_react7.chakra.button,
    {
      ...buttonProps,
      type: "button",
      ref,
      hidden: isOutsideMonth,
      width: "100%",
      __css: buttonStyles,
      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.chakra.span, { __css: styles.dayLabel, children: formattedDate })
    }
  ) });
};

// src/calendar-grid.tsx
var import_react8 = require("@chakra-ui/react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var CalendarGrid = ({ offset = {} }) => {
  const { state, locale, firstDayOfWeek } = useCalendarContext();
  const startDate = state.visibleRange.start.add(offset);
  const endDate = (0, import_date5.endOfMonth)(startDate);
  const { gridProps, headerProps, weekDays } = (0, import_calendar2.useCalendarGrid)(
    {
      startDate,
      endDate,
      firstDayOfWeek
    },
    state
  );
  const styles = useDatePickerStyles();
  const gridStyles = {
    ...styles.grid
  };
  const weeksInMonth = (0, import_date5.getWeeksInMonth)(
    state.visibleRange.start,
    locale,
    firstDayOfWeek
  );
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react8.chakra.table, { ...gridProps, __css: gridStyles, children: [
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.thead, { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.tr, { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.th, { __css: styles.weekday, children: day }, index)) }) }),
    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.tbody, { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.tr, { children: state.getDatesInWeek(weekIndex, startDate).map(
      (date, i) => date ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        CalendarCell,
        {
          state,
          date,
          currentMonth: startDate
        },
        i
      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react8.chakra.td, { __css: { padding: 0 } }, i)
    ) }, weekIndex)) })
  ] });
};

// src/use-calendar.ts
var import_calendar3 = require("@react-aria/calendar");
var import_calendar4 = require("@react-stately/calendar");
var import_react9 = require("react");
var import_date6 = require("@internationalized/date");
var import_react10 = require("@chakra-ui/react");
var defaultCreateCalendar = (name) => {
  switch (name) {
    case "gregory":
      return new import_date6.GregorianCalendar();
    default:
      throw new Error(`Unsupported calendar ${name}`);
  }
};
var useCalendar = (props) => {
  var _a;
  const {
    locale,
    firstDayOfWeek,
    calendarProps: contextCalendarProps,
    createCalendar: createCalendar3 = defaultCreateCalendar
  } = useDatePickerContext();
  const [action, setAction] = (0, import_react9.useState)("calendar");
  const [focusedValue, setFocusedValue] = (0, import_react10.useControllableState)({
    value: props.focusedValue,
    defaultValue: (_a = props.defaultFocusedValue) != null ? _a : contextCalendarProps.value,
    onChange: props.onFocusChange
  });
  const state = (0, import_calendar4.useCalendarState)({
    ...contextCalendarProps,
    focusedValue: focusedValue != null ? focusedValue : void 0,
    onFocusChange: setFocusedValue,
    locale,
    firstDayOfWeek,
    createCalendar: createCalendar3
  });
  (0, import_react9.useEffect)(() => {
    if (state.value) {
      setFocusedValue(state.value);
    }
  }, [state.value]);
  const ref = (0, import_react9.useRef)(null);
  const {
    calendarProps,
    prevButtonProps,
    nextButtonProps,
    errorMessageProps,
    title
  } = (0, import_calendar3.useCalendar)(
    {
      firstDayOfWeek,
      ...props
    },
    state
  );
  const titleProps = (0, import_react9.useMemo)(() => {
    return {
      onClick() {
        setAction(action === "calendar" ? "years" : "calendar");
      }
    };
  }, [action]);
  return {
    state,
    locale,
    firstDayOfWeek,
    calendarProps,
    prevButtonProps,
    nextButtonProps,
    errorMessageProps,
    titleProps,
    title,
    ref,
    action
  };
};

// src/calendar.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var DatePickerCalendar = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CalendarContainer, { ...props, children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CalendarHeader, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarTitle, {}),
      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarPrevious, {}),
      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarNext, {})
    ] }),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarGrid, {})
  ] });
};
var CalendarContainer = (props) => {
  const { children, ...rest } = props;
  const styles = useDatePickerStyles();
  const calendarStyles = {
    ...styles.calendar
  };
  const context = useCalendar(props);
  const { calendarProps, ref } = context;
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CalendarProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react11.chakra.div, { ...rest, ...calendarProps, ref, __css: calendarStyles, children }) });
};
var CalendarHeader = (props) => {
  const { children, ...rest } = props;
  const styles = useDatePickerStyles();
  const headerStyles = {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    pb: 4,
    ...styles.header
  };
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react11.chakra.div, { ...rest, __css: headerStyles, children });
};
var CalendarTitle = (props) => {
  const { title } = useCalendarContext();
  const styles = useDatePickerStyles();
  const titleStyles = {
    ...styles.title
  };
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react11.chakra.h5, { ...props, __css: titleStyles, children: title });
};
var CalendarNext = (0, import_react11.forwardRef)(
  (props, ref) => {
    const { icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.ChevronRightIcon, { boxSize: 5 }), ...rest } = props;
    const { nextButtonProps } = useCalendarContext();
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      NavButton,
      {
        ref,
        "aria-label": "Next",
        ...nextButtonProps,
        icon,
        ...rest
      }
    );
  }
);
var CalendarPrevious = (0, import_react11.forwardRef)(
  (props, ref) => {
    const { icon = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core.ChevronLeftIcon, { boxSize: 5 }), ...rest } = props;
    const { prevButtonProps } = useCalendarContext();
    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      NavButton,
      {
        ref,
        "aria-label": "Previous",
        ...prevButtonProps,
        icon,
        ...rest
      }
    );
  }
);

// src/date-range-picker.tsx
var React2 = __toESM(require("react"));
var import_datepicker3 = require("@react-stately/datepicker");
var import_datepicker4 = require("@react-aria/datepicker");
var import_react12 = require("@chakra-ui/react");
var import_i18n2 = require("@react-aria/i18n");
var import_date7 = require("@internationalized/date");
var import_react_dom2 = require("react-dom");
var import_jsx_runtime7 = require("react/jsx-runtime");
var DateRangePickerContainer = (props) => {
  var _a;
  const {
    value: valueProp,
    defaultValue,
    onChange,
    createCalendar: createCalendar3,
    ...rest
  } = props;
  const {
    locale: localeProp,
    hourCycle = 12,
    firstDayOfWeek,
    minValue,
    maxValue,
    timeZone = (0, import_date7.getLocalTimeZone)(),
    granularity = "day",
    closeOnSelect
  } = props;
  const { locale } = (0, import_i18n2.useLocale)();
  const theme = (0, import_react12.useTheme)();
  const styleConfig = (_a = theme.components["SuiDatePicker"]) != null ? _a : datePickerStyleConfig;
  const styles = (0, import_react12.useMultiStyleConfig)("SuiDatePicker", {
    styleConfig,
    ...props
  });
  const state = (0, import_datepicker3.useDateRangePickerState)({
    /* @ts-ignore doesn't accept null in strict mode, but it's supported */
    value: valueProp,
    defaultValue,
    minValue,
    maxValue,
    /* @ts-ignore */
    onChange,
    shouldCloseOnSelect: closeOnSelect || granularity === "day"
  });
  const datePickerRef = React2.useRef(null);
  const {
    groupProps,
    labelProps,
    startFieldProps,
    endFieldProps,
    buttonProps,
    dialogProps,
    calendarProps,
    descriptionProps,
    errorMessageProps,
    isInvalid,
    validationDetails,
    validationErrors
  } = (0, import_datepicker4.useDateRangePicker)(
    {
      ["aria-label"]: "Date Range Picker",
      ...rest
    },
    state,
    datePickerRef
  );
  const context = {
    state,
    locale: localeProp || locale,
    hourCycle,
    timeZone,
    firstDayOfWeek,
    groupProps,
    labelProps,
    startFieldProps,
    endFieldProps,
    buttonProps,
    dialogProps,
    calendarProps,
    descriptionProps,
    errorMessageProps,
    datePickerRef,
    isInvalid,
    validationDetails,
    validationErrors,
    createCalendar: createCalendar3
  };
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DatePickerStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
    import_react12.Popover,
    {
      ...props,
      isOpen: state.isOpen,
      onOpen: () => (0, import_react_dom2.flushSync)(() => state.setOpen(true)),
      onClose: () => (0, import_react_dom2.flushSync)(() => state.setOpen(false))
    }
  ) }) });
};
var DateRangePicker = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DateRangePickerContainer, { ...props });
};
var DateRangePickerDialog = DatePickerDialog;

// src/date-range-calendar.tsx
var import_react14 = require("@chakra-ui/react");

// src/use-range-calendar.ts
var import_calendar5 = require("@react-aria/calendar");
var import_calendar6 = require("@react-stately/calendar");
var import_react13 = require("react");
var useRangeCalendar = (props) => {
  const {
    locale,
    firstDayOfWeek,
    timeZone,
    calendarProps: contextCalendarProps,
    createCalendar: createCalendar3 = defaultCreateCalendar
  } = useDateRangePickerContext();
  const [action, setAction] = (0, import_react13.useState)("calendar");
  const state = (0, import_calendar6.useRangeCalendarState)({
    ...contextCalendarProps,
    visibleDuration: { months: 2 },
    locale,
    firstDayOfWeek,
    createCalendar: createCalendar3
  });
  const ref = (0, import_react13.useRef)(null);
  const {
    calendarProps,
    prevButtonProps,
    nextButtonProps,
    errorMessageProps,
    title
  } = (0, import_calendar5.useRangeCalendar)(
    {
      firstDayOfWeek,
      ...props
    },
    state,
    ref
  );
  const titleProps = (0, import_react13.useMemo)(() => {
    return {
      onClick() {
        setAction(action === "calendar" ? "years" : "calendar");
      }
    };
  }, [action]);
  return {
    state,
    locale,
    firstDayOfWeek,
    calendarProps,
    prevButtonProps,
    nextButtonProps,
    errorMessageProps,
    titleProps,
    title,
    ref,
    action
  };
};

// src/date-range-calendar.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var DateRangePickerCalendar = (props) => {
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(RangeCalendarContainer, { ...props, children: [
    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(CalendarHeader, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarTitle, {}),
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarPrevious, {}),
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarNext, {})
    ] }),
    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react14.chakra.div, { display: "flex", alignItems: "flex-start", gap: "8", children: [
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarGrid, {}),
      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarGrid, { offset: { months: 1 } })
    ] })
  ] });
};
var RangeCalendarContainer = (props) => {
  const { children, ...rest } = props;
  const styles = useDatePickerStyles();
  const calendarStyles = {
    ...styles.calendar
  };
  const context = useRangeCalendar(rest);
  const { calendarProps, ref } = context;
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CalendarProvider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react14.chakra.div, { ...calendarProps, ref, __css: calendarStyles, children }) });
};

// src/date-input.tsx
var import_react17 = require("@chakra-ui/react");

// src/date-field.tsx
var React3 = __toESM(require("react"));
var import_datepicker5 = require("@react-stately/datepicker");
var import_datepicker6 = require("@react-aria/datepicker");
var import_date8 = require("@internationalized/date");
var import_react16 = require("@chakra-ui/react");

// src/segmented-input.tsx
var import_react15 = require("@chakra-ui/react");
var import_utils6 = require("@chakra-ui/utils");

// src/segmented-input-styles.ts
var baseStyle2 = ({ colorScheme }) => {
  return {
    px: "0.1rem",
    textAlign: "end",
    outline: "none",
    rounded: "md",
    ["&[data-placeholder]"]: {
      color: "muted"
    },
    ["&[data-placeholder]+[data-literal]"]: {
      color: "muted"
    },
    _focus: {
      background: `${colorScheme}.500`,
      color: "white"
    },
    "&[data-read-only]": {
      bg: "transparent",
      color: "muted"
    }
  };
};
var segmented_input_styles_default = {
  baseStyle: baseStyle2,
  defaultProps: {
    colorScheme: "primary"
  }
};

// src/segmented-input.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var sizes = {
  sm: "2.2rem",
  md: "2.5rem",
  lg: "3rem"
};
var [SegmentedInputStylesProvider, useSegmentedInputStyles] = (0, import_utils6.createContext)({
  name: "SegmentedInputStylesContext"
});
var SegmentedInput = (0, import_react15.forwardRef)(
  ({ children, size, ...rest }, ref) => {
    var _a;
    const styles = (0, import_react15.useMultiStyleConfig)("Input", {
      size,
      ...rest
    });
    const ownProps = (0, import_react15.omitThemingProps)(rest);
    const pe = (0, import_utils6.mapResponsive)(size, (s) => {
      return sizes[s];
    }) || sizes.md;
    const inputStyles = {
      display: "flex",
      alignItems: "center",
      /* @ts-ignore */
      _focusWithin: (_a = styles.field) == null ? void 0 : _a._focusVisible,
      ...styles.field
    };
    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SegmentedInputStylesProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react15.chakra.div, { ...ownProps, pe, __css: inputStyles, ref, children }) });
  }
);
SegmentedInput.displayName = "SegmentedInput";
var InputSegment = (0, import_react15.forwardRef)(
  (props, ref) => {
    const {
      children,
      type,
      minValue,
      maxValue,
      isPlaceholder,
      isEditable,
      ...rest
    } = props;
    const theme = (0, import_react15.useTheme)();
    const isThemed = !!theme.components["SuiInputSegment"];
    const styles = (0, import_react15.useStyleConfig)("SuiInputSegment", {
      styleConfig: !isThemed ? segmented_input_styles_default : void 0,
      ...rest
    });
    const minWidth = type && ["day", "month"].includes(type) ? 1 : String(maxValue).length;
    const segmentStyles = {
      boxSizing: "content-box",
      fontVariantNumeric: "tabular-nums",
      minWidth: maxValue != null ? minWidth + "ch" : "auto",
      ...styles
    };
    const isLiteral = type === "literal";
    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
      import_react15.chakra.div,
      {
        ...rest,
        ref,
        "data-literal": (0, import_utils6.dataAttr)(isLiteral),
        "data-placeholder": (0, import_utils6.dataAttr)(isPlaceholder),
        "data-read-only": (0, import_utils6.dataAttr)(!isEditable),
        __css: segmentStyles,
        children
      }
    );
  }
);
InputSegment.displayName = "SegmentedInputSegment";

// src/date-field.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var DateField = (0, import_react16.forwardRef)(
  (props, forwardedRef) => {
    const state = (0, import_datepicker5.useDateFieldState)({
      ...props,
      createCalendar: import_date8.createCalendar
    });
    const ref = React3.useRef(null);
    const {
      fieldProps: { id, ...fieldProps }
    } = (0, import_datepicker6.useDateField)(props, state, ref);
    const inputProps = (0, import_react16.useFormControl)(fieldProps);
    const styles = useDatePickerStyles();
    const dateFieldStyles = {
      display: "flex",
      width: "full",
      ...styles.dateField
    };
    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
      import_react16.chakra.div,
      {
        ...inputProps,
        "aria-labelledby": `${inputProps.id}-label`,
        ref: (0, import_react16.useMergeRefs)(ref, forwardedRef),
        __css: dateFieldStyles,
        children: state.segments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DateSegment, { segment, state }, i))
      }
    );
  }
);
DateField.displayName = "DateField";
var TimeField = (props) => {
  const {
    label = "Time",
    defaultValue,
    onChange,
    onBlur,
    onFocus,
    onKeyDown,
    onKeyUp,
    hourCycle,
    ...rest
  } = props;
  const timeFieldProps = {
    label,
    defaultValue,
    onChange,
    onBlur,
    onFocus,
    onKeyDown,
    onKeyUp,
    hourCycle
  };
  const state = (0, import_datepicker5.useTimeFieldState)({
    ...props,
    onChange
  });
  const ref = React3.useRef(null);
  const { labelProps, fieldProps } = (0, import_datepicker6.useTimeField)(timeFieldProps, state, ref);
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react16.chakra.div, { mt: 2, ...rest, children: [
    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react16.FormLabel, { ...labelProps, children: label }),
    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SegmentedInput, { ...fieldProps, ref, display: "inline-flex", pr: 2, children: state.segments.map((segment, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DateSegment, { segment, state }, i)) })
  ] });
};
TimeField.displayName = "TimeField";
var DatePickerTimeField = (props) => {
  const {
    locale,
    state: { timeValue, setTimeValue },
    hourCycle
  } = useDatePickerContext();
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    TimeField,
    {
      ...props,
      locale: props.locale || locale,
      hourCycle,
      value: timeValue,
      onChange: (value) => {
        setTimeValue(value);
      }
    }
  );
};
DatePickerTimeField.displayName = "DatePickerTimeField";
var DatePickerStartTimeField = (props) => {
  const {
    locale,
    state: { timeRange, setTime },
    hourCycle
  } = useDateRangePickerContext();
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    TimeField,
    {
      ...props,
      locale: props.locale || locale,
      value: timeRange == null ? void 0 : timeRange.start,
      onChange: (v) => setTime("start", v),
      hourCycle
    }
  );
};
DatePickerStartTimeField.displayName = "DatePickerStartTimeField";
var DatePickerEndTimeField = (props) => {
  const {
    locale,
    state: { timeRange, setTime },
    hourCycle
  } = useDateRangePickerContext();
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    TimeField,
    {
      ...props,
      locale: props.locale || locale,
      value: timeRange == null ? void 0 : timeRange.end,
      onChange: (v) => setTime("end", v),
      hourCycle
    }
  );
};
DatePickerEndTimeField.displayName = "DatePickerEndTimeField";
var DateRangePickerTimeField = (props) => {
  const { startLabel = "Start time", endLabel = "End time", ...rest } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react16.chakra.div, { display: "flex", gap: "2", ...rest, children: [
    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerStartTimeField, { label: startLabel }),
    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DatePickerEndTimeField, { label: endLabel })
  ] });
};
DateRangePickerTimeField.displayName = "DateRangePickerTimeField";
var DateSegment = ({ segment, state }) => {
  const ref = React3.useRef(null);
  const {
    segmentProps: { style, ...segmentProps }
  } = (0, import_datepicker6.useDateSegment)(segment, state, ref);
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InputSegment, { ref, sx: style, ...segment, ...segmentProps, children: segment.text });
};

// src/icons.tsx
var import_core2 = require("@saas-ui/core");
var import_jsx_runtime11 = require("react/jsx-runtime");
var CalendarIcon = (0, import_core2.createIcon)({
  displayName: "CalendarIcon",
  path: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { children: [
    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
  ] })
});

// src/date-input.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var DateInput = (0, import_react17.forwardRef)((props, ref) => {
  const {
    children,
    calendarIcon,
    size,
    variant,
    inputProps,
    dialogProps,
    portal,
    ...rest
  } = props;
  const zIndex = typeof portal === "boolean" ? void 0 : portal;
  const dialog = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerDialog, { zIndex, ...dialogProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerCalendar, {}),
    children
  ] }) });
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(DatePicker, { placement: "bottom-end", granularity: "day", ...rest, children: [
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
      DatePickerInput,
      {
        calendarIcon,
        size,
        variant,
        ref,
        ...inputProps
      }
    ),
    portal ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.Portal, { children: dialog }) : dialog
  ] });
});
DateInput.displayName = "DateInput";
var DateTimeInput = (0, import_react17.forwardRef)((props, ref) => {
  const { children, ...rest } = props;
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DateInput, { ref, granularity: "minute", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerTimeField, {}),
    children
  ] }) });
});
DateTimeInput.displayName = "DateTimeInput";
var DatePickerInput = (0, import_react17.forwardRef)(
  (props, ref) => {
    const { calendarIcon, size, variant, ...rest } = props;
    const {
      locale,
      state,
      groupProps,
      fieldProps,
      buttonProps,
      datePickerRef
    } = useDatePickerInput();
    const themeProps = { size, variant };
    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DatePickerAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
      import_react17.InputGroup,
      {
        ref: datePickerRef,
        ...rest,
        ...groupProps,
        ...themeProps,
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SegmentedInput, { ...themeProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DateField, { ref, locale, ...fieldProps }) }),
          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react17.InputRightElement, { py: "1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
            FieldButton,
            {
              variant: "ghost",
              flex: "1",
              height: "100%",
              ...buttonProps,
              isActive: state.isOpen,
              children: calendarIcon || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CalendarIcon, {})
            }
          ) })
        ]
      }
    ) });
  }
);
DatePickerInput.displayName = "DatePickerInput";

// src/date-range-input.tsx
var import_react18 = require("@chakra-ui/react");
var import_jsx_runtime13 = require("react/jsx-runtime");
var DateRangeInput = (0, import_react18.forwardRef)(
  (props, ref) => {
    const {
      children,
      size,
      variant,
      calendarIcon,
      inputProps,
      dialogProps,
      portal,
      ...rest
    } = props;
    const zIndex = typeof portal === "boolean" ? void 0 : portal;
    const dialog = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerDialog, { zIndex, ...dialogProps, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DateRangePickerCalendar, {}),
      children
    ] }) });
    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DateRangePicker, { placement: "bottom-start", ...rest, children: [
      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
        DateRangePickerInput,
        {
          ref,
          calendarIcon,
          size,
          variant,
          ...inputProps
        }
      ),
      portal ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react18.Portal, { children: dialog }) : dialog
    ] });
  }
);
var DateRangePickerInput = (0, import_react18.forwardRef)(
  (props, ref) => {
    const { calendarIcon, size, variant, ...rest } = props;
    const {
      state,
      locale,
      groupProps,
      startFieldProps,
      endFieldProps,
      buttonProps,
      datePickerRef
    } = useDateRangePickerInput();
    const themeProps = { size, variant };
    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
      import_react18.InputGroup,
      {
        ...rest,
        ...groupProps,
        ...themeProps,
        ref: datePickerRef,
        width: "auto",
        display: "inline-flex",
        children: [
          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DatePickerAnchor, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SegmentedInput, { ...themeProps, children: [
            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DateField, { locale, ...startFieldProps, ref }),
            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react18.chakra.span, { "aria-hidden": "true", paddingX: "1", children: "\u2013" }),
            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DateField, { locale, ...endFieldProps })
          ] }) }),
          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react18.InputRightElement, { py: "1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
            FieldButton,
            {
              variant: "ghost",
              flex: "1",
              height: "100%",
              ...buttonProps,
              isActive: state.isOpen,
              children: calendarIcon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CalendarIcon, {})
            }
          ) })
        ]
      }
    ) });
  }
);

// src/date-picker-modal.tsx
var import_react20 = require("@chakra-ui/react");
var import_modals = require("@saas-ui/modals");
var import_react21 = require("@chakra-ui/react");

// src/use-date-picker-modal.ts
var import_react19 = require("@chakra-ui/react");
var useDatePickerModal = (props) => {
  const {
    defaultIsOpen,
    isOpen: isOpenProp,
    onOpen: onOpenProp,
    onClose: onCloseProp,
    onSubmit: onSubmitProp,
    defaultValue = null,
    value: valueProp,
    onChange
  } = props;
  const [value, setValue] = (0, import_react19.useControllableState)({
    defaultValue,
    value: valueProp,
    onChange
  });
  const { onClose, onOpen, isOpen } = (0, import_react19.useDisclosure)({
    defaultIsOpen,
    isOpen: isOpenProp,
    onOpen: onOpenProp,
    onClose: