@auronui/vue 1.0.14 → 1.0.15

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } 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  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. 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. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\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. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\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 textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\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 isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\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        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\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 textarea\"\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      </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":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } 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  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. 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. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\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. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class overrides. Each key accepts classes merged via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    input: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: 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 textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\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 isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\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        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\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 textarea\"\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      </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/textarea/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -77,7 +77,8 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			type: Boolean,
 			default: false
 		},
-		class: {}
+		class: {},
+		classNames: {}
 	}, {
 		"modelValue": { default: "" },
 		"modelModifiers": {}
@@ -129,7 +130,7 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		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,
@@ -139,19 +140,19 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			}, [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("textarea", mergeProps(inputAttrs.value, {
 					id: inputId.value,
@@ -166,17 +167,17 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 					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), [[vModelText, 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 textarea",
 					onClick: handleClear
 				}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
@@ -209,15 +210,15 @@ var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				], -1)])], 2)) : 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_8)) : 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_9)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
 		};
 	}

package/dist/components/textarea/Textarea.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } 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  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. 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. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\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. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\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 textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\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 isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\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        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\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 textarea\"\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      </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":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } 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  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. 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. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\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. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: ClassValue\n  /** Per-slot class overrides. Each key accepts classes merged via `composeClassName`. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    input: ClassValue\n    endContent: ClassValue\n    clearButton: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: 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 textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\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 isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\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        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\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 textarea\"\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      </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":"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"}

package/dist/components/time-field/TimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } 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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @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. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: string\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\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 fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\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      :id=\"labelId\"\n      :for=\"fieldId\"\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      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"slotFns.label()\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"slotFns.startContent()\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"slotFns.segmentList()\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"slotFns.segment()\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"slotFns.endContent()\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\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          role=\"alert\"\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":"TimeField.js","names":[],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } 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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @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. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\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 fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\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      :id=\"labelId\"\n      :for=\"fieldId\"\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      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\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          role=\"alert\"\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/time-field/TimeField.vue_vue_type_script_setup_true_lang.js

@@ -55,6 +55,7 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		description: {},
 		errorMessage: {},
 		class: {},
+		classNames: {},
 		defaultValue: {},
 		placeholderValue: {},
 		minValue: {},
@@ -197,7 +198,7 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		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,
@@ -208,8 +209,8 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				key: 0,
 				id: labelId.value,
 				for: fieldId.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()) }, [createVNode(unref(TimeFieldRoot), {
+				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)) }, [createVNode(unref(TimeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -230,7 +231,7 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"aria-describedby": ariaDescribedBy.value,
 				"aria-required": __props.isRequired || void 0,
 				"aria-invalid": __props.isInvalid || void 0,
-				class: normalizeClass(slotFns.value.inputWrapper()),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
 				"data-focused": isFocused.value || void 0,
 				"data-invalid": __props.isInvalid || void 0,
@@ -243,21 +244,21 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						key: 0,
 						id: labelId.value,
 						for: fieldId.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_5, " *")) : createCommentVNode("", true)], 10, _hoisted_4)) : 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)),
 						"data-slot": "start-content"
 					}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
 					createElementVNode("div", {
-						class: normalizeClass(slotFns.value.segmentList()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
 						"data-slot": "segment-list"
 					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(segments, (segment, _i) => {
 						return openBlock(), createBlock(unref(TimeFieldInput), {
 							key: _i,
 							part: segment.part,
-							class: normalizeClass(slotFns.value.segment())
+							class: normalizeClass(unref(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
 						}, {
 							default: withCtx(() => [createTextVNode(toDisplayString(segment.value), 1)]),
 							_: 2
@@ -265,7 +266,7 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 					}), 128))], 2),
 					_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", {
 						key: 2,
-						class: normalizeClass(slotFns.value.endContent()),
+						class: normalizeClass(unref(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
 						"data-slot": "end-content"
 					}, [renderSlot(_ctx.$slots, "endContent")], 2)) : createCommentVNode("", true)
 				]),
@@ -296,16 +297,16 @@ var TimeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				"data-readonly"
 			]), 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)),
 				role: "alert"
 			}, toDisplayString(__props.errorMessage), 11, _hoisted_6)) : 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_7)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
 		};
 	}

package/dist/components/time-field/TimeField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } 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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @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. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: string\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\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 fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\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      :id=\"labelId\"\n      :for=\"fieldId\"\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      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"slotFns.label()\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"slotFns.startContent()\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"slotFns.segmentList()\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"slotFns.segment()\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"slotFns.endContent()\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\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          role=\"alert\"\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":"TimeField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/time-field/TimeField.vue"],"sourcesContent":["<!--\n  TimeField — form-field mirror of Input.vue for @internationalized/date Time values.\n\n  Anatomy, data-attributes, floating-label behavior, start/end content\n  slots, and a11y wiring all mirror Input.vue / DateInput.vue. See the\n  Input.vue docblock for the canonical contract.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeFieldRoot, TimeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeFieldVariants, type TimeFieldVariants } 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  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeValue | null | undefined>()\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @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. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeField-specific ──────────────────────────────────────── */\n  defaultValue?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  locale?: string\n  name?: string\n  hideTimeZone?: boolean\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst fieldId = computed(() => (attrs.id as string | undefined) ?? `${generatedId}-field`)\nconst labelId = computed(() => `${generatedId}-label`)\nconst descriptionId = computed(() => `${generatedId}-description`)\nconst errorMessageId = computed(() => `${generatedId}-error`)\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null)\n\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 fieldRef = ref<HTMLElement | null>(null)\n// Reka components expose their root DOM node via $el — unwrap before using DOM APIs.\nconst fieldEl = computed<HTMLElement | null>(() => {\n  const r = fieldRef.value as unknown as { $el?: HTMLElement } | HTMLElement | null\n  if (!r) return null\n  if (r instanceof HTMLElement) return r\n  return r.$el ?? null\n})\n\n// `isFocused` tracks focus on a TIME SEGMENT specifically — not any descendant.\n// This prevents nested interactive children (e.g. a TimePickerTrigger button in\n// endContent) from flipping the field into the focused visual state.\nconst isFocused = ref(false)\nfunction updateSegmentFocus() {\n  const root = fieldEl.value\n  if (!root) { isFocused.value = false; return }\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  isFocused.value = !!active\n    && root.contains(active)\n    && active.hasAttribute('data-reka-time-field-segment')\n}\nfunction onDocFocusIn() { updateSegmentFocus() }\nfunction onDocFocusOut() { queueMicrotask(updateSegmentFocus) }\n\n// Guard against a focus snap-back after an outside click. When the user\n// clicks outside the field, we mark a short-lived \"suppress segment focus\"\n// window. Any focusin landing on a segment inside that window gets blurred\n// immediately — kills the two-click-to-blur UX regardless of which internal\n// mechanism (Reka VisuallyHidden, label-for, contenteditable selection\n// restoration) tried to restore the focus.\nlet suppressSegmentFocusUntil = 0\nfunction onDocPointerDown(e: PointerEvent) {\n  const root = fieldEl.value\n  if (!root) return\n  const target = e.target as Node | null\n  if (!target || root.contains(target)) return\n  suppressSegmentFocusUntil = performance.now() + 250\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    active.blur()\n  }\n}\nfunction onDocFocusInGuard(e: FocusEvent) {\n  if (performance.now() >= suppressSegmentFocusUntil) return\n  const root = fieldEl.value\n  if (!root) return\n  const t = e.target as HTMLElement | null\n  if (t && root.contains(t) && t.hasAttribute?.('data-reka-time-field-segment')) {\n    t.blur()\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('focusin', onDocFocusIn)\n  document.addEventListener('focusout', onDocFocusOut)\n  document.addEventListener('pointerdown', onDocPointerDown, true)\n  document.addEventListener('focusin', onDocFocusInGuard, true)\n})\nonBeforeUnmount(() => {\n  document.removeEventListener('focusin', onDocFocusIn)\n  document.removeEventListener('focusout', onDocFocusOut)\n  document.removeEventListener('pointerdown', onDocPointerDown, true)\n  document.removeEventListener('focusin', onDocFocusInGuard, true)\n})\n\n// Track data-filled synchronously from the rendered segments — defaultValue +\n// isFilled from modelValue misses the uncontrolled case and the partially-typed\n// case. After each value/segment render, sniff any non-literal segment that\n// carries data-placeholder=\"false\".\nconst segmentsFilled = ref(false)\nfunction recomputeFilled() {\n  const root = fieldEl.value\n  if (!root || typeof root.querySelectorAll !== 'function') {\n    segmentsFilled.value = false\n    return\n  }\n  const segs = root.querySelectorAll('[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])')\n  let anyFilled = false\n  segs.forEach((el) => {\n    if ((el as HTMLElement).dataset.placeholder === 'false') anyFilled = true\n  })\n  segmentsFilled.value = anyFilled\n}\nwatch([modelValue, () => props.defaultValue, () => props.granularity, () => props.hourCycle], () => {\n  queueMicrotask(recomputeFilled)\n}, { immediate: true })\n\nconst effectiveFilled = computed(() => isFilled.value || segmentsFilled.value)\n\n// Only intervene on the INITIAL click that enters the field. Once a segment\n// already holds focus, leave subsequent mousedowns alone so the user can\n// blur naturally (clicking elsewhere) without focus snapping back to a\n// segment and requiring a second click.\nfunction handleFieldMousedown(e: MouseEvent) {\n  const target = e.target as HTMLElement | null\n  if (!target) return\n  if (target.closest('[data-reka-time-field-segment]')) return\n  if (target.closest('[data-slot=\"start-content\"]')) return\n  if (target.closest('[data-slot=\"end-content\"]')) return\n  if (target.closest('button, [role=\"button\"]')) return\n  const root = fieldEl.value\n  if (!root) return\n  const active = (root.ownerDocument ?? document).activeElement as HTMLElement | null\n  if (active && root.contains(active) && active.hasAttribute('data-reka-time-field-segment')) {\n    return\n  }\n  const first = root.querySelector<HTMLElement>(\n    '[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])',\n  )\n  if (first) {\n    e.preventDefault()\n    first.focus()\n  }\n}\n\nconst slotFns = computed(() =>\n  timeFieldVariants({\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      :id=\"labelId\"\n      :for=\"fieldId\"\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      <TimeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments\"\n              :key=\"_i\"\n            >\n              <TimeFieldInput\n                :part=\"segment.part\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeFieldRoot>\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          role=\"alert\"\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":"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"}

package/dist/components/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, provide } from 'vue'\nimport { TreeRoot } from 'reka-ui'\nimport { treeVariants, type TreeVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  items?: T[]\n  modelValue?: T | T[]\n  defaultValue?: T | T[]\n  expanded?: string[]\n  defaultExpanded?: string[]\n  getKey: (item: T) => string\n  getChildren?: (item: T) => T[] | undefined\n  multiple?: boolean\n  selectionBehavior?: 'toggle' | 'replace'\n  propagateSelect?: boolean\n  size?: TreeVariants['size']\n  class?: string\n}>(), {\n  items: () => [],\n  modelValue: undefined,\n  defaultValue: undefined,\n  expanded: undefined,\n  defaultExpanded: () => [],\n  getChildren: (item: T) => item.children as T[] | undefined,\n  multiple: false,\n  selectionBehavior: 'toggle',\n  propagateSelect: false,\n  size: 'md',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: T | T[]]\n  'update:expanded': [value: string[]]\n}>()\n\nconst slotFns = computed(() => treeVariants({ size: props.size }))\n\nprovide(treeContextKey, {\n  size: computed(() => props.size ?? 'md'),\n  getChildren: (item: unknown) => props.getChildren?.(item as T),\n})\n</script>\n\n<template>\n  <TreeRoot\n    :items=\"items\"\n    :get-key=\"getKey\"\n    :get-children=\"getChildren\"\n    :model-value=\"(modelValue as any)\"\n    :default-value=\"(defaultValue as any)\"\n    :expanded=\"expanded\"\n    :default-expanded=\"defaultExpanded\"\n    :multiple=\"multiple\"\n    :selection-behavior=\"selectionBehavior\"\n    :propagate-select=\"propagateSelect\"\n    :class=\"composeClassName(slotFns.root(), props.class)\"\n    data-slot=\"tree\"\n    @update:model-value=\"(v: any) => emit('update:modelValue', v)\"\n    @update:expanded=\"(v: string[]) => emit('update:expanded', v)\"\n  >\n    <template #default=\"slotProps\">\n      <slot v-bind=\"slotProps\" />\n    </template>\n  </TreeRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Tree.js","names":[],"sources":["../../../src/components/tree/Tree.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, provide } from 'vue'\nimport { TreeRoot } from 'reka-ui'\nimport { treeVariants, type TreeVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  items?: T[]\n  modelValue?: T | T[]\n  defaultValue?: T | T[]\n  expanded?: string[]\n  defaultExpanded?: string[]\n  getKey: (item: T) => string\n  getChildren?: (item: T) => T[] | undefined\n  multiple?: boolean\n  selectionBehavior?: 'toggle' | 'replace'\n  propagateSelect?: boolean\n  size?: TreeVariants['size']\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    root: ClassValue\n  }>\n}>(), {\n  items: () => [],\n  modelValue: undefined,\n  defaultValue: undefined,\n  expanded: undefined,\n  defaultExpanded: () => [],\n  getChildren: (item: T) => item.children as T[] | undefined,\n  multiple: false,\n  selectionBehavior: 'toggle',\n  propagateSelect: false,\n  size: 'md',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: T | T[]]\n  'update:expanded': [value: string[]]\n}>()\n\nconst slotFns = computed(() => treeVariants({ size: props.size }))\n\nprovide(treeContextKey, {\n  size: computed(() => props.size ?? 'md'),\n  getChildren: (item: unknown) => props.getChildren?.(item as T),\n})\n</script>\n\n<template>\n  <TreeRoot\n    :items=\"items\"\n    :get-key=\"getKey\"\n    :get-children=\"getChildren\"\n    :model-value=\"(modelValue as any)\"\n    :default-value=\"(defaultValue as any)\"\n    :expanded=\"expanded\"\n    :default-expanded=\"defaultExpanded\"\n    :multiple=\"multiple\"\n    :selection-behavior=\"selectionBehavior\"\n    :propagate-select=\"propagateSelect\"\n    :class=\"composeClassName(slotFns.root(), props.class, props.classNames?.root)\"\n    data-slot=\"tree\"\n    @update:model-value=\"(v: any) => emit('update:modelValue', v)\"\n    @update:expanded=\"(v: string[]) => emit('update:expanded', v)\"\n  >\n    <template #default=\"slotProps\">\n      <slot v-bind=\"slotProps\" />\n    </template>\n  </TreeRoot>\n</template>\n"],"mappings":""}

package/dist/components/tree/Tree.vue_vue_type_script_setup_true_lang.js

@@ -27,7 +27,8 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			default: false
 		},
 		size: { default: "md" },
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: {}
 	},
 	emits: ["update:modelValue", "update:expanded"],
 	setup(__props, { emit: __emit }) {
@@ -50,7 +51,7 @@ var Tree_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				multiple: __props.multiple,
 				"selection-behavior": __props.selectionBehavior,
 				"propagate-select": __props.propagateSelect,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.root(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.root(), props.class, props.classNames?.root)),
 				"data-slot": "tree",
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", v)),
 				"onUpdate:expanded": _cache[1] || (_cache[1] = (v) => emit("update:expanded", v))

package/dist/components/tree/Tree.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tree/Tree.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, provide } from 'vue'\nimport { TreeRoot } from 'reka-ui'\nimport { treeVariants, type TreeVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  items?: T[]\n  modelValue?: T | T[]\n  defaultValue?: T | T[]\n  expanded?: string[]\n  defaultExpanded?: string[]\n  getKey: (item: T) => string\n  getChildren?: (item: T) => T[] | undefined\n  multiple?: boolean\n  selectionBehavior?: 'toggle' | 'replace'\n  propagateSelect?: boolean\n  size?: TreeVariants['size']\n  class?: string\n}>(), {\n  items: () => [],\n  modelValue: undefined,\n  defaultValue: undefined,\n  expanded: undefined,\n  defaultExpanded: () => [],\n  getChildren: (item: T) => item.children as T[] | undefined,\n  multiple: false,\n  selectionBehavior: 'toggle',\n  propagateSelect: false,\n  size: 'md',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: T | T[]]\n  'update:expanded': [value: string[]]\n}>()\n\nconst slotFns = computed(() => treeVariants({ size: props.size }))\n\nprovide(treeContextKey, {\n  size: computed(() => props.size ?? 'md'),\n  getChildren: (item: unknown) => props.getChildren?.(item as T),\n})\n</script>\n\n<template>\n  <TreeRoot\n    :items=\"items\"\n    :get-key=\"getKey\"\n    :get-children=\"getChildren\"\n    :model-value=\"(modelValue as any)\"\n    :default-value=\"(defaultValue as any)\"\n    :expanded=\"expanded\"\n    :default-expanded=\"defaultExpanded\"\n    :multiple=\"multiple\"\n    :selection-behavior=\"selectionBehavior\"\n    :propagate-select=\"propagateSelect\"\n    :class=\"composeClassName(slotFns.root(), props.class)\"\n    data-slot=\"tree\"\n    @update:model-value=\"(v: any) => emit('update:modelValue', v)\"\n    @update:expanded=\"(v: string[]) => emit('update:expanded', v)\"\n  >\n    <template #default=\"slotProps\">\n      <slot v-bind=\"slotProps\" />\n    </template>\n  </TreeRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAKb,MAAM,UAAU,eAAe,aAAa,EAAE,MAAM,MAAM,MAAM,CAAC,CAAA;AAEjE,UAAQ,gBAAgB;GACtB,MAAM,eAAe,MAAM,QAAQ,KAAK;GACxC,cAAc,SAAkB,MAAM,cAAc,KAAU;GAC/D,CAAA;;uBAIC,YAmBW,MAAA,SAAA,EAAA;IAlBR,OAAO,QAAA;IACP,WAAS,QAAA;IACT,gBAAc,QAAA;IACd,eAAc,QAAA;IACd,iBAAgB,QAAA;IAChB,UAAU,QAAA;IACV,oBAAkB,QAAA;IAClB,UAAU,QAAA;IACV,sBAAoB,QAAA;IACpB,oBAAkB,QAAA;IAClB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACpD,aAAU;IACT,uBAAkB,OAAA,OAAA,OAAA,MAAG,MAAW,KAAI,qBAAsB,EAAC;IAC3D,qBAAe,OAAA,OAAA,OAAA,MAAG,MAAgB,KAAI,mBAAoB,EAAC;;IAEjD,SAAO,SAAE,cAAS,CAC3B,WAA2B,KAAA,QAAA,WAAA,eAAA,mBAAb,UAAS,CAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"Tree.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/tree/Tree.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, provide } from 'vue'\nimport { TreeRoot } from 'reka-ui'\nimport { treeVariants, type TreeVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  items?: T[]\n  modelValue?: T | T[]\n  defaultValue?: T | T[]\n  expanded?: string[]\n  defaultExpanded?: string[]\n  getKey: (item: T) => string\n  getChildren?: (item: T) => T[] | undefined\n  multiple?: boolean\n  selectionBehavior?: 'toggle' | 'replace'\n  propagateSelect?: boolean\n  size?: TreeVariants['size']\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    root: ClassValue\n  }>\n}>(), {\n  items: () => [],\n  modelValue: undefined,\n  defaultValue: undefined,\n  expanded: undefined,\n  defaultExpanded: () => [],\n  getChildren: (item: T) => item.children as T[] | undefined,\n  multiple: false,\n  selectionBehavior: 'toggle',\n  propagateSelect: false,\n  size: 'md',\n  class: undefined,\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: T | T[]]\n  'update:expanded': [value: string[]]\n}>()\n\nconst slotFns = computed(() => treeVariants({ size: props.size }))\n\nprovide(treeContextKey, {\n  size: computed(() => props.size ?? 'md'),\n  getChildren: (item: unknown) => props.getChildren?.(item as T),\n})\n</script>\n\n<template>\n  <TreeRoot\n    :items=\"items\"\n    :get-key=\"getKey\"\n    :get-children=\"getChildren\"\n    :model-value=\"(modelValue as any)\"\n    :default-value=\"(defaultValue as any)\"\n    :expanded=\"expanded\"\n    :default-expanded=\"defaultExpanded\"\n    :multiple=\"multiple\"\n    :selection-behavior=\"selectionBehavior\"\n    :propagate-select=\"propagateSelect\"\n    :class=\"composeClassName(slotFns.root(), props.class, props.classNames?.root)\"\n    data-slot=\"tree\"\n    @update:model-value=\"(v: any) => emit('update:modelValue', v)\"\n    @update:expanded=\"(v: string[]) => emit('update:expanded', v)\"\n  >\n    <template #default=\"slotProps\">\n      <slot v-bind=\"slotProps\" />\n    </template>\n  </TreeRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EA+Bd,MAAM,OAAO;EAKb,MAAM,UAAU,eAAe,aAAa,EAAE,MAAM,MAAM,MAAM,CAAC,CAAA;AAEjE,UAAQ,gBAAgB;GACtB,MAAM,eAAe,MAAM,QAAQ,KAAK;GACxC,cAAc,SAAkB,MAAM,cAAc,KAAU;GAC/D,CAAA;;uBAIC,YAmBW,MAAA,SAAA,EAAA;IAlBR,OAAO,QAAA;IACP,WAAS,QAAA;IACT,gBAAc,QAAA;IACd,eAAc,QAAA;IACd,iBAAgB,QAAA;IAChB,UAAU,QAAA;IACV,oBAAkB,QAAA;IAClB,UAAU,QAAA;IACV,sBAAoB,QAAA;IACpB,oBAAkB,QAAA;IAClB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC5E,aAAU;IACT,uBAAkB,OAAA,OAAA,OAAA,MAAG,MAAW,KAAI,qBAAsB,EAAC;IAC3D,qBAAe,OAAA,OAAA,OAAA,MAAG,MAAgB,KAAI,mBAAoB,EAAC;;IAEjD,SAAO,SAAE,cAAS,CAC3B,WAA2B,KAAA,QAAA,WAAA,eAAA,mBAAb,UAAS,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/tree/TreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, inject } from 'vue'\nimport { TreeItem } from 'reka-ui'\nimport { treeVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  value: T\n  level: number\n  class?: string\n}>(), {\n  class: undefined,\n})\n\ndefineEmits<{\n  select: []\n  toggle: []\n}>()\n\nconst ctx = inject(treeContextKey, null)\nconst slotFns = computed(() => treeVariants({ size: ctx?.size.value }))\nconst hasChildren = computed(() => {\n  const children = ctx?.getChildren(props.value)\n  return Array.isArray(children) ? children.length > 0 : !!children\n})\n\nconst indentStyle = computed(() => ({\n  '--tree-indent': props.level - 1,\n}))\n</script>\n\n<template>\n  <TreeItem\n    :value=\"value\"\n    :level=\"level\"\n    :class=\"composeClassName(slotFns.item(), props.class)\"\n    data-slot=\"tree-item\"\n    @select=\"$emit('select')\"\n    @toggle=\"$emit('toggle')\"\n  >\n    <template #default=\"s: any\">\n      <div\n        :class=\"slotFns.itemContent()\"\n        :style=\"indentStyle\"\n        :data-selected=\"s.isSelected ? '' : undefined\"\n        :data-expanded=\"s.isExpanded ? '' : undefined\"\n      >\n        <slot\n          :is-expanded=\"s.isExpanded\"\n          :is-selected=\"s.isSelected\"\n          :is-indeterminate=\"s.isIndeterminate\"\n          :has-children=\"hasChildren\"\n          :handle-select=\"s.handleSelect\"\n          :handle-toggle=\"s.handleToggle\"\n          :toggle-class=\"slotFns.itemToggle()\"\n          :icon-class=\"slotFns.itemIcon()\"\n        />\n      </div>\n    </template>\n  </TreeItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"TreeItem.js","names":[],"sources":["../../../src/components/tree/TreeItem.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, inject } from 'vue'\nimport { TreeItem } from 'reka-ui'\nimport { treeVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  value: T\n  level: number\n  class?: ClassValue\n  /** Additional class names to apply to individual slots. */\n  classNames?: Partial<{\n    item: ClassValue\n    itemContent: ClassValue\n  }>\n}>(), {\n  class: undefined,\n  classNames: undefined,\n})\n\ndefineEmits<{\n  select: []\n  toggle: []\n}>()\n\nconst ctx = inject(treeContextKey, null)\nconst slotFns = computed(() => treeVariants({ size: ctx?.size.value }))\nconst hasChildren = computed(() => {\n  const children = ctx?.getChildren(props.value)\n  return Array.isArray(children) ? children.length > 0 : !!children\n})\n\nconst indentStyle = computed(() => ({\n  '--tree-indent': props.level - 1,\n}))\n</script>\n\n<template>\n  <TreeItem\n    :value=\"value\"\n    :level=\"level\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n    data-slot=\"tree-item\"\n    @select=\"$emit('select')\"\n    @toggle=\"$emit('toggle')\"\n  >\n    <template #default=\"s: any\">\n      <div\n        :class=\"composeClassName(slotFns.itemContent(), props.classNames?.itemContent)\"\n        :style=\"indentStyle\"\n        :data-selected=\"s.isSelected ? '' : undefined\"\n        :data-expanded=\"s.isExpanded ? '' : undefined\"\n      >\n        <slot\n          :is-expanded=\"s.isExpanded\"\n          :is-selected=\"s.isSelected\"\n          :is-indeterminate=\"s.isIndeterminate\"\n          :has-children=\"hasChildren\"\n          :handle-select=\"s.handleSelect\"\n          :handle-toggle=\"s.handleToggle\"\n          :toggle-class=\"slotFns.itemToggle()\"\n          :icon-class=\"slotFns.itemIcon()\"\n        />\n      </div>\n    </template>\n  </TreeItem>\n</template>\n"],"mappings":""}

package/dist/components/tree/TreeItem.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,8 @@ var TreeItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	props: {
 		value: {},
 		level: {},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		classNames: { default: void 0 }
 	},
 	emits: ["select", "toggle"],
 	setup(__props) {
@@ -26,13 +27,13 @@ var TreeItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 			return openBlock(), createBlock(unref(TreeItem), {
 				value: __props.value,
 				level: __props.level,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class)),
+				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
 				"data-slot": "tree-item",
 				onSelect: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("select")),
 				onToggle: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("toggle"))
 			}, {
 				default: withCtx((s) => [createElementVNode("div", {
-					class: normalizeClass(slotFns.value.itemContent()),
+					class: normalizeClass(unref(composeClassName)(slotFns.value.itemContent(), props.classNames?.itemContent)),
 					style: normalizeStyle(indentStyle.value),
 					"data-selected": s.isSelected ? "" : void 0,
 					"data-expanded": s.isExpanded ? "" : void 0

package/dist/components/tree/TreeItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/tree/TreeItem.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, inject } from 'vue'\nimport { TreeItem } from 'reka-ui'\nimport { treeVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  value: T\n  level: number\n  class?: string\n}>(), {\n  class: undefined,\n})\n\ndefineEmits<{\n  select: []\n  toggle: []\n}>()\n\nconst ctx = inject(treeContextKey, null)\nconst slotFns = computed(() => treeVariants({ size: ctx?.size.value }))\nconst hasChildren = computed(() => {\n  const children = ctx?.getChildren(props.value)\n  return Array.isArray(children) ? children.length > 0 : !!children\n})\n\nconst indentStyle = computed(() => ({\n  '--tree-indent': props.level - 1,\n}))\n</script>\n\n<template>\n  <TreeItem\n    :value=\"value\"\n    :level=\"level\"\n    :class=\"composeClassName(slotFns.item(), props.class)\"\n    data-slot=\"tree-item\"\n    @select=\"$emit('select')\"\n    @toggle=\"$emit('toggle')\"\n  >\n    <template #default=\"s: any\">\n      <div\n        :class=\"slotFns.itemContent()\"\n        :style=\"indentStyle\"\n        :data-selected=\"s.isSelected ? '' : undefined\"\n        :data-expanded=\"s.isExpanded ? '' : undefined\"\n      >\n        <slot\n          :is-expanded=\"s.isExpanded\"\n          :is-selected=\"s.isSelected\"\n          :is-indeterminate=\"s.isIndeterminate\"\n          :has-children=\"hasChildren\"\n          :handle-select=\"s.handleSelect\"\n          :handle-toggle=\"s.handleToggle\"\n          :toggle-class=\"slotFns.itemToggle()\"\n          :icon-class=\"slotFns.itemIcon()\"\n        />\n      </div>\n    </template>\n  </TreeItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAad,MAAM,MAAM,OAAO,gBAAgB,KAAI;EACvC,MAAM,UAAU,eAAe,aAAa,EAAE,MAAM,KAAK,KAAK,OAAO,CAAC,CAAA;EACtE,MAAM,cAAc,eAAe;GACjC,MAAM,WAAW,KAAK,YAAY,MAAM,MAAK;AAC7C,UAAO,MAAM,QAAQ,SAAS,GAAG,SAAS,SAAS,IAAI,CAAC,CAAC;IAC1D;EAED,MAAM,cAAc,gBAAgB,EAClC,iBAAiB,MAAM,QAAQ,GAChC,EAAC;;uBAIA,YA2BW,MAAA,SAAA,EAAA;IA1BR,OAAO,QAAA;IACP,OAAO,QAAA;IACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACpD,aAAU;IACT,UAAM,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;IACb,UAAM,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;IAEH,SAAO,SAAE,MAAM,CACxB,mBAgBM,OAAA;KAfH,OAAK,eAAE,QAAA,MAAQ,aAAW,CAAA;KAC1B,OAAK,eAAE,YAAA,MAAW;KAClB,iBAAe,EAAE,aAAU,KAAQ,KAAA;KACnC,iBAAe,EAAE,aAAU,KAAQ,KAAA;QAEpC,WASE,KAAA,QAAA,WAAA;KARC,YAAa,EAAE;KACf,YAAa,EAAE;KACf,iBAAkB,EAAE;KACpB,aAAc,YAAA;KACd,cAAe,EAAE;KACjB,cAAe,EAAE;KACjB,aAAc,QAAA,MAAQ,YAAU;KAChC,WAAY,QAAA,MAAQ,UAAQ"}
+{"version":3,"file":"TreeItem.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../src/components/tree/TreeItem.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { computed, inject } from 'vue'\nimport { TreeItem } from 'reka-ui'\nimport { treeVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { treeContextKey } from './Tree.context'\n\nconst props = withDefaults(defineProps<{\n  value: T\n  level: number\n  class?: ClassValue\n  /** Additional class names to apply to individual slots. */\n  classNames?: Partial<{\n    item: ClassValue\n    itemContent: ClassValue\n  }>\n}>(), {\n  class: undefined,\n  classNames: undefined,\n})\n\ndefineEmits<{\n  select: []\n  toggle: []\n}>()\n\nconst ctx = inject(treeContextKey, null)\nconst slotFns = computed(() => treeVariants({ size: ctx?.size.value }))\nconst hasChildren = computed(() => {\n  const children = ctx?.getChildren(props.value)\n  return Array.isArray(children) ? children.length > 0 : !!children\n})\n\nconst indentStyle = computed(() => ({\n  '--tree-indent': props.level - 1,\n}))\n</script>\n\n<template>\n  <TreeItem\n    :value=\"value\"\n    :level=\"level\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n    data-slot=\"tree-item\"\n    @select=\"$emit('select')\"\n    @toggle=\"$emit('toggle')\"\n  >\n    <template #default=\"s: any\">\n      <div\n        :class=\"composeClassName(slotFns.itemContent(), props.classNames?.itemContent)\"\n        :style=\"indentStyle\"\n        :data-selected=\"s.isSelected ? '' : undefined\"\n        :data-expanded=\"s.isExpanded ? '' : undefined\"\n      >\n        <slot\n          :is-expanded=\"s.isExpanded\"\n          :is-selected=\"s.isSelected\"\n          :is-indeterminate=\"s.isIndeterminate\"\n          :has-children=\"hasChildren\"\n          :handle-select=\"s.handleSelect\"\n          :handle-toggle=\"s.handleToggle\"\n          :toggle-class=\"slotFns.itemToggle()\"\n          :icon-class=\"slotFns.itemIcon()\"\n        />\n      </div>\n    </template>\n  </TreeItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAmBd,MAAM,MAAM,OAAO,gBAAgB,KAAI;EACvC,MAAM,UAAU,eAAe,aAAa,EAAE,MAAM,KAAK,KAAK,OAAO,CAAC,CAAA;EACtE,MAAM,cAAc,eAAe;GACjC,MAAM,WAAW,KAAK,YAAY,MAAM,MAAK;AAC7C,UAAO,MAAM,QAAQ,SAAS,GAAG,SAAS,SAAS,IAAI,CAAC,CAAC;IAC1D;EAED,MAAM,cAAc,gBAAgB,EAClC,iBAAiB,MAAM,QAAQ,GAChC,EAAC;;uBAIA,YA2BW,MAAA,SAAA,EAAA;IA1BR,OAAO,QAAA;IACP,OAAO,QAAA;IACP,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC5E,aAAU;IACT,UAAM,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;IACb,UAAM,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,SAAA;;IAEH,SAAO,SAAE,MAAM,CACxB,mBAgBM,OAAA;KAfH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;KAC5E,OAAK,eAAE,YAAA,MAAW;KAClB,iBAAe,EAAE,aAAU,KAAQ,KAAA;KACnC,iBAAe,EAAE,aAAU,KAAQ,KAAA;QAEpC,WASE,KAAA,QAAA,WAAA;KARC,YAAa,EAAE;KACf,YAAa,EAAE;KACf,iBAAkB,EAAE;KACpB,aAAc,YAAA;KACd,cAAe,EAAE;KACjB,cAAe,EAAE;KACjB,aAAc,QAAA,MAAQ,YAAU;KAChC,WAAY,QAAA,MAAQ,UAAQ"}