@auronui/vue 1.0.13 → 1.0.15

package/dist/components/meter/Meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.js","names":[],"sources":["../../../src/components/meter/Meter.vue"],"sourcesContent":["<!--\n  Meter — A quantity indicator within a known range.\n\n  Implementation note: Although HTML provides a native <meter> element, it is\n  notoriously difficult to style cross-browser and does NOT reliably expose the\n  ARIA `meter` role to all assistive technologies. This component therefore uses\n  a <div role=\"meter\"> with explicit aria-valuenow / aria-valuemin / aria-valuemax\n  attributes, matching React's approach (React Aria's useMeter → div-based).\n  This is fully compliant with the ARIA 1.1 specification.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { meterVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number\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' | 'accent' | 'success' | 'warning' | 'danger'\n  class?: string\n}>(), {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n})\n\nconst percentage = computed(() => {\n  const raw = ((props.value - props.minValue) / (props.maxValue - props.minValue)) * 100\n  return Math.min(100, Math.max(0, raw))\n})\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return `${Math.round(percentage.value)}%`\n})\n\nconst slotFns = computed(() =>\n  meterVariants({\n    size: props.size,\n    color: props.color,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class)\">\n    <span\n      v-if=\"label\"\n      data-slot=\"label\"\n    >{{ label }}</span>\n    <output\n      v-if=\"showValueLabel\"\n      :class=\"slotFns.output()\"\n    >{{ formattedValue }}</output>\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      :aria-valuetext=\"formattedValue\"\n      :aria-label=\"label || 'Meter'\"\n      :class=\"slotFns.track()\"\n    >\n      <div\n        :class=\"slotFns.fill()\"\n        :style=\"{ width: percentage + '%' }\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Meter.js","names":[],"sources":["../../../src/components/meter/Meter.vue"],"sourcesContent":["<!--\n  Meter — A quantity indicator within a known range.\n\n  Implementation note: Although HTML provides a native <meter> element, it is\n  notoriously difficult to style cross-browser and does NOT reliably expose the\n  ARIA `meter` role to all assistive technologies. This component therefore uses\n  a <div role=\"meter\"> with explicit aria-valuenow / aria-valuemin / aria-valuemax\n  attributes, matching React's approach (React Aria's useMeter → div-based).\n  This is fully compliant with the ARIA 1.1 specification.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { meterVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number\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' | 'accent' | 'success' | 'warning' | 'danger'\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    output: ClassValue\n    track: ClassValue\n    fill: ClassValue\n  }>\n}>(), {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n})\n\nconst percentage = computed(() => {\n  const raw = ((props.value - props.minValue) / (props.maxValue - props.minValue)) * 100\n  return Math.min(100, Math.max(0, raw))\n})\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return `${Math.round(percentage.value)}%`\n})\n\nconst slotFns = computed(() =>\n  meterVariants({\n    size: props.size,\n    color: props.color,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <span\n      v-if=\"label\"\n      data-slot=\"label\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}</span>\n    <output\n      v-if=\"showValueLabel\"\n      :class=\"composeClassName(slotFns.output(), props.classNames?.output)\"\n    >{{ formattedValue }}</output>\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      :aria-valuetext=\"formattedValue\"\n      :aria-label=\"label || 'Meter'\"\n      :class=\"composeClassName(slotFns.track(), props.classNames?.track)\"\n    >\n      <div\n        :class=\"composeClassName(slotFns.fill(), props.classNames?.fill)\"\n        :style=\"{ width: percentage + '%' }\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/meter/Meter.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,7 @@ import { composeClassName } from "../../utils/composeClassName.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, toDisplayString, unref } from "vue";
 import { meterVariants } from "@auronui/styles";
 //#region src/components/meter/Meter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 0,
-	"data-slot": "label"
-};
-var _hoisted_2 = [
+var _hoisted_1 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -28,7 +24,8 @@ var Meter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		formatOptions: {},
 		size: {},
 		color: {},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -46,11 +43,15 @@ var Meter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			color: props.color
 		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)) }, [
-				__props.label ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [
+				__props.label ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-slot": "label",
+					class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+				}, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
 				__props.showValueLabel ? (openBlock(), createElementBlock("output", {
 					key: 1,
-					class: normalizeClass(slotFns.value.output())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.output(), props.classNames?.output))
 				}, toDisplayString(formattedValue.value), 3)) : createCommentVNode("", true),
 				createElementVNode("div", {
 					role: "meter",
@@ -59,11 +60,11 @@ var Meter_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"aria-valuemax": __props.maxValue,
 					"aria-valuetext": formattedValue.value,
 					"aria-label": __props.label || "Meter",
-					class: normalizeClass(slotFns.value.track())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.track(), props.classNames?.track))
 				}, [createElementVNode("div", {
-					class: normalizeClass(slotFns.value.fill()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.fill(), props.classNames?.fill)),
 					style: normalizeStyle({ width: percentage.value + "%" })
-				}, null, 6)], 10, _hoisted_2)
+				}, null, 6)], 10, _hoisted_1)
 			], 2);
 		};
 	}

package/dist/components/meter/Meter.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/meter/Meter.vue"],"sourcesContent":["<!--\n  Meter — A quantity indicator within a known range.\n\n  Implementation note: Although HTML provides a native <meter> element, it is\n  notoriously difficult to style cross-browser and does NOT reliably expose the\n  ARIA `meter` role to all assistive technologies. This component therefore uses\n  a <div role=\"meter\"> with explicit aria-valuenow / aria-valuemin / aria-valuemax\n  attributes, matching React's approach (React Aria's useMeter → div-based).\n  This is fully compliant with the ARIA 1.1 specification.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { meterVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number\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' | 'accent' | 'success' | 'warning' | 'danger'\n  class?: string\n}>(), {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n})\n\nconst percentage = computed(() => {\n  const raw = ((props.value - props.minValue) / (props.maxValue - props.minValue)) * 100\n  return Math.min(100, Math.max(0, raw))\n})\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return `${Math.round(percentage.value)}%`\n})\n\nconst slotFns = computed(() =>\n  meterVariants({\n    size: props.size,\n    color: props.color,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class)\">\n    <span\n      v-if=\"label\"\n      data-slot=\"label\"\n    >{{ label }}</span>\n    <output\n      v-if=\"showValueLabel\"\n      :class=\"slotFns.output()\"\n    >{{ formattedValue }}</output>\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      :aria-valuetext=\"formattedValue\"\n      :aria-label=\"label || 'Meter'\"\n      :class=\"slotFns.track()\"\n    >\n      <div\n        :class=\"slotFns.fill()\"\n        :style=\"{ width: percentage + '%' }\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EAkBd,MAAM,aAAa,eAAe;GAChC,MAAM,OAAQ,MAAM,QAAQ,MAAM,aAAa,MAAM,WAAW,MAAM,YAAa;AACnF,UAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,CAAA;IACtC;EAED,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,WAAY,QAAO,MAAM;AACnC,OAAI,MAAM,cACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW,MAAM,cAAc,CAAC,OAAO,MAAM,MAAK;AAEjF,UAAO,GAAG,KAAK,MAAM,WAAW,MAAM,CAAC;IACxC;EAED,MAAM,UAAU,eACd,cAAc;GACZ,MAAM,MAAM;GACZ,OAAO,MAAM;GACd,CAAA,CACH;;uBAIE,mBAuBM,OAAA,EAvBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA,EAAA,EAAA;IAE/C,QAAA,SAAA,WAAA,EADR,mBAGmB,QAHnB,YAGmB,gBAAf,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAED,QAAA,kBAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,QAAA,MAAQ,QAAM,CAAA;uBACpB,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAClB,mBAaM,OAAA;KAZJ,MAAK;KACJ,iBAAe,QAAA;KACf,iBAAe,QAAA;KACf,iBAAe,QAAA;KACf,kBAAgB,eAAA;KAChB,cAAY,QAAA,SAAK;KACjB,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;QAErB,mBAGE,OAAA;KAFC,OAAK,eAAE,QAAA,MAAQ,MAAI,CAAA;KACnB,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA"}
+{"version":3,"file":"Meter.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/meter/Meter.vue"],"sourcesContent":["<!--\n  Meter — A quantity indicator within a known range.\n\n  Implementation note: Although HTML provides a native <meter> element, it is\n  notoriously difficult to style cross-browser and does NOT reliably expose the\n  ARIA `meter` role to all assistive technologies. This component therefore uses\n  a <div role=\"meter\"> with explicit aria-valuenow / aria-valuemin / aria-valuemax\n  attributes, matching React's approach (React Aria's useMeter → div-based).\n  This is fully compliant with the ARIA 1.1 specification.\n-->\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { meterVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  value?: number\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' | 'accent' | 'success' | 'warning' | 'danger'\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    output: ClassValue\n    track: ClassValue\n    fill: ClassValue\n  }>\n}>(), {\n  value: 0,\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n})\n\nconst percentage = computed(() => {\n  const raw = ((props.value - props.minValue) / (props.maxValue - props.minValue)) * 100\n  return Math.min(100, Math.max(0, raw))\n})\n\nconst formattedValue = computed(() => {\n  if (props.valueLabel) return props.valueLabel\n  if (props.formatOptions) {\n    return new Intl.NumberFormat(undefined, props.formatOptions).format(props.value)\n  }\n  return `${Math.round(percentage.value)}%`\n})\n\nconst slotFns = computed(() =>\n  meterVariants({\n    size: props.size,\n    color: props.color,\n  })\n)\n</script>\n\n<template>\n  <div :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <span\n      v-if=\"label\"\n      data-slot=\"label\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}</span>\n    <output\n      v-if=\"showValueLabel\"\n      :class=\"composeClassName(slotFns.output(), props.classNames?.output)\"\n    >{{ formattedValue }}</output>\n    <div\n      role=\"meter\"\n      :aria-valuenow=\"value\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      :aria-valuetext=\"formattedValue\"\n      :aria-label=\"label || 'Meter'\"\n      :class=\"composeClassName(slotFns.track(), props.classNames?.track)\"\n    >\n      <div\n        :class=\"composeClassName(slotFns.fill(), props.classNames?.fill)\"\n        :style=\"{ width: percentage + '%' }\"\n      />\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAeA,MAAM,QAAQ;EA0Bd,MAAM,aAAa,eAAe;GAChC,MAAM,OAAQ,MAAM,QAAQ,MAAM,aAAa,MAAM,WAAW,MAAM,YAAa;AACnF,UAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,IAAI,CAAA;IACtC;EAED,MAAM,iBAAiB,eAAe;AACpC,OAAI,MAAM,WAAY,QAAO,MAAM;AACnC,OAAI,MAAM,cACR,QAAO,IAAI,KAAK,aAAa,KAAA,GAAW,MAAM,cAAc,CAAC,OAAO,MAAM,MAAK;AAEjF,UAAO,GAAG,KAAK,MAAM,WAAW,MAAM,CAAC;IACxC;EAED,MAAM,UAAU,eACd,cAAc;GACZ,MAAM,MAAM;GACZ,OAAO,MAAM;GACd,CAAA,CACH;;uBAIE,mBAwBM,OAAA,EAxBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA;IAEvE,QAAA,SAAA,WAAA,EADR,mBAImB,QAAA;;KAFjB,aAAU;KACT,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uBAC/D,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAED,QAAA,kBAAA,WAAA,EADR,mBAG8B,UAAA;;KAD3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,QAAM,EAAI,MAAM,YAAY,OAAM,CAAA;uBACjE,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAClB,mBAaM,OAAA;KAZJ,MAAK;KACJ,iBAAe,QAAA;KACf,iBAAe,QAAA;KACf,iBAAe,QAAA;KACf,kBAAgB,eAAA;KAChB,cAAY,QAAA,SAAK;KACjB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;QAEjE,mBAGE,OAAA;KAFC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;KAC9D,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA"}

package/dist/components/number-field/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  class?: string\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"slotFns.group()\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :class=\"slotFns.decrementButton()\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"slotFns.input()\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :class=\"slotFns.incrementButton()\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  class?: ClassValue\n  /** Per-slot classNames override object for custom styling */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    decrementButton: ClassValue\n    input: ClassValue\n    incrementButton: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"composeClassName(slotFns.group(), props.classNames?.group)\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :class=\"composeClassName(slotFns.decrementButton(), props.classNames?.decrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :class=\"composeClassName(slotFns.incrementButton(), props.classNames?.incrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}

package/dist/components/number-field/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -36,7 +36,8 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		placeholder: {},
 		label: { default: void 0 },
 		ariaLabel: { default: void 0 },
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
@@ -71,7 +72,7 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"format-options": props.formatOptions,
 				locale: props.locale,
 				name: props.name,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-invalid": props.isInvalid || void 0,
 				"data-disabled": props.isDisabled || void 0,
 				"data-readonly": props.isReadonly || void 0
@@ -82,10 +83,10 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					class: normalizeClass(isLabelVisible.value ? void 0 : "sr-only"),
 					"data-slot": "label"
 				}, toDisplayString(props.label || props.ariaLabel), 11, _hoisted_1)) : createCommentVNode("", true), createElementVNode("div", {
-					class: normalizeClass(slotFns.value.group()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.group(), props.classNames?.group)),
 					"data-slot": "group"
 				}, [
-					createVNode(unref(NumberFieldDecrement), { class: normalizeClass(slotFns.value.decrementButton()) }, {
+					createVNode(unref(NumberFieldDecrement), { class: normalizeClass(unref(composeClassName)(slotFns.value.decrementButton(), props.classNames?.decrementButton)) }, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -102,10 +103,10 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 						_: 1
 					}, 8, ["class"]),
 					createVNode(unref(NumberFieldInput), {
-						class: normalizeClass(slotFns.value.input()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.input(), props.classNames?.input)),
 						placeholder: props.placeholder
 					}, null, 8, ["class", "placeholder"]),
-					createVNode(unref(NumberFieldIncrement), { class: normalizeClass(slotFns.value.incrementButton()) }, {
+					createVNode(unref(NumberFieldIncrement), { class: normalizeClass(unref(composeClassName)(slotFns.value.incrementButton(), props.classNames?.incrementButton)) }, {
 						default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",

package/dist/components/number-field/NumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  class?: string\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"slotFns.group()\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :class=\"slotFns.decrementButton()\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"slotFns.input()\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :class=\"slotFns.incrementButton()\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAqCd,MAAM,aAAa,SAA+B,SAAA,aAAC;EAEnD,MAAM,UAAU,eACd,oBAAoB;GAClB,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GACnB,CAAA,CACH;EAMA,MAAM,mBAAmB,OAAM;EAE/B,MAAM,kBAAkB,eAAe,MAAM,MAAM,iBAAgB;EAGnE,MAAM,WAAW,eAAe,CAAC,EAAE,MAAM,SAAS,MAAM,WAAU;EAElE,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,MAAK;;uBAIjD,YA8EkB,MAAA,gBAAA,EAAA;IA7Ef,IAAI,gBAAA;gBACI,WAAA;4EAAU,QAAA;IAClB,KAAK,MAAM;IACX,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,UAAU,MAAM,cAAc,KAAA;IAC9B,UAAU,MAAM,cAAc,KAAA;IAC9B,kBAAgB,MAAM;IACtB,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,gBAAc,MAAM,aAAa,KAAA;IACjC,iBAAe,MAAM,cAAc,KAAA;IACnC,iBAAe,MAAM,cAAc,KAAA;;2BAeS,CAJrC,SAAA,SAAA,WAAA,EADR,mBAK6C,SAAA;;KAH1C,KAAK,gBAAA;KACL,OAAK,eAAE,eAAA,QAAiB,KAAA,IAAS,UAAA;KAClC,aAAU;uBACR,MAAM,SAAS,MAAM,UAAS,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAGlC,mBA6CM,OAAA;KA5CH,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;KACrB,aAAU;;KAEV,YAgBuB,MAAA,qBAAA,EAAA,EAhBA,OAAK,eAAE,QAAA,MAAQ,iBAAe,CAAA,EAAA,EAAA;6BAe7C,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;OAbJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;;KAItB,YAGE,MAAA,iBAAA,EAAA;MAFC,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;MACpB,aAAa,MAAM;;KAGtB,YAiBuB,MAAA,qBAAA,EAAA,EAjBA,OAAK,eAAE,QAAA,MAAQ,iBAAe,CAAA,EAAA,EAAA;6BAgB7C,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAfN,mBAeM,OAAA;OAdJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,EAClB,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  class?: ClassValue\n  /** Per-slot classNames override object for custom styling */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    decrementButton: ClassValue\n    input: ClassValue\n    incrementButton: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"composeClassName(slotFns.group(), props.classNames?.group)\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :class=\"composeClassName(slotFns.decrementButton(), props.classNames?.decrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :class=\"composeClassName(slotFns.incrementButton(), props.classNames?.incrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EA6Cd,MAAM,aAAa,SAA+B,SAAA,aAAC;EAEnD,MAAM,UAAU,eACd,oBAAoB;GAClB,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GACnB,CAAA,CACH;EAMA,MAAM,mBAAmB,OAAM;EAE/B,MAAM,kBAAkB,eAAe,MAAM,MAAM,iBAAgB;EAGnE,MAAM,WAAW,eAAe,CAAC,EAAE,MAAM,SAAS,MAAM,WAAU;EAElE,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,MAAK;;uBAIjD,YA8EkB,MAAA,gBAAA,EAAA;IA7Ef,IAAI,gBAAA;gBACI,WAAA;4EAAU,QAAA;IAClB,KAAK,MAAM;IACX,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,UAAU,MAAM,cAAc,KAAA;IAC9B,UAAU,MAAM,cAAc,KAAA;IAC9B,kBAAgB,MAAM;IACtB,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,MAAM,aAAa,KAAA;IACjC,iBAAe,MAAM,cAAc,KAAA;IACnC,iBAAe,MAAM,cAAc,KAAA;;2BAeS,CAJrC,SAAA,SAAA,WAAA,EADR,mBAK6C,SAAA;;KAH1C,KAAK,gBAAA;KACL,OAAK,eAAE,eAAA,QAAiB,KAAA,IAAS,UAAA;KAClC,aAAU;uBACR,MAAM,SAAS,MAAM,UAAS,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAGlC,mBA6CM,OAAA;KA5CH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;KACjE,aAAU;;KAEV,YAgBuB,MAAA,qBAAA,EAAA,EAhBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA,EAAA,EAAA;6BAenG,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;OAbJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;;KAItB,YAGE,MAAA,iBAAA,EAAA;MAFC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;MAChE,aAAa,MAAM;;KAGtB,YAiBuB,MAAA,qBAAA,EAAA,EAjBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA,EAAA,EAAA;6BAgBnG,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAfN,mBAeM,OAAA;OAdJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,EAClB,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA"}

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot, ProgressIndicator } from 'reka-ui'\nimport { progressBarVariants } 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  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n  isStriped?: boolean\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  isStriped: false,\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\nconst slotFns = computed(() =>\n  progressBarVariants({\n    size: props.size,\n    color: props.color,\n    radius: props.radius,\n    isStriped: props.isStriped,\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(percentage.value)) + '%'\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <div\n      v-if=\"label || showValueLabel\"\n      :class=\"slotFns.labelWrapper()\"\n    >\n      <span\n        v-if=\"label\"\n        :class=\"slotFns.label()\"\n      >{{ label }}</span>\n      <span\n        v-if=\"showValueLabel\"\n        :class=\"slotFns.value()\"\n      >{{ formattedValue }}</span>\n    </div>\n    <ProgressRoot\n      :model-value=\"isInd ? null : (props.value as number)\"\n      :max=\"maxValue\"\n      :class=\"slotFns.track()\"\n      :aria-label=\"label || 'Progress'\"\n    >\n      <ProgressIndicator\n        :class=\"slotFns.indicator()\"\n        :style=\"isInd ? {} : { transform: `translateX(-${100 - percentage}%)` }\"\n      />\n    </ProgressRoot>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot, ProgressIndicator } from 'reka-ui'\nimport { progressBarVariants } 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  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n  isStriped?: boolean\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    labelWrapper: ClassValue\n    label: ClassValue\n    value: ClassValue\n    track: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  isStriped: false,\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\nconst slotFns = computed(() =>\n  progressBarVariants({\n    size: props.size,\n    color: props.color,\n    radius: props.radius,\n    isStriped: props.isStriped,\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(percentage.value)) + '%'\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <div\n      v-if=\"label || showValueLabel\"\n      :class=\"composeClassName(slotFns.labelWrapper(), props.classNames?.labelWrapper)\"\n    >\n      <span\n        v-if=\"label\"\n        :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n      >{{ label }}</span>\n      <span\n        v-if=\"showValueLabel\"\n        :class=\"composeClassName(slotFns.value(), props.classNames?.value)\"\n      >{{ formattedValue }}</span>\n    </div>\n    <ProgressRoot\n      :model-value=\"isInd ? null : (props.value as number)\"\n      :max=\"maxValue\"\n      :class=\"composeClassName(slotFns.track(), props.classNames?.track)\"\n      :aria-label=\"label || 'Progress'\"\n    >\n      <ProgressIndicator\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n        :style=\"isInd ? {} : { transform: `translateX(-${100 - percentage}%)` }\"\n      />\n    </ProgressRoot>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/progress-bar/ProgressBar.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,8 @@ var ProgressBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -57,25 +58,25 @@ var ProgressBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-disabled": __props.isDisabled ? "" : void 0
 			}, [__props.label || __props.showValueLabel ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(slotFns.value.labelWrapper())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.labelWrapper(), props.classNames?.labelWrapper))
 			}, [__props.label ? (openBlock(), createElementBlock("span", {
 				key: 0,
-				class: normalizeClass(slotFns.value.label())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
 			}, toDisplayString(__props.label), 3)) : createCommentVNode("", true), __props.showValueLabel ? (openBlock(), createElementBlock("span", {
 				key: 1,
-				class: normalizeClass(slotFns.value.value())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.value(), props.classNames?.value))
 			}, toDisplayString(formattedValue.value), 3)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true), createVNode(unref(ProgressRoot), {
 				"model-value": isInd.value ? null : props.value,
 				max: __props.maxValue,
-				class: normalizeClass(slotFns.value.track()),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.track(), props.classNames?.track)),
 				"aria-label": __props.label || "Progress"
 			}, {
 				default: withCtx(() => [createVNode(unref(ProgressIndicator), {
-					class: normalizeClass(slotFns.value.indicator()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					style: normalizeStyle(isInd.value ? {} : { transform: `translateX(-${100 - percentage.value}%)` })
 				}, null, 8, ["class", "style"])]),
 				_: 1

package/dist/components/progress-bar/ProgressBar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot, ProgressIndicator } from 'reka-ui'\nimport { progressBarVariants } 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  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n  isStriped?: boolean\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: string\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  isStriped: false,\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\nconst slotFns = computed(() =>\n  progressBarVariants({\n    size: props.size,\n    color: props.color,\n    radius: props.radius,\n    isStriped: props.isStriped,\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(percentage.value)) + '%'\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <div\n      v-if=\"label || showValueLabel\"\n      :class=\"slotFns.labelWrapper()\"\n    >\n      <span\n        v-if=\"label\"\n        :class=\"slotFns.label()\"\n      >{{ label }}</span>\n      <span\n        v-if=\"showValueLabel\"\n        :class=\"slotFns.value()\"\n      >{{ formattedValue }}</span>\n    </div>\n    <ProgressRoot\n      :model-value=\"isInd ? null : (props.value as number)\"\n      :max=\"maxValue\"\n      :class=\"slotFns.track()\"\n      :aria-label=\"label || 'Progress'\"\n    >\n      <ProgressIndicator\n        :class=\"slotFns.indicator()\"\n        :style=\"isInd ? {} : { transform: `translateX(-${100 - percentage}%)` }\"\n      />\n    </ProgressRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAwBd,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;EAED,MAAM,UAAU,eACd,oBAAoB;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,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,WAAW,MAAM,CAAC,GAAG;IAC/C;;uBAIC,mBA4BM,OAAA;IA3BH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,iBAAe,QAAA,aAAU,KAAQ,KAAA;OAG1B,QAAA,SAAS,QAAA,kBAAA,WAAA,EADjB,mBAYM,OAAA;;IAVH,OAAK,eAAE,QAAA,MAAQ,cAAY,CAAA;OAGpB,QAAA,SAAA,WAAA,EADR,mBAGmB,QAAA;;IADhB,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;sBACnB,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAED,QAAA,kBAAA,WAAA,EADR,mBAG4B,QAAA;;IADzB,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;sBACnB,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEpB,YAUe,MAAA,aAAA,EAAA;IATZ,eAAa,MAAA,QAAK,OAAW,MAAM;IACnC,KAAK,QAAA;IACL,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA;IACpB,cAAY,QAAA,SAAK;;2BAKhB,CAHF,YAGE,MAAA,kBAAA,EAAA;KAFC,OAAK,eAAE,QAAA,MAAQ,WAAS,CAAA;KACxB,OAAK,eAAE,MAAA,QAAK,EAAA,GAAA,EAAA,WAAA,eAAA,MAA0C,WAAA,MAAU,KAAA,CAAA"}
+{"version":3,"file":"ProgressBar.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ProgressRoot, ProgressIndicator } from 'reka-ui'\nimport { progressBarVariants } 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  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n  isStriped?: boolean\n  isIndeterminate?: boolean\n  isDisabled?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    labelWrapper: ClassValue\n    label: ClassValue\n    value: ClassValue\n    track: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  minValue: 0,\n  maxValue: 100,\n  showValueLabel: false,\n  isStriped: false,\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\nconst slotFns = computed(() =>\n  progressBarVariants({\n    size: props.size,\n    color: props.color,\n    radius: props.radius,\n    isStriped: props.isStriped,\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(percentage.value)) + '%'\n})\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-disabled=\"isDisabled ? '' : undefined\"\n  >\n    <div\n      v-if=\"label || showValueLabel\"\n      :class=\"composeClassName(slotFns.labelWrapper(), props.classNames?.labelWrapper)\"\n    >\n      <span\n        v-if=\"label\"\n        :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n      >{{ label }}</span>\n      <span\n        v-if=\"showValueLabel\"\n        :class=\"composeClassName(slotFns.value(), props.classNames?.value)\"\n      >{{ formattedValue }}</span>\n    </div>\n    <ProgressRoot\n      :model-value=\"isInd ? null : (props.value as number)\"\n      :max=\"maxValue\"\n      :class=\"composeClassName(slotFns.track(), props.classNames?.track)\"\n      :aria-label=\"label || 'Progress'\"\n    >\n      <ProgressIndicator\n        :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n        :style=\"isInd ? {} : { transform: `translateX(-${100 - percentage}%)` }\"\n      />\n    </ProgressRoot>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAiCd,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;EAED,MAAM,UAAU,eACd,oBAAoB;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,QAAQ,MAAM;GACd,WAAW,MAAM;GACjB,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,WAAW,MAAM,CAAC,GAAG;IAC/C;;uBAIC,mBA4BM,OAAA;IA3BH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,iBAAe,QAAA,aAAU,KAAQ,KAAA;OAG1B,QAAA,SAAS,QAAA,kBAAA,WAAA,EADjB,mBAYM,OAAA;;IAVH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;OAGvE,QAAA,SAAA,WAAA,EADR,mBAGmB,QAAA;;IADhB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;sBAC/D,QAAA,MAAK,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAED,QAAA,kBAAA,WAAA,EADR,mBAG4B,QAAA;;IADzB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;sBAC/D,eAAA,MAAc,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEpB,YAUe,MAAA,aAAA,EAAA;IATZ,eAAa,MAAA,QAAK,OAAW,MAAM;IACnC,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;IAChE,cAAY,QAAA,SAAK;;2BAKhB,CAHF,YAGE,MAAA,kBAAA,EAAA;KAFC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;KACxE,OAAK,eAAE,MAAA,QAAK,EAAA,GAAA,EAAA,WAAA,eAAA,MAA0C,WAAA,MAAU,KAAA,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressCircle.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":""}
+{"version":3,"file":"ProgressCircle.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":""}

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

@@ -34,7 +34,8 @@ var ProgressCircle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
@@ -62,24 +63,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 +93,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,8 @@ var Radio_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
@@ -31,9 +32,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":""}