// packages/components/src/calendar/date-calendar/index.tsx
import { DayPicker } from "react-day-picker";
import { enUS } from "react-day-picker/locale";
import { useCallback } from "@wordpress/element";
import { COMMON_PROPS } from "../utils/constants.js";
import { clampNumberOfMonths } from "../utils/misc.js";
import { useControlledValue } from "../../utils/hooks/index.js";
import { useLocalizationProps } from "../utils/use-localization-props.js";
import { jsx as _jsx } from "react/jsx-runtime";
var DateCalendar = ({
  defaultSelected,
  selected: selectedProp,
  onSelect,
  numberOfMonths = 1,
  locale = enUS,
  timeZone,
  ...props
}) => {
  const localizationProps = useLocalizationProps({
    locale,
    timeZone,
    mode: "single"
  });
  const onChange = useCallback((selected2, triggerDate, modifiers, e) => {
    onSelect?.(selected2 !== null && selected2 !== void 0 ? selected2 : void 0, triggerDate, modifiers, e);
  }, [onSelect]);
  const [selected, setSelected] = useControlledValue({
    defaultValue: defaultSelected,
    value: selectedProp,
    onChange
  });
  return /* @__PURE__ */ _jsx(DayPicker, {
    ...COMMON_PROPS,
    ...localizationProps,
    ...props,
    mode: "single",
    numberOfMonths: clampNumberOfMonths(numberOfMonths),
    selected: selected !== null && selected !== void 0 ? selected : void 0,
    onSelect: setSelected
  });
};
export {
  DateCalendar
};
//# sourceMappingURL=index.js.map
