@rotki/ui-library 3.2.0 → 3.3.0

package/dist/components/buttons/button-group/RuiButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { HTMLAttributes, Ref } from 'vue';\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n  modelValue: modelValueProp,\n} = defineProps<Props & {\n  /**\n   * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the\n   * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not\n   * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.\n   */\n  modelValue?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineEmits<ModelValueEmits<T>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/*\n * A prop and an event rather than `defineModel`, so the update is typed without `undefined` in the\n * modes that never send it. The buttons' values are their own generic, so the group handles the\n * model as values of unknown type.\n */\nconst modelValue: Ref<unknown> = usePropModel('modelValue', () => modelValueProp);\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: unknown, selected: unknown): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: unknown): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: unknown) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<unknown>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ButtonSize } from '../button/button-props.js';
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
@@ -16,9 +17,14 @@ export interface Props {
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
-        modelValue?: T | T[];
-    }) & {
-        "onUpdate:modelValue"?: ((value: T | T[] | undefined) => any) | undefined;
+        /**
+         * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the
+         * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not
+         * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.
+         */
+        modelValue?: T;
+    } & Omit<HTMLAttributes, keyof Props>) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -27,7 +33,7 @@ declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typ
     slots: {
         default?: () => any;
     };
-    emit: (event: "update:modelValue", value: T | T[] | undefined) => void;
+    emit: (evt: "update:modelValue", value: T) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,15 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
 import { cn } from "../../../utils/tv.js";
+import { usePropModel } from "../../../composables/prop-model.js";
 import { ButtonGroupKey } from "./button-group-context.js";
 import { buttonGroupStyles } from "./button-group-styles.js";
-import { computed, createElementBlock, defineComponent, mergeModels, mergeProps, openBlock, provide, renderSlot, unref, useModel } from "vue";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, provide, renderSlot, unref } from "vue";
 //#region src/components/buttons/button-group/RuiButtonGroup.vue?vue&type=script&setup=true&lang.ts
 var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiButtonGroup",
 	inheritAttrs: false,
 	__name: "RuiButtonGroup",
-	props: /*@__PURE__*/ mergeModels({
+	props: {
 		vertical: {
 			type: Boolean,
 			default: false
@@ -25,14 +26,12 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		disabled: {
 			type: Boolean,
 			default: false
-		}
-	}, {
-		"modelValue": {},
-		"modelModifiers": {}
-	}),
+		},
+		modelValue: {}
+	},
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const modelValue = useModel(__props, "modelValue");
+		const modelValue = usePropModel("modelValue", () => __props.modelValue);
 		const ui = computed(() => buttonGroupStyles({
 			vertical: __props.vertical,
 			gap: __props.gap ?? "none",

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,aAAaC,SAAoB,SAAA,YAAC;EAiBxC,MAAM,KAAK,eAAqD,kBAAkB;GAChF,UAAO,QAAA;GACP,KAAK,QAAA,OAAO;GACZ,SAAM,QAAA;GACN,OAAI,QAAA;EACN,CAAC,CAAC;;;;;;;;EASF,SAAS,YAAY,QAAgD;GACnE,IAAI,QAAA,YAAY,aACd,OAAO,KAAA;GACT,OAAO,UAAU,QAAA,cAAc,QAAA,cAAc,QAAA;EAC/C;EAEA,SAAS,SAAS,IAAO,UAA6B;GACpD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO,SAAS,SAAS,EAAE;GAE7B,OAAO,aAAa;EACtB;EAEA,SAAS,QAAQ,IAAa;GAC5B,MAAM,WAAW,IAAI,UAAU;GAE/B,IAAI,MAAM,QAAQ,QAAQ,GAAG;IAC3B,MAAM,QAAQ,SAAS,QAAQ,EAAE;IACjC,IAAI,SAAS,GAAG;KACd,IAAI,QAAA,YAAY,SAAS,WAAW,GAClC;KAEF,IAAI,YAAY,SAAS,QAAQ,GAAG,MAAM,MAAM,KAAK,CAAC;IACxD,OAEE,IAAI,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;GAErC,OACK,IAAI,QAAA,UACP,IAAI,YAAY,EAAE;QAGlB,IAAI,YAAY,SAAS,IAAI,QAAQ,IAAI,KAAA,IAAY,EAAE;EAE3D;EAGA,QAAQ,gBAAgB;GACtB,eAAe,QAAA,YAAY,cAAc,SAAS,QAAA;GAClD,YAAY,QAAA;GACZ,gBAAgB,QAAA;GAChB,OAAO;GACP,iBAAiB,IAAI,EAAE,CAAC,CAAC,OAAO;GAChC,WAAW,UAAa,SAAS,OAAO,IAAI,UAAU,CAAC;GACvD,QAAQ;EACV,CAAiC;;GAI/B,OAAAC,UAAA,GAAAC,mBAMM,OANNC,WAMM;IALH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACL,KAAAA,OAAO,KAAK,EAAA,CAAA;IACxC,qBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCM,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}
+{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { HTMLAttributes, Ref } from 'vue';\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n  modelValue: modelValueProp,\n} = defineProps<Props & {\n  /**\n   * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the\n   * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not\n   * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.\n   */\n  modelValue?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineEmits<ModelValueEmits<T>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/*\n * A prop and an event rather than `defineModel`, so the update is typed without `undefined` in the\n * modes that never send it. The buttons' values are their own generic, so the group handles the\n * model as values of unknown type.\n */\nconst modelValue: Ref<unknown> = usePropModel('modelValue', () => modelValueProp);\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: unknown, selected: unknown): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: unknown): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: unknown) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<unknown>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,MAAM,aAA2B,aAAa,oBAAoB,QAAA,UAAc;EAEhF,MAAM,KAAK,eAAqD,kBAAkB;GAChF,UAAO,QAAA;GACP,KAAK,QAAA,OAAO;GACZ,SAAM,QAAA;GACN,OAAI,QAAA;EACN,CAAC,CAAC;;;;;;;;EASF,SAAS,YAAY,QAAgD;GACnE,IAAI,QAAA,YAAY,aACd,OAAO,KAAA;GACT,OAAO,UAAU,QAAA,cAAc,QAAA,cAAc,QAAA;EAC/C;EAEA,SAAS,SAAS,IAAa,UAA4B;GACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO,SAAS,SAAS,EAAE;GAE7B,OAAO,aAAa;EACtB;EAEA,SAAS,QAAQ,IAAmB;GAClC,MAAM,WAAW,IAAI,UAAU;GAE/B,IAAI,MAAM,QAAQ,QAAQ,GAAG;IAC3B,MAAM,QAAQ,SAAS,QAAQ,EAAE;IACjC,IAAI,SAAS,GAAG;KACd,IAAI,QAAA,YAAY,SAAS,WAAW,GAClC;KAEF,IAAI,YAAY,SAAS,QAAQ,GAAG,MAAM,MAAM,KAAK,CAAC;IACxD,OAEE,IAAI,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;GAErC,OACK,IAAI,QAAA,UACP,IAAI,YAAY,EAAE;QAGlB,IAAI,YAAY,SAAS,IAAI,QAAQ,IAAI,KAAA,IAAY,EAAE;EAE3D;EAGA,QAAQ,gBAAgB;GACtB,eAAe,QAAA,YAAY,cAAc,SAAS,QAAA;GAClD,YAAY,QAAA;GACZ,gBAAgB,QAAA;GAChB,OAAO;GACP,iBAAiB,IAAI,EAAE,CAAC,CAAC,OAAO;GAChC,WAAW,UAAmB,SAAS,OAAO,IAAI,UAAU,CAAC;GAC7D,QAAQ;EACV,CAAuC;;GAIrC,OAAAC,UAAA,GAAAC,mBAMM,OANNC,WAMM;IALH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACJ,KAAAA,OAAO,KAAK,EAAA,CAAA;IACxC,qBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCK,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarGrid.js","names":["_sfc_main"],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getDaysOfWeek,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { dayButtonStyles } from './calendar-grid-styles';\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/**\n * The `YYYY-MM-DD` key a day is tracked and focused by.\n *\n * @param date - the day to key\n * @returns its key\n */\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\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/** Rebuilds the days the grid draws for the current view month. */\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// Keyboard navigation: a roving tabindex, so crossing the calendar costs one Tab instead of 42\nconst gridRef = useTemplateRef<HTMLDivElement>('grid');\nconst activeKey = ref<string>('');\n\nconst dayLabelFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });\n\nconst KEY_DAY_OFFSETS: Record<string, number> = {\n  ArrowDown: 7,\n  ArrowLeft: -1,\n  ArrowRight: 1,\n  ArrowUp: -7,\n};\n\nconst weeks = computed<Array<typeof calendarDays.value>>(() => {\n  const days = get(calendarDays);\n  const result = [];\n  for (let i = 0; i < days.length; i += 7)\n    result.push(days.slice(i, i + 7));\n  return result;\n});\n\nfunction preferredActiveKey(): string {\n  const days = get(calendarDays);\n  const selected = days.find(day => day.isSelected && day.isInRange);\n  const todayInView = days.find(day => day.isToday && day.isCurrentMonth && day.isInRange);\n  const firstSelectable = days.find(day => day.isCurrentMonth && day.isInRange);\n  return (selected ?? todayInView ?? firstSelectable ?? days[0])?.key ?? '';\n}\n\nfunction syncActiveKey(): void {\n  const days = get(calendarDays);\n  if (!days.some(day => day.key === get(activeKey)))\n    set(activeKey, preferredActiveKey());\n}\n\nfunction keyToDate(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number);\n  return new Date(year ?? 0, (month ?? 1) - 1, day ?? 1, 12, 0, 0, 0);\n}\n\nfunction focusKey(key: string): void {\n  set(activeKey, key);\n  nextTick(() => {\n    get(gridRef)?.querySelector<HTMLButtonElement>(`[data-id=\"${key}\"]`)?.focus();\n  });\n}\n\nfunction moveTo(target: Date): void {\n  const { maxDate, minDate } = calendarState;\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  // min/max bound a contiguous range, so a blocked step means the edge is here\n  if (!isDateInRangeCheck(target, maxDateValue, minDateValue))\n    return;\n\n  const key = createDateKey(target);\n\n  // Even a day drawn as a spill day turns the page, so header and focus agree on the month\n  if (target.getMonth() === viewMonth && target.getFullYear() === viewYear) {\n    focusKey(key);\n    return;\n  }\n\n  set(calendarState.viewMonth, target.getMonth());\n  set(calendarState.viewYear, target.getFullYear());\n  nextTick(() => {\n    focusKey(key);\n  });\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const active = get(activeKey);\n  if (!active)\n    return;\n\n  const current = keyToDate(active);\n  const dayOffset = KEY_DAY_OFFSETS[event.key];\n\n  if (dayOffset !== undefined) {\n    event.preventDefault();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + dayOffset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault();\n    const offset = event.key === 'Home' ? -current.getDay() : 6 - current.getDay();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + offset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'PageUp' || event.key === 'PageDown') {\n    event.preventDefault();\n    const delta = event.key === 'PageUp' ? -1 : 1;\n    moveTo(new Date(current.getFullYear(), current.getMonth() + delta, current.getDate(), 12, 0, 0, 0));\n  }\n}\n\n// Initial calculation\ncalculateCalendarDays();\nsyncActiveKey();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n    syncActiveKey();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div\n      ref=\"grid\"\n      role=\"grid\"\n      class=\"grid grid-cols-7 gap-0.5\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div\n        role=\"row\"\n        class=\"contents\"\n      >\n        <span\n          v-for=\"day in daysOfWeek\"\n          :key=\"day\"\n          role=\"columnheader\"\n          class=\"py-2 pb-4 text-xs font-medium text-center text-rui-neutral-500 dark:text-rui-neutral-400\"\n        >\n          {{ day }}\n        </span>\n      </div>\n\n      <div\n        v-for=\"(week, index) in weeks\"\n        :key=\"index\"\n        role=\"row\"\n        class=\"contents\"\n      >\n        <button\n          v-for=\"dayData in week\"\n          :key=\"dayData.key\"\n          type=\"button\"\n          role=\"gridcell\"\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=\"dayButtonStyles({\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          :tabindex=\"dayData.key === activeKey ? 0 : -1\"\n          :aria-label=\"dayLabelFormatter.format(dayData.date)\"\n          :aria-selected=\"dayData.isSelected\"\n          :aria-current=\"dayData.isToday ? 'date' : undefined\"\n          @click.stop=\"selectDate(dayData)\"\n          @focus=\"activeKey = dayData.key\"\n        >\n          {{ dayData.dayNumber }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCalendarGrid.js","names":["_sfc_main"],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue';\nimport { getDaysOfWeek, useCalendarState } from '@/components/calendar/state';\nimport { dayButtonStyles } from './calendar-grid-styles';\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 = useCalendarState();\n\n/**\n * The `YYYY-MM-DD` key a day is tracked and focused by.\n *\n * @param date - the day to key\n * @returns its key\n */\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\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/** Rebuilds the days the grid draws for the current view month. */\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// Keyboard navigation: a roving tabindex, so crossing the calendar costs one Tab instead of 42\nconst gridRef = useTemplateRef<HTMLDivElement>('grid');\nconst activeKey = ref<string>('');\n\nconst dayLabelFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });\n\nconst KEY_DAY_OFFSETS: Record<string, number> = {\n  ArrowDown: 7,\n  ArrowLeft: -1,\n  ArrowRight: 1,\n  ArrowUp: -7,\n};\n\nconst weeks = computed<Array<typeof calendarDays.value>>(() => {\n  const days = get(calendarDays);\n  const result = [];\n  for (let i = 0; i < days.length; i += 7)\n    result.push(days.slice(i, i + 7));\n  return result;\n});\n\nfunction preferredActiveKey(): string {\n  const days = get(calendarDays);\n  const selected = days.find(day => day.isSelected && day.isInRange);\n  const todayInView = days.find(day => day.isToday && day.isCurrentMonth && day.isInRange);\n  const firstSelectable = days.find(day => day.isCurrentMonth && day.isInRange);\n  return (selected ?? todayInView ?? firstSelectable ?? days[0])?.key ?? '';\n}\n\nfunction syncActiveKey(): void {\n  const days = get(calendarDays);\n  if (!days.some(day => day.key === get(activeKey)))\n    set(activeKey, preferredActiveKey());\n}\n\nfunction keyToDate(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number);\n  return new Date(year ?? 0, (month ?? 1) - 1, day ?? 1, 12, 0, 0, 0);\n}\n\nfunction focusKey(key: string): void {\n  set(activeKey, key);\n  nextTick(() => {\n    get(gridRef)?.querySelector<HTMLButtonElement>(`[data-id=\"${key}\"]`)?.focus();\n  });\n}\n\nfunction moveTo(target: Date): void {\n  const { maxDate, minDate } = calendarState;\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  // min/max bound a contiguous range, so a blocked step means the edge is here\n  if (!isDateInRangeCheck(target, maxDateValue, minDateValue))\n    return;\n\n  const key = createDateKey(target);\n\n  // Even a day drawn as a spill day turns the page, so header and focus agree on the month\n  if (target.getMonth() === viewMonth && target.getFullYear() === viewYear) {\n    focusKey(key);\n    return;\n  }\n\n  set(calendarState.viewMonth, target.getMonth());\n  set(calendarState.viewYear, target.getFullYear());\n  nextTick(() => {\n    focusKey(key);\n  });\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const active = get(activeKey);\n  if (!active)\n    return;\n\n  const current = keyToDate(active);\n  const dayOffset = KEY_DAY_OFFSETS[event.key];\n\n  if (dayOffset !== undefined) {\n    event.preventDefault();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + dayOffset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault();\n    const offset = event.key === 'Home' ? -current.getDay() : 6 - current.getDay();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + offset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'PageUp' || event.key === 'PageDown') {\n    event.preventDefault();\n    const delta = event.key === 'PageUp' ? -1 : 1;\n    moveTo(new Date(current.getFullYear(), current.getMonth() + delta, current.getDate(), 12, 0, 0, 0));\n  }\n}\n\n// Initial calculation\ncalculateCalendarDays();\nsyncActiveKey();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n    syncActiveKey();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div\n      ref=\"grid\"\n      role=\"grid\"\n      class=\"grid grid-cols-7 gap-0.5\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div\n        role=\"row\"\n        class=\"contents\"\n      >\n        <span\n          v-for=\"day in daysOfWeek\"\n          :key=\"day\"\n          role=\"columnheader\"\n          class=\"py-2 pb-4 text-xs font-medium text-center text-rui-neutral-500 dark:text-rui-neutral-400\"\n        >\n          {{ day }}\n        </span>\n      </div>\n\n      <div\n        v-for=\"(week, index) in weeks\"\n        :key=\"index\"\n        role=\"row\"\n        class=\"contents\"\n      >\n        <button\n          v-for=\"dayData in week\"\n          :key=\"dayData.key\"\n          type=\"button\"\n          role=\"gridcell\"\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=\"dayButtonStyles({\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          :tabindex=\"dayData.key === activeKey ? 0 : -1\"\n          :aria-label=\"dayLabelFormatter.format(dayData.date)\"\n          :aria-selected=\"dayData.isSelected\"\n          :aria-current=\"dayData.isToday ? 'date' : undefined\"\n          @click.stop=\"selectDate(dayData)\"\n          @focus=\"activeKey = dayData.key\"\n        >\n          {{ dayData.dayNumber }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { CalendarStateSymbol, getDaysOfWeek } from "./state.js";
+import { getDaysOfWeek, useCalendarState } from "./state.js";
 import { dayButtonStyles } from "./calendar-grid-styles.js";
-import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, inject, mergeModels, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch, withModifiers } from "vue";
+import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, useTemplateRef, watch, withModifiers } from "vue";
 //#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 = {
@@ -35,7 +35,7 @@ var RuiCalendarGrid_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
-		const calendarState = inject(CalendarStateSymbol);
+		const calendarState = useCalendarState();
 		/**
 		* The `YYYY-MM-DD` key a day is tracked and focused by.
 		*

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_toDisplayString","_normalizeClass","_withModifiers"],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getDaysOfWeek,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { dayButtonStyles } from './calendar-grid-styles';\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/**\n * The `YYYY-MM-DD` key a day is tracked and focused by.\n *\n * @param date - the day to key\n * @returns its key\n */\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\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/** Rebuilds the days the grid draws for the current view month. */\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// Keyboard navigation: a roving tabindex, so crossing the calendar costs one Tab instead of 42\nconst gridRef = useTemplateRef<HTMLDivElement>('grid');\nconst activeKey = ref<string>('');\n\nconst dayLabelFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });\n\nconst KEY_DAY_OFFSETS: Record<string, number> = {\n  ArrowDown: 7,\n  ArrowLeft: -1,\n  ArrowRight: 1,\n  ArrowUp: -7,\n};\n\nconst weeks = computed<Array<typeof calendarDays.value>>(() => {\n  const days = get(calendarDays);\n  const result = [];\n  for (let i = 0; i < days.length; i += 7)\n    result.push(days.slice(i, i + 7));\n  return result;\n});\n\nfunction preferredActiveKey(): string {\n  const days = get(calendarDays);\n  const selected = days.find(day => day.isSelected && day.isInRange);\n  const todayInView = days.find(day => day.isToday && day.isCurrentMonth && day.isInRange);\n  const firstSelectable = days.find(day => day.isCurrentMonth && day.isInRange);\n  return (selected ?? todayInView ?? firstSelectable ?? days[0])?.key ?? '';\n}\n\nfunction syncActiveKey(): void {\n  const days = get(calendarDays);\n  if (!days.some(day => day.key === get(activeKey)))\n    set(activeKey, preferredActiveKey());\n}\n\nfunction keyToDate(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number);\n  return new Date(year ?? 0, (month ?? 1) - 1, day ?? 1, 12, 0, 0, 0);\n}\n\nfunction focusKey(key: string): void {\n  set(activeKey, key);\n  nextTick(() => {\n    get(gridRef)?.querySelector<HTMLButtonElement>(`[data-id=\"${key}\"]`)?.focus();\n  });\n}\n\nfunction moveTo(target: Date): void {\n  const { maxDate, minDate } = calendarState;\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  // min/max bound a contiguous range, so a blocked step means the edge is here\n  if (!isDateInRangeCheck(target, maxDateValue, minDateValue))\n    return;\n\n  const key = createDateKey(target);\n\n  // Even a day drawn as a spill day turns the page, so header and focus agree on the month\n  if (target.getMonth() === viewMonth && target.getFullYear() === viewYear) {\n    focusKey(key);\n    return;\n  }\n\n  set(calendarState.viewMonth, target.getMonth());\n  set(calendarState.viewYear, target.getFullYear());\n  nextTick(() => {\n    focusKey(key);\n  });\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const active = get(activeKey);\n  if (!active)\n    return;\n\n  const current = keyToDate(active);\n  const dayOffset = KEY_DAY_OFFSETS[event.key];\n\n  if (dayOffset !== undefined) {\n    event.preventDefault();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + dayOffset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault();\n    const offset = event.key === 'Home' ? -current.getDay() : 6 - current.getDay();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + offset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'PageUp' || event.key === 'PageDown') {\n    event.preventDefault();\n    const delta = event.key === 'PageUp' ? -1 : 1;\n    moveTo(new Date(current.getFullYear(), current.getMonth() + delta, current.getDate(), 12, 0, 0, 0));\n  }\n}\n\n// Initial calculation\ncalculateCalendarDays();\nsyncActiveKey();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n    syncActiveKey();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div\n      ref=\"grid\"\n      role=\"grid\"\n      class=\"grid grid-cols-7 gap-0.5\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div\n        role=\"row\"\n        class=\"contents\"\n      >\n        <span\n          v-for=\"day in daysOfWeek\"\n          :key=\"day\"\n          role=\"columnheader\"\n          class=\"py-2 pb-4 text-xs font-medium text-center text-rui-neutral-500 dark:text-rui-neutral-400\"\n        >\n          {{ day }}\n        </span>\n      </div>\n\n      <div\n        v-for=\"(week, index) in weeks\"\n        :key=\"index\"\n        role=\"row\"\n        class=\"contents\"\n      >\n        <button\n          v-for=\"dayData in week\"\n          :key=\"dayData.key\"\n          type=\"button\"\n          role=\"gridcell\"\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=\"dayButtonStyles({\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          :tabindex=\"dayData.key === activeKey ? 0 : -1\"\n          :aria-label=\"dayLabelFormatter.format(dayData.date)\"\n          :aria-selected=\"dayData.isSelected\"\n          :aria-current=\"dayData.isToday ? 'date' : undefined\"\n          @click.stop=\"selectDate(dayData)\"\n          @focus=\"activeKey = dayData.key\"\n        >\n          {{ dayData.dayNumber }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCalendarGrid.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_toDisplayString","_normalizeClass","_withModifiers"],"sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue';\nimport { getDaysOfWeek, useCalendarState } from '@/components/calendar/state';\nimport { dayButtonStyles } from './calendar-grid-styles';\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 = useCalendarState();\n\n/**\n * The `YYYY-MM-DD` key a day is tracked and focused by.\n *\n * @param date - the day to key\n * @returns its key\n */\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\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/** Rebuilds the days the grid draws for the current view month. */\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// Keyboard navigation: a roving tabindex, so crossing the calendar costs one Tab instead of 42\nconst gridRef = useTemplateRef<HTMLDivElement>('grid');\nconst activeKey = ref<string>('');\n\nconst dayLabelFormatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });\n\nconst KEY_DAY_OFFSETS: Record<string, number> = {\n  ArrowDown: 7,\n  ArrowLeft: -1,\n  ArrowRight: 1,\n  ArrowUp: -7,\n};\n\nconst weeks = computed<Array<typeof calendarDays.value>>(() => {\n  const days = get(calendarDays);\n  const result = [];\n  for (let i = 0; i < days.length; i += 7)\n    result.push(days.slice(i, i + 7));\n  return result;\n});\n\nfunction preferredActiveKey(): string {\n  const days = get(calendarDays);\n  const selected = days.find(day => day.isSelected && day.isInRange);\n  const todayInView = days.find(day => day.isToday && day.isCurrentMonth && day.isInRange);\n  const firstSelectable = days.find(day => day.isCurrentMonth && day.isInRange);\n  return (selected ?? todayInView ?? firstSelectable ?? days[0])?.key ?? '';\n}\n\nfunction syncActiveKey(): void {\n  const days = get(calendarDays);\n  if (!days.some(day => day.key === get(activeKey)))\n    set(activeKey, preferredActiveKey());\n}\n\nfunction keyToDate(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number);\n  return new Date(year ?? 0, (month ?? 1) - 1, day ?? 1, 12, 0, 0, 0);\n}\n\nfunction focusKey(key: string): void {\n  set(activeKey, key);\n  nextTick(() => {\n    get(gridRef)?.querySelector<HTMLButtonElement>(`[data-id=\"${key}\"]`)?.focus();\n  });\n}\n\nfunction moveTo(target: Date): void {\n  const { maxDate, minDate } = calendarState;\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  // min/max bound a contiguous range, so a blocked step means the edge is here\n  if (!isDateInRangeCheck(target, maxDateValue, minDateValue))\n    return;\n\n  const key = createDateKey(target);\n\n  // Even a day drawn as a spill day turns the page, so header and focus agree on the month\n  if (target.getMonth() === viewMonth && target.getFullYear() === viewYear) {\n    focusKey(key);\n    return;\n  }\n\n  set(calendarState.viewMonth, target.getMonth());\n  set(calendarState.viewYear, target.getFullYear());\n  nextTick(() => {\n    focusKey(key);\n  });\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  const active = get(activeKey);\n  if (!active)\n    return;\n\n  const current = keyToDate(active);\n  const dayOffset = KEY_DAY_OFFSETS[event.key];\n\n  if (dayOffset !== undefined) {\n    event.preventDefault();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + dayOffset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'Home' || event.key === 'End') {\n    event.preventDefault();\n    const offset = event.key === 'Home' ? -current.getDay() : 6 - current.getDay();\n    moveTo(new Date(current.getFullYear(), current.getMonth(), current.getDate() + offset, 12, 0, 0, 0));\n  }\n  else if (event.key === 'PageUp' || event.key === 'PageDown') {\n    event.preventDefault();\n    const delta = event.key === 'PageUp' ? -1 : 1;\n    moveTo(new Date(current.getFullYear(), current.getMonth() + delta, current.getDate(), 12, 0, 0, 0));\n  }\n}\n\n// Initial calculation\ncalculateCalendarDays();\nsyncActiveKey();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n  syncActiveKey();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n    syncActiveKey();\n  },\n);\n</script>\n\n<template>\n  <div class=\"w-full p-2 pt-0\">\n    <div\n      ref=\"grid\"\n      role=\"grid\"\n      class=\"grid grid-cols-7 gap-0.5\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div\n        role=\"row\"\n        class=\"contents\"\n      >\n        <span\n          v-for=\"day in daysOfWeek\"\n          :key=\"day\"\n          role=\"columnheader\"\n          class=\"py-2 pb-4 text-xs font-medium text-center text-rui-neutral-500 dark:text-rui-neutral-400\"\n        >\n          {{ day }}\n        </span>\n      </div>\n\n      <div\n        v-for=\"(week, index) in weeks\"\n        :key=\"index\"\n        role=\"row\"\n        class=\"contents\"\n      >\n        <button\n          v-for=\"dayData in week\"\n          :key=\"dayData.key\"\n          type=\"button\"\n          role=\"gridcell\"\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=\"dayButtonStyles({\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          :tabindex=\"dayData.key === activeKey ? 0 : -1\"\n          :aria-label=\"dayLabelFormatter.format(dayData.date)\"\n          :aria-selected=\"dayData.isSelected\"\n          :aria-current=\"dayData.isToday ? 'date' : undefined\"\n          @click.stop=\"selectDate(dayData)\"\n          @focus=\"activeKey = dayData.key\"\n        >\n          {{ dayData.dayNumber }}\n        </button>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarHeader.js","names":["_sfc_main"],"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 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 instanceof HTMLElement ? e.currentTarget : 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-3 py-2\">\n    <RuiButton\n      type=\"button\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-prev\"\n      aria-label=\"Previous month\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-left\" />\n    </RuiButton>\n\n    <!--\n      The title and its picker share the middle, so the picker's own wrapper is not a fourth flex item\n      that pulls the title off center. The month and year open the picker, so they are a button.\n    -->\n    <div class=\"flex min-w-0 flex-1 justify-center\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 rounded-rui-control px-2 py-1 text-sm font-medium text-rui-text transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n        data-id=\"header-title\"\n        aria-haspopup=\"dialog\"\n        :aria-expanded=\"isMenuOpen\"\n        @click.stop=\"handleTitleClick($event)\"\n      >\n        {{ title }}\n        <RuiIcon\n          name=\"lu-chevron-down\"\n          size=\"14\"\n          class=\"text-rui-text-secondary\"\n        />\n      </button>\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    </div>\n\n    <RuiButton\n      type=\"button\"\n      variant=\"text\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-next\"\n      aria-label=\"Next month\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-right\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCalendarHeader.js","names":["_sfc_main"],"sources":["../../../src/components/calendar/RuiCalendarHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, ref } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { type MonthYearSelection, useCalendarState } 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 = useCalendarState();\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 instanceof HTMLElement ? e.currentTarget : 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-3 py-2\">\n    <RuiButton\n      type=\"button\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-prev\"\n      aria-label=\"Previous month\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-left\" />\n    </RuiButton>\n\n    <!--\n      The title and its picker share the middle, so the picker's own wrapper is not a fourth flex item\n      that pulls the title off center. The month and year open the picker, so they are a button.\n    -->\n    <div class=\"flex min-w-0 flex-1 justify-center\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 rounded-rui-control px-2 py-1 text-sm font-medium text-rui-text transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n        data-id=\"header-title\"\n        aria-haspopup=\"dialog\"\n        :aria-expanded=\"isMenuOpen\"\n        @click.stop=\"handleTitleClick($event)\"\n      >\n        {{ title }}\n        <RuiIcon\n          name=\"lu-chevron-down\"\n          size=\"14\"\n          class=\"text-rui-text-secondary\"\n        />\n      </button>\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    </div>\n\n    <RuiButton\n      type=\"button\"\n      variant=\"text\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-next\"\n      aria-label=\"Next month\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-right\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -1,9 +1,9 @@
 import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
-import { CalendarStateSymbol } from "./state.js";
+import { useCalendarState } from "./state.js";
 import RuiCalendarMenu_default from "./RuiCalendarMenu.js";
-import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, ref, toDisplayString, useModel, withCtx, withModifiers } from "vue";
+import { computed, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, ref, toDisplayString, useModel, withCtx, withModifiers } from "vue";
 //#region src/components/calendar/RuiCalendarHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex items-center justify-between px-3 py-2" };
 var _hoisted_2 = { class: "flex min-w-0 flex-1 justify-center" };
@@ -32,7 +32,7 @@ var RuiCalendarHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		const isMenuOpen = useModel(__props, "menu-open");
 		const emit = __emit;
 		const anchorEl = ref();
-		const calendarState = inject(CalendarStateSymbol);
+		const calendarState = useCalendarState();
 		const canGoToNext = computed(() => {
 			const { maxDate } = calendarState;
 			if (!isDefined(maxDate)) return true;

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","RuiButton","_withModifiers","_withCtx","RuiIcon","_createElementVNode","_createTextVNode","_toDisplayString","RuiCalendarMenu"],"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 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 instanceof HTMLElement ? e.currentTarget : 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-3 py-2\">\n    <RuiButton\n      type=\"button\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-prev\"\n      aria-label=\"Previous month\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-left\" />\n    </RuiButton>\n\n    <!--\n      The title and its picker share the middle, so the picker's own wrapper is not a fourth flex item\n      that pulls the title off center. The month and year open the picker, so they are a button.\n    -->\n    <div class=\"flex min-w-0 flex-1 justify-center\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 rounded-rui-control px-2 py-1 text-sm font-medium text-rui-text transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n        data-id=\"header-title\"\n        aria-haspopup=\"dialog\"\n        :aria-expanded=\"isMenuOpen\"\n        @click.stop=\"handleTitleClick($event)\"\n      >\n        {{ title }}\n        <RuiIcon\n          name=\"lu-chevron-down\"\n          size=\"14\"\n          class=\"text-rui-text-secondary\"\n        />\n      </button>\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    </div>\n\n    <RuiButton\n      type=\"button\"\n      variant=\"text\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-next\"\n      aria-label=\"Next month\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-right\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,aAAaA,SAAoB,SAAC,WAA+B;EAQvE,MAAM,OAAO;EAMb,MAAM,WAAW,IAAiB;EAElC,MAAM,gBAAgB,OAAyB,mBAAmB;EAElE,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;GACpB,IAAI,CAAC,UAAU,OAAO,GACpB,OAAO;GAIT,OAAO,IADU,KAAK,QAAA,UAAU,QAAA,SACzB,CAAA,CAAK,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAQ;EAC/C,CAAC;EAED,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;GACpB,IAAI,CAAC,UAAU,OAAO,GACpB,OAAO;GAIT,OAAO,IADU,KAAK,QAAA,UAAU,QAAA,SACzB,CAAA,CAAK,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAQ;EAC/C,CAAC;EAED,SAAS,iBAAiB,GAAgB;GACxC,IAAI,UAAU,EAAE,yBAAyB,cAAc,EAAE,gBAAgB,KAAA,CAAS;GAClF,IAAI,YAAY,IAAI;EACtB;EAEA,SAAS,oBAAoB,WAAqC;GAChE,KAAK,gBAAgB,SAAS;EAChC;;GAIE,OAAAC,UAAA,GAAAC,mBAwDM,OAxDN,YAwDM;IAvDJC,YAWYC,mBAAA;KAVV,MAAK;KACL,MAAA;KACA,MAAK;KACL,WAAQ;KACR,cAAW;KACV,UAAQ,CAAG,YAAA;KACZ,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAO,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;;KAEjB,SAAAC,cAAkC,CAAlCH,YAAkCI,iBAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA;;;IAOjCC,mBAwBM,OAxBN,YAwBM,CAvBJA,mBAcS,UAAA;KAbP,MAAK;KACL,OAAM;KACN,WAAQ;KACR,iBAAc;KACb,iBAAe,WAAA;KACf,SAAK,OAAA,OAAA,OAAA,KAAAH,eAAA,WAAO,iBAAiB,MAAM,GAAA,CAAA,MAAA,CAAA;IAEjCI,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GAAAP,YAIEI,iBAAA;KAHA,MAAK;KACL,MAAK;KACL,OAAM;IAIVJ,CAAAA,CAAAA,GAAAA,GAAAA,UAAAA,GAAAA,YAMEQ,yBAAA;KALS,YAAA,WAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;KAClB,aAAW,SAAA;KACX,cAAY,QAAA;KACZ,aAAW,QAAA;KACX,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,oBAAoB,MAAM;;;;;;;IAIvCR,YAWYC,mBAAA;KAVV,MAAK;KACL,SAAQ;KACR,MAAA;KACA,MAAK;KACL,WAAQ;KACR,cAAW;KACV,UAAQ,CAAG,YAAA;KACX,SAAK,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAO,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;;KAEjB,SAAAC,cAAmC,CAAnCH,YAAmCI,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA"}
+{"version":3,"file":"RuiCalendarHeader.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_createVNode","RuiButton","_withModifiers","_withCtx","RuiIcon","_createElementVNode","_createTextVNode","_toDisplayString","RuiCalendarMenu"],"sources":["../../../src/components/calendar/RuiCalendarHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, ref } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { type MonthYearSelection, useCalendarState } 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 = useCalendarState();\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 instanceof HTMLElement ? e.currentTarget : 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-3 py-2\">\n    <RuiButton\n      type=\"button\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-prev\"\n      aria-label=\"Previous month\"\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-left\" />\n    </RuiButton>\n\n    <!--\n      The title and its picker share the middle, so the picker's own wrapper is not a fourth flex item\n      that pulls the title off center. The month and year open the picker, so they are a button.\n    -->\n    <div class=\"flex min-w-0 flex-1 justify-center\">\n      <button\n        type=\"button\"\n        class=\"flex items-center gap-1 rounded-rui-control px-2 py-1 text-sm font-medium text-rui-text transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n        data-id=\"header-title\"\n        aria-haspopup=\"dialog\"\n        :aria-expanded=\"isMenuOpen\"\n        @click.stop=\"handleTitleClick($event)\"\n      >\n        {{ title }}\n        <RuiIcon\n          name=\"lu-chevron-down\"\n          size=\"14\"\n          class=\"text-rui-text-secondary\"\n        />\n      </button>\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    </div>\n\n    <RuiButton\n      type=\"button\"\n      variant=\"text\"\n      icon\n      size=\"sm\"\n      data-id=\"nav-next\"\n      aria-label=\"Next month\"\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon name=\"lu-chevron-right\" />\n    </RuiButton>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAaA,MAAM,aAAaA,SAAoB,SAAC,WAA+B;EAQvE,MAAM,OAAO;EAMb,MAAM,WAAW,IAAiB;EAElC,MAAM,gBAAgB,iBAAiB;EAEvC,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;GACpB,IAAI,CAAC,UAAU,OAAO,GACpB,OAAO;GAIT,OAAO,IADU,KAAK,QAAA,UAAU,QAAA,SACzB,CAAA,CAAK,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAQ;EAC/C,CAAC;EAED,MAAM,cAAc,eAAwB;GAC1C,MAAM,EAAE,YAAY;GACpB,IAAI,CAAC,UAAU,OAAO,GACpB,OAAO;GAIT,OAAO,IADU,KAAK,QAAA,UAAU,QAAA,SACzB,CAAA,CAAK,QAAQ,IAAI,IAAI,OAAO,CAAC,CAAC,QAAQ;EAC/C,CAAC;EAED,SAAS,iBAAiB,GAAgB;GACxC,IAAI,UAAU,EAAE,yBAAyB,cAAc,EAAE,gBAAgB,KAAA,CAAS;GAClF,IAAI,YAAY,IAAI;EACtB;EAEA,SAAS,oBAAoB,WAAqC;GAChE,KAAK,gBAAgB,SAAS;EAChC;;GAIE,OAAAC,UAAA,GAAAC,mBAwDM,OAxDN,YAwDM;IAvDJC,YAWYC,mBAAA;KAVV,MAAK;KACL,MAAA;KACA,MAAK;KACL,WAAQ;KACR,cAAW;KACV,UAAQ,CAAG,YAAA;KACZ,SAAQ;KACP,SAAK,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAO,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;;KAEjB,SAAAC,cAAkC,CAAlCH,YAAkCI,iBAAA,EAAzB,MAAK,kBAAiB,CAAA,CAAA,CAAA;;;IAOjCC,mBAwBM,OAxBN,YAwBM,CAvBJA,mBAcS,UAAA;KAbP,MAAK;KACL,OAAM;KACN,WAAQ;KACR,iBAAc;KACb,iBAAe,WAAA;KACf,SAAK,OAAA,OAAA,OAAA,KAAAH,eAAA,WAAO,iBAAiB,MAAM,GAAA,CAAA,MAAA,CAAA;IAEjCI,GAAAA,CAAAA,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA,GAAAP,YAIEI,iBAAA;KAHA,MAAK;KACL,MAAK;KACL,OAAM;IAIVJ,CAAAA,CAAAA,GAAAA,GAAAA,UAAAA,GAAAA,YAMEQ,yBAAA;KALS,YAAA,WAAA;KAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;KAClB,aAAW,SAAA;KACX,cAAY,QAAA;KACZ,aAAW,QAAA;KACX,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,oBAAoB,MAAM;;;;;;;IAIvCR,YAWYC,mBAAA;KAVV,MAAK;KACL,SAAQ;KACR,MAAA;KACA,MAAK;KACL,WAAQ;KACR,cAAW;KACV,UAAQ,CAAG,YAAA;KACX,SAAK,OAAA,OAAA,OAAA,KAAAC,eAAA,WAAO,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;;KAEjB,SAAAC,cAAmC,CAAnCH,YAAmCI,iBAAA,EAA1B,MAAK,mBAAkB,CAAA,CAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarMenu.js","names":["_sfc_main"],"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 { type FloatingOptions, Placement } from '@/composables/floating';\nimport RuiButton from '../buttons/button/RuiButton.vue';\nimport { cellButtonStyles } from './calendar-menu-styles';\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\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\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\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/** Rebuilds the years the picker offers around the current start year. */\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    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 overflow-hidden\">\n      <div class=\"flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text\">\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Previous\"\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </RuiButton>\n\n        <button\n          type=\"button\"\n          class=\"flex-1 rounded-rui-control px-2 py-1 text-center transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </button>\n\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Next\"\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\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=\"cellButtonStyles({\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=\"cellButtonStyles({\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":""}
+{"version":3,"file":"RuiCalendarMenu.js","names":["_sfc_main"],"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  getShortMonthNames,\n  type MonthYearSelection,\n  useCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport RuiButton from '../buttons/button/RuiButton.vue';\nimport { cellButtonStyles } from './calendar-menu-styles';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\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\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\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 = useCalendarState();\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/** Rebuilds the years the picker offers around the current start year. */\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    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 overflow-hidden\">\n      <div class=\"flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text\">\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Previous\"\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </RuiButton>\n\n        <button\n          type=\"button\"\n          class=\"flex-1 rounded-rui-control px-2 py-1 text-center transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </button>\n\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Next\"\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\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=\"cellButtonStyles({\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=\"cellButtonStyles({\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":""}

package/dist/components/calendar/RuiCalendarMenu.vue.d.ts

@@ -5,15 +5,15 @@ type __VLS_Props = {
     viewYear: number;
 };
 type __VLS_ModelProps = {
-    modelValue?: boolean;
+    modelValue: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: MonthYearSelection) => any;
-    "update:modelValue": (value: boolean | undefined) => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((args_0: MonthYearSelection) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,11 +1,11 @@
 import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import RuiButton_default from "../buttons/button/RuiButton.js";
-import { CalendarStateSymbol, getShortMonthNames } from "./state.js";
+import { getShortMonthNames, useCalendarState } from "./state.js";
 import { Placement } from "../../composables/floating.js";
 import RuiMenu_default from "../overlays/menu/RuiMenu.js";
 import { cellButtonStyles } from "./calendar-menu-styles.js";
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
 //#region src/components/calendar/RuiCalendarMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "w-64 overflow-hidden" };
 var _hoisted_2 = { class: "flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text" };
@@ -28,7 +28,10 @@ var RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		viewMonth: {},
 		viewYear: {}
 	}, {
-		"modelValue": { type: Boolean },
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
 		"modelModifiers": {}
 	}),
 	emits: /*@__PURE__*/ mergeModels(["select"], ["update:modelValue"]),
@@ -39,7 +42,7 @@ var RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 		const viewMode = ref("months");
 		const startYear = ref(__props.viewYear - 6);
 		const months = getShortMonthNames();
-		const calendarState = inject(CalendarStateSymbol);
+		const calendarState = useCalendarState();
 		const yearRange = ref([]);
 		const monthsInRange = ref([]);
 		const yearsInRange = ref([]);

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","RuiMenu","_withCtx","_createElementVNode","_createVNode","RuiButton","_unref","_withModifiers","RuiIcon","_toDisplayString","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createCommentVNode"],"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 { type FloatingOptions, Placement } from '@/composables/floating';\nimport RuiButton from '../buttons/button/RuiButton.vue';\nimport { cellButtonStyles } from './calendar-menu-styles';\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\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\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\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/** Rebuilds the years the picker offers around the current start year. */\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    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 overflow-hidden\">\n      <div class=\"flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text\">\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Previous\"\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </RuiButton>\n\n        <button\n          type=\"button\"\n          class=\"flex-1 rounded-rui-control px-2 py-1 text-center transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </button>\n\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Next\"\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\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=\"cellButtonStyles({\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=\"cellButtonStyles({\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":"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"}
+{"version":3,"file":"RuiCalendarMenu.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","RuiMenu","_withCtx","_createElementVNode","_createVNode","RuiButton","_unref","_withModifiers","RuiIcon","_toDisplayString","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createCommentVNode"],"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  getShortMonthNames,\n  type MonthYearSelection,\n  useCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport { type FloatingOptions, Placement } from '@/composables/floating';\nimport RuiButton from '../buttons/button/RuiButton.vue';\nimport { cellButtonStyles } from './calendar-menu-styles';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>({ required: true });\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\nconst MENU_OPTIONS: FloatingOptions = { placement: Placement.bottomStart };\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 = useCalendarState();\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/** Rebuilds the years the picker offers around the current start year. */\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    :options=\"MENU_OPTIONS\"\n  >\n    <div class=\"w-64 overflow-hidden\">\n      <div class=\"flex items-center justify-between gap-1 border-b border-rui-divider px-1 pb-1 text-sm font-medium text-rui-text\">\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Previous\"\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon name=\"lu-chevron-left\" />\n        </RuiButton>\n\n        <button\n          type=\"button\"\n          class=\"flex-1 rounded-rui-control px-2 py-1 text-center transition-colors hover:bg-rui-hover outline-hidden focus-visible:focus-ring\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </button>\n\n        <RuiButton\n          type=\"button\"\n          icon\n          size=\"sm\"\n          aria-label=\"Next\"\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon name=\"lu-chevron-right\" />\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=\"cellButtonStyles({\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=\"cellButtonStyles({\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":"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"}

package/dist/components/calendar/state.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import { type ComputedRef, type InjectionKey, type Ref } from 'vue';
 export declare const CalendarStateSymbol: InjectionKey<RuiCalendarState>;
 export interface RuiCalendarState {
     viewMonth: Ref<number>;
@@ -9,6 +9,13 @@ export interface RuiCalendarState {
     isDark: ComputedRef<boolean>;
     allowEmpty: boolean;
 }
+/**
+ * The state RuiCalendar provides to its grid, header and menu.
+ *
+ * @returns the view, selection and limits of the enclosing calendar
+ * @throws when used outside a RuiCalendar
+ */
+export declare function useCalendarState(): RuiCalendarState;
 export interface MonthYearSelection {
     month: number;
     year: number;

package/dist/components/calendar/state.js

@@ -1,5 +1,17 @@
+import { inject } from "vue";
 //#region src/components/calendar/state.ts
 var CalendarStateSymbol = Symbol.for("rui:calendar");
+/**
+* The state RuiCalendar provides to its grid, header and menu.
+*
+* @returns the view, selection and limits of the enclosing calendar
+* @throws when used outside a RuiCalendar
+*/
+function useCalendarState() {
+	const state = inject(CalendarStateSymbol, void 0);
+	if (!state) throw new Error("useCalendarState must be used within a RuiCalendar");
+	return state;
+}
 function getDaysOfWeek(locale = "en-US", format = "narrow") {
 	const daysOfWeek = [];
 	for (let i = 0; i < 7; i++) {
@@ -19,6 +31,6 @@ function getShortMonthNames(locale = "en-US") {
 	return monthNames;
 }
 //#endregion
-export { CalendarStateSymbol, getDaysOfWeek, getShortMonthNames };
+export { CalendarStateSymbol, getDaysOfWeek, getShortMonthNames, useCalendarState };
 
 //# sourceMappingURL=state.js.map