@crossed/ui/lib/commonjs/forms/Calendar/Calendar.js

A universal & performant styling library for React Native, Next.js & React

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Calendar_exports = {};
__export(Calendar_exports, {
  Calendar: () => Calendar
});
module.exports = __toCommonJS(Calendar_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_layout = require("../../layout");
var import_react = require("react");
var import_use_calendar = require("@crossed/use-calendar");
var import_DayButton = require("./DayButton");
var import_utils = require("./utils");
var import_WeekDay = require("./WeekDay");
var import_SelectYear = require("./SelectYear");
var import_SelectMonth = require("./SelectMonth");
const Calendar = (0, import_react.memo)(
  (0, import_react.forwardRef)(({ locale = "default", style, ...props }, ref) => {
    const { months, getDayProps, setMonth, setYear, monthsByYear } = (0, import_use_calendar.useCalendar)(props);
    const id = (0, import_react.useId)();
    const itemsMonth = (0, import_react.useMemo)(() => {
      const formatter = new Intl.DateTimeFormat(locale, {
        month: "long"
      });
      const yearSelected = (props.selectedDate || /* @__PURE__ */ new Date()).getFullYear();
      let months2 = monthsByYear.get(yearSelected);
      if (!months2)
        months2 = new Set(Array.from(Array(12).keys()));
      return Array.from(months2).map((month) => {
        const d = new Date(yearSelected, month);
        const nameMonth = formatter.format(d);
        return {
          label: (0, import_utils.capFirstLetter)(nameMonth),
          value: month.toString()
        };
      });
    }, [monthsByYear]);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.YBox, { style, ref, children: months.map(({ year, month, weeks }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.YBox, { space: "xxs", children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.XBox, { alignItems: "stretch", space: "md", children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_SelectMonth.SelectMonth,
          {
            month,
            onChange: setMonth,
            months: itemsMonth
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_SelectYear.SelectYear,
          {
            year,
            onChange: setYear,
            years: Array.from(monthsByYear).map(([year2]) => year2)
          }
        )
      ] }),
      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_layout.YBox, { space: "xxs", children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_WeekDay.WeekDay,
          {
            days: weeks[0].length > 0 ? weeks[0] : weeks[1],
            locale
          }
        ),
        weeks.map((week, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_layout.XBox, { justifyContent: "between", children: week.map((day, j) => {
          const { onClick, ...props2 } = getDayProps({ day });
          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_DayButton.DayButton,
            {
              day,
              ...props2,
              onPress: onClick
            },
            `${id}-day-${j}`
          );
        }) }, `${id}-week-${i}`))
      ] })
    ] }, `${id}-month-${month}`)) });
  })
);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Calendar
});
//# sourceMappingURL=Calendar.js.map