@auronui/vue 1.3.0 → 1.4.0

package/dist/components/dropdown/DropdownSubTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { useDropdownSubInject } from "./DropdownSub.context.js";
 import { createBlock, createElementVNode, defineComponent, normalizeClass, onUnmounted, openBlock, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
 import { menuItemVariants } from "@auronui/styles";
@@ -8,7 +9,7 @@ var DropdownSubTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	props: {
 		isDisabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		textValue: { default: void 0 },
 		class: { default: void 0 },
@@ -24,6 +25,7 @@ var DropdownSubTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 	},
 	setup(__props) {
 		const props = __props;
+		const isDisabled = useDeprecatedBooleanProp("DropdownSubTrigger", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const subCtx = useDropdownSubInject();
 		const slots = menuItemVariants({ variant: "default" });
 		const triggerRef = useTemplateRef("trigger");
@@ -49,7 +51,7 @@ var DropdownSubTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenuSubTrigger), {
 				ref: "trigger",
-				disabled: props.disabled ?? props.isDisabled,
+				disabled: unref(isDisabled),
 				"text-value": props.textValue,
 				as: props.as,
 				"as-child": props.asChild,

package/dist/components/dropdown/DropdownSubTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSubTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/dropdown/DropdownSubTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useTemplateRef, watchEffect, onUnmounted } from 'vue'\nimport { DropdownMenuSubTrigger } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\nimport { useDropdownSubInject } from './DropdownSub.context'\n\nconst props = withDefaults(defineProps<{\n  isDisabled?: boolean\n  textValue?: string\n  class?: string\n  /** Whether this trigger is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  isDisabled: false,\n  textValue: undefined,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst subCtx = useDropdownSubInject()\nconst slots = menuItemVariants({ variant: 'default' })\nconst triggerRef = useTemplateRef<InstanceType<typeof DropdownMenuSubTrigger>>('trigger')\n\nfunction blockHover(e: Event) {\n  e.stopImmediatePropagation()\n}\n\nlet cleanup: (() => void) | null = null\n\nwatchEffect(() => {\n  cleanup?.()\n  cleanup = null\n  if (!subCtx.openOnHover.value) {\n    const el = (triggerRef.value as { $el?: HTMLElement } | null)?.$el ?? triggerRef.value\n    if (el) {\n      (el as HTMLButtonElement).addEventListener('pointermove', blockHover, true)\n      cleanup = () => (el as HTMLButtonElement).removeEventListener('pointermove', blockHover, true)\n    }\n  }\n})\n\nonUnmounted(() => cleanup?.())\n\nfunction handleClick() {\n  if (!subCtx.openOnHover.value) subCtx.setOpen(!subCtx.open.value)\n}\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    ref=\"trigger\"\n    :disabled=\"props.disabled ?? props.isDisabled\"\n    :text-value=\"props.textValue\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @click=\"handleClick\"\n  >\n    <slot />\n    <span\n      :class=\"slots.submenuIndicator()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"submenu-indicator\"\n      >\n        <polyline points=\"9 18 15 12 9 6\" />\n      </svg>\n    </span>\n  </DropdownMenuSubTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAmBd,MAAM,SAAS,sBAAqB;EACpC,MAAM,QAAQ,iBAAiB,EAAE,SAAS,WAAW,CAAA;EACrD,MAAM,aAAa,eAA4D,UAAS;EAExF,SAAS,WAAW,GAAU;AAC5B,KAAE,0BAAyB;;EAG7B,IAAI,UAA+B;AAEnC,oBAAkB;AAChB,cAAU;AACV,aAAU;AACV,OAAI,CAAC,OAAO,YAAY,OAAO;IAC7B,MAAM,KAAM,WAAW,OAAwC,OAAO,WAAW;AACjF,QAAI,IAAI;AACL,QAAyB,iBAAiB,eAAe,YAAY,KAAI;AAC1E,qBAAiB,GAAyB,oBAAoB,eAAe,YAAY,KAAI;;;IAGlG;AAED,oBAAkB,WAAW,CAAA;EAE7B,SAAS,cAAc;AACrB,OAAI,CAAC,OAAO,YAAY,MAAO,QAAO,QAAQ,CAAC,OAAO,KAAK,MAAK;;;uBAKhE,YA6ByB,MAAA,uBAAA,EAAA;IA5BvB,KAAI;IACH,UAAU,MAAM,YAAY,MAAM;IAClC,cAAY,MAAM;IAClB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAA,CAAG,MAAA,MAAK,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IACjC,SAAO;;2BAEA,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,mBAkBO,QAAA;KAjBJ,OAAK,eAAE,MAAA,MAAK,CAAC,kBAAgB,CAAA;KAC9B,eAAY;sCAEZ,mBAaM,OAAA;KAZJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;QAEV,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"DropdownSubTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/dropdown/DropdownSubTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useTemplateRef, watchEffect, onUnmounted } from 'vue'\nimport { DropdownMenuSubTrigger } from 'reka-ui'\nimport { menuItemVariants } from '@auronui/styles'\nimport { useDropdownSubInject } from './DropdownSub.context'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  isDisabled?: boolean\n  textValue?: string\n  class?: string\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  isDisabled: undefined,\n  textValue: undefined,\n  class: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n})\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'DropdownSubTrigger', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst subCtx = useDropdownSubInject()\nconst slots = menuItemVariants({ variant: 'default' })\nconst triggerRef = useTemplateRef<InstanceType<typeof DropdownMenuSubTrigger>>('trigger')\n\nfunction blockHover(e: Event) {\n  e.stopImmediatePropagation()\n}\n\nlet cleanup: (() => void) | null = null\n\nwatchEffect(() => {\n  cleanup?.()\n  cleanup = null\n  if (!subCtx.openOnHover.value) {\n    const el = (triggerRef.value as { $el?: HTMLElement } | null)?.$el ?? triggerRef.value\n    if (el) {\n      (el as HTMLButtonElement).addEventListener('pointermove', blockHover, true)\n      cleanup = () => (el as HTMLButtonElement).removeEventListener('pointermove', blockHover, true)\n    }\n  }\n})\n\nonUnmounted(() => cleanup?.())\n\nfunction handleClick() {\n  if (!subCtx.openOnHover.value) subCtx.setOpen(!subCtx.open.value)\n}\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    ref=\"trigger\"\n    :disabled=\"isDisabled\"\n    :text-value=\"props.textValue\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"[slots.item(), props.class]\"\n    @click=\"handleClick\"\n  >\n    <slot />\n    <span\n      :class=\"slots.submenuIndicator()\"\n      aria-hidden=\"true\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        data-slot=\"submenu-indicator\"\n      >\n        <polyline points=\"9 18 15 12 9 6\" />\n      </svg>\n    </span>\n  </DropdownMenuSubTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAmBd,MAAM,aAAa,yBACjB,sBAAsB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACtF;EAEA,MAAM,SAAS,sBAAqB;EACpC,MAAM,QAAQ,iBAAiB,EAAE,SAAS,WAAW,CAAA;EACrD,MAAM,aAAa,eAA4D,UAAS;EAExF,SAAS,WAAW,GAAU;AAC5B,KAAE,0BAAyB;;EAG7B,IAAI,UAA+B;AAEnC,oBAAkB;AAChB,cAAU;AACV,aAAU;AACV,OAAI,CAAC,OAAO,YAAY,OAAO;IAC7B,MAAM,KAAM,WAAW,OAAwC,OAAO,WAAW;AACjF,QAAI,IAAI;AACL,QAAyB,iBAAiB,eAAe,YAAY,KAAI;AAC1E,qBAAiB,GAAyB,oBAAoB,eAAe,YAAY,KAAI;;;IAGlG;AAED,oBAAkB,WAAW,CAAA;EAE7B,SAAS,cAAc;AACrB,OAAI,CAAC,OAAO,YAAY,MAAO,QAAO,QAAQ,CAAC,OAAO,KAAK,MAAK;;;uBAKhE,YA6ByB,MAAA,uBAAA,EAAA;IA5BvB,KAAI;IACH,UAAU,MAAA,WAAU;IACpB,cAAY,MAAM;IAClB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAA,CAAG,MAAA,MAAK,CAAC,MAAI,EAAI,MAAM,MAAK,CAAA;IACjC,SAAO;;2BAEA,CAAR,WAAQ,KAAA,QAAA,UAAA,EACR,mBAkBO,QAAA;KAjBJ,OAAK,eAAE,MAAA,MAAK,CAAC,kBAAgB,CAAA;KAC9B,eAAY;sCAEZ,mBAaM,OAAA;KAZJ,OAAM;KACN,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,QAAO;KACP,gBAAa;KACb,kBAAe;KACf,mBAAgB;KAChB,aAAU;QAEV,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA"}

package/dist/components/dropdown/DropdownTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownTrigger.js","names":[],"sources":["../../../src/components/dropdown/DropdownTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DropdownMenuTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  /** Whether the trigger is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  disabled: undefined,\n  as: undefined,\n  asChild: true,\n})\n</script>\n\n<template>\n  <DropdownMenuTrigger\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"DropdownTrigger.js","names":[],"sources":["../../../src/components/dropdown/DropdownTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DropdownMenuTrigger } from 'reka-ui'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  /** Whether the trigger is disabled. */\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: true,\n})\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'DropdownTrigger', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n</script>\n\n<template>\n  <DropdownMenuTrigger\n    :disabled=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"],"mappings":""}

package/dist/components/dropdown/DropdownTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,14 @@
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { createBlock, defineComponent, openBlock, renderSlot, unref, withCtx } from "vue";
 import { DropdownMenuTrigger } from "reka-ui";
 //#region src/components/dropdown/DropdownTrigger.vue?vue&type=script&setup=true&lang.ts
 var DropdownTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "DropdownTrigger",
 	props: {
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: void 0
@@ -16,9 +21,10 @@ var DropdownTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 	},
 	setup(__props) {
 		const props = __props;
+		const isDisabled = useDeprecatedBooleanProp("DropdownTrigger", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DropdownMenuTrigger), {
-				disabled: props.disabled,
+				disabled: unref(isDisabled),
 				as: props.as,
 				"as-child": props.asChild
 			}, {

package/dist/components/dropdown/DropdownTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/dropdown/DropdownTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DropdownMenuTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  /** Whether the trigger is disabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  disabled: undefined,\n  as: undefined,\n  asChild: true,\n})\n</script>\n\n<template>\n  <DropdownMenuTrigger\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBAeZ,YAMsB,MAAA,oBAAA,EAAA;IALnB,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,YAAU,MAAM;;2BAET,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"DropdownTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/dropdown/DropdownTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DropdownMenuTrigger } from 'reka-ui'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  /** Whether the trigger is disabled. */\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: true,\n})\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'DropdownTrigger', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n</script>\n\n<template>\n  <DropdownMenuTrigger\n    :disabled=\"isDisabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;EAgBd,MAAM,aAAa,yBACjB,mBAAmB,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SACnF;;uBAIE,YAMsB,MAAA,oBAAA,EAAA;IALnB,UAAU,MAAA,WAAU;IACpB,IAAI,MAAM;IACV,YAAU,MAAM;;2BAET,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/editable/Editable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.js","names":[],"sources":["../../../src/components/editable/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { EditableRoot } from 'reka-ui'\nimport { editableVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: string\n  placeholder?: string | { edit: string; preview: string }\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  readonly?: boolean\n  activationMode?: 'focus' | 'dblclick' | 'none'\n  selectOnFocus?: boolean\n  submitMode?: 'blur' | 'enter' | 'none' | 'both'\n  startWithEditMode?: boolean\n  maxLength?: number\n  autoResize?: boolean\n  id?: string\n  name?: string\n  required?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n}>(), {\n  disabled: false,\n  activationMode: 'focus',\n  selectOnFocus: false,\n  submitMode: 'blur',\n  startWithEditMode: false,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  submit: [value: string | null | undefined]\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}>()\n\nconst modelValue = defineModel<string | null>()\n\nconst slotFns = computed(() => editableVariants())\n</script>\n\n<template>\n  <EditableRoot\n    v-model=\"modelValue\"\n    :default-value=\"defaultValue\"\n    :placeholder=\"placeholder\"\n    :dir=\"dir\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :activation-mode=\"activationMode\"\n    :select-on-focus=\"selectOnFocus\"\n    :submit-mode=\"submitMode\"\n    :start-with-edit-mode=\"startWithEditMode\"\n    :max-length=\"maxLength\"\n    :auto-resize=\"autoResize\"\n    :id=\"id\"\n    :name=\"name\"\n    :required=\"required\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @submit=\"emit('submit', $event)\"\n    @update:state=\"emit('update:state', $event)\"\n  >\n    <slot />\n  </EditableRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Editable.js","names":[],"sources":["../../../src/components/editable/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { EditableRoot } from 'reka-ui'\nimport { editableVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: string\n  placeholder?: string | { edit: string; preview: string }\n  dir?: 'ltr' | 'rtl'\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  activationMode?: 'focus' | 'dblclick' | 'none'\n  selectOnFocus?: boolean\n  submitMode?: 'blur' | 'enter' | 'none' | 'both'\n  startWithEditMode?: boolean\n  maxLength?: number\n  autoResize?: boolean\n  id?: string\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  activationMode: 'focus',\n  selectOnFocus: false,\n  submitMode: 'blur',\n  startWithEditMode: false,\n  autoResize: false,\n  isRequired: undefined,\n  required: undefined,\n})\n\nconst emit = defineEmits<{\n  submit: [value: string | null | undefined]\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}>()\n\nconst modelValue = defineModel<string | null>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Editable', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Editable', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'Editable', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\nconst slotFns = computed(() => editableVariants())\n</script>\n\n<template>\n  <EditableRoot\n    v-model=\"modelValue\"\n    :default-value=\"defaultValue\"\n    :placeholder=\"placeholder\"\n    :dir=\"dir\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :activation-mode=\"activationMode\"\n    :select-on-focus=\"selectOnFocus\"\n    :submit-mode=\"submitMode\"\n    :start-with-edit-mode=\"startWithEditMode\"\n    :max-length=\"maxLength\"\n    :auto-resize=\"autoResize\"\n    :id=\"id\"\n    :name=\"name\"\n    :required=\"isRequired\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @submit=\"emit('submit', $event)\"\n    @update:state=\"emit('update:state', $event)\"\n  >\n    <slot />\n  </EditableRoot>\n</template>\n"],"mappings":""}

package/dist/components/editable/Editable.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,5 @@
 import { composeClassName } from "../../utils/composeClassName.js";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { computed, createBlock, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, unref, useModel, withCtx } from "vue";
 import { editableVariants } from "@auronui/styles";
 import { EditableRoot } from "reka-ui";
@@ -9,11 +10,22 @@ var Editable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		defaultValue: {},
 		placeholder: {},
 		dir: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
+		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
 		},
-		readonly: { type: Boolean },
 		activationMode: { default: "focus" },
 		selectOnFocus: {
 			type: Boolean,
@@ -31,7 +43,14 @@ var Editable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		},
 		id: {},
 		name: {},
-		required: { type: Boolean },
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
 		as: {},
 		asChild: { type: Boolean },
 		class: { type: [
@@ -50,6 +69,9 @@ var Editable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		const props = __props;
 		const emit = __emit;
 		const modelValue = useModel(__props, "modelValue");
+		const isDisabled = useDeprecatedBooleanProp("Editable", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
+		const isReadOnly = useDeprecatedBooleanProp("Editable", "isReadOnly", () => props.isReadOnly, "readonly", () => props.readonly);
+		const isRequired = useDeprecatedBooleanProp("Editable", "isRequired", () => props.isRequired, "required", () => props.required);
 		const slotFns = computed(() => editableVariants());
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(EditableRoot), {
@@ -58,8 +80,8 @@ var Editable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				"default-value": __props.defaultValue,
 				placeholder: __props.placeholder,
 				dir: __props.dir,
-				disabled: __props.disabled,
-				readonly: __props.readonly,
+				disabled: unref(isDisabled),
+				readonly: unref(isReadOnly),
 				"activation-mode": __props.activationMode,
 				"select-on-focus": __props.selectOnFocus,
 				"submit-mode": __props.submitMode,
@@ -68,7 +90,7 @@ var Editable_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 				"auto-resize": __props.autoResize,
 				id: __props.id,
 				name: __props.name,
-				required: __props.required,
+				required: unref(isRequired),
 				as: __props.as,
 				"as-child": __props.asChild,
 				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class)),

package/dist/components/editable/Editable.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/editable/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { EditableRoot } from 'reka-ui'\nimport { editableVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: string\n  placeholder?: string | { edit: string; preview: string }\n  dir?: 'ltr' | 'rtl'\n  disabled?: boolean\n  readonly?: boolean\n  activationMode?: 'focus' | 'dblclick' | 'none'\n  selectOnFocus?: boolean\n  submitMode?: 'blur' | 'enter' | 'none' | 'both'\n  startWithEditMode?: boolean\n  maxLength?: number\n  autoResize?: boolean\n  id?: string\n  name?: string\n  required?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n}>(), {\n  disabled: false,\n  activationMode: 'focus',\n  selectOnFocus: false,\n  submitMode: 'blur',\n  startWithEditMode: false,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  submit: [value: string | null | undefined]\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}>()\n\nconst modelValue = defineModel<string | null>()\n\nconst slotFns = computed(() => editableVariants())\n</script>\n\n<template>\n  <EditableRoot\n    v-model=\"modelValue\"\n    :default-value=\"defaultValue\"\n    :placeholder=\"placeholder\"\n    :dir=\"dir\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :activation-mode=\"activationMode\"\n    :select-on-focus=\"selectOnFocus\"\n    :submit-mode=\"submitMode\"\n    :start-with-edit-mode=\"startWithEditMode\"\n    :max-length=\"maxLength\"\n    :auto-resize=\"autoResize\"\n    :id=\"id\"\n    :name=\"name\"\n    :required=\"required\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @submit=\"emit('submit', $event)\"\n    @update:state=\"emit('update:state', $event)\"\n  >\n    <slot />\n  </EditableRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EA2Bd,MAAM,OAAO;EAKb,MAAM,aAAa,SAA0B,SAAA,aAAC;EAE9C,MAAM,UAAU,eAAe,kBAAkB,CAAA;;uBAI/C,YAuBe,MAAA,aAAA,EAAA;gBAtBJ,WAAA;4EAAU,QAAA;IAClB,iBAAe,QAAA;IACf,aAAa,QAAA;IACb,KAAK,QAAA;IACL,UAAU,QAAA;IACV,UAAU,QAAA;IACV,mBAAiB,QAAA;IACjB,mBAAiB,QAAA;IACjB,eAAa,QAAA;IACb,wBAAsB,QAAA;IACtB,cAAY,QAAA;IACZ,eAAa,QAAA;IACb,IAAI,QAAA;IACJ,MAAM,QAAA;IACN,UAAU,QAAA;IACV,IAAI,QAAA;IACJ,YAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;IAC7B,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAiB,OAAM;;2BAElC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"Editable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/editable/Editable.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { EditableRoot } from 'reka-ui'\nimport { editableVariants } from '@auronui/styles'\nimport { composeClassName, type ClassValue } from '../../utils/composeClassName'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: string\n  placeholder?: string | { edit: string; preview: string }\n  dir?: 'ltr' | 'rtl'\n  isDisabled?: boolean\n  /** @deprecated Use isDisabled instead. */\n  disabled?: boolean\n  isReadOnly?: boolean\n  /** @deprecated Use isReadOnly instead. */\n  readonly?: boolean\n  activationMode?: 'focus' | 'dblclick' | 'none'\n  selectOnFocus?: boolean\n  submitMode?: 'blur' | 'enter' | 'none' | 'both'\n  startWithEditMode?: boolean\n  maxLength?: number\n  autoResize?: boolean\n  id?: string\n  name?: string\n  isRequired?: boolean\n  /** @deprecated Use isRequired instead. */\n  required?: boolean\n  as?: string\n  asChild?: boolean\n  class?: ClassValue\n}>(), {\n  isDisabled: undefined,\n  disabled: undefined,\n  isReadOnly: undefined,\n  readonly: undefined,\n  activationMode: 'focus',\n  selectOnFocus: false,\n  submitMode: 'blur',\n  startWithEditMode: false,\n  autoResize: false,\n  isRequired: undefined,\n  required: undefined,\n})\n\nconst emit = defineEmits<{\n  submit: [value: string | null | undefined]\n  'update:state': [state: 'edit' | 'submit' | 'cancel']\n}>()\n\nconst modelValue = defineModel<string | null>()\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Editable', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst isReadOnly = useDeprecatedBooleanProp(\n  'Editable', 'isReadOnly', () => props.isReadOnly, 'readonly', () => props.readonly,\n)\n\nconst isRequired = useDeprecatedBooleanProp(\n  'Editable', 'isRequired', () => props.isRequired, 'required', () => props.required,\n)\n\nconst slotFns = computed(() => editableVariants())\n</script>\n\n<template>\n  <EditableRoot\n    v-model=\"modelValue\"\n    :default-value=\"defaultValue\"\n    :placeholder=\"placeholder\"\n    :dir=\"dir\"\n    :disabled=\"isDisabled\"\n    :readonly=\"isReadOnly\"\n    :activation-mode=\"activationMode\"\n    :select-on-focus=\"selectOnFocus\"\n    :submit-mode=\"submitMode\"\n    :start-with-edit-mode=\"startWithEditMode\"\n    :max-length=\"maxLength\"\n    :auto-resize=\"autoResize\"\n    :id=\"id\"\n    :name=\"name\"\n    :required=\"isRequired\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    @submit=\"emit('submit', $event)\"\n    @update:state=\"emit('update:state', $event)\"\n  >\n    <slot />\n  </EditableRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAsCd,MAAM,OAAO;EAKb,MAAM,aAAa,SAA0B,SAAA,aAAC;EAE9C,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,UAAU,eAAe,kBAAkB,CAAA;;uBAI/C,YAuBe,MAAA,aAAA,EAAA;gBAtBJ,WAAA;4EAAU,QAAA;IAClB,iBAAe,QAAA;IACf,aAAa,QAAA;IACb,KAAK,QAAA;IACL,UAAU,MAAA,WAAU;IACpB,UAAU,MAAA,WAAU;IACpB,mBAAiB,QAAA;IACjB,mBAAiB,QAAA;IACjB,eAAa,QAAA;IACb,wBAAsB,QAAA;IACtB,cAAY,QAAA;IACZ,eAAa,QAAA;IACb,IAAI,QAAA;IACJ,MAAM,QAAA;IACN,UAAU,MAAA,WAAU;IACpB,IAAI,QAAA;IACJ,YAAU,QAAA;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;IAC7B,kBAAY,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,gBAAiB,OAAM;;2BAElC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/fieldset/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","names":[],"sources":["../../../src/components/fieldset/Fieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { fieldsetVariants } from '@auronui/styles'\n\n/**\n * Fieldset component — semantic HTML grouping for related form controls.\n *\n * Renders a <fieldset> with an optional <legend> for labeling the group.\n * Fieldset is purely structural and does not participate in VeeValidate\n * validation directly (per D-09). Its primary purpose is to group related\n * form controls with correct ARIA semantics for screen readers.\n *\n * Accessibility: <fieldset> + <legend> is the canonical HTML way to associate\n * a group label with its contained controls. Screen readers announce the\n * legend when entering the group.\n *\n * @example\n * <Fieldset legend=\"Personal Information\">\n *   <Input name=\"firstName\" label=\"First Name\" />\n *   <Input name=\"lastName\" label=\"Last Name\" />\n * </Fieldset>\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Text content for the <legend> element; omit to render fieldset without a legend */\n    legend?: string\n    /** When true, disables all form controls inside this fieldset */\n    disabled?: boolean\n    /** Additional CSS classes applied to the <fieldset> element */\n    class?: string\n  }>(),\n  {\n    legend: undefined,\n    disabled: false,\n    class: undefined,\n  }\n)\n\nconst styles = fieldsetVariants()\n\nconst baseClass = computed(() => {\n  const classes = [styles.base()]\n  if (props.class) classes.push(props.class)\n  return classes.join(' ')\n})\n</script>\n\n<template>\n  <fieldset\n    :class=\"baseClass\"\n    :disabled=\"props.disabled || undefined\"\n  >\n    <legend\n      v-if=\"props.legend\"\n      :class=\"styles.legend()\"\n    >\n      {{ props.legend }}\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Fieldset.js","names":[],"sources":["../../../src/components/fieldset/Fieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { fieldsetVariants } from '@auronui/styles'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\n/**\n * Fieldset component — semantic HTML grouping for related form controls.\n *\n * Renders a <fieldset> with an optional <legend> for labeling the group.\n * Fieldset is purely structural and does not participate in VeeValidate\n * validation directly (per D-09). Its primary purpose is to group related\n * form controls with correct ARIA semantics for screen readers.\n *\n * Accessibility: <fieldset> + <legend> is the canonical HTML way to associate\n * a group label with its contained controls. Screen readers announce the\n * legend when entering the group.\n *\n * @example\n * <Fieldset legend=\"Personal Information\">\n *   <Input name=\"firstName\" label=\"First Name\" />\n *   <Input name=\"lastName\" label=\"Last Name\" />\n * </Fieldset>\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Text content for the <legend> element; omit to render fieldset without a legend */\n    legend?: string\n    /** When true, disables all form controls inside this fieldset */\n    isDisabled?: boolean\n    /** @deprecated Use isDisabled instead. */\n    disabled?: boolean\n    /** Additional CSS classes applied to the <fieldset> element */\n    class?: string\n  }>(),\n  {\n    legend: undefined,\n    isDisabled: undefined,\n    disabled: undefined,\n    class: undefined,\n  }\n)\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Fieldset', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst styles = fieldsetVariants()\n\nconst baseClass = computed(() => {\n  const classes = [styles.base()]\n  if (props.class) classes.push(props.class)\n  return classes.join(' ')\n})\n</script>\n\n<template>\n  <fieldset\n    :class=\"baseClass\"\n    :disabled=\"isDisabled || undefined\"\n  >\n    <legend\n      v-if=\"props.legend\"\n      :class=\"styles.legend()\"\n    >\n      {{ props.legend }}\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":""}

package/dist/components/fieldset/Fieldset.vue_vue_type_script_setup_true_lang.js

@@ -1,3 +1,4 @@
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
 import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref } from "vue";
 import { fieldsetVariants } from "@auronui/styles";
 //#region src/components/fieldset/Fieldset.vue?vue&type=script&setup=true&lang.ts
@@ -24,14 +25,19 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 	__name: "Fieldset",
 	props: {
 		legend: { default: void 0 },
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		class: { default: void 0 }
 	},
 	setup(__props) {
 		const props = __props;
+		const isDisabled = useDeprecatedBooleanProp("Fieldset", "isDisabled", () => props.isDisabled, "disabled", () => props.disabled);
 		const styles = fieldsetVariants();
 		const baseClass = computed(() => {
 			const classes = [styles.base()];
@@ -41,7 +47,7 @@ var Fieldset_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("fieldset", {
 				class: normalizeClass(baseClass.value),
-				disabled: props.disabled || void 0
+				disabled: unref(isDisabled) || void 0
 			}, [props.legend ? (openBlock(), createElementBlock("legend", {
 				key: 0,
 				class: normalizeClass(unref(styles).legend())

package/dist/components/fieldset/Fieldset.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/fieldset/Fieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { fieldsetVariants } from '@auronui/styles'\n\n/**\n * Fieldset component — semantic HTML grouping for related form controls.\n *\n * Renders a <fieldset> with an optional <legend> for labeling the group.\n * Fieldset is purely structural and does not participate in VeeValidate\n * validation directly (per D-09). Its primary purpose is to group related\n * form controls with correct ARIA semantics for screen readers.\n *\n * Accessibility: <fieldset> + <legend> is the canonical HTML way to associate\n * a group label with its contained controls. Screen readers announce the\n * legend when entering the group.\n *\n * @example\n * <Fieldset legend=\"Personal Information\">\n *   <Input name=\"firstName\" label=\"First Name\" />\n *   <Input name=\"lastName\" label=\"Last Name\" />\n * </Fieldset>\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Text content for the <legend> element; omit to render fieldset without a legend */\n    legend?: string\n    /** When true, disables all form controls inside this fieldset */\n    disabled?: boolean\n    /** Additional CSS classes applied to the <fieldset> element */\n    class?: string\n  }>(),\n  {\n    legend: undefined,\n    disabled: false,\n    class: undefined,\n  }\n)\n\nconst styles = fieldsetVariants()\n\nconst baseClass = computed(() => {\n  const classes = [styles.base()]\n  if (props.class) classes.push(props.class)\n  return classes.join(' ')\n})\n</script>\n\n<template>\n  <fieldset\n    :class=\"baseClass\"\n    :disabled=\"props.disabled || undefined\"\n  >\n    <legend\n      v-if=\"props.legend\"\n      :class=\"styles.legend()\"\n    >\n      {{ props.legend }}\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,QAAQ;EAgBd,MAAM,SAAS,kBAAiB;EAEhC,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAU,CAAC,OAAO,MAAM,CAAA;AAC9B,OAAI,MAAM,MAAO,SAAQ,KAAK,MAAM,MAAK;AACzC,UAAO,QAAQ,KAAK,IAAG;IACxB;;uBAIC,mBAWW,YAAA;IAVR,OAAK,eAAE,UAAA,MAAS;IAChB,UAAU,MAAM,YAAY,KAAA;OAGrB,MAAM,UAAA,WAAA,EADd,mBAKS,UAAA;;IAHN,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;sBAElB,MAAM,OAAM,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"Fieldset.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/fieldset/Fieldset.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { fieldsetVariants } from '@auronui/styles'\nimport { useDeprecatedBooleanProp } from '../../composables/useDeprecatedBooleanProp'\n\n/**\n * Fieldset component — semantic HTML grouping for related form controls.\n *\n * Renders a <fieldset> with an optional <legend> for labeling the group.\n * Fieldset is purely structural and does not participate in VeeValidate\n * validation directly (per D-09). Its primary purpose is to group related\n * form controls with correct ARIA semantics for screen readers.\n *\n * Accessibility: <fieldset> + <legend> is the canonical HTML way to associate\n * a group label with its contained controls. Screen readers announce the\n * legend when entering the group.\n *\n * @example\n * <Fieldset legend=\"Personal Information\">\n *   <Input name=\"firstName\" label=\"First Name\" />\n *   <Input name=\"lastName\" label=\"Last Name\" />\n * </Fieldset>\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Text content for the <legend> element; omit to render fieldset without a legend */\n    legend?: string\n    /** When true, disables all form controls inside this fieldset */\n    isDisabled?: boolean\n    /** @deprecated Use isDisabled instead. */\n    disabled?: boolean\n    /** Additional CSS classes applied to the <fieldset> element */\n    class?: string\n  }>(),\n  {\n    legend: undefined,\n    isDisabled: undefined,\n    disabled: undefined,\n    class: undefined,\n  }\n)\n\nconst isDisabled = useDeprecatedBooleanProp(\n  'Fieldset', 'isDisabled', () => props.isDisabled, 'disabled', () => props.disabled,\n)\n\nconst styles = fieldsetVariants()\n\nconst baseClass = computed(() => {\n  const classes = [styles.base()]\n  if (props.class) classes.push(props.class)\n  return classes.join(' ')\n})\n</script>\n\n<template>\n  <fieldset\n    :class=\"baseClass\"\n    :disabled=\"isDisabled || undefined\"\n  >\n    <legend\n      v-if=\"props.legend\"\n      :class=\"styles.legend()\"\n    >\n      {{ props.legend }}\n    </legend>\n    <slot />\n  </fieldset>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAmBd,MAAM,aAAa,yBACjB,YAAY,oBAAoB,MAAM,YAAY,kBAAkB,MAAM,SAC5E;EAEA,MAAM,SAAS,kBAAiB;EAEhC,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAU,CAAC,OAAO,MAAM,CAAA;AAC9B,OAAI,MAAM,MAAO,SAAQ,KAAK,MAAM,MAAK;AACzC,UAAO,QAAQ,KAAK,IAAG;IACxB;;uBAIC,mBAWW,YAAA;IAVR,OAAK,eAAE,UAAA,MAAS;IAChB,UAAU,MAAA,WAAU,IAAI,KAAA;OAGjB,MAAM,UAAA,WAAA,EADd,mBAKS,UAAA;;IAHN,OAAK,eAAE,MAAA,OAAM,CAAC,QAAM,CAAA;sBAElB,MAAM,OAAM,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,EAEjB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,IAAA,WAAA"}

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

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

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

@@ -1,27 +1,13 @@
 import { composeClassName } from "../../utils/composeClassName.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, vModelDynamic, withDirectives } from "vue";
+import { useDeprecatedBooleanProp } from "../../composables/useDeprecatedBooleanProp.js";
+import { useFormField } from "../../composables/useFormField.js";
+import FieldLabel_default from "../_shared/FieldLabel.js";
+import FormFieldHelper_default from "../_shared/FormFieldHelper.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, ref, renderSlot, unref, useAttrs, useId, useModel, useTemplateRef, vModelDynamic, withDirectives } from "vue";
 import { inputVariants } from "@auronui/styles";
 //#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"data-invalid",
-	"data-disabled",
-	"data-readonly",
-	"data-required",
-	"data-has-label",
-	"data-has-helper"
-];
-var _hoisted_2 = ["for"];
-var _hoisted_3 = {
-	key: 0,
-	"aria-hidden": "true"
-};
-var _hoisted_4 = ["data-filled"];
-var _hoisted_5 = ["for"];
-var _hoisted_6 = {
-	key: 0,
-	"aria-hidden": "true"
-};
-var _hoisted_7 = [
+var _hoisted_1 = ["data-filled"];
+var _hoisted_2 = [
 	"id",
 	"type",
 	"placeholder",
@@ -32,8 +18,8 @@ var _hoisted_7 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
-var _hoisted_8 = ["aria-label", "aria-pressed"];
-var _hoisted_9 = {
+var _hoisted_3 = ["aria-label", "aria-pressed"];
+var _hoisted_4 = {
 	key: 0,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -44,7 +30,7 @@ var _hoisted_9 = {
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_10 = {
+var _hoisted_5 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -55,8 +41,6 @@ var _hoisted_10 = {
 	"stroke-linejoin": "round",
 	"aria-hidden": "true"
 };
-var _hoisted_11 = ["id"];
-var _hoisted_12 = ["id"];
 var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "Input",
@@ -77,9 +61,13 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			type: Boolean,
 			default: false
 		},
+		isReadOnly: {
+			type: Boolean,
+			default: void 0
+		},
 		isReadonly: {
 			type: Boolean,
-			default: false
+			default: void 0
 		},
 		isRequired: {
 			type: Boolean,
@@ -126,21 +114,23 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 		const inputId = computed(() => attrs.id ?? generatedId);
 		const inputAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== "id")));
 		const inputEl = useTemplateRef("inputEl");
-		const hasLabel = computed(() => !!props.label);
+		const isReadOnly = useDeprecatedBooleanProp("Input", "isReadOnly", () => props.isReadOnly, "isReadonly", () => props.isReadonly);
 		const isFilled = computed(() => modelValue.value !== null && modelValue.value !== void 0 && String(modelValue.value) !== "");
-		const descriptionId = computed(() => `${inputId.value}-description`);
-		const errorMessageId = computed(() => `${inputId.value}-error`);
-		const showError = computed(() => props.isInvalid && !!props.errorMessage);
-		const showDescription = computed(() => !!props.description && !showError.value);
-		const hasHelper = computed(() => showError.value || showDescription.value);
-		const ariaDescribedBy = computed(() => {
-			if (showError.value) return errorMessageId.value;
-			if (showDescription.value) return descriptionId.value;
+		const { descriptionId, errorMessageId, showError, showDescription, hasHelper, ariaDescribedBy, hasLabel, showOutsideLabel, showInsideLabel, rootDataAttrs } = useFormField({
+			fieldId: () => inputId.value,
+			label: () => props.label,
+			description: () => props.description,
+			errorMessage: () => props.errorMessage,
+			isInvalid: () => props.isInvalid,
+			isDisabled: () => props.isDisabled,
+			isReadOnly: () => isReadOnly.value,
+			isRequired: () => props.isRequired,
+			labelPlacement: () => props.labelPlacement
 		});
 		const isPasswordVisible = ref(false);
 		const isPasswordField = computed(() => props.type === "password");
 		const effectiveType = computed(() => isPasswordField.value && isPasswordVisible.value ? "text" : props.type);
-		const isInteractive = computed(() => !props.isDisabled && !props.isReadonly);
+		const isInteractive = computed(() => !props.isDisabled && !isReadOnly.value);
 		const showClearButton = computed(() => props.isClearable && isFilled.value && isInteractive.value);
 		const showPasswordToggleButton = computed(() => props.showPasswordToggle && isPasswordField.value && isInteractive.value);
 		function handleClear() {
@@ -158,34 +148,38 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			fullWidth: props.fullWidth,
 			isInvalid: props.isInvalid,
 			isDisabled: props.isDisabled,
-			isReadonly: props.isReadonly,
+			isReadonly: isReadOnly.value,
 			hasLabel: hasLabel.value,
 			labelPlacement: props.labelPlacement
 		}));
-		const showOutsideLabel = computed(() => hasLabel.value && props.labelPlacement !== "inside");
-		const showInsideLabel = computed(() => hasLabel.value && props.labelPlacement === "inside");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				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,
-				"data-required": __props.isRequired || void 0,
-				"data-has-label": hasLabel.value || void 0,
-				"data-has-helper": hasHelper.value || void 0
-			}, [showOutsideLabel.value ? (openBlock(), createElementBlock("label", {
+			return openBlock(), createElementBlock("div", mergeProps({ class: unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base) }, unref(rootDataAttrs)), [unref(showOutsideLabel) ? (openBlock(), createBlock(FieldLabel_default, {
 				key: 0,
 				for: inputId.value,
+				label: __props.label,
+				"is-required": __props.isRequired,
 				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", {
+			}, null, 8, [
+				"for",
+				"label",
+				"is-required",
+				"class"
+			])) : 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
+				"data-filled": unref(hasLabel) ? isFilled.value || void 0 : void 0
 			}, [
-				showInsideLabel.value ? (openBlock(), createElementBlock("label", {
+				unref(showInsideLabel) ? (openBlock(), createBlock(FieldLabel_default, {
 					key: 0,
 					for: inputId.value,
+					label: __props.label,
+					"is-required": __props.isRequired,
 					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),
+				}, null, 8, [
+					"for",
+					"label",
+					"is-required",
+					"class"
+				])) : createCommentVNode("", true),
 				_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
 					key: 1,
 					class: normalizeClass(unref(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent))
@@ -199,12 +193,12 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					placeholder: __props.placeholder,
 					name: __props.name,
 					disabled: __props.isDisabled || void 0,
-					readonly: __props.isReadonly || void 0,
+					readonly: unref(isReadOnly) || void 0,
 					required: __props.isRequired || void 0,
 					"aria-invalid": __props.isInvalid || void 0,
-					"aria-describedby": ariaDescribedBy.value,
+					"aria-describedby": unref(ariaDescribedBy),
 					class: unref(composeClassName)(slotFns.value.input(), props.classNames?.input)
-				}), null, 16, _hoisted_7), [[vModelDynamic, modelValue.value]]),
+				}), null, 16, _hoisted_2), [[vModelDynamic, modelValue.value]]),
 				_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", {
 					key: 2,
 					class: normalizeClass(unref(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent))
@@ -251,28 +245,39 @@ var Input_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 					"aria-label": isPasswordVisible.value ? "Hide password" : "Show password",
 					"aria-pressed": isPasswordVisible.value,
 					onClick: togglePasswordVisibility
-				}, [isPasswordVisible.value ? (openBlock(), createElementBlock("svg", _hoisted_9, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1), createElementVNode("line", {
+				}, [isPasswordVisible.value ? (openBlock(), createElementBlock("svg", _hoisted_4, [..._cache[2] || (_cache[2] = [createElementVNode("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }, null, -1), createElementVNode("line", {
 					x1: "1",
 					y1: "1",
 					x2: "23",
 					y2: "23"
-				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_10, [..._cache[3] || (_cache[3] = [createElementVNode("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1), createElementVNode("circle", {
+				}, null, -1)])])) : (openBlock(), createElementBlock("svg", _hoisted_5, [..._cache[3] || (_cache[3] = [createElementVNode("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }, null, -1), createElementVNode("circle", {
 					cx: "12",
 					cy: "12",
 					r: "3"
-				}, null, -1)])]))], 10, _hoisted_8)) : createCommentVNode("", true)
-			], 10, _hoisted_4), hasHelper.value ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper))
-			}, [showError.value ? (openBlock(), createElementBlock("div", {
-				key: 0,
-				id: errorMessageId.value,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage))
-			}, toDisplayString(__props.errorMessage), 11, _hoisted_11)) : showDescription.value ? (openBlock(), createElementBlock("div", {
-				key: 1,
-				id: descriptionId.value,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, toDisplayString(__props.description), 11, _hoisted_12)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
+				}, null, -1)])]))], 10, _hoisted_3)) : createCommentVNode("", true)
+			], 10, _hoisted_1), createVNode(FormFieldHelper_default, {
+				"has-helper": unref(hasHelper),
+				"show-error": unref(showError),
+				"show-description": unref(showDescription),
+				"error-message": __props.errorMessage,
+				description: __props.description,
+				"error-message-id": unref(errorMessageId),
+				"description-id": unref(descriptionId),
+				"wrapper-class": unref(composeClassName)(slotFns.value.helperWrapper(), props.classNames?.helperWrapper),
+				"error-class": unref(composeClassName)(slotFns.value.errorMessage(), props.classNames?.errorMessage),
+				"description-class": unref(composeClassName)(slotFns.value.description(), props.classNames?.description)
+			}, null, 8, [
+				"has-helper",
+				"show-error",
+				"show-description",
+				"error-message",
+				"description",
+				"error-message-id",
+				"description-id",
+				"wrapper-class",
+				"error-class",
+				"description-class"
+			])], 2)], 16);
 		};
 	}
 });