@witchcraft/ui 0.2.1-beta.3 → 0.2.2

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.d.vue.ts

@@ -0,0 +1,165 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = WrapperProps<"suggestions", HTMLAttributes> & WrapperProps<"wrapper", HTMLAttributes> & WrapperProps<"inner-wrapper", HTMLAttributes>;
+type RealProps = SuggestionsProps & LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    suggestions?: SuggestionsProps["suggestions"];
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit"> & TailwindClassProp>, 
+/** @vue-ignore */
+Partial<WrapperTypes>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    values?: string[] | undefined;
+    modelValue: string;
+    inputValue?: string;
+}, {
+    suggestionsComponent: import("vue").Ref<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | undefined;
+            hasValidSuggestion: boolean;
+            openable: boolean | undefined;
+            getLabel: (item: any) => string;
+            $open: boolean;
+            open: () => void;
+            close: () => void;
+            enterSelected: (doClose?: boolean) => void;
+            enterIndex: (num: number, doClose?: boolean) => void;
+            toggle: () => void;
+            cancel: () => void;
+            select: (num: number) => void;
+            prev: () => void;
+            next: () => void;
+            first: () => void;
+            last: () => void;
+        };
+        el: HTMLElement | null;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    } | null, import("vue").ShallowUnwrapRef<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | undefined;
+            hasValidSuggestion: boolean;
+            openable: boolean | undefined;
+            getLabel: (item: any) => string;
+            $open: boolean;
+            open: () => void;
+            close: () => void;
+            enterSelected: (doClose?: boolean) => void;
+            enterIndex: (num: number, doClose?: boolean) => void;
+            toggle: () => void;
+            cancel: () => void;
+            select: (num: number) => void;
+            prev: () => void;
+            next: () => void;
+            first: () => void;
+            last: () => void;
+        };
+        el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    }> | {
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: string | object | undefined;
+            hasValidSuggestion: boolean;
+            openable: boolean | undefined;
+            getLabel: (item: any) => string;
+            $open: boolean;
+            open: () => void;
+            close: () => void;
+            enterSelected: (doClose?: boolean) => void;
+            enterIndex: (num: number, doClose?: boolean) => void;
+            toggle: () => void;
+            cancel: () => void;
+            select: (num: number) => void;
+            prev: () => void;
+            next: () => void;
+            first: () => void;
+            last: () => void;
+        };
+        el: HTMLElement | null;
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        inputBlurHandler: (e: MouseEvent) => void;
+        inputFocusHandler: (e: FocusEvent) => void;
+    } | null>;
+    el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:inputValue": (value: string) => any;
+    "update:values": (value: string[] | undefined) => any;
+} & {
+    blur: (val: FocusEvent) => any;
+    input: (val: InputEvent) => any;
+    submit: (val: string, suggestion?: any) => any;
+    keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => any;
+    indicatorClick: (val: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    values?: string[] | undefined;
+    modelValue: string;
+    inputValue?: string;
+}> & Readonly<{
+    onBlur?: ((val: FocusEvent) => any) | undefined;
+    onInput?: ((val: InputEvent) => any) | undefined;
+    onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+    "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
+    onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    valid: boolean;
+    suggestions: any[];
+    updateOnlyOnSubmit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: any) => any;
+} & {
+    default?: (props: any) => any;
+} & {
+    left?: (props: any) => any;
+} & {
+    input?: (props: any) => any;
+} & {
+    indicator?: (props: {
+        isOpen: any;
+        suggestionsIndicatorClickHandler: any;
+    }) => any;
+} & {
+    values?: (props: any) => any;
+} & {
+    right?: (props: any) => any;
+} & {
+    suggestions?: (props: any) => any;
+} & {
+    'suggestion-item'?: (props: any) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibInputDeprecated/LibInputDeprecated.vue

@@ -16,8 +16,12 @@
 	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 	ref="inputWrapperEl"
 >
-	<slot name="label" v-bind="{ ...slotProps, label }">
-		<lib-label v-if="label || $slots.default"
+	<slot
+		name="label"
+		v-bind="{ ...slotProps, label }"
+	>
+		<lib-label
+			v-if="label || $slots.default"
 			:id="id ?? fallbackId"
 			:disabled="disabled"
 			:readonly="readonly"
@@ -79,8 +83,14 @@
   $['inner-wrapperAttrs']?.class
 )"
 	>
-		<slot name="left" v-bind="slotProps"/>
-		<slot name="input" v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }">
+		<slot
+			name="left"
+			v-bind="slotProps"
+		/>
+		<slot
+			name="input"
+			v-bind="{ ...inputProps, ...slotProps, suggestionsIndicatorClickHandler }"
+		>
 			<lib-simple-input
 				:class="twMerge(
   `input--input p-0`,
@@ -91,7 +101,10 @@
 				v-bind="inputProps"
 			/>
 		</slot>
-		<slot name="indicator" v-bind="{ isOpen, suggestionsIndicatorClickHandler }">
+		<slot
+			name="indicator"
+			v-bind="{ isOpen, suggestionsIndicatorClickHandler }"
+		>
 			<!-- todo, convert to button for accessibility ? -->
 			<div
 				v-if="suggestions"
@@ -99,7 +112,9 @@
 				:class="twMerge(`input--indicator flex flex-col justify-center`)"
 				@click="suggestionsIndicatorClickHandler"
 			>
-				<icon :class="isOpen && `rotate-180`"> <i-fa6-solid-chevron-up/> </icon>
+				<icon :class="isOpen && `rotate-180`">
+					<i-fa6-solid-chevron-up/>
+				</icon>
 			</div>
 		</slot>
 		<slot
@@ -122,9 +137,16 @@
 				/>
 			</template>
 		</slot>
-		<slot name="right" v-bind="slotProps"/>
+		<slot
+			name="right"
+			v-bind="slotProps"
+		/>
 
-		<slot v-if="suggestions" name="suggestions" v-bind="{ ...suggestionProps, ...slotProps }">
+		<slot
+			v-if="suggestions"
+			name="suggestions"
+			v-bind="{ ...suggestionProps, ...slotProps }"
+		>
 			<!-- todo 1px needs to be abstracted to var -->
 			<lib-suggestions
 				:class="twMerge(
@@ -147,7 +169,10 @@
 				v-bind="suggestionProps"
 			>
 				<template #item="itemSlotProps">
-					<slot name="suggestion-item" v-bind="itemSlotProps"/>
+					<slot
+						name="suggestion-item"
+						v-bind="itemSlotProps"
+					/>
 				</template>
 			</lib-suggestions>
 		</slot>
@@ -157,9 +182,8 @@
 
 <script setup>
 import { isBlank } from "@alanscodelog/utils/isBlank";
-import { isObject } from "@alanscodelog/utils/isObject";
 import { pushIfNotIn } from "@alanscodelog/utils/pushIfNotIn";
-import { computed, nextTick, onBeforeMount, ref, toRef, useSlots, watch } from "vue";
+import { computed, nextTick, ref, toRef, useSlots, watch } from "vue";
 import IFa6SolidChevronUp from "~icons/fa6-solid/chevron-up";
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
 import { useSuggestionsInputAria } from "../../composables/useSuggestions.js";
@@ -171,7 +195,7 @@ import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
 import LibSuggestions from "../LibSuggestions/LibSuggestions.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-simple-input-deprecated",
+  name: "LibSimpleInputDeprecated",
   inheritAttrs: false
 });
 const $slots = useSlots();
@@ -270,6 +294,7 @@ const inputProps = computed(() => ({
   onBlur: handleBlur,
   onFocus: handleFocus,
   modelValue: $inputValue.value,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => {
     $inputValue.value = e;
     if (!props.suggestions && !props.updateOnlyOnSubmit && !props.restrictToSuggestions) {
@@ -311,17 +336,21 @@ const suggestionProps = computed(() => ({
   modelValue: $values.value ?? $modelValue.value.toString(),
   inputValue: $inputValue.value,
   isValid: props.isValid,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:inputValue": (e) => $inputValue.value = e,
   onSubmit: (e, suggestion, wasRemoved) => {
     $modelValue.value = wasRemoved ? "" : e;
     emit("submit", e, suggestion);
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => {
     $values.value &&= e;
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:isOpen": (e) => {
     isOpen.value = e;
   },
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:activeSuggestion": (e) => activeSuggestion.value = e,
   ...$.value.suggestionsAttrs,
   class: void 0
@@ -333,6 +362,7 @@ const multivaluesProps = computed(() => ({
   disabled: props.disabled,
   readonly: props.readonly,
   modelValue: $values.value,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   "onUpdate:modelValue": (e) => $values.value = e,
   ...$.value.multivaluesAttrs,
   class: void 0

package/dist/runtime/components/LibLabel/LibLabel.d.vue.ts

@@ -0,0 +1,26 @@
+import type { LabelHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, LabelProps, LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    unstyled?: boolean;
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<LabelHTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    id: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    valid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibLabel/LibLabel.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script setup>
-import { toRef, useAttrs } from "vue";
+import { useAttrs } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-label"
+  name: "LibLabel"
 });
 const fallbackId = getFallbackId();
 defineProps({

package/dist/runtime/components/LibLabel/LibLabel.vue.d.ts

@@ -1,5 +1,5 @@
-import { type LabelHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import type { LabelHTMLAttributes } from "vue";
+import type { BaseInteractiveProps, LabelProps, LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
 type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
     unstyled?: boolean;
     valid?: boolean;
@@ -8,7 +8,7 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<LabelHTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     id: string;
     disabled: boolean;
     readonly: boolean;

package/dist/runtime/components/LibMultiValues/LibMultiValues.d.vue.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes } from "vue";
+import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>;
+type RealProps = LabelProps & BaseInteractiveProps & {
+    border?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (Props & {
+        modelValue?: T[];
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", value: T[]) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue

@@ -84,9 +84,8 @@ import { copy } from "../../helpers/copy.js";
 import { twMerge } from "../../utils/twMerge.js";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
-import {} from "../shared/props.js";
 defineOptions({
-  name: "lib-multi-values",
+  name: "LibMultiValues",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["item"]);

package/dist/runtime/components/LibMultiValues/LibMultiValues.vue.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.js.js";
 type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes>>;
 type RealProps = LabelProps & BaseInteractiveProps & {
     border?: boolean;
@@ -15,7 +15,7 @@ declare const _default: <T extends string | number>(__VLS_props: NonNullable<Awa
         readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & (Props & {
         modelValue?: T[];
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {};

package/dist/runtime/components/LibNotifications/LibNotification.d.vue.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
+type RealProps = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LibNotifications/LibNotification.vue

@@ -1,5 +1,6 @@
 <template>
-<div :class="twMerge(
+<div
+	:class="twMerge(
   `notification
 		max-w-700px
 		bg-neutral-50
@@ -22,7 +23,8 @@
 	@keydown.enter.self="NotificationHandler.resolveToDefault(notification)"
 >
 	<div class="notification--header flex-reverse flex justify-between">
-		<div v-if="notification.title"
+		<div
+			v-if="notification.title"
 			tabindex="0"
 			class="title
 				focus-outline flex
@@ -34,7 +36,8 @@
 		</div>
 		<div class="notification--spacer flex-1"/>
 		<div class="actions flex">
-			<LibButton :border="false"
+			<LibButton
+				:border="false"
 				class="notification--copy-button text-neutral-700"
 				@click="copy(handler ? handler.stringify(notification) : JSON.stringify(notification))"
 			>
@@ -50,21 +53,29 @@
 			</lib-button>
 		</div>
 	</div>
-	<div class="notification--message whitespace-pre-wrap" tabindex="0">
+	<div
+		class="notification--message whitespace-pre-wrap"
+		tabindex="0"
+	>
 		{{ notification.message }}
 	</div>
 	<div class="notification--footer flex items-end justify-between">
-		<div v-if="notification.code" class="code text-xs text-neutral-700 dark:text-neutral-300">
+		<div
+			v-if="notification.code"
+			class="code text-xs text-neutral-700 dark:text-neutral-300"
+		>
 			Code: {{ notification.code }}
 		</div>
 		<div class="notification--footer-spacer flex-1 py-1"/>
-		<div v-if="notification.options"
+		<div
+			v-if="notification.options"
 			class="notification--options
 				flex flex-wrap justify-end
 				gap-2
 			"
 		>
-			<lib-button :label="option"
+			<lib-button
+				:label="option"
 				:class="twMerge(
   `
 					notification--option-button
@@ -92,7 +103,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import Icon from "../Icon/Icon.vue";
 import LibButton from "../LibButton/LibButton.vue";
 defineOptions({
-  name: "lib-notification",
+  name: "LibNotification",
   inheritAttrs: false
 });
 const $attrs = useAttrs();

package/dist/runtime/components/LibNotifications/LibNotifications.d.vue.ts

@@ -0,0 +1,13 @@
+import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+import type { HTMLAttributes } from "vue";
+type RealProps = LinkableByIdProps & {
+    /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
+    handler?: NotificationHandler;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LibNotifications/LibNotifications.vue

@@ -1,5 +1,6 @@
 <template>
-<TransitionGroup name="list"
+<TransitionGroup
+	name="list"
 	tag="div"
 	:class="twMerge(`notifications
 			absolute
@@ -13,7 +14,8 @@
 		`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
-	<lib-notification class="pointer-events-auto"
+	<lib-notification
+		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
@@ -28,7 +30,8 @@
 	/>
 </Transition>
 <Transition>
-	<dialog v-show="topNotifications.length > 0"
+	<dialog
+		v-show="topNotifications.length > 0"
 		:id="id"
 		:class="twMerge(`notifications-modal
 			bg-transparent
@@ -40,7 +43,8 @@
 		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
 	>
 		<form>
-			<lib-notification v-if="topNotifications.length > 0 && topNotifications[0]"
+			<lib-notification
+				v-if="topNotifications.length > 0 && topNotifications[0]"
 				:handler="handler"
 				class="top-notification"
 				:notification="topNotifications[0]"
@@ -53,13 +57,13 @@
 
 <script setup>
 import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { nextTick, onBeforeUnmount, ref, shallowReactive, Transition, TransitionGroup } from "vue";
+import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue";
 import LibNotification from "./LibNotification.vue";
 import { useNotificationHandler } from "../../composables/useNotificationHandler.js";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "lib-notifications",
+  name: "LibNotifications",
   inheritAttrs: false
 });
 const props = defineProps({

package/dist/runtime/components/LibNotifications/LibNotifications.vue.d.ts

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from "vue";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
 import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & {
     /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */
     handler?: NotificationHandler;
@@ -9,5 +9,5 @@ interface Props extends
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
 }
-declare const _default: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;