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

Yamada UI calendar component

"use client"
import {
  useYearPicker
} from "./chunk-DJPDRLM5.mjs";
import {
  DatePickerClearIcon,
  DatePickerField,
  DatePickerIcon
} from "./chunk-2IG6CI7K.mjs";
import {
  DatePickerProvider
} from "./chunk-C27PTBDA.mjs";
import {
  Calendar
} from "./chunk-FICMIEAE.mjs";

// src/year-picker.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { Popover, PopoverContent } from "@yamada-ui/popover";
import { Portal } from "@yamada-ui/portal";
import { cx, runIfFunc } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var YearPicker = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("YearPicker", 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
  } = useYearPicker(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-year-picker", className),
      __css: css,
      ...getContainerProps(containerProps),
      children: [
        /* @__PURE__ */ jsxs(
          ui.div,
          {
            className: "ui-year-picker__inner",
            __css: { position: "relative", ...styles.inner },
            children: [
              /* @__PURE__ */ jsx(
                DatePickerField,
                {
                  className: "ui-year-picker__field",
                  ...getFieldProps({ height, minHeight, ...fieldProps }, ref),
                  inputProps: getInputProps(inputProps)
                }
              ),
              clearable && value ? /* @__PURE__ */ jsx(
                DatePickerClearIcon,
                {
                  className: "ui-year-picker__icon--clear",
                  ...getIconProps({ clear: true, ...clearIconProps })
                }
              ) : /* @__PURE__ */ jsx(
                DatePickerIcon,
                {
                  className: "ui-year-picker__icon",
                  ...getIconProps({ clear: false, ...iconProps })
                }
              )
            ]
          }
        ),
        /* @__PURE__ */ jsx(Portal, { ...portalProps, children: /* @__PURE__ */ jsxs(
          PopoverContent,
          {
            as: "div",
            className: "ui-year-picker__content",
            __css: { ...styles.content },
            ...contentProps,
            children: [
              /* @__PURE__ */ jsx(
                Calendar,
                {
                  className: "ui-year-picker__calendar",
                  ...getCalendarProps()
                }
              ),
              runIfFunc(children, { value, onClose })
            ]
          }
        ) })
      ]
    }
  ) }) });
});
YearPicker.displayName = "YearPicker";
YearPicker.__ui__ = "YearPicker";

export {
  YearPicker
};
//# sourceMappingURL=chunk-JBPHLPGZ.mjs.map