@auronui/vue 1.2.2 → 1.3.0

package/dist/components/time-range-field/TimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,364 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, watch, withCtx } from "vue";
+import { timeRangeFieldVariants } from "@auronui/styles";
+import { TimeRangeFieldInput, TimeRangeFieldRoot } from "reka-ui";
+//#region src/components/time-range-field/TimeRangeField.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 = ["id", "for"];
+var _hoisted_3 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_4 = ["id", "for"];
+var _hoisted_5 = {
+	key: 0,
+	"aria-hidden": "true"
+};
+var _hoisted_6 = ["id"];
+var _hoisted_7 = ["id"];
+var TimeRangeField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "TimeRangeField",
+	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
+		},
+		label: {},
+		description: {},
+		errorMessage: {},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {},
+		defaultValue: {},
+		defaultPlaceholder: {},
+		placeholderValue: {},
+		minValue: {},
+		maxValue: {},
+		granularity: { default: "minute" },
+		hourCycle: {},
+		step: {},
+		hideTimeZone: {
+			type: Boolean,
+			default: false
+		},
+		locale: {},
+		name: {},
+		required: { type: Boolean },
+		dir: {},
+		as: {},
+		asChild: { type: Boolean }
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const props = __props;
+		const modelValue = useModel(__props, "modelValue");
+		const attrs = useAttrs();
+		const generatedId = useId();
+		const fieldId = computed(() => attrs.id ?? `${generatedId}-field`);
+		const labelId = computed(() => `${generatedId}-label`);
+		const descriptionId = computed(() => `${generatedId}-description`);
+		const errorMessageId = computed(() => `${generatedId}-error`);
+		const hasLabel = computed(() => !!props.label);
+		const isFilled = computed(() => modelValue.value?.start != null || modelValue.value?.end != null);
+		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 fieldRef = ref(null);
+		const fieldEl = computed(() => {
+			const r = fieldRef.value;
+			if (!r) return null;
+			if (r instanceof HTMLElement) return r;
+			return r.$el ?? null;
+		});
+		const isFocused = ref(false);
+		function updateSegmentFocus() {
+			const root = fieldEl.value;
+			if (!root) {
+				isFocused.value = false;
+				return;
+			}
+			const active = (root.ownerDocument ?? document).activeElement;
+			isFocused.value = !!active && root.contains(active) && active.hasAttribute("data-reka-time-field-segment");
+		}
+		function onDocFocusIn() {
+			updateSegmentFocus();
+		}
+		function onDocFocusOut() {
+			queueMicrotask(updateSegmentFocus);
+		}
+		let suppressSegmentFocusUntil = 0;
+		function onDocPointerDown(e) {
+			const root = fieldEl.value;
+			if (!root) return;
+			const target = e.target;
+			if (!target || root.contains(target)) return;
+			suppressSegmentFocusUntil = performance.now() + 250;
+			const active = (root.ownerDocument ?? document).activeElement;
+			if (active && root.contains(active) && active.hasAttribute("data-reka-time-field-segment")) active.blur();
+		}
+		function onDocFocusInGuard(e) {
+			if (performance.now() >= suppressSegmentFocusUntil) return;
+			const root = fieldEl.value;
+			if (!root) return;
+			const t = e.target;
+			if (t && root.contains(t) && t.hasAttribute?.("data-reka-time-field-segment")) t.blur();
+		}
+		onMounted(() => {
+			document.addEventListener("focusin", onDocFocusIn);
+			document.addEventListener("focusout", onDocFocusOut);
+			document.addEventListener("pointerdown", onDocPointerDown, true);
+			document.addEventListener("focusin", onDocFocusInGuard, true);
+		});
+		onBeforeUnmount(() => {
+			document.removeEventListener("focusin", onDocFocusIn);
+			document.removeEventListener("focusout", onDocFocusOut);
+			document.removeEventListener("pointerdown", onDocPointerDown, true);
+			document.removeEventListener("focusin", onDocFocusInGuard, true);
+		});
+		const segmentsFilled = ref(false);
+		function recomputeFilled() {
+			const root = fieldEl.value;
+			if (!root || typeof root.querySelectorAll !== "function") {
+				segmentsFilled.value = false;
+				return;
+			}
+			const segs = root.querySelectorAll("[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])");
+			let anyFilled = false;
+			segs.forEach((el) => {
+				if (el.dataset.placeholder === "false") anyFilled = true;
+			});
+			segmentsFilled.value = anyFilled;
+		}
+		watch([
+			modelValue,
+			() => props.defaultValue,
+			() => props.granularity,
+			() => props.hourCycle
+		], () => {
+			queueMicrotask(recomputeFilled);
+		}, { immediate: true });
+		const effectiveFilled = computed(() => isFilled.value || segmentsFilled.value);
+		function handleFieldMousedown(e) {
+			const target = e.target;
+			if (!target) return;
+			if (target.closest("[data-reka-time-field-segment]")) return;
+			if (target.closest("[data-slot=\"start-content\"]")) return;
+			if (target.closest("[data-slot=\"end-content\"]")) return;
+			if (target.closest("button, [role=\"button\"]")) return;
+			const root = fieldEl.value;
+			if (!root) return;
+			const active = (root.ownerDocument ?? document).activeElement;
+			if (active && root.contains(active) && active.hasAttribute("data-reka-time-field-segment")) return;
+			const first = root.querySelector("[data-reka-time-field-segment]:not([data-reka-time-field-segment=\"literal\"])");
+			if (first) {
+				e.preventDefault();
+				first.focus();
+			}
+		}
+		const slotFns = computed(() => timeRangeFieldVariants({
+			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, 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,
+				"data-slot": "time-range-field"
+			}, [showOutsideLabel.value ? (openBlock(), createElementBlock("label", {
+				key: 0,
+				id: labelId.value,
+				for: fieldId.value,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+			}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)], 10, _hoisted_2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(unref(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [createVNode(unref(TimeRangeFieldRoot), {
+				id: fieldId.value,
+				ref_key: "fieldRef",
+				ref: fieldRef,
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				"default-value": __props.defaultValue,
+				"default-placeholder": __props.defaultPlaceholder,
+				placeholder: __props.placeholderValue,
+				"min-value": __props.minValue,
+				"max-value": __props.maxValue,
+				granularity: __props.granularity,
+				"hour-cycle": __props.hourCycle,
+				step: __props.step,
+				locale: __props.locale,
+				disabled: __props.isDisabled,
+				readonly: __props.isReadOnly,
+				name: __props.name,
+				"hide-time-zone": __props.hideTimeZone,
+				required: __props.required,
+				dir: __props.dir,
+				as: __props.as,
+				"as-child": __props.asChild,
+				"aria-labelledby": hasLabel.value ? labelId.value : void 0,
+				"aria-describedby": ariaDescribedBy.value,
+				"aria-required": __props.isRequired || void 0,
+				"aria-invalid": __props.isInvalid || void 0,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
+				"data-filled": hasLabel.value ? effectiveFilled.value || void 0 : void 0,
+				"data-focused": isFocused.value || void 0,
+				"data-invalid": __props.isInvalid || void 0,
+				"data-disabled": __props.isDisabled || void 0,
+				"data-readonly": __props.isReadOnly || void 0,
+				onMousedown: handleFieldMousedown
+			}, {
+				default: withCtx(({ segments }) => [
+					showInsideLabel.value ? (openBlock(), createElementBlock("label", {
+						key: 0,
+						id: labelId.value,
+						for: fieldId.value,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.label(), props.classNames?.label))
+					}, [createTextVNode(toDisplayString(__props.label), 1), __props.isRequired ? (openBlock(), createElementBlock("span", _hoisted_5, " *")) : createCommentVNode("", true)], 10, _hoisted_4)) : createCommentVNode("", true),
+					_ctx.$slots.startContent ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.startContent(), props.classNames?.startContent)),
+						"data-slot": "start-content"
+					}, [renderSlot(_ctx.$slots, "startContent")], 2)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
+						"data-slot": "segment-list",
+						"data-type": "start"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(segments.start, (segment, _i) => {
+						return openBlock(), createBlock(unref(TimeRangeFieldInput), {
+							key: `start-${_i}`,
+							part: segment.part,
+							type: "start",
+							class: normalizeClass(unref(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(segment.value), 1)]),
+							_: 2
+						}, 1032, ["part", "class"]);
+					}), 128))], 2),
+					createElementVNode("span", {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.separator(), props.classNames?.separator)),
+						"aria-hidden": "true",
+						"data-slot": "separator"
+					}, "–", 2),
+					createElementVNode("div", {
+						class: normalizeClass(unref(composeClassName)(slotFns.value.segmentList(), props.classNames?.segmentList)),
+						"data-slot": "segment-list",
+						"data-type": "end"
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(segments.end, (segment, _i) => {
+						return openBlock(), createBlock(unref(TimeRangeFieldInput), {
+							key: `end-${_i}`,
+							part: segment.part,
+							type: "end",
+							class: normalizeClass(unref(composeClassName)(slotFns.value.segment(), props.classNames?.segment))
+						}, {
+							default: withCtx(() => [createTextVNode(toDisplayString(segment.value), 1)]),
+							_: 2
+						}, 1032, ["part", "class"]);
+					}), 128))], 2),
+					_ctx.$slots.endContent ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.endContent(), props.classNames?.endContent)),
+						"data-slot": "end-content"
+					}, [renderSlot(_ctx.$slots, "endContent")], 2)) : createCommentVNode("", true)
+				]),
+				_: 3
+			}, 8, [
+				"id",
+				"modelValue",
+				"default-value",
+				"default-placeholder",
+				"placeholder",
+				"min-value",
+				"max-value",
+				"granularity",
+				"hour-cycle",
+				"step",
+				"locale",
+				"disabled",
+				"readonly",
+				"name",
+				"hide-time-zone",
+				"required",
+				"dir",
+				"as",
+				"as-child",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-invalid",
+				"class",
+				"data-filled",
+				"data-focused",
+				"data-invalid",
+				"data-disabled",
+				"data-readonly"
+			]), 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)),
+				role: "alert"
+			}, toDisplayString(__props.errorMessage), 11, _hoisted_6)) : 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_7)) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)], 2)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { TimeRangeField_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=TimeRangeField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/time-range-field/TimeRangeField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeField.vue_vue_type_script_setup_true_lang.js","names":["$slots"],"sources":["../../../src/components/time-range-field/TimeRangeField.vue"],"sourcesContent":["<!--\n  TimeRangeField — form-field mirror of DateRangeField.vue for a time range.\n\n  Same prop surface, data-attribute contract, floating-label behavior,\n  start/end content slots, and a11y wiring as DateRangeField. Renders TWO\n  segment lists (start + end) separated by a visible \"–\" glyph, using\n  @internationalized/date TimeValue instead of DateValue.\n-->\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, useAttrs, useId, watch } from 'vue'\nimport { TimeRangeFieldRoot, TimeRangeFieldInput } from 'reka-ui'\nimport type { TimeValue } from 'reka-ui'\nimport { timeRangeFieldVariants, type TimeRangeFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  labelPlacement: 'inside',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadOnly: false,\n  isRequired: false,\n  granularity: 'minute',\n  hideTimeZone: false,\n})\n\nconst modelValue = defineModel<TimeRange | null | undefined>()\n\nexport interface TimeRange {\n  start: TimeValue\n  end: TimeValue\n}\n\ntype Props = {\n  /** Visual style of the field. @default 'flat' */\n  variant?: TimeRangeFieldVariants['variant']\n  /** Field height. @default 'md' */\n  size?: TimeRangeFieldVariants['size']\n  /** Accent color applied to focus ring + floating label. @default 'default' */\n  color?: TimeRangeFieldVariants['color']\n  /** Label placement relative to the field. @default 'inside' */\n  labelPlacement?: TimeRangeFieldVariants['labelPlacement']\n  /** Stretches root wrapper to 100% width. @default false */\n  fullWidth?: boolean\n  /** Marks the field as invalid. @default false */\n  isInvalid?: boolean\n  /** Disables the field. @default false */\n  isDisabled?: boolean\n  /** Makes the field read-only. @default false */\n  isReadOnly?: boolean\n  /** Adds a required asterisk next to the label. @default false */\n  isRequired?: boolean\n  /** Field label. When omitted, floating-label behavior is skipped. */\n  label?: string\n  /** Helper text below the field. Suppressed when isInvalid && errorMessage is shown. */\n  description?: string\n  /** Error text below the field. Only rendered when isInvalid is true. */\n  errorMessage?: string\n  /** Extra classes merged onto the root wrapper. */\n  class?: ClassValue\n  /** Per-slot class overrides. Merged with tailwind-variants styles. */\n  classNames?: Partial<{\n    base: ClassValue\n    label: ClassValue\n    mainWrapper: ClassValue\n    inputWrapper: ClassValue\n    startContent: ClassValue\n    segmentList: ClassValue\n    segment: ClassValue\n    separator: ClassValue\n    endContent: ClassValue\n    helperWrapper: ClassValue\n    errorMessage: ClassValue\n    description: ClassValue\n  }>\n\n  /* ─── TimeRangeField-specific ─────────────────────────────────── */\n  defaultValue?: TimeRange\n  defaultPlaceholder?: TimeValue\n  placeholderValue?: TimeValue\n  minValue?: TimeValue\n  maxValue?: TimeValue\n  granularity?: 'hour' | 'minute' | 'second'\n  hourCycle?: 12 | 24\n  /** Steps for segment keyboard navigation. */\n  step?: Partial<Record<'hour' | 'minute' | 'second' | 'millisecond', number>>\n  hideTimeZone?: boolean\n  locale?: string\n  name?: string\n  /** Marks the field as required for form submission. */\n  required?: boolean\n  /** Text direction for the field. */\n  dir?: 'ltr' | 'rtl'\n  /** Render root as a different element or component. */\n  as?: string\n  /** Render root child as root element. */\n  asChild?: 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?.start != null || modelValue.value?.end != 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.\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 focus snap-back after an outside click.\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 by sniffing rendered segments across BOTH segment lists.\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\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  timeRangeFieldVariants({\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    data-slot=\"time-range-field\"\n  >\n    <label\n      v-if=\"showOutsideLabel\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n    >{{ label }}<span\n      v-if=\"isRequired\"\n      aria-hidden=\"true\"\n    > *</span></label>\n\n    <div :class=\"composeClassName(slotFns.mainWrapper(), props.classNames?.mainWrapper)\">\n      <TimeRangeFieldRoot\n        :id=\"fieldId\"\n        ref=\"fieldRef\"\n        v-model=\"modelValue\"\n        :default-value=\"defaultValue\"\n        :default-placeholder=\"defaultPlaceholder\"\n        :placeholder=\"placeholderValue\"\n        :min-value=\"minValue\"\n        :max-value=\"maxValue\"\n        :granularity=\"granularity\"\n        :hour-cycle=\"hourCycle\"\n        :step=\"step\"\n        :locale=\"locale\"\n        :disabled=\"isDisabled\"\n        :readonly=\"isReadOnly\"\n        :name=\"name\"\n        :hide-time-zone=\"hideTimeZone\"\n        :required=\"required\"\n        :dir=\"dir\"\n        :as=\"as\"\n        :as-child=\"asChild\"\n        :aria-labelledby=\"hasLabel ? labelId : undefined\"\n        :aria-describedby=\"ariaDescribedBy\"\n        :aria-required=\"isRequired || undefined\"\n        :aria-invalid=\"isInvalid || undefined\"\n        :class=\"composeClassName(slotFns.inputWrapper(), props.classNames?.inputWrapper)\"\n        :data-filled=\"hasLabel ? (effectiveFilled || undefined) : undefined\"\n        :data-focused=\"isFocused || undefined\"\n        :data-invalid=\"isInvalid || undefined\"\n        :data-disabled=\"isDisabled || undefined\"\n        :data-readonly=\"isReadOnly || undefined\"\n        @mousedown=\"handleFieldMousedown\"\n      >\n        <template #default=\"{ segments }\">\n          <label\n            v-if=\"showInsideLabel\"\n            :id=\"labelId\"\n            :for=\"fieldId\"\n            :class=\"composeClassName(slotFns.label(), props.classNames?.label)\"\n          >{{ label }}<span\n            v-if=\"isRequired\"\n            aria-hidden=\"true\"\n          > *</span></label>\n\n          <span\n            v-if=\"$slots.startContent\"\n            :class=\"composeClassName(slotFns.startContent(), props.classNames?.startContent)\"\n            data-slot=\"start-content\"\n          >\n            <slot name=\"startContent\" />\n          </span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n            data-type=\"start\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments.start\"\n              :key=\"`start-${_i}`\"\n            >\n              <TimeRangeFieldInput\n                :part=\"segment.part\"\n                type=\"start\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeRangeFieldInput>\n            </template>\n          </div>\n\n          <span\n            :class=\"composeClassName(slotFns.separator(), props.classNames?.separator)\"\n            aria-hidden=\"true\"\n            data-slot=\"separator\"\n          >–</span>\n\n          <div\n            :class=\"composeClassName(slotFns.segmentList(), props.classNames?.segmentList)\"\n            data-slot=\"segment-list\"\n            data-type=\"end\"\n          >\n            <template\n              v-for=\"(segment, _i) in segments.end\"\n              :key=\"`end-${_i}`\"\n            >\n              <TimeRangeFieldInput\n                :part=\"segment.part\"\n                type=\"end\"\n                :class=\"composeClassName(slotFns.segment(), props.classNames?.segment)\"\n              >\n                {{ segment.value }}\n              </TimeRangeFieldInput>\n            </template>\n          </div>\n\n          <span\n            v-if=\"$slots.endContent\"\n            :class=\"composeClassName(slotFns.endContent(), props.classNames?.endContent)\"\n            data-slot=\"end-content\"\n          >\n            <slot name=\"endContent\" />\n          </span>\n        </template>\n      </TimeRangeFieldRoot>\n\n      <div\n        v-if=\"hasHelper\"\n        :class=\"composeClassName(slotFns.helperWrapper(), props.classNames?.helperWrapper)\"\n      >\n        <div\n          v-if=\"showError\"\n          :id=\"errorMessageId\"\n          :class=\"composeClassName(slotFns.errorMessage(), props.classNames?.errorMessage)\"\n          role=\"alert\"\n        >\n          {{ errorMessage }}\n        </div>\n        <div\n          v-else-if=\"showDescription\"\n          :id=\"descriptionId\"\n          :class=\"composeClassName(slotFns.description(), props.classNames?.description)\"\n        >\n          {{ description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,MAAM,QAAQ;EAcd,MAAM,aAAa,SAAyC,SAAA,aAAC;EAyE7D,MAAM,QAAQ,UAAS;EACvB,MAAM,cAAc,OAAM;EAC1B,MAAM,UAAU,eAAgB,MAAM,MAA6B,GAAG,YAAY,QAAO;EACzF,MAAM,UAAU,eAAe,GAAG,YAAY,QAAO;EACrD,MAAM,gBAAgB,eAAe,GAAG,YAAY,cAAa;EACjE,MAAM,iBAAiB,eAAe,GAAG,YAAY,QAAO;EAE5D,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,MAAK;EAC7C,MAAM,WAAW,eAAe,WAAW,OAAO,SAAS,QAAQ,WAAW,OAAO,OAAO,KAAI;EAEhG,MAAM,YAAY,eAAe,MAAM,aAAa,CAAC,CAAC,MAAM,aAAY;EACxE,MAAM,kBAAkB,eAAe,CAAC,CAAC,MAAM,eAAe,CAAC,UAAU,MAAK;EAC9E,MAAM,YAAY,eAAe,UAAU,SAAS,gBAAgB,MAAK;EACzE,MAAM,kBAAkB,eAAe;AACrC,OAAI,UAAU,MAAO,QAAO,eAAe;AAC3C,OAAI,gBAAgB,MAAO,QAAO,cAAc;IAEjD;EAED,MAAM,WAAW,IAAwB,KAAI;EAE7C,MAAM,UAAU,eAAmC;GACjD,MAAM,IAAI,SAAS;AACnB,OAAI,CAAC,EAAG,QAAO;AACf,OAAI,aAAa,YAAa,QAAO;AACrC,UAAO,EAAE,OAAO;IACjB;EAGD,MAAM,YAAY,IAAI,MAAK;EAC3B,SAAS,qBAAqB;GAC5B,MAAM,OAAO,QAAQ;AACrB,OAAI,CAAC,MAAM;AAAE,cAAU,QAAQ;AAAO;;GACtC,MAAM,UAAU,KAAK,iBAAiB,UAAU;AAChD,aAAU,QAAQ,CAAC,CAAC,UACf,KAAK,SAAS,OAAM,IACpB,OAAO,aAAa,+BAA8B;;EAEzD,SAAS,eAAe;AAAE,uBAAoB;;EAC9C,SAAS,gBAAgB;AAAE,kBAAe,mBAAmB;;EAG7D,IAAI,4BAA4B;EAChC,SAAS,iBAAiB,GAAiB;GACzC,MAAM,OAAO,QAAQ;AACrB,OAAI,CAAC,KAAM;GACX,MAAM,SAAS,EAAE;AACjB,OAAI,CAAC,UAAU,KAAK,SAAS,OAAO,CAAE;AACtC,+BAA4B,YAAY,KAAK,GAAG;GAChD,MAAM,UAAU,KAAK,iBAAiB,UAAU;AAChD,OAAI,UAAU,KAAK,SAAS,OAAO,IAAI,OAAO,aAAa,+BAA+B,CACxF,QAAO,MAAK;;EAGhB,SAAS,kBAAkB,GAAe;AACxC,OAAI,YAAY,KAAK,IAAI,0BAA2B;GACpD,MAAM,OAAO,QAAQ;AACrB,OAAI,CAAC,KAAM;GACX,MAAM,IAAI,EAAE;AACZ,OAAI,KAAK,KAAK,SAAS,EAAE,IAAI,EAAE,eAAe,+BAA+B,CAC3E,GAAE,MAAK;;AAIX,kBAAgB;AACd,YAAS,iBAAiB,WAAW,aAAY;AACjD,YAAS,iBAAiB,YAAY,cAAa;AACnD,YAAS,iBAAiB,eAAe,kBAAkB,KAAI;AAC/D,YAAS,iBAAiB,WAAW,mBAAmB,KAAI;IAC7D;AACD,wBAAsB;AACpB,YAAS,oBAAoB,WAAW,aAAY;AACpD,YAAS,oBAAoB,YAAY,cAAa;AACtD,YAAS,oBAAoB,eAAe,kBAAkB,KAAI;AAClE,YAAS,oBAAoB,WAAW,mBAAmB,KAAI;IAChE;EAGD,MAAM,iBAAiB,IAAI,MAAK;EAChC,SAAS,kBAAkB;GACzB,MAAM,OAAO,QAAQ;AACrB,OAAI,CAAC,QAAQ,OAAO,KAAK,qBAAqB,YAAY;AACxD,mBAAe,QAAQ;AACvB;;GAEF,MAAM,OAAO,KAAK,iBAAiB,iFAA8E;GACjH,IAAI,YAAY;AAChB,QAAK,SAAS,OAAO;AACnB,QAAK,GAAmB,QAAQ,gBAAgB,QAAS,aAAY;KACtE;AACD,kBAAe,QAAQ;;AAEzB,QAAM;GAAC;SAAkB,MAAM;SAAoB,MAAM;SAAmB,MAAM;GAAU,QAAQ;AAClG,kBAAe,gBAAe;KAC7B,EAAE,WAAW,MAAM,CAAA;EAEtB,MAAM,kBAAkB,eAAe,SAAS,SAAS,eAAe,MAAK;EAE7E,SAAS,qBAAqB,GAAe;GAC3C,MAAM,SAAS,EAAE;AACjB,OAAI,CAAC,OAAQ;AACb,OAAI,OAAO,QAAQ,iCAAiC,CAAE;AACtD,OAAI,OAAO,QAAQ,gCAA8B,CAAE;AACnD,OAAI,OAAO,QAAQ,8BAA4B,CAAE;AACjD,OAAI,OAAO,QAAQ,4BAA0B,CAAE;GAC/C,MAAM,OAAO,QAAQ;AACrB,OAAI,CAAC,KAAM;GACX,MAAM,UAAU,KAAK,iBAAiB,UAAU;AAChD,OAAI,UAAU,KAAK,SAAS,OAAO,IAAI,OAAO,aAAa,+BAA+B,CACxF;GAEF,MAAM,QAAQ,KAAK,cACjB,iFACF;AACA,OAAI,OAAO;AACT,MAAE,gBAAe;AACjB,UAAM,OAAM;;;EAIhB,MAAM,UAAU,eACd,uBAAuB;GACrB,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GAClB,UAAU,SAAS;GACnB,gBAAgB,MAAM;GACvB,CAAC,CACJ;EAEA,MAAM,mBAAmB,eACjB,SAAS,SAAS,MAAM,mBAAmB,SACnD;EACA,MAAM,kBAAkB,eAChB,SAAS,SAAS,MAAM,mBAAmB,SACnD;;uBAIE,mBAoJM,OAAA;IAnJH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,QAAA,aAAa,KAAA;IAC3B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,kBAAgB,SAAA,SAAY,KAAA;IAC5B,mBAAiB,UAAA,SAAa,KAAA;IAC/B,aAAU;OAGF,iBAAA,SAAA,WAAA,EADR,mBAQkB,SAAA;;IANf,IAAI,QAAA;IACJ,KAAK,QAAA;IACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;uCAC/D,QAAA,MAAK,EAAA,EAAA,EACD,QAAA,cAAA,WAAA,EADI,mBAGF,QAHE,YAGX,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAEH,mBA+HM,OAAA,EA/HA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA,EAAA,EAAA,CAChF,YAwGqB,MAAA,mBAAA,EAAA;IAvGlB,IAAI,QAAA;aACD;IAAJ,KAAI;gBACK,WAAA;4EAAU,QAAA;IAClB,iBAAe,QAAA;IACf,uBAAqB,QAAA;IACrB,aAAa,QAAA;IACb,aAAW,QAAA;IACX,aAAW,QAAA;IACX,aAAa,QAAA;IACb,cAAY,QAAA;IACZ,MAAM,QAAA;IACN,QAAQ,QAAA;IACR,UAAU,QAAA;IACV,UAAU,QAAA;IACV,MAAM,QAAA;IACN,kBAAgB,QAAA;IAChB,UAAU,QAAA;IACV,KAAK,QAAA;IACL,IAAI,QAAA;IACJ,YAAU,QAAA;IACV,mBAAiB,SAAA,QAAW,QAAA,QAAU,KAAA;IACtC,oBAAkB,gBAAA;IAClB,iBAAe,QAAA,cAAc,KAAA;IAC7B,gBAAc,QAAA,aAAa,KAAA;IAC3B,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;IAC9E,eAAa,SAAA,QAAY,gBAAA,SAAmB,KAAA,IAAa,KAAA;IACzD,gBAAc,UAAA,SAAa,KAAA;IAC3B,gBAAc,QAAA,aAAa,KAAA;IAC3B,iBAAe,QAAA,cAAc,KAAA;IAC7B,iBAAe,QAAA,cAAc,KAAA;IAC7B,aAAW;;IAED,SAAO,SASE,EATE,eAAQ;KAEpB,gBAAA,SAAA,WAAA,EADR,mBAQkB,SAAA;;MANf,IAAI,QAAA;MACJ,KAAK,QAAA;MACL,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;yCAC/D,QAAA,MAAK,EAAA,EAAA,EACD,QAAA,cAAA,WAAA,EADI,mBAGF,QAHE,YAGX,KAAE,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA;KAGKA,KAAAA,OAAO,gBAAA,WAAA,EADf,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;MAC/E,aAAU;SAEV,WAA4B,KAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;KAG9B,mBAiBM,OAAA;MAhBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;MAC7E,aAAU;MACV,aAAU;2BAEV,mBAWW,UAAA,MAAA,WAVe,SAAS,QAAzB,SAAS,OAAE;0BAGnB,YAMsB,MAAA,oBAAA,EAAA;qBARP;OAGZ,MAAM,QAAQ;OACf,MAAK;OACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA;;8BAElD,CAAA,gBAAA,gBAAhB,QAAQ,MAAK,EAAA,EAAA,CAAA,CAAA;;;;KAKtB,mBAIS,QAAA;MAHN,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;MACzE,eAAY;MACZ,aAAU;QACX,KAAC,EAAA;KAEF,mBAiBM,OAAA;MAhBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;MAC7E,aAAU;MACV,aAAU;2BAEV,mBAWW,UAAA,MAAA,WAVe,SAAS,MAAzB,SAAS,OAAE;0BAGnB,YAMsB,MAAA,oBAAA,EAAA;mBART;OAGV,MAAM,QAAQ;OACf,MAAK;OACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,SAAO,EAAI,MAAM,YAAY,QAAO,CAAA;;8BAElD,CAAA,gBAAA,gBAAhB,QAAQ,MAAK,EAAA,EAAA,CAAA,CAAA;;;;KAMdA,KAAAA,OAAO,cAAA,WAAA,EADf,mBAMO,QAAA;;MAJJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,YAAU,EAAI,MAAM,YAAY,WAAU,CAAA;MAC3E,aAAU;SAEV,WAA0B,KAAA,QAAA,aAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMxB,UAAA,SAAA,WAAA,EADR,mBAmBM,OAAA;;IAjBH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,eAAa,EAAI,MAAM,YAAY,cAAa,CAAA;OAGzE,UAAA,SAAA,WAAA,EADR,mBAOM,OAAA;;IALH,IAAI,eAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,cAAY,EAAI,MAAM,YAAY,aAAY,CAAA;IAC/E,MAAK;sBAEF,QAAA,aAAY,EAAA,IAAA,WAAA,IAGJ,gBAAA,SAAA,WAAA,EADb,mBAMM,OAAA;;IAJH,IAAI,cAAA;IACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,aAAW,EAAI,MAAM,YAAY,YAAW,CAAA;sBAE1E,QAAA,YAAW,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/year-range-picker/YearRangePicker.js

@@ -0,0 +1,7 @@
+import YearRangePicker_vue_vue_type_script_setup_true_lang_default from "./YearRangePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/year-range-picker/YearRangePicker.vue
+var YearRangePicker_default = YearRangePicker_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { YearRangePicker_default as default };
+
+//# sourceMappingURL=YearRangePicker.js.map

package/dist/components/year-range-picker/YearRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearRangePicker.js","names":[],"sources":["../../../src/components/year-range-picker/YearRangePicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  YearRangePickerRoot,\n  YearRangePickerHeader,\n  YearRangePickerHeading,\n  YearRangePickerPrev,\n  YearRangePickerNext,\n  YearRangePickerGrid,\n  YearRangePickerGridBody,\n  YearRangePickerGridRow,\n  YearRangePickerCell,\n  YearRangePickerCellTrigger,\n} from 'reka-ui'\nimport type { DateValue } from '@internationalized/date'\nimport { yearRangePickerVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nexport interface DateRange {\n  start: DateValue\n  end: DateValue\n}\n\nconst props = withDefaults(defineProps<{\n  defaultValue?: DateRange | null\n  defaultPlaceholder?: DateValue\n  minValue?: DateValue\n  maxValue?: DateValue\n  isYearDisabled?: (date: DateValue) => boolean\n  isYearUnavailable?: (date: DateValue) => boolean\n  locale?: string\n  yearsPerPage?: number\n  preventDeselect?: boolean\n  allowNonContiguousRanges?: boolean\n  maximumYears?: number\n  readonly?: boolean\n  disabled?: boolean\n  calendarLabel?: string\n  /** Initial focus state. @default false */\n  initialFocus?: boolean\n  /** Text direction. */\n  dir?: 'ltr' | 'rtl'\n  /** Navigate to next page. */\n  nextPage?: (placeholder: DateValue) => DateValue\n  /** Navigate to previous page. */\n  prevPage?: (placeholder: DateValue) => DateValue\n  /** Fix one end of the range. */\n  fixedDate?: 'start' | 'end'\n  /** Render as a different element or component. */\n  as?: string\n  /** Render child as root element. */\n  asChild?: boolean\n  class?: ClassValue\n  /** Per-slot class overrides */\n  classNames?: Partial<{\n    base: ClassValue\n    header: ClassValue\n    navButton: ClassValue\n    navButtonIcon: ClassValue\n    heading: ClassValue\n    grid: ClassValue\n    gridBody: ClassValue\n    gridRow: ClassValue\n    cell: ClassValue\n  }>\n}>(), {\n  yearsPerPage: 12,\n  preventDeselect: false,\n  allowNonContiguousRanges: false,\n  readonly: false,\n  disabled: false,\n})\n\nconst emit = defineEmits<{\n  'update:start-value': [value: DateValue | undefined]\n}>()\n\nconst modelValue = defineModel<DateRange | null>()\nconst placeholderModel = defineModel<DateValue | undefined>('placeholder')\n\nconst slotFns = computed(() => yearRangePickerVariants())\n</script>\n\n<template>\n  <YearRangePickerRoot\n    v-model=\"modelValue\"\n    v-model:placeholder=\"placeholderModel\"\n    :default-value=\"defaultValue ?? undefined\"\n    :default-placeholder=\"defaultPlaceholder\"\n    :min-value=\"minValue\"\n    :max-value=\"maxValue\"\n    :is-year-disabled=\"isYearDisabled\"\n    :is-year-unavailable=\"isYearUnavailable\"\n    :locale=\"locale\"\n    :years-per-page=\"yearsPerPage\"\n    :prevent-deselect=\"preventDeselect\"\n    :allow-non-contiguous-ranges=\"allowNonContiguousRanges\"\n    :maximum-years=\"maximumYears\"\n    :readonly=\"readonly\"\n    :disabled=\"disabled\"\n    :calendar-label=\"calendarLabel\"\n    :initial-focus=\"initialFocus\"\n    :dir=\"dir\"\n    :next-page=\"nextPage\"\n    :prev-page=\"prevPage\"\n    :fixed-date=\"fixedDate\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    @update:start-value=\"emit('update:start-value', $event)\"\n  >\n    <template #default=\"{ grid }\">\n      <YearRangePickerHeader :class=\"composeClassName(slotFns.header(), props.classNames?.header)\">\n        <YearRangePickerPrev\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Previous years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"15 18 9 12 15 6\" />\n          </svg>\n        </YearRangePickerPrev>\n\n        <YearRangePickerHeading\n          v-slot=\"{ headingValue }\"\n          :class=\"composeClassName(slotFns.heading(), props.classNames?.heading)\"\n        >\n          <slot\n            name=\"heading\"\n            :heading-value=\"headingValue\"\n          >\n            {{ headingValue }}\n          </slot>\n        </YearRangePickerHeading>\n\n        <YearRangePickerNext\n          :class=\"composeClassName(slotFns.navButton(), props.classNames?.navButton)\"\n          aria-label=\"Next years\"\n        >\n          <svg\n            :class=\"composeClassName(slotFns.navButtonIcon(), props.classNames?.navButtonIcon)\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <polyline points=\"9 18 15 12 9 6\" />\n          </svg>\n        </YearRangePickerNext>\n      </YearRangePickerHeader>\n\n      <YearRangePickerGrid :class=\"composeClassName(slotFns.grid(), props.classNames?.grid)\">\n        <YearRangePickerGridBody :class=\"composeClassName(slotFns.gridBody(), props.classNames?.gridBody)\">\n          <YearRangePickerGridRow\n            v-for=\"(row, rowIndex) in grid.rows\"\n            :key=\"rowIndex\"\n            :class=\"composeClassName(slotFns.gridRow(), props.classNames?.gridRow)\"\n          >\n            <YearRangePickerCell\n              v-for=\"yearValue in row\"\n              :key=\"yearValue.toString()\"\n              :date=\"yearValue\"\n            >\n              <YearRangePickerCellTrigger\n                :year=\"yearValue\"\n                as=\"button\"\n                :class=\"composeClassName(slotFns.cell(), props.classNames?.cell)\"\n              />\n            </YearRangePickerCell>\n          </YearRangePickerGridRow>\n        </YearRangePickerGridBody>\n      </YearRangePickerGrid>\n    </template>\n  </YearRangePickerRoot>\n</template>\n"],"mappings":""}

package/dist/components/year-range-picker/YearRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,199 @@
+import { composeClassName } from "../../utils/composeClassName.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { yearRangePickerVariants } from "@auronui/styles";
+import { YearRangePickerCell, YearRangePickerCellTrigger, YearRangePickerGrid, YearRangePickerGridBody, YearRangePickerGridRow, YearRangePickerHeader, YearRangePickerHeading, YearRangePickerNext, YearRangePickerPrev, YearRangePickerRoot } from "reka-ui";
+//#region src/components/year-range-picker/YearRangePicker.vue?vue&type=script&setup=true&lang.ts
+var YearRangePicker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "YearRangePicker",
+	props: /* @__PURE__ */ mergeModels({
+		defaultValue: {},
+		defaultPlaceholder: {},
+		minValue: {},
+		maxValue: {},
+		isYearDisabled: {},
+		isYearUnavailable: {},
+		locale: {},
+		yearsPerPage: { default: 12 },
+		preventDeselect: {
+			type: Boolean,
+			default: false
+		},
+		allowNonContiguousRanges: {
+			type: Boolean,
+			default: false
+		},
+		maximumYears: {},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		calendarLabel: {},
+		initialFocus: { type: Boolean },
+		dir: {},
+		nextPage: {},
+		prevPage: {},
+		fixedDate: {},
+		as: {},
+		asChild: { type: Boolean },
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Object,
+			Array
+		] },
+		classNames: {}
+	}, {
+		"modelValue": {},
+		"modelModifiers": {},
+		"placeholder": {},
+		"placeholderModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:start-value"], ["update:modelValue", "update:placeholder"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const modelValue = useModel(__props, "modelValue");
+		const placeholderModel = useModel(__props, "placeholder");
+		const slotFns = computed(() => yearRangePickerVariants());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(YearRangePickerRoot), {
+				modelValue: modelValue.value,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+				placeholder: placeholderModel.value,
+				"onUpdate:placeholder": _cache[1] || (_cache[1] = ($event) => placeholderModel.value = $event),
+				"default-value": __props.defaultValue ?? void 0,
+				"default-placeholder": __props.defaultPlaceholder,
+				"min-value": __props.minValue,
+				"max-value": __props.maxValue,
+				"is-year-disabled": __props.isYearDisabled,
+				"is-year-unavailable": __props.isYearUnavailable,
+				locale: __props.locale,
+				"years-per-page": __props.yearsPerPage,
+				"prevent-deselect": __props.preventDeselect,
+				"allow-non-contiguous-ranges": __props.allowNonContiguousRanges,
+				"maximum-years": __props.maximumYears,
+				readonly: __props.readonly,
+				disabled: __props.disabled,
+				"calendar-label": __props.calendarLabel,
+				"initial-focus": __props.initialFocus,
+				dir: __props.dir,
+				"next-page": __props.nextPage,
+				"prev-page": __props.prevPage,
+				"fixed-date": __props.fixedDate,
+				as: __props.as,
+				"as-child": __props.asChild,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
+				"onUpdate:startValue": _cache[2] || (_cache[2] = ($event) => emit("update:start-value", $event))
+			}, {
+				default: withCtx(({ grid }) => [createVNode(unref(YearRangePickerHeader), { class: normalizeClass(unref(composeClassName)(slotFns.value.header(), props.classNames?.header)) }, {
+					default: withCtx(() => [
+						createVNode(unref(YearRangePickerPrev), {
+							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
+							"aria-label": "Previous years"
+						}, {
+							default: withCtx(() => [(openBlock(), createElementBlock("svg", {
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
+								xmlns: "http://www.w3.org/2000/svg",
+								width: "16",
+								height: "16",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								"stroke-width": "2",
+								"stroke-linecap": "round",
+								"stroke-linejoin": "round",
+								"aria-hidden": "true"
+							}, [..._cache[3] || (_cache[3] = [createElementVNode("polyline", { points: "15 18 9 12 15 6" }, null, -1)])], 2))]),
+							_: 1
+						}, 8, ["class"]),
+						createVNode(unref(YearRangePickerHeading), { class: normalizeClass(unref(composeClassName)(slotFns.value.heading(), props.classNames?.heading)) }, {
+							default: withCtx(({ headingValue }) => [renderSlot(_ctx.$slots, "heading", { headingValue }, () => [createTextVNode(toDisplayString(headingValue), 1)])]),
+							_: 3
+						}, 8, ["class"]),
+						createVNode(unref(YearRangePickerNext), {
+							class: normalizeClass(unref(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
+							"aria-label": "Next years"
+						}, {
+							default: withCtx(() => [(openBlock(), createElementBlock("svg", {
+								class: normalizeClass(unref(composeClassName)(slotFns.value.navButtonIcon(), props.classNames?.navButtonIcon)),
+								xmlns: "http://www.w3.org/2000/svg",
+								width: "16",
+								height: "16",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								"stroke-width": "2",
+								"stroke-linecap": "round",
+								"stroke-linejoin": "round",
+								"aria-hidden": "true"
+							}, [..._cache[4] || (_cache[4] = [createElementVNode("polyline", { points: "9 18 15 12 9 6" }, null, -1)])], 2))]),
+							_: 1
+						}, 8, ["class"])
+					]),
+					_: 3
+				}, 8, ["class"]), createVNode(unref(YearRangePickerGrid), { class: normalizeClass(unref(composeClassName)(slotFns.value.grid(), props.classNames?.grid)) }, {
+					default: withCtx(() => [createVNode(unref(YearRangePickerGridBody), { class: normalizeClass(unref(composeClassName)(slotFns.value.gridBody(), props.classNames?.gridBody)) }, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(grid.rows, (row, rowIndex) => {
+							return openBlock(), createBlock(unref(YearRangePickerGridRow), {
+								key: rowIndex,
+								class: normalizeClass(unref(composeClassName)(slotFns.value.gridRow(), props.classNames?.gridRow))
+							}, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (yearValue) => {
+									return openBlock(), createBlock(unref(YearRangePickerCell), {
+										key: yearValue.toString(),
+										date: yearValue
+									}, {
+										default: withCtx(() => [createVNode(unref(YearRangePickerCellTrigger), {
+											year: yearValue,
+											as: "button",
+											class: normalizeClass(unref(composeClassName)(slotFns.value.cell(), props.classNames?.cell))
+										}, null, 8, ["year", "class"])]),
+										_: 2
+									}, 1032, ["date"]);
+								}), 128))]),
+								_: 2
+							}, 1032, ["class"]);
+						}), 128))]),
+						_: 2
+					}, 1032, ["class"])]),
+					_: 2
+				}, 1032, ["class"])]),
+				_: 3
+			}, 8, [
+				"modelValue",
+				"placeholder",
+				"default-value",
+				"default-placeholder",
+				"min-value",
+				"max-value",
+				"is-year-disabled",
+				"is-year-unavailable",
+				"locale",
+				"years-per-page",
+				"prevent-deselect",
+				"allow-non-contiguous-ranges",
+				"maximum-years",
+				"readonly",
+				"disabled",
+				"calendar-label",
+				"initial-focus",
+				"dir",
+				"next-page",
+				"prev-page",
+				"fixed-date",
+				"as",
+				"as-child",
+				"class"
+			]);
+		};
+	}
+});
+//#endregion
+export { YearRangePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=YearRangePicker.vue_vue_type_script_setup_true_lang.js.map