@yamada-ui/calendar/dist/chunk-HG2LURYM.mjs

Yamada UI calendar component

"use client"
import {
  useRangeDatePicker
} from "./chunk-OAW6VVLJ.mjs";
import {
  DatePickerClearIcon,
  DatePickerIcon
} from "./chunk-2IG6CI7K.mjs";
import {
  DatePickerProvider,
  useDatePickerContext
} from "./chunk-C27PTBDA.mjs";
import {
  Calendar
} from "./chunk-FICMIEAE.mjs";

// src/range-date-picker.tsx
import {
  forwardRef,
  layoutStyleProperties,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { Popover, PopoverContent, PopoverTrigger } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import {
  cx,
  dataAttr,
  mergeRefs,
  runIfFunc,
  splitObject
} from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var RangeDatePicker = forwardRef(
  (props, ref) => {
    const [styles, mergedProps] = useComponentMultiStyle(
      "RangeDatePicker",
      props
    );
    const {
      className,
      children,
      isClearable = true,
      clearable = isClearable,
      color,
      h,
      height = h,
      minH,
      minHeight = minH,
      separator,
      clearIconProps,
      containerProps,
      contentProps,
      endInputProps,
      fieldProps,
      iconProps,
      portalProps = { disabled: true },
      startInputProps,
      ...computedProps
    } = omitThemeProps(mergedProps);
    const {
      value,
      getCalendarProps,
      getContainerProps,
      getEndInputProps,
      getFieldProps,
      getIconProps,
      getPopoverProps,
      getStartInputProps,
      onClose
    } = useRangeDatePicker(computedProps);
    const [startValue, endValue] = value;
    const css = {
      color,
      h: "fit-content",
      w: "100%",
      ...styles.container
    };
    return /* @__PURE__ */ jsx(DatePickerProvider, { value: styles, children: /* @__PURE__ */ jsx(Popover, { ...getPopoverProps(), children: /* @__PURE__ */ jsxs(
      ui.div,
      {
        className: cx("ui-range-date-picker", className),
        __css: css,
        ...getContainerProps(containerProps),
        children: [
          /* @__PURE__ */ jsxs(
            ui.div,
            {
              className: "ui-range-date-picker__inner",
              __css: { position: "relative", ...styles.inner },
              children: [
                /* @__PURE__ */ jsx(
                  RangeDatePickerField,
                  {
                    separator,
                    value,
                    ...getFieldProps({ height, minHeight, ...fieldProps }),
                    endInputProps: getEndInputProps(endInputProps),
                    startInputProps: getStartInputProps(startInputProps, ref)
                  }
                ),
                clearable && (!!startValue || !!endValue) ? /* @__PURE__ */ jsx(
                  DatePickerClearIcon,
                  {
                    ...getIconProps({ clear: true, ...clearIconProps })
                  }
                ) : /* @__PURE__ */ jsx(
                  DatePickerIcon,
                  {
                    ...getIconProps({ clear: false, ...iconProps })
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
            PopoverContent,
            {
              as: "div",
              className: "ui-range-date-picker__content",
              __css: { ...styles.content },
              ...contentProps,
              children: [
                /* @__PURE__ */ jsx(
                  Calendar,
                  {
                    className: "ui-range-date-picker__calendar",
                    ...getCalendarProps()
                  }
                ),
                runIfFunc(children, { value, onClose })
              ]
            }
          ) })
        ]
      }
    ) }) });
  }
);
RangeDatePicker.displayName = "RangeDatePicker";
RangeDatePicker.__ui__ = "RangeDatePicker";
var RangeDatePickerField = forwardRef(
  ({
    className,
    separator = "-",
    value = [],
    endInputProps,
    startInputProps,
    ...rest
  }, ref) => {
    const styles = useDatePickerContext();
    const [startValue, endValue] = value;
    const {
      ref: startInputRef,
      placeholder: startPlaceholder,
      ...computedStartInputProps
    } = startInputProps != null ? startInputProps : {};
    const { placeholder: endPlaceholder, ...computedEndInputProps } = endInputProps != null ? endInputProps : {};
    const hasPlaceholder = !!startPlaceholder || !!endPlaceholder;
    const hasValue = !!startValue || !!endValue;
    const hasSeparator = hasPlaceholder || hasValue;
    const css = {
      alignItems: "center",
      display: "flex",
      pe: "2rem",
      ...styles.field
    };
    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsxs(
      ui.div,
      {
        className: cx("ui-range-date-picker__field", className),
        __css: css,
        ...rest,
        children: [
          /* @__PURE__ */ jsx(
            AutosizingInput,
            {
              ref: mergeRefs(ref, startInputRef),
              className: "ui-range-date-picker__field__start-input",
              "aria-label": "Start date",
              placeholder: startPlaceholder,
              ...computedStartInputProps
            }
          ),
          hasSeparator && !!separator ? /* @__PURE__ */ jsx(
            ui.span,
            {
              "data-placeholder": dataAttr(!startValue),
              marginInline: "0.25rem",
              children: separator
            }
          ) : null,
          /* @__PURE__ */ jsx(
            AutosizingInput,
            {
              className: "ui-range-date-picker__field__end-input",
              "aria-label": "End date",
              placeholder: endPlaceholder,
              ...computedEndInputProps
            }
          )
        ]
      }
    ) });
  }
);
RangeDatePickerField.displayName = "RangeDatePickerField";
RangeDatePickerField.__ui__ = "RangeDatePickerField";
var AutosizingInput = forwardRef(
  ({ className, placeholder, value, ...rest }, ref) => {
    const [containerProps, inputProps] = splitObject(
      rest,
      layoutStyleProperties
    );
    const css = {
      alignItems: "center",
      display: "inline-flex",
      position: "relative"
    };
    return /* @__PURE__ */ jsxs(ui.div, { className, __css: css, ...containerProps, children: [
      /* @__PURE__ */ jsx(ui.span, { "data-placeholder": dataAttr(!value), opacity: value ? 0 : 1, children: value || placeholder }),
      /* @__PURE__ */ jsx(
        ui.input,
        {
          ref,
          left: "0",
          position: "absolute",
          value,
          w: "100%",
          ...inputProps
        }
      )
    ] });
  }
);
AutosizingInput.displayName = "AutosizingInput";
AutosizingInput.__ui__ = "AutosizingInput";

export {
  RangeDatePicker,
  RangeDatePickerField
};
//# sourceMappingURL=chunk-HG2LURYM.mjs.map