@yamada-ui/calendar/dist/chunk-2IG6CI7K.mjs

Yamada UI calendar component

"use client"
import {
  DatePickerProvider,
  useDatePicker,
  useDatePickerContext
} from "./chunk-C27PTBDA.mjs";
import {
  Calendar
} from "./chunk-FICMIEAE.mjs";

// src/date-picker.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { CloseIcon, Icon } from "@yamada-ui/icon";
import { Popover, PopoverContent, PopoverTrigger } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import { useClickable } from "@yamada-ui/use-clickable";
import {
  cx,
  getValidChildren,
  isValidElement,
  mergeRefs,
  runIfFunc
} from "@yamada-ui/utils";
import { cloneElement, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var DatePicker = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("DatePicker", props);
  const {
    className,
    children,
    isClearable = true,
    clearable = isClearable,
    color,
    h,
    height = h,
    minH,
    minHeight = minH,
    clearIconProps,
    containerProps,
    contentProps,
    fieldProps,
    iconProps,
    inputProps,
    portalProps = { disabled: true },
    ...computedProps
  } = omitThemeProps(mergedProps);
  const {
    value,
    getCalendarProps,
    getContainerProps,
    getFieldProps,
    getIconProps,
    getInputProps,
    getPopoverProps,
    onClose
  } = useDatePicker(computedProps);
  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-date-picker", className),
      __css: css,
      ...getContainerProps(containerProps),
      children: [
        /* @__PURE__ */ jsxs(
          ui.div,
          {
            className: "ui-date-picker__inner",
            __css: { position: "relative", ...styles.inner },
            children: [
              /* @__PURE__ */ jsx(
                DatePickerField,
                {
                  ...getFieldProps({ height, minHeight, ...fieldProps }, ref),
                  inputProps: getInputProps(inputProps)
                }
              ),
              clearable && value ? /* @__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-date-picker__content",
            __css: { ...styles.content },
            ...contentProps,
            children: [
              /* @__PURE__ */ jsx(
                Calendar,
                {
                  className: "ui-date-picker__calendar",
                  ...getCalendarProps()
                }
              ),
              runIfFunc(children, { value, onClose })
            ]
          }
        ) })
      ]
    }
  ) }) });
});
DatePicker.displayName = "DatePicker";
DatePicker.__ui__ = "DatePicker";
var DatePickerField = forwardRef(
  ({ className, inputProps, ...rest }, ref) => {
    const styles = useDatePickerContext();
    const { ref: inputRef, ...computedInputProps } = inputProps != null ? inputProps : {};
    const css = {
      alignItems: "center",
      display: "flex",
      pe: "2rem",
      ...styles.field
    };
    return /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
      ui.div,
      {
        className: cx("ui-date-picker__field", className),
        __css: css,
        ...rest,
        children: /* @__PURE__ */ jsx(
          ui.input,
          {
            ref: mergeRefs(ref, inputRef),
            className: "ui-date-picker__field__input",
            "aria-label": "Input date value",
            display: "inline-block",
            w: "100%",
            ...computedInputProps
          }
        )
      }
    ) });
  }
);
DatePickerField.displayName = "DatePickerField";
DatePickerField.__ui__ = "DatePickerField";
var DatePickerIcon = forwardRef(
  ({ className, children, __css, ...rest }, ref) => {
    const styles = useDatePickerContext();
    const css = {
      alignItems: "center",
      cursor: "pointer",
      display: "inline-flex",
      justifyContent: "center",
      pointerEvents: "none",
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)",
      ...styles.icon,
      ...__css
    };
    const validChildren = getValidChildren(children);
    const cloneChildren = validChildren.map(
      (child) => cloneElement(child, {
        style: {
          color: "currentColor",
          maxHeight: "1em",
          maxWidth: "1em"
        },
        "aria-hidden": true,
        focusable: false
      })
    );
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-date-picker__icon", className),
        __css: css,
        ...rest,
        children: isValidElement(children) ? cloneChildren : /* @__PURE__ */ jsx(DatePickerCalendarIcon, {})
      }
    );
  }
);
DatePickerIcon.displayName = "DatePickerIcon";
DatePickerIcon.__ui__ = "DatePickerIcon";
var DatePickerCalendarIcon = ({
  className,
  ...rest
}) => {
  return /* @__PURE__ */ jsx(
    Icon,
    {
      className: cx("ui-date-picker__icon__calendar", className),
      viewBox: "0 0 24 24",
      ...rest,
      children: /* @__PURE__ */ jsx(
        "path",
        {
          d: "M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z",
          fill: "currentColor"
        }
      )
    }
  );
};
DatePickerCalendarIcon.displayName = "DatePickerCalendarIcon";
DatePickerCalendarIcon.__ui__ = "DatePickerCalendarIcon";
var DatePickerClearIcon = ({
  className,
  children,
  ...props
}) => {
  const ref = useRef(null);
  const styles = useDatePickerContext();
  const disabled = props.disabled;
  const rest = useClickable({
    ref,
    disabled,
    ...props
  });
  return /* @__PURE__ */ jsx(
    DatePickerIcon,
    {
      className: cx("ui-date-picker__icon--clear", className),
      "aria-label": "Clear value",
      __css: styles.clearIcon,
      ...rest,
      children: children != null ? children : /* @__PURE__ */ jsx(CloseIcon, { h: "0.5em", w: "0.5em" })
    }
  );
};
DatePickerClearIcon.displayName = "DatePickerClearIcon";
DatePickerClearIcon.__ui__ = "DatePickerClearIcon";

export {
  DatePicker,
  DatePickerField,
  DatePickerIcon,
  DatePickerCalendarIcon,
  DatePickerClearIcon
};
//# sourceMappingURL=chunk-2IG6CI7K.mjs.map