@auronui/vue 1.0.0

package/dist/components/text/Text.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+import { textVariants } from "@auronui/styles";
+//#region src/components/text/Text.vue?vue&type=script&setup=true&lang.ts
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "Text",
+	props: {
+		as: { default: "p" },
+		size: { default: "base" },
+		variant: { default: "default" },
+		class: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const classes = computed(() => composeClassName(textVariants({
+			size: props.size,
+			variant: props.variant
+		}), props.class));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(props.as), { class: normalizeClass(classes.value) }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["class"]);
+		};
+	}
+});
+//#endregion
+export { Text_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Text.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/text/Text.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/text/Text.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { textVariants, type TextVariants } from \"@auronui/styles\";\nimport { composeClassName } from \"../../utils/composeClassName\";\n\nconst props = withDefaults(\n  defineProps<{\n    as?: string;\n    size?: TextVariants[\"size\"];\n    variant?: TextVariants[\"variant\"];\n    class?: string;\n  }>(),\n  {\n    as: \"p\",\n    size: \"base\",\n    variant: \"default\",\n  },\n);\n\nconst classes = computed(() =>\n  composeClassName(\n    textVariants({ size: props.size, variant: props.variant }),\n    props.class,\n  ),\n);\n</script>\n\n<template>\n  <component\n    :is=\"props.as\"\n    :class=\"classes\"\n  >\n    <slot />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAcd,MAAM,UAAU,eACd,iBACE,aAAa;GAAE,MAAM,MAAM;GAAM,SAAS,MAAM;GAAS,CAAC,EAC1D,MAAM,MACP,CACF;;uBAIC,YAKY,wBAJL,MAAM,GAAE,EAAA,EACZ,OAAK,eAAE,QAAA,MAAO,EAAA,EAAA;2BAEP,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,7 @@
+import Textarea_vue_vue_type_script_setup_true_lang_default from "./Textarea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/textarea/Textarea.vue
+var Textarea_default = Textarea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Textarea_default as default };
+
+//# sourceMappingURL=Textarea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: string\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"slotFns.label()\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"slotFns.mainWrapper()\">\n      <div\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"slotFns.label()\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"slotFns.startContent()\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"slotFns.input()\"\n        />\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"slotFns.endContent()\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"slotFns.clearButton()\"\n          aria-label=\"Clear textarea\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"slotFns.helperWrapper()\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"slotFns.errorMessage()\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"slotFns.description()\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,228 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, openBlock, renderSlot, toDisplayString, toRef, unref, useAttrs, useId, useModel, useTemplateRef, vModelText, withDirectives } from "vue";
+import { useTextareaAutosize } from "@vueuse/core";
+import { textAreaVariants } from "@auronui/styles";
+//#region src/components/textarea/Textarea.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 = [
+	"id",
+	"rows",
+	"placeholder",
+	"name",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-invalid",
+	"aria-describedby"
+];
+var _hoisted_8 = ["id"];
+var _hoisted_9 = ["id"];
+var Textarea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "Textarea",
+	props: /* @__PURE__ */ mergeModels({
+		variant: { default: "flat" },
+		size: { default: "md" },
+		color: { default: "default" },
+		labelPlacement: { default: "inside" },
+		fullWidth: {
+			type: Boolean,
+			default: false
+		},
+		isInvalid: {
+			type: Boolean,
+			default: false
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		isReadonly: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		isClearable: {
+			type: Boolean,
+			default: false
+		},
+		rows: { default: 3 },
+		placeholder: {},
+		name: {},
+		label: {},
+		description: {},
+		errorMessage: {},
+		autoResize: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	}, {
+		"modelValue": { default: "" },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["clear"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const modelValue = useModel(__props, "modelValue");
+		const attrs = useAttrs();
+		const generatedId = useId();
+		const inputId = computed(() => attrs.id ?? generatedId);
+		const inputAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== "id")));
+		const textareaEl = useTemplateRef("textareaEl");
+		if (props.autoResize) useTextareaAutosize({
+			element: textareaEl,
+			input: toRef(modelValue)
+		});
+		const hasLabel = computed(() => !!props.label);
+		const isFilled = computed(() => modelValue.value != null && 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 isInteractive = computed(() => !props.isDisabled && !props.isReadonly);
+		const showClearButton = computed(() => props.isClearable && isFilled.value && isInteractive.value);
+		function handleClear() {
+			modelValue.value = "";
+			emit("clear");
+			nextTick(() => textareaEl.value?.focus());
+		}
+		const slotFns = computed(() => textAreaVariants({
+			variant: props.variant,
+			size: props.size,
+			color: props.color,
+			fullWidth: props.fullWidth,
+			isInvalid: props.isInvalid,
+			isDisabled: props.isDisabled,
+			isReadonly: props.isReadonly,
+			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)),
+				"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", {
+				key: 0,
+				for: inputId.value,
+				class: normalizeClass(slotFns.value.label())
+			}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)], 10, _hoisted_2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(slotFns.value.mainWrapper()) }, [createElementVNode("div", {
+				class: normalizeClass(slotFns.value.inputWrapper()),
+				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
+			}, [
+				showInsideLabel.value ? (openBlock(), createElementBlock("label", {
+					key: 0,
+					for: inputId.value,
+					class: normalizeClass(slotFns.value.label())
+				}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_6, " *")) : createCommentVNode("", true)], 10, _hoisted_5)) : createCommentVNode("", true),
+				_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					class: normalizeClass(slotFns.value.startContent())
+				}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
+				withDirectives(createElementVNode("textarea", mergeProps(inputAttrs.value, {
+					id: inputId.value,
+					ref_key: "textareaEl",
+					ref: textareaEl,
+					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+					rows: __props.rows,
+					placeholder: __props.placeholder,
+					name: __props.name,
+					disabled: __props.isDisabled || void 0,
+					readonly: __props.isReadonly || void 0,
+					required: __props.isRequired || void 0,
+					"aria-invalid": __props.isInvalid || void 0,
+					"aria-describedby": ariaDescribedBy.value,
+					class: slotFns.value.input()
+				}), null, 16, _hoisted_7), [[vModelText, modelValue.value]]),
+				_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", {
+					key: 2,
+					class: normalizeClass(slotFns.value.endContent())
+				}, [renderSlot(_ctx.$slots, "endContent")], 2)) : createCommentVNode("", true),
+				showClearButton.value ? (openBlock(), createElementBlock("button", {
+					key: 3,
+					type: "button",
+					tabindex: "-1",
+					class: normalizeClass(slotFns.value.clearButton()),
+					"aria-label": "Clear textarea",
+					onClick: handleClear
+				}, [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					"aria-hidden": "true"
+				}, [
+					createElementVNode("circle", {
+						cx: "12",
+						cy: "12",
+						r: "10"
+					}),
+					createElementVNode("line", {
+						x1: "15",
+						y1: "9",
+						x2: "9",
+						y2: "15"
+					}),
+					createElementVNode("line", {
+						x1: "9",
+						y1: "9",
+						x2: "15",
+						y2: "15"
+					})
+				], -1)])], 2)) : createCommentVNode("", true)
+			], 10, _hoisted_4), hasHelper.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(slotFns.value.helperWrapper())
+			}, [showError.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: errorMessageId.value,
+				class: normalizeClass(slotFns.value.errorMessage())
+			}, toDisplayString(__props.errorMessage), 11, _hoisted_8)) : showDescription.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				id: descriptionId.value,
+				class: normalizeClass(slotFns.value.description())
+			}, toDisplayString(__props.description), 11, _hoisted_9)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { Textarea_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=Textarea.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/textarea/Textarea.vue"],"sourcesContent":["<!--\n  Textarea — multi-line form-field component for @auronui/vue.\n\n  Mirrors Input.vue's prop surface, slot architecture, and a11y contract.\n  Textarea-specific additions: `rows` (initial visible rows) and `autoResize`\n  (wires @vueuse/core useTextareaAutosize so height tracks content).\n\n  ─── Anatomy ────────────────────────────────────────────────────────────\n    base (.textarea-root)\n      label [outside | outside-left]\n      mainWrapper (.textarea__main-wrapper)\n        inputWrapper (.textarea)\n          label [inside]\n          startContent (.textarea__start-content)\n          <textarea ref=\"textareaEl\">\n          endContent (.textarea__end-content)\n          clearButton (.textarea__clear-button)\n        helperWrapper (.textarea__helper-wrapper)\n          errorMessage | description\n-->\n<script setup lang=\"ts\">\nimport { computed, nextTick, toRef, useAttrs, useId, useTemplateRef } from 'vue'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { textAreaVariants, type TextAreaVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  isRequired: false,\n  isClearable: false,\n  rows: 3,\n  autoResize: false,\n})\n\nconst emit = defineEmits<{\n  clear: []\n}>()\n\nconst modelValue = defineModel<string>({ default: '' })\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TextAreaVariants['variant']\n  /** Field size. @default 'md' */\n  size?: TextAreaVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TextAreaVariants['color']\n  /**\n   * Where the `label` is rendered relative to the field.\n   * @default 'inside'\n   */\n  labelPlacement?: TextAreaVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. Enables `errorMessage`. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadonly?: boolean\n  /** Adds a required asterisk next to the label and the `required` attribute. @default false */\n  isRequired?: boolean\n  /** Shows an × button that clears the value and refocuses the field. @default false */\n  isClearable?: boolean\n  /** Initial visible rows (native attribute). @default 3 */\n  rows?: number\n  /** Placeholder shown when empty. */\n  placeholder?: string\n  /** Form field name, for native form submission. */\n  name?: string\n  /** Field label. When omitted, the floating-label behavior is skipped. */\n  label?: string\n  /** Helper text displayed below the field. Suppressed when `isInvalid && errorMessage` is shown. */\n  description?: string\n  /** Error text displayed below the field. Only rendered when `isInvalid` is also true. */\n  errorMessage?: string\n  /** Auto-grow the textarea height to fit content (uses `useTextareaAutosize`). @default false */\n  autoResize?: boolean\n  /** Extra classes merged onto the root wrapper via `composeClassName`. */\n  class?: string\n}\n\nconst attrs = useAttrs()\nconst generatedId = useId()\nconst inputId = computed(() => (attrs.id as string | undefined) ?? generatedId)\nconst inputAttrs = computed(() =>\n  Object.fromEntries(Object.entries(attrs).filter(([k]) => k !== 'id'))\n)\n\nconst textareaEl = useTemplateRef<HTMLTextAreaElement>('textareaEl')\n\nif (props.autoResize) {\n  useTextareaAutosize({\n    element: textareaEl,\n    input: toRef(modelValue),\n  })\n}\n\nconst hasLabel = computed(() => !!props.label)\nconst isFilled = computed(() => modelValue.value != null && String(modelValue.value) !== '')\n\nconst descriptionId = computed(() => `${inputId.value}-description`)\nconst errorMessageId = computed(() => `${inputId.value}-error`)\nconst showError = computed(() => props.isInvalid && !!props.errorMessage)\nconst showDescription = computed(() => !!props.description && !showError.value)\nconst hasHelper = computed(() => showError.value || showDescription.value)\nconst ariaDescribedBy = computed(() => {\n  if (showError.value) return errorMessageId.value\n  if (showDescription.value) return descriptionId.value\n  return undefined\n})\n\nconst isInteractive = computed(() => !props.isDisabled && !props.isReadonly)\nconst showClearButton = computed(\n  () => props.isClearable && isFilled.value && isInteractive.value,\n)\n\nfunction handleClear() {\n  modelValue.value = ''\n  emit('clear')\n  nextTick(() => textareaEl.value?.focus())\n}\n\nconst slotFns = computed(() =>\n  textAreaVariants({\n    variant: props.variant,\n    size: props.size,\n    color: props.color,\n    fullWidth: props.fullWidth,\n    isInvalid: props.isInvalid,\n    isDisabled: props.isDisabled,\n    isReadonly: props.isReadonly,\n    hasLabel: hasLabel.value,\n    labelPlacement: props.labelPlacement,\n  }),\n)\n\nconst showOutsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement !== 'inside',\n)\nconst showInsideLabel = computed(\n  () => hasLabel.value && props.labelPlacement === 'inside',\n)\n</script>\n\n<template>\n  <div\n    :class=\"composeClassName(slotFns.base(), props.class)\"\n    :data-invalid=\"isInvalid || undefined\"\n    :data-disabled=\"isDisabled || undefined\"\n    :data-readonly=\"isReadonly || undefined\"\n    :data-required=\"isRequired || undefined\"\n    :data-has-label=\"hasLabel || undefined\"\n    :data-has-helper=\"hasHelper || undefined\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :for=\"inputId\"\n      :class=\"slotFns.label()\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"slotFns.mainWrapper()\">\n      <div\n        :class=\"slotFns.inputWrapper()\"\n        :data-filled=\"hasLabel ? (isFilled || undefined) : undefined\"\n      >\n        <label\n          v-if=\"showInsideLabel\"\n          :for=\"inputId\"\n          :class=\"slotFns.label()\"\n        >{{ label }}<span\n          v-if=\"isRequired\"\n          aria-hidden=\"true\"\n        > *</span></label>\n        <span\n          v-if=\"$slots.startContent\"\n          :class=\"slotFns.startContent()\"\n        >\n          <slot name=\"startContent\" />\n        </span>\n        <textarea\n          v-bind=\"inputAttrs\"\n          :id=\"inputId\"\n          ref=\"textareaEl\"\n          v-model=\"modelValue\"\n          :rows=\"rows\"\n          :placeholder=\"placeholder\"\n          :name=\"name\"\n          :disabled=\"isDisabled || undefined\"\n          :readonly=\"isReadonly || undefined\"\n          :required=\"isRequired || undefined\"\n          :aria-invalid=\"isInvalid || undefined\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :class=\"slotFns.input()\"\n        />\n        <span\n          v-if=\"$slots.endContent\"\n          :class=\"slotFns.endContent()\"\n        >\n          <slot name=\"endContent\" />\n        </span>\n        <button\n          v-if=\"showClearButton\"\n          type=\"button\"\n          tabindex=\"-1\"\n          :class=\"slotFns.clearButton()\"\n          aria-label=\"Clear textarea\"\n          @click=\"handleClear\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n            />\n            <line\n              x1=\"15\"\n              y1=\"9\"\n              x2=\"9\"\n              y2=\"15\"\n            />\n            <line\n              x1=\"9\"\n              y1=\"9\"\n              x2=\"15\"\n              y2=\"15\"\n            />\n          </svg>\n        </button>\n      </div>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"slotFns.helperWrapper()\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"slotFns.errorMessage()\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"slotFns.description()\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import TimeField_vue_vue_type_script_setup_true_lang_default from "./TimeField.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/time-field/TimeField.vue
+var TimeField_default = TimeField_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TimeField_default as default };
+
+//# sourceMappingURL=TimeField.js.map

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

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