@astryx-vue/core 0.1.1 → 0.2.0

package/dist/AlertDialog/index.js

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

package/dist/{AlertDialog-BylcA4vV.js → AlertDialog-ovx4cBjM.js}

@@ -3,7 +3,7 @@ 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 { t as _sfc_main$5 } from "./Text-BHVghsWo.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

package/dist/AppShell/index.d.ts

@@ -0,0 +1,2 @@
+import { a as AppShellMobileNav, c as AppShellVariant, i as AppShellHeight, n as AppShellBreakpoint, o as AppShellProps, r as AppShellEmits, s as AppShellSlots, t as _default } from "../index-By2mSzUA.js";
+export { _default as AppShell, type AppShellBreakpoint, type AppShellEmits, type AppShellHeight, type AppShellMobileNav, type AppShellProps, type AppShellSlots, type AppShellVariant };

package/dist/AppShell/index.js

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

package/dist/AppShell-EiGyPFbA.js

@@ -0,0 +1,249 @@
+import { t as appShellMobileKey } from "./useAppShellMobile-DTsyuAJ4.js";
+import { a as _sfc_main$2, n as _sfc_main$4, r as _sfc_main$3, t as _sfc_main$5 } from "./LayoutPanel-C34uOq3e.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { n as _sfc_main$7, t as _sfc_main$6 } from "./MobileNavToggle-DD9D01aj.js";
+import { n as sideNavRenderModeKey } from "./context-BjNya0v8.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, openBlock, provide, reactive, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/app-shell.css";
+//#region src/SideNav/SideNavRenderMode.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxSideNavRenderMode",
+	__name: "SideNavRenderMode",
+	props: { mode: {} },
+	setup(__props) {
+		const props = __props;
+		provide(sideNavRenderModeKey, computed(() => props.mode));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/AppShell/AppShell.vue
+const _hoisted_1 = ["data-variant", "data-height"];
+const _hoisted_2 = ["href"];
+const _hoisted_3 = ["data-variant"];
+const _hoisted_4 = {
+	key: 0,
+	class: "astryx-app-shell__banner"
+};
+const _hoisted_5 = ["data-variant"];
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["data-elevated"];
+const _hoisted_8 = {
+	key: 0,
+	class: "astryx-app-shell__backdrop"
+};
+const _hoisted_9 = ["id"];
+const mainId = "astryx-app-shell-main";
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxAppShell",
+	inheritAttrs: false,
+	__name: "AppShell",
+	props: /*@__PURE__*/ mergeModels({
+		variant: { default: "elevated" },
+		contentPadding: {},
+		height: { default: "fill" },
+		mobileNav: {
+			type: [Boolean, Object],
+			default: void 0
+		}
+	}, {
+		"mobileNavOpen": {
+			type: Boolean,
+			default: false
+		},
+		"mobileNavOpenModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["mobileNavOpenChange"], ["update:mobileNavOpen"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const messages = useAstryxMessages();
+		const root = useTemplateRef("root");
+		const mobileNavId = `astryx-app-shell-${useId()}`;
+		const uncontrolledOpen = useModel(__props, "mobileNavOpen");
+		__expose({ element: root });
+		const BREAKPOINTS = {
+			"sm": 640,
+			"md": 768,
+			"lg": 1024,
+			"xl": 1280,
+			"2xl": 1536
+		};
+		const isBelow = ref(false);
+		const breakpoint = computed(() => (typeof props.mobileNav === "object" ? props.mobileNav.breakpoint : void 0) ?? "md");
+		const query = computed(() => {
+			if (breakpoint.value === "none") return "(width < 0px)";
+			return `(width < ${BREAKPOINTS[breakpoint.value]}px)`;
+		});
+		const open = computed({
+			get: () => typeof props.mobileNav === "object" && props.mobileNav.isOpen != null ? props.mobileNav.isOpen : uncontrolledOpen.value,
+			set: (next) => {
+				uncontrolledOpen.value = next;
+				emit("mobileNavOpenChange", next);
+			}
+		});
+		const hasTopNav = computed(() => slots.topNav != null);
+		const hasSideNav = computed(() => slots.sideNav != null);
+		const hasCustomDrawer = computed(() => slots.mobileNav != null);
+		const mobileEnabled = computed(() => props.mobileNav !== false && (hasTopNav.value || hasSideNav.value) && !hasCustomDrawer.value);
+		const hasAutoToggle = computed(() => (typeof props.mobileNav !== "object" || props.mobileNav.hasToggle !== false) && !hasCustomDrawer.value);
+		const showSideInline = computed(() => hasSideNav.value && !(isBelow.value && mobileEnabled.value));
+		const elevate = computed(() => props.variant === "elevated" && hasTopNav.value && showSideInline.value);
+		const showMobileBar = computed(() => isBelow.value && mobileEnabled.value && hasAutoToggle.value && hasSideNav.value && !hasTopNav.value);
+		watch(query, (value, _previous, onCleanup) => {
+			if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+			const media = window.matchMedia(value);
+			const update = () => {
+				isBelow.value = media.matches;
+			};
+			update();
+			media.addEventListener("change", update);
+			onCleanup(() => media.removeEventListener("change", update));
+		}, { immediate: true });
+		const mobileState = reactive({
+			get isMobile() {
+				return isBelow.value;
+			},
+			get isMobileNavOpen() {
+				return open.value;
+			},
+			mobileNavId,
+			get isMobileNavEnabled() {
+				return mobileEnabled.value;
+			},
+			get hasAutoToggle() {
+				return hasAutoToggle.value;
+			},
+			get hasSideNav() {
+				return hasSideNav.value;
+			},
+			toggleMobileNav: () => {
+				if (mobileEnabled.value) open.value = !open.value;
+			},
+			openMobileNav: () => {
+				if (mobileEnabled.value) open.value = true;
+			},
+			closeMobileNav: () => {
+				open.value = false;
+			}
+		});
+		provide(appShellMobileKey, mobileState);
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-app-shell", attrs.class]);
+		const rootStyle = computed(() => attrs.style);
+		function focusMain() {
+			root.value?.ownerDocument.getElementById(mainId)?.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				style: rootStyle.value,
+				"data-variant": __props.variant,
+				"data-height": __props.height
+			}), [
+				createElementVNode("a", {
+					class: "astryx-app-shell__skip",
+					href: `#${mainId}`,
+					onClick: focusMain
+				}, toDisplayString(unref(messages).layout.skipToContent), 9, _hoisted_2),
+				createVNode(_sfc_main$2, {
+					height: __props.height,
+					padding: 0
+				}, createSlots({
+					default: withCtx(() => [createElementVNode("div", {
+						class: "astryx-app-shell__main",
+						"data-elevated": elevate.value || void 0
+					}, [elevate.value ? (openBlock(), createElementBlock("div", _hoisted_8)) : createCommentVNode("v-if", true), createVNode(_sfc_main$3, {
+						id: mainId,
+						class: "astryx-app-shell__content",
+						role: "main",
+						tabindex: -1,
+						padding: __props.contentPadding ?? 0,
+						"is-scrollable": __props.height === "fill",
+						"data-variant": __props.variant,
+						"data-corner": elevate.value || void 0
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					}, 8, [
+						"padding",
+						"is-scrollable",
+						"data-variant",
+						"data-corner"
+					])], 8, _hoisted_7)]),
+					_: 2
+				}, [hasTopNav.value || unref(slots).banner || showMobileBar.value ? {
+					name: "header",
+					fn: withCtx(() => [hasTopNav.value || unref(slots).banner ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "astryx-app-shell__header",
+						role: "banner",
+						"data-variant": __props.variant
+					}, [createVNode(_sfc_main$4, {
+						padding: 0,
+						"has-divider": __props.variant === "section" && hasTopNav.value
+					}, {
+						default: withCtx(() => [unref(slots).banner ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "banner")])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "topNav")]),
+						_: 3
+					}, 8, ["has-divider"])], 8, _hoisted_3)) : createCommentVNode("v-if", true), showMobileBar.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: "astryx-app-shell__mobile-bar",
+						role: "banner",
+						"data-variant": __props.variant
+					}, [createElementVNode("nav", {
+						class: "astryx-app-shell__mobile-nav",
+						"aria-label": unref(messages).layout.mobileNavigation
+					}, [createVNode(_sfc_main$1, { mode: "topbar" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "sideNav")]),
+						_: 3
+					}), createVNode(_sfc_main$6, {
+						label: unref(messages).nav.openNavigation,
+						"is-open": open.value,
+						controls: mobileNavId,
+						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+					}, null, 8, ["label", "is-open"])], 8, _hoisted_6)], 8, _hoisted_5)) : createCommentVNode("v-if", true)]),
+					key: "0"
+				} : void 0, showSideInline.value ? {
+					name: "start",
+					fn: withCtx(() => [createVNode(_sfc_main$5, {
+						class: "astryx-app-shell__sidenav",
+						padding: 0,
+						"has-divider": __props.variant === "section",
+						"is-scrollable": __props.height === "fill",
+						"data-variant": __props.variant
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "sideNav")]),
+						_: 3
+					}, 8, [
+						"has-divider",
+						"is-scrollable",
+						"data-variant"
+					])]),
+					key: "1"
+				} : void 0]), 1032, ["height"]),
+				hasCustomDrawer.value ? renderSlot(_ctx.$slots, "mobileNav", {}, void 0, void 0, 0) : isBelow.value && mobileEnabled.value ? (openBlock(), createBlock(_sfc_main$7, {
+					key: 1,
+					id: mobileNavId,
+					"is-open": open.value,
+					"onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+					label: unref(messages).layout.mobileNavigation
+				}, {
+					default: withCtx(() => [createElementVNode("div", { id: `${mobileNavId}-items` }, null, 8, _hoisted_9), createVNode(_sfc_main$1, { mode: "drawer-content" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "sideNav")]),
+						_: 3
+					})]),
+					_: 3
+				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/AspectRatio/index.d.ts

@@ -0,0 +1,2 @@
+import { a as AspectRatioSlots, i as AspectRatioShape, n as AspectRatioFit, r as AspectRatioProps, t as _default } from "../index-COqjznX0.js";
+export { _default as AspectRatio, type AspectRatioFit, type AspectRatioProps, type AspectRatioShape, type AspectRatioSlots };

package/dist/AspectRatio/index.js

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

package/dist/AspectRatio-Bij7e-tq.js

@@ -0,0 +1,40 @@
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, useAttrs, useTemplateRef } from "vue";
+import "../styles/aspect-ratio.css";
+//#region src/AspectRatio/AspectRatio.vue
+const _hoisted_1 = ["data-shape"];
+const _hoisted_2 = ["data-astryx-aspect-ratio-override", "data-fit"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxAspectRatio",
+	inheritAttrs: false,
+	__name: "AspectRatio",
+	props: {
+		ratio: {},
+		shape: { default: "rectangle" },
+		fit: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		__expose({ element: root });
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-aspect-ratio", attrs.class]);
+		const rootStyle = computed(() => [attrs.style, { "--astryx-aspect-ratio": String(props.ratio) }]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				"data-shape": __props.shape,
+				style: rootStyle.value
+			}), [createElementVNode("div", {
+				class: "astryx-aspect-ratio__child",
+				"data-astryx-aspect-ratio-override": __props.fit,
+				"data-fit": __props.fit
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_2)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/AvatarGroup/index.d.ts

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

package/dist/Banner/index.d.ts

@@ -1,2 +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";
+import { Cr as _default, Dr as BannerSlots, Er as BannerProps, Or as BannerStatus, Tr as BannerEmits, wr as BannerContainer } from "../index-C6iJwTL0.js";
 export { _default as Banner, type BannerContainer, type BannerEmits, type BannerProps, type BannerSlots, type BannerStatus };

package/dist/BottomSheet/index.d.ts

@@ -1,2 +1,2 @@
-import { a as BottomSheetPadding, c as BottomSheetSlots, i as BottomSheetMotion, l as BottomSheetSnapPoint, n as BottomSheetEmits, o as BottomSheetProps, r as BottomSheetHeight, s as BottomSheetPurpose, t as _default, u as BottomSheetState } from "../index-BSRk8MFK.js";
+import { a as BottomSheetPadding, c as BottomSheetSlots, i as BottomSheetMotion, l as BottomSheetSnapPoint, n as BottomSheetEmits, o as BottomSheetProps, r as BottomSheetHeight, s as BottomSheetPurpose, t as _default, u as BottomSheetState } from "../index-C8wDPDcP.js";
 export { _default as BottomSheet, type BottomSheetEmits, type BottomSheetHeight, type BottomSheetMotion, type BottomSheetPadding, type BottomSheetProps, type BottomSheetPurpose, type BottomSheetSlots, type BottomSheetSnapPoint, type BottomSheetState };

package/dist/Button/index.d.ts

@@ -1,3 +1,3 @@
 import { a as ButtonProps, c as ButtonSizeValue, d as ButtonVariantMap, i as ButtonLinkElement, l as ButtonSlots, n as ButtonElevation, o as ButtonRootElement, r as ButtonEmits, s as ButtonSize, t as ButtonClickAction, u as ButtonVariant } from "../types-WlmsNL1I.js";
-import { t as _default } from "../index-B4OOtNP8.js";
+import { t as _default } from "../index-C7mxUcDR.js";
 export { _default as Button, _default as default, type ButtonClickAction, type ButtonElevation, type ButtonEmits, type ButtonLinkElement, type ButtonProps, type ButtonRootElement, type ButtonSize, type ButtonSizeValue, type ButtonSlots, type ButtonVariant, type ButtonVariantMap };

package/dist/ButtonGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { cr as _default, dr as ButtonGroupOrientation, lr as ButtonGroupProps, ur as ButtonGroupSlots } from "../index-CQ9F1f_F.js";
+import { Sr as ButtonGroupOrientation, br as ButtonGroupProps, xr as ButtonGroupSlots, yr as _default } from "../index-C6iJwTL0.js";
 export { _default as ButtonGroup, _default as default, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSlots };

package/dist/Calendar/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Calendar-BEyrkUtr.js";
+import { t as _sfc_main } from "../Calendar-BG7wEsro.js";
 export { _sfc_main as Calendar };

package/dist/{Calendar-BEyrkUtr.js → Calendar-BG7wEsro.js}

@@ -1,6 +1,6 @@
 import { t as useGridRovingFocus } from "./useGridRovingFocus-DQQAOYH5.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-Dbo22sck.js";
 import { n as weekdayNames, t as formatCalendarMonth } from "./locale-Cpk_nrLA.js";
-import { a as useAstryxMessages, i as useAstryxLocale } from "./context-BshXcNYX.js";
 import { Fragment, computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, withKeys } from "vue";
 import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
 import "../styles/calendar.css";

package/dist/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { a as CarouselSlots, i as CarouselProps, n as CarouselGap, r as CarouselHandle, t as _default } from "../index-CsVS37na.js";
+export { _default as Carousel, type CarouselGap, type CarouselHandle, type CarouselProps, type CarouselSlots };

package/dist/Carousel/index.js

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