@mekari/pixel3-date-picker 0.0.1-dev.0

package/dist/date-picker.js

@@ -0,0 +1,1851 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/date-picker.tsx
+var date_picker_exports = {};
+__export(date_picker_exports, {
+  MpDatePicker: () => MpDatePicker
+});
+module.exports = __toCommonJS(date_picker_exports);
+var import_vue20 = require("vue");
+var import_vue21 = require("vue");
+var import_pixel3_input = require("@mekari/pixel3-input");
+var import_pixel3_popover = require("@mekari/pixel3-popover");
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+
+// src/calendar-panel.tsx
+var import_vue17 = require("vue");
+var import_vue18 = require("vue");
+
+// src/components/calendar/table-date.tsx
+var import_vue9 = require("vue");
+var import_vue10 = require("vue");
+var import_pixel3_button = require("@mekari/pixel3-button");
+
+// src/components/parts/date.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var Date2 = (0, import_vue2.defineComponent)({
+  name: "Date",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isShowPinbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const dateItemClasses = (0, import_recipes.dateItemRecipe)({
+        status: props.status
+      });
+      const {
+        root,
+        pinbar
+      } = (0, import_recipes.pinbarSlotRecipe)();
+      return (0, import_vue.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": dateItemClasses
+      }, [slots.default(), props.isShowPinbar && (0, import_vue.createVNode)("div", {
+        "class": root
+      }, [(0, import_vue.createVNode)("div", {
+        "class": pinbar
+      }, null)])]);
+    };
+  }
+});
+
+// src/components/parts/day.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+var Day = (0, import_vue4.defineComponent)({
+  name: "Day",
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue3.createVNode)("div", {
+        "class": (0, import_recipes2.dayItemRecipe)()
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/components/parts/month.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var import_recipes3 = require("@mekari/pixel3-styled-system/recipes");
+var Month = (0, import_vue6.defineComponent)({
+  name: "Month",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = (0, import_recipes3.monthItemRecipe)({
+        status: props.status
+      });
+      return (0, import_vue5.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/components/parts/year.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_recipes4 = require("@mekari/pixel3-styled-system/recipes");
+var YearItem = (0, import_vue8.defineComponent)({
+  name: "YearItem",
+  props: {
+    status: {
+      type: String
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      const classes = (0, import_recipes4.yearItemRecipe)({
+        status: props.status
+      });
+      return (0, import_vue7.createVNode)("button", {
+        "disabled": props.isDisabled,
+        "data-status": props.status,
+        "class": classes
+      }, [slots.default()]);
+    };
+  }
+});
+
+// src/utils/base.ts
+function chunk(arr, size) {
+  if (!Array.isArray(arr)) {
+    return [];
+  }
+  const result = [];
+  const len = arr.length;
+  let i = 0;
+  size = size || len;
+  while (i < len) {
+    result.push(arr.slice(i, i += size));
+  }
+  return result;
+}
+__name(chunk, "chunk");
+var isObject = /* @__PURE__ */ __name((value) => {
+  return !!value && value.constructor === Object;
+}, "isObject");
+var assign = /* @__PURE__ */ __name((initial, override) => {
+  var _a;
+  if (!initial || !override)
+    return (_a = initial != null ? initial : override) != null ? _a : {};
+  return Object.entries({
+    ...initial,
+    ...override
+  }).reduce((acc, [key, value]) => {
+    return {
+      ...acc,
+      [key]: (() => {
+        if (isObject(initial[key]))
+          return assign(initial[key], value);
+        return value;
+      })()
+    };
+  }, {});
+}, "assign");
+
+// src/components/calendar/table-date.tsx
+var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
+var TableDate = (0, import_vue10.defineComponent)({
+  name: "TableDate",
+  props: {
+    days: {
+      type: Array,
+      default: () => []
+    },
+    dates: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getDateStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    },
+    isRange: {
+      type: Boolean
+    },
+    isHideNotThisMonthDate: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "changePanel", "select", "clickHeaderLabel", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      dayWrapper,
+      dateItemRoot,
+      dateItemWrapper,
+      shortcutLabelWrapper
+    } = (0, import_recipes5.tableDateSlotRecipe)();
+    const getDates = (0, import_vue10.computed)(() => {
+      return chunk(props.dates, 7);
+    });
+    function onNextButton() {
+      emit("next");
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      emit("previous");
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectDate(date) {
+      emit("select", date);
+    }
+    __name(onSelectDate, "onSelectDate");
+    function onSelectToday() {
+      const today = /* @__PURE__ */ new Date();
+      onSelectDate(today);
+    }
+    __name(onSelectToday, "onSelectToday");
+    function getDateAttrs(date) {
+      const {
+        status,
+        isDisabled,
+        isShowPinbar
+      } = props.getDateStatus(date);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        isShowPinbar,
+        onClick: () => onSelectDate(date),
+        onMouseenter: () => {
+          emit("mouseEnter", date);
+        },
+        onMouseleave: () => {
+          emit("mouseLeave");
+        },
+        style: {
+          visibility: props.isHideNotThisMonthDate && status === "notThisMonth" ? "hidden" : ""
+        }
+      };
+    }
+    __name(getDateAttrs, "getDateAttrs");
+    return () => {
+      return (0, import_vue9.createVNode)("div", null, [(0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue9.createVNode)("button", {
+        "class": headerLabel,
+        "onClick": () => emit("clickHeaderLabel")
+      }, [props.headerLabel]), (0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": dayWrapper
+      }, [props.days.map((day) => (0, import_vue9.createVNode)(Day, null, {
+        default: () => [(0, import_vue9.createTextVNode)(" "), day, (0, import_vue9.createTextVNode)(" ")]
+      }))]), (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": dateItemRoot
+      }, [getDates.value.map((dates, index) => (0, import_vue9.createVNode)("div", {
+        "class": dateItemWrapper,
+        "data-row-index": index
+      }, [dates.map((date) => (0, import_vue9.createVNode)(Date2, getDateAttrs(date), {
+        default: () => [(0, import_vue9.createTextVNode)(" "), date.getDate(), (0, import_vue9.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue9.createVNode)("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue9.createVNode)(import_pixel3_button.MpButton, {
+        "variant": "ghost",
+        "onClick": onSelectToday
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+// src/components/calendar/table-month.tsx
+var import_vue11 = require("vue");
+var import_vue12 = require("vue");
+var import_pixel3_button2 = require("@mekari/pixel3-button");
+
+// src/utils/date.ts
+var import_date_fns = require("date-fns");
+function createDate(y, M = 0, d = 1, h = 0, m = 0, s = 0, ms = 0) {
+  const date = new Date(y, M, d, h, m, s, ms);
+  if (y < 100 && y >= 0) {
+    date.setFullYear(y);
+  }
+  return date;
+}
+__name(createDate, "createDate");
+function isValidDate(date) {
+  return date instanceof Date && !isNaN(date);
+}
+__name(isValidDate, "isValidDate");
+function isValidRangeDate(date) {
+  return Array.isArray(date) && date.length === 2 && date.every(isValidDate) && date[0] <= date[1];
+}
+__name(isValidRangeDate, "isValidRangeDate");
+function startOfMonth(value) {
+  const date = new Date(value);
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfMonth, "startOfMonth");
+function startOfWeek(value, firstDayOfWeek = 0) {
+  if (!(firstDayOfWeek >= 0 && firstDayOfWeek <= 6)) {
+    throw new RangeError("weekStartsOn must be between 0 and 6");
+  }
+  const date = new Date(value);
+  const day = date.getDay();
+  const diff = (day + 7 - firstDayOfWeek) % 7;
+  date.setDate(date.getDate() - diff);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+__name(startOfWeek, "startOfWeek");
+function getCalendar({
+  firstDayOfWeek,
+  year,
+  month
+}) {
+  const arr = [];
+  const calendar = createDate(year, month, 0);
+  const lastDayInLastMonth = calendar.getDate();
+  const firstDayInLastMonth = lastDayInLastMonth - (calendar.getDay() + 7 - firstDayOfWeek) % 7;
+  for (let i = firstDayInLastMonth; i <= lastDayInLastMonth; i++) {
+    arr.push(createDate(year, month, i - lastDayInLastMonth));
+  }
+  calendar.setMonth(month + 1, 0);
+  const lastDayInCurrentMonth = calendar.getDate();
+  for (let i = 1; i <= lastDayInCurrentMonth; i++) {
+    arr.push(createDate(year, month, i));
+  }
+  const lastMonthLength = lastDayInLastMonth - firstDayInLastMonth + 1;
+  const nextMonthLength = 6 * 7 - lastMonthLength - lastDayInCurrentMonth;
+  for (let i = 1; i <= nextMonthLength; i++) {
+    arr.push(createDate(year, month, lastDayInCurrentMonth + i));
+  }
+  return arr;
+}
+__name(getCalendar, "getCalendar");
+function getNextMonth(date) {
+  return (0, import_date_fns.addMonths)(date, 1);
+}
+__name(getNextMonth, "getNextMonth");
+function getPreviousMonth(date) {
+  return (0, import_date_fns.addMonths)(date, -1);
+}
+__name(getPreviousMonth, "getPreviousMonth");
+function addDays(value, days) {
+  const date = new Date(value);
+  date.setDate(date.getDate() + days);
+  return date;
+}
+__name(addDays, "addDays");
+function isDateBetween(date, min, max) {
+  const _date = new Date(date);
+  const _min = new Date(min);
+  const _max = new Date(max);
+  return _date.getTime() >= _min.getTime() && _date.getTime() <= _max.getTime();
+}
+__name(isDateBetween, "isDateBetween");
+
+// src/components/calendar/table-month.tsx
+var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
+var TableMonth = (0, import_vue12.defineComponent)({
+  name: "TableMonth",
+  props: {
+    calendar: {
+      type: Date,
+      default: () => /* @__PURE__ */ new Date()
+    },
+    months: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getMonthStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "select", "clickHeaderLabel", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      monthItemRoot,
+      monthItemWrapper,
+      shortcutLabelWrapper
+    } = (0, import_recipes6.tableMonthSlotRecipe)();
+    const getMonths = (0, import_vue12.computed)(() => {
+      return chunk(props.months, 3);
+    });
+    const getCalendarYear = (0, import_vue12.computed)(() => props.calendar.getFullYear());
+    function onNextButton() {
+      emit("next");
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      emit("previous", "previousMonth");
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectMonth(month, year) {
+      emit("select", month, year);
+    }
+    __name(onSelectMonth, "onSelectMonth");
+    function getMonthAttrs(month) {
+      const {
+        status,
+        isDisabled
+      } = props.getMonthStatus(month, getCalendarYear.value);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        onClick: () => onSelectMonth(month, getCalendarYear.value),
+        onMouseenter: () => {
+          emit("mouseEnter", createDate(getCalendarYear.value, month));
+        },
+        onMouseleave: () => {
+          emit("mouseLeave");
+        }
+      };
+    }
+    __name(getMonthAttrs, "getMonthAttrs");
+    return () => {
+      return (0, import_vue11.createVNode)("div", null, [(0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue11.createVNode)("button", {
+        "class": headerLabel,
+        "onClick": () => emit("clickHeaderLabel")
+      }, [props.headerLabel]), (0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Content",
+        "class": monthItemRoot
+      }, [getMonths.value.map((data) => (0, import_vue11.createVNode)("div", {
+        "class": monthItemWrapper
+      }, [data.map((month) => (0, import_vue11.createVNode)(Month, getMonthAttrs(month.month), {
+        default: () => [" ", month.text, " "]
+      }))]))]), props.isShowShortcut && (0, import_vue11.createVNode)("div", {
+        "data-pixel-parts": "Shortcut",
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue11.createVNode)(import_pixel3_button2.MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectMonth((/* @__PURE__ */ new Date()).getMonth(), getCalendarYear.value)
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+// src/components/calendar/table-year.tsx
+var import_vue13 = require("vue");
+var import_vue14 = require("vue");
+var import_pixel3_button3 = require("@mekari/pixel3-button");
+var import_recipes7 = require("@mekari/pixel3-styled-system/recipes");
+var TableYear = (0, import_vue14.defineComponent)({
+  name: "TableYear",
+  props: {
+    years: {
+      type: Array,
+      default: () => []
+    },
+    headerLabel: {
+      type: String,
+      default: ""
+    },
+    shortcutLabel: {
+      type: String,
+      default: ""
+    },
+    getYearStatus: {
+      type: Function,
+      default: () => {
+      }
+    },
+    isShowShortcut: {
+      type: Boolean
+    }
+  },
+  emits: ["next", "previous", "select", "mouseEnter", "mouseLeave"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      headerRoot,
+      headerLabel,
+      yearItemRoot,
+      yearItemWrapper,
+      shortcutLabelWrapper
+    } = (0, import_recipes7.tableYearSlotRecipe)();
+    const getYears = (0, import_vue14.computed)(() => {
+      return chunk(props.years, 4);
+    });
+    function onNextButton() {
+      const lastYear = props.years[props.years.length - 1];
+      emit("next", lastYear + 1);
+    }
+    __name(onNextButton, "onNextButton");
+    function onPreviousButton() {
+      const firstYear = props.years[0];
+      emit("previous", firstYear - 1);
+    }
+    __name(onPreviousButton, "onPreviousButton");
+    function onSelectYear(year) {
+      emit("select", year);
+    }
+    __name(onSelectYear, "onSelectYear");
+    function getMonthAttrs(year) {
+      const {
+        status,
+        isDisabled
+      } = props.getYearStatus(year);
+      return {
+        status: isDisabled ? "disabled" : status,
+        isDisabled,
+        onClick: () => onSelectYear(year),
+        onMouseenter: () => {
+          emit("mouseEnter", createDate(year));
+        },
+        onMouseleave: () => {
+          emit("mouseLeave");
+        }
+      };
+    }
+    __name(getMonthAttrs, "getMonthAttrs");
+    return () => {
+      return (0, import_vue13.createVNode)("div", null, [(0, import_vue13.createVNode)("div", {
+        "data-pixel-parts": "Header",
+        "class": headerRoot
+      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "left-icon": "chevrons-left",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onPreviousButton
+      }, null), (0, import_vue13.createVNode)("button", {
+        "class": headerLabel
+      }, [props.headerLabel]), (0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "right-icon": "chevrons-right",
+        "variant": "ghost",
+        "size": "sm",
+        "onClick": onNextButton
+      }, null)]), (0, import_vue13.createVNode)("div", {
+        "class": yearItemRoot
+      }, [getYears.value.map((data) => (0, import_vue13.createVNode)("div", {
+        "class": yearItemWrapper
+      }, [data.map((year) => (0, import_vue13.createVNode)(YearItem, getMonthAttrs(year), {
+        default: () => [(0, import_vue13.createTextVNode)(" "), year, (0, import_vue13.createTextVNode)(" ")]
+      }))]))]), props.isShowShortcut && (0, import_vue13.createVNode)("div", {
+        "class": shortcutLabelWrapper
+      }, [(0, import_vue13.createVNode)(import_pixel3_button3.MpButton, {
+        "variant": "ghost",
+        "onClick": () => onSelectYear((/* @__PURE__ */ new Date()).getFullYear())
+      }, {
+        default: () => [props.shortcutLabel]
+      })])]);
+    };
+  }
+});
+
+// src/calendar-panel.tsx
+var import_date_fns3 = require("date-fns");
+
+// src/composables/useCalendar.ts
+var import_vue15 = require("vue");
+var import_date_fns2 = require("date-fns");
+function useCalendar(date, locale) {
+  const currentDate = (0, import_vue15.ref)(isValidDate(date) ? date : /* @__PURE__ */ new Date());
+  const currentPanel = (0, import_vue15.ref)("date");
+  const nextMonth = /* @__PURE__ */ __name(() => {
+    currentDate.value = getNextMonth(currentDate.value);
+  }, "nextMonth");
+  const previousMonth = /* @__PURE__ */ __name(() => {
+    currentDate.value = getPreviousMonth(currentDate.value);
+  }, "previousMonth");
+  const nextYear = /* @__PURE__ */ __name(() => {
+    currentDate.value = (0, import_date_fns2.addYears)(currentDate.value, 1);
+  }, "nextYear");
+  const previousYear = /* @__PURE__ */ __name(() => {
+    currentDate.value = (0, import_date_fns2.addYears)(currentDate.value, -1);
+  }, "previousYear");
+  const changeYear = /* @__PURE__ */ __name((year) => {
+    currentDate.value = (0, import_date_fns2.setYear)(currentDate.value, year);
+  }, "changeYear");
+  const changeMonth = /* @__PURE__ */ __name((month) => {
+    currentDate.value = (0, import_date_fns2.setMonth)(currentDate.value, month);
+  }, "changeMonth");
+  const getSplitDates = (0, import_vue15.computed)(() => {
+    return {
+      day: currentDate.value.getDay(),
+      month: currentDate.value.getMonth(),
+      year: currentDate.value.getFullYear(),
+      monthLabel: locale.value.months[currentDate.value.getMonth()]
+    };
+  });
+  const getDates = (0, import_vue15.computed)(() => {
+    const {
+      year,
+      month
+    } = getSplitDates.value;
+    const arr = getCalendar({
+      firstDayOfWeek: locale.value.formatLocale.firstDayOfWeek || 0,
+      year,
+      month
+    });
+    return arr;
+  });
+  const getMonths = (0, import_vue15.computed)(() => {
+    const monthsLocale = locale.value.formatLocale.monthsShort || locale.value.months;
+    const months = monthsLocale.map((text, month) => {
+      return {
+        text,
+        month
+      };
+    });
+    return months;
+  });
+  const getYears = (0, import_vue15.computed)(() => {
+    const {
+      year
+    } = getSplitDates.value;
+    const firstYear = Math.floor(year / 10) * 10;
+    const years = [];
+    for (let i = 0; i < 10; i++) {
+      years.push(firstYear + i);
+    }
+    return years;
+  });
+  const getLabel = (0, import_vue15.computed)(() => {
+    const {
+      year,
+      monthLabel
+    } = getSplitDates.value;
+    if (currentPanel.value === "date")
+      return `${monthLabel} ${year}`;
+    if (currentPanel.value === "month")
+      return `${year}`;
+    if (currentPanel.value === "year")
+      return `${getYears.value[0]} - ${getYears.value[9]}`;
+    return "";
+  });
+  function changePanel(value) {
+    currentPanel.value = value;
+  }
+  __name(changePanel, "changePanel");
+  function setPanelDate(date2) {
+    currentDate.value = date2;
+  }
+  __name(setPanelDate, "setPanelDate");
+  return {
+    currentDate,
+    currentPanel,
+    nextMonth,
+    previousMonth,
+    nextYear,
+    previousYear,
+    changeYear,
+    changeMonth,
+    getDates,
+    getMonths,
+    getYears,
+    getLabel,
+    getSplitDates,
+    changePanel,
+    setPanelDate
+  };
+}
+__name(useCalendar, "useCalendar");
+
+// src/composables/useCalendarRange.ts
+var import_vue16 = require("vue");
+function useCalendarRange(props) {
+  const leftCalendar = startOfMonth(/* @__PURE__ */ new Date());
+  const rightCalendar = startOfMonth(getNextMonth(/* @__PURE__ */ new Date()));
+  const startDate = (0, import_vue16.ref)(props.modelValue[0]);
+  const endDate = (0, import_vue16.ref)(props.modelValue[1]);
+  const hoveredDate = (0, import_vue16.ref)();
+  const calendars = (0, import_vue16.ref)([leftCalendar, rightCalendar]);
+  const getCurrentDates = (0, import_vue16.computed)(() => {
+    if (startDate.value && !endDate.value)
+      return [startDate.value];
+    if (startDate.value && endDate.value)
+      return [startDate.value, endDate.value];
+    return [];
+  });
+  const calendarMinDiff = (0, import_vue16.computed)(() => {
+    const map = {
+      date: 1,
+      // type:date  min 1 month
+      month: 1 * 12,
+      // type:month min 1 year
+      year: 10 * 12
+      // type:year  min 10 year
+    };
+    return map[props.type] || map.date;
+  });
+  const calendarMaxDiff = (0, import_vue16.computed)(() => Infinity);
+  function setStartDate(date) {
+    startDate.value = date;
+  }
+  __name(setStartDate, "setStartDate");
+  function setEndDate(date) {
+    endDate.value = date;
+  }
+  __name(setEndDate, "setEndDate");
+  function setHoveredDate(date) {
+    hoveredDate.value = date;
+  }
+  __name(setHoveredDate, "setHoveredDate");
+  function getDateRangeStatus(cellDate) {
+    const status = {
+      inRange: false,
+      hoverInRange: false,
+      activeDragRange: false
+    };
+    const isInRange = /* @__PURE__ */ __name((data, range, fn = (v) => v.getTime()) => {
+      const value = fn(data);
+      let [min, max] = range.map(fn);
+      if (min > max) {
+        [min, max] = [max, min];
+      }
+      return value > min && value < max;
+    }, "isInRange");
+    if (getCurrentDates.value.length === 2 && isInRange(cellDate, getCurrentDates.value)) {
+      status.inRange = true;
+    }
+    if (getCurrentDates.value.length === 1 && hoveredDate.value && isInRange(cellDate, [getCurrentDates.value[0], hoveredDate.value])) {
+      status.hoverInRange = true;
+    }
+    if (getCurrentDates.value[0]) {
+      status.activeDragRange = true;
+    }
+    return status;
+  }
+  __name(getDateRangeStatus, "getDateRangeStatus");
+  function updateStartCalendar(value) {
+    updateCalendars([value, calendars.value[1]], 1);
+  }
+  __name(updateStartCalendar, "updateStartCalendar");
+  function updateEndCalendar(value) {
+    updateCalendars([calendars.value[0], value], 0);
+  }
+  __name(updateEndCalendar, "updateEndCalendar");
+  function updateCalendars(value, adjustIndex = 1) {
+    const gap = getCalendarGap(value);
+    if (gap) {
+      const calendar = new Date(value[adjustIndex]);
+      calendar.setMonth(calendar.getMonth() + (adjustIndex === 0 ? -gap : gap));
+      value[adjustIndex] = calendar;
+    }
+    calendars.value = value;
+  }
+  __name(updateCalendars, "updateCalendars");
+  function getCalendarGap(calendars2) {
+    const [calendarLeft, calendarRight] = calendars2;
+    const yearDiff = calendarRight.getFullYear() - calendarLeft.getFullYear();
+    const monthDiff = calendarRight.getMonth() - calendarLeft.getMonth();
+    const diff = yearDiff * 12 + monthDiff;
+    const min = calendarMinDiff.value;
+    const max = calendarMaxDiff.value;
+    if (diff < min) {
+      return min - diff;
+    }
+    if (diff > max) {
+      return max - diff;
+    }
+    return 0;
+  }
+  __name(getCalendarGap, "getCalendarGap");
+  return {
+    startDate,
+    endDate,
+    hoveredDate,
+    calendars,
+    getCurrentDates,
+    setStartDate,
+    setEndDate,
+    setHoveredDate,
+    getDateRangeStatus,
+    updateStartCalendar,
+    updateEndCalendar
+  };
+}
+__name(useCalendarRange, "useCalendarRange");
+
+// src/modules/date-picker.props.ts
+var calendarPanelProps = {
+  modelValue: {
+    type: Date
+  },
+  defaultValue: {
+    type: Date
+  },
+  type: {
+    type: String,
+    default: "date"
+  },
+  calendar: {
+    type: Date
+  },
+  isRange: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: true
+  },
+  disabledDate: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledMonth: {
+    type: Function,
+    default: () => {
+    }
+  },
+  disabledYear: {
+    type: Function,
+    default: () => {
+    }
+  },
+  getDateStatus: {
+    type: Function,
+    default: void 0
+  },
+  getMonthStatus: {
+    type: Function,
+    default: void 0
+  },
+  getYearStatus: {
+    type: Function,
+    default: void 0
+  },
+  isHideNotThisMonthDate: {
+    type: Boolean
+  }
+};
+var calendarPanelRangeProps = {
+  ...calendarPanelProps,
+  modelValue: {
+    type: Array
+  }
+};
+var datePickerProps = {
+  id: {
+    type: String
+  },
+  modelValue: {
+    type: [String, Number, Date, Array]
+  },
+  type: calendarPanelProps.type,
+  valueType: {
+    type: String,
+    default: "date"
+  },
+  format: {
+    type: String
+  },
+  rangeSeparator: {
+    type: String,
+    default: " - "
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  errorMessage: {
+    type: String,
+    default: "Format tanggal/waktu salah"
+  },
+  disabledMessage: {
+    type: String,
+    default: ""
+  },
+  lang: {
+    type: Object,
+    default: () => {
+    }
+  },
+  inputAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  contentAttr: {
+    type: Object,
+    default: () => ({})
+  },
+  isRange: calendarPanelProps.isRange,
+  isReadOnly: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  },
+  isClearable: {
+    type: Boolean,
+    default: true
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  usePortal: {
+    type: Boolean,
+    default: false
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: false
+  },
+  isInline: {
+    type: Boolean,
+    default: false
+  },
+  isNotClickable: {
+    type: Boolean,
+    default: false
+  },
+  isDisableHeader: {
+    type: Boolean,
+    default: false
+  },
+  isShowShortcut: {
+    type: Boolean,
+    default: false
+  },
+  disabledDate: calendarPanelProps.disabledDate,
+  disabledMonth: calendarPanelProps.disabledMonth,
+  disabledYear: calendarPanelProps.disabledYear
+};
+
+// src/modules/date-picker.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [DatePickerProvider, useDatePickerContext] = (0, import_pixel3_utils.usePixelCreateContext)("DatePickerContext");
+
+// src/modules/date-picker.locales.ts
+var import_en = __toESM(require("date-format-parse/lib/locale/en"));
+var locales = {
+  formatLocale: import_en.default,
+  days: import_en.default.weekdaysMin,
+  months: import_en.default.monthsShort,
+  yearFormat: "YYYY",
+  monthFormat: "MMM",
+  monthBeforeYear: true,
+  todayText: "Today",
+  thisMonthText: "This Month",
+  thisYearText: "This Year"
+};
+function getLocale(config) {
+  if (!config) {
+    return locales;
+  }
+  return assign(locales, config);
+}
+__name(getLocale, "getLocale");
+
+// src/calendar-panel.tsx
+var import_recipes8 = require("@mekari/pixel3-styled-system/recipes");
+var CalendarPanel = (0, import_vue18.defineComponent)({
+  name: "CalendarPanel",
+  props: calendarPanelProps,
+  emits: ["update:modelValue", "mouseEnter", "mouseLeave", "updateCalendar"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      locale
+    } = useDatePickerContext();
+    const restValue = (0, import_vue18.ref)(props.modelValue);
+    const {
+      currentDate: currentPanelDate,
+      currentPanel,
+      changePanel,
+      getDates,
+      getMonths,
+      getYears,
+      nextMonth,
+      previousMonth,
+      nextYear,
+      previousYear,
+      getLabel,
+      changeMonth,
+      changeYear
+    } = useCalendar(props.modelValue || props.defaultValue, locale);
+    function onSelectDate(date) {
+      currentPanelDate.value = date;
+      restValue.value = date;
+      emit("update:modelValue", restValue.value);
+    }
+    __name(onSelectDate, "onSelectDate");
+    function onSelectMonth(value, year) {
+      if (props.type === "month") {
+        const day = 1;
+        const month = value;
+        const date = new Date(year, month, day);
+        restValue.value = date;
+        emit("update:modelValue", restValue.value);
+        return;
+      }
+      changeMonth(value);
+      changePanel("date");
+    }
+    __name(onSelectMonth, "onSelectMonth");
+    function onSelectYear(value) {
+      if (props.type === "year") {
+        const day = 1;
+        const month = currentPanelDate.value.getMonth();
+        const year = value;
+        const date = new Date(year, month, day);
+        restValue.value = date;
+        emit("update:modelValue", restValue.value);
+        return;
+      }
+      changeYear(value);
+      changePanel("month");
+    }
+    __name(onSelectYear, "onSelectYear");
+    function getDateStatus(date) {
+      let status = "default";
+      if ((0, import_date_fns3.isToday)(date))
+        status = "today";
+      if ((0, import_date_fns3.isEqual)(props.modelValue, date)) {
+        status = "selected";
+      }
+      const isCurrentMonth = currentPanelDate.value.getMonth() === date.getMonth();
+      if (!isCurrentMonth)
+        status = "notThisMonth";
+      if (props.getDateStatus && props.getDateStatus(date)) {
+        status = props.getDateStatus(date);
+        if (props.isHideNotThisMonthDate && !isCurrentMonth) {
+          status = "notThisMonth";
+        }
+      }
+      return {
+        status,
+        isDisabled: props.disabledDate ? props.disabledDate(date) : false,
+        // TODO : Handle show pin bar
+        isShowPinbar: false
+      };
+    }
+    __name(getDateStatus, "getDateStatus");
+    function getMonthStatus(month, year) {
+      let status = "default";
+      const isCurrentMonth = currentPanelDate.value.getMonth() === month && year === (/* @__PURE__ */ new Date()).getFullYear();
+      if (isCurrentMonth)
+        status = "today";
+      if (props.type === "month" && props.modelValue) {
+        const isMonthEqual = props.modelValue.getMonth() === month;
+        const isYearEqual = props.modelValue.getFullYear() === currentPanelDate.value.getFullYear();
+        const isSelected = isMonthEqual && isYearEqual;
+        if (isSelected)
+          status = "selected";
+      }
+      if (props.getMonthStatus && props.getMonthStatus(month, year)) {
+        status = props.getMonthStatus(month, year);
+      }
+      return {
+        status,
+        isDisabled: props.disabledMonth(month, year) || false
+      };
+    }
+    __name(getMonthStatus, "getMonthStatus");
+    function getYearStatus(year) {
+      var _a;
+      let status = "default";
+      const isCurrentYear = (/* @__PURE__ */ new Date()).getFullYear() === year;
+      if (isCurrentYear)
+        status = "today";
+      const isSelected = ((_a = props.modelValue) == null ? void 0 : _a.getFullYear()) === year;
+      if (isSelected)
+        status = "selected";
+      if (props.getYearStatus && props.getYearStatus(year)) {
+        status = props.getYearStatus(year);
+      }
+      return {
+        status,
+        isDisabled: props.disabledYear(year) || false
+      };
+    }
+    __name(getYearStatus, "getYearStatus");
+    function initCalendar() {
+      if (props.calendar) {
+        const calendarDate = props.calendar;
+        currentPanelDate.value = calendarDate;
+      }
+    }
+    __name(initCalendar, "initCalendar");
+    (0, import_vue18.watch)(() => props.modelValue, (newValue) => {
+      if (newValue)
+        restValue.value = newValue;
+    }, {
+      immediate: true
+    });
+    (0, import_vue18.watch)(() => props.type, (newValue) => {
+      if (newValue)
+        currentPanel.value = newValue;
+    }, {
+      immediate: true
+    });
+    (0, import_vue18.watch)(() => currentPanelDate.value, (newValue) => {
+      if (newValue) {
+        emit("updateCalendar", newValue);
+      }
+    });
+    (0, import_vue18.watch)(() => props.calendar, () => {
+      initCalendar();
+    }, {
+      immediate: true
+    });
+    return () => {
+      if (currentPanel.value === "date") {
+        return (0, import_vue17.createVNode)(TableDate, {
+          "days": locale.value.days,
+          "dates": getDates.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.todayText,
+          "onNext": nextMonth,
+          "onPrevious": previousMonth,
+          "onClickHeaderLabel": () => changePanel("year"),
+          "onSelect": onSelectDate,
+          "getDateStatus": getDateStatus,
+          "isShowShortcut": props.isShowShortcut,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isHideNotThisMonthDate": props.isHideNotThisMonthDate
+        }, null);
+      }
+      if (currentPanel.value === "month") {
+        return (0, import_vue17.createVNode)(TableMonth, {
+          "calendar": currentPanelDate.value,
+          "months": getMonths.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.thisMonthText,
+          "onNext": nextYear,
+          "onPrevious": previousYear,
+          "onClickHeaderLabel": () => changePanel("year"),
+          "onSelect": onSelectMonth,
+          "getMonthStatus": getMonthStatus,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isShowShortcut": props.isShowShortcut
+        }, null);
+      }
+      if (currentPanel.value === "year") {
+        return (0, import_vue17.createVNode)(TableYear, {
+          "years": getYears.value,
+          "headerLabel": getLabel.value,
+          "shortcutLabel": locale.value.thisYearText,
+          "onNext": (year) => changeYear(year),
+          "onPrevious": (year) => changeYear(year),
+          "onSelect": onSelectYear,
+          "getYearStatus": getYearStatus,
+          "onMouseEnter": (value) => emit("mouseEnter", value),
+          "onMouseLeave": () => emit("mouseLeave"),
+          "isShowShortcut": props.isShowShortcut
+        }, null);
+      }
+    };
+  }
+});
+var CalendarPanelRange = (0, import_vue18.defineComponent)({
+  name: "CalendarPanelRange",
+  props: calendarPanelRangeProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    var _a;
+    const {
+      startDate,
+      endDate,
+      hoveredDate,
+      calendars,
+      setStartDate,
+      setEndDate,
+      setHoveredDate,
+      getDateRangeStatus,
+      getCurrentDates,
+      updateStartCalendar,
+      updateEndCalendar
+    } = useCalendarRange(props);
+    if ((_a = props.modelValue) == null ? void 0 : _a.length) {
+      updateStartCalendar(props.modelValue[0]);
+      updateEndCalendar(props.modelValue[1]);
+    }
+    function onSelectDate(date) {
+      if (props.type === "week" || props.type === "biweek") {
+        const gap = {
+          week: 6,
+          biweek: 13
+        };
+        const startDate2 = startOfWeek(date, getLocale().formatLocale.firstDayOfWeek);
+        const endDate2 = addDays(startDate2, gap[props.type]);
+        setStartDate(startDate2);
+        setEndDate(endDate2);
+        emit("update:modelValue", getCurrentDates.value);
+        return;
+      }
+      if (startDate.value && endDate.value) {
+        setStartDate(void 0);
+        setEndDate(void 0);
+        setStartDate(date);
+        return;
+      }
+      if (startDate.value && !endDate.value) {
+        setEndDate(date);
+        if (startDate.value && endDate.value) {
+          emit("update:modelValue", getCurrentDates.value);
+        }
+        return;
+      }
+      if (!startDate.value && !endDate.value) {
+        setStartDate(date);
+        if (startDate.value && endDate.value) {
+          emit("update:modelValue", getCurrentDates.value);
+        }
+        return;
+      }
+    }
+    __name(onSelectDate, "onSelectDate");
+    function getDateStatus(date) {
+      var _a2, _b;
+      let status = "default";
+      if ((0, import_date_fns3.isToday)(date))
+        status = "today";
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(date);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && (0, import_date_fns3.isEqual)(hoveredDate.value, date)) {
+        status = "selected";
+      }
+      if ((0, import_date_fns3.isEqual)(startDate.value, date)) {
+        status = "selected";
+      }
+      if ((0, import_date_fns3.isEqual)(endDate.value, date)) {
+        status = "selected";
+      }
+      if (props.type === "week") {
+        if ((_a2 = props.modelValue) == null ? void 0 : _a2.length) {
+          const startDate2 = startOfWeek(props.modelValue[0], getLocale().formatLocale.firstDayOfWeek);
+          const endDate2 = addDays(startDate2, 6);
+          if (isDateBetween(date, startDate2, endDate2)) {
+            status = "weekSelectedMiddle";
+            if ((0, import_date_fns3.isEqual)(startDate2, date))
+              status = "weekSelectedStart";
+            if ((0, import_date_fns3.isEqual)(endDate2, date))
+              status = "weekSelectedEnd";
+          }
+        }
+        if (hoveredDate.value) {
+          const startDate2 = startOfWeek(hoveredDate.value, getLocale().formatLocale.firstDayOfWeek);
+          const endDate2 = addDays(startDate2, 6);
+          if (isDateBetween(date, startDate2, endDate2)) {
+            status = "weekHoveredMiddle";
+            if ((0, import_date_fns3.isEqual)(startDate2, date))
+              status = "weekHoveredStart";
+            if ((0, import_date_fns3.isEqual)(endDate2, date))
+              status = "weekHoveredEnd";
+          }
+        }
+      }
+      if (props.type === "biweek") {
+        const getBiweekDates = /* @__PURE__ */ __name((date2) => {
+          const firstWeekStartDate = startOfWeek(date2, getLocale().formatLocale.firstDayOfWeek);
+          const firstWeekEndDate = addDays(firstWeekStartDate, 6);
+          const secondWeekStartDate = startOfWeek(addDays(firstWeekStartDate, 7), getLocale().formatLocale.firstDayOfWeek);
+          const secondWeekEndDate = addDays(secondWeekStartDate, 6);
+          return {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          };
+        }, "getBiweekDates");
+        if ((_b = props.modelValue) == null ? void 0 : _b.length) {
+          const {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          } = getBiweekDates(props.modelValue[0]);
+          if (isDateBetween(date, firstWeekStartDate, secondWeekEndDate)) {
+            status = "weekSelectedMiddle";
+            if ((0, import_date_fns3.isEqual)(firstWeekStartDate, date))
+              status = "weekSelectedStart";
+            if ((0, import_date_fns3.isEqual)(firstWeekEndDate, date))
+              status = "weekSelectedEnd";
+            if ((0, import_date_fns3.isEqual)(secondWeekStartDate, date))
+              status = "weekSelectedStart";
+            if ((0, import_date_fns3.isEqual)(secondWeekEndDate, date))
+              status = "weekSelectedEnd";
+          }
+        }
+        if (hoveredDate.value) {
+          const {
+            firstWeekStartDate,
+            firstWeekEndDate,
+            secondWeekStartDate,
+            secondWeekEndDate
+          } = getBiweekDates(hoveredDate.value);
+          if (isDateBetween(date, firstWeekStartDate, secondWeekEndDate)) {
+            status = "weekHoveredMiddle";
+            if ((0, import_date_fns3.isEqual)(firstWeekStartDate, date))
+              status = "weekHoveredStart";
+            if ((0, import_date_fns3.isEqual)(firstWeekEndDate, date))
+              status = "weekHoveredEnd";
+            if ((0, import_date_fns3.isEqual)(secondWeekStartDate, date))
+              status = "weekHoveredStart";
+            if ((0, import_date_fns3.isEqual)(secondWeekEndDate, date))
+              status = "weekHoveredEnd";
+          }
+        }
+      }
+      return status;
+    }
+    __name(getDateStatus, "getDateStatus");
+    function getMonthStatus(month, year) {
+      let status = "default";
+      const parseToDate = createDate(year, month);
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(parseToDate);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && (0, import_date_fns3.isEqual)(hoveredDate.value, parseToDate)) {
+        status = "selected";
+      }
+      if ((0, import_date_fns3.isEqual)(startDate.value, parseToDate)) {
+        status = "selected";
+      }
+      if ((0, import_date_fns3.isEqual)(endDate.value, parseToDate)) {
+        status = "selected";
+      }
+      return status;
+    }
+    __name(getMonthStatus, "getMonthStatus");
+    function getYearStatus(year) {
+      var _a2, _b, _c;
+      let status = "default";
+      const parseToDate = createDate(year);
+      const {
+        inRange,
+        hoverInRange
+      } = getDateRangeStatus(parseToDate);
+      if (inRange || hoverInRange) {
+        status = "range";
+      }
+      if (startDate.value && !endDate.value && ((_a2 = hoveredDate.value) == null ? void 0 : _a2.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      if (((_b = startDate.value) == null ? void 0 : _b.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      if (((_c = endDate.value) == null ? void 0 : _c.getFullYear()) === parseToDate.getFullYear()) {
+        status = "selected";
+      }
+      return status;
+    }
+    __name(getYearStatus, "getYearStatus");
+    return () => {
+      const isWeekAndBiweek = props.type === "week" || props.type === "biweek";
+      const classes = isWeekAndBiweek ? "" : (0, import_recipes8.calendarPanelRangeRecipe)();
+      const calendarPanelAttrs = {
+        isRange: true,
+        type: props.type,
+        isHideNotThisMonthDate: props.type === "week" || props.type === "biweek" ? false : true,
+        isShowShortcut: false,
+        getDateStatus,
+        getMonthStatus,
+        getYearStatus,
+        "onUpdate:modelValue": (date) => onSelectDate(date),
+        onMouseEnter: (date) => setHoveredDate(date),
+        onMouseLeave: () => setHoveredDate(void 0)
+      };
+      const leftNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+        "data-pixel-parts": "CalendarPanelLeft"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateStartCalendar(value),
+        "calendar": calendars.value[0]
+      }), null);
+      const rightNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+        "data-pixel-parts": "CalendarPanelRight"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateEndCalendar(value),
+        "calendar": calendars.value[1]
+      }), null);
+      const weekAndBiweekNode = (0, import_vue17.createVNode)(CalendarPanel, (0, import_vue17.mergeProps)({
+        "data-pixel-parts": "CalendarPanel"
+      }, calendarPanelAttrs, {
+        "onUpdateCalendar": (value) => updateStartCalendar(value),
+        "calendar": props.modelValue[0],
+        "type": "date"
+      }), null);
+      return (0, import_vue17.createVNode)("div", {
+        "class": classes
+      }, [isWeekAndBiweek ? weekAndBiweekNode : [leftNode, rightNode]]);
+    };
+  }
+});
+
+// src/modules/date-picker.hooks.ts
+var import_vue19 = require("vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_date_format_parse = require("date-format-parse");
+function useDatePicker(props, emit) {
+  const getId = props.id || (0, import_pixel3_utils2.getUniqueId)("", "datepicker").value;
+  const currentLabel = (0, import_vue19.ref)("");
+  const isOutside = (0, import_vue19.ref)(true);
+  const isPopoverOpen = (0, import_vue19.ref)(false);
+  const isInnerInvalid = (0, import_vue19.ref)(false);
+  const userInput = (0, import_vue19.ref)(null);
+  const innerValueDate = (0, import_vue19.ref)();
+  const isUseRange = (0, import_vue19.computed)(() => {
+    if (props.isRange || props.type === "biweek" || props.type === "week")
+      return true;
+    return false;
+  });
+  const innerFormat = (0, import_vue19.computed)(() => {
+    const format2 = {
+      date: "DD-MM-YYYY",
+      datetime: "DD-MM-YYYY HH:mm:ss",
+      year: "YYYY",
+      month: "YYYY-MM",
+      time: "HH:mm:ss",
+      week: "DD-MM-YYYY",
+      biweek: "DD-MM-YYYY"
+    };
+    return props.format || format2[props.type] || format2.date;
+  });
+  const innerValue = (0, import_vue19.computed)(() => {
+    if (isUseRange.value) {
+      if (isValidRangeDate(props.modelValue)) {
+        const startDate = valueToDate(props.modelValue[0]);
+        const endDate = valueToDate(props.modelValue[1]);
+        return [startDate, endDate];
+      }
+      return [];
+    }
+    return valueToDate(props.modelValue);
+  });
+  const text = (0, import_vue19.computed)(() => {
+    if (userInput.value !== null)
+      return userInput.value;
+    if (!innerValue.value)
+      return "";
+    if (isUseRange.value) {
+      if (!isValidRangeDate(innerValue.value))
+        return "";
+    } else {
+      if (!isValidDate(innerValue.value))
+        return "";
+    }
+    if (Array.isArray(innerValue.value)) {
+      return innerValue.value.map((v) => formatDate(v)).join(props.rangeSeparator);
+    }
+    return formatDate(innerValue.value);
+  });
+  const locale = (0, import_vue19.computed)(() => {
+    if (isObject(props.lang)) {
+      return getLocale(props.lang);
+    }
+    return getLocale();
+  });
+  function onOpenPopover() {
+    if (props.isReadOnly)
+      return;
+    isPopoverOpen.value = true;
+  }
+  __name(onOpenPopover, "onOpenPopover");
+  function onClosePopover() {
+    isPopoverOpen.value = false;
+  }
+  __name(onClosePopover, "onClosePopover");
+  function onBlur() {
+    onClosePopover();
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.blur();
+  }
+  __name(onBlur, "onBlur");
+  function handleForceFocusToInput() {
+    const inputEl = document.getElementById(`${getId}-control`);
+    inputEl == null ? void 0 : inputEl.focus();
+  }
+  __name(handleForceFocusToInput, "handleForceFocusToInput");
+  function onClear() {
+    isOutside.value = true;
+    userInput.value = null;
+    emit("update:modelValue", "");
+    onBlur();
+  }
+  __name(onClear, "onClear");
+  function onInputChange(e) {
+    var _a;
+    if (e) {
+      const target = e.target;
+      userInput.value = typeof e === "string" ? e : target.value;
+      if (userInput.value === null)
+        return;
+      const text2 = ((_a = userInput.value) == null ? void 0 : _a.trim()) || "";
+      if (text2 === "") {
+        onClear();
+        isInnerInvalid.value = false;
+        return;
+      }
+      let date;
+      if (isUseRange.value) {
+        let arr = text2.split(props.rangeSeparator);
+        if (arr.length !== 2) {
+          arr = text2.split(props.rangeSeparator.trim());
+        }
+        date = arr.map((v) => parseDate(v.trim()));
+      } else {
+        date = parseDate(text2);
+      }
+      if (isValidValueAndNotDisabled(date)) {
+        innerValueDate.value = date;
+        (0, import_vue19.nextTick)(() => {
+          isOutside.value = true;
+          isInnerInvalid.value = false;
+          onBlur();
+        });
+      } else {
+        isInnerInvalid.value = true;
+        emit("error", text2);
+      }
+    }
+  }
+  __name(onInputChange, "onInputChange");
+  function onEmitModelValue(value) {
+    userInput.value = null;
+    innerValueDate.value = value;
+    if (isUseRange.value) {
+      const dates = value;
+      const startDate = dateToValue(new Date(dates[0]));
+      const endDate = dateToValue(new Date(dates[1]));
+      emit("update:modelValue", [startDate, endDate]);
+    } else {
+      emit("update:modelValue", dateToValue(new Date(value)));
+    }
+    (0, import_vue19.nextTick)(() => {
+      isOutside.value = true;
+      onBlur();
+    });
+  }
+  __name(onEmitModelValue, "onEmitModelValue");
+  function parseDate(value) {
+    const backupDate = /* @__PURE__ */ new Date();
+    return (0, import_date_format_parse.parse)(value, innerFormat.value, {
+      locale: locale.value.formatLocale,
+      backupDate
+    });
+  }
+  __name(parseDate, "parseDate");
+  function formatDate(date) {
+    return (0, import_date_format_parse.format)(date, innerFormat.value, {
+      locale: locale.value.formatLocale
+    });
+  }
+  __name(formatDate, "formatDate");
+  function valueToDate(value) {
+    switch (props.valueType) {
+      case "date":
+        return value instanceof Date ? new Date(value.getTime()) : /* @__PURE__ */ new Date(NaN);
+      case "timestamp":
+        return typeof value === "number" ? new Date(value) : /* @__PURE__ */ new Date(NaN);
+      case "string":
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+      default:
+        return typeof value === "string" ? parseDate(value) : /* @__PURE__ */ new Date(NaN);
+    }
+  }
+  __name(valueToDate, "valueToDate");
+  function dateToValue(date) {
+    if (!isValidDate(date))
+      return null;
+    switch (props.valueType) {
+      case "date":
+        return date;
+      case "timestamp":
+        return date.getTime();
+      case "string":
+        return formatDate(date);
+      default:
+        return formatDate(date);
+    }
+  }
+  __name(dateToValue, "dateToValue");
+  function isValidValue(value) {
+    if (isUseRange.value)
+      return isValidRangeDate(value);
+    return isValidDate(value);
+  }
+  __name(isValidValue, "isValidValue");
+  function isValidValueAndNotDisabled(value) {
+    if (!isValidValue(value))
+      return false;
+    const disabledDate = typeof props.disabledDate === "function" ? props.disabledDate : () => false;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    return value.every((v) => !disabledDate(v));
+  }
+  __name(isValidValueAndNotDisabled, "isValidValueAndNotDisabled");
+  const rootAttrs = {
+    style: {
+      width: "100%",
+      position: "relative"
+    },
+    onMouseenter: () => {
+      isOutside.value = false;
+    },
+    onMouseleave: () => {
+      isOutside.value = true;
+    }
+  };
+  return {
+    rootAttrs,
+    isOutside,
+    isPopoverOpen,
+    currentLabel,
+    userInput,
+    innerFormat,
+    innerValueDate,
+    innerValue,
+    isUseRange,
+    onOpenPopover,
+    onClosePopover,
+    onClear,
+    onInputChange,
+    getId,
+    onBlur,
+    handleForceFocusToInput,
+    text,
+    locale,
+    isInnerInvalid,
+    onEmitModelValue
+  };
+}
+__name(useDatePicker, "useDatePicker");
+
+// src/date-picker.tsx
+var import_recipes9 = require("@mekari/pixel3-styled-system/recipes");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, import_vue20.isVNode)(s);
+}
+__name(_isSlot, "_isSlot");
+var MpDatePicker = (0, import_vue21.defineComponent)({
+  name: "MpDatePicker",
+  props: datePickerProps,
+  emits: ["update:modelValue", "error"],
+  setup(props, {
+    emit
+  }) {
+    const {
+      text,
+      getId,
+      innerValue,
+      locale,
+      isOutside,
+      isPopoverOpen,
+      isInnerInvalid,
+      isUseRange,
+      onOpenPopover,
+      onBlur,
+      onClear,
+      onInputChange,
+      onEmitModelValue
+    } = useDatePicker(props, emit);
+    DatePickerProvider({
+      rootProps: props,
+      locale
+    });
+    return () => {
+      const {
+        root,
+        popoverContent
+      } = (0, import_recipes9.datePickerSlotRecipe)();
+      const inputNode = (0, import_vue20.createVNode)(import_pixel3_input.MpInputGroup, null, {
+        default: () => [(0, import_vue20.createVNode)(import_pixel3_input.MpInput, {
+          "id": getId,
+          "placeholder": props.placeholder,
+          "isClearable": props.isClearable,
+          "isDisabled": props.isDisabled,
+          "isInvalid": props.isInvalid || isInnerInvalid.value,
+          "isReadOnly": props.isReadOnly,
+          "modelValue": text.value,
+          "onInput": onInputChange,
+          "onClear": onClear,
+          "onFocus": () => onOpenPopover(),
+          "onBlur": (e) => {
+            if (isOutside.value) {
+              onBlur();
+              return;
+            }
+            const target = e.target;
+            target.focus();
+          }
+        }, null), (0, import_vue20.createVNode)(import_pixel3_input.MpInputRightAddon, null, {
+          default: () => [(0, import_vue20.createVNode)(import_pixel3_icon.MpIcon, {
+            "name": "calendar"
+          }, null)]
+        })]
+      });
+      const calendarPanelAttrs = {
+        type: props.type,
+        "onUpdate:modelValue": onEmitModelValue,
+        disabledDate: props.disabledDate,
+        disabledMonth: props.disabledMonth,
+        disabledYear: props.disabledYear
+      };
+      const panelNode = isUseRange.value ? (0, import_vue20.createVNode)(CalendarPanelRange, (0, import_vue20.mergeProps)(calendarPanelAttrs, {
+        "modelValue": innerValue.value
+      }), null) : (0, import_vue20.createVNode)(CalendarPanel, (0, import_vue20.mergeProps)(calendarPanelAttrs, {
+        "modelValue": innerValue.value
+      }), null);
+      const withPopover = (0, import_vue20.createVNode)(import_pixel3_popover.MpPopover, {
+        "id": getId,
+        "isManual": true,
+        "isOpen": isPopoverOpen.value,
+        "isKeepAlive": props.isKeepAlive,
+        "usePortal": props.usePortal
+      }, {
+        default: () => [(0, import_vue20.createVNode)(import_pixel3_popover.MpPopoverTrigger, null, _isSlot(inputNode) ? inputNode : {
+          default: () => [inputNode]
+        }), (0, import_vue20.createVNode)(import_pixel3_popover.MpPopoverContent, {
+          "class": popoverContent,
+          "style": {
+            width: props.isRange ? "590px" : ""
+          },
+          "onMouseenter": () => isOutside.value = false,
+          "onMouseleave": () => isOutside.value = true
+        }, _isSlot(panelNode) ? panelNode : {
+          default: () => [panelNode]
+        })]
+      });
+      return (0, import_vue20.createVNode)("div", {
+        "class": root,
+        "onMouseenter": () => isOutside.value = false,
+        "onMouseleave": () => isOutside.value = true
+      }, [props.isInline ? panelNode : withPopover]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDatePicker
+});