@rotki/ui-library 2.15.0 → 2.16.1

package/dist/components/calendar/RuiCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendar.js","names":[],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst calendarStyles = tv({\n  base: 'w-[18.75rem] bg-white dark:bg-rui-grey-900 overflow-hidden',\n  variants: {\n    bordered: {\n      true: 'rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800',\n    },\n  },\n});\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n\n  emit('update:pages', [{ title: get(monthTitle) }]);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,151 @@
+import { useRotkiTheme } from "../../composables/theme.js";
+import { tv } from "../../utils/tv.js";
+import { CalendarStateSymbol } from "./state.js";
+import RuiCalendarGrid_default from "./RuiCalendarGrid.js";
+import RuiCalendarHeader_default from "./RuiCalendarHeader.js";
+import { computed, createElementBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, provide, ref, useModel, watch } from "vue";
+import { get, isDefined, set } from "@vueuse/core";
+//#region src/components/calendar/RuiCalendar.vue?vue&type=script&setup=true&lang.ts
+var RuiCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiCalendar",
+	inheritAttrs: false,
+	__name: "RuiCalendar",
+	props: /* @__PURE__ */ mergeModels({
+		maxDate: {},
+		minDate: {},
+		allowEmpty: {
+			type: Boolean,
+			default: false
+		},
+		borderless: {
+			type: Boolean,
+			default: false
+		}
+	}, {
+		"modelValue": { required: false },
+		"modelModifiers": {},
+		"menu-open": {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		"menu-openModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:pages"], ["update:modelValue", "update:menu-open"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const model = useModel(__props, "modelValue");
+		const isMenuOpen = useModel(__props, "menu-open");
+		const emit = __emit;
+		const currentDate = ref(isDefined(model) ? new Date(get(model)) : /* @__PURE__ */ new Date());
+		const selectedDate = ref(isDefined(model) ? new Date(get(model)) : void 0);
+		const viewMonth = ref(get(currentDate).getMonth());
+		const viewYear = ref(get(currentDate).getFullYear());
+		const { isDark } = useRotkiTheme();
+		const calendarStyles = tv({
+			base: "w-[18.75rem] bg-white dark:bg-rui-grey-900 overflow-hidden",
+			variants: { bordered: { true: "rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800" } }
+		});
+		const ui = computed(() => calendarStyles({ bordered: !__props.borderless }));
+		const monthTitle = computed(() => {
+			return new Date(get(viewYear), get(viewMonth)).toLocaleString("default", {
+				month: "long",
+				year: "numeric"
+			});
+		});
+		provide(CalendarStateSymbol.valueOf(), {
+			viewMonth,
+			viewYear,
+			selectedDate,
+			maxDate: computed(() => __props.maxDate ? new Date(__props.maxDate) : void 0),
+			minDate: computed(() => __props.minDate ? new Date(__props.minDate) : void 0),
+			isDark,
+			allowEmpty: __props.allowEmpty
+		});
+		function moveMonth(delta) {
+			let newMonth = get(viewMonth) + delta;
+			let newYear = get(viewYear);
+			if (newMonth > 11) {
+				newMonth = 0;
+				newYear++;
+			} else if (newMonth < 0) {
+				newMonth = 11;
+				newYear--;
+			}
+			set(viewMonth, newMonth);
+			set(viewYear, newYear);
+			emit("update:pages", [{ title: get(monthTitle) }]);
+		}
+		function move(date) {
+			const newDate = new Date(date);
+			set(viewMonth, newDate.getMonth());
+			set(viewYear, newDate.getFullYear());
+		}
+		function selectMonth(selection) {
+			set(viewMonth, selection.month);
+			set(viewYear, selection.year);
+			if (isDefined(selectedDate)) {
+				const current = get(selectedDate);
+				const currentDay = current.getDate();
+				const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();
+				const adjustedDay = Math.min(currentDay, daysInNewMonth);
+				const newDate = new Date(current);
+				newDate.setFullYear(selection.year);
+				newDate.setDate(1);
+				newDate.setMonth(selection.month);
+				newDate.setDate(adjustedDay);
+				set(selectedDate, newDate);
+			}
+		}
+		watch(selectedDate, (date) => {
+			if (!date && !__props.allowEmpty) return;
+			if (date) {
+				set(model, new Date(date));
+				if (get(viewMonth) !== date.getMonth()) set(viewMonth, date.getMonth());
+				if (get(viewYear) !== date.getFullYear()) set(viewYear, date.getFullYear());
+			} else set(model, void 0);
+		});
+		watch(model, (newValue) => {
+			if (newValue === void 0) {
+				set(selectedDate, void 0);
+				return;
+			}
+			const date = new Date(newValue);
+			if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {
+				set(selectedDate, new Date(newValue));
+				set(viewMonth, date.getMonth());
+				set(viewYear, date.getFullYear());
+			}
+		});
+		__expose({ move });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value) }, [createVNode(RuiCalendarHeader_default, {
+				"menu-open": isMenuOpen.value,
+				"onUpdate:menuOpen": _cache[0] || (_cache[0] = ($event) => isMenuOpen.value = $event),
+				title: monthTitle.value,
+				"view-month": viewMonth.value,
+				"view-year": viewYear.value,
+				onPrevMonth: _cache[1] || (_cache[1] = ($event) => moveMonth(-1)),
+				onNextMonth: _cache[2] || (_cache[2] = ($event) => moveMonth(1)),
+				onSelectMonth: _cache[3] || (_cache[3] = ($event) => selectMonth($event))
+			}, null, 8, [
+				"menu-open",
+				"title",
+				"view-month",
+				"view-year"
+			]), createVNode(RuiCalendarGrid_default, {
+				modelValue: selectedDate.value,
+				"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => selectedDate.value = $event),
+				"view-month": viewMonth.value,
+				"view-year": viewYear.value
+			}, null, 8, [
+				"modelValue",
+				"view-month",
+				"view-year"
+			])], 2);
+		};
+	}
+});
+//#endregion
+export { RuiCalendar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiCalendar.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/calendar/RuiCalendar.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst calendarStyles = tv({\n  base: 'w-[18.75rem] bg-white dark:bg-rui-grey-900 overflow-hidden',\n  variants: {\n    bordered: {\n      true: 'rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800',\n    },\n  },\n});\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n\n  emit('update:pages', [{ title: get(monthTitle) }]);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/calendar/RuiCalendarGrid.js

@@ -0,0 +1,7 @@
+import RuiCalendarGrid_vue_vue_type_script_setup_true_lang_default from "./RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/RuiCalendarGrid.vue
+var RuiCalendarGrid_default = RuiCalendarGrid_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiCalendarGrid_default as default };
+
+//# sourceMappingURL=RuiCalendarGrid.js.map

package/dist/components/calendar/RuiCalendarGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarGrid.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { inject, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getDaysOfWeek,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { tv } from '@/utils/tv';\n\ndefineOptions({\n  name: 'RuiCalendarGrid',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Helper functions to reduce duplication\nfunction createDateKey(date: Date): string {\n  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;\n}\n\n// Pre-calculated constants\nconst daysOfWeek = getDaysOfWeek();\nconst today = new Date();\nconst todayKey = createDateKey(today);\n\nconst dayButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm rounded-full mx-auto max-w-[2.25rem] transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary text-white hover:bg-rui-primary/90 dark:hover:bg-rui-primary/90',\n    },\n    currentMonth: {\n      true: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',\n      false: 'text-gray-400 dark:text-gray-600',\n    },\n    inRange: {\n      false: 'opacity-50 cursor-not-allowed hover:bg-transparent',\n    },\n    today: {\n      true: `relative after:content-[''] after:absolute after:size-1 after:rounded-full after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:bg-rui-primary`,\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      class: 'text-white dark:text-white',\n    },\n  ],\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst calendarDays = ref<\n  Array<{\n    date: Date;\n    isCurrentMonth: boolean;\n    isInRange: boolean;\n    isSelected: boolean;\n    isToday: boolean;\n    key: string;\n    dayNumber: number;\n  }>\n>([]);\n\nfunction createDayData(\n  date: Date,\n  isCurrentMonth: boolean,\n  modelValue: Date | null | undefined,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): {\n  date: Date;\n  isCurrentMonth: boolean;\n  isInRange: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n  dayNumber: number;\n} {\n  const key = createDateKey(date);\n  return {\n    date,\n    isCurrentMonth,\n    isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),\n    isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,\n    isToday: key === todayKey,\n    key,\n    dayNumber: date.getDate(),\n  };\n}\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateCalendarDays(): void {\n  const firstDayOfMonth = new Date(viewYear, viewMonth, 1);\n  const lastDayOfMonth = new Date(viewYear, viewMonth + 1, 0);\n  const daysInMonth = lastDayOfMonth.getDate();\n  const startingDayOfWeek = firstDayOfMonth.getDay();\n\n  const { maxDate, minDate } = calendarState;\n  const modelValue = get(model);\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  const result = [];\n\n  // Previous month days\n  if (startingDayOfWeek > 0) {\n    const prevMonthLastDay = new Date(viewYear, viewMonth, 0).getDate();\n    for (let i = startingDayOfWeek - 1; i >= 0; i--) {\n      const date = new Date(viewYear, viewMonth - 1, prevMonthLastDay - i, 12, 0, 0, 0);\n      result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n    }\n  }\n\n  // Current month days\n  for (let i = 1; i <= daysInMonth; i++) {\n    const date = new Date(viewYear, viewMonth, i, 12, 0, 0, 0);\n    result.push(createDayData(date, true, modelValue, maxDateValue, minDateValue));\n  }\n\n  // Next month days\n  const totalDaysSoFar = result.length;\n  const daysToAdd = 42 - totalDaysSoFar;\n  for (let i = 1; i <= daysToAdd; i++) {\n    const date = new Date(viewYear, viewMonth + 1, i, 12, 0, 0, 0);\n    result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n  }\n\n  set(calendarDays, result);\n}\n\nfunction isDateInRangeCheck(\n  date: Date,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): boolean {\n  if (maxDateValue && date > maxDateValue)\n    return false;\n  if (minDateValue && date < minDateValue)\n    return false;\n  return true;\n}\n\nfunction isDateSelectedCheck(date: Date, modelValue: Date): boolean {\n  return (\n    date.getFullYear() === modelValue.getFullYear() &&\n    date.getMonth() === modelValue.getMonth() &&\n    date.getDate() === modelValue.getDate()\n  );\n}\n\nfunction selectDate(dayData: { date: Date; isInRange: boolean; isSelected: boolean }): void {\n  if (!dayData.isInRange)\n    return;\n\n  let updateModel: Date | undefined;\n\n  if (dayData.isSelected && calendarState.allowEmpty) {\n    updateModel = undefined;\n  }\n  else if (isDefined(model)) {\n    const modelValue = get(model);\n    const newDate = new Date(dayData.date);\n    newDate.setHours(modelValue.getHours());\n    newDate.setMinutes(modelValue.getMinutes());\n    newDate.setSeconds(modelValue.getSeconds());\n    updateModel = newDate;\n  }\n  else {\n    updateModel = new Date(dayData.date);\n  }\n  set(model, updateModel);\n}\n\n// Initial calculation\ncalculateCalendarDays();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div class=\"grid grid-cols-7 pb-2\">\n      <span\n        v-for=\"day in daysOfWeek\"\n        :key=\"day\"\n        class=\"py-2 text-xs font-medium text-center text-gray-500 dark:text-gray-400\"\n      >\n        {{ day }}\n      </span>\n    </div>\n\n    <div class=\"grid grid-cols-7 gap-0.5\">\n      <button\n        v-for=\"dayData in get(calendarDays)\"\n        :key=\"dayData.key\"\n        type=\"button\"\n        :data-id=\"dayData.key\"\n        :data-current-month=\"dayData.isCurrentMonth || undefined\"\n        :data-selected=\"dayData.isSelected || undefined\"\n        :data-today=\"(dayData.isToday && !dayData.isSelected) || undefined\"\n        :class=\"dayButton({\n          selected: dayData.isSelected,\n          currentMonth: !dayData.isSelected && dayData.isCurrentMonth,\n          inRange: dayData.isInRange,\n          today: dayData.isToday && !dayData.isSelected,\n        })\"\n        :disabled=\"!dayData.isInRange\"\n        @click.stop=\"selectDate(dayData)\"\n      >\n        {{ dayData.dayNumber }}\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,155 @@
+import { tv } from "../../utils/tv.js";
+import { CalendarStateSymbol, getDaysOfWeek } from "./state.js";
+import { Fragment, createElementBlock, createElementVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withModifiers } from "vue";
+import { get, isDefined, set } from "@vueuse/core";
+//#region src/components/calendar/RuiCalendarGrid.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "w-full p-2 pt-0" };
+var _hoisted_2 = { class: "grid grid-cols-7 pb-2" };
+var _hoisted_3 = { class: "grid grid-cols-7 gap-0.5" };
+var _hoisted_4 = [
+	"data-id",
+	"data-current-month",
+	"data-selected",
+	"data-today",
+	"disabled",
+	"onClick"
+];
+var RuiCalendarGrid_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiCalendarGrid",
+	inheritAttrs: false,
+	__name: "RuiCalendarGrid",
+	props: /* @__PURE__ */ mergeModels({
+		viewMonth: {},
+		viewYear: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const calendarState = inject(CalendarStateSymbol);
+		function createDateKey(date) {
+			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+		}
+		const daysOfWeek = getDaysOfWeek();
+		const todayKey = createDateKey(/* @__PURE__ */ new Date());
+		const dayButton = tv({
+			base: "h-9 w-full flex items-center justify-center text-sm rounded-full mx-auto max-w-[2.25rem] transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50",
+			variants: {
+				selected: { true: "bg-rui-primary text-white hover:bg-rui-primary/90 dark:hover:bg-rui-primary/90" },
+				currentMonth: {
+					true: "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700",
+					false: "text-gray-400 dark:text-gray-600"
+				},
+				inRange: { false: "opacity-50 cursor-not-allowed hover:bg-transparent" },
+				today: { true: `relative after:content-[''] after:absolute after:size-1 after:rounded-full after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:bg-rui-primary` }
+			},
+			compoundVariants: [{
+				selected: true,
+				class: "text-white dark:text-white"
+			}]
+		});
+		const calendarDays = ref([]);
+		function createDayData(date, isCurrentMonth, modelValue, maxDateValue, minDateValue) {
+			const key = createDateKey(date);
+			return {
+				date,
+				isCurrentMonth,
+				isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),
+				isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,
+				isToday: key === todayKey,
+				key,
+				dayNumber: date.getDate()
+			};
+		}
+		function calculateCalendarDays() {
+			const firstDayOfMonth = new Date(__props.viewYear, __props.viewMonth, 1);
+			const daysInMonth = new Date(__props.viewYear, __props.viewMonth + 1, 0).getDate();
+			const startingDayOfWeek = firstDayOfMonth.getDay();
+			const { maxDate, minDate } = calendarState;
+			const modelValue = get(model);
+			const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;
+			const minDateValue = isDefined(minDate) ? get(minDate) : null;
+			const result = [];
+			if (startingDayOfWeek > 0) {
+				const prevMonthLastDay = new Date(__props.viewYear, __props.viewMonth, 0).getDate();
+				for (let i = startingDayOfWeek - 1; i >= 0; i--) {
+					const date = new Date(__props.viewYear, __props.viewMonth - 1, prevMonthLastDay - i, 12, 0, 0, 0);
+					result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));
+				}
+			}
+			for (let i = 1; i <= daysInMonth; i++) {
+				const date = new Date(__props.viewYear, __props.viewMonth, i, 12, 0, 0, 0);
+				result.push(createDayData(date, true, modelValue, maxDateValue, minDateValue));
+			}
+			const daysToAdd = 42 - result.length;
+			for (let i = 1; i <= daysToAdd; i++) {
+				const date = new Date(__props.viewYear, __props.viewMonth + 1, i, 12, 0, 0, 0);
+				result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));
+			}
+			set(calendarDays, result);
+		}
+		function isDateInRangeCheck(date, maxDateValue, minDateValue) {
+			if (maxDateValue && date > maxDateValue) return false;
+			if (minDateValue && date < minDateValue) return false;
+			return true;
+		}
+		function isDateSelectedCheck(date, modelValue) {
+			return date.getFullYear() === modelValue.getFullYear() && date.getMonth() === modelValue.getMonth() && date.getDate() === modelValue.getDate();
+		}
+		function selectDate(dayData) {
+			if (!dayData.isInRange) return;
+			let updateModel;
+			if (dayData.isSelected && calendarState.allowEmpty) updateModel = void 0;
+			else if (isDefined(model)) {
+				const modelValue = get(model);
+				const newDate = new Date(dayData.date);
+				newDate.setHours(modelValue.getHours());
+				newDate.setMinutes(modelValue.getMinutes());
+				newDate.setSeconds(modelValue.getSeconds());
+				updateModel = newDate;
+			} else updateModel = new Date(dayData.date);
+			set(model, updateModel);
+		}
+		calculateCalendarDays();
+		watch([() => __props.viewMonth, () => __props.viewYear], () => {
+			calculateCalendarDays();
+		});
+		watch(model, () => {
+			calculateCalendarDays();
+		});
+		watch([() => calendarState.maxDate, () => calendarState.minDate], () => {
+			calculateCalendarDays();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(daysOfWeek), (day) => {
+				return openBlock(), createElementBlock("span", {
+					key: day,
+					class: "py-2 text-xs font-medium text-center text-gray-500 dark:text-gray-400"
+				}, toDisplayString(day), 1);
+			}), 128))]), createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(get)(calendarDays.value), (dayData) => {
+				return openBlock(), createElementBlock("button", {
+					key: dayData.key,
+					type: "button",
+					"data-id": dayData.key,
+					"data-current-month": dayData.isCurrentMonth || void 0,
+					"data-selected": dayData.isSelected || void 0,
+					"data-today": dayData.isToday && !dayData.isSelected || void 0,
+					class: normalizeClass(unref(dayButton)({
+						selected: dayData.isSelected,
+						currentMonth: !dayData.isSelected && dayData.isCurrentMonth,
+						inRange: dayData.isInRange,
+						today: dayData.isToday && !dayData.isSelected
+					})),
+					disabled: !dayData.isInRange,
+					onClick: withModifiers(($event) => selectDate(dayData), ["stop"])
+				}, toDisplayString(dayData.dayNumber), 11, _hoisted_4);
+			}), 128))])]);
+		};
+	}
+});
+//#endregion
+export { RuiCalendarGrid_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/calendar/RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { inject, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getDaysOfWeek,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { tv } from '@/utils/tv';\n\ndefineOptions({\n  name: 'RuiCalendarGrid',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Helper functions to reduce duplication\nfunction createDateKey(date: Date): string {\n  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;\n}\n\n// Pre-calculated constants\nconst daysOfWeek = getDaysOfWeek();\nconst today = new Date();\nconst todayKey = createDateKey(today);\n\nconst dayButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm rounded-full mx-auto max-w-[2.25rem] transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary text-white hover:bg-rui-primary/90 dark:hover:bg-rui-primary/90',\n    },\n    currentMonth: {\n      true: 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700',\n      false: 'text-gray-400 dark:text-gray-600',\n    },\n    inRange: {\n      false: 'opacity-50 cursor-not-allowed hover:bg-transparent',\n    },\n    today: {\n      true: `relative after:content-[''] after:absolute after:size-1 after:rounded-full after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:bg-rui-primary`,\n    },\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      class: 'text-white dark:text-white',\n    },\n  ],\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst calendarDays = ref<\n  Array<{\n    date: Date;\n    isCurrentMonth: boolean;\n    isInRange: boolean;\n    isSelected: boolean;\n    isToday: boolean;\n    key: string;\n    dayNumber: number;\n  }>\n>([]);\n\nfunction createDayData(\n  date: Date,\n  isCurrentMonth: boolean,\n  modelValue: Date | null | undefined,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): {\n  date: Date;\n  isCurrentMonth: boolean;\n  isInRange: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n  dayNumber: number;\n} {\n  const key = createDateKey(date);\n  return {\n    date,\n    isCurrentMonth,\n    isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),\n    isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,\n    isToday: key === todayKey,\n    key,\n    dayNumber: date.getDate(),\n  };\n}\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateCalendarDays(): void {\n  const firstDayOfMonth = new Date(viewYear, viewMonth, 1);\n  const lastDayOfMonth = new Date(viewYear, viewMonth + 1, 0);\n  const daysInMonth = lastDayOfMonth.getDate();\n  const startingDayOfWeek = firstDayOfMonth.getDay();\n\n  const { maxDate, minDate } = calendarState;\n  const modelValue = get(model);\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  const result = [];\n\n  // Previous month days\n  if (startingDayOfWeek > 0) {\n    const prevMonthLastDay = new Date(viewYear, viewMonth, 0).getDate();\n    for (let i = startingDayOfWeek - 1; i >= 0; i--) {\n      const date = new Date(viewYear, viewMonth - 1, prevMonthLastDay - i, 12, 0, 0, 0);\n      result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n    }\n  }\n\n  // Current month days\n  for (let i = 1; i <= daysInMonth; i++) {\n    const date = new Date(viewYear, viewMonth, i, 12, 0, 0, 0);\n    result.push(createDayData(date, true, modelValue, maxDateValue, minDateValue));\n  }\n\n  // Next month days\n  const totalDaysSoFar = result.length;\n  const daysToAdd = 42 - totalDaysSoFar;\n  for (let i = 1; i <= daysToAdd; i++) {\n    const date = new Date(viewYear, viewMonth + 1, i, 12, 0, 0, 0);\n    result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n  }\n\n  set(calendarDays, result);\n}\n\nfunction isDateInRangeCheck(\n  date: Date,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): boolean {\n  if (maxDateValue && date > maxDateValue)\n    return false;\n  if (minDateValue && date < minDateValue)\n    return false;\n  return true;\n}\n\nfunction isDateSelectedCheck(date: Date, modelValue: Date): boolean {\n  return (\n    date.getFullYear() === modelValue.getFullYear() &&\n    date.getMonth() === modelValue.getMonth() &&\n    date.getDate() === modelValue.getDate()\n  );\n}\n\nfunction selectDate(dayData: { date: Date; isInRange: boolean; isSelected: boolean }): void {\n  if (!dayData.isInRange)\n    return;\n\n  let updateModel: Date | undefined;\n\n  if (dayData.isSelected && calendarState.allowEmpty) {\n    updateModel = undefined;\n  }\n  else if (isDefined(model)) {\n    const modelValue = get(model);\n    const newDate = new Date(dayData.date);\n    newDate.setHours(modelValue.getHours());\n    newDate.setMinutes(modelValue.getMinutes());\n    newDate.setSeconds(modelValue.getSeconds());\n    updateModel = newDate;\n  }\n  else {\n    updateModel = new Date(dayData.date);\n  }\n  set(model, updateModel);\n}\n\n// Initial calculation\ncalculateCalendarDays();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div class=\"grid grid-cols-7 pb-2\">\n      <span\n        v-for=\"day in daysOfWeek\"\n        :key=\"day\"\n        class=\"py-2 text-xs font-medium text-center text-gray-500 dark:text-gray-400\"\n      >\n        {{ day }}\n      </span>\n    </div>\n\n    <div class=\"grid grid-cols-7 gap-0.5\">\n      <button\n        v-for=\"dayData in get(calendarDays)\"\n        :key=\"dayData.key\"\n        type=\"button\"\n        :data-id=\"dayData.key\"\n        :data-current-month=\"dayData.isCurrentMonth || undefined\"\n        :data-selected=\"dayData.isSelected || undefined\"\n        :data-today=\"(dayData.isToday && !dayData.isSelected) || undefined\"\n        :class=\"dayButton({\n          selected: dayData.isSelected,\n          currentMonth: !dayData.isSelected && dayData.isCurrentMonth,\n          inRange: dayData.isInRange,\n          today: dayData.isToday && !dayData.isSelected,\n        })\"\n        :disabled=\"!dayData.isInRange\"\n        @click.stop=\"selectDate(dayData)\"\n      >\n        {{ dayData.dayNumber }}\n      </button>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/calendar/RuiCalendarHeader.js

@@ -0,0 +1,7 @@
+import RuiCalendarHeader_vue_vue_type_script_setup_true_lang_default from "./RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/RuiCalendarHeader.vue
+var RuiCalendarHeader_default = RuiCalendarHeader_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiCalendarHeader_default as default };
+
+//# sourceMappingURL=RuiCalendarHeader.js.map

package/dist/components/calendar/RuiCalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarHeader.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, inject, ref } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiCalendarMenu from './RuiCalendarMenu.vue';\n\ndefineOptions({\n  name: 'RuiCalendarHeader',\n  inheritAttrs: false,\n});\n\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: true });\n\nconst { viewMonth, viewYear } = defineProps<{\n  title: string;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  'prev-month': [];\n  'next-month': [];\n  'select-month': [MonthYearSelection];\n}>();\n\nconst anchorEl = ref<HTMLElement>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst navButtonClass = 'p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary';\n\nconst canGoToNext = computed<boolean>(() => {\n  const { maxDate } = calendarState;\n  if (!isDefined(maxDate)) {\n    return true;\n  }\n\n  const date = new Date(viewYear, viewMonth);\n  return date.getTime() < get(maxDate).getTime();\n});\n\nconst canGoToPrev = computed<boolean>(() => {\n  const { minDate } = calendarState;\n  if (!isDefined(minDate)) {\n    return true;\n  }\n\n  const date = new Date(viewYear, viewMonth);\n  return date.getTime() > get(minDate).getTime();\n});\n\nfunction handleTitleClick(e: Event): void {\n  set(anchorEl, (e.currentTarget as HTMLElement) ?? undefined);\n  set(isMenuOpen, true);\n}\n\nfunction handleDateSelection(selection: MonthYearSelection): void {\n  emit('select-month', selection);\n}\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between px-4 py-3\">\n    <RuiButton\n      type=\"button\"\n      :class=\"navButtonClass\"\n      icon\n      data-id=\"nav-prev\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-left\"\n        size=\"20\"\n      />\n    </RuiButton>\n\n    <h3\n      class=\"font-medium text-gray-800 dark:text-gray-200 flex items-center cursor-pointer pl-8\"\n      data-id=\"header-title\"\n      @click.stop=\"handleTitleClick($event)\"\n    >\n      {{ title }}\n      <RuiIcon\n        name=\"lu-chevron-down\"\n        size=\"16\"\n        class=\"ml-1\"\n      />\n    </h3>\n\n    <RuiCalendarMenu\n      v-model=\"isMenuOpen\"\n      :anchor-el=\"anchorEl\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @select=\"handleDateSelection($event)\"\n    />\n\n    <RuiButton\n      type=\"button\"\n      :class=\"navButtonClass\"\n      variant=\"text\"\n      icon\n      data-id=\"nav-next\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-right\"\n        size=\"20\"\n      />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+import RuiIcon_default from "../icons/RuiIcon.js";
+import RuiButton_default from "../buttons/button/RuiButton.js";
+import { CalendarStateSymbol } from "./state.js";
+import RuiCalendarMenu_default from "./RuiCalendarMenu.js";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, ref, toDisplayString, useModel, withCtx, withModifiers } from "vue";
+import { get, isDefined, set } from "@vueuse/core";
+//#region src/components/calendar/RuiCalendarHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex items-center justify-between px-4 py-3" };
+var navButtonClass = "p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary";
+var RuiCalendarHeader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiCalendarHeader",
+	inheritAttrs: false,
+	__name: "RuiCalendarHeader",
+	props: /* @__PURE__ */ mergeModels({
+		title: {},
+		viewMonth: {},
+		viewYear: {}
+	}, {
+		"menu-open": {
+			type: Boolean,
+			required: true
+		},
+		"menu-openModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels([
+		"prev-month",
+		"next-month",
+		"select-month"
+	], ["update:menu-open"]),
+	setup(__props, { emit: __emit }) {
+		const isMenuOpen = useModel(__props, "menu-open");
+		const emit = __emit;
+		const anchorEl = ref();
+		const calendarState = inject(CalendarStateSymbol);
+		const canGoToNext = computed(() => {
+			const { maxDate } = calendarState;
+			if (!isDefined(maxDate)) return true;
+			return new Date(__props.viewYear, __props.viewMonth).getTime() < get(maxDate).getTime();
+		});
+		const canGoToPrev = computed(() => {
+			const { minDate } = calendarState;
+			if (!isDefined(minDate)) return true;
+			return new Date(__props.viewYear, __props.viewMonth).getTime() > get(minDate).getTime();
+		});
+		function handleTitleClick(e) {
+			set(anchorEl, e.currentTarget ?? void 0);
+			set(isMenuOpen, true);
+		}
+		function handleDateSelection(selection) {
+			emit("select-month", selection);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(RuiButton_default, {
+					type: "button",
+					class: normalizeClass(navButtonClass),
+					icon: "",
+					"data-id": "nav-prev",
+					disabled: !canGoToPrev.value,
+					variant: "text",
+					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("prev-month"), ["stop"]))
+				}, {
+					default: withCtx(() => [createVNode(RuiIcon_default, {
+						name: "lu-chevron-left",
+						size: "20"
+					})]),
+					_: 1
+				}, 8, ["disabled"]),
+				createElementVNode("h3", {
+					class: "font-medium text-gray-800 dark:text-gray-200 flex items-center cursor-pointer pl-8",
+					"data-id": "header-title",
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => handleTitleClick($event), ["stop"]))
+				}, [createTextVNode(toDisplayString(__props.title) + " ", 1), createVNode(RuiIcon_default, {
+					name: "lu-chevron-down",
+					size: "16",
+					class: "ml-1"
+				})]),
+				createVNode(RuiCalendarMenu_default, {
+					modelValue: isMenuOpen.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isMenuOpen.value = $event),
+					"anchor-el": anchorEl.value,
+					"view-month": __props.viewMonth,
+					"view-year": __props.viewYear,
+					onSelect: _cache[3] || (_cache[3] = ($event) => handleDateSelection($event))
+				}, null, 8, [
+					"modelValue",
+					"anchor-el",
+					"view-month",
+					"view-year"
+				]),
+				createVNode(RuiButton_default, {
+					type: "button",
+					class: normalizeClass(navButtonClass),
+					variant: "text",
+					icon: "",
+					"data-id": "nav-next",
+					disabled: !canGoToNext.value,
+					onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("next-month"), ["stop"]))
+				}, {
+					default: withCtx(() => [createVNode(RuiIcon_default, {
+						name: "lu-chevron-right",
+						size: "20"
+					})]),
+					_: 1
+				}, 8, ["disabled"])
+			]);
+		};
+	}
+});
+//#endregion
+export { RuiCalendarHeader_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/calendar/RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, inject, ref } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiCalendarMenu from './RuiCalendarMenu.vue';\n\ndefineOptions({\n  name: 'RuiCalendarHeader',\n  inheritAttrs: false,\n});\n\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: true });\n\nconst { viewMonth, viewYear } = defineProps<{\n  title: string;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  'prev-month': [];\n  'next-month': [];\n  'select-month': [MonthYearSelection];\n}>();\n\nconst anchorEl = ref<HTMLElement>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst navButtonClass = 'p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary';\n\nconst canGoToNext = computed<boolean>(() => {\n  const { maxDate } = calendarState;\n  if (!isDefined(maxDate)) {\n    return true;\n  }\n\n  const date = new Date(viewYear, viewMonth);\n  return date.getTime() < get(maxDate).getTime();\n});\n\nconst canGoToPrev = computed<boolean>(() => {\n  const { minDate } = calendarState;\n  if (!isDefined(minDate)) {\n    return true;\n  }\n\n  const date = new Date(viewYear, viewMonth);\n  return date.getTime() > get(minDate).getTime();\n});\n\nfunction handleTitleClick(e: Event): void {\n  set(anchorEl, (e.currentTarget as HTMLElement) ?? undefined);\n  set(isMenuOpen, true);\n}\n\nfunction handleDateSelection(selection: MonthYearSelection): void {\n  emit('select-month', selection);\n}\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between px-4 py-3\">\n    <RuiButton\n      type=\"button\"\n      :class=\"navButtonClass\"\n      icon\n      data-id=\"nav-prev\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-left\"\n        size=\"20\"\n      />\n    </RuiButton>\n\n    <h3\n      class=\"font-medium text-gray-800 dark:text-gray-200 flex items-center cursor-pointer pl-8\"\n      data-id=\"header-title\"\n      @click.stop=\"handleTitleClick($event)\"\n    >\n      {{ title }}\n      <RuiIcon\n        name=\"lu-chevron-down\"\n        size=\"16\"\n        class=\"ml-1\"\n      />\n    </h3>\n\n    <RuiCalendarMenu\n      v-model=\"isMenuOpen\"\n      :anchor-el=\"anchorEl\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @select=\"handleDateSelection($event)\"\n    />\n\n    <RuiButton\n      type=\"button\"\n      :class=\"navButtonClass\"\n      variant=\"text\"\n      icon\n      data-id=\"nav-next\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-right\"\n        size=\"20\"\n      />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":";;;;;;;;AAmCA,IAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;EAlBvB,MAAM,aAAa,SAAoB,SAAC,YAAgC;EAQxE,MAAM,OAAO;EAMb,MAAM,WAAW,KAAkB;EAEnC,MAAM,gBAAgB,OAAyB,oBAAoB;EAInE,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;AACpB,OAAI,CAAC,UAAU,QAAQ,CACrB,QAAO;AAIT,UADa,IAAI,KAAK,QAAA,UAAU,QAAA,UAAU,CAC9B,SAAS,GAAG,IAAI,QAAQ,CAAC,SAAS;IAC9C;EAEF,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;AACpB,OAAI,CAAC,UAAU,QAAQ,CACrB,QAAO;AAIT,UADa,IAAI,KAAK,QAAA,UAAU,QAAA,UAAU,CAC9B,SAAS,GAAG,IAAI,QAAQ,CAAC,SAAS;IAC9C;EAEF,SAAS,iBAAiB,GAAgB;AACxC,OAAI,UAAW,EAAE,iBAAiC,KAAA,EAAU;AAC5D,OAAI,YAAY,KAAK;;EAGvB,SAAS,oBAAoB,WAAqC;AAChE,QAAK,gBAAgB,UAAU;;;uBAK/B,mBAmDM,OAnDN,YAmDM;IAlDJ,YAaY,mBAAA;KAZV,MAAK;KACJ,OAAK,eAAE,eAAc;KACtB,MAAA;KACA,WAAQ;KACP,UAAQ,CAAG,YAAA;KACZ,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,KAAI,aAAA,EAAA,CAAA,OAAA,CAAA;;4BAKf,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK;;;;IAIT,mBAWK,MAAA;KAVH,OAAM;KACN,WAAQ;KACP,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,iBAAiB,OAAM,EAAA,CAAA,OAAA,CAAA;wCAEjC,QAAA,MAAK,GAAG,KACX,EAAA,EAAA,YAIE,iBAAA;KAHA,MAAK;KACL,MAAK;KACL,OAAM;;IAIV,YAME,yBAAA;iBALS,WAAA;6EAAU,QAAA;KAClB,aAAW,SAAA;KACX,cAAY,QAAA;KACZ,aAAW,QAAA;KACX,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,oBAAoB,OAAM;;;;;;;IAGrC,YAaY,mBAAA;KAZV,MAAK;KACJ,OAAK,eAAE,eAAc;KACtB,SAAQ;KACR,MAAA;KACA,WAAQ;KACP,UAAQ,CAAG,YAAA;KACX,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,KAAI,aAAA,EAAA,CAAA,OAAA,CAAA;;4BAKf,CAHF,YAGE,iBAAA;MAFA,MAAK;MACL,MAAK"}

package/dist/components/calendar/RuiCalendarMenu.js

@@ -0,0 +1,7 @@
+import RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default from "./RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/RuiCalendarMenu.vue
+var RuiCalendarMenu_default = RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiCalendarMenu_default as default };
+
+//# sourceMappingURL=RuiCalendarMenu.js.map

package/dist/components/calendar/RuiCalendarMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarMenu.js","names":[],"sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { tv } from '@/utils/tv';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst navButtonClass = 'p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary';\n\nconst cellButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker',\n    },\n    inRange: {\n      true: 'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600',\n      false: 'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600',\n    },\n    selectedOutOfRange: {\n      true: 'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400',\n    },\n  },\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateYearRange(): void {\n  const start = get(startYear);\n  set(\n    yearRange,\n    Array.from({ length: 12 }, (_, i) => start + i),\n  );\n}\n\nfunction calculateTitle(): void {\n  if (get(viewMode) === 'months') {\n    set(title, viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation(): void {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = viewYear + 1;\n    const previousYear = viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange(): void {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\nfunction toggleSelection(): void {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number): void {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number): void {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext(): void {\n  if (get(viewMode) === 'months') {\n    const nextYear = viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev(): void {\n  if (get(viewMode) === 'months') {\n    const previousYear = viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(\n  () => viewYear,\n  () => {\n    calculateTitle();\n    calculateNavigation();\n    calculateMonthsInRange();\n    calculateYearsInRange();\n  },\n);\n\nwatch(\n  () => viewMonth,\n  () => {\n    calculateYearsInRange();\n  },\n);\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    placement=\"bottom-start\"\n  >\n    <div class=\"w-64 shadow-lg overflow-hidden\">\n      <div class=\"flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200 border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800\">\n        <RuiButton\n          type=\"button\"\n          :class=\"navButtonClass\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          :class=\"navButtonClass\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"month\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: index === viewMonth && get(monthsInRange)[index],\n            selectedOutOfRange: index === viewMonth && !get(monthsInRange)[index],\n            inRange: index !== viewMonth ? get(monthsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: year === viewYear && get(yearsInRange)[index],\n            selectedOutOfRange: year === viewYear && !get(yearsInRange)[index],\n            inRange: year !== viewYear ? get(yearsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":""}