@auronui/vue 1.0.20 → 1.0.22

package/dist/components/list-box/ListBoxItem.vue_vue_type_script_setup_true_lang.js

@@ -24,10 +24,26 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			],
 			default: void 0
 		},
-		classNames: { default: void 0 }
+		classNames: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		indicatorAs: { default: void 0 },
+		indicatorAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
-	setup(__props) {
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const ctx = useListBoxInject({
 			variant: ref("default"),
 			itemVariant: ref("default"),
@@ -39,16 +55,23 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(ListboxItem), {
 				value: props.value,
-				disabled: finalDisabled.value,
+				disabled: props.disabled ?? finalDisabled.value,
 				"text-value": props.textValue ?? props.value,
-				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item))
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(unref(composeClassName)(slotFns.value.item(), props.class, props.classNames?.item)),
+				onSelect: _cache[0] || (_cache[0] = ($event) => emit("select", $event))
 			}, {
 				default: withCtx(() => [
 					renderSlot(_ctx.$slots, "startContent"),
 					renderSlot(_ctx.$slots, "default"),
 					renderSlot(_ctx.$slots, "endContent"),
-					createVNode(unref(ListboxItemIndicator), { class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)) }, {
-						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+					createVNode(unref(ListboxItemIndicator), {
+						as: props.indicatorAs,
+						"as-child": props.indicatorAsChild,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator))
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							width: "12",
 							height: "12",
@@ -62,13 +85,19 @@ var ListBoxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 							"aria-hidden": "true"
 						}, [createElementVNode("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["class"])
+					}, 8, [
+						"as",
+						"as-child",
+						"class"
+					])
 				]),
 				_: 3
 			}, 8, [
 				"value",
 				"disabled",
 				"text-value",
+				"as",
+				"as-child",
 				"class"
 			]);
 		};

package/dist/components/list-box/ListBoxItem.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: undefined,\n})\n\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\">\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAoBd,MAAM,MAAM,iBAAiB;GAC3B,SAAS,IAAI,UAAU;GACvB,aAAa,IAAI,UAAU;GAC3B,YAAY,IAAI,MAAM;GACvB,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,WAAW,IAAI,YAAY,MAAK;EAC1E,MAAM,gBAAgB,eAAe,IAAI,WAAW,SAAS,MAAM,WAAU;EAE7E,MAAM,UAAU,eACd,oBAAoB,EAAE,SAAS,aAAa,OAAyC,CAAA,CACvF;;uBAIE,YA6Bc,MAAA,YAAA,EAAA;IA5BX,OAAO,MAAM;IACb,UAAU,cAAA;IACV,cAAY,MAAM,aAAa,MAAM;IACrC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;;2BAEhD;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,WAA0B,KAAA,QAAA,aAAA;KAC1B,YAmBuB,MAAA,qBAAA,EAAA,EAnBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA,EAAA,EAAA;6BAkBtF,CAjBP,WAiBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ListBoxItem.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ListboxItem, ListboxItemIndicator } from 'reka-ui'\nimport { listboxItemVariants, type ListBoxItemVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\nimport { useListBoxInject } from './ListBox.context'\n\nconst props = withDefaults(defineProps<{\n  value: string\n  textValue?: string\n  isDisabled?: boolean\n  variant?: ListBoxItemVariants['variant']\n  class?: ClassValue\n  /** Override classes for individual slots */\n  classNames?: Partial<{\n    item: ClassValue\n    indicator: ClassValue\n  }>\n  /** Whether the item is disabled. Alias for isDisabled. */\n  disabled?: boolean\n  /** Render as a different element or component. */\n  as?: string\n  /** Merge props onto child element instead of rendering a wrapper. */\n  asChild?: boolean\n  /** Render the ListboxItemIndicator as a different element. */\n  indicatorAs?: string\n  /** Merge indicator props onto child element. */\n  indicatorAsChild?: boolean\n}>(), {\n  textValue: undefined,\n  isDisabled: false,\n  variant: undefined,\n  class: undefined,\n  classNames: undefined,\n  disabled: undefined,\n  as: undefined,\n  asChild: false,\n  indicatorAs: undefined,\n  indicatorAsChild: false,\n})\n\nconst emit = defineEmits<{\n  'select': [event: Event]\n}>()\n\n// Inject context with fallback (standalone usage)\nconst ctx = useListBoxInject({\n  variant: ref('default'),\n  itemVariant: ref('default'),\n  isDisabled: ref(false),\n})\n\nconst finalVariant = computed(() => props.variant ?? ctx.itemVariant.value)\nconst finalDisabled = computed(() => ctx.isDisabled.value || props.isDisabled)\n\nconst slotFns = computed(() =>\n  listboxItemVariants({ variant: finalVariant.value as ListBoxItemVariants['variant'] })\n)\n</script>\n\n<template>\n  <ListboxItem\n    :value=\"props.value\"\n    :disabled=\"props.disabled ?? finalDisabled\"\n    :text-value=\"props.textValue ?? props.value\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(slotFns.item(), props.class, props.classNames?.item)\"\n    @select=\"emit('select', $event)\"\n  >\n    <slot name=\"startContent\" />\n    <slot />\n    <slot name=\"endContent\" />\n    <ListboxItemIndicator\n      :as=\"props.indicatorAs\"\n      :as-child=\"props.indicatorAsChild\"\n      :class=\"composeClassName(slotFns.indicator(), props.classNames?.indicator)\"\n    >\n      <slot name=\"selectedIcon\">\n        <!-- Default check icon -->\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          data-slot=\"list-box-item-indicator--checkmark\"\n          aria-hidden=\"true\"\n        >\n          <polyline points=\"20 6 9 17 4 12\" />\n        </svg>\n      </slot>\n    </ListboxItemIndicator>\n  </ListboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAkCd,MAAM,OAAO;EAKb,MAAM,MAAM,iBAAiB;GAC3B,SAAS,IAAI,UAAU;GACvB,aAAa,IAAI,UAAU;GAC3B,YAAY,IAAI,MAAM;GACvB,CAAA;EAED,MAAM,eAAe,eAAe,MAAM,WAAW,IAAI,YAAY,MAAK;EAC1E,MAAM,gBAAgB,eAAe,IAAI,WAAW,SAAS,MAAM,WAAU;EAE7E,MAAM,UAAU,eACd,oBAAoB,EAAE,SAAS,aAAa,OAAyC,CAAA,CACvF;;uBAIE,YAoCc,MAAA,YAAA,EAAA;IAnCX,OAAO,MAAM;IACb,UAAU,MAAM,YAAY,cAAA;IAC5B,cAAY,MAAM,aAAa,MAAM;IACrC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,UAAM,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,UAAW,OAAM;;2BAEF;KAA5B,WAA4B,KAAA,QAAA,eAAA;KAC5B,WAAQ,KAAA,QAAA,UAAA;KACR,WAA0B,KAAA,QAAA,aAAA;KAC1B,YAuBuB,MAAA,qBAAA,EAAA;MAtBpB,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,WAAS,EAAI,MAAM,YAAY,UAAS,CAAA;;6BAmBlE,CAjBP,WAiBO,KAAA,QAAA,gBAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAfL,mBAcM,OAAA;OAbJ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;OACV,eAAY;UAEZ,mBAAoC,YAAA,EAA1B,QAAO,kBAAgB,CAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,CAAA"}

package/dist/components/list-box/ListBoxSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxSection.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup :class=\"sectionClass.base()\">\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ListBoxSection.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n  /** Render the ListboxGroup as a different element. */\n  as?: string\n  /** Merge group props onto child element. */\n  asChild?: boolean\n  /** The id of the element the label describes (for ListboxGroupLabel). */\n  for?: string\n  /** Render the ListboxGroupLabel as a different element. */\n  labelAs?: string\n  /** Merge label props onto child element. */\n  labelAsChild?: boolean\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n  for: undefined,\n  labelAs: undefined,\n  labelAsChild: false,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"sectionClass.base()\"\n  >\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :for=\"props.for\"\n      :as=\"props.labelAs\"\n      :as-child=\"props.labelAsChild\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":""}

package/dist/components/list-box/ListBoxSection.vue_vue_type_script_setup_true_lang.js

@@ -10,21 +10,44 @@ var ListBoxSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			type: Boolean,
 			default: false
 		},
-		class: { default: void 0 }
+		class: { default: void 0 },
+		as: { default: void 0 },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		for: { default: void 0 },
+		labelAs: { default: void 0 },
+		labelAsChild: {
+			type: Boolean,
+			default: false
+		}
 	},
 	setup(__props) {
 		const props = __props;
 		const sectionClass = computed(() => listboxSectionVariants());
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ListboxGroup), { class: normalizeClass(sectionClass.value.base()) }, {
+			return openBlock(), createBlock(unref(ListboxGroup), {
+				as: props.as,
+				"as-child": props.asChild,
+				class: normalizeClass(sectionClass.value.base())
+			}, {
 				default: withCtx(() => [
 					props.title ? (openBlock(), createBlock(unref(ListboxGroupLabel), {
 						key: 0,
+						for: props.for,
+						as: props.labelAs,
+						"as-child": props.labelAsChild,
 						class: normalizeClass(sectionClass.value.label())
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(props.title), 1)]),
 						_: 1
-					}, 8, ["class"])) : createCommentVNode("", true),
+					}, 8, [
+						"for",
+						"as",
+						"as-child",
+						"class"
+					])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "default"),
 					props.showDivider ? (openBlock(), createElementBlock("div", {
 						key: 1,
@@ -36,7 +59,11 @@ var ListBoxSection_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					}, null, 2)) : createCommentVNode("", true)
 				]),
 				_: 3
-			}, 8, ["class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/list-box/ListBoxSection.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBoxSection.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup :class=\"sectionClass.base()\">\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAUd,MAAM,eAAe,eACnB,wBAAuB,CACzB;;uBAIE,YAgBe,MAAA,aAAA,EAAA,EAhBA,OAAK,eAAE,aAAA,MAAa,MAAI,CAAA,EAAA,EAAA;2BAMjB;KAJZ,MAAM,SAAA,WAAA,EADd,YAKoB,MAAA,kBAAA,EAAA;;MAHjB,OAAK,eAAE,aAAA,MAAa,OAAK,CAAA;;6BAET,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;KAEhB,WAAQ,KAAA,QAAA,UAAA;KAEA,MAAM,eAAA,WAAA,EADd,mBAOE,OAAA;;MALA,MAAK;MACL,oBAAiB;MACjB,aAAU;MACV,oBAAiB;MAChB,OAAK,eAAE,aAAA,MAAa,WAAS,CAAA"}
+{"version":3,"file":"ListBoxSection.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/list-box/ListBoxSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ListboxGroup, ListboxGroupLabel } from 'reka-ui'\nimport { listboxSectionVariants } from '@auronui/styles'\n\nconst props = withDefaults(defineProps<{\n  title?: string\n  showDivider?: boolean\n  class?: string\n  /** Render the ListboxGroup as a different element. */\n  as?: string\n  /** Merge group props onto child element. */\n  asChild?: boolean\n  /** The id of the element the label describes (for ListboxGroupLabel). */\n  for?: string\n  /** Render the ListboxGroupLabel as a different element. */\n  labelAs?: string\n  /** Merge label props onto child element. */\n  labelAsChild?: boolean\n}>(), {\n  title: undefined,\n  showDivider: false,\n  class: undefined,\n  as: undefined,\n  asChild: false,\n  for: undefined,\n  labelAs: undefined,\n  labelAsChild: false,\n})\n\nconst sectionClass = computed(() =>\n  listboxSectionVariants()\n)\n</script>\n\n<template>\n  <ListboxGroup\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"sectionClass.base()\"\n  >\n    <ListboxGroupLabel\n      v-if=\"props.title\"\n      :for=\"props.for\"\n      :as=\"props.labelAs\"\n      :as-child=\"props.labelAsChild\"\n      :class=\"sectionClass.label()\"\n    >\n      {{ props.title }}\n    </ListboxGroupLabel>\n    <slot />\n    <div\n      v-if=\"props.showDivider\"\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      data-slot=\"separator\"\n      data-orientation=\"horizontal\"\n      :class=\"sectionClass.separator()\"\n    />\n  </ListboxGroup>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAyBd,MAAM,eAAe,eACnB,wBAAuB,CACzB;;uBAIE,YAuBe,MAAA,aAAA,EAAA;IAtBZ,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,aAAA,MAAa,MAAI,CAAA;;2BAUL;KAPZ,MAAM,SAAA,WAAA,EADd,YAQoB,MAAA,kBAAA,EAAA;;MANjB,KAAK,MAAM;MACX,IAAI,MAAM;MACV,YAAU,MAAM;MAChB,OAAK,eAAE,aAAA,MAAa,OAAK,CAAA;;6BAET,CAAA,gBAAA,gBAAd,MAAM,MAAK,EAAA,EAAA,CAAA,CAAA;;;;;;;;KAEhB,WAAQ,KAAA,QAAA,UAAA;KAEA,MAAM,eAAA,WAAA,EADd,mBAOE,OAAA;;MALA,MAAK;MACL,oBAAiB;MACjB,aAAU;MACV,oBAAiB;MAChB,OAAK,eAAE,aAAA,MAAa,WAAS,CAAA"}

package/dist/components/modal/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClose.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalClose.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalClose.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,7 @@ import { DialogClose } from "reka-ui";
 var ModalClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalClose",
 	props: {
+		as: {},
 		asChild: {
 			type: Boolean,
 			default: false
@@ -17,12 +18,17 @@ var ModalClose_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const styles = modalVariants();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DialogClose), {
+				as: props.as,
 				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(styles).closeTrigger(), props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as-child", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalClose.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAOd,MAAM,SAAS,eAAc;;uBAI3B,YAKc,MAAA,YAAA,EAAA;IAJX,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;;2BAEnD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalClose.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalClose.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogClose } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogClose\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.closeTrigger(), props.class)\"\n  >\n    <slot />\n  </DialogClose>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EAQd,MAAM,SAAS,eAAc;;uBAI3B,YAMc,MAAA,YAAA,EAAA;IALX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,cAAY,EAAI,MAAM,MAAK,CAAA;;2BAEnD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal>\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalContent.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  disableOutsidePointerEvents?: boolean\n  to?: string | HTMLElement\n  disabled?: boolean\n  defer?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n  disableOutsidePointerEvents: false,\n  disabled: false,\n  defer: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n  'focus-outside': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :force-mount=\"props.forceMount\"\n      :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalContent.vue_vue_type_script_setup_true_lang.js

@@ -10,13 +10,38 @@ import { DialogContent, DialogPortal, injectDialogRootContext } from "reka-ui";
 var _hoisted_1 = { class: "modal__portal" };
 var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalContent",
-	props: { class: {} },
+	props: {
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		disableOutsidePointerEvents: {
+			type: Boolean,
+			default: false
+		},
+		to: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		defer: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
 	emits: [
 		"escape-key-down",
 		"pointer-down-outside",
 		"interact-outside",
 		"open-auto-focus",
-		"close-auto-focus"
+		"close-auto-focus",
+		"focus-outside"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -30,8 +55,17 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const dialogRootContext = injectDialogRootContext();
 		const styles = modalVariants();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogPortal), null, {
+			return openBlock(), createBlock(unref(DialogPortal), {
+				to: props.to,
+				disabled: props.disabled,
+				defer: props.defer,
+				"force-mount": props.forceMount
+			}, {
 				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(ModalOverlay_default), createVNode(unref(DialogContent), {
+					as: props.as,
+					"as-child": props.asChild,
+					"force-mount": props.forceMount,
+					"disable-outside-pointer-events": props.disableOutsidePointerEvents,
 					class: normalizeClass(unref(composeClassName)(unref(styles).container({ scroll: unref(ctx).scroll }), props.class)),
 					"data-placement": unref(ctx).placement,
 					"aria-hidden": !unref(dialogRootContext).open.value || void 0,
@@ -39,7 +73,8 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					onPointerDownOutside: _cache[1] || (_cache[1] = ($event) => emit("pointer-down-outside", $event)),
 					onInteractOutside: _cache[2] || (_cache[2] = ($event) => emit("interact-outside", $event)),
 					onOpenAutoFocus: _cache[3] || (_cache[3] = ($event) => emit("open-auto-focus", $event)),
-					onCloseAutoFocus: _cache[4] || (_cache[4] = ($event) => emit("close-auto-focus", $event))
+					onCloseAutoFocus: _cache[4] || (_cache[4] = ($event) => emit("close-auto-focus", $event)),
+					onFocusOutside: _cache[5] || (_cache[5] = ($event) => emit("focus-outside", $event))
 				}, {
 					default: withCtx(() => [createVNode(unref(AnimatePresence_default), null, {
 						default: withCtx(() => [unref(dialogRootContext).open.value ? (openBlock(), createBlock(unref(motion).div, {
@@ -76,12 +111,21 @@ var ModalContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					})]),
 					_: 3
 				}, 8, [
+					"as",
+					"as-child",
+					"force-mount",
+					"disable-outside-pointer-events",
 					"class",
 					"data-placement",
 					"aria-hidden"
 				])])]),
 				_: 3
-			});
+			}, 8, [
+				"to",
+				"disabled",
+				"defer",
+				"force-mount"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal>\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAId,MAAM,OAAO;EASb,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EAGjG,MAAM,oBAAoB,yBAAwB;EAElD,MAAM,SAAS,eAAc;;uBAI3B,YA4Be,MAAA,aAAA,EAAA,MAAA;2BADP,CA1BN,mBA0BM,OA1BN,YA0BM,CAzBN,YAAgB,qBAAA,EAChB,YAuBgB,MAAA,cAAA,EAAA;KAtBb,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,UAAS,EAAA,QAAW,MAAA,IAAG,CAAC,QAAM,CAAA,EAAK,MAAM,MAAK,CAAA;KAC7E,kBAAgB,MAAA,IAAG,CAAC;KACpB,eAAW,CAAG,MAAA,kBAAiB,CAAC,KAAK,SAAS,KAAA;KAC9C,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;KACzD,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;;4BAchC,CAZlB,YAYkB,MAAA,wBAAA,EAAA,MAAA;6BADH,CATL,MAAA,kBAAiB,CAAC,KAAK,SAAA,WAAA,EAD/B,YAUa,MAAA,OAAA,CAAA,KAAA;;OARV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;QAAA,MAAS,MAAA,IAAG,CAAC;QAAI,QAAU,MAAA,IAAG,CAAC;QAAM,CAAA,EAAA,sBAAA,CAAA;OAC1E,kBAAgB,MAAA,IAAG,CAAC;OACpB,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OAC5C,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAA8B;OACvC,MAAM;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OACzC,YAAY;QAAA,UAAA;QAAA,MAAA;QAAkC;;8BAEvC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogPortal, DialogContent, injectDialogRootContext } from 'reka-ui'\nimport { motion, AnimatePresence } from 'motion-v'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\nimport ModalOverlay from './ModalOverlay.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  disableOutsidePointerEvents?: boolean\n  to?: string | HTMLElement\n  disabled?: boolean\n  defer?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n  disableOutsidePointerEvents: false,\n  disabled: false,\n  defer: false,\n})\n\nconst emit = defineEmits<{\n  'escape-key-down': [event: KeyboardEvent]\n  'pointer-down-outside': [event: Event]\n  'interact-outside': [event: Event]\n  'open-auto-focus': [event: Event]\n  'close-auto-focus': [event: Event]\n  'focus-outside': [event: Event]\n}>()\n\n// Inject context from Modal root\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\n\n// Inject Reka's dialog root context to read open state for AnimatePresence\nconst dialogRootContext = injectDialogRootContext()\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogPortal :to=\"props.to\" :disabled=\"props.disabled\" :defer=\"props.defer\" :force-mount=\"props.forceMount\">\n    <div class=\"modal__portal\">\n    <ModalOverlay />\n    <DialogContent\n      :as=\"props.as\"\n      :as-child=\"props.asChild\"\n      :force-mount=\"props.forceMount\"\n      :disable-outside-pointer-events=\"props.disableOutsidePointerEvents\"\n      :class=\"composeClassName(styles.container({ scroll: ctx.scroll }), props.class)\"\n      :data-placement=\"ctx.placement\"\n      :aria-hidden=\"!dialogRootContext.open.value || undefined\"\n      @escape-key-down=\"emit('escape-key-down', $event)\"\n      @pointer-down-outside=\"emit('pointer-down-outside', $event)\"\n      @interact-outside=\"emit('interact-outside', $event)\"\n      @open-auto-focus=\"emit('open-auto-focus', $event)\"\n      @close-auto-focus=\"emit('close-auto-focus', $event)\"\n      @focus-outside=\"emit('focus-outside', $event)\"\n    >\n      <AnimatePresence>\n        <motion.div\n          v-if=\"dialogRootContext.open.value\"\n          :class=\"composeClassName(styles.dialog({ size: ctx.size, scroll: ctx.scroll }), 'modal-content-inner')\"\n          :data-placement=\"ctx.placement\"\n          :initial=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :animate=\"{ opacity: 1, scale: 1, y: 0 }\"\n          :exit=\"{ opacity: 0, scale: 0.95, y: -10 }\"\n          :transition=\"{ duration: 0.2, ease: 'easeOut' }\"\n        >\n          <slot />\n        </motion.div>\n      </AnimatePresence>\n    </DialogContent>\n    </div>\n  </DialogPortal>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,MAAM,QAAQ;EAiBd,MAAM,OAAO;EAUb,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EAGjG,MAAM,oBAAoB,yBAAwB;EAElD,MAAM,SAAS,eAAc;;uBAI3B,YAiCe,MAAA,aAAA,EAAA;IAjCA,IAAI,MAAM;IAAK,UAAU,MAAM;IAAW,OAAO,MAAM;IAAQ,eAAa,MAAM;;2BAgCzF,CA/BN,mBA+BM,OA/BN,YA+BM,CA9BN,YAAgB,qBAAA,EAChB,YA4BgB,MAAA,cAAA,EAAA;KA3Bb,IAAI,MAAM;KACV,YAAU,MAAM;KAChB,eAAa,MAAM;KACnB,kCAAgC,MAAM;KACtC,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,UAAS,EAAA,QAAW,MAAA,IAAG,CAAC,QAAM,CAAA,EAAK,MAAM,MAAK,CAAA;KAC7E,kBAAgB,MAAA,IAAG,CAAC;KACpB,eAAW,CAAG,MAAA,kBAAiB,CAAC,KAAK,SAAS,KAAA;KAC9C,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,sBAAoB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,wBAAyB,OAAM;KACzD,mBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,iBAAe,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,mBAAoB,OAAM;KAC/C,kBAAgB,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,oBAAqB,OAAM;KACjD,gBAAa,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,iBAAkB,OAAM;;4BAc1B,CAZlB,YAYkB,MAAA,wBAAA,EAAA,MAAA;6BADH,CATL,MAAA,kBAAiB,CAAC,KAAK,SAAA,WAAA,EAD/B,YAUa,MAAA,OAAA,CAAA,KAAA;;OARV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,OAAM;QAAA,MAAS,MAAA,IAAG,CAAC;QAAI,QAAU,MAAA,IAAG,CAAC;QAAM,CAAA,EAAA,sBAAA,CAAA;OAC1E,kBAAgB,MAAA,IAAG,CAAC;OACpB,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OAC5C,SAAS;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAA8B;OACvC,MAAM;QAAA,SAAA;QAAA,OAAA;QAAA,GAAA;QAAmC;OACzC,YAAY;QAAA,UAAA;QAAA,MAAA;QAAkC;;8BAEvC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDescription.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'p',\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalDescription.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'p',\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalDescription.vue_vue_type_script_setup_true_lang.js

@@ -6,6 +6,10 @@ var ModalDescription_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	__name: "ModalDescription",
 	props: {
 		as: { default: "p" },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
 		class: {}
 	},
 	setup(__props) {
@@ -13,11 +17,16 @@ var ModalDescription_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DialogDescription), {
 				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)("text-sm text-muted", props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalDescription.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalDescription.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'p',\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":";;;;;;;;;;;EAIA,MAAM,QAAQ;;uBASZ,YAKoB,MAAA,kBAAA,EAAA;IAJjB,IAAI,MAAM;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAA,sBAAuB,MAAM,MAAK,CAAA;;2BAElD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalDescription.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalDescription.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogDescription } from 'reka-ui'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'p',\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogDescription\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName('text-sm text-muted', props.class)\"\n  >\n    <slot />\n  </DialogDescription>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAIA,MAAM,QAAQ;;uBAWZ,YAMoB,MAAA,kBAAA,EAAA;IALjB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAA,sBAAuB,MAAM,MAAK,CAAA;;2BAElD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\" />\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalOverlay.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalOverlay.vue_vue_type_script_setup_true_lang.js

@@ -6,7 +6,18 @@ import { DialogOverlay } from "reka-ui";
 //#region src/components/modal/ModalOverlay.vue?vue&type=script&setup=true&lang.ts
 var ModalOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalOverlay",
-	props: { class: {} },
+	props: {
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		},
+		forceMount: {
+			type: Boolean,
+			default: false
+		},
+		class: {}
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = useModalInject({
@@ -17,7 +28,17 @@ var ModalOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		});
 		const styles = modalVariants();
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogOverlay), { class: normalizeClass(unref(composeClassName)(unref(styles).backdrop({ variant: unref(ctx).variant }), props.class)) }, null, 8, ["class"]);
+			return openBlock(), createBlock(unref(DialogOverlay), {
+				as: props.as,
+				"as-child": props.asChild,
+				"force-mount": props.forceMount,
+				class: normalizeClass(unref(composeClassName)(unref(styles).backdrop({ variant: unref(ctx).variant }), props.class))
+			}, null, 8, [
+				"as",
+				"as-child",
+				"force-mount",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalOverlay.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  class?: string\n}>(), {})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\" />\n</template>\n"],"mappings":";;;;;;;;;;EAMA,MAAM,QAAQ;EAId,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EACjG,MAAM,SAAS,eAAc;;uBAI3B,YAAmG,MAAA,cAAA,EAAA,EAAnF,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAQ,EAAA,SAAY,MAAA,IAAG,CAAC,SAAO,CAAA,EAAK,MAAM,MAAK,CAAA,EAAA,EAAA,MAAA,GAAA,CAAA,QAAA,CAAA"}
+{"version":3,"file":"ModalOverlay.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalOverlay.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogOverlay } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { useModalInject } from './Modal.vue'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  forceMount?: boolean\n  class?: string\n}>(), {\n  asChild: false,\n  forceMount: false,\n})\n\nconst ctx = useModalInject({ size: 'md', scroll: 'inside', variant: 'opaque', placement: 'auto' })\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogOverlay\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :force-mount=\"props.forceMount\"\n    :class=\"composeClassName(styles.backdrop({ variant: ctx.variant }), props.class)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAMA,MAAM,QAAQ;EAUd,MAAM,MAAM,eAAe;GAAE,MAAM;GAAM,QAAQ;GAAU,SAAS;GAAU,WAAW;GAAQ,CAAA;EACjG,MAAM,SAAS,eAAc;;uBAI3B,YAKE,MAAA,cAAA,EAAA;IAJC,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,eAAa,MAAM;IACnB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAQ,EAAA,SAAY,MAAA,IAAG,CAAC,SAAO,CAAA,EAAK,MAAM,MAAK,CAAA"}

package/dist/components/modal/ModalTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTitle.js","names":[],"sources":["../../../src/components/modal/ModalTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'h2',\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalTitle.js","names":[],"sources":["../../../src/components/modal/ModalTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'h2',\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalTitle.vue_vue_type_script_setup_true_lang.js

@@ -7,6 +7,10 @@ var ModalTitle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 	__name: "ModalTitle",
 	props: {
 		as: { default: "h2" },
+		asChild: {
+			type: Boolean,
+			default: false
+		},
 		class: {}
 	},
 	setup(__props) {
@@ -15,11 +19,16 @@ var ModalTitle_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(DialogTitle), {
 				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(unref(styles).heading(), props.class))
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as", "class"]);
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			]);
 		};
 	}
 });

package/dist/components/modal/ModalTitle.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  class?: string\n}>(), {\n  as: 'h2',\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":";;;;;;;;;;;;EAKA,MAAM,QAAQ;EAOd,MAAM,SAAS,eAAc;;uBAI3B,YAKc,MAAA,YAAA,EAAA;IAJX,IAAI,MAAM;IACV,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,MAAK,CAAA;;2BAE9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalTitle.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalTitle.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTitle } from 'reka-ui'\nimport { modalVariants } from '@auronui/styles/components/modal'\nimport { composeClassName } from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n  class?: string\n}>(), {\n  as: 'h2',\n  asChild: false,\n})\n\nconst styles = modalVariants()\n</script>\n\n<template>\n  <DialogTitle\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.heading(), props.class)\"\n  >\n    <slot />\n  </DialogTitle>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAKA,MAAM,QAAQ;EASd,MAAM,SAAS,eAAc;;uBAI3B,YAMc,MAAA,YAAA,EAAA;IALX,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,MAAA,OAAM,CAAC,SAAO,EAAI,MAAM,MAAK,CAAA;;2BAE9C,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/modal/ModalTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTrigger.js","names":[],"sources":["../../../src/components/modal/ModalTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogTrigger :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":""}
+{"version":3,"file":"ModalTrigger.js","names":[],"sources":["../../../src/components/modal/ModalTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogTrigger :as=\"props.as\" :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":""}

package/dist/components/modal/ModalTrigger.vue_vue_type_script_setup_true_lang.js

@@ -3,17 +3,23 @@ import { DialogTrigger } from "reka-ui";
 //#region src/components/modal/ModalTrigger.vue?vue&type=script&setup=true&lang.ts
 var ModalTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "ModalTrigger",
-	props: { asChild: {
-		type: Boolean,
-		default: false
-	} },
+	props: {
+		as: {},
+		asChild: {
+			type: Boolean,
+			default: false
+		}
+	},
 	setup(__props) {
 		const props = __props;
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogTrigger), { "as-child": props.asChild }, {
+			return openBlock(), createBlock(unref(DialogTrigger), {
+				as: props.as,
+				"as-child": props.asChild
+			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}, 8, ["as-child"]);
+			}, 8, ["as", "as-child"]);
 		};
 	}
 });

package/dist/components/modal/ModalTrigger.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogTrigger :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":";;;;;;;;;;EAGA,MAAM,QAAQ;;uBAQZ,YAEgB,MAAA,cAAA,EAAA,EAFA,YAAU,MAAM,SAAA,EAAA;2BACtB,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
+{"version":3,"file":"ModalTrigger.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/modal/ModalTrigger.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { DialogTrigger } from 'reka-ui'\n\nconst props = withDefaults(defineProps<{\n  as?: string\n  asChild?: boolean\n}>(), {\n  asChild: false,\n})\n</script>\n\n<template>\n  <DialogTrigger :as=\"props.as\" :as-child=\"props.asChild\">\n    <slot />\n  </DialogTrigger>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAGA,MAAM,QAAQ;;uBASZ,YAEgB,MAAA,cAAA,EAAA;IAFA,IAAI,MAAM;IAAK,YAAU,MAAM;;2BACrC,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

package/dist/components/number-field/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  class?: ClassValue\n  /** Per-slot classNames override object for custom styling */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    decrementButton: ClassValue\n    input: ClassValue\n    incrementButton: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\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  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"composeClassName(slotFns.group(), props.classNames?.group)\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :class=\"composeClassName(slotFns.decrementButton(), props.classNames?.decrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :class=\"composeClassName(slotFns.incrementButton(), props.classNames?.incrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../src/components/number-field/NumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useId } from 'vue'\nimport {\n  NumberFieldRoot,\n  NumberFieldInput,\n  NumberFieldIncrement,\n  NumberFieldDecrement,\n} from 'reka-ui'\nimport { numberFieldVariants, type NumberFieldVariants } from '@auronui/styles'\nimport { composeClassName , type ClassValue} from '../../utils/composeClassName'\n\nconst props = withDefaults(defineProps<{\n  variant?: NumberFieldVariants['variant']\n  size?: NumberFieldVariants['size']\n  color?: NumberFieldVariants['color']\n  fullWidth?: boolean\n  isInvalid?: boolean\n  isDisabled?: boolean\n  isReadonly?: boolean\n  min?: number\n  max?: number\n  step?: number\n  formatOptions?: Intl.NumberFormatOptions\n  locale?: string\n  name?: string\n  id?: string\n  placeholder?: string\n  label?: string\n  // camelCase prop; in templates users write aria-label=\"…\" (Vue auto-converts)\n  ariaLabel?: string\n  /** Default value when uncontrolled. */\n  defaultValue?: number\n  /** Whether to snap the value to the nearest step. */\n  stepSnapping?: boolean\n  /** Whether to focus the input on increment/decrement. */\n  focusOnChange?: boolean\n  /** Disable changing value with mouse wheel. */\n  disableWheelChange?: boolean\n  /** Invert the direction of mouse wheel change. */\n  invertWheelChange?: boolean\n  /** Whether NumberFieldRoot renders as a child element. */\n  asChild?: boolean\n  /** Element or component to render NumberFieldRoot as. */\n  as?: string\n  /** Whether the field is required. */\n  required?: boolean\n  /** Whether NumberFieldInput renders as a child element. */\n  inputAsChild?: boolean\n  /** Element or component to render NumberFieldInput as. */\n  inputAs?: string\n  /** Whether NumberFieldIncrement renders as a child element. */\n  incrementAsChild?: boolean\n  /** Element or component to render NumberFieldIncrement as. */\n  incrementAs?: string\n  /** Whether NumberFieldDecrement renders as a child element. */\n  decrementAsChild?: boolean\n  /** Element or component to render NumberFieldDecrement as. */\n  decrementAs?: string\n  class?: ClassValue\n  /** Per-slot classNames override object for custom styling */\n  classNames?: Partial<{\n    base: ClassValue\n    group: ClassValue\n    decrementButton: ClassValue\n    input: ClassValue\n    incrementButton: ClassValue\n  }>\n}>(), {\n  variant: 'flat',\n  size: 'md',\n  color: 'default',\n  fullWidth: false,\n  isInvalid: false,\n  isDisabled: false,\n  isReadonly: false,\n  step: 1,\n  min: undefined,\n  max: undefined,\n  formatOptions: undefined,\n  locale: undefined,\n  label: undefined,\n  ariaLabel: undefined,\n})\n\nconst modelValue = defineModel<number | undefined>()\n\nconst slotFns = computed(() =>\n  numberFieldVariants({\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  })\n)\n\n// Generate a stable id for the input element.\n// NumberFieldRoot forwards this id to the underlying <input> via context.\n// We use this to wire a <label for=\"inputId\"> which is axe-safe regardless\n// of how Reka UI handles attr forwarding through its Primitive component.\nconst generatedInputId = useId()\n// Use caller-provided id if given, otherwise our generated id.\nconst resolvedInputId = computed(() => props.id ?? generatedInputId)\n\n// Whether to show a label element (visible or sr-only).\nconst hasLabel = computed(() => !!(props.label || props.ariaLabel))\n// When only ariaLabel is given (no visible label), the label is sr-only.\nconst isLabelVisible = computed(() => !!props.label)\n</script>\n\n<template>\n  <NumberFieldRoot\n    :id=\"resolvedInputId\"\n    v-model=\"modelValue\"\n    :min=\"props.min\"\n    :max=\"props.max\"\n    :step=\"props.step\"\n    :disabled=\"props.isDisabled || undefined\"\n    :readonly=\"props.isReadonly || undefined\"\n    :format-options=\"props.formatOptions\"\n    :locale=\"props.locale\"\n    :name=\"props.name\"\n    :class=\"composeClassName(slotFns.base(), props.class, props.classNames?.base)\"\n    :data-invalid=\"props.isInvalid || undefined\"\n    :data-disabled=\"props.isDisabled || undefined\"\n    :data-readonly=\"props.isReadonly || undefined\"\n  >\n    <!--\n      Label element — always rendered when `label` or `aria-label` is provided.\n      When only `aria-label` is given (no visible label) the element is sr-only.\n      Uses label[for=resolvedInputId] to wire to the Reka UI input element —\n      this is axe-safe because NumberFieldRoot forwards its `id` prop directly\n      to the underlying <input> via context, making label[for] reliable even\n      though custom attrs passed to NumberFieldInput don't reach the DOM input.\n    -->\n    <label\n      v-if=\"hasLabel\"\n      :for=\"resolvedInputId\"\n      :class=\"isLabelVisible ? undefined : 'sr-only'\"\n      data-slot=\"label\"\n    >{{ props.label || props.ariaLabel }}</label>\n\n    <!-- Number field control group -->\n    <div\n      :class=\"composeClassName(slotFns.group(), props.classNames?.group)\"\n      data-slot=\"group\"\n    >\n      <NumberFieldDecrement :disabled=\"props.isDisabled || undefined\" :class=\"composeClassName(slotFns.decrementButton(), props.classNames?.decrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-decrement-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n        </svg>\n      </NumberFieldDecrement>\n\n      <NumberFieldInput\n        :class=\"composeClassName(slotFns.input(), props.classNames?.input)\"\n        :placeholder=\"props.placeholder\"\n      />\n\n      <NumberFieldIncrement :disabled=\"props.isDisabled || undefined\" :class=\"composeClassName(slotFns.incrementButton(), props.classNames?.incrementButton)\">\n        <svg\n          aria-hidden=\"true\"\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          data-slot=\"number-field-increment-button-icon\"\n        >\n          <path d=\"M5 12h14\" />\n          <path d=\"M12 5v14\" />\n        </svg>\n      </NumberFieldIncrement>\n    </div>\n  </NumberFieldRoot>\n</template>\n"],"mappings":""}