@rotki/ui-library 3.1.7 → 3.3.0

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 { tv } from "../../utils/tv.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 { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
+import { cellButtonStyles } from "./calendar-menu-styles.js";
+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,18 +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 cellButton = tv({
-			base: "h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control transition-colors duration-150 ease-in-out border-none outline-hidden cursor-pointer focus-visible:focus-ring",
-			variants: {
-				selected: { true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker" },
-				inRange: {
-					true: "text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed",
-					false: "cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled"
-				},
-				selectedOutOfRange: { true: "bg-rui-surface-muted text-rui-text-disabled" }
-			}
-		});
+		const calendarState = useCalendarState();
 		const yearRange = ref([]);
 		const monthsInRange = ref([]);
 		const yearsInRange = ref([]);
@@ -220,7 +212,7 @@ var RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					return openBlock(), createElementBlock("button", {
 						key: month,
 						type: "button",
-						class: normalizeClass(unref(cellButton)({
+						class: normalizeClass(unref(cellButtonStyles)({
 							selected: index === __props.viewMonth && unref(get)(monthsInRange.value)[index],
 							selectedOutOfRange: index === __props.viewMonth && !unref(get)(monthsInRange.value)[index],
 							inRange: index !== __props.viewMonth ? unref(get)(monthsInRange.value)[index] : void 0
@@ -232,7 +224,7 @@ var RuiCalendarMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					return openBlock(), createElementBlock("button", {
 						key: year,
 						type: "button",
-						class: normalizeClass(unref(cellButton)({
+						class: normalizeClass(unref(cellButtonStyles)({
 							selected: year === __props.viewYear && unref(get)(yearsInRange.value)[index],
 							selectedOutOfRange: year === __props.viewYear && !unref(get)(yearsInRange.value)[index],
 							inRange: year !== __props.viewYear ? unref(get)(yearsInRange.value)[index] : void 0

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 { tv } from '@/utils/tv';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst { viewMonth, viewYear } = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\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\nconst cellButton = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control 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-darker active:bg-rui-primary-darker',\n    },\n    inRange: {\n      true: 'text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed',\n      false: 'cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled',\n    },\n    selectedOutOfRange: {\n      true: 'bg-rui-surface-muted text-rui-text-disabled',\n    },\n  },\n});\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n/** 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=\"cellButton({\n            selected: index === viewMonth && get(monthsInRange)[index],\n            selectedOutOfRange: index === viewMonth && !get(monthsInRange)[index],\n            inRange: index !== viewMonth ? get(monthsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"grid grid-cols-3 gap-1 p-2\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          :class=\"cellButton({\n            selected: year === viewYear && get(yearsInRange)[index],\n            selectedOutOfRange: year === viewYear && !get(yearsInRange)[index],\n            inRange: year !== viewYear ? get(yearsInRange)[index] : undefined,\n          })\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n"],"mappings":"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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/calendar-grid-styles.d.ts

@@ -0,0 +1,43 @@
+export declare const dayButtonStyles: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-fill hover:state-layer-pressed";
+    };
+    currentMonth: {
+        true: "text-rui-neutral-800 dark:text-rui-neutral-100";
+        false: "text-rui-neutral-500 dark:text-rui-neutral-400";
+    };
+    inRange: {
+        false: "opacity-50 cursor-not-allowed hover:bg-transparent";
+    };
+    today: {
+        true: "inset-ring inset-ring-rui-outline font-semibold";
+    };
+}, undefined, "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", {
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-fill hover:state-layer-pressed";
+    };
+    currentMonth: {
+        true: "text-rui-neutral-800 dark:text-rui-neutral-100";
+        false: "text-rui-neutral-500 dark:text-rui-neutral-400";
+    };
+    inRange: {
+        false: "opacity-50 cursor-not-allowed hover:bg-transparent";
+    };
+    today: {
+        true: "inset-ring inset-ring-rui-outline font-semibold";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-fill hover:state-layer-pressed";
+    };
+    currentMonth: {
+        true: "text-rui-neutral-800 dark:text-rui-neutral-100";
+        false: "text-rui-neutral-500 dark:text-rui-neutral-400";
+    };
+    inRange: {
+        false: "opacity-50 cursor-not-allowed hover:bg-transparent";
+    };
+    today: {
+        true: "inset-ring inset-ring-rui-outline font-semibold";
+    };
+}, undefined>>;

package/dist/components/calendar/calendar-grid-styles.js

@@ -0,0 +1,26 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/calendar/calendar-grid-styles.ts
+var dayButtonStyles = tv({
+	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",
+	variants: {
+		selected: { true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-fill hover:state-layer-pressed" },
+		currentMonth: {
+			true: "text-rui-neutral-800 dark:text-rui-neutral-100",
+			false: "text-rui-neutral-500 dark:text-rui-neutral-400"
+		},
+		inRange: { false: "opacity-50 cursor-not-allowed hover:bg-transparent" },
+		today: { true: "inset-ring inset-ring-rui-outline font-semibold" }
+	},
+	compoundVariants: [{
+		selected: true,
+		class: "text-rui-primary-foreground dark:text-rui-primary-foreground"
+	}, {
+		selected: false,
+		inRange: true,
+		class: "hover:bg-rui-hover"
+	}]
+});
+//#endregion
+export { dayButtonStyles };
+
+//# sourceMappingURL=calendar-grid-styles.js.map

package/dist/components/calendar/calendar-grid-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-grid-styles.js","names":[],"sources":["../../../src/components/calendar/calendar-grid-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const dayButtonStyles = 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"],"mappings":";;AAEA,IAAa,kBAAkB,GAAG;CAChC,MAAM;CACN,UAAU;EACR,UAAU,EACR,MAAM,sGACR;EAEA,cAAc;GACZ,MAAM;GACN,OAAO;EACT;EACA,SAAS,EACP,OAAO,qDACT;EACA,OAAO,EACL,MAAM,kDACR;CACF;CACA,kBAAkB,CAEhB;EACE,UAAU;EACV,OAAO;CACT,GAEA;EAAE,UAAU;EAAO,SAAS;EAAM,OAAO;CAAqB,CAChE;AACF,CAAC"}

package/dist/components/calendar/calendar-menu-styles.d.ts

@@ -0,0 +1,34 @@
+export declare const cellButtonStyles: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker";
+    };
+    inRange: {
+        true: "text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed";
+        false: "cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled";
+    };
+    selectedOutOfRange: {
+        true: "bg-rui-surface-muted text-rui-text-disabled";
+    };
+}, undefined, "h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control transition-colors duration-150 ease-in-out border-none outline-hidden cursor-pointer focus-visible:focus-ring", {
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker";
+    };
+    inRange: {
+        true: "text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed";
+        false: "cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled";
+    };
+    selectedOutOfRange: {
+        true: "bg-rui-surface-muted text-rui-text-disabled";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    selected: {
+        true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker";
+    };
+    inRange: {
+        true: "text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed";
+        false: "cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled";
+    };
+    selectedOutOfRange: {
+        true: "bg-rui-surface-muted text-rui-text-disabled";
+    };
+}, undefined>>;

package/dist/components/calendar/calendar-menu-styles.js

@@ -0,0 +1,17 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/calendar/calendar-menu-styles.ts
+var cellButtonStyles = tv({
+	base: "h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control transition-colors duration-150 ease-in-out border-none outline-hidden cursor-pointer focus-visible:focus-ring",
+	variants: {
+		selected: { true: "bg-rui-primary-fill text-rui-primary-foreground hover:bg-rui-primary-darker active:bg-rui-primary-darker" },
+		inRange: {
+			true: "text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed",
+			false: "cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled"
+		},
+		selectedOutOfRange: { true: "bg-rui-surface-muted text-rui-text-disabled" }
+	}
+});
+//#endregion
+export { cellButtonStyles };
+
+//# sourceMappingURL=calendar-menu-styles.js.map

package/dist/components/calendar/calendar-menu-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-menu-styles.js","names":[],"sources":["../../../src/components/calendar/calendar-menu-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const cellButtonStyles = tv({\n  base: 'h-9 w-full flex items-center justify-center text-sm font-medium rounded-rui-control 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-darker active:bg-rui-primary-darker',\n    },\n    inRange: {\n      true: 'text-rui-text bg-transparent hover:bg-rui-hover active:bg-rui-pressed',\n      false: 'cursor-not-allowed bg-transparent pointer-events-none text-rui-text-disabled',\n    },\n    selectedOutOfRange: {\n      true: 'bg-rui-surface-muted text-rui-text-disabled',\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,mBAAmB,GAAG;CACjC,MAAM;CACN,UAAU;EACR,UAAU,EACR,MAAM,2GACR;EACA,SAAS;GACP,MAAM;GACN,OAAO;EACT;EACA,oBAAoB,EAClB,MAAM,8CACR;CACF;AACF,CAAC"}

package/dist/components/calendar/calendar-styles.d.ts

@@ -0,0 +1,16 @@
+export declare const calendarStyles: import("tailwind-variants").TVReturnType<{
+    bordered: {
+        true: "bg-rui-surface rounded-rui-panel border border-rui-divider";
+        false: "bg-rui-menu";
+    };
+}, undefined, "w-75 overflow-hidden", {
+    bordered: {
+        true: "bg-rui-surface rounded-rui-panel border border-rui-divider";
+        false: "bg-rui-menu";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    bordered: {
+        true: "bg-rui-surface rounded-rui-panel border border-rui-divider";
+        false: "bg-rui-menu";
+    };
+}, undefined>>;

package/dist/components/calendar/calendar-styles.js

@@ -0,0 +1,13 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/calendar/calendar-styles.ts
+var calendarStyles = tv({
+	base: "w-75 overflow-hidden",
+	variants: { bordered: {
+		true: "bg-rui-surface rounded-rui-panel border border-rui-divider",
+		false: "bg-rui-menu"
+	} }
+});
+//#endregion
+export { calendarStyles };
+
+//# sourceMappingURL=calendar-styles.js.map

package/dist/components/calendar/calendar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-styles.js","names":[],"sources":["../../../src/components/calendar/calendar-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const 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"],"mappings":";;AAEA,IAAa,iBAAiB,GAAG;CAC/B,MAAM;CACN,UAAU,EAER,UAAU;EACR,MAAM;EACN,OAAO;CACT,EACF;AACF,CAAC"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"mappings":";AAEA,IAAa,sBAAsD,OAAO,IAAI,cAAc;AAiB5F,SAAgB,cAAc,SAA+B,SAAS,SAA6B,UAAoB;CACrH,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,MAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;EACpC,MAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI;EAChF,WAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;CACnE;CACA,OAAO;AACT;AAEA,SAAgB,mBAAmB,SAA+B,SAAmB;CACnF,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,QAAQ,GAAG,QAAQ,IAAI,SAAS;EACvC,MAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;EACpC,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO,IAAI;EACjF,WAAW,KAAK,SAAS;CAC3B;CACA,OAAO;AACT"}
+{"version":3,"file":"state.js","names":[],"sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import { type ComputedRef, inject, type InjectionKey, type Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\n/**\n * The state RuiCalendar provides to its grid, header and menu.\n *\n * @returns the view, selection and limits of the enclosing calendar\n * @throws when used outside a RuiCalendar\n */\nexport function useCalendarState(): RuiCalendarState {\n  const state = inject(CalendarStateSymbol, undefined);\n  if (!state)\n    throw new Error('useCalendarState must be used within a RuiCalendar');\n\n  return state;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"mappings":";;AAEA,IAAa,sBAAsD,OAAO,IAAI,cAAc;;;;;;;AAkB5F,SAAgB,mBAAqC;CACnD,MAAM,QAAQ,OAAO,qBAAqB,KAAA,CAAS;CACnD,IAAI,CAAC,OACH,MAAM,IAAI,MAAM,oDAAoD;CAEtE,OAAO;AACT;AAOA,SAAgB,cAAc,SAA+B,SAAS,SAA6B,UAAoB;CACrH,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK;EAC1B,MAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;EACpC,MAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAO,CAAC,CAAC,CAAC,OAAO,IAAI;EAChF,WAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;CACnE;CACA,OAAO;AACT;AAEA,SAAgB,mBAAmB,SAA+B,SAAmB;CACnF,MAAM,aAAuB,CAAC;CAC9B,KAAK,IAAI,QAAQ,GAAG,QAAQ,IAAI,SAAS;EACvC,MAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;EACpC,MAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO,IAAI;EACjF,WAAW,KAAK,SAAS;CAC3B;CACA,OAAO;AACT"}

package/dist/components/cards/RuiCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-rui-surface',\n    image: 'overflow-hidden',\n    content: 'text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    // a leading text button moves out by its side padding to align its label; unquoted selectors, quoted ones break consumer builds\n    footer: [\n      'flex between:ml-2 between:mr-0 items-center justify-start mt-auto',\n      '[&>[data-variant=text][data-size=xs]:first-child]:-ms-1',\n      '[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5',\n      '[&>[data-variant=text][data-size=md]:first-child]:-ms-2',\n      '[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5',\n      '[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5',\n    ],\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { root: 'rounded-rui-sm', image: 'rounded-t-rui-sm' },\n      md: { root: 'rounded-rui-card', image: 'rounded-t-rui-card' },\n      lg: { root: 'rounded-rui-lg', image: 'rounded-t-rui-lg' },\n    },\n    divide: {\n      true: { root: 'between:border-t between:border-b-0 between:border-rui-divider' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      // the footer keeps the content's side padding, so its buttons line up with the text above\n      true: { footer: 'p-3 pt-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n    underHeader: {\n      true: { content: 'pt-0' },\n      false: {},\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false, underHeader: false },\n});\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof card>>(() => card({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCard.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCard.vue.d.ts

@@ -1,4 +1,5 @@
 import type { VueClassValue } from '../../types/class-value.js';
+import { type HTMLAttributes } from 'vue';
 export interface RuiCardClassNames {
     root?: VueClassValue;
     content?: VueClassValue;
@@ -19,6 +20,7 @@ export interface Props {
     tightHeaderGap?: boolean;
     classNames?: RuiCardClassNames;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     'image'?: () => any;
     'custom-header'?: () => any;
@@ -28,7 +30,7 @@ type __VLS_Slots = {
     'default'?: () => any;
     'footer'?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,8 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import RuiCardHeader_default from "./RuiCardHeader.js";
 import { useKeyboardScroll } from "../../composables/keyboard-scroll.js";
+import { cardStyles } from "./card-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createSlots, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots, useTemplateRef, withCtx } from "vue";
 //#region src/components/cards/RuiCard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["tabindex"];
@@ -32,62 +33,6 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	},
 	setup(__props) {
 		const slots = useSlots();
-		const card = tv({
-			slots: {
-				root: "flex flex-col h-full w-full bg-rui-surface",
-				image: "overflow-hidden",
-				content: "text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2",
-				footer: [
-					"flex between:ml-2 between:mr-0 items-center justify-start mt-auto",
-					"[&>[data-variant=text][data-size=xs]:first-child]:-ms-1",
-					"[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5",
-					"[&>[data-variant=text][data-size=md]:first-child]:-ms-2",
-					"[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5",
-					"[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5"
-				]
-			},
-			variants: {
-				variant: {
-					flat: { root: "" },
-					outlined: { root: "border border-rui-divider" }
-				},
-				rounded: {
-					sm: {
-						root: "rounded-rui-sm",
-						image: "rounded-t-rui-sm"
-					},
-					md: {
-						root: "rounded-rui-card",
-						image: "rounded-t-rui-card"
-					},
-					lg: {
-						root: "rounded-rui-lg",
-						image: "rounded-t-rui-lg"
-					}
-				},
-				divide: { true: { root: "between:border-t between:border-b-0 between:border-rui-divider" } },
-				padding: {
-					none: { content: "p-0" },
-					dense: { content: "p-3" },
-					normal: { content: "p-4" }
-				},
-				dense: {
-					true: { footer: "p-3 pt-1" },
-					false: { footer: "p-4 pt-2" }
-				},
-				underHeader: {
-					true: { content: "pt-0" },
-					false: {}
-				}
-			},
-			defaultVariants: {
-				variant: "outlined",
-				rounded: "md",
-				padding: "normal",
-				dense: false,
-				underHeader: false
-			}
-		});
 		const content = useTemplateRef("content");
 		const contentTabindex = useKeyboardScroll(content);
 		const hasHeadContent = computed(() => !!slots.header || !!slots.subheader);
@@ -96,7 +41,7 @@ var RuiCard_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			return __props.dense ? "dense" : "normal";
 		});
 		const underHeader = computed(() => __props.tightHeaderGap && !__props.divide && (get(hasHeadContent) || !!slots["custom-header"]));
-		const ui = computed(() => card({
+		const ui = computed(() => cardStyles({
 			variant: __props.variant,
 			rounded: __props.rounded,
 			divide: __props.divide,

package/dist/components/cards/RuiCard.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst card = tv({\n  slots: {\n    root: 'flex flex-col h-full w-full bg-rui-surface',\n    image: 'overflow-hidden',\n    content: 'text-sm/6 text-rui-text overflow-y-auto outline-hidden focus-visible:focus-ring focus-visible:-outline-offset-2',\n    // a leading text button moves out by its side padding to align its label; unquoted selectors, quoted ones break consumer builds\n    footer: [\n      'flex between:ml-2 between:mr-0 items-center justify-start mt-auto',\n      '[&>[data-variant=text][data-size=xs]:first-child]:-ms-1',\n      '[&>[data-variant=text][data-size=sm]:first-child]:-ms-1.5',\n      '[&>[data-variant=text][data-size=md]:first-child]:-ms-2',\n      '[&>[data-variant=text][data-size=lg]:first-child]:-ms-2.5',\n      '[&>[data-variant=text][data-size$=xl]:first-child]:-ms-2.5',\n    ],\n  },\n  variants: {\n    variant: {\n      flat: { root: '' },\n      outlined: { root: 'border border-rui-divider' },\n    },\n    rounded: {\n      sm: { root: 'rounded-rui-sm', image: 'rounded-t-rui-sm' },\n      md: { root: 'rounded-rui-card', image: 'rounded-t-rui-card' },\n      lg: { root: 'rounded-rui-lg', image: 'rounded-t-rui-lg' },\n    },\n    divide: {\n      true: { root: 'between:border-t between:border-b-0 between:border-rui-divider' },\n    },\n    padding: {\n      none: { content: 'p-0' },\n      dense: { content: 'p-3' },\n      normal: { content: 'p-4' },\n    },\n    dense: {\n      // the footer keeps the content's side padding, so its buttons line up with the text above\n      true: { footer: 'p-3 pt-1' },\n      false: { footer: 'p-4 pt-2' },\n    },\n    underHeader: {\n      true: { content: 'pt-0' },\n      false: {},\n    },\n  },\n  defaultVariants: { variant: 'outlined', rounded: 'md', padding: 'normal', dense: false, underHeader: false },\n});\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof card>>(() => card({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiCard.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_mergeProps","_unref","_normalizeClass","_renderSlot","_createCommentVNode","_createBlock","RuiCardHeader","_createSlots","_withCtx"],"sources":["../../../src/components/cards/RuiCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { VueClassValue } from '@/types/class-value';\nimport { computed, type HTMLAttributes } from 'vue';\nimport RuiCardHeader from '@/components/cards/RuiCardHeader.vue';\nimport { useKeyboardScroll } from '@/composables/keyboard-scroll';\nimport { cn } from '@/utils/tv';\nimport { cardStyles } from './card-styles';\n\nexport interface RuiCardClassNames {\n  root?: VueClassValue;\n  content?: VueClassValue;\n  footer?: VueClassValue;\n  image?: VueClassValue;\n}\n\nexport interface Props {\n  dense?: boolean;\n  divide?: boolean;\n  variant?: 'flat' | 'outlined';\n  rounded?: 'sm' | 'md' | 'lg';\n  noPadding?: boolean;\n  /**\n   * Drops the content's top padding when a header renders, so the header's bottom padding is the\n   * only gap between them (16px, 12px when `dense`) instead of both paddings stacked. Ignored with\n   * `divide`, which draws a border there.\n   */\n  tightHeaderGap?: boolean;\n  classNames?: RuiCardClassNames;\n}\n\ndefineOptions({\n  name: 'RuiCard',\n  inheritAttrs: false,\n});\n\nconst {\n  divide = false,\n  dense = false,\n  variant: cardVariant = 'outlined',\n  rounded = 'md',\n  noPadding = false,\n  tightHeaderGap = false,\n  classNames,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  'image'?: () => any;\n  'custom-header'?: () => any;\n  'prepend'?: () => any;\n  'header'?: () => any;\n  'subheader'?: () => any;\n  'default'?: () => any;\n  'footer'?: () => any;\n}>();\n\nconst content = useTemplateRef<HTMLDivElement>('content');\n// a fixed-height card scrolls its content, which keyboard users need to reach when it holds no controls\nconst contentTabindex = useKeyboardScroll(content);\n\nconst hasHeadContent = computed<boolean>(() => !!slots.header || !!slots.subheader);\n\nconst contentPadding = computed<'none' | 'dense' | 'normal'>(() => {\n  if (noPadding)\n    return 'none';\n  return dense ? 'dense' : 'normal';\n});\n\n// only under a header (built-in or `custom-header`), and not with `divide`, whose border needs space on both sides\nconst underHeader = computed<boolean>(() => tightHeaderGap && !divide && (get(hasHeadContent) || !!slots['custom-header']));\n\nconst ui = computed<ReturnType<typeof cardStyles>>(() => cardStyles({\n  variant: cardVariant,\n  rounded,\n  divide,\n  dense,\n  padding: get(contentPadding),\n  underHeader: get(underHeader),\n}));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn(classNames?.root ?? $attrs.class) })\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <div\n      v-if=\"slots.image\"\n      data-id=\"card-image\"\n      :class=\"ui.image({ class: cn(classNames?.image) })\"\n    >\n      <slot name=\"image\" />\n    </div>\n    <slot name=\"custom-header\">\n      <RuiCardHeader\n        v-if=\"hasHeadContent\"\n        :dense=\"dense\"\n      >\n        <template\n          v-if=\"slots.prepend\"\n          #prepend\n        >\n          <slot name=\"prepend\" />\n        </template>\n        <template\n          v-if=\"slots.header\"\n          #header\n        >\n          <slot name=\"header\" />\n        </template>\n        <template\n          v-if=\"slots.subheader\"\n          #subheader\n        >\n          <slot name=\"subheader\" />\n        </template>\n      </RuiCardHeader>\n    </slot>\n    <div\n      v-if=\"slots.default\"\n      ref=\"content\"\n      data-id=\"card-content\"\n      :tabindex=\"contentTabindex\"\n      :class=\"ui.content({ class: cn(classNames?.content) })\"\n    >\n      <slot />\n    </div>\n    <div\n      v-if=\"slots.footer\"\n      data-id=\"card-footer\"\n      :class=\"ui.footer({ class: cn(classNames?.footer) })\"\n    >\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQC,SAAA;EAUd,MAAM,UAAU,eAA+B,SAAS;EAExD,MAAM,kBAAkB,kBAAkB,OAAO;EAEjD,MAAM,iBAAiB,eAAwB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,SAAS;EAElF,MAAM,iBAAiB,eAA4C;GACjE,IAAI,QAAA,WACF,OAAO;GACT,OAAO,QAAA,QAAQ,UAAU;EAC3B,CAAC;EAGD,MAAM,cAAc,eAAwB,QAAA,kBAAkB,CAAC,QAAA,WAAW,IAAI,cAAc,KAAK,CAAC,CAAC,MAAM,iBAAiB;EAE1H,MAAM,KAAK,eAA8C,WAAW;GAClE,SAAS,QAAA;GACT,SAAM,QAAA;GACN,QAAK,QAAA;GACL,OAAI,QAAA;GACJ,SAAS,IAAI,cAAc;GAC3B,aAAa,IAAI,WAAW;EAC9B,CAAC,CAAC;;GAIA,OAAAC,UAAA,GAAAC,mBAoDM,OApDNC,WAoDM,EAnDH,OAAO,GAAA,MAAG,KAAI,EAAA,OAAUC,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,QAAQL,KAAAA,OAAO,KAAK,EAAA,CAAA,EAC/CA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA;IAG7B,MAAM,SADdE,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,MAAK,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,KAAK,EAAA,CAAA,CAAA;IAE9CE,GAAAA,CAAAA,WAAqB,KAAA,QAAA,OAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAEvBA,WAwBO,KAAA,QAAA,iBAAA,CAAA,SAAA,CAtBG,eAAA,SADRL,UAAA,GAAAO,YAsBgBC,uBAAA;;KApBb,OAAO,QAAA;;KAGA,MAAM,UAAA;MACX,MAAA;MAED,IAAAE,cAAuB,CAAvBL,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;;KAGjB,MAAM,SAAA;MACX,MAAA;MAED,IAAAK,cAAsB,CAAtBL,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA;;;KAGhB,MAAM,YAAA;MACX,MAAA;MAED,IAAAK,cAAyB,CAAzBL,WAAyB,KAAA,QAAA,WAAA,CAAA,CAAA;;;;IAKvB,MAAM,WADdL,UAAA,GAAAC,mBAQM,OAAA;;KANA,SAAA;KAAJ,KAAI;KACJ,WAAQ;KACP,UAAUE,MAAA,eAAA;KACV,OAAKC,eAAE,GAAA,MAAG,QAAO,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,OAAO,EAAA,CAAA,CAAA;IAElDE,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;IAGF,MAAM,UADdL,UAAA,GAAAC,mBAMM,OAAA;;KAJJ,WAAQ;KACP,OAAKG,eAAE,GAAA,MAAG,OAAM,EAAA,OAAUD,MAAA,EAAA,CAAE,CAAC,QAAA,YAAY,MAAM,EAAA,CAAA,CAAA;IAEhDE,GAAAA,CAAAA,WAAsB,KAAA,QAAA,QAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/cards/RuiCardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst cardHeader = tv({\n  slots: {\n    root: 'flex',\n    prepend: 'rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden',\n    // one title style whether or not there is a prepend: a card title is a section heading, not a page title\n    header: 'text-base font-semibold text-rui-text',\n  },\n  variants: {\n    dense: {\n      true: {\n        root: 'p-3 between:ml-2 between:mr-0',\n        prepend: 'text-base p-[0.08rem] w-9 h-9',\n      },\n      false: {\n        root: 'p-4 between:ml-4 between:mr-0',\n        prepend: 'text-[1.25rem] w-10 h-10',\n      },\n    },\n  },\n  defaultVariants: { dense: false },\n});\n\nconst ui = computed<ReturnType<typeof cardHeader>>(() => cardHeader({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCardHeader.js","names":["_sfc_main"],"sources":["../../../src/components/cards/RuiCardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue';\nimport { cardHeaderStyles } from './card-header-styles';\n\nexport interface Props {\n  dense?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCardHeader',\n  inheritAttrs: false,\n});\n\nconst { dense = false } = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  header?: () => any;\n  subheader?: () => any;\n}>();\n\nconst ui = computed<ReturnType<typeof cardHeaderStyles>>(() => cardHeaderStyles({ dense }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"slots.prepend\"\n      data-id=\"prepend\"\n      :class=\"ui.prepend()\"\n    >\n      <slot name=\"prepend\" />\n    </div>\n    <div class=\"flex flex-col justify-center\">\n      <h5\n        v-if=\"slots.header\"\n        data-id=\"header\"\n        :class=\"ui.header()\"\n      >\n        <slot name=\"header\" />\n      </h5>\n      <p\n        v-if=\"slots.subheader\"\n        data-id=\"subheader\"\n        class=\"text-rui-text-secondary text-body-2 mb-0\"\n      >\n        <slot name=\"subheader\" />\n      </p>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/cards/RuiCardHeader.vue.d.ts

@@ -1,12 +1,14 @@
+import type { HTMLAttributes } from 'vue';
 export interface Props {
     dense?: boolean;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     prepend?: () => any;
     header?: () => any;
     subheader?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/cards/RuiCardHeader.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../utils/tv.js";
+import { cardHeaderStyles } from "./card-header-styles.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, unref, useSlots } from "vue";
 //#region src/components/cards/RuiCardHeader.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "flex flex-col justify-center" };
@@ -17,25 +17,7 @@ var RuiCardHeader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 	} },
 	setup(__props) {
 		const slots = useSlots();
-		const cardHeader = tv({
-			slots: {
-				root: "flex",
-				prepend: "rounded-full flex items-center justify-center bg-rui-neutral-200 text-rui-neutral-700 dark:bg-rui-neutral-700 dark:text-rui-neutral-200 overflow-hidden",
-				header: "text-base font-semibold text-rui-text"
-			},
-			variants: { dense: {
-				true: {
-					root: "p-3 between:ml-2 between:mr-0",
-					prepend: "text-base p-[0.08rem] w-9 h-9"
-				},
-				false: {
-					root: "p-4 between:ml-4 between:mr-0",
-					prepend: "text-[1.25rem] w-10 h-10"
-				}
-			} },
-			defaultVariants: { dense: false }
-		});
-		const ui = computed(() => cardHeader({ dense: __props.dense }));
+		const ui = computed(() => cardHeaderStyles({ dense: __props.dense }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ class: unref(ui).root() }, _ctx.$attrs), [slots.prepend ? (openBlock(), createElementBlock("div", {
 				key: 0,