@auronui/vue 1.2.2 → 1.4.0

package/dist/components/hover-card/HoverCardArrow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,35 @@
+import { createBlock, defineComponent, mergeProps, openBlock, unref } from "vue";
+import { HoverCardArrow } from "reka-ui";
+//#region src/components/hover-card/HoverCardArrow.vue?vue&type=script&setup=true&lang.ts
+var HoverCardArrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "HoverCardArrow",
+	props: {
+		as: {},
+		asChild: { type: Boolean },
+		width: {},
+		height: {},
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(HoverCardArrow), mergeProps({
+				as: props.as,
+				"as-child": props.asChild,
+				width: props.width,
+				height: props.height,
+				class: props.class
+			}, _ctx.$attrs), null, 16, [
+				"as",
+				"as-child",
+				"width",
+				"height",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { HoverCardArrow_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=HoverCardArrow.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/hover-card/HoverCardArrow.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardArrow.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/hover-card/HoverCardArrow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { HoverCardArrow } from 'reka-ui'\n\nconst props = defineProps<{\n  as?: string | object\n  asChild?: boolean\n  width?: number\n  height?: number\n  class?: string\n}>()\n</script>\n\n<template>\n  <HoverCardArrow\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :width=\"props.width\"\n    :height=\"props.height\"\n    :class=\"props.class\"\n    v-bind=\"$attrs\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBAUZ,YAOE,MAAA,eAAA,EAPF,WAOE;IANC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAO,MAAM;IACb,QAAQ,MAAM;IACd,OAAO,MAAM;MACNA,KAAAA,OAAM,EAAA,MAAA,IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA,CAAA"}

package/dist/components/hover-card/HoverCardContent.js

@@ -0,0 +1,7 @@
+import HoverCardContent_vue_vue_type_script_setup_true_lang_default from "./HoverCardContent.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/hover-card/HoverCardContent.vue
+var HoverCardContent_default = HoverCardContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { HoverCardContent_default as default };
+
+//# sourceMappingURL=HoverCardContent.js.map

package/dist/components/hover-card/HoverCardContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardContent.js","names":[],"sources":["../../../src/components/hover-card/HoverCardContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { HoverCardPortal, HoverCardContent } from 'reka-ui'\nimport { hoverCardVariants } from '@auronui/styles/components/hover-card'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  sideOffset?: number\n  sideFlip?: boolean\n  align?: 'start' | 'center' | 'end'\n  alignOffset?: number\n  alignFlip?: boolean\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | null | Array<Element | null>\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  arrowPadding?: number\n  hideShiftedArrow?: boolean\n  sticky?: 'partial' | 'always'\n  hideWhenDetached?: boolean\n  positionStrategy?: 'fixed' | 'absolute'\n  updatePositionStrategy?: 'always' | 'optimized'\n  disableUpdateOnLayoutShift?: boolean\n  prioritizePosition?: boolean\n  forceMount?: boolean\n  class?: string\n}>(), {\n  side: 'bottom',\n  sideOffset: 8,\n  align: 'center',\n  alignOffset: 0,\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n}>()\n\nconst styles = hoverCardVariants()\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      :side=\"props.side\"\n      :side-offset=\"props.sideOffset\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :side-flip=\"props.sideFlip\"\n      :align-flip=\"props.alignFlip\"\n      :avoid-collisions=\"props.avoidCollisions\"\n      :collision-boundary=\"props.collisionBoundary\"\n      :collision-padding=\"props.collisionPadding\"\n      :arrow-padding=\"props.arrowPadding\"\n      :hide-shifted-arrow=\"props.hideShiftedArrow\"\n      :sticky=\"props.sticky\"\n      :hide-when-detached=\"props.hideWhenDetached\"\n      :position-strategy=\"props.positionStrategy\"\n      :update-position-strategy=\"props.updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"props.disableUpdateOnLayoutShift\"\n      :prioritize-position=\"props.prioritizePosition\"\n      :force-mount=\"props.forceMount\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      v-bind=\"$attrs\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"],"mappings":""}

package/dist/components/hover-card/HoverCardContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,104 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { hoverCardVariants } from "../../packages/styles/dist/components/hover-card/hover-card.styles.js";
+import { createBlock, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { HoverCardContent, HoverCardPortal } from "reka-ui";
+//#region src/components/hover-card/HoverCardContent.vue?vue&type=script&setup=true&lang.ts
+var HoverCardContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "HoverCardContent",
+	props: {
+		side: { default: "bottom" },
+		sideOffset: { default: 8 },
+		sideFlip: { type: Boolean },
+		align: { default: "center" },
+		alignOffset: { default: 0 },
+		alignFlip: { type: Boolean },
+		avoidCollisions: {
+			type: Boolean,
+			default: true
+		},
+		collisionBoundary: {},
+		collisionPadding: { default: 8 },
+		arrowPadding: {},
+		hideShiftedArrow: { type: Boolean },
+		sticky: {},
+		hideWhenDetached: { type: Boolean },
+		positionStrategy: {},
+		updatePositionStrategy: {},
+		disableUpdateOnLayoutShift: { type: Boolean },
+		prioritizePosition: {
+			type: Boolean,
+			default: true
+		},
+		forceMount: { type: Boolean },
+		class: {}
+	},
+	emits: [
+		"escape-key-down",
+		"pointer-down-outside",
+		"focus-outside",
+		"interact-outside"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const styles = hoverCardVariants();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(HoverCardPortal), null, {
+				default: withCtx(() => [createVNode(unref(HoverCardContent), mergeProps({
+					side: props.side,
+					"side-offset": props.sideOffset,
+					align: props.align,
+					"align-offset": props.alignOffset,
+					"side-flip": props.sideFlip,
+					"align-flip": props.alignFlip,
+					"avoid-collisions": props.avoidCollisions,
+					"collision-boundary": props.collisionBoundary,
+					"collision-padding": props.collisionPadding,
+					"arrow-padding": props.arrowPadding,
+					"hide-shifted-arrow": props.hideShiftedArrow,
+					sticky: props.sticky,
+					"hide-when-detached": props.hideWhenDetached,
+					"position-strategy": props.positionStrategy,
+					"update-position-strategy": props.updatePositionStrategy,
+					"disable-update-on-layout-shift": props.disableUpdateOnLayoutShift,
+					"prioritize-position": props.prioritizePosition,
+					"force-mount": props.forceMount,
+					class: unref(composeClassName)(unref(styles).base(), props.class)
+				}, _ctx.$attrs, {
+					onEscapeKeyDown: _cache[0] || (_cache[0] = ($event) => emit("escape-key-down", $event)),
+					onPointerDownOutside: _cache[1] || (_cache[1] = ($event) => emit("pointer-down-outside", $event)),
+					onFocusOutside: _cache[2] || (_cache[2] = ($event) => emit("focus-outside", $event)),
+					onInteractOutside: _cache[3] || (_cache[3] = ($event) => emit("interact-outside", $event))
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"side",
+					"side-offset",
+					"align",
+					"align-offset",
+					"side-flip",
+					"align-flip",
+					"avoid-collisions",
+					"collision-boundary",
+					"collision-padding",
+					"arrow-padding",
+					"hide-shifted-arrow",
+					"sticky",
+					"hide-when-detached",
+					"position-strategy",
+					"update-position-strategy",
+					"disable-update-on-layout-shift",
+					"prioritize-position",
+					"force-mount",
+					"class"
+				])]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { HoverCardContent_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=HoverCardContent.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/hover-card/HoverCardContent.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardContent.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/hover-card/HoverCardContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { HoverCardPortal, HoverCardContent } from 'reka-ui'\nimport { hoverCardVariants } from '@auronui/styles/components/hover-card'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  sideOffset?: number\n  sideFlip?: boolean\n  align?: 'start' | 'center' | 'end'\n  alignOffset?: number\n  alignFlip?: boolean\n  avoidCollisions?: boolean\n  collisionBoundary?: Element | null | Array<Element | null>\n  collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>\n  arrowPadding?: number\n  hideShiftedArrow?: boolean\n  sticky?: 'partial' | 'always'\n  hideWhenDetached?: boolean\n  positionStrategy?: 'fixed' | 'absolute'\n  updatePositionStrategy?: 'always' | 'optimized'\n  disableUpdateOnLayoutShift?: boolean\n  prioritizePosition?: boolean\n  forceMount?: boolean\n  class?: string\n}>(), {\n  side: 'bottom',\n  sideOffset: 8,\n  align: 'center',\n  alignOffset: 0,\n  avoidCollisions: true,\n  collisionPadding: 8,\n  prioritizePosition: true,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'focus-outside': [event: Event]\n  'interact-outside': [event: Event]\n}>()\n\nconst styles = hoverCardVariants()\n</script>\n\n<template>\n  <HoverCardPortal>\n    <HoverCardContent\n      :side=\"props.side\"\n      :side-offset=\"props.sideOffset\"\n      :align=\"props.align\"\n      :align-offset=\"props.alignOffset\"\n      :side-flip=\"props.sideFlip\"\n      :align-flip=\"props.alignFlip\"\n      :avoid-collisions=\"props.avoidCollisions\"\n      :collision-boundary=\"props.collisionBoundary\"\n      :collision-padding=\"props.collisionPadding\"\n      :arrow-padding=\"props.arrowPadding\"\n      :hide-shifted-arrow=\"props.hideShiftedArrow\"\n      :sticky=\"props.sticky\"\n      :hide-when-detached=\"props.hideWhenDetached\"\n      :position-strategy=\"props.positionStrategy\"\n      :update-position-strategy=\"props.updatePositionStrategy\"\n      :disable-update-on-layout-shift=\"props.disableUpdateOnLayoutShift\"\n      :prioritize-position=\"props.prioritizePosition\"\n      :force-mount=\"props.forceMount\"\n      :class=\"composeClassName(styles.base(), props.class)\"\n      v-bind=\"$attrs\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n    >\n      <slot />\n    </HoverCardContent>\n  </HoverCardPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EA8Bd,MAAM,OAAO;EAOb,MAAM,SAAS,mBAAkB;;uBAI/B,YA6BkB,MAAA,gBAAA,EAAA,MAAA;2BADG,CA3BnB,YA2BmB,MAAA,iBAAA,EA3BnB,WA2BmB;KA1BhB,MAAM,MAAM;KACZ,eAAa,MAAM;KACnB,OAAO,MAAM;KACb,gBAAc,MAAM;KACpB,aAAW,MAAM;KACjB,cAAY,MAAM;KAClB,oBAAkB,MAAM;KACxB,sBAAoB,MAAM;KAC1B,qBAAmB,MAAM;KACzB,iBAAe,MAAM;KACrB,sBAAoB,MAAM;KAC1B,QAAQ,MAAM;KACd,sBAAoB,MAAM;KAC1B,qBAAmB,MAAM;KACzB,4BAA0B,MAAM;KAChC,kCAAgC,MAAM;KACtC,uBAAqB,MAAM;KAC3B,eAAa,MAAM;KACnB,OAAO,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,MAAI,EAAI,MAAM,MAAK;OAC3CA,KAAAA,QAAM;KACb,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;KACzD,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAkB,OAAM;KAC3C,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;4BAE1C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/hover-card/HoverCardTrigger.js

@@ -0,0 +1,7 @@
+import HoverCardTrigger_vue_vue_type_script_setup_true_lang_default from "./HoverCardTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/hover-card/HoverCardTrigger.vue
+var HoverCardTrigger_default = HoverCardTrigger_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { HoverCardTrigger_default as default };
+
+//# sourceMappingURL=HoverCardTrigger.js.map

package/dist/components/hover-card/HoverCardTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardTrigger.js","names":[],"sources":["../../../src/components/hover-card/HoverCardTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { HoverCardTrigger } from 'reka-ui'\n\nconst props = defineProps<{\n  asChild?: boolean\n  as?: string | object\n}>()\n</script>\n\n<template>\n  <HoverCardTrigger\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </HoverCardTrigger>\n</template>\n"],"mappings":""}

package/dist/components/hover-card/HoverCardTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,26 @@
+import { createBlock, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+import { HoverCardTrigger } from "reka-ui";
+//#region src/components/hover-card/HoverCardTrigger.vue?vue&type=script&setup=true&lang.ts
+var HoverCardTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "HoverCardTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(__props) {
+		const props = __props;
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(HoverCardTrigger), mergeProps({
+				"as-child": props.asChild,
+				as: props.as
+			}, _ctx.$attrs), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, ["as-child", "as"]);
+		};
+	}
+});
+//#endregion
+export { HoverCardTrigger_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=HoverCardTrigger.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/hover-card/HoverCardTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCardTrigger.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"sources":["../../../src/components/hover-card/HoverCardTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { HoverCardTrigger } from 'reka-ui'\n\nconst props = defineProps<{\n  asChild?: boolean\n  as?: string | object\n}>()\n</script>\n\n<template>\n  <HoverCardTrigger\n    :as-child=\"props.asChild\"\n    :as=\"props.as\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </HoverCardTrigger>\n</template>\n"],"mappings":";;;;;;;;;;EAGA,MAAM,QAAQ;;uBAOZ,YAMmB,MAAA,iBAAA,EANnB,WAMmB;IALhB,YAAU,MAAM;IAChB,IAAI,MAAM;MACHA,KAAAA,OAAM,EAAA;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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);
 		};
 	}
 });