@auronui/vue 1.0.14 → 1.0.16

package/dist/components/progress-circle/ProgressCircle.vue_vue_type_script_setup_true_lang.js

@@ -34,7 +34,14 @@ var ProgressCircle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -62,24 +69,24 @@ var ProgressCircle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			return openBlock(), createBlock(unref(ProgressRoot), {
 				"model-value": isInd.value ? null : __props.value,
 				max: __props.maxValue,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"aria-label": __props.label || "Progress",
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, {
 				default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-					class: normalizeClass(slotFns.value.svg()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.svg(), props.classNames?.svg)),
 					viewBox: "0 0 32 32",
 					fill: "none",
 					"aria-hidden": "true"
 				}, [createElementVNode("circle", {
-					class: normalizeClass(slotFns.value.track()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
 					"stroke-width": __props.strokeWidth,
 					fill: "none"
 				}, null, 10, _hoisted_1), createElementVNode("circle", {
-					class: normalizeClass(slotFns.value.indicator()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					cx: "16",
 					cy: "16",
 					r: radius.value,
@@ -92,7 +99,7 @@ var ProgressCircle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					style: { "transition": "stroke-dashoffset 300ms ease-out" }
 				}, null, 10, _hoisted_2)], 2)), __props.showValueLabel || __props.label ? (openBlock(), createElementBlock("span", {
 					key: 0,
-					class: normalizeClass(slotFns.value.value())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.value(), props.classNames?.value))
 				}, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(formattedValue.value), 1)])], 2)) : createCommentVNode("", true)]),
 				_: 3
 			}, 8, [

package/dist/components/progress-circle/ProgressCircle.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress-circle/ProgressCircle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot } from 'reka-ui'\nimport { progressCircleVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number | null\n  minValue?: number\n  maxValue?: number\n  label?: string\n  valueLabel?: string\n  showValueLabel?: boolean\n  formatOptions?: Intl.NumberFormatOptions\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  strokeWidth?: number\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  strokeWidth: 3,\n  isIndeterminate: false,\n  isDisabled: false,\n})\n\nconst isInd = computed(\n  () => props.isIndeterminate || props.value === null || props.value === undefined\n)\n\nconst percentage = computed(() => {\n  if (isInd.value) return 0\n  const val = props.value as number\n  return ((val - props.minValue) / (props.maxValue - props.minValue)) * 100\n})\n\n// SVG geometry\nconst radius = computed(() => 16 - props.strokeWidth)\nconst circumference = computed(() => 2 * Math.PI * radius.value)\nconst offset = computed(() =>\n  isInd.value ? circumference.value * 0.25 : circumference.value * (1 - percentage.value / 100)\n)\n\nconst slotFns = computed(() =>\n  progressCircleVariants({\n    size: props.size,\n    color: props.color,\n    isIndeterminate: isInd.value,\n    isDisabled: props.isDisabled,\n  })\n)\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.value === null || props.value === undefined) return ''\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return String(Math.round(props.value as number))\n})\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"isInd ? null : (value as number)\"\n    :max=\"maxValue\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :aria-label=\"label || 'Progress'\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <svg\n      :class=\"slotFns.svg()\"\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <!-- Track circle -->\n      <circle\n        :class=\"slotFns.track()\"\n        cx=\"16\"\n        cy=\"16\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        fill=\"none\"\n      />\n      <!-- Indicator (progress) circle -->\n      <circle\n        :class=\"slotFns.indicator()\"\n        cx=\"16\"\n        cy=\"16\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        :stroke-dasharray=\"circumference\"\n        :stroke-dashoffset=\"offset\"\n        transform=\"rotate(-90 16 16)\"\n        style=\"transition: stroke-dashoffset 300ms ease-out\"\n      />\n    </svg>\n    <span\n      v-if=\"showValueLabel || label\"\n      :class=\"slotFns.value()\"\n    >\n      <slot>{{ formattedValue }}</slot>\n    </span>\n  </ProgressRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAuBd,MAAM,QAAQ,eACN,MAAM,mBAAmB,MAAM,UAAU,QAAQ,MAAM,UAAU,KAAA,EACzE;EAEA,MAAM,aAAa,eAAe;AAChC,OAAI,MAAM,MAAO,QAAO;AAExB,WADY,MAAM,QACH,MAAM,aAAa,MAAM,WAAW,MAAM,YAAa;IACvE;EAGD,MAAM,SAAS,eAAe,KAAK,MAAM,YAAW;EACpD,MAAM,gBAAgB,eAAe,IAAI,KAAK,KAAK,OAAO,MAAK;EAC/D,MAAM,SAAS,eACb,MAAM,QAAQ,cAAc,QAAQ,MAAO,cAAc,SAAS,IAAI,WAAW,QAAQ,KAC3F;EAEA,MAAM,UAAU,eACd,uBAAuB;GACrB,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,iBAAiB,MAAM;GACvB,YAAY,MAAM;GACnB,CAAA,CACH;EAEA,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,WAAY,QAAO,MAAM;AACnC,OAAI,MAAM,UAAU,QAAQ,MAAM,UAAU,KAAA,EAAW,QAAO;AAC9D,OAAI,MAAM,cACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW,MAAM,cAAc,CAAC,OAAO,MAAM,MAAK;AAEjF,UAAO,OAAO,KAAK,MAAM,MAAM,MAAgB,CAAA;IAChD;;uBAIC,YA2Ce,MAAA,aAAA,EAAA;IA1CZ,eAAa,MAAA,QAAK,OAAW,QAAA;IAC7B,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,cAAY,QAAA,SAAK;IACjB,iBAAe,QAAA,aAAU,KAAQ,KAAA;;2BA+B5B,EAAA,WAAA,EA7BN,mBA6BM,OAAA;KA5BH,OAAK,eAAE,QAAA,MAAQ,KAAG,CAAA;KACnB,SAAQ;KACR,MAAK;KACL,eAAY;QAGZ,mBAOE,UAAA;KANC,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;KACrB,IAAG;KACH,IAAG;KACF,GAAG,OAAA;KACH,gBAAc,QAAA;KACf,MAAK;8BAGP,mBAYE,UAAA;KAXC,OAAK,eAAE,QAAA,MAAQ,WAAS,CAAA;KACzB,IAAG;KACH,IAAG;KACF,GAAG,OAAA;KACH,gBAAc,QAAA;KACf,MAAK;KACL,kBAAe;KACd,oBAAkB,cAAA;KAClB,qBAAmB,OAAA;KACpB,WAAU;KACV,OAAA,EAAA,cAAA,oCAAoD;oCAIhD,QAAA,kBAAkB,QAAA,SAAA,WAAA,EAD1B,mBAKO,QAAA;;KAHJ,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;QAErB,WAAiC,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBAAxB,eAAA,MAAc,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}
+{"version":3,"file":"ProgressCircle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress-circle/ProgressCircle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot } from 'reka-ui'\nimport { progressCircleVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number | null\n  minValue?: number\n  maxValue?: number\n  label?: string\n  valueLabel?: string\n  showValueLabel?: boolean\n  formatOptions?: Intl.NumberFormatOptions\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  strokeWidth?: number\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: ClassValue\n  /** Override classNames for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    svg: ClassValue\n    track: ClassValue\n    indicator: ClassValue\n    value: ClassValue\n  }>\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  strokeWidth: 3,\n  isIndeterminate: false,\n  isDisabled: false,\n})\n\nconst isInd = computed(\n  () => props.isIndeterminate || props.value === null || props.value === undefined\n)\n\nconst percentage = computed(() => {\n  if (isInd.value) return 0\n  const val = props.value as number\n  return ((val - props.minValue) / (props.maxValue - props.minValue)) * 100\n})\n\n// SVG geometry\nconst radius = computed(() => 16 - props.strokeWidth)\nconst circumference = computed(() => 2 * Math.PI * radius.value)\nconst offset = computed(() =>\n  isInd.value ? circumference.value * 0.25 : circumference.value * (1 - percentage.value / 100)\n)\n\nconst slotFns = computed(() =>\n  progressCircleVariants({\n    size: props.size,\n    color: props.color,\n    isIndeterminate: isInd.value,\n    isDisabled: props.isDisabled,\n  })\n)\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.value === null || props.value === undefined) return ''\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return String(Math.round(props.value as number))\n})\n</script>\n\n<template>\n  <ProgressRoot\n    :model-value=\"isInd ? null : (value as number)\"\n    :max=\"maxValue\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :aria-label=\"label || 'Progress'\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <svg\n      :class=\"composeClassName(slotFns.svg(), props.classNames?.svg)\"\n      viewBox=\"0 0 32 32\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <!-- Track circle -->\n      <circle\n        :class=\"composeClassName(slotFns.track(), props.classNames?.track)\"\n        cx=\"16\"\n        cy=\"16\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        fill=\"none\"\n      />\n      <!-- Indicator (progress) circle -->\n      <circle\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n        cx=\"16\"\n        cy=\"16\"\n        :r=\"radius\"\n        :stroke-width=\"strokeWidth\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        :stroke-dasharray=\"circumference\"\n        :stroke-dashoffset=\"offset\"\n        transform=\"rotate(-90 16 16)\"\n        style=\"transition: stroke-dashoffset 300ms ease-out\"\n      />\n    </svg>\n    <span\n      v-if=\"showValueLabel || label\"\n      :class=\"composeClassName(slotFns.value(), props.classNames?.value)\"\n    >\n      <slot>{{ formattedValue }}</slot>\n    </span>\n  </ProgressRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EA+Bd,MAAM,QAAQ,eACN,MAAM,mBAAmB,MAAM,UAAU,QAAQ,MAAM,UAAU,KAAA,EACzE;EAEA,MAAM,aAAa,eAAe;AAChC,OAAI,MAAM,MAAO,QAAO;AAExB,WADY,MAAM,QACH,MAAM,aAAa,MAAM,WAAW,MAAM,YAAa;IACvE;EAGD,MAAM,SAAS,eAAe,KAAK,MAAM,YAAW;EACpD,MAAM,gBAAgB,eAAe,IAAI,KAAK,KAAK,OAAO,MAAK;EAC/D,MAAM,SAAS,eACb,MAAM,QAAQ,cAAc,QAAQ,MAAO,cAAc,SAAS,IAAI,WAAW,QAAQ,KAC3F;EAEA,MAAM,UAAU,eACd,uBAAuB;GACrB,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,iBAAiB,MAAM;GACvB,YAAY,MAAM;GACnB,CAAA,CACH;EAEA,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,WAAY,QAAO,MAAM;AACnC,OAAI,MAAM,UAAU,QAAQ,MAAM,UAAU,KAAA,EAAW,QAAO;AAC9D,OAAI,MAAM,cACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW,MAAM,cAAc,CAAC,OAAO,MAAM,MAAK;AAEjF,UAAO,OAAO,KAAK,MAAM,MAAM,MAAgB,CAAA;IAChD;;uBAIC,YA2Ce,MAAA,aAAA,EAAA;IA1CZ,eAAa,MAAA,QAAK,OAAW,QAAA;IAC7B,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,cAAY,QAAA,SAAK;IACjB,iBAAe,QAAA,aAAU,KAAQ,KAAA;;2BA+B5B,EAAA,WAAA,EA7BN,mBA6BM,OAAA;KA5BH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,KAAG,EAAI,MAAM,YAAY,IAAG,CAAA;KAC7D,SAAQ;KACR,MAAK;KACL,eAAY;QAGZ,mBAOE,UAAA;KANC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;KACjE,IAAG;KACH,IAAG;KACF,GAAG,OAAA;KACH,gBAAc,QAAA;KACf,MAAK;8BAGP,mBAYE,UAAA;KAXC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;KACzE,IAAG;KACH,IAAG;KACF,GAAG,OAAA;KACH,gBAAc,QAAA;KACf,MAAK;KACL,kBAAe;KACd,oBAAkB,cAAA;KAClB,qBAAmB,OAAA;KACpB,WAAU;KACV,OAAA,EAAA,cAAA,oCAAoD;oCAIhD,QAAA,kBAAkB,QAAA,SAAA,WAAA,EAD1B,mBAKO,QAAA;;KAHJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;QAEjE,WAAiC,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,gBAAA,gBAAxB,eAAA,MAAc,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA"}

package/dist/components/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'\nimport { radioVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useRadioGroupInject } from './radio-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to RadioGroupItem\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  value: string\n  variant?: RadioGroupVariants['variant']\n  disabled?: boolean\n  class?: string\n}>(), {\n  variant: undefined,\n  disabled: false,\n  class: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Inject RadioGroup context with fallback defaults (standalone mode)\nconst groupCtx = useRadioGroupInject({\n  variant: ref(undefined),\n  disabled: ref(false),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant (used for data-variant attribute propagation)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\nconst slotFns = computed(() => radioVariants())\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"attrs\"\n    :value=\"props.value\"\n    :disabled=\"isDisabled\"\n    :data-variant=\"finalVariant\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n  >\n    <span :class=\"slotFns.control()\">\n      <RadioGroupIndicator :class=\"slotFns.indicator()\" />\n    </span>\n    <span :class=\"slotFns.content()\">\n      <slot />\n    </span>\n  </RadioGroupItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../src/components/radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'\nimport { radioVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useRadioGroupInject } from './radio-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to RadioGroupItem\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  value: string\n  variant?: RadioGroupVariants['variant']\n  disabled?: boolean\n  class?: ClassValue\n  /** Override classNames for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  disabled: false,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Inject RadioGroup context with fallback defaults (standalone mode)\nconst groupCtx = useRadioGroupInject({\n  variant: ref(undefined),\n  disabled: ref(false),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant (used for data-variant attribute propagation)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\nconst slotFns = computed(() => radioVariants())\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"attrs\"\n    :value=\"props.value\"\n    :disabled=\"isDisabled\"\n    :data-variant=\"finalVariant\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <RadioGroupIndicator :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\" />\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </RadioGroupItem>\n</template>\n"],"mappings":""}

package/dist/components/radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -14,7 +14,17 @@ var Radio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -31,9 +41,9 @@ var Radio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				value: props.value,
 				disabled: isDisabled.value,
 				"data-variant": finalVariant.value,
-				class: unref(composeClassName)(slotFns.value.base(), props.class)
+				class: unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)
 			}), {
-				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(slotFns.value.control()) }, [createVNode(unref(RadioGroupIndicator), { class: normalizeClass(slotFns.value.indicator()) }, null, 8, ["class"])], 2), createElementVNode("span", { class: normalizeClass(slotFns.value.content()) }, [renderSlot(_ctx.$slots, "default")], 2)]),
+				default: withCtx(() => [createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.control(), props.classNames?.control)) }, [createVNode(unref(RadioGroupIndicator), { class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, null, 8, ["class"])], 2), createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				_: 3
 			}, 16, [
 				"value",

package/dist/components/radio/Radio.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'\nimport { radioVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useRadioGroupInject } from './radio-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to RadioGroupItem\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  value: string\n  variant?: RadioGroupVariants['variant']\n  disabled?: boolean\n  class?: string\n}>(), {\n  variant: undefined,\n  disabled: false,\n  class: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Inject RadioGroup context with fallback defaults (standalone mode)\nconst groupCtx = useRadioGroupInject({\n  variant: ref(undefined),\n  disabled: ref(false),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant (used for data-variant attribute propagation)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\nconst slotFns = computed(() => radioVariants())\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"attrs\"\n    :value=\"props.value\"\n    :disabled=\"isDisabled\"\n    :data-variant=\"finalVariant\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n  >\n    <span :class=\"slotFns.control()\">\n      <RadioGroupIndicator :class=\"slotFns.indicator()\" />\n    </span>\n    <span :class=\"slotFns.content()\">\n      <slot />\n    </span>\n  </RadioGroupItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAWd,MAAM,QAAQ,UAAS;EAGvB,MAAM,WAAW,oBAAoB;GACnC,SAAS,IAAI,KAAA,EAAU;GACvB,UAAU,IAAI,MAAM;GACrB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAG3E,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAE3E,MAAM,UAAU,eAAe,eAAe,CAAA;;uBAI5C,YAaiB,MAAA,eAAA,EAbjB,WACU,MAYO,MAZF,EAAA;IACZ,OAAO,MAAM;IACb,UAAU,WAAA;IACV,gBAAc,aAAA;IACd,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK;;2BAI7C,CAFP,mBAEO,QAAA,EAFA,OAAK,eAAE,QAAA,MAAQ,SAAO,CAAA,EAAA,EAAA,CAC3B,YAAoD,MAAA,oBAAA,EAAA,EAA9B,OAAK,eAAE,QAAA,MAAQ,WAAS,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,EAAA,EAEhD,mBAEO,QAAA,EAFA,OAAK,eAAE,QAAA,MAAQ,SAAO,CAAA,EAAA,EAAA,CAC3B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"Radio.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/radio/Radio.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, useAttrs } from 'vue'\nimport { RadioGroupItem, RadioGroupIndicator } from 'reka-ui'\nimport { radioVariants, type RadioGroupVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useRadioGroupInject } from './radio-group.context'\n\n// Disable Vue attribute fallthrough — we manually forward $attrs to RadioGroupItem\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  value: string\n  variant?: RadioGroupVariants['variant']\n  disabled?: boolean\n  class?: ClassValue\n  /** Override classNames for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    control: ClassValue\n    indicator: ClassValue\n    content: ClassValue\n  }>\n}>(), {\n  variant: undefined,\n  disabled: false,\n  class: undefined,\n  classNames: undefined,\n})\n\nconst attrs = useAttrs()\n\n// Inject RadioGroup context with fallback defaults (standalone mode)\nconst groupCtx = useRadioGroupInject({\n  variant: ref(undefined),\n  disabled: ref(false),\n})\n\n// Prop precedence: group disabled wins (D-02)\nconst isDisabled = computed(() => groupCtx.disabled.value || props.disabled)\n\n// Child variant wins over group variant (used for data-variant attribute propagation)\nconst finalVariant = computed(() => props.variant ?? groupCtx.variant.value)\n\nconst slotFns = computed(() => radioVariants())\n</script>\n\n<template>\n  <RadioGroupItem\n    v-bind=\"attrs\"\n    :value=\"props.value\"\n    :disabled=\"isDisabled\"\n    :data-variant=\"finalVariant\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <span :class=\"composeClassName(slotFns.control(), props.classNames?.control)\">\n      <RadioGroupIndicator :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\" />\n    </span>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </RadioGroupItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAUA,MAAM,QAAQ;EAmBd,MAAM,QAAQ,UAAS;EAGvB,MAAM,WAAW,oBAAoB;GACnC,SAAS,IAAI,KAAA,EAAU;GACvB,UAAU,IAAI,MAAM;GACrB,CAAA;EAGD,MAAM,aAAa,eAAe,SAAS,SAAS,SAAS,MAAM,SAAQ;EAG3E,MAAM,eAAe,eAAe,MAAM,WAAW,SAAS,QAAQ,MAAK;EAE3E,MAAM,UAAU,eAAe,eAAe,CAAA;;uBAI5C,YAaiB,MAAA,eAAA,EAbjB,WACU,MAYO,MAZF,EAAA;IACZ,OAAO,MAAM;IACb,UAAU,WAAA;IACV,gBAAc,aAAA;IACd,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI;;2BAIrE,CAFP,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,YAAmG,MAAA,oBAAA,EAAA,EAA7E,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,EAAA,EAEhG,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA,EAAA,EAAA,CACzE,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/range-calendar/RangeCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeCalendar.js","names":[],"sources":["../../../src/components/range-calendar/RangeCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, shallowRef } from 'vue'\nimport {\n  RangeCalendarRoot,\n  RangeCalendarHeader,\n  RangeCalendarHeading,\n  RangeCalendarGrid,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n  RangeCalendarGridBody,\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarNext,\n  RangeCalendarPrev,\n  MonthPickerRoot,\n  MonthPickerHeader,\n  MonthPickerHeading,\n  MonthPickerPrev,\n  MonthPickerNext,\n  MonthPickerGrid,\n  MonthPickerGridBody,\n  MonthPickerGridRow,\n  MonthPickerCell,\n  MonthPickerCellTrigger,\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport { today, getLocalTimeZone, type DateValue } from '@internationalized/date'\nimport { rangeCalendarVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateRange | null\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateDisabled?: (date: DateValue) => boolean\n  isDateUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  fixedWeeks?: boolean\n  numberOfMonths?: number\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  pagedNavigation?: boolean\n  preventDeselect?: boolean\n  allowNonContiguousRanges?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  class?: string\n}>(), {\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  pagedNavigation: false,\n  preventDeselect: false,\n  allowNonContiguousRanges: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateRange | null>()\n\nconst slotFns = computed(() => rangeCalendarVariants())\n\n// View-switcher state: 'date' (default 7-col calendar), 'month' (3x4 months), 'year' (3x4 years)\ntype View = 'date' | 'month' | 'year'\nconst view = ref<View>('date')\n\n// Shared placeholder synced with RangeCalendarRoot/MonthPickerRoot/YearPickerRoot.\n// shallowRef preserves reka-ui's `DateValue` discriminated union.\nconst placeholder = shallowRef<DateValue>(\n  (props.defaultValue?.start ?? props.defaultPlaceholder ?? today(getLocalTimeZone())) as DateValue\n)\n\nfunction cycleView(): void {\n  view.value = view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n}\n\nfunction onMonthSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'date'\n}\n\nfunction onYearSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'month'\n}\n\nconst nextViewLabel = computed(() =>\n  view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholder\"\n    :default-value=\"defaultValue ?? undefined\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-disabled=\"isDateDisabled\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :locale=\"locale\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :week-starts-on=\"weekStartsOn\"\n    :paged-navigation=\"pagedNavigation\"\n    :prevent-deselect=\"preventDeselect\"\n    :allow-non-contiguous-ranges=\"allowNonContiguousRanges\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n  >\n    <template #default=\"{ grid, weekDays }\">\n      <template v-if=\"view === 'date'\">\n        <RangeCalendarHeader :class=\"slotFns.header()\">\n          <RangeCalendarPrev\n            :class=\"slotFns.navButton()\"\n            aria-label=\"Previous month\"\n          >\n            <svg\n              :class=\"slotFns.navButtonIcon()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </RangeCalendarPrev>\n\n          <RangeCalendarHeading\n            v-slot=\"{ headingValue }\"\n            :class=\"slotFns.heading()\"\n          >\n            <button\n              type=\"button\"\n              :class=\"slotFns.headingButton()\"\n              :aria-label=\"`Switch to ${nextViewLabel} view`\"\n              @click=\"cycleView\"\n            >\n              {{ headingValue }}\n            </button>\n          </RangeCalendarHeading>\n\n          <RangeCalendarNext\n            :class=\"slotFns.navButton()\"\n            aria-label=\"Next month\"\n          >\n            <svg\n              :class=\"slotFns.navButtonIcon()\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </RangeCalendarNext>\n        </RangeCalendarHeader>\n\n        <RangeCalendarGrid\n          v-for=\"month in grid\"\n          :key=\"month.value.toString()\"\n          :class=\"slotFns.grid()\"\n        >\n          <RangeCalendarGridHead :class=\"slotFns.gridHeader()\">\n            <RangeCalendarGridRow :class=\"slotFns.gridRow()\">\n              <RangeCalendarHeadCell\n                v-for=\"day in weekDays\"\n                :key=\"day\"\n                :class=\"slotFns.headerCell()\"\n              >\n                {{ day }}\n              </RangeCalendarHeadCell>\n            </RangeCalendarGridRow>\n          </RangeCalendarGridHead>\n          <RangeCalendarGridBody :class=\"slotFns.gridBody()\">\n            <RangeCalendarGridRow\n              v-for=\"(week, weekIndex) in month.rows\"\n              :key=\"weekIndex\"\n              :class=\"slotFns.gridRow()\"\n            >\n              <RangeCalendarCell\n                v-for=\"day in week\"\n                :key=\"day.toString()\"\n                :date=\"day\"\n                :class=\"slotFns.cell()\"\n              >\n                <RangeCalendarCellTrigger\n                  :day=\"day\"\n                  :month=\"month.value\"\n                  :class=\"slotFns.cellButton()\"\n                />\n              </RangeCalendarCell>\n            </RangeCalendarGridRow>\n          </RangeCalendarGridBody>\n        </RangeCalendarGrid>\n      </template>\n    </template>\n  </RangeCalendarRoot>\n\n  <MonthPickerRoot\n    v-if=\"view === 'month'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @update:model-value=\"onMonthSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: monthGrid }\">\n      <MonthPickerHeader :class=\"slotFns.header()\">\n        <MonthPickerPrev\n          :class=\"slotFns.navButton()\"\n          aria-label=\"Previous year\"\n        >\n          <svg\n            :class=\"slotFns.navButtonIcon()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </MonthPickerPrev>\n\n        <MonthPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"slotFns.heading()\"\n        >\n          <button\n            type=\"button\"\n            :class=\"slotFns.headingButton()\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </MonthPickerHeading>\n\n        <MonthPickerNext\n          :class=\"slotFns.navButton()\"\n          aria-label=\"Next year\"\n        >\n          <svg\n            :class=\"slotFns.navButtonIcon()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </MonthPickerNext>\n      </MonthPickerHeader>\n\n      <MonthPickerGrid :class=\"slotFns.monthGrid()\">\n        <MonthPickerGridBody :class=\"slotFns.monthGridBody()\">\n          <MonthPickerGridRow\n            v-for=\"(row, i) in monthGrid.rows\"\n            :key=\"i\"\n            :class=\"slotFns.monthGridRow()\"\n          >\n            <MonthPickerCell\n              v-for=\"monthValue in row\"\n              :key=\"monthValue.toString()\"\n              :date=\"monthValue\"\n            >\n              <MonthPickerCellTrigger\n                :month=\"monthValue\"\n                as=\"button\"\n                :class=\"slotFns.monthCell()\"\n              />\n            </MonthPickerCell>\n          </MonthPickerGridRow>\n        </MonthPickerGridBody>\n      </MonthPickerGrid>\n    </template>\n  </MonthPickerRoot>\n\n  <YearPickerRoot\n    v-if=\"view === 'year'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @update:model-value=\"onYearSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: yearGrid }\">\n      <YearPickerHeader :class=\"slotFns.header()\">\n        <YearPickerPrev\n          :class=\"slotFns.navButton()\"\n          aria-label=\"Previous decade\"\n        >\n          <svg\n            :class=\"slotFns.navButtonIcon()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"slotFns.heading()\"\n        >\n          <button\n            type=\"button\"\n            :class=\"slotFns.headingButton()\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"slotFns.navButton()\"\n          aria-label=\"Next decade\"\n        >\n          <svg\n            :class=\"slotFns.navButtonIcon()\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"slotFns.yearGrid()\">\n        <YearPickerGridBody :class=\"slotFns.yearGridBody()\">\n          <YearPickerGridRow\n            v-for=\"(row, i) in yearGrid.rows\"\n            :key=\"i\"\n            :class=\"slotFns.yearGridRow()\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"slotFns.yearCell()\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RangeCalendar.js","names":[],"sources":["../../../src/components/range-calendar/RangeCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, shallowRef } from 'vue'\nimport {\n  RangeCalendarRoot,\n  RangeCalendarHeader,\n  RangeCalendarHeading,\n  RangeCalendarGrid,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n  RangeCalendarGridBody,\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarNext,\n  RangeCalendarPrev,\n  MonthPickerRoot,\n  MonthPickerHeader,\n  MonthPickerHeading,\n  MonthPickerPrev,\n  MonthPickerNext,\n  MonthPickerGrid,\n  MonthPickerGridBody,\n  MonthPickerGridRow,\n  MonthPickerCell,\n  MonthPickerCellTrigger,\n  YearPickerRoot,\n  YearPickerHeader,\n  YearPickerHeading,\n  YearPickerPrev,\n  YearPickerNext,\n  YearPickerGrid,\n  YearPickerGridBody,\n  YearPickerGridRow,\n  YearPickerCell,\n  YearPickerCellTrigger,\n} from 'reka-ui'\nimport { today, getLocalTimeZone, type DateValue } from '@internationalized/date'\nimport { rangeCalendarVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateRange | null\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isDateDisabled?: (date: DateValue) => boolean\n  isDateUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  weekdayFormat?: 'narrow' | 'short' | 'long'\n  fixedWeeks?: boolean\n  numberOfMonths?: number\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  pagedNavigation?: boolean\n  preventDeselect?: boolean\n  allowNonContiguousRanges?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  class?: ClassValue\n  /** Override classes for named slots */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    headingButton: ClassValue\n    grid: ClassValue\n    gridHeader: ClassValue\n    gridRow: ClassValue\n    headerCell: ClassValue\n    gridBody: ClassValue\n    cell: ClassValue\n    cellButton: ClassValue\n    monthGrid: ClassValue\n    monthGridBody: ClassValue\n    monthGridRow: ClassValue\n    monthCell: ClassValue\n    yearGrid: ClassValue\n    yearGridBody: ClassValue\n    yearGridRow: ClassValue\n    yearCell: ClassValue\n  }>\n}>(), {\n  weekdayFormat: 'narrow',\n  fixedWeeks: false,\n  numberOfMonths: 1,\n  pagedNavigation: false,\n  preventDeselect: false,\n  allowNonContiguousRanges: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst modelValue = defineModel<DateRange | null>()\n\nconst slotFns = computed(() => rangeCalendarVariants())\n\n// View-switcher state: 'date' (default 7-col calendar), 'month' (3x4 months), 'year' (3x4 years)\ntype View = 'date' | 'month' | 'year'\nconst view = ref<View>('date')\n\n// Shared placeholder synced with RangeCalendarRoot/MonthPickerRoot/YearPickerRoot.\n// shallowRef preserves reka-ui's `DateValue` discriminated union.\nconst placeholder = shallowRef<DateValue>(\n  (props.defaultValue?.start ?? props.defaultPlaceholder ?? today(getLocalTimeZone())) as DateValue\n)\n\nfunction cycleView(): void {\n  view.value = view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n}\n\nfunction onMonthSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'date'\n}\n\nfunction onYearSelect(val: DateValue | DateValue[] | undefined): void {\n  if (!val) return\n  const next = Array.isArray(val) ? val[val.length - 1] : val\n  if (!next) return\n  placeholder.value = next\n  view.value = 'month'\n}\n\nconst nextViewLabel = computed(() =>\n  view.value === 'date' ? 'month' : view.value === 'month' ? 'year' : 'date'\n)\n</script>\n\n<template>\n  <RangeCalendarRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholder\"\n    :default-value=\"defaultValue ?? undefined\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-disabled=\"isDateDisabled\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :locale=\"locale\"\n    :weekday-format=\"weekdayFormat\"\n    :fixed-weeks=\"fixedWeeks\"\n    :number-of-months=\"numberOfMonths\"\n    :week-starts-on=\"weekStartsOn\"\n    :paged-navigation=\"pagedNavigation\"\n    :prevent-deselect=\"preventDeselect\"\n    :allow-non-contiguous-ranges=\"allowNonContiguousRanges\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n  >\n    <template #default=\"{ grid, weekDays }\">\n      <template v-if=\"view === 'date'\">\n        <RangeCalendarHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n          <RangeCalendarPrev\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Previous month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"15 18 9 12 15 6\" />\n            </svg>\n          </RangeCalendarPrev>\n\n          <RangeCalendarHeading\n            v-slot=\"{ headingValue }\"\n            :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n          >\n            <button\n              type=\"button\"\n              :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n              :aria-label=\"`Switch to ${nextViewLabel} view`\"\n              @click=\"cycleView\"\n            >\n              {{ headingValue }}\n            </button>\n          </RangeCalendarHeading>\n\n          <RangeCalendarNext\n            :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n            aria-label=\"Next month\"\n          >\n            <svg\n              :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"9 18 15 12 9 6\" />\n            </svg>\n          </RangeCalendarNext>\n        </RangeCalendarHeader>\n\n        <RangeCalendarGrid\n          v-for=\"month in grid\"\n          :key=\"month.value.toString()\"\n          :class=\"composeClassName(slotFns.grid(), props.classNames?.grid)\"\n        >\n          <RangeCalendarGridHead :class=\"composeClassName(slotFns.gridHeader(), props.classNames?.gridHeader)\">\n            <RangeCalendarGridRow :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\">\n              <RangeCalendarHeadCell\n                v-for=\"day in weekDays\"\n                :key=\"day\"\n                :class=\"composeClassName(slotFns.headerCell(), props.classNames?.headerCell)\"\n              >\n                {{ day }}\n              </RangeCalendarHeadCell>\n            </RangeCalendarGridRow>\n          </RangeCalendarGridHead>\n          <RangeCalendarGridBody :class=\"composeClassName(slotFns.gridBody(), props.classNames?.gridBody)\">\n            <RangeCalendarGridRow\n              v-for=\"(week, weekIndex) in month.rows\"\n              :key=\"weekIndex\"\n              :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\"\n            >\n              <RangeCalendarCell\n                v-for=\"day in week\"\n                :key=\"day.toString()\"\n                :date=\"day\"\n                :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n              >\n                <RangeCalendarCellTrigger\n                  :day=\"day\"\n                  :month=\"month.value\"\n                  :class=\"composeClassName(slotFns.cellButton(), props.classNames?.cellButton)\"\n                />\n              </RangeCalendarCell>\n            </RangeCalendarGridRow>\n          </RangeCalendarGridBody>\n        </RangeCalendarGrid>\n      </template>\n    </template>\n  </RangeCalendarRoot>\n\n  <MonthPickerRoot\n    v-if=\"view === 'month'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"onMonthSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: monthGrid }\">\n      <MonthPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <MonthPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </MonthPickerPrev>\n\n        <MonthPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <button\n            type=\"button\"\n            :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </MonthPickerHeading>\n\n        <MonthPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next year\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </MonthPickerNext>\n      </MonthPickerHeader>\n\n      <MonthPickerGrid :class=\"composeClassName(slotFns.monthGrid(), props.classNames?.monthGrid)\">\n        <MonthPickerGridBody :class=\"composeClassName(slotFns.monthGridBody(), props.classNames?.monthGridBody)\">\n          <MonthPickerGridRow\n            v-for=\"(row, i) in monthGrid.rows\"\n            :key=\"i\"\n            :class=\"composeClassName(slotFns.monthGridRow(), props.classNames?.monthGridRow)\"\n          >\n            <MonthPickerCell\n              v-for=\"monthValue in row\"\n              :key=\"monthValue.toString()\"\n              :date=\"monthValue\"\n            >\n              <MonthPickerCellTrigger\n                :month=\"monthValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.monthCell(), props.classNames?.monthCell)\"\n              />\n            </MonthPickerCell>\n          </MonthPickerGridRow>\n        </MonthPickerGridBody>\n      </MonthPickerGrid>\n    </template>\n  </MonthPickerRoot>\n\n  <YearPickerRoot\n    v-if=\"view === 'year'\"\n    :placeholder=\"placeholder\"\n    :locale=\"locale\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"onYearSelect\"\n    @update:placeholder=\"(val: DateValue | undefined) => { if (val) placeholder = val }\"\n  >\n    <template #default=\"{ grid: yearGrid }\">\n      <YearPickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearPickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous decade\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearPickerPrev>\n\n        <YearPickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <button\n            type=\"button\"\n            :class=\"composeClassName(slotFns.headingButton(), props.classNames?.headingButton)\"\n            :aria-label=\"`Switch to ${nextViewLabel} view`\"\n            @click=\"cycleView\"\n          >\n            {{ headingValue }}\n          </button>\n        </YearPickerHeading>\n\n        <YearPickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next decade\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearPickerNext>\n      </YearPickerHeader>\n\n      <YearPickerGrid :class=\"composeClassName(slotFns.yearGrid(), props.classNames?.yearGrid)\">\n        <YearPickerGridBody :class=\"composeClassName(slotFns.yearGridBody(), props.classNames?.yearGridBody)\">\n          <YearPickerGridRow\n            v-for=\"(row, i) in yearGrid.rows\"\n            :key=\"i\"\n            :class=\"composeClassName(slotFns.yearGridRow(), props.classNames?.yearGridRow)\"\n          >\n            <YearPickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearPickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.yearCell(), props.classNames?.yearCell)\"\n              />\n            </YearPickerCell>\n          </YearPickerGridRow>\n        </YearPickerGridBody>\n      </YearPickerGrid>\n    </template>\n  </YearPickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/range-calendar/RangeCalendar.vue_vue_type_script_setup_true_lang.js

@@ -45,7 +45,14 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			default: false
 		},
 		calendarLabel: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -99,16 +106,16 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					readonly: __props.readonly,
 					disabled: __props.disabled,
 					"calendar-label": __props.calendarLabel,
-					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class))
+					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base))
 				}, {
-					default: withCtx(({ grid, weekDays }) => [view.value === "date" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(RangeCalendarHeader), { class: normalizeClass(slotFns.value.header()) }, {
+					default: withCtx(({ grid, weekDays }) => [view.value === "date" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(RangeCalendarHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: withCtx(() => [
 							createVNode(unref(RangeCalendarPrev), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous month"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -122,21 +129,21 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								}, [..._cache[4] || (_cache[4] = [createElementVNode("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							createVNode(unref(RangeCalendarHeading), { class: normalizeClass(slotFns.value.heading()) }, {
+							createVNode(unref(RangeCalendarHeading), { class: normalizeClass(unref(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: withCtx(({ headingValue }) => [createElementVNode("button", {
 									type: "button",
-									class: normalizeClass(slotFns.value.headingButton()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, toDisplayString(headingValue), 11, _hoisted_1)]),
 								_: 1
 							}, 8, ["class"]),
 							createVNode(unref(RangeCalendarNext), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next month"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -155,14 +162,14 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					}, 8, ["class"]), (openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
 						return openBlock(), createBlock(unref(RangeCalendarGrid), {
 							key: month.value.toString(),
-							class: normalizeClass(slotFns.value.grid())
+							class: normalizeClass(unref(composeClassName)(slotFns.value.grid(), props.classNames?.grid))
 						}, {
-							default: withCtx(() => [createVNode(unref(RangeCalendarGridHead), { class: normalizeClass(slotFns.value.gridHeader()) }, {
-								default: withCtx(() => [createVNode(unref(RangeCalendarGridRow), { class: normalizeClass(slotFns.value.gridRow()) }, {
+							default: withCtx(() => [createVNode(unref(RangeCalendarGridHead), { class: normalizeClass(unref(composeClassName)(slotFns.value.gridHeader(), props.classNames?.gridHeader)) }, {
+								default: withCtx(() => [createVNode(unref(RangeCalendarGridRow), { class: normalizeClass(unref(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow)) }, {
 									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day) => {
 										return openBlock(), createBlock(unref(RangeCalendarHeadCell), {
 											key: day,
-											class: normalizeClass(slotFns.value.headerCell())
+											class: normalizeClass(unref(composeClassName)(slotFns.value.headerCell(), props.classNames?.headerCell))
 										}, {
 											default: withCtx(() => [createTextVNode(toDisplayString(day), 1)]),
 											_: 2
@@ -171,22 +178,22 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 									_: 2
 								}, 1032, ["class"])]),
 								_: 2
-							}, 1032, ["class"]), createVNode(unref(RangeCalendarGridBody), { class: normalizeClass(slotFns.value.gridBody()) }, {
+							}, 1032, ["class"]), createVNode(unref(RangeCalendarGridBody), { class: normalizeClass(unref(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
 								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
 									return openBlock(), createBlock(unref(RangeCalendarGridRow), {
 										key: weekIndex,
-										class: normalizeClass(slotFns.value.gridRow())
+										class: normalizeClass(unref(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
 									}, {
 										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
 											return openBlock(), createBlock(unref(RangeCalendarCell), {
 												key: day.toString(),
 												date: day,
-												class: normalizeClass(slotFns.value.cell())
+												class: normalizeClass(unref(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
 											}, {
 												default: withCtx(() => [createVNode(unref(RangeCalendarCellTrigger), {
 													day,
 													month: month.value,
-													class: normalizeClass(slotFns.value.cellButton())
+													class: normalizeClass(unref(composeClassName)(slotFns.value.cellButton(), props.classNames?.cellButton))
 												}, null, 8, [
 													"day",
 													"month",
@@ -234,20 +241,20 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onMonthSelect,
 					"onUpdate:placeholder": _cache[2] || (_cache[2] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: withCtx(({ grid: monthGrid }) => [createVNode(unref(MonthPickerHeader), { class: normalizeClass(slotFns.value.header()) }, {
+					default: withCtx(({ grid: monthGrid }) => [createVNode(unref(MonthPickerHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: withCtx(() => [
 							createVNode(unref(MonthPickerPrev), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous year"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -261,21 +268,21 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								}, [..._cache[6] || (_cache[6] = [createElementVNode("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							createVNode(unref(MonthPickerHeading), { class: normalizeClass(slotFns.value.heading()) }, {
+							createVNode(unref(MonthPickerHeading), { class: normalizeClass(unref(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: withCtx(({ headingValue }) => [createElementVNode("button", {
 									type: "button",
-									class: normalizeClass(slotFns.value.headingButton()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, toDisplayString(headingValue), 11, _hoisted_2)]),
 								_: 1
 							}, 8, ["class"]),
 							createVNode(unref(MonthPickerNext), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next year"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -291,12 +298,12 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), createVNode(unref(MonthPickerGrid), { class: normalizeClass(slotFns.value.monthGrid()) }, {
-						default: withCtx(() => [createVNode(unref(MonthPickerGridBody), { class: normalizeClass(slotFns.value.monthGridBody()) }, {
+					}, 8, ["class"]), createVNode(unref(MonthPickerGrid), { class: normalizeClass(unref(composeClassName)(slotFns.value.monthGrid(), props.classNames?.monthGrid)) }, {
+						default: withCtx(() => [createVNode(unref(MonthPickerGridBody), { class: normalizeClass(unref(composeClassName)(slotFns.value.monthGridBody(), props.classNames?.monthGridBody)) }, {
 							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(monthGrid.rows, (row, i) => {
 								return openBlock(), createBlock(unref(MonthPickerGridRow), {
 									key: i,
-									class: normalizeClass(slotFns.value.monthGridRow())
+									class: normalizeClass(unref(composeClassName)(slotFns.value.monthGridRow(), props.classNames?.monthGridRow))
 								}, {
 									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (monthValue) => {
 										return openBlock(), createBlock(unref(MonthPickerCell), {
@@ -306,7 +313,7 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 											default: withCtx(() => [createVNode(unref(MonthPickerCellTrigger), {
 												month: monthValue,
 												as: "button",
-												class: normalizeClass(slotFns.value.monthCell())
+												class: normalizeClass(unref(composeClassName)(slotFns.value.monthCell(), props.classNames?.monthCell))
 											}, null, 8, ["month", "class"])]),
 											_: 2
 										}, 1032, ["date"]);
@@ -336,20 +343,20 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"max-value": __props.maxValue,
 					readonly: __props.readonly,
 					disabled: __props.disabled,
-					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 					"onUpdate:modelValue": onYearSelect,
 					"onUpdate:placeholder": _cache[3] || (_cache[3] = (val) => {
 						if (val) placeholder.value = val;
 					})
 				}, {
-					default: withCtx(({ grid: yearGrid }) => [createVNode(unref(YearPickerHeader), { class: normalizeClass(slotFns.value.header()) }, {
+					default: withCtx(({ grid: yearGrid }) => [createVNode(unref(YearPickerHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
 						default: withCtx(() => [
 							createVNode(unref(YearPickerPrev), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Previous decade"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -363,21 +370,21 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 								}, [..._cache[8] || (_cache[8] = [createElementVNode("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
 								_: 1
 							}, 8, ["class"]),
-							createVNode(unref(YearPickerHeading), { class: normalizeClass(slotFns.value.heading()) }, {
+							createVNode(unref(YearPickerHeading), { class: normalizeClass(unref(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
 								default: withCtx(({ headingValue }) => [createElementVNode("button", {
 									type: "button",
-									class: normalizeClass(slotFns.value.headingButton()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
 								}, toDisplayString(headingValue), 11, _hoisted_3)]),
 								_: 1
 							}, 8, ["class"]),
 							createVNode(unref(YearPickerNext), {
-								class: normalizeClass(slotFns.value.navButton()),
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 								"aria-label": "Next decade"
 							}, {
 								default: withCtx(() => [(openBlock(), createElementBlock("svg", {
-									class: normalizeClass(slotFns.value.navButtonIcon()),
+									class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
 									xmlns: "http://www.w3.org/2000/svg",
 									width: "16",
 									height: "16",
@@ -393,12 +400,12 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							}, 8, ["class"])
 						]),
 						_: 1
-					}, 8, ["class"]), createVNode(unref(YearPickerGrid), { class: normalizeClass(slotFns.value.yearGrid()) }, {
-						default: withCtx(() => [createVNode(unref(YearPickerGridBody), { class: normalizeClass(slotFns.value.yearGridBody()) }, {
+					}, 8, ["class"]), createVNode(unref(YearPickerGrid), { class: normalizeClass(unref(composeClassName)(slotFns.value.yearGrid(), props.classNames?.yearGrid)) }, {
+						default: withCtx(() => [createVNode(unref(YearPickerGridBody), { class: normalizeClass(unref(composeClassName)(slotFns.value.yearGridBody(), props.classNames?.yearGridBody)) }, {
 							default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(yearGrid.rows, (row, i) => {
 								return openBlock(), createBlock(unref(YearPickerGridRow), {
 									key: i,
-									class: normalizeClass(slotFns.value.yearGridRow())
+									class: normalizeClass(unref(composeClassName)(slotFns.value.yearGridRow(), props.classNames?.yearGridRow))
 								}, {
 									default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (yearValue) => {
 										return openBlock(), createBlock(unref(YearPickerCell), {
@@ -408,7 +415,7 @@ var RangeCalendar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 											default: withCtx(() => [createVNode(unref(YearPickerCellTrigger), {
 												year: yearValue,
 												as: "button",
-												class: normalizeClass(slotFns.value.yearCell())
+												class: normalizeClass(unref(composeClassName)(slotFns.value.yearCell(), props.classNames?.yearCell))
 											}, null, 8, ["year", "class"])]),
 											_: 2
 										}, 1032, ["date"]);