@rotki/ui-library 3.1.6 → 3.2.0

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

@@ -1,6 +1,7 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.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";
 //#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({
@@ -32,143 +33,6 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const buttonGroupStyles = tv({
-			slots: {
-				root: "inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1",
-				button: "border-0 inset-ring-0 focus:z-1"
-			},
-			variants: {
-				vertical: {
-					true: {
-						root: "flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full",
-						button: "w-full"
-					},
-					false: {}
-				},
-				gap: {
-					none: { button: "rounded-none!" },
-					sm: {
-						root: "between:border-0 outline-0 gap-2",
-						button: "inset-ring"
-					},
-					md: {
-						root: "between:border-0 outline-0 gap-4",
-						button: "inset-ring"
-					},
-					lg: {
-						root: "between:border-0 outline-0 gap-6",
-						button: "inset-ring"
-					}
-				},
-				variant: {
-					default: {},
-					outlined: { root: "outline-rui-outline between:border-rui-outline" },
-					text: {},
-					segmented: {
-						root: "rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800",
-						button: ["h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2", "data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700"].join(" ")
-					}
-				},
-				color: {
-					primary: {},
-					secondary: {},
-					error: {},
-					warning: {},
-					info: {},
-					success: {}
-				}
-			},
-			compoundVariants: [
-				{
-					gap: "none",
-					vertical: false,
-					class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!" }
-				},
-				{
-					gap: "none",
-					vertical: true,
-					class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!" }
-				},
-				{
-					gap: "none",
-					variant: [
-						"default",
-						"outlined",
-						"text"
-					],
-					class: { button: "focus-visible:ring-2 focus-visible:ring-rui-surface" }
-				},
-				{
-					variant: "segmented",
-					class: { button: "rounded-rui-control!" }
-				},
-				{
-					color: "primary",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-primary/50" }
-				},
-				{
-					color: "secondary",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-secondary/50" }
-				},
-				{
-					color: "error",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-error/50" }
-				},
-				{
-					color: "warning",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-warning/50" }
-				},
-				{
-					color: "info",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-info/50" }
-				},
-				{
-					color: "success",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-success/50" }
-				},
-				{
-					color: "primary",
-					variant: "outlined",
-					class: { root: "outline-rui-primary/50" }
-				},
-				{
-					color: "secondary",
-					variant: "outlined",
-					class: { root: "outline-rui-secondary/50" }
-				},
-				{
-					color: "error",
-					variant: "outlined",
-					class: { root: "outline-rui-error/50" }
-				},
-				{
-					color: "warning",
-					variant: "outlined",
-					class: { root: "outline-rui-warning/50" }
-				},
-				{
-					color: "info",
-					variant: "outlined",
-					class: { root: "outline-rui-info/50" }
-				},
-				{
-					color: "success",
-					variant: "outlined",
-					class: { root: "outline-rui-success/50" }
-				}
-			],
-			defaultVariants: {
-				vertical: false,
-				gap: "none",
-				variant: "default"
-			}
-		});
 		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, tv } from '@/utils/tv';\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 buttonGroupStyles = tv({\n  slots: {\n    /*\n     * `w-fit`: a flex column stretches its children, inline-flex or not, which drew an outlined\n     * group's frame across the whole row. A consumer's own width still wins through the class merge.\n     * Between filled buttons a separator only needs to part the fills, so it takes the light divider.\n     */\n    root: 'inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1',\n    button: 'border-0 inset-ring-0 focus:z-1',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: 'rounded-none!',\n      },\n      sm: {\n        root: 'between:border-0 outline-0 gap-2',\n        button: 'inset-ring',\n      },\n      md: {\n        root: 'between:border-0 outline-0 gap-4',\n        button: 'inset-ring',\n      },\n      lg: {\n        root: 'between:border-0 outline-0 gap-6',\n        button: 'inset-ring',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // the control edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-rui-outline between:border-rui-outline',\n      },\n      text: {},\n      // the segmented tabs' track and pill; the 32px options make a 36px control, a field's height\n      segmented: {\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800',\n        button: [\n          'h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2',\n          'data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700',\n        ].join(' '),\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * The outer corners go to the button that is, or sits inside, the group's first or last item, so a\n     * button wrapped in a tooltip or a menu activator rounds like a direct child.\n     */\n    { gap: 'none', vertical: false, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!' } },\n    { gap: 'none', vertical: true, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!' } },\n    /*\n     * In a joined group the focus outline's sides fall on the neighbours, and on a primary neighbour a\n     * primary outline vanishes. A surface ring fills the outline's offset, so the raised segment's\n     * ring is parted from its neighbours on every side.\n     */\n    { gap: 'none', variant: ['default', 'outlined', 'text'], class: { button: 'focus-visible:ring-2 focus-visible:ring-rui-surface' } },\n    // each segment is its own rounded pill inside the track, not a slice of one joined bar\n    { variant: 'segmented', class: { button: 'rounded-rui-control!' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-primary/50' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-secondary/50' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'between:border-rui-error/50' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'between:border-rui-warning/50' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'between:border-rui-info/50' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'between:border-rui-success/50' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/50' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/50' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/50' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\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":"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"}
+{"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"}

package/dist/components/buttons/button-group/button-group-styles.d.ts

@@ -0,0 +1,142 @@
+export declare const buttonGroupStyles: import("tailwind-variants").TVReturnType<{
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}, undefined, {
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}>>;

package/dist/components/buttons/button-group/button-group-styles.js

@@ -0,0 +1,143 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/buttons/button-group/button-group-styles.ts
+var buttonGroupStyles = tv({
+	slots: {
+		root: "inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1",
+		button: "border-0 inset-ring-0 focus:z-1"
+	},
+	variants: {
+		vertical: {
+			true: {
+				root: "flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full",
+				button: "w-full"
+			},
+			false: {}
+		},
+		gap: {
+			none: { button: "rounded-none!" },
+			sm: {
+				root: "between:border-0 outline-0 gap-2",
+				button: "inset-ring"
+			},
+			md: {
+				root: "between:border-0 outline-0 gap-4",
+				button: "inset-ring"
+			},
+			lg: {
+				root: "between:border-0 outline-0 gap-6",
+				button: "inset-ring"
+			}
+		},
+		variant: {
+			default: {},
+			outlined: { root: "outline-rui-outline between:border-rui-outline" },
+			text: {},
+			segmented: {
+				root: "rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800",
+				button: ["h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2", "data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700"].join(" ")
+			}
+		},
+		color: {
+			primary: {},
+			secondary: {},
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		}
+	},
+	compoundVariants: [
+		{
+			gap: "none",
+			vertical: false,
+			class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!" }
+		},
+		{
+			gap: "none",
+			vertical: true,
+			class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!" }
+		},
+		{
+			gap: "none",
+			variant: [
+				"default",
+				"outlined",
+				"text"
+			],
+			class: { button: "focus-visible:ring-2 focus-visible:ring-rui-surface" }
+		},
+		{
+			variant: "segmented",
+			class: { button: "rounded-rui-control!" }
+		},
+		{
+			color: "primary",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-primary/50" }
+		},
+		{
+			color: "secondary",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-secondary/50" }
+		},
+		{
+			color: "error",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-error/50" }
+		},
+		{
+			color: "warning",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-warning/50" }
+		},
+		{
+			color: "info",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-info/50" }
+		},
+		{
+			color: "success",
+			variant: ["outlined", "text"],
+			class: { root: "between:border-rui-success/50" }
+		},
+		{
+			color: "primary",
+			variant: "outlined",
+			class: { root: "outline-rui-primary/50" }
+		},
+		{
+			color: "secondary",
+			variant: "outlined",
+			class: { root: "outline-rui-secondary/50" }
+		},
+		{
+			color: "error",
+			variant: "outlined",
+			class: { root: "outline-rui-error/50" }
+		},
+		{
+			color: "warning",
+			variant: "outlined",
+			class: { root: "outline-rui-warning/50" }
+		},
+		{
+			color: "info",
+			variant: "outlined",
+			class: { root: "outline-rui-info/50" }
+		},
+		{
+			color: "success",
+			variant: "outlined",
+			class: { root: "outline-rui-success/50" }
+		}
+	],
+	defaultVariants: {
+		vertical: false,
+		gap: "none",
+		variant: "default"
+	}
+});
+//#endregion
+export { buttonGroupStyles };
+
+//# sourceMappingURL=button-group-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-styles.js","names":[],"sources":["../../../../src/components/buttons/button-group/button-group-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const buttonGroupStyles = tv({\n  slots: {\n    /*\n     * `w-fit`: a flex column stretches its children, inline-flex or not, which drew an outlined\n     * group's frame across the whole row. A consumer's own width still wins through the class merge.\n     * Between filled buttons a separator only needs to part the fills, so it takes the light divider.\n     */\n    root: 'inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1',\n    button: 'border-0 inset-ring-0 focus:z-1',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: 'rounded-none!',\n      },\n      sm: {\n        root: 'between:border-0 outline-0 gap-2',\n        button: 'inset-ring',\n      },\n      md: {\n        root: 'between:border-0 outline-0 gap-4',\n        button: 'inset-ring',\n      },\n      lg: {\n        root: 'between:border-0 outline-0 gap-6',\n        button: 'inset-ring',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // the control edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-rui-outline between:border-rui-outline',\n      },\n      text: {},\n      // the segmented tabs' track and pill; the 32px options make a 36px control, a field's height\n      segmented: {\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800',\n        button: [\n          'h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2',\n          'data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700',\n        ].join(' '),\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * The outer corners go to the button that is, or sits inside, the group's first or last item, so a\n     * button wrapped in a tooltip or a menu activator rounds like a direct child.\n     */\n    { gap: 'none', vertical: false, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!' } },\n    { gap: 'none', vertical: true, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!' } },\n    /*\n     * In a joined group the focus outline's sides fall on the neighbours, and on a primary neighbour a\n     * primary outline vanishes. A surface ring fills the outline's offset, so the raised segment's\n     * ring is parted from its neighbours on every side.\n     */\n    { gap: 'none', variant: ['default', 'outlined', 'text'], class: { button: 'focus-visible:ring-2 focus-visible:ring-rui-surface' } },\n    // each segment is its own rounded pill inside the track, not a slice of one joined bar\n    { variant: 'segmented', class: { button: 'rounded-rui-control!' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-primary/50' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-secondary/50' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'between:border-rui-error/50' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'between:border-rui-warning/50' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'between:border-rui-info/50' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'between:border-rui-success/50' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/50' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/50' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/50' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n"],"mappings":";;AAEA,IAAa,oBAAoB,GAAG;CAClC,OAAO;EAML,MAAM;EACN,QAAQ;CACV;CACA,UAAU;EACR,UAAU;GACR,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;GACA,OAAO,CAAC;EACV;EACA,KAAK;GACH,MAAM,EACJ,QAAQ,gBACV;GACA,IAAI;IACF,MAAM;IACN,QAAQ;GACV;GACA,IAAI;IACF,MAAM;IACN,QAAQ;GACV;GACA,IAAI;IACF,MAAM;IACN,QAAQ;GACV;EACF;EACA,SAAS;GACP,SAAS,CAAC;GACV,UAAU,EAER,MAAM,iDACR;GACA,MAAM,CAAC;GAEP,WAAW;IACT,MAAM;IACN,QAAQ,CACN,0GACA,iIACF,CAAC,CAAC,KAAK,GAAG;GACZ;EACF;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAKhB;GAAE,KAAK;GAAQ,UAAU;GAAO,OAAO,EAAE,QAAQ,sMAAsM;EAAE;EACzP;GAAE,KAAK;GAAQ,UAAU;GAAM,OAAO,EAAE,QAAQ,sMAAsM;EAAE;EAMxP;GAAE,KAAK;GAAQ,SAAS;IAAC;IAAW;IAAY;GAAM;GAAG,OAAO,EAAE,QAAQ,sDAAsD;EAAE;EAElI;GAAE,SAAS;GAAa,OAAO,EAAE,QAAQ,uBAAuB;EAAE;EAGlE;GAAE,OAAO;GAAW,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,gCAAgC;EAAE;EACpG;GAAE,OAAO;GAAa,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,kCAAkC;EAAE;EACxG;GAAE,OAAO;GAAS,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,8BAA8B;EAAE;EAChG;GAAE,OAAO;GAAW,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,gCAAgC;EAAE;EACpG;GAAE,OAAO;GAAQ,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,6BAA6B;EAAE;EAC9F;GAAE,OAAO;GAAW,SAAS,CAAC,YAAY,MAAM;GAAG,OAAO,EAAE,MAAM,gCAAgC;EAAE;EAGpG;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,yBAAyB;EAAE;EACnF;GAAE,OAAO;GAAa,SAAS;GAAY,OAAO,EAAE,MAAM,2BAA2B;EAAE;EACvF;GAAE,OAAO;GAAS,SAAS;GAAY,OAAO,EAAE,MAAM,uBAAuB;EAAE;EAC/E;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,yBAAyB;EAAE;EACnF;GAAE,OAAO;GAAQ,SAAS;GAAY,OAAO,EAAE,MAAM,sBAAsB;EAAE;EAC7E;GAAE,OAAO;GAAW,SAAS;GAAY,OAAO,EAAE,MAAM,yBAAyB;EAAE;CACrF;CACA,iBAAiB;EACf,UAAU;EACV,KAAK;EACL,SAAS;CACX;AACF,CAAC"}

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

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

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

@@ -1,7 +1,7 @@
 import { get, isDefined, set } from "../../vendor/@vueuse/shared/dist/index.js";
 import { useRotkiTheme } from "../../composables/theme.js";
-import { tv } from "../../utils/tv.js";
 import { CalendarStateSymbol } from "./state.js";
+import { calendarStyles } from "./calendar-styles.js";
 import RuiCalendarGrid_default from "./RuiCalendarGrid.js";
 import RuiCalendarHeader_default from "./RuiCalendarHeader.js";
 import { computed, createElementBlock, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, provide, ref, useModel, watch } from "vue";
@@ -41,13 +41,6 @@ var RuiCalendar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		const viewMonth = ref(get(currentDate).getMonth());
 		const viewYear = ref(get(currentDate).getFullYear());
 		const { isDark } = useRotkiTheme();
-		const calendarStyles = tv({
-			base: "w-75 overflow-hidden",
-			variants: { bordered: {
-				true: "bg-rui-surface rounded-rui-panel border border-rui-divider",
-				false: "bg-rui-menu"
-			} }
-		});
 		const ui = computed(() => calendarStyles({ bordered: !__props.borderless }));
 		const monthTitle = computed(() => {
 			return new Date(get(viewYear), get(viewMonth)).toLocaleString("default", {

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

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiCalendarHeader","RuiCalendarGrid"],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst calendarStyles = tv({\n  base: 'w-75 overflow-hidden',\n  variants: {\n    // standalone it sits on the card surface; borderless it lives inside a menu\n    bordered: {\n      true: 'bg-rui-surface rounded-rui-panel border border-rui-divider',\n      false: 'bg-rui-menu',\n    },\n  },\n});\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\n// The grid's keyboard navigation also turns the view, so the title follows the view itself\nwatch(monthTitle, (title) => {\n  emit('update:pages', [{ title }]);\n});\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBA,MAAM,QAAQA,SAA6B,SAAA,YAAoB;EAC/D,MAAM,aAAaA,SAAoB,SAAC,WAAgD;EAIxF,MAAM,OAAO;EAIb,MAAM,cAAc,IAAU,UAAU,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,oBAAI,IAAI,KAAK,CAAC;EAClF,MAAM,eAAe,IAAsB,UAAU,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAA,CAAS;EAC9F,MAAM,YAAY,IAAY,IAAI,WAAW,CAAC,CAAC,SAAS,CAAC;EACzD,MAAM,WAAW,IAAY,IAAI,WAAW,CAAC,CAAC,YAAY,CAAC;EAE3D,MAAM,EAAE,WAAW,cAAc;EAEjC,MAAM,iBAAiB,GAAG;GACxB,MAAM;GACN,UAAU,EAER,UAAU;IACR,MAAM;IACN,OAAO;GACT,EACF;EACF,CAAC;EAED,MAAM,KAAK,eAAuB,eAAe,EAAE,UAAU,CAAC,QAAA,WAAW,CAAC,CAAC;EAE3E,MAAM,aAAa,eAAuB;GAExC,OAAO,IADU,KAAK,IAAI,QAAQ,GAAG,IAAI,SAAS,CAC3C,CAAA,CAAK,eAAe,WAAW;IAAE,OAAO;IAAQ,MAAM;GAAU,CAAC;EAC1E,CAAC;EAED,QAAQ,oBAAoB,QAAQ,GAAG;GACrC;GACA;GACA;GACA,SAAS,eAAgB,QAAA,UAAU,IAAI,KAAK,QAAA,OAAO,IAAI,KAAA,CAAU;GACjE,SAAS,eAAgB,QAAA,UAAU,IAAI,KAAK,QAAA,OAAO,IAAI,KAAA,CAAU;GACjE;GACA,YAAS,QAAA;EACX,CAA4B;EAG5B,MAAM,aAAa,UAAU;GAC3B,KAAK,gBAAgB,CAAC,EAAE,MAAM,CAAC,CAAC;EAClC,CAAC;EAED,SAAS,UAAU,OAAqB;GACtC,IAAI,WAAW,IAAI,SAAS,IAAI;GAChC,IAAI,UAAU,IAAI,QAAQ;GAE1B,IAAI,WAAW,IAAI;IACjB,WAAW;IACX;GACF,OACK,IAAI,WAAW,GAAG;IACrB,WAAW;IACX;GACF;GAEA,IAAI,WAAW,QAAQ;GACvB,IAAI,UAAU,OAAO;EACvB;EAEA,SAAS,KAAK,MAA2B;GACvC,MAAM,UAAU,IAAI,KAAK,IAAI;GAC7B,IAAI,WAAW,QAAQ,SAAS,CAAC;GACjC,IAAI,UAAU,QAAQ,YAAY,CAAC;EACrC;EAEA,SAAS,YAAY,WAAqC;GACxD,IAAI,WAAW,UAAU,KAAK;GAC9B,IAAI,UAAU,UAAU,IAAI;GAG5B,IAAI,UAAU,YAAY,GAAG;IAC3B,MAAM,UAAU,IAAI,YAAY;IAChC,MAAM,aAAa,QAAQ,QAAQ;IAEnC,MAAM,iBAAiB,IAAI,KAAK,UAAU,MAAM,UAAU,QAAQ,GAAG,CAAC,CAAC,CAAC,QAAQ;IAChF,MAAM,cAAc,KAAK,IAAI,YAAY,cAAc;IAEvD,MAAM,UAAU,IAAI,KAAK,OAAO;IAChC,QAAQ,YAAY,UAAU,IAAI;IAClC,QAAQ,QAAQ,CAAC;IACjB,QAAQ,SAAS,UAAU,KAAK;IAChC,QAAQ,QAAQ,WAAW;IAC3B,IAAI,cAAc,OAAO;GAC3B;EACF;EAEA,MAAM,eAAe,SAAS;GAC5B,IAAI,CAAC,QAAQ,CAAC,QAAA,YACZ;GAEF,IAAI,MAAM;IACR,IAAI,OAAO,IAAI,KAAK,IAAI,CAAC;IAEzB,IAAI,IAAI,SAAS,MAAM,KAAK,SAAS,GACnC,IAAI,WAAW,KAAK,SAAS,CAAC;IAGhC,IAAI,IAAI,QAAQ,MAAM,KAAK,YAAY,GACrC,IAAI,UAAU,KAAK,YAAY,CAAC;GAEpC,OAEE,IAAI,OAAO,KAAA,CAAS;EAExB,CAAC;EAED,MAAM,QAAQ,aAAa;GACzB,IAAI,aAAa,KAAA,GAAW;IAC1B,IAAI,cAAc,KAAA,CAAS;IAC3B;GACF;GAEA,MAAM,OAAO,IAAI,KAAK,QAAQ;GAE9B,IAAI,UAAU,YAAY,KAAK,IAAI,YAAY,CAAC,CAAC,QAAQ,MAAM,KAAK,QAAQ,GAAG;IAC7E,IAAI,cAAc,IAAI,KAAK,QAAQ,CAAC;IACpC,IAAI,WAAW,KAAK,SAAS,CAAC;IAC9B,IAAI,UAAU,KAAK,YAAY,CAAC;GAClC;EACF,CAAC;EAED,SAAa,EACX,KACF,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAgBM,OAAA,EAhBA,OAAKC,eAAE,GAAA,KAAE,EAAA,GAAA,CACbC,YAQEC,2BAAA;IAPQ,aAAW,WAAA;IAAA,qBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,WAAU,QAAA;IAC5B,OAAO,WAAA;IACP,cAAY,UAAA;IACZ,aAAW,SAAA;IACX,aAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAS,EAAA;IACrB,aAAU,OAAA,OAAA,OAAA,MAAA,WAAE,UAAS,CAAA;IACrB,eAAY,OAAA,OAAA,OAAA,MAAA,WAAE,YAAY,MAAM;;;;;;GAGnCD,CAAAA,GAAAA,YAIEE,yBAAA;IAHS,YAAA,aAAA;IAAA,uBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,aAAY,QAAA;IACpB,cAAY,UAAA;IACZ,aAAW,SAAA"}
+{"version":3,"file":"RuiCalendar.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createElementBlock","_normalizeClass","_createVNode","RuiCalendarHeader","RuiCalendarGrid"],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { calendarStyles } from './calendar-styles';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\n// The grid's keyboard navigation also turns the view, so the title follows the view itself\nwatch(monthTitle, (title) => {\n  emit('update:pages', [{ title }]);\n});\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/calendar/RuiCalendarGrid.js.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 { tv } from '@/utils/tv';\n\ndefineOptions({\n  name: 'RuiCalendarGrid',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n/**\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\nconst dayButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm rounded-rui-control mx-auto max-w-9 transition-colors duration-150 ease-in-out border-none outline-hidden cursor-pointer focus-visible:focus-ring',\n  variants: {\n    selected: {\n      true: 'bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-fill hover:state-layer-pressed',\n    },\n    // the neighbouring months' days are a step quieter but still pickable, so they keep 4.5:1\n    currentMonth: {\n      true: 'text-rui-neutral-800 dark:text-rui-neutral-100',\n      false: 'text-rui-neutral-500 dark:text-rui-neutral-400',\n    },\n    inRange: {\n      false: 'opacity-50 cursor-not-allowed hover:bg-transparent',\n    },\n    today: {\n      true: 'inset-ring inset-ring-rui-outline font-semibold',\n    },\n  },\n  compoundVariants: [\n    // restated under `dark:`, which the current-month day color uses and would otherwise win\n    {\n      selected: true,\n      class: 'text-rui-primary-foreground dark:text-rui-primary-foreground',\n    },\n    // only a pickable, unselected day takes the grey hover; on the selected one it replaced the fill\n    { selected: false, inRange: true, class: 'hover:bg-rui-hover' },\n  ],\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst calendarDays = ref<\n  Array<{\n    date: Date;\n    isCurrentMonth: boolean;\n    isInRange: boolean;\n    isSelected: boolean;\n    isToday: boolean;\n    key: string;\n    dayNumber: number;\n  }>\n>([]);\n\nfunction createDayData(\n  date: Date,\n  isCurrentMonth: boolean,\n  modelValue: Date | null | undefined,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): {\n  date: Date;\n  isCurrentMonth: boolean;\n  isInRange: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n  dayNumber: number;\n} {\n  const key = createDateKey(date);\n  return {\n    date,\n    isCurrentMonth,\n    isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),\n    isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,\n    isToday: key === todayKey,\n    key,\n    dayNumber: date.getDate(),\n  };\n}\n\n/** 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=\"dayButton({\n            selected: dayData.isSelected,\n            currentMonth: !dayData.isSelected && dayData.isCurrentMonth,\n            inRange: dayData.isInRange,\n            today: dayData.isToday && !dayData.isSelected,\n          })\"\n          :disabled=\"!dayData.isInRange\"\n          :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, 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":""}