@astryx-vue/core 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 astryx-vue contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,54 @@
-# Temporary Holding Version
+# @astryx-vue/core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue components for astryx-vue.
+
+Docs: <https://astryx-vue.pages.dev>
+
+```bash
+pnpm add @astryx-vue/core @astryx-vue/themes
+```
+
+Component entries load structural styles. Import a theme once at the app entry. To load every structural stylesheet yourself, also import `@astryx-vue/core/styles.css`.
+
+```ts
+import { Badge } from '@astryx-vue/core/Badge'
+import '@astryx-vue/core/styles.css'
+import '@astryx-vue/themes/neutral.css'
+```
+
+```vue
+<script setup lang="ts">
+import { Badge } from '@astryx-vue/core/Badge'
+</script>
+
+<template>
+  <Badge variant="success">
+    Ready
+  </Badge>
+</template>
+```
+
+Text inputs include their own label, description and validation status:
+
+```vue
+<script setup lang="ts">
+import { TextInput } from '@astryx-vue/core/TextInput'
+import { shallowRef } from 'vue'
+
+const email = shallowRef('')
+</script>
+
+<template>
+  <TextInput v-model="email" label="Email" type="email" auto-complete="email" />
+</template>
+```
+
+Use `Field` and `FieldLabel` from `@astryx-vue/core/Field`, and `FieldStatus` from `@astryx-vue/core/FieldStatus`, for custom controls. `Field` supplies association IDs through its default slot; forward them to the control's `id`, `aria-labelledby` and `aria-describedby`.
+
+`TextInput` supports clear buttons, disabled reasons, read-only values, three sizes, status messages and asynchronous `changeAction`. Use `@action-error` to handle failed actions. Inputs remain editable while actions are pending; request cancellation and stale-result handling belong to the application.
+
+`CheckboxInput` from `@astryx-vue/core/CheckboxInput` supports `v-model` with `boolean | 'indeterminate'`. It includes a label, description, validation status, disabled reasons, native form submission and asynchronous `changeAction`. Pending actions block repeat activation. Failures emit `actionError`; the application decides whether to revert the model. `CheckboxIndicator` from `@astryx-vue/core/CheckboxIndicator` provides the decorative visual without input behavior.
+
+`Slider` from `@astryx-vue/core/Slider` accepts a numeric `v-model` or a `[number, number]` range. It supports marks, horizontal and vertical orientation, keyboard controls, value formatting, form values and disabled reasons. `changeEnd` fires when an adjustment ends.
+
+`Banner` from `@astryx-vue/core/Banner` shows persistent info, success, warning or error messages. It supports actions, dismissal, card and section containers, and optional details. Use `v-model:is-open` to control the details or `:collapsible="false"` to keep them visible.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,41 @@
+# Third-party notices
+
+## Astryx
+
+This project is an unofficial community Vue port based on the public Astryx project:
+
+- Repository: <https://github.com/facebook/astryx>
+- Version used for the first round: `v0.4.1`
+- Commit: `96f9917fe013a7062a403c58e54dfd47f482d89f`
+- License: MIT
+- Copyright: (c) 2026 Meta Platforms, Inc.
+
+The TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner and Field family added in October 2026 also references the upstream implementation at commit `92779d3fbd0f12e659203c7d719d5bb00935060c`, including TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner, Field, FieldLabel, FieldStatus and the shared input styles. Their public behavior and visual structure are adapted into native Vue components under the same MIT license. The Vue model/events, scoped slots and async-state implementation are local adaptations.
+
+When files or substantial portions are copied or adapted, their original copyright and license notices must be kept here or alongside the adapted files.
+
+No Meta trademarks, logos, or endorsement are granted by the Astryx software license.
+
+## Astryx license text
+
+MIT License
+
+Copyright (c) 2026 Meta Platforms, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/css.d.ts

@@ -0,0 +1,3 @@
+declare const stylesheet: string
+
+export default stylesheet

package/dist/AlertDialog/index.d.ts

@@ -0,0 +1,2 @@
+import { a as AlertDialogActionVariant, c as AlertDialogProps, i as _default, l as AlertDialogSlots, n as ImperativeAlertDialogReturn, o as AlertDialogEmits, r as useImperativeAlertDialog, s as AlertDialogLayout, t as ImperativeAlertDialogOptions } from "../index-CGEC2zgy.js";
+export { _default as AlertDialog, type AlertDialogActionVariant, type AlertDialogEmits, type AlertDialogLayout, type AlertDialogProps, type AlertDialogSlots, type ImperativeAlertDialogOptions, type ImperativeAlertDialogReturn, useImperativeAlertDialog };

package/dist/AlertDialog/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as useImperativeAlertDialog } from "../AlertDialog-BylcA4vV.js";
+export { _sfc_main as AlertDialog, useImperativeAlertDialog };

package/dist/AlertDialog-BylcA4vV.js

@@ -0,0 +1,211 @@
+import { t as _sfc_main$1 } from "./Button-DrqeomlE.js";
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { t as _sfc_main$2 } from "./Dialog-rfUt3y8P.js";
+import { t as _sfc_main$3 } from "./Heading-Dugosn6j.js";
+import { t as _sfc_main$4 } from "./Stack-gGcYdOAh.js";
+import { t as _sfc_main$5 } from "./Text-CKd7e3gK.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, mergeProps, normalizeClass, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import "../styles/alert-dialog.css";
+//#region src/AlertDialog/context.ts
+const ALERT_DIALOG_CONTEXT_KEY = Symbol("astryx-alert-dialog");
+//#endregion
+//#region src/AlertDialog/AlertDialog.vue
+const _hoisted_1 = { class: "astryx-alert-dialog__content" };
+const _hoisted_2 = { class: "astryx-alert-dialog__footer" };
+/**
+* Order is part of the contract, not just the visual: on a narrow screen the
+* destructive action sits above Cancel so visual, DOM, and tab order agree,
+* while Cancel keeps the initial focus because it is the safe choice.
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxAlertDialog",
+	inheritAttrs: false,
+	__name: "AlertDialog",
+	props: {
+		isOpen: { type: Boolean },
+		isInline: {
+			type: Boolean,
+			default: false
+		},
+		title: {},
+		description: {},
+		cancelLabel: { default: "Cancel" },
+		actionLabel: {},
+		actionVariant: { default: "destructive" },
+		isActionLoading: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: 400 }
+	},
+	emits: ["openChange", "action"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const titleId = `astryx-alert-dialog-title-${useId()}`;
+		const descriptionId = `astryx-alert-dialog-description-${useId()}`;
+		const isSmallScreen = useMediaQuery("(max-width: 640px)");
+		provide(ALERT_DIALOG_CONTEXT_KEY, {
+			descriptionId,
+			isSmallScreen,
+			titleId
+		});
+		const dialog = useTemplateRef("dialog");
+		const element = computed(() => {
+			const rendered = dialog.value?.$el;
+			return rendered instanceof HTMLElement ? rendered : null;
+		});
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function blur() {
+			element.value?.blur();
+		}
+		__expose({
+			element,
+			focus,
+			blur
+		});
+		const actions = computed(() => {
+			const cancel = {
+				autofocus: "",
+				className: "astryx-alert-dialog__action astryx-alert-dialog__action--cancel",
+				isLoading: false,
+				key: "cancel",
+				label: props.cancelLabel,
+				variant: "ghost",
+				onClick: () => emit("openChange", false)
+			};
+			const confirm = {
+				className: "astryx-alert-dialog__action astryx-alert-dialog__action--confirm",
+				isLoading: props.isActionLoading,
+				key: "confirm",
+				label: props.actionLabel,
+				variant: props.actionVariant,
+				onClick: (event) => emit("action", event)
+			};
+			return isSmallScreen.value ? [confirm, cancel] : [cancel, confirm];
+		});
+		const dialogRole = computed(() => props.isInline ? "group" : "alertdialog");
+		const layout = computed(() => isSmallScreen.value ? "stacked" : "row");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$2, mergeProps({
+				ref_key: "dialog",
+				ref: dialog
+			}, _ctx.$attrs, {
+				class: "astryx-alert-dialog",
+				"aria-describedby": descriptionId,
+				"aria-labelledby": titleId,
+				"data-layout": layout.value,
+				"is-inline": __props.isInline,
+				"is-open": __props.isOpen,
+				purpose: "form",
+				role: dialogRole.value,
+				width: __props.width,
+				onOpenChange: _cache[0] || (_cache[0] = ($event) => emit("openChange", $event))
+			}), {
+				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(_sfc_main$3, {
+					id: titleId,
+					class: "astryx-alert-dialog__title",
+					level: 2
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])]),
+					_: 3
+				}), createVNode(_sfc_main$5, {
+					id: descriptionId,
+					as: "div",
+					class: "astryx-alert-dialog__description",
+					color: "secondary",
+					type: "body"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])]),
+					_: 3
+				})]), createElementVNode("div", _hoisted_2, [createVNode(_sfc_main$4, {
+					class: "astryx-alert-dialog__actions",
+					direction: unref(isSmallScreen) ? "vertical" : "horizontal",
+					gap: 2,
+					"h-align": unref(isSmallScreen) ? "stretch" : "end",
+					wrap: unref(isSmallScreen) ? "nowrap" : "wrap"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "actions"), (openBlock(true), createElementBlock(Fragment, null, renderList(actions.value, (action) => {
+						return openBlock(), createBlock(_sfc_main$1, {
+							key: action.key,
+							class: normalizeClass(action.className),
+							"data-autofocus": action.autofocus,
+							"is-loading": action.isLoading,
+							label: action.label,
+							variant: action.variant,
+							onClick: ($event) => action.onClick($event)
+						}, null, 8, [
+							"class",
+							"data-autofocus",
+							"is-loading",
+							"label",
+							"variant",
+							"onClick"
+						]);
+					}), 128))]),
+					_: 3
+				}, 8, [
+					"direction",
+					"h-align",
+					"wrap"
+				])])]),
+				_: 3
+			}, 16, [
+				"data-layout",
+				"is-inline",
+				"is-open",
+				"role",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/AlertDialog/useImperativeAlertDialog.ts
+/**
+* Opens an alert dialog without managing the open state yourself.
+*
+* @example
+* ```
+* const alert = useImperativeAlertDialog()
+* const AlertHost = alert.Host
+* // <button @click="alert.show({ title: 'Delete item?', description: '…', actionLabel: 'Delete' })">Delete</button>
+* // <AlertHost />
+* ```
+*/
+function useImperativeAlertDialog() {
+	const isOpen = ref(false);
+	const options = shallowRef(null);
+	function show(nextOptions) {
+		options.value = nextOptions;
+		isOpen.value = true;
+	}
+	function hide() {
+		isOpen.value = false;
+	}
+	return {
+		hide,
+		Host: defineComponent({
+			name: "AstryxImperativeAlertDialogHost",
+			setup() {
+				return () => {
+					const current = options.value;
+					if (current == null) return null;
+					return h(_sfc_main, {
+						...current,
+						isOpen: isOpen.value,
+						onOpenChange: (open) => {
+							if (!open) isOpen.value = false;
+						}
+					});
+				};
+			}
+		}),
+		isOpen,
+		show
+	};
+}
+//#endregion
+export { _sfc_main as n, useImperativeAlertDialog as t };

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { a as AvatarProps, c as AvatarStatusDotProps, i as AvatarNumericSize, l as AvatarStatusDotVariant, n as _default, o as AvatarShape, r as AvatarNamedSize, s as AvatarSize, t as _default$1 } from "../index-uQrLBZfF.js";
+export { _default as Avatar, type AvatarNamedSize, type AvatarNumericSize, type AvatarProps, type AvatarShape, type AvatarSize, _default$1 as AvatarStatusDot, type AvatarStatusDotProps, type AvatarStatusDotVariant };

package/dist/Avatar/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as _sfc_main$1 } from "../Avatar-5s3HSrtN.js";
+export { _sfc_main as Avatar, _sfc_main$1 as AvatarStatusDot };

package/dist/Avatar-5s3HSrtN.js

@@ -0,0 +1,136 @@
+import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref } from "vue";
+import "../styles/avatar.css";
+//#region src/Avatar/Avatar.vue
+const _hoisted_1$1 = { class: "astryx-avatar__content" };
+const _hoisted_2 = ["src"];
+const _hoisted_3 = ["src"];
+const _hoisted_4 = {
+	key: 0,
+	class: "astryx-avatar__status"
+};
+const INITIALS_FONT_SIZE_RATIO = 16 / 36;
+const DEFAULT_ICON_RATIO = .6;
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "Avatar",
+	props: {
+		alt: {},
+		fallbackSrc: {},
+		name: {},
+		size: { default: "md" },
+		shape: { default: "circle" },
+		src: {}
+	},
+	emits: ["error"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const erroredSrc = ref(void 0);
+		const erroredFallbackSrc = ref(void 0);
+		const avatarGroup = inject(AvatarGroupContext, void 0);
+		const resolvedSize = computed(() => avatarGroup?.size.value ?? props.size);
+		const resolvedShape = computed(() => avatarGroup?.shape.value ?? props.shape);
+		const numericSize = computed(() => resolveSize(resolvedSize.value));
+		const groupStyle = computed(() => {
+			if (!avatarGroup) return {};
+			return {
+				marginInlineStart: `${-avatarGroup.overlap.value}px`,
+				borderWidth: "2px"
+			};
+		});
+		const rootStyle = computed(() => ({
+			width: `${numericSize.value}px`,
+			height: `${numericSize.value}px`
+		}));
+		const showImage = computed(() => props.src && erroredSrc.value !== props.src);
+		const showFallbackImage = computed(() => !showImage.value && props.fallbackSrc && erroredFallbackSrc.value !== props.fallbackSrc);
+		const meaningfulName = computed(() => {
+			return typeof props.name === "string" && props.name.trim() !== "" ? props.name.trim() : void 0;
+		});
+		const meaningfulAlt = computed(() => {
+			return typeof props.alt === "string" && props.alt.trim() !== "" ? props.alt.trim() : void 0;
+		});
+		const initials = computed(() => {
+			if (!meaningfulName.value) return "";
+			const words = meaningfulName.value.split(/\s+/);
+			const first = words.at(0);
+			const last = words.length > 1 ? words.at(-1) : void 0;
+			const initial = (word) => {
+				if (!word) return "";
+				const match = word.match(/[\p{L}\p{N}]/u);
+				return match ? match[0].toUpperCase() : "";
+			};
+			return `${initial(first)}${initial(last)}`;
+		});
+		const showInitials = computed(() => !showImage.value && !showFallbackImage.value && initials.value !== "");
+		const showIcon = computed(() => !showImage.value && !showFallbackImage.value && initials.value === "");
+		const accessibleName = computed(() => {
+			return meaningfulAlt.value || meaningfulName.value;
+		});
+		const a11yProps = computed(() => {
+			if (accessibleName.value) return {
+				"role": "img",
+				"aria-label": accessibleName.value
+			};
+			return {
+				"role": "presentation",
+				"aria-hidden": "true"
+			};
+		});
+		function handleImageError(event) {
+			if (props.src) erroredSrc.value = props.src;
+			emit("error", event);
+		}
+		function handleFallbackError() {
+			if (props.fallbackSrc) erroredFallbackSrc.value = props.fallbackSrc;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				class: ["astryx-avatar", [`astryx-avatar--${resolvedShape.value}`, { "astryx-avatar--group-item": unref(avatarGroup) }]],
+				style: [rootStyle.value, groupStyle.value]
+			}, a11yProps.value), [createElementVNode("span", _hoisted_1$1, [showImage.value ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				class: "astryx-avatar__image",
+				src: __props.src,
+				alt: "",
+				onError: handleImageError
+			}, null, 40, _hoisted_2)) : showFallbackImage.value ? (openBlock(), createElementBlock("img", {
+				key: 1,
+				class: "astryx-avatar__image",
+				src: __props.fallbackSrc,
+				alt: "",
+				onError: handleFallbackError
+			}, null, 40, _hoisted_3)) : showInitials.value ? (openBlock(), createElementBlock("span", {
+				key: 2,
+				class: "astryx-avatar__fallback astryx-avatar__fallback--initials",
+				style: normalizeStyle({ fontSize: `${numericSize.value * INITIALS_FONT_SIZE_RATIO}px` })
+			}, toDisplayString(initials.value), 5)) : showIcon.value ? (openBlock(), createElementBlock("span", {
+				key: 3,
+				class: "astryx-avatar__fallback astryx-avatar__fallback--icon",
+				style: normalizeStyle({ fontSize: `${numericSize.value * DEFAULT_ICON_RATIO}px` })
+			}, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+				viewBox: "0 0 24 24",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [createElementVNode("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })], -1))])], 4)) : createCommentVNode("v-if", true)]), _ctx.$slots.status ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "status")])) : createCommentVNode("v-if", true)], 16);
+		};
+	}
+});
+//#endregion
+//#region src/Avatar/AvatarStatusDot.vue
+const _hoisted_1 = ["data-variant"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "AvatarStatusDot",
+	props: { variant: { default: "neutral" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: "astryx-avatar-status-dot",
+				"data-variant": __props.variant,
+				"aria-hidden": "true"
+			}, null, 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/AvatarGroup/index.d.ts

@@ -0,0 +1,2 @@
+import { i as AvatarGroupProps, n as _default, r as AvatarGroupOverflowProps, t as _default$1 } from "../index-CQ9F1f_F.js";
+export { _default as AvatarGroup, _default$1 as AvatarGroupOverflow, type AvatarGroupOverflowProps, type AvatarGroupProps };

package/dist/AvatarGroup/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as _sfc_main$1 } from "../AvatarGroup-CZcgAMjM.js";
+export { _sfc_main as AvatarGroup, _sfc_main$1 as AvatarGroupOverflow };

package/dist/AvatarGroup-CZcgAMjM.js

@@ -0,0 +1,59 @@
+import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, toDisplayString } from "vue";
+import "../styles/avatar-group.css";
+//#region src/AvatarGroup/AvatarGroup.vue
+const _hoisted_1$1 = {
+	class: "astryx-avatar-group",
+	role: "group",
+	"aria-label": "Avatar group"
+};
+const OVERLAP_RATIO = .25;
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "AvatarGroup",
+	props: {
+		size: { default: "md" },
+		shape: { default: "circle" }
+	},
+	setup(__props) {
+		const props = __props;
+		const numericSize = computed(() => resolveSize(props.size));
+		const overlap = computed(() => Math.round(numericSize.value * OVERLAP_RATIO));
+		provide(AvatarGroupContext, {
+			size: computed(() => props.size),
+			shape: computed(() => props.shape),
+			overlap
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default")]);
+		};
+	}
+});
+//#endregion
+//#region src/AvatarGroup/AvatarGroupOverflow.vue
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AvatarGroupOverflow",
+	__name: "AvatarGroupOverflow",
+	props: { count: {} },
+	setup(__props) {
+		const avatarGroup = inject(AvatarGroupContext, void 0);
+		const size = computed(() => avatarGroup?.size.value ?? "md");
+		const shape = computed(() => avatarGroup?.shape.value ?? "circle");
+		const numericSize = computed(() => resolveSize(size.value));
+		const rootStyle = computed(() => ({
+			width: `${numericSize.value}px`,
+			height: `${numericSize.value}px`,
+			marginInlineStart: `${-(avatarGroup?.overlap.value ?? 0)}px`
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(["astryx-avatar-group-overflow", [`astryx-avatar-group-overflow--${shape.value}`]]),
+				style: normalizeStyle(rootStyle.value),
+				role: "img",
+				"aria-label": `${__props.count} more avatars`
+			}, " +" + toDisplayString(__props.count), 15, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/Badge/index.d.ts

@@ -0,0 +1,2 @@
+import { i as BadgeVariantMap, n as BadgeProps, r as BadgeVariant, t as _default } from "../index-DRmb-oUa.js";
+export { _default as Badge, type BadgeProps, type BadgeVariant, type BadgeVariantMap };

package/dist/Badge/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../Badge-Ba0EwsTj.js";
+export { _sfc_main as Badge };

package/dist/Badge-Ba0EwsTj.js

@@ -0,0 +1,19 @@
+import { createElementBlock, defineComponent, openBlock, renderSlot } from "vue";
+import "../styles/badge.css";
+//#region src/Badge/Badge.vue
+const _hoisted_1 = ["data-variant"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "Badge",
+	__name: "Badge",
+	props: { variant: { default: "neutral" } },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: "astryx-badge",
+				"data-variant": __props.variant
+			}, [renderSlot(_ctx.$slots, "icon"), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Banner/index.d.ts

@@ -0,0 +1,2 @@
+import { _r as BannerStatus, fr as _default, gr as BannerSlots, hr as BannerProps, mr as BannerEmits, pr as BannerContainer } from "../index-CQ9F1f_F.js";
+export { _default as Banner, type BannerContainer, type BannerEmits, type BannerProps, type BannerSlots, type BannerStatus };

package/dist/Banner/index.js

@@ -0,0 +1,2 @@
+import { t as _sfc_main } from "../Banner-CJe9Im5a.js";
+export { _sfc_main as Banner };