@auronui/vue 1.0.21 → 1.0.23

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":""}

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

@@ -36,6 +36,20 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		placeholder: {},
 		label: { default: void 0 },
 		ariaLabel: { default: void 0 },
+		defaultValue: {},
+		stepSnapping: { type: Boolean },
+		focusOnChange: { type: Boolean },
+		disableWheelChange: { type: Boolean },
+		invertWheelChange: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		required: { type: Boolean },
+		inputAsChild: { type: Boolean },
+		inputAs: {},
+		incrementAsChild: { type: Boolean },
+		incrementAs: {},
+		decrementAsChild: { type: Boolean },
+		decrementAs: {},
 		class: { type: [
 			String,
 			Boolean,
@@ -92,7 +106,10 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					class: normalizeClass(unref(composeClassName)(slotFns.value.group(), props.classNames?.group)),
 					"data-slot": "group"
 				}, [
-					createVNode(unref(NumberFieldDecrement), { class: normalizeClass(unref(composeClassName)(slotFns.value.decrementButton(), props.classNames?.decrementButton)) }, {
+					createVNode(unref(NumberFieldDecrement), {
+						disabled: props.isDisabled || void 0,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.decrementButton(), props.classNames?.decrementButton))
+					}, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -107,12 +124,15 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 							"data-slot": "number-field-decrement-button-icon"
 						}, [createElementVNode("path", { d: "M5 12h14" })], -1)])]),
 						_: 1
-					}, 8, ["class"]),
+					}, 8, ["disabled", "class"]),
 					createVNode(unref(NumberFieldInput), {
 						class: normalizeClass(unref(composeClassName)(slotFns.value.input(), props.classNames?.input)),
 						placeholder: props.placeholder
 					}, null, 8, ["class", "placeholder"]),
-					createVNode(unref(NumberFieldIncrement), { class: normalizeClass(unref(composeClassName)(slotFns.value.incrementButton(), props.classNames?.incrementButton)) }, {
+					createVNode(unref(NumberFieldIncrement), {
+						disabled: props.isDisabled || void 0,
+						class: normalizeClass(unref(composeClassName)(slotFns.value.incrementButton(), props.classNames?.incrementButton))
+					}, {
 						default: withCtx(() => [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
 							"aria-hidden": "true",
 							xmlns: "http://www.w3.org/2000/svg",
@@ -127,7 +147,7 @@ var NumberField_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 							"data-slot": "number-field-increment-button-icon"
 						}, [createElementVNode("path", { d: "M5 12h14" }), createElementVNode("path", { d: "M12 5v14" })], -1)])]),
 						_: 1
-					}, 8, ["class"])
+					}, 8, ["disabled", "class"])
 				], 2)]),
 				_: 1
 			}, 8, [

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

@@ -1 +1 @@
-{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EA6Cd,MAAM,aAAa,SAA+B,SAAA,aAAC;EAEnD,MAAM,UAAU,eACd,oBAAoB;GAClB,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GACnB,CAAA,CACH;EAMA,MAAM,mBAAmB,OAAM;EAE/B,MAAM,kBAAkB,eAAe,MAAM,MAAM,iBAAgB;EAGnE,MAAM,WAAW,eAAe,CAAC,EAAE,MAAM,SAAS,MAAM,WAAU;EAElE,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,MAAK;;uBAIjD,YA8EkB,MAAA,gBAAA,EAAA;IA7Ef,IAAI,gBAAA;gBACI,WAAA;4EAAU,QAAA;IAClB,KAAK,MAAM;IACX,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,UAAU,MAAM,cAAc,KAAA;IAC9B,UAAU,MAAM,cAAc,KAAA;IAC9B,kBAAgB,MAAM;IACtB,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,MAAM,aAAa,KAAA;IACjC,iBAAe,MAAM,cAAc,KAAA;IACnC,iBAAe,MAAM,cAAc,KAAA;;2BAeS,CAJrC,SAAA,SAAA,WAAA,EADR,mBAK6C,SAAA;;KAH1C,KAAK,gBAAA;KACL,OAAK,eAAE,eAAA,QAAiB,KAAA,IAAS,UAAA;KAClC,aAAU;uBACR,MAAM,SAAS,MAAM,UAAS,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAGlC,mBA6CM,OAAA;KA5CH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;KACjE,aAAU;;KAEV,YAgBuB,MAAA,qBAAA,EAAA,EAhBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA,EAAA,EAAA;6BAenG,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;OAbJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;;KAItB,YAGE,MAAA,iBAAA,EAAA;MAFC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;MAChE,aAAa,MAAM;;KAGtB,YAiBuB,MAAA,qBAAA,EAAA,EAjBA,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA,EAAA,EAAA;6BAgBnG,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAfN,mBAeM,OAAA;OAdJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,EAClB,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA"}
+{"version":3,"file":"NumberField.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,MAAM,QAAQ;EAyEd,MAAM,aAAa,SAA+B,SAAA,aAAC;EAEnD,MAAM,UAAU,eACd,oBAAoB;GAClB,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,OAAO,MAAM;GACb,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,YAAY,MAAM;GACnB,CAAA,CACH;EAMA,MAAM,mBAAmB,OAAM;EAE/B,MAAM,kBAAkB,eAAe,MAAM,MAAM,iBAAgB;EAGnE,MAAM,WAAW,eAAe,CAAC,EAAE,MAAM,SAAS,MAAM,WAAU;EAElE,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,MAAK;;uBAIjD,YA8EkB,MAAA,gBAAA,EAAA;IA7Ef,IAAI,gBAAA;gBACI,WAAA;4EAAU,QAAA;IAClB,KAAK,MAAM;IACX,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,UAAU,MAAM,cAAc,KAAA;IAC9B,UAAU,MAAM,cAAc,KAAA;IAC9B,kBAAgB,MAAM;IACtB,QAAQ,MAAM;IACd,MAAM,MAAM;IACZ,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,MAAI,EAAI,MAAM,OAAO,MAAM,YAAY,KAAI,CAAA;IAC3E,gBAAc,MAAM,aAAa,KAAA;IACjC,iBAAe,MAAM,cAAc,KAAA;IACnC,iBAAe,MAAM,cAAc,KAAA;;2BAeS,CAJrC,SAAA,SAAA,WAAA,EADR,mBAK6C,SAAA;;KAH1C,KAAK,gBAAA;KACL,OAAK,eAAE,eAAA,QAAiB,KAAA,IAAS,UAAA;KAClC,aAAU;uBACR,MAAM,SAAS,MAAM,UAAS,EAAA,IAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAGlC,mBA6CM,OAAA;KA5CH,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;KACjE,aAAU;;KAEV,YAgBuB,MAAA,qBAAA,EAAA;MAhBA,UAAU,MAAM,cAAc,KAAA;MAAY,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA;;6BAe7I,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAdN,mBAcM,OAAA;OAbJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA;;;KAItB,YAGE,MAAA,iBAAA,EAAA;MAFC,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,OAAK,EAAI,MAAM,YAAY,MAAK,CAAA;MAChE,aAAa,MAAM;;KAGtB,YAiBuB,MAAA,qBAAA,EAAA;MAjBA,UAAU,MAAM,cAAc,KAAA;MAAY,OAAK,eAAE,MAAA,iBAAgB,CAAC,QAAA,MAAQ,iBAAe,EAAI,MAAM,YAAY,gBAAe,CAAA;;6BAgB7I,CAAA,GAAA,OAAA,OAAA,OAAA,KAAA,CAfN,mBAeM,OAAA;OAdJ,eAAY;OACZ,OAAM;OACN,OAAM;OACN,QAAO;OACP,SAAQ;OACR,MAAK;OACL,QAAO;OACP,gBAAa;OACb,kBAAe;OACf,mBAAgB;OAChB,aAAU;UAEV,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,EAClB,mBAAqB,QAAA,EAAf,GAAE,YAAU,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,CAAA"}

package/dist/components/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, type Ref } from 'vue'\nimport { PaginationRoot } from 'reka-ui'\nimport { paginationVariants, type PaginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { createPaginationContext } from './pagination.context'\n\nconst props = withDefaults(defineProps<{\n  /** Current page number (v-model:page) */\n  page?: number\n  /** Default page for uncontrolled usage */\n  defaultPage?: number\n  /** Number of items per page */\n  itemsPerPage?: number\n  /** Total number of items */\n  totalItems?: number\n  /** Number of sibling pages shown on each side of current page */\n  siblingCount?: number\n  /** Whether to show first/last page edge buttons */\n  showEdges?: boolean\n  /** Size variant */\n  size?: PaginationVariants['size']\n  /** Pagination type: 'numeric' for page numbers, 'cursor' for relay-style */\n  type?: 'numeric' | 'cursor'\n  /** Whether the entire pagination is disabled */\n  disabled?: boolean\n  /** Cursor mode: before cursor value */\n  beforeCursor?: string | null\n  /** Cursor mode: after cursor value */\n  afterCursor?: string | null\n  /** Additional CSS class */\n  class?: string\n}>(), {\n  page: 1,\n  defaultPage: 1,\n  itemsPerPage: 10,\n  totalItems: 0,\n  siblingCount: 2,\n  showEdges: false,\n  size: 'md',\n  type: 'numeric',\n  disabled: false,\n  beforeCursor: null,\n  afterCursor: null,\n})\n\nconst emit = defineEmits<{\n  'update:page': [page: number]\n  'update:cursor': [before: string | null, after: string | null]\n}>()\n\n// Compute total pages — cap at 1 minimum to prevent division edge cases (T-08-03)\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.totalItems / props.itemsPerPage))\n)\n\n// Validate page ∈ [1, totalPages] before propagating (T-08-01)\nfunction handlePageChange(newPage: number) {\n  const safePage = Math.max(1, Math.min(newPage, totalPages.value))\n  emit('update:page', safePage)\n}\n\nfunction handleCursorChange(before: string | null, after: string | null) {\n  emit('update:cursor', before, after)\n}\n\n// Provide context for all child parts\ncreatePaginationContext({\n  page: toRef(props, 'page'),\n  totalItems: toRef(props, 'totalItems'),\n  pageSize: toRef(props, 'itemsPerPage'),\n  totalPages,\n  size: toRef(props, 'size') as Ref<NonNullable<PaginationVariants['size']>>,\n  type: toRef(props, 'type'),\n  disabled: toRef(props, 'disabled'),\n  beforeCursor: toRef(props, 'beforeCursor'),\n  afterCursor: toRef(props, 'afterCursor'),\n  onPageChange: handlePageChange,\n  onCursorChange: handleCursorChange,\n})\n\nconst styles = computed(() => paginationVariants({ size: props.size }))\n</script>\n\n<template>\n  <!--\n    Numeric mode: use Reka UI PaginationRoot for full numeric pagination with ellipsis.\n    Cursor mode: render a plain nav (Reka UI does not support cursor-based pagination).\n  -->\n  <PaginationRoot\n    v-if=\"props.type === 'numeric'\"\n    :page=\"props.page\"\n    :default-page=\"props.defaultPage\"\n    :items-per-page=\"props.itemsPerPage\"\n    :total=\"props.totalItems\"\n    :sibling-count=\"props.siblingCount\"\n    :show-edges=\"props.showEdges\"\n    :disabled=\"props.disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:page=\"handlePageChange\"\n  >\n    <slot />\n  </PaginationRoot>\n\n  <nav\n    v-else\n    :class=\"composeClassName(styles.base(), props.class)\"\n    aria-label=\"Pagination\"\n  >\n    <slot />\n  </nav>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, type Ref } from 'vue'\nimport { PaginationRoot } from 'reka-ui'\nimport { paginationVariants, type PaginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { createPaginationContext } from './pagination.context'\n\nconst props = withDefaults(defineProps<{\n  /** Current page number (v-model:page) */\n  page?: number\n  /** Default page for uncontrolled usage */\n  defaultPage?: number\n  /** Number of items per page */\n  itemsPerPage?: number\n  /** Total number of items */\n  totalItems?: number\n  /** Number of sibling pages shown on each side of current page */\n  siblingCount?: number\n  /** Whether to show first/last page edge buttons */\n  showEdges?: boolean\n  /** Size variant */\n  size?: PaginationVariants['size']\n  /** Pagination type: 'numeric' for page numbers, 'cursor' for relay-style */\n  type?: 'numeric' | 'cursor'\n  /** Whether the entire pagination is disabled */\n  disabled?: boolean\n  /** Cursor mode: before cursor value */\n  beforeCursor?: string | null\n  /** Cursor mode: after cursor value */\n  afterCursor?: string | null\n  /** Additional CSS class */\n  class?: string\n  /** Render as a different element */\n  as?: string\n  /** Merge props onto child element */\n  asChild?: boolean\n}>(), {\n  page: 1,\n  defaultPage: 1,\n  itemsPerPage: 10,\n  totalItems: 0,\n  siblingCount: 2,\n  showEdges: false,\n  size: 'md',\n  type: 'numeric',\n  disabled: false,\n  beforeCursor: null,\n  afterCursor: null,\n})\n\nconst emit = defineEmits<{\n  'update:page': [page: number]\n  'update:cursor': [before: string | null, after: string | null]\n}>()\n\n// Compute total pages — cap at 1 minimum to prevent division edge cases (T-08-03)\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.totalItems / props.itemsPerPage))\n)\n\n// Validate page ∈ [1, totalPages] before propagating (T-08-01)\nfunction handlePageChange(newPage: number) {\n  const safePage = Math.max(1, Math.min(newPage, totalPages.value))\n  emit('update:page', safePage)\n}\n\nfunction handleCursorChange(before: string | null, after: string | null) {\n  emit('update:cursor', before, after)\n}\n\n// Provide context for all child parts\ncreatePaginationContext({\n  page: toRef(props, 'page'),\n  totalItems: toRef(props, 'totalItems'),\n  pageSize: toRef(props, 'itemsPerPage'),\n  totalPages,\n  size: toRef(props, 'size') as Ref<NonNullable<PaginationVariants['size']>>,\n  type: toRef(props, 'type'),\n  disabled: toRef(props, 'disabled'),\n  beforeCursor: toRef(props, 'beforeCursor'),\n  afterCursor: toRef(props, 'afterCursor'),\n  onPageChange: handlePageChange,\n  onCursorChange: handleCursorChange,\n})\n\nconst styles = computed(() => paginationVariants({ size: props.size }))\n</script>\n\n<template>\n  <!--\n    Numeric mode: use Reka UI PaginationRoot for full numeric pagination with ellipsis.\n    Cursor mode: render a plain nav (Reka UI does not support cursor-based pagination).\n  -->\n  <PaginationRoot\n    v-if=\"props.type === 'numeric'\"\n    :page=\"props.page\"\n    :default-page=\"props.defaultPage\"\n    :items-per-page=\"props.itemsPerPage\"\n    :total=\"props.totalItems\"\n    :sibling-count=\"props.siblingCount\"\n    :show-edges=\"props.showEdges\"\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:page=\"handlePageChange\"\n  >\n    <slot />\n  </PaginationRoot>\n\n  <nav\n    v-else\n    :class=\"composeClassName(styles.base(), props.class)\"\n    aria-label=\"Pagination\"\n  >\n    <slot />\n  </nav>\n</template>\n"],"mappings":""}

package/dist/components/pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -24,7 +24,9 @@ var Pagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		},
 		beforeCursor: { default: null },
 		afterCursor: { default: null },
-		class: {}
+		class: {},
+		as: {},
+		asChild: { type: Boolean }
 	},
 	emits: ["update:page", "update:cursor"],
 	setup(__props, { emit: __emit }) {
@@ -61,6 +63,8 @@ var Pagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"sibling-count": props.siblingCount,
 				"show-edges": props.showEdges,
 				disabled: props.disabled,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(styles.value.base(), props.class)),
 				"onUpdate:page": handlePageChange
 			}, {
@@ -74,6 +78,8 @@ var Pagination_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				"sibling-count",
 				"show-edges",
 				"disabled",
+				"as",
+				"as-child",
 				"class"
 			])) : (openBlock(), createElementBlock("nav", {
 				key: 1,

package/dist/components/pagination/Pagination.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/pagination/Pagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, type Ref } from 'vue'\nimport { PaginationRoot } from 'reka-ui'\nimport { paginationVariants, type PaginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { createPaginationContext } from './pagination.context'\n\nconst props = withDefaults(defineProps<{\n  /** Current page number (v-model:page) */\n  page?: number\n  /** Default page for uncontrolled usage */\n  defaultPage?: number\n  /** Number of items per page */\n  itemsPerPage?: number\n  /** Total number of items */\n  totalItems?: number\n  /** Number of sibling pages shown on each side of current page */\n  siblingCount?: number\n  /** Whether to show first/last page edge buttons */\n  showEdges?: boolean\n  /** Size variant */\n  size?: PaginationVariants['size']\n  /** Pagination type: 'numeric' for page numbers, 'cursor' for relay-style */\n  type?: 'numeric' | 'cursor'\n  /** Whether the entire pagination is disabled */\n  disabled?: boolean\n  /** Cursor mode: before cursor value */\n  beforeCursor?: string | null\n  /** Cursor mode: after cursor value */\n  afterCursor?: string | null\n  /** Additional CSS class */\n  class?: string\n}>(), {\n  page: 1,\n  defaultPage: 1,\n  itemsPerPage: 10,\n  totalItems: 0,\n  siblingCount: 2,\n  showEdges: false,\n  size: 'md',\n  type: 'numeric',\n  disabled: false,\n  beforeCursor: null,\n  afterCursor: null,\n})\n\nconst emit = defineEmits<{\n  'update:page': [page: number]\n  'update:cursor': [before: string | null, after: string | null]\n}>()\n\n// Compute total pages — cap at 1 minimum to prevent division edge cases (T-08-03)\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.totalItems / props.itemsPerPage))\n)\n\n// Validate page ∈ [1, totalPages] before propagating (T-08-01)\nfunction handlePageChange(newPage: number) {\n  const safePage = Math.max(1, Math.min(newPage, totalPages.value))\n  emit('update:page', safePage)\n}\n\nfunction handleCursorChange(before: string | null, after: string | null) {\n  emit('update:cursor', before, after)\n}\n\n// Provide context for all child parts\ncreatePaginationContext({\n  page: toRef(props, 'page'),\n  totalItems: toRef(props, 'totalItems'),\n  pageSize: toRef(props, 'itemsPerPage'),\n  totalPages,\n  size: toRef(props, 'size') as Ref<NonNullable<PaginationVariants['size']>>,\n  type: toRef(props, 'type'),\n  disabled: toRef(props, 'disabled'),\n  beforeCursor: toRef(props, 'beforeCursor'),\n  afterCursor: toRef(props, 'afterCursor'),\n  onPageChange: handlePageChange,\n  onCursorChange: handleCursorChange,\n})\n\nconst styles = computed(() => paginationVariants({ size: props.size }))\n</script>\n\n<template>\n  <!--\n    Numeric mode: use Reka UI PaginationRoot for full numeric pagination with ellipsis.\n    Cursor mode: render a plain nav (Reka UI does not support cursor-based pagination).\n  -->\n  <PaginationRoot\n    v-if=\"props.type === 'numeric'\"\n    :page=\"props.page\"\n    :default-page=\"props.defaultPage\"\n    :items-per-page=\"props.itemsPerPage\"\n    :total=\"props.totalItems\"\n    :sibling-count=\"props.siblingCount\"\n    :show-edges=\"props.showEdges\"\n    :disabled=\"props.disabled\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:page=\"handlePageChange\"\n  >\n    <slot />\n  </PaginationRoot>\n\n  <nav\n    v-else\n    :class=\"composeClassName(styles.base(), props.class)\"\n    aria-label=\"Pagination\"\n  >\n    <slot />\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAuCd,MAAM,OAAO;EAMb,MAAM,aAAa,eACjB,KAAK,IAAI,GAAG,KAAK,KAAK,MAAM,aAAa,MAAM,aAAa,CAAA,CAC9D;EAGA,SAAS,iBAAiB,SAAiB;AAEzC,QAAK,eADY,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,WAAW,MAAM,CAAA,CACpC;;EAG9B,SAAS,mBAAmB,QAAuB,OAAsB;AACvE,QAAK,iBAAiB,QAAQ,MAAK;;AAIrC,0BAAwB;GACtB,MAAM,MAAM,OAAO,OAAO;GAC1B,YAAY,MAAM,OAAO,aAAa;GACtC,UAAU,MAAM,OAAO,eAAe;GACtC;GACA,MAAM,MAAM,OAAO,OAAO;GAC1B,MAAM,MAAM,OAAO,OAAO;GAC1B,UAAU,MAAM,OAAO,WAAW;GAClC,cAAc,MAAM,OAAO,eAAe;GAC1C,aAAa,MAAM,OAAO,cAAc;GACxC,cAAc;GACd,gBAAgB;GACjB,CAAA;EAED,MAAM,SAAS,eAAe,mBAAmB,EAAE,MAAM,MAAM,MAAM,CAAC,CAAA;;UAS5D,MAAM,SAAI,aAAA,WAAA,EADlB,YAaiB,MAAA,eAAA,EAAA;;IAXd,MAAM,MAAM;IACZ,gBAAc,MAAM;IACpB,kBAAgB,MAAM;IACtB,OAAO,MAAM;IACb,iBAAe,MAAM;IACrB,cAAY,MAAM;IAClB,UAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,iBAAa;;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;uBAGV,mBAMM,OAAA;;IAJH,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,cAAW;OAEX,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"Pagination.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/pagination/Pagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, toRef, type Ref } from 'vue'\nimport { PaginationRoot } from 'reka-ui'\nimport { paginationVariants, type PaginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { createPaginationContext } from './pagination.context'\n\nconst props = withDefaults(defineProps<{\n  /** Current page number (v-model:page) */\n  page?: number\n  /** Default page for uncontrolled usage */\n  defaultPage?: number\n  /** Number of items per page */\n  itemsPerPage?: number\n  /** Total number of items */\n  totalItems?: number\n  /** Number of sibling pages shown on each side of current page */\n  siblingCount?: number\n  /** Whether to show first/last page edge buttons */\n  showEdges?: boolean\n  /** Size variant */\n  size?: PaginationVariants['size']\n  /** Pagination type: 'numeric' for page numbers, 'cursor' for relay-style */\n  type?: 'numeric' | 'cursor'\n  /** Whether the entire pagination is disabled */\n  disabled?: boolean\n  /** Cursor mode: before cursor value */\n  beforeCursor?: string | null\n  /** Cursor mode: after cursor value */\n  afterCursor?: string | null\n  /** Additional CSS class */\n  class?: string\n  /** Render as a different element */\n  as?: string\n  /** Merge props onto child element */\n  asChild?: boolean\n}>(), {\n  page: 1,\n  defaultPage: 1,\n  itemsPerPage: 10,\n  totalItems: 0,\n  siblingCount: 2,\n  showEdges: false,\n  size: 'md',\n  type: 'numeric',\n  disabled: false,\n  beforeCursor: null,\n  afterCursor: null,\n})\n\nconst emit = defineEmits<{\n  'update:page': [page: number]\n  'update:cursor': [before: string | null, after: string | null]\n}>()\n\n// Compute total pages — cap at 1 minimum to prevent division edge cases (T-08-03)\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.totalItems / props.itemsPerPage))\n)\n\n// Validate page ∈ [1, totalPages] before propagating (T-08-01)\nfunction handlePageChange(newPage: number) {\n  const safePage = Math.max(1, Math.min(newPage, totalPages.value))\n  emit('update:page', safePage)\n}\n\nfunction handleCursorChange(before: string | null, after: string | null) {\n  emit('update:cursor', before, after)\n}\n\n// Provide context for all child parts\ncreatePaginationContext({\n  page: toRef(props, 'page'),\n  totalItems: toRef(props, 'totalItems'),\n  pageSize: toRef(props, 'itemsPerPage'),\n  totalPages,\n  size: toRef(props, 'size') as Ref<NonNullable<PaginationVariants['size']>>,\n  type: toRef(props, 'type'),\n  disabled: toRef(props, 'disabled'),\n  beforeCursor: toRef(props, 'beforeCursor'),\n  afterCursor: toRef(props, 'afterCursor'),\n  onPageChange: handlePageChange,\n  onCursorChange: handleCursorChange,\n})\n\nconst styles = computed(() => paginationVariants({ size: props.size }))\n</script>\n\n<template>\n  <!--\n    Numeric mode: use Reka UI PaginationRoot for full numeric pagination with ellipsis.\n    Cursor mode: render a plain nav (Reka UI does not support cursor-based pagination).\n  -->\n  <PaginationRoot\n    v-if=\"props.type === 'numeric'\"\n    :page=\"props.page\"\n    :default-page=\"props.defaultPage\"\n    :items-per-page=\"props.itemsPerPage\"\n    :total=\"props.totalItems\"\n    :sibling-count=\"props.siblingCount\"\n    :show-edges=\"props.showEdges\"\n    :disabled=\"props.disabled\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.base(), props.class)\"\n    @update:page=\"handlePageChange\"\n  >\n    <slot />\n  </PaginationRoot>\n\n  <nav\n    v-else\n    :class=\"composeClassName(styles.base(), props.class)\"\n    aria-label=\"Pagination\"\n  >\n    <slot />\n  </nav>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EA2Cd,MAAM,OAAO;EAMb,MAAM,aAAa,eACjB,KAAK,IAAI,GAAG,KAAK,KAAK,MAAM,aAAa,MAAM,aAAa,CAAA,CAC9D;EAGA,SAAS,iBAAiB,SAAiB;AAEzC,QAAK,eADY,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,WAAW,MAAM,CAAA,CACpC;;EAG9B,SAAS,mBAAmB,QAAuB,OAAsB;AACvE,QAAK,iBAAiB,QAAQ,MAAK;;AAIrC,0BAAwB;GACtB,MAAM,MAAM,OAAO,OAAO;GAC1B,YAAY,MAAM,OAAO,aAAa;GACtC,UAAU,MAAM,OAAO,eAAe;GACtC;GACA,MAAM,MAAM,OAAO,OAAO;GAC1B,MAAM,MAAM,OAAO,OAAO;GAC1B,UAAU,MAAM,OAAO,WAAW;GAClC,cAAc,MAAM,OAAO,eAAe;GAC1C,aAAa,MAAM,OAAO,cAAc;GACxC,cAAc;GACd,gBAAgB;GACjB,CAAA;EAED,MAAM,SAAS,eAAe,mBAAmB,EAAE,MAAM,MAAM,MAAM,CAAC,CAAA;;UAS5D,MAAM,SAAI,aAAA,WAAA,EADlB,YAeiB,MAAA,eAAA,EAAA;;IAbd,MAAM,MAAM;IACZ,gBAAc,MAAM;IACpB,kBAAgB,MAAM;IACtB,OAAO,MAAM;IACb,iBAAe,MAAM;IACrB,cAAY,MAAM;IAClB,UAAU,MAAM;IAChB,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IAClD,iBAAa;;2BAEN,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;;;;;;uBAGV,mBAMM,OAAA;;IAJH,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAI,MAAM,MAAK,CAAA;IACnD,cAAW;OAEX,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/components/pagination/PaginationContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContent.js","names":[],"sources":["../../../src/components/pagination/PaginationContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PaginationList } from 'reka-ui'\nimport { paginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { usePaginationInject, paginationContextDefaults } from './pagination.context'\n\nconst props = defineProps<{\n  class?: string\n}>()\n\nconst ctx = usePaginationInject(paginationContextDefaults)\n\nconst styles = computed(() => paginationVariants({ size: ctx.size.value }))\n\nconst hasPreviousPage = computed(() => ctx.beforeCursor.value !== null)\nconst hasNextPage = computed(() => ctx.afterCursor.value !== null)\n</script>\n\n<template>\n  <!-- Numeric mode: delegate to Reka UI PaginationList which computes the range -->\n  <PaginationList\n    v-if=\"ctx.type.value === 'numeric'\"\n    v-slot=\"{ items }\"\n    :class=\"composeClassName(styles.content(), props.class)\"\n  >\n    <slot :items=\"items\" />\n  </PaginationList>\n\n  <!-- Cursor mode: render Before / page info / After layout -->\n  <div\n    v-else\n    :class=\"composeClassName(styles.content(), props.class)\"\n    role=\"group\"\n    aria-label=\"Cursor pagination\"\n  >\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasPreviousPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasPreviousPage || ctx.disabled.value) || undefined\"\n      aria-label=\"Before page\"\n      @click=\"ctx.onCursorChange(ctx.beforeCursor.value, null)\"\n    >\n      <slot name=\"before\">\n        Before\n      </slot>\n    </button>\n\n    <span :class=\"styles.summary?.()\">\n      <slot name=\"page-info\">Page {{ ctx.page.value }}</slot>\n    </span>\n\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasNextPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasNextPage || ctx.disabled.value) || undefined\"\n      aria-label=\"After page\"\n      @click=\"ctx.onCursorChange(null, ctx.afterCursor.value)\"\n    >\n      <slot name=\"after\">\n        After\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"PaginationContent.js","names":[],"sources":["../../../src/components/pagination/PaginationContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PaginationList } from 'reka-ui'\nimport { paginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { usePaginationInject, paginationContextDefaults } from './pagination.context'\n\nconst props = defineProps<{\n  class?: string\n  /** Render as a different element */\n  as?: string\n  /** Merge props onto child element */\n  asChild?: boolean\n}>()\n\nconst ctx = usePaginationInject(paginationContextDefaults)\n\nconst styles = computed(() => paginationVariants({ size: ctx.size.value }))\n\nconst hasPreviousPage = computed(() => ctx.beforeCursor.value !== null)\nconst hasNextPage = computed(() => ctx.afterCursor.value !== null)\n</script>\n\n<template>\n  <!-- Numeric mode: delegate to Reka UI PaginationList which computes the range -->\n  <PaginationList\n    v-if=\"ctx.type.value === 'numeric'\"\n    v-slot=\"{ items }\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.content(), props.class)\"\n  >\n    <slot :items=\"items\" />\n  </PaginationList>\n\n  <!-- Cursor mode: render Before / page info / After layout -->\n  <div\n    v-else\n    :class=\"composeClassName(styles.content(), props.class)\"\n    role=\"group\"\n    aria-label=\"Cursor pagination\"\n  >\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasPreviousPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasPreviousPage || ctx.disabled.value) || undefined\"\n      aria-label=\"Before page\"\n      @click=\"ctx.onCursorChange(ctx.beforeCursor.value, null)\"\n    >\n      <slot name=\"before\">\n        Before\n      </slot>\n    </button>\n\n    <span :class=\"styles.summary?.()\">\n      <slot name=\"page-info\">Page {{ ctx.page.value }}</slot>\n    </span>\n\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasNextPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasNextPage || ctx.disabled.value) || undefined\"\n      aria-label=\"After page\"\n      @click=\"ctx.onCursorChange(null, ctx.afterCursor.value)\"\n    >\n      <slot name=\"after\">\n        After\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/pagination/PaginationContent.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,11 @@ var _hoisted_1 = ["disabled", "data-disabled"];
 var _hoisted_2 = ["disabled", "data-disabled"];
 var PaginationContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "PaginationContent",
-	props: { class: {} },
+	props: {
+		class: {},
+		as: {},
+		asChild: { type: Boolean }
+	},
 	setup(__props) {
 		const props = __props;
 		const ctx = usePaginationInject(paginationContextDefaults);
@@ -18,11 +22,17 @@ var PaginationContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		return (_ctx, _cache) => {
 			return unref(ctx).type.value === "numeric" ? (openBlock(), createBlock(unref(PaginationList), {
 				key: 0,
+				as: props.as,
+				"as-child": props.asChild,
 				class: normalizeClass(unref(composeClassName)(styles.value.content(), props.class))
 			}, {
 				default: withCtx(({ items }) => [renderSlot(_ctx.$slots, "default", { items })]),
 				_: 3
-			}, 8, ["class"])) : (openBlock(), createElementBlock("div", {
+			}, 8, [
+				"as",
+				"as-child",
+				"class"
+			])) : (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(unref(composeClassName)(styles.value.content(), props.class)),
 				role: "group",

package/dist/components/pagination/PaginationContent.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/pagination/PaginationContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PaginationList } from 'reka-ui'\nimport { paginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { usePaginationInject, paginationContextDefaults } from './pagination.context'\n\nconst props = defineProps<{\n  class?: string\n}>()\n\nconst ctx = usePaginationInject(paginationContextDefaults)\n\nconst styles = computed(() => paginationVariants({ size: ctx.size.value }))\n\nconst hasPreviousPage = computed(() => ctx.beforeCursor.value !== null)\nconst hasNextPage = computed(() => ctx.afterCursor.value !== null)\n</script>\n\n<template>\n  <!-- Numeric mode: delegate to Reka UI PaginationList which computes the range -->\n  <PaginationList\n    v-if=\"ctx.type.value === 'numeric'\"\n    v-slot=\"{ items }\"\n    :class=\"composeClassName(styles.content(), props.class)\"\n  >\n    <slot :items=\"items\" />\n  </PaginationList>\n\n  <!-- Cursor mode: render Before / page info / After layout -->\n  <div\n    v-else\n    :class=\"composeClassName(styles.content(), props.class)\"\n    role=\"group\"\n    aria-label=\"Cursor pagination\"\n  >\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasPreviousPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasPreviousPage || ctx.disabled.value) || undefined\"\n      aria-label=\"Before page\"\n      @click=\"ctx.onCursorChange(ctx.beforeCursor.value, null)\"\n    >\n      <slot name=\"before\">\n        Before\n      </slot>\n    </button>\n\n    <span :class=\"styles.summary?.()\">\n      <slot name=\"page-info\">Page {{ ctx.page.value }}</slot>\n    </span>\n\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasNextPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasNextPage || ctx.disabled.value) || undefined\"\n      aria-label=\"After page\"\n      @click=\"ctx.onCursorChange(null, ctx.afterCursor.value)\"\n    >\n      <slot name=\"after\">\n        After\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;EAOA,MAAM,QAAQ;EAId,MAAM,MAAM,oBAAoB,0BAAyB;EAEzD,MAAM,SAAS,eAAe,mBAAmB,EAAE,MAAM,IAAI,KAAK,OAAO,CAAC,CAAA;EAE1E,MAAM,kBAAkB,eAAe,IAAI,aAAa,UAAU,KAAI;EACtE,MAAM,cAAc,eAAe,IAAI,YAAY,UAAU,KAAI;;UAMvD,MAAA,IAAG,CAAC,KAAK,UAAK,aAAA,WAAA,EADtB,YAMiB,MAAA,eAAA,EAAA;;IAHd,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,SAAO,EAAI,MAAM,MAAK,CAAA;;sBAE/B,EAHb,YAAK,CAGf,WAAuB,KAAA,QAAA,WAAA,EAAT,OAAK,CAAA,CAAA,CAAA;;qCAIrB,mBAmCM,OAAA;;IAjCH,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,SAAO,EAAI,MAAM,MAAK,CAAA;IACtD,MAAK;IACL,cAAW;;IAEX,mBAWS,UAAA;KAVP,MAAK;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAA,wBAAA,CAAA;KACnC,UAAQ,CAAG,gBAAA,SAAmB,MAAA,IAAG,CAAC,SAAS;KAC3C,iBAAa,CAAI,gBAAA,SAAmB,MAAA,IAAG,CAAC,SAAS,SAAU,KAAA;KAC5D,cAAW;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,eAAe,MAAA,IAAG,CAAC,aAAa,OAAK,KAAA;QAEjD,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFa,YAEpB,GAAA,EAAA,CAAA,CAAA,EAAA,IAAA,WAAA;IAGF,mBAEO,QAAA,EAFA,OAAK,eAAE,OAAA,MAAO,WAAO,CAAA,EAAA,EAAA,CAC1B,WAAuD,KAAA,QAAA,aAAA,EAAA,QAAA,CAAA,gBAAhC,UAAK,gBAAG,MAAA,IAAG,CAAC,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;IAG/C,mBAWS,UAAA;KAVP,MAAK;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAA,wBAAA,CAAA;KACnC,UAAQ,CAAG,YAAA,SAAe,MAAA,IAAG,CAAC,SAAS;KACvC,iBAAa,CAAI,YAAA,SAAe,MAAA,IAAG,CAAC,SAAS,SAAU,KAAA;KACxD,cAAW;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,eAAc,MAAO,MAAA,IAAG,CAAC,YAAY,MAAK;QAEtD,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFY,WAEnB,GAAA,EAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}
+{"version":3,"file":"PaginationContent.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/pagination/PaginationContent.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { PaginationList } from 'reka-ui'\nimport { paginationVariants } from '@auronui/styles'\nimport { composeClassName } from '../../utils/composeClassName'\nimport { usePaginationInject, paginationContextDefaults } from './pagination.context'\n\nconst props = defineProps<{\n  class?: string\n  /** Render as a different element */\n  as?: string\n  /** Merge props onto child element */\n  asChild?: boolean\n}>()\n\nconst ctx = usePaginationInject(paginationContextDefaults)\n\nconst styles = computed(() => paginationVariants({ size: ctx.size.value }))\n\nconst hasPreviousPage = computed(() => ctx.beforeCursor.value !== null)\nconst hasNextPage = computed(() => ctx.afterCursor.value !== null)\n</script>\n\n<template>\n  <!-- Numeric mode: delegate to Reka UI PaginationList which computes the range -->\n  <PaginationList\n    v-if=\"ctx.type.value === 'numeric'\"\n    v-slot=\"{ items }\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"composeClassName(styles.content(), props.class)\"\n  >\n    <slot :items=\"items\" />\n  </PaginationList>\n\n  <!-- Cursor mode: render Before / page info / After layout -->\n  <div\n    v-else\n    :class=\"composeClassName(styles.content(), props.class)\"\n    role=\"group\"\n    aria-label=\"Cursor pagination\"\n  >\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasPreviousPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasPreviousPage || ctx.disabled.value) || undefined\"\n      aria-label=\"Before page\"\n      @click=\"ctx.onCursorChange(ctx.beforeCursor.value, null)\"\n    >\n      <slot name=\"before\">\n        Before\n      </slot>\n    </button>\n\n    <span :class=\"styles.summary?.()\">\n      <slot name=\"page-info\">Page {{ ctx.page.value }}</slot>\n    </span>\n\n    <button\n      type=\"button\"\n      :class=\"composeClassName(styles.link(), 'pagination__link--nav')\"\n      :disabled=\"!hasNextPage || ctx.disabled.value\"\n      :data-disabled=\"(!hasNextPage || ctx.disabled.value) || undefined\"\n      aria-label=\"After page\"\n      @click=\"ctx.onCursorChange(null, ctx.afterCursor.value)\"\n    >\n      <slot name=\"after\">\n        After\n      </slot>\n    </button>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAOA,MAAM,QAAQ;EAQd,MAAM,MAAM,oBAAoB,0BAAyB;EAEzD,MAAM,SAAS,eAAe,mBAAmB,EAAE,MAAM,IAAI,KAAK,OAAO,CAAC,CAAA;EAE1E,MAAM,kBAAkB,eAAe,IAAI,aAAa,UAAU,KAAI;EACtE,MAAM,cAAc,eAAe,IAAI,YAAY,UAAU,KAAI;;UAMvD,MAAA,IAAG,CAAC,KAAK,UAAK,aAAA,WAAA,EADtB,YAQiB,MAAA,eAAA,EAAA;;IALd,IAAI,MAAM;IACV,YAAU,MAAM;IAChB,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,SAAO,EAAI,MAAM,MAAK,CAAA;;sBAE/B,EALb,YAAK,CAKf,WAAuB,KAAA,QAAA,WAAA,EAAT,OAAK,CAAA,CAAA,CAAA;;;;;;uBAIrB,mBAmCM,OAAA;;IAjCH,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,SAAO,EAAI,MAAM,MAAK,CAAA;IACtD,MAAK;IACL,cAAW;;IAEX,mBAWS,UAAA;KAVP,MAAK;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAA,wBAAA,CAAA;KACnC,UAAQ,CAAG,gBAAA,SAAmB,MAAA,IAAG,CAAC,SAAS;KAC3C,iBAAa,CAAI,gBAAA,SAAmB,MAAA,IAAG,CAAC,SAAS,SAAU,KAAA;KAC5D,cAAW;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,eAAe,MAAA,IAAG,CAAC,aAAa,OAAK,KAAA;QAEjD,WAEO,KAAA,QAAA,UAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFa,YAEpB,GAAA,EAAA,CAAA,CAAA,EAAA,IAAA,WAAA;IAGF,mBAEO,QAAA,EAFA,OAAK,eAAE,OAAA,MAAO,WAAO,CAAA,EAAA,EAAA,CAC1B,WAAuD,KAAA,QAAA,aAAA,EAAA,QAAA,CAAA,gBAAhC,UAAK,gBAAG,MAAA,IAAG,CAAC,KAAK,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;IAG/C,mBAWS,UAAA;KAVP,MAAK;KACJ,OAAK,eAAE,MAAA,iBAAgB,CAAC,OAAA,MAAO,MAAI,EAAA,wBAAA,CAAA;KACnC,UAAQ,CAAG,YAAA,SAAe,MAAA,IAAG,CAAC,SAAS;KACvC,iBAAa,CAAI,YAAA,SAAe,MAAA,IAAG,CAAC,SAAS,SAAU,KAAA;KACxD,cAAW;KACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,IAAG,CAAC,eAAc,MAAO,MAAA,IAAG,CAAC,YAAY,MAAK;QAEtD,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAFY,WAEnB,GAAA,EAAA,CAAA,CAAA,EAAA,IAAA,WAAA"}