@auronui/vue 1.0.14 → 1.0.16

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -57,7 +57,14 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			default: false
 		},
 		name: {},
-		class: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
 		granularity: { default: "minute" },
 		hourCycle: {},
 		hideTimeZone: {
@@ -180,7 +187,7 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 				disabled: __props.isDisabled,
 				readonly: __props.isReadOnly,
 				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-slot": "date-time-picker"
 			}, {
 				default: withCtx(() => [createVNode(DateInput_default, {
@@ -206,12 +213,12 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"onUpdate:modelValue": onInputChange
 				}, {
 					endContent: withCtx(() => [createVNode(unref(DatePickerTrigger), {
-						class: normalizeClass(slotFns.value.trigger()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.trigger(), props.classNames?.trigger)),
 						"aria-label": "Open date time picker",
 						onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
 					}, {
 						default: withCtx(() => [renderSlot(_ctx.$slots, "selectorIcon", {}, () => [(openBlock(), createElementBlock("svg", {
-							class: normalizeClass(slotFns.value.triggerIndicator()),
+							class: normalizeClass(unref(composeClassName)(slotFns.value.triggerIndicator(), props.classNames?.triggerIndicator)),
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "16",
 							height: "16",
@@ -275,17 +282,17 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					"name",
 					"hide-time-zone"
 				]), createVNode(unref(DatePickerContent), {
-					class: normalizeClass(slotFns.value.popover()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.popover(), props.classNames?.popover)),
 					"data-slot": "popover",
 					"side-offset": 8
 				}, {
 					default: withCtx(() => [createElementVNode("div", {
-						class: normalizeClass(slotFns.value.stepHeader()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
 						"data-slot": "step-header"
 					}, [
 						createElementVNode("button", {
 							type: "button",
-							class: normalizeClass(slotFns.value.navButton()),
+							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"data-hidden": activeStep.value === "date" ? "true" : void 0,
 							"aria-label": "Previous step",
 							"data-slot": "back-button",
@@ -301,19 +308,19 @@ var DateTimePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 							"stroke-linejoin": "round",
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1),
-						createElementVNode("span", { class: normalizeClass(slotFns.value.stepTitle()) }, toDisplayString(STEP_TITLES[activeStep.value]), 3),
+						createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.stepTitle(), props.classNames?.stepTitle)) }, toDisplayString(STEP_TITLES[activeStep.value]), 3),
 						createElementVNode("button", {
 							type: "button",
-							class: normalizeClass(slotFns.value.navButton()),
+							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
 							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
 							"data-slot": "forward-button",
 							onClick: goForward
 						}, [activeStep.value === "time" ? (openBlock(), createElementBlock("span", {
 							key: 0,
-							class: normalizeClass(slotFns.value.doneLabel())
+							class: normalizeClass(unref(composeClassName)(slotFns.value.doneLabel(), props.classNames?.doneLabel))
 						}, "Done", 2)) : (openBlock(), createElementBlock("svg", _hoisted_3, [..._cache[6] || (_cache[6] = [createElementVNode("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2)
 					], 2), createElementVNode("div", {
-						class: normalizeClass(slotFns.value.panelWrap()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.panelWrap(), props.classNames?.panelWrap)),
 						style: { "overflow": "hidden" }
 					}, [createVNode(unref(AnimatePresence_default), { mode: "popLayout" }, {
 						default: withCtx(() => [activeStep.value === "date" ? (openBlock(), createBlock(unref(motion).div, {

package/dist/components/date-time-picker/DateTimePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: string\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"slotFns.trigger()\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"slotFns.triggerIndicator()\"\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              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"slotFns.popover()\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <!-- Step header -->\n      <div\n        :class=\"slotFns.stepHeader()\"\n        data-slot=\"step-header\"\n      >\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\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        </button>\n\n        <span :class=\"slotFns.stepTitle()\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"slotFns.navButton()\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span\n            v-if=\"activeStep === 'time'\"\n            :class=\"slotFns.doneLabel()\"\n          >Done</span>\n          <svg\n            v-else\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\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        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div\n        :class=\"slotFns.panelWrap()\"\n        style=\"overflow: hidden;\"\n      >\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"DateTimePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/date-time-picker/DateTimePicker.vue"],"sourcesContent":["<!-- packages/vue/src/components/date-time-picker/DateTimePicker.vue -->\n<script setup lang=\"ts\">\nimport { computed, ref, shallowRef, watch } from 'vue'\nimport {\n  DatePickerRoot,\n  DatePickerTrigger,\n  DatePickerContent,\n} from 'reka-ui'\nimport {\n  type DateValue,\n  CalendarDateTime,\n  toCalendarDate,\n  today,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { AnimatePresence, motion } from 'motion-v'\nimport { dateTimePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport Calendar from '../calendar/Calendar.vue'\nimport DateInput from '../date-input/DateInput.vue'\nimport DateTimePickerTimeScroller from './DateTimePickerTimeScroller.vue'\n\ntype Step = 'date' | 'time'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n  variant?: 'flat' | 'bordered' | 'faded' | 'underlined'\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n  labelPlacement?: 'inside' | 'outside' | 'outside-left'\n  fullWidth?: boolean\n  label?: string\n  description?: string\n  errorMessage?: string\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadOnly?: boolean\n  isRequired?: boolean\n  name?: string\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    base: ClassValue\n    trigger: ClassValue\n    triggerIndicator: ClassValue\n    popover: ClassValue\n    stepHeader: ClassValue\n    navButton: ClassValue\n    stepTitle: ClassValue\n    doneLabel: ClassValue\n    panelWrap: ClassValue\n  }>\n  granularity?: 'minute' | 'second'\n  hourCycle?: 12 | 24\n  hideTimeZone?: boolean\n  defaultOpen?: boolean\n  closeOnSelect?: boolean\n  locale?: string\n  defaultValue?: CalendarDateTime\n  minValue?: CalendarDateTime\n  maxValue?: CalendarDateTime\n  isDateUnavailable?: (date: DateValue) => boolean\n  isDateDisabled?: (date: DateValue) => boolean\n}>(), {\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  hideTimeZone: false,\n  granularity: 'minute',\n  defaultOpen: false,\n  closeOnSelect: true,\n})\n\nconst modelValue = defineModel<CalendarDateTime | null | undefined>('modelValue')\nconst openModel = defineModel<boolean>('open', { default: undefined })\n\nconst STEP_TITLES: Record<Step, string> = {\n  date: 'Pick a date',\n  time: 'Pick a time',\n}\nconst STEP_ORDER: Step[] = ['date', 'time']\n\n// Seed controlled open state from defaultOpen so portal renders in uncontrolled mode too\nif (props.defaultOpen && openModel.value === undefined) {\n  openModel.value = true\n}\n\n// Seed controlled value from defaultValue so DateFieldRoot is always in controlled\n// mode from the start. Without this, an uncontrolled→controlled transition\n// happens mid-lifecycle and Reka's DateFieldRoot won't re-render segments.\nif (modelValue.value == null && props.defaultValue != null) {\n  modelValue.value = props.defaultValue\n}\n\n// Internal working value — always a CalendarDateTime, never null/undefined.\nconst _today = today(getLocalTimeZone())\nconst internalValue = shallowRef<CalendarDateTime>(\n  modelValue.value ?? props.defaultValue ?? new CalendarDateTime(_today.year, _today.month, _today.day, 0, 0),\n)\n\n// Sync inbound: parent resets the value → update internalValue.\n// Guard on CalendarDateTime: ignore CalendarDate emits (no time info).\nwatch(modelValue, (v) => {\n  if (v instanceof CalendarDateTime) internalValue.value = v\n})\n\n// Route segment edits from DateInput back to both internalValue and modelValue.\n// DateInput is bound to internalValue (not modelValue) so this is the only place\n// that propagates user-typed changes outward.\nfunction onInputChange(v: DateValue | null | undefined) {\n  if (!(v instanceof CalendarDateTime)) return\n  internalValue.value = v\n  modelValue.value = v\n}\n\n// ─── Step state ──────────────────────────────────────────────────────────\n\nconst activeStep = ref<Step>('date')\nconst direction = ref<1 | -1>(1)\n\nwatch(openModel, (open) => {\n  if (open) activeStep.value = 'date'\n})\n\nfunction goTo(step: Step) {\n  const from = STEP_ORDER.indexOf(activeStep.value)\n  const to = STEP_ORDER.indexOf(step)\n  direction.value = to > from ? 1 : -1\n  activeStep.value = step\n}\n\nfunction goBack() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx > 0) goTo(STEP_ORDER[idx - 1])\n}\n\nfunction goForward() {\n  const idx = STEP_ORDER.indexOf(activeStep.value)\n  if (idx < STEP_ORDER.length - 1) {\n    goTo(STEP_ORDER[idx + 1])\n  } else if (props.closeOnSelect) {\n    openModel.value = false\n  }\n}\n\n// ─── Panel animation variants ────────────────────────────────────────────\n\nconst panelInitial = computed(() => ({ x: direction.value > 0 ? '100%' : '-100%', opacity: 0 }))\nconst panelAnimate = { x: '0%', opacity: 1 }\nconst panelExit = computed(() => ({ x: direction.value > 0 ? '-100%' : '100%', opacity: 0 }))\n\n// ─── Calendar value sync ─────────────────────────────────────────────────\n\nconst calendarValue = computed<DateValue | undefined>({\n  // Pass CalendarDate to CalendarRoot — Reka always emits CalendarDate from\n  // onDateChange. The setter reconstructs the full CalendarDateTime.\n  get: () => toCalendarDate(internalValue.value),\n  set: (val) => {\n    if (!val) return\n    internalValue.value = internalValue.value.set({\n      year: val.year,\n      month: val.month,\n      day: val.day,\n    })\n    modelValue.value = internalValue.value\n    goTo('time')\n  },\n})\n\n// ─── Time update ─────────────────────────────────────────────────────────\n\nfunction onTimeUpdate(val: CalendarDateTime) {\n  internalValue.value = val\n  modelValue.value = val\n}\n\n// ─── Styles ──────────────────────────────────────────────────────────────\n\nconst slotFns = computed(() =>\n  dateTimePickerVariants({\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    fullWidth: props.fullWidth,\n  }),\n)\n</script>\n\n<template>\n  <DatePickerRoot\n    v-model=\"modelValue\"\n    v-model:open=\"openModel\"\n    :default-value=\"defaultValue\"\n    :default-open=\"defaultOpen\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-date-unavailable=\"isDateUnavailable\"\n    :is-date-disabled=\"isDateDisabled\"\n    :locale=\"locale\"\n    :granularity=\"granularity\"\n    :hour-cycle=\"hourCycle\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    data-slot=\"date-time-picker\"\n  >\n    <DateInput\n      :model-value=\"internalValue\"\n      :variant=\"variant\"\n      :size=\"size\"\n      :color=\"color\"\n      :label-placement=\"labelPlacement\"\n      :full-width=\"fullWidth\"\n      :default-value=\"defaultValue\"\n      :granularity=\"granularity\"\n      :hour-cycle=\"hourCycle\"\n      :locale=\"locale\"\n      :label=\"label\"\n      :description=\"description\"\n      :error-message=\"errorMessage\"\n      :is-invalid=\"isInvalid\"\n      :is-disabled=\"isDisabled\"\n      :is-read-only=\"isReadOnly\"\n      :is-required=\"isRequired\"\n      :name=\"name\"\n      :hide-time-zone=\"hideTimeZone\"\n      @update:model-value=\"onInputChange\"\n    >\n      <template #endContent>\n        <DatePickerTrigger\n          :class=\"composeClassName(slotFns.trigger(), props.classNames?.trigger)\"\n          aria-label=\"Open date time picker\"\n          @mousedown.prevent\n        >\n          <slot name=\"selectorIcon\">\n            <svg\n              :class=\"composeClassName(slotFns.triggerIndicator(), props.classNames?.triggerIndicator)\"\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              focusable=\"false\"\n            >\n              <rect\n                x=\"3\"\n                y=\"4\"\n                width=\"18\"\n                height=\"18\"\n                rx=\"2\"\n                ry=\"2\"\n              />\n              <line\n                x1=\"16\"\n                y1=\"2\"\n                x2=\"16\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"8\"\n                y1=\"2\"\n                x2=\"8\"\n                y2=\"6\"\n              />\n              <line\n                x1=\"3\"\n                y1=\"10\"\n                x2=\"21\"\n                y2=\"10\"\n              />\n            </svg>\n          </slot>\n        </DatePickerTrigger>\n      </template>\n    </DateInput>\n\n    <DatePickerContent\n      :class=\"composeClassName(slotFns.popover(), props.classNames?.popover)\"\n      data-slot=\"popover\"\n      :side-offset=\"8\"\n    >\n      <!-- Step header -->\n      <div\n        :class=\"composeClassName(slotFns.stepHeader(), props.classNames?.stepHeader)\"\n        data-slot=\"step-header\"\n      >\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :data-hidden=\"activeStep === 'date' ? 'true' : undefined\"\n          aria-label=\"Previous step\"\n          data-slot=\"back-button\"\n          @click=\"goBack\"\n        >\n          <svg\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\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        </button>\n\n        <span :class=\"composeClassName(slotFns.stepTitle(), props.classNames?.stepTitle)\">{{ STEP_TITLES[activeStep] }}</span>\n\n        <button\n          type=\"button\"\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          :aria-label=\"activeStep === 'time' ? 'Done' : 'Next step'\"\n          data-slot=\"forward-button\"\n          @click=\"goForward\"\n        >\n          <span\n            v-if=\"activeStep === 'time'\"\n            :class=\"composeClassName(slotFns.doneLabel(), props.classNames?.doneLabel)\"\n          >Done</span>\n          <svg\n            v-else\n            width=\"14\"\n            height=\"14\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2.5\"\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        </button>\n      </div>\n\n      <!-- Sliding panels -->\n      <div\n        :class=\"composeClassName(slotFns.panelWrap(), props.classNames?.panelWrap)\"\n        style=\"overflow: hidden;\"\n      >\n        <AnimatePresence mode=\"popLayout\">\n          <motion.div\n            v-if=\"activeStep === 'date'\"\n            key=\"date\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n            class=\"px-3 pb-3\"\n            data-slot=\"calendar-panel\"\n          >\n            <Calendar\n              v-model=\"calendarValue\"\n              :default-value=\"defaultValue\"\n              :min-value=\"minValue\"\n              :max-value=\"maxValue\"\n              :is-date-disabled=\"isDateDisabled\"\n              :is-date-unavailable=\"isDateUnavailable\"\n              :locale=\"locale\"\n              :readonly=\"isReadOnly\"\n              :disabled=\"isDisabled\"\n            />\n          </motion.div>\n\n          <motion.div\n            v-else-if=\"activeStep === 'time'\"\n            key=\"time\"\n            :initial=\"panelInitial\"\n            :animate=\"panelAnimate\"\n            :exit=\"panelExit\"\n            :transition=\"{ duration: 0.15 }\"\n          >\n            <DateTimePickerTimeScroller\n              :model-value=\"internalValue\"\n              :granularity=\"granularity\"\n              :hour-cycle=\"hourCycle\"\n              @update:model-value=\"onTimeUpdate\"\n            />\n          </motion.div>\n        </AnimatePresence>\n      </div>\n    </DatePickerContent>\n  </DatePickerRoot>\n</template>\n"],"mappings":"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"}

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadonly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadonly, isRequired, label,\n       description, errorMessage, class).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Reuse the aria-describedby / error-vs-description precedence\n       logic verbatim.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: string\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\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    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"slotFns.label()\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"slotFns.mainWrapper()\">\n      <div\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"slotFns.label()\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"slotFns.startContent()\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"slotFns.input()\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"slotFns.endContent()\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"slotFns.clearButton()\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"slotFns.passwordToggle()\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"slotFns.helperWrapper()\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"slotFns.errorMessage()\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"slotFns.description()\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadonly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadonly, isRequired, label,\n       description, errorMessage, class, classNames).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Reuse the aria-describedby / error-vs-description precedence\n       logic verbatim.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   *\n   * @example\n   * ```vue\n   * <Input :class-names=\"{ input: 'text-xl', inputWrapper: 'border-2 border-blue-500' }\" />\n   * ```\n   *\n   * Available slots: `base`, `mainWrapper`, `inputWrapper`, `input`,\n   * `label`, `startContent`, `endContent`, `clearButton`, `passwordToggle`,\n   * `helperWrapper`, `description`, `errorMessage`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    input: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    passwordToggle: ClassValue\n    helperWrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\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    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <div\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"composeClassName(slotFns.clearButton(), props.classNames?.clearButton)\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"composeClassName(slotFns.passwordToggle(), props.classNames?.passwordToggle)\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/input/Input.vue_vue_type_script_setup_true_lang.js

@@ -99,7 +99,14 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		label: {},
 		description: {},
 		errorMessage: {},
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -159,7 +166,7 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const showInsideLabel = computed(() => hasLabel.value && props.labelPlacement === "inside");
 		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-invalid": __props.isInvalid || void 0,
 				"data-disabled": __props.isDisabled || void 0,
 				"data-readonly": __props.isReadonly || void 0,
@@ -169,19 +176,19 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			}, [showOutsideLabel.value ? (openBlock(), createElementBlock("label", {
 				key: 0,
 				for: inputId.value,
-				class: normalizeClass(slotFns.value.label())
-			}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)], 10, _hoisted_2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(slotFns.value.mainWrapper()) }, [createElementVNode("div", {
-				class: normalizeClass(slotFns.value.inputWrapper()),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)], 10, _hoisted_2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [createElementVNode("div", {
+				class: normalizeClass(unref(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
 				showInsideLabel.value ? (openBlock(), createElementBlock("label", {
 					key: 0,
 					for: inputId.value,
-					class: normalizeClass(slotFns.value.label())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
 				}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_6, " *")) : createCommentVNode("", true)], 10, _hoisted_5)) : createCommentVNode("", true),
 				_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
 					key: 1,
-					class: normalizeClass(slotFns.value.startContent())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
 				}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
 				withDirectives(createElementVNode("input", mergeProps(inputAttrs.value, {
 					id: inputId.value,
@@ -196,17 +203,17 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
 					"aria-describedby": ariaDescribedBy.value,
-					class: slotFns.value.input()
+					class: unref(composeClassName)(slotFns.value.input(), props.classNames?.input)
 				}), null, 16, _hoisted_7), [[vModelDynamic, modelValue.value]]),
 				_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", {
 					key: 2,
-					class: normalizeClass(slotFns.value.endContent())
+					class: normalizeClass(unref(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
 				}, [renderSlot(_ctx.$slots, "endContent")], 2)) : createCommentVNode("", true),
 				showClearButton.value ? (openBlock(), createElementBlock("button", {
 					key: 3,
 					type: "button",
 					tabindex: "-1",
-					class: normalizeClass(slotFns.value.clearButton()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.clearButton(), props.classNames?.clearButton)),
 					"aria-label": "Clear input",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
@@ -240,7 +247,7 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				showPasswordToggleButton.value ? (openBlock(), createElementBlock("button", {
 					key: 4,
 					type: "button",
-					class: normalizeClass(slotFns.value.passwordToggle()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.passwordToggle(), props.classNames?.passwordToggle)),
 					"aria-label": isPasswordVisible.value ? "Hide password" : "Show password",
 					"aria-pressed": isPasswordVisible.value,
 					onClick: togglePasswordVisibility
@@ -256,15 +263,15 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				}, null, -1)])]))], 10, _hoisted_8)) : createCommentVNode("", true)
 			], 10, _hoisted_4), hasHelper.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(slotFns.value.helperWrapper())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
 			}, [showError.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: errorMessageId.value,
-				class: normalizeClass(slotFns.value.errorMessage())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
 			}, toDisplayString(__props.errorMessage), 11, _hoisted_11)) : showDescription.value ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				id: descriptionId.value,
-				class: normalizeClass(slotFns.value.description())
+				class: normalizeClass(unref(composeClassName)(slotFns.value.description(), props.classNames?.description))
 			}, toDisplayString(__props.description), 11, _hoisted_12)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
 		};
 	}

package/dist/components/input/Input.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadonly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadonly, isRequired, label,\n       description, errorMessage, class).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Reuse the aria-describedby / error-vs-description precedence\n       logic verbatim.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: string\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\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    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"slotFns.label()\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"slotFns.mainWrapper()\">\n      <div\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"slotFns.label()\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"slotFns.startContent()\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"slotFns.input()\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"slotFns.endContent()\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"slotFns.clearButton()\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"slotFns.passwordToggle()\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"slotFns.helperWrapper()\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"slotFns.errorMessage()\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"slotFns.description()\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"Input.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/input/Input.vue"],"sourcesContent":["<!--\n  Input — reference form-field component for @auronui/vue.\n\n  This is the canonical template for every form field in the library\n  (Textarea, NumberInput, DateInput, Select, etc.). Porting a new field\n  means mirroring its prop surface, slot layout, data-attribute contract,\n  CSS selector pairing, and a11y wiring. Keep these in sync.\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.input-root)                         ← layout container, carries class/data-attrs\n      label [outside | outside-left]           ← rendered here when placement !== 'inside'\n      mainWrapper (.input__main-wrapper)       ← groups field + helper vertically\n        inputWrapper (.input)                  ← styled field box (border, bg, focus)\n          label [inside]                       ← rendered here when placement === 'inside'\n          startContent (.input__start-content) ← leading icon slot\n          <input ref=\"inputEl\">                ← the native element\n          endContent (.input__end-content)     ← trailing icon slot\n          clearButton (.input__clear-button)   ← × button, after endContent\n          passwordToggle (.input__password-toggle) ← eye button, type=\"password\" only\n        helperWrapper (.input__helper-wrapper) ← holds description XOR error\n          errorMessage | description\n\n  ─── Data attributes on base (selector hooks) ──────────────────────────\n    data-invalid    — mirrors isInvalid\n    data-disabled   — mirrors isDisabled\n    data-readonly   — mirrors isReadonly\n    data-required   — mirrors isRequired\n    data-has-label  — true when label prop is set (any placement)\n    data-has-helper — true when description or error is visible\n    data-filled     — set on inputWrapper when the value is non-empty (for\n                      floating-label up-state)\n\n  Every interactive CSS rule in input.css pairs a pseudo-class with its\n  data-attribute counterpart (Reka UI selector pairing rule), e.g.\n    &:focus-within, &[data-focused=\"true\"] { ... }\n\n  ─── v-model ───────────────────────────────────────────────────────────\n    <Input v-model=\"value\" />   -- string | number | null\n\n  ─── Emits ─────────────────────────────────────────────────────────────\n    @clear   -- emitted when the user activates the clear (×) button.\n                The input is already empty and refocused by this point.\n\n  ─── Slots ─────────────────────────────────────────────────────────────\n    #startContent  -- leading icon / adornment\n    #endContent    -- trailing icon / adornment (renders BEFORE clear/toggle,\n                      so you can combine them freely)\n\n  ─── Accessibility contract (audited by vitest-axe) ────────────────────\n    • <label for=\"{inputId}\"> wraps the label text.\n    • aria-invalid reflects isInvalid.\n    • aria-describedby points to whichever helper is rendered (error wins).\n    • Required field uses the native `required` attribute; the visual\n      asterisk is aria-hidden.\n    • Clear button: tabindex=-1 (out of form tab flow), aria-label.\n    • Password toggle: tabbable, aria-pressed reflects visibility.\n    • All transitions are wrapped in motion-reduce:transition-none.\n\n  ─── Reuse checklist for new form fields ───────────────────────────────\n    1. Copy prop names verbatim (variant, size, color, labelPlacement,\n       fullWidth, isInvalid, isDisabled, isReadonly, isRequired, label,\n       description, errorMessage, class, classNames).\n    2. Expose the same slot keys in tailwind-variants.\n    3. Emit the same data-attributes on the root + data-filled on the\n       field box.\n    4. Reuse the aria-describedby / error-vs-description precedence\n       logic verbatim.\n    5. Generate ids with useId(), scope helper ids as `{id}-error` /\n       `{id}-description`.\n    6. Default labelPlacement to 'inside' and apply the inside-label\n       CSS via a compoundVariant of (hasLabel=true, labelPlacement='inside').\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'\nimport { inputVariants, type InputVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  showPasswordToggle: false,\n  type: 'text',\n})\n\nconst emit = defineEmits<{\n  /**\n   * Fired when the user activates the clear (×) button.\n   * At the time this fires the v-model value is already '' and focus\n   * has been returned to the input element.\n   */\n  clear: []\n}>()\n\n/**\n * Two-way value. String for text-like types, number for type=\"number\",\n * null allowed so controlled consumers can represent \"no value\" without\n * coercing to empty string.\n */\nconst modelValue = defineModel<string | number | null>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: InputVariants['variant']\n  /** Field height. @default 'md' */\n  size?: InputVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: InputVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * - `inside`: floats above the input (shrinks when focused/filled)\n   * - `outside`: sits above the field, static\n   * - `outside-left`: sits to the left, horizontal layout\n   * @default 'inside'\n   */\n  labelPlacement?: InputVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Triggers danger styling and enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute on the input. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the input when value is non-empty. @default false */\n  isClearable?: boolean\n  /** Shows a show/hide eye button. Only active when `type === 'password'`. @default false */\n  showPasswordToggle?: boolean\n  /** Native input type (e.g. `text`, `email`, `password`, `number`). @default 'text' */\n  type?: string\n  /** Placeholder shown when empty. Hidden behind the floating label until focused/filled for `labelPlacement: 'inside'`. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. Takes precedence over `description`. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /**\n   * Per-slot class overrides. Each key maps to a named slot in the anatomy;\n   * the value is merged with the generated variant classes via `composeClassName`.\n   *\n   * @example\n   * ```vue\n   * <Input :class-names=\"{ input: 'text-xl', inputWrapper: 'border-2 border-blue-500' }\" />\n   * ```\n   *\n   * Available slots: `base`, `mainWrapper`, `inputWrapper`, `input`,\n   * `label`, `startContent`, `endContent`, `clearButton`, `passwordToggle`,\n   * `helperWrapper`, `description`, `errorMessage`.\n   */\n  classNames?: Partial<{\n    base: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    input: ClassValue\n    label: ClassValue\n    startContent: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    passwordToggle: ClassValue\n    helperWrapper: ClassValue\n    description: ClassValue\n    errorMessage: ClassValue\n  }>\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst inputEl = useTemplateRef<HTMLInputElement>('inputEl')\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(\n  () => modelValue.value !== null && modelValue.value !== undefined && String(modelValue.value) !== '',\n)\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isPasswordVisible = ref(false)\nconst isPasswordField = computed(() => props.type === 'password')\nconst effectiveType = computed(() =>\n  isPasswordField.value && isPasswordVisible.value ? 'text' : props.type,\n)\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\nconst showPasswordToggleButton = computed(\n  () => props.showPasswordToggle && isPasswordField.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => inputEl.value?.focus())\n}\n\nfunction togglePasswordVisibility() {\n  isPasswordVisible.value = !isPasswordVisible.value\n}\n\nconst slotFns = computed(() =>\n  inputVariants({\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    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <div\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"inputEl\"\n          v-model=\"modelValue\"\n          :type=\"effectiveType\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        >\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"composeClassName(slotFns.clearButton(), props.classNames?.clearButton)\"\n          aria-label=\"Clear input\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n        <button\n          v-if=\"showPasswordToggleButton\"\n          type=\"button\"\n          :class=\"composeClassName(slotFns.passwordToggle(), props.classNames?.passwordToggle)\"\n          :aria-label=\"isPasswordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"isPasswordVisible\"\n          @click=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"isPasswordVisible\"\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\" />\n            <line\n              x1=\"1\"\n              y1=\"1\"\n              x2=\"23\"\n              y2=\"23\"\n            />\n          </svg>\n          <svg\n            v-else\n            xmlns=\"http://www.w3.org/2000/svg\"\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            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"3\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,MAAM,QAAQ;EAed,MAAM,OAAO;;;;;;EAcb,MAAM,aAAa,SAAmC,SAAA,aAAgB;EA0EtE,MAAM,QAAQ,UAAS;EACvB,MAAM,cAAc,OAAM;EAC1B,MAAM,UAAU,eAAgB,MAAM,MAA6B,YAAW;EAC9E,MAAM,aAAa,eACjB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,QAAQ,CAAC,OAAO,MAAM,KAAK,CAAA,CACtE;EAEA,MAAM,UAAU,eAAiC,UAAS;EAE1D,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,MAAK;EAC7C,MAAM,WAAW,eACT,WAAW,UAAU,QAAQ,WAAW,UAAU,KAAA,KAAa,OAAO,WAAW,MAAM,KAAK,GACpG;EAEA,MAAM,gBAAgB,eAAe,GAAG,QAAQ,MAAM,cAAa;EACnE,MAAM,iBAAiB,eAAe,GAAG,QAAQ,MAAM,QAAO;EAC9D,MAAM,YAAY,eAAe,MAAM,aAAa,CAAC,CAAC,MAAM,aAAY;EACxE,MAAM,kBAAkB,eAAe,CAAC,CAAC,MAAM,eAAe,CAAC,UAAU,MAAK;EAC9E,MAAM,YAAY,eAAe,UAAU,SAAS,gBAAgB,MAAK;EACzE,MAAM,kBAAkB,eAAe;AACrC,OAAI,UAAU,MAAO,QAAO,eAAe;AAC3C,OAAI,gBAAgB,MAAO,QAAO,cAAc;IAEjD;EAED,MAAM,oBAAoB,IAAI,MAAK;EACnC,MAAM,kBAAkB,eAAe,MAAM,SAAS,WAAU;EAChE,MAAM,gBAAgB,eACpB,gBAAgB,SAAS,kBAAkB,QAAQ,SAAS,MAAM,KACpE;EAEA,MAAM,gBAAgB,eAAe,CAAC,MAAM,cAAc,CAAC,MAAM,WAAU;EAC3E,MAAM,kBAAkB,eAChB,MAAM,eAAe,SAAS,SAAS,cAAc,MAC7D;EACA,MAAM,2BAA2B,eACzB,MAAM,sBAAsB,gBAAgB,SAAS,cAAc,MAC3E;EAEA,SAAS,cAAc;AACrB,cAAW,QAAQ;AACnB,QAAK,QAAO;AACZ,kBAAe,QAAQ,OAAO,OAAO,CAAA;;EAGvC,SAAS,2BAA2B;AAClC,qBAAkB,QAAQ,CAAC,kBAAkB;;EAG/C,MAAM,UAAU,eACd,cAAc;GACZ,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,UAAU,SAAS;GACnB,gBAAgB,MAAM;GACvB,CAAC,CACJ;EAEA,MAAM,mBAAmB,eACjB,SAAS,SAAS,MAAM,mBAAmB,SACnD;EACA,MAAM,kBAAkB,eAChB,SAAS,SAAS,MAAM,mBAAmB,SACnD;;uBAIE,mBAmKM,OAAA;IAlKH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,QAAA,aAAa,KAAA;IAC3B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,kBAAgB,SAAA,SAAY,KAAA;IAC5B,mBAAiB,UAAA,SAAa,KAAA;OAGvB,iBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;IALf,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uCAC/D,QAAA,MAAK,EAAA,EAAA,EACD,QAAA,cAAA,WAAA,EADI,mBAGF,QAHE,YAGX,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEH,mBAgJM,OAAA,EAhJA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA,EAAA,EAAA,CAChF,mBA0HM,OAAA;IAzHH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;IAC9E,eAAa,SAAA,QAAY,SAAA,SAAY,KAAA,IAAa,KAAA;;IAG3C,gBAAA,SAAA,WAAA,EADR,mBAOkB,SAAA;;KALf,KAAK,QAAA;KACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;wCAC/D,QAAA,MAAK,EAAA,EAAA,EACD,QAAA,cAAA,WAAA,EADI,mBAGF,QAHE,YAGX,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;IAEKA,KAAAA,OAAO,gBAAA,WAAA,EADf,mBAKO,QAAA;;KAHJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;QAE/E,WAA4B,KAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;mBAE9B,mBAcC,SAdD,WACU,WAaT,OAbmB;KACjB,IAAI,QAAA;cACD;KAAJ,KAAI;6EACe,QAAA;KAClB,MAAM,cAAA;KACN,aAAa,QAAA;KACb,MAAM,QAAA;KACN,UAAU,QAAA,cAAc,KAAA;KACxB,UAAU,QAAA,cAAc,KAAA;KACxB,UAAU,QAAA,cAAc,KAAA;KACxB,gBAAc,QAAA,aAAa,KAAA;KAC3B,oBAAkB,gBAAA;KAClB,OAAO,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK;gDATxD,WAAA,MAAU,CAAA,CAAA;IAYbA,KAAAA,OAAO,cAAA,WAAA,EADf,mBAKO,QAAA;;KAHJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,YAAU,EAAI,MAAM,YAAY,WAAU,CAAA;QAE3E,WAA0B,KAAA,QAAA,aAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;IAGpB,gBAAA,SAAA,WAAA,EADR,mBAoCS,UAAA;;KAlCP,MAAK;KACL,UAAS;KACR,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;KAC7E,cAAW;KACV,SAAO;sCAER,mBA2BM,OAAA;KA1BJ,OAAM;KACN,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,eAAY;;KAEZ,mBAIE,UAAA;MAHA,IAAG;MACH,IAAG;MACH,GAAE;;KAEJ,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;;KAEL,mBAKE,QAAA;MAJA,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;;;IAKD,yBAAA,SAAA,WAAA,EADR,mBA6CS,UAAA;;KA3CP,MAAK;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,gBAAc,EAAI,MAAM,YAAY,eAAc,CAAA;KAClF,cAAY,kBAAA,QAAiB,kBAAA;KAC7B,gBAAc,kBAAA;KACd,SAAO;QAGA,kBAAA,SAAA,WAAA,EADR,mBAkBM,OAlBN,YAkBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAPJ,mBAAiM,QAAA,EAA3L,GAAE,wLAAsL,EAAA,MAAA,GAAA,EAC9L,mBAKE,QAAA;KAJA,IAAG;KACH,IAAG;KACH,IAAG;KACH,IAAG;sCAGP,mBAiBM,OAjBN,aAiBM,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CANJ,mBAAyD,QAAA,EAAnD,GAAE,gDAA8C,EAAA,MAAA,GAAA,EACtD,mBAIE,UAAA;KAHA,IAAG;KACH,IAAG;KACH,GAAE;;uBAOF,UAAA,SAAA,WAAA,EADR,mBAkBM,OAAA;;IAhBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,eAAa,EAAI,MAAM,YAAY,cAAa,CAAA;OAGzE,UAAA,SAAA,WAAA,EADR,mBAMM,OAAA;;IAJH,IAAI,eAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;sBAE5E,QAAA,aAAY,EAAA,IAAA,YAAA,IAGJ,gBAAA,SAAA,WAAA,EADb,mBAMM,OAAA;;IAJH,IAAI,cAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;sBAE1E,QAAA,YAAW,EAAA,IAAA,YAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/input-otp/InputOTP.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  class?: string\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"slotFns.group()\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :class=\"slotFns.slot()\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"InputOTP.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":""}

package/dist/components/input-otp/InputOTP.vue_vue_type_script_setup_true_lang.js

@@ -25,7 +25,17 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		defaultValue: { default: void 0 },
 		name: { default: void 0 },
 		variant: { default: "primary" },
-		class: { default: void 0 }
+		class: {
+			type: [
+				String,
+				Boolean,
+				null,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		classNames: { default: void 0 }
 	},
 	emits: ["update:modelValue", "complete"],
 	setup(__props, { emit: __emit }) {
@@ -44,15 +54,15 @@ var InputOTP_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				otp: __props.otp,
 				mask: __props.mask,
 				name: __props.name,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"onUpdate:modelValue": handleUpdate,
 				onComplete: handleComplete
 			}, {
-				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(slotFns.value.group()) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (i) => {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.group(), props.classNames?.group)) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.length, (i) => {
 					return openBlock(), createBlock(unref(PinInputInput), {
 						key: i - 1,
 						index: i - 1,
-						class: normalizeClass(slotFns.value.slot())
+						class: normalizeClass(unref(composeClassName)(slotFns.value.slot(), props.classNames?.slot))
 					}, null, 8, ["index", "class"]);
 				}), 128))], 2)]),
 				_: 1

package/dist/components/input-otp/InputOTP.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  class?: string\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"slotFns.group()\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :class=\"slotFns.slot()\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EA0Bd,MAAM,OAAO;EAKb,MAAM,UAAU,eAAe,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;EAE3E,MAAM,kBAAkB,gBACrB,MAAM,cAAc,IAAI,MAAM,GAAE,CACnC;EAEA,MAAM,gBAAgB,QAAkB,KAAK,qBAAqB,IAAI,KAAK,GAAG,CAAA;EAC9E,MAAM,kBAAkB,QAAkB,KAAK,YAAY,IAAI,KAAK,GAAG,CAAA;;uBAIrE,YAoBe,MAAA,aAAA,EAAA;IAnBZ,eAAa,gBAAA;IACb,UAAU,QAAA;IACV,aAAa,QAAA;IACb,MAAM,QAAA;IACN,KAAK,QAAA;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,uBAAoB;IACpB,YAAU;;2BASL,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAE,QAAA,MAAQ,OAAK,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACxB,mBAKE,UAAA,MAAA,WAJY,QAAA,SAAL,MAAC;yBADV,YAKE,MAAA,cAAA,EAAA;MAHC,KAAK,IAAC;MACN,OAAO,IAAC;MACR,OAAK,eAAE,QAAA,MAAQ,MAAI,CAAA"}
+{"version":3,"file":"InputOTP.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/input-otp/InputOTP.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PinInputRoot, PinInputInput } from 'reka-ui'\nimport { inputOTPVariants, type InputOTPVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  length?: number\n  type?: 'text'\n  otp?: boolean\n  mask?: boolean\n  disabled?: boolean\n  placeholder?: string\n  modelValue?: string\n  defaultValue?: string\n  name?: string\n  variant?: InputOTPVariants['variant']\n  class?: ClassValue\n  /** Optional per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    slot: ClassValue\n  }>\n}>(), {\n  length: 6,\n  type: 'text',\n  otp: true,\n  mask: false,\n  disabled: false,\n  placeholder: '',\n  modelValue: undefined,\n  defaultValue: undefined,\n  name: undefined,\n  variant: 'primary',\n  class: undefined,\n  classNames: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  'complete': [value: string]\n}>()\n\nconst slotFns = computed(() => inputOTPVariants({ variant: props.variant }))\n\nconst modelValueArray = computed(() =>\n  (props.modelValue ?? '').split('')\n)\n\nconst handleUpdate = (arr: string[]) => emit('update:modelValue', arr.join(''))\nconst handleComplete = (arr: string[]) => emit('complete', arr.join(''))\n</script>\n\n<template>\n  <PinInputRoot\n    :model-value=\"modelValueArray\"\n    :disabled=\"disabled\"\n    :placeholder=\"placeholder\"\n    :type=\"type\"\n    :otp=\"otp\"\n    :mask=\"mask\"\n    :name=\"name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:model-value=\"handleUpdate\"\n    @complete=\"handleComplete\"\n  >\n    <div :class=\"composeClassName(slotFns.group(), props.classNames?.group)\">\n      <PinInputInput\n        v-for=\"i in length\"\n        :key=\"i - 1\"\n        :index=\"i - 1\"\n        :class=\"composeClassName(slotFns.slot(), props.classNames?.slot)\"\n      />\n    </div>\n  </PinInputRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAiCd,MAAM,OAAO;EAKb,MAAM,UAAU,eAAe,iBAAiB,EAAE,SAAS,MAAM,SAAS,CAAC,CAAA;EAE3E,MAAM,kBAAkB,gBACrB,MAAM,cAAc,IAAI,MAAM,GAAE,CACnC;EAEA,MAAM,gBAAgB,QAAkB,KAAK,qBAAqB,IAAI,KAAK,GAAG,CAAA;EAC9E,MAAM,kBAAkB,QAAkB,KAAK,YAAY,IAAI,KAAK,GAAG,CAAA;;uBAIrE,YAoBe,MAAA,aAAA,EAAA;IAnBZ,eAAa,gBAAA;IACb,UAAU,QAAA;IACV,aAAa,QAAA;IACb,MAAM,QAAA;IACN,KAAK,QAAA;IACL,MAAM,QAAA;IACN,MAAM,QAAA;IACN,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,uBAAoB;IACpB,YAAU;;2BASL,CAPN,mBAOM,OAAA,EAPA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACpE,mBAKE,UAAA,MAAA,WAJY,QAAA,SAAL,MAAC;yBADV,YAKE,MAAA,cAAA,EAAA;MAHC,KAAK,IAAC;MACN,OAAO,IAAC;MACR,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA"}

package/dist/components/kbd/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","names":[],"sources":["../../../src/components/kbd/Kbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { kbdVariants, type KbdVariants } from \"@auronui/styles\";\nimport { composeClassName } from \"../../utils/composeClassName\";\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: KbdVariants[\"variant\"];\n    class?: string;\n  }>(),\n  {\n    variant: \"default\",\n  }\n);\n\nconst slotFns = computed(() => kbdVariants({ variant: props.variant }));\n</script>\n\n<template>\n  <kbd :class=\"composeClassName(slotFns.base(), props.class)\">\n    <abbr\n      v-if=\"$slots.abbr\"\n      :class=\"slotFns.abbr()\"\n    >\n      <slot name=\"abbr\" />\n    </abbr>\n    <span :class=\"slotFns.content()\">\n      <slot />\n    </span>\n  </kbd>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Kbd.js","names":[],"sources":["../../../src/components/kbd/Kbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { kbdVariants, type KbdVariants } from \"@auronui/styles\";\nimport { composeClassName , type ClassValue} from \"../../utils/composeClassName\";\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: KbdVariants[\"variant\"];\n    class?: ClassValue;\n    /** Override classes on individual slots */\n    classNames?: Partial<{\n      base: ClassValue;\n      abbr: ClassValue;\n      content: ClassValue;\n    }>;\n  }>(),\n  {\n    variant: \"default\",\n  }\n);\n\nconst slotFns = computed(() => kbdVariants({ variant: props.variant }));\n</script>\n\n<template>\n  <kbd :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <abbr\n      v-if=\"$slots.abbr\"\n      :class=\"composeClassName(slotFns.abbr(), props.classNames?.abbr)\"\n    >\n      <slot name=\"abbr\" />\n    </abbr>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </kbd>\n</template>\n"],"mappings":""}

package/dist/components/kbd/Kbd.vue_vue_type_script_setup_true_lang.js

@@ -6,16 +6,23 @@ var Kbd_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
 	__name: "Kbd",
 	props: {
 		variant: { default: "default" },
-		class: {}
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const slotFns = computed(() => kbdVariants({ variant: props.variant }));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("kbd", { class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)) }, [_ctx.$slots.abbr ? (openBlock(), createElementBlock("abbr", {
+			return openBlock(), createElementBlock("kbd", { class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)) }, [_ctx.$slots.abbr ? (openBlock(), createElementBlock("abbr", {
 				key: 0,
-				class: normalizeClass(slotFns.value.abbr())
-			}, [renderSlot(_ctx.$slots, "abbr")], 2)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(slotFns.value.content()) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
+				class: normalizeClass(unref(composeClassName)(slotFns.value.abbr(), props.classNames?.abbr))
+			}, [renderSlot(_ctx.$slots, "abbr")], 2)) : createCommentVNode("", true), createElementVNode("span", { class: normalizeClass(unref(composeClassName)(slotFns.value.content(), props.classNames?.content)) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
 		};
 	}
 });

package/dist/components/kbd/Kbd.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/kbd/Kbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { kbdVariants, type KbdVariants } from \"@auronui/styles\";\nimport { composeClassName } from \"../../utils/composeClassName\";\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: KbdVariants[\"variant\"];\n    class?: string;\n  }>(),\n  {\n    variant: \"default\",\n  }\n);\n\nconst slotFns = computed(() => kbdVariants({ variant: props.variant }));\n</script>\n\n<template>\n  <kbd :class=\"composeClassName(slotFns.base(), props.class)\">\n    <abbr\n      v-if=\"$slots.abbr\"\n      :class=\"slotFns.abbr()\"\n    >\n      <slot name=\"abbr\" />\n    </abbr>\n    <span :class=\"slotFns.content()\">\n      <slot />\n    </span>\n  </kbd>\n</template>\n"],"mappings":";;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,UAAU,eAAe,YAAY,EAAE,SAAS,MAAM,SAAS,CAAC,CAAC;;uBAIrE,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA,EAAA,EAAA,CAE/CA,KAAAA,OAAO,QAAA,WAAA,EADf,mBAKO,QAAA;;IAHJ,OAAK,eAAE,QAAA,MAAQ,MAAI,CAAA;OAEpB,WAAoB,KAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEtB,mBAEO,QAAA,EAFA,OAAK,eAAE,QAAA,MAAQ,SAAO,CAAA,EAAA,EAAA,CAC3B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"Kbd.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/kbd/Kbd.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { kbdVariants, type KbdVariants } from \"@auronui/styles\";\nimport { composeClassName , type ClassValue} from \"../../utils/composeClassName\";\n\nconst props = withDefaults(\n  defineProps<{\n    variant?: KbdVariants[\"variant\"];\n    class?: ClassValue;\n    /** Override classes on individual slots */\n    classNames?: Partial<{\n      base: ClassValue;\n      abbr: ClassValue;\n      content: ClassValue;\n    }>;\n  }>(),\n  {\n    variant: \"default\",\n  }\n);\n\nconst slotFns = computed(() => kbdVariants({ variant: props.variant }));\n</script>\n\n<template>\n  <kbd :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\">\n    <abbr\n      v-if=\"$slots.abbr\"\n      :class=\"composeClassName(slotFns.abbr(), props.classNames?.abbr)\"\n    >\n      <slot name=\"abbr\" />\n    </abbr>\n    <span :class=\"composeClassName(slotFns.content(), props.classNames?.content)\">\n      <slot />\n    </span>\n  </kbd>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAgBd,MAAM,UAAU,eAAe,YAAY,EAAE,SAAS,MAAM,SAAS,CAAC,CAAC;;uBAIrE,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA,EAAA,EAAA,CAEvEA,KAAAA,OAAO,QAAA,WAAA,EADf,mBAKO,QAAA;;IAHJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,YAAY,KAAI,CAAA;OAE/D,WAAoB,KAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEtB,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,EAAA,EAAA"}