@witchcraft/ui 0.3.26 → 0.4.0-beta.10

package/dist/runtime/components/{LibFileInput/LibFileInput.vue → WFileInput/WFileInput.vue}

@@ -1,5 +1,4 @@
 <template>
-<!-- todo aria errors -->
 <div
 	:class="twMerge(
   `
@@ -24,11 +23,11 @@
 			rounded-xl
 			p-2
 		`,
-  errors.length > 0 && errorFlashing && `border-danger-400`,
   isHovered && `bg-accent-500/10`,
-  $.wrapperAttrs.class
+  errors.length > 0 && isErrored && `errored border-red-400 hover:border-red-500`,
+  wrapperAttrs?.class
 )"
-	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
+	v-bind="{ ...wrapperAttrs, class: void 0 }"
 	@drop="onDrop"
 	@dragover.prevent="isHovered = true"
 	@dragleave="isHovered = false"
@@ -51,7 +50,7 @@
 )"
 	>
 		<label
-			:for="id ?? fallbackId"
+			:for="finalId"
 			:class="twMerge(`
 				file-input--label
 				pointer-events-none
@@ -67,7 +66,7 @@
 				v-if="compact || multiple || files.length === 0"
 				name="icon"
 			>
-				<icon><i-fa6-solid-arrow-up-from-bracket/></icon>
+				<WIcon><i-lucide-upload/></WIcon>
 			</slot>
 			<slot name="label">
 				<div class="text-ellipsis overflow-hidden shrink-1 hidden @min-[15ch]:block">
@@ -105,7 +104,7 @@
 			</div>
 		</label>
 		<input
-			:id="id ?? fallbackId"
+			:id="finalId"
 			:class="twMerge(
   `
 				file-input--input
@@ -116,13 +115,15 @@
 				text-[0]
 				opacity-0
 			`,
-  $.inputAttrs?.class
+  inputAttrs?.class
 )"
 			type="file"
 			:accept="formats.join(', ')"
 			:multiple="multiple"
+			v-bind="{ ...inputAttrs, class: void 0 }"
+			:aria-invalid="errors.length > 0"
+			:aria-errormessage="errors.map((_) => _.message).join(', ')"
 			ref="el"
-			v-bind="{ ...$.inputAttrs, class: void 0 }"
 			@input="inputFile"
 			@click="$event.target.value = null"
 		>
@@ -136,8 +137,7 @@
 			`,
   multiple && `
 				w-full
-			`,
-  $.previewsAttrs?.class
+			`
 )"
 	>
 		<div
@@ -167,14 +167,14 @@
 			:key="entry.file.name"
 		>
 			<div class="flex flex-initial basis-full justify-start items-center max-w-full gap-2 px-1">
-				<lib-button
+				<WButton
 					:border="false"
 					class="file-input--remove-button rounded-full p-0"
 					:aria-label="`Remove file ${entry.file.name}`"
 					@click="removeFile(entry)"
 				>
-					<icon><i-fa6-solid-xmark/></icon>
-				</lib-button>
+					<WIcon><i-lucide-x/></WIcon>
+				</Wbutton>
 				<div
 					class="file-input--preview-filename min-w-0 flex-1 basis-0 truncate break-all rounded-sm text-sm"
 					:title="entry.file.name"
@@ -194,7 +194,7 @@
 				>
 					<img
 						class="max-h-full w-auto"
-						:src="getSrc(entry.file)"
+						:src="entry.previewUrl"
 					>
 				</div>
 				<div
@@ -204,33 +204,59 @@
 					flex-1 basis-full flex-wrap items-center justify-center
 					"
 				>
-					<icon><i-fa6-regular-file class="text-4xl opacity-50"/></icon>
+					<WIcon><i-lucide-file class="text-4xl opacity-50"/></WIcon>
 				</div>
 			</div>
 		</div>
 	</div>
+	<div
+		v-if="!compact && errors.length > 0"
+		class="file-input--errors flex flex-col gap-2 text-sm text-red-600 dark:text-red-400 items-center px-2"
+	>
+		<div
+			class="file-input--error text-center"
+			v-for="error of errors"
+			:key="error.message"
+		>
+			{{ error.message }}
+		</div>
+	</div>
 </div>
 </template>
 
 <script setup>
-import { computed, ref, shallowReactive, watch } from "vue";
-import IFa6RegularFile from "~icons/fa6-regular/file";
-import IFa6SolidArrowUpFromBracket from "~icons/fa6-solid/arrow-up-from-bracket";
-import IFa6SolidXmark from "~icons/fa6-solid/xmark";
-import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { computed, onBeforeUnmount, ref, shallowReactive, watch } from "vue";
+import ILucideFile from "~icons/lucide/file";
+import ILucideUpload from "~icons/lucide/upload";
+import ILucideX from "~icons/lucide/x";
+import { useFallbackId } from "../../composables/useFallbackId.js";
 import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { twMerge } from "../../utils/twMerge.js";
-import Icon from "../Icon/Icon.vue";
-import LibButton from "../LibButton/LibButton.vue";
-import { getFallbackId } from "../shared/props.js";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
 const t = useInjectedI18n();
 const el = ref(null);
+const props = defineProps({
+  id: { type: String, required: false },
+  multiple: { type: Boolean, required: false, default: false },
+  formats: { type: Array, required: false, default: () => ["image/*", ".jpeg", ".jpg", ".png"] },
+  compact: { type: Boolean, required: false, default: false },
+  inputAttrs: { type: Object, required: false },
+  wrapperAttrs: { type: Object, required: false }
+});
+const finalId = useFallbackId(props);
+const emits = defineEmits(["input", "errors"]);
 const files = shallowReactive([]);
 const errors = shallowReactive([]);
-const errorFlashing = ref(false);
+const isErrored = ref(false);
 const isHovered = ref(false);
 function clearFiles() {
-  el.value.value = "";
+  if (el.value) {
+    el.value.value = "";
+  }
+  for (const entry of files) {
+    if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
+  }
   files.splice(0, files.length);
 }
 watch(files, () => {
@@ -238,37 +264,30 @@ watch(files, () => {
 });
 watch(errors, () => {
   if (errors.length > 0) {
-    errorFlashing.value = true;
-    setTimeout(() => {
-      errorFlashing.value = false;
-    }, 500);
-    emits("errors", [...errors]);
-    errors.splice(0, errors.length);
+    isErrored.value = true;
+    emits("errors", [...errors], clearErrors);
   }
 });
+function clearErrors() {
+  isErrored.value = false;
+  errors.splice(0, errors.length);
+}
 defineOptions({
-  name: "LibFileInput",
+  name: "WFileInput",
   inheritAttrs: false
 });
-const $ = useDivideAttrs(["wrapper", "input", "previews"]);
-const emits = defineEmits(["input", "errors"]);
-const fallbackId = getFallbackId();
-const props = defineProps({
-  id: { type: String, required: false },
-  multiple: { type: Boolean, required: false, default: false },
-  formats: { type: Array, required: false, default: () => ["image/*", ".jpeg", ".jpg", ".png"] },
-  compact: { type: Boolean, required: false, default: false }
-});
 const mimeTypes = computed(() => props.formats?.filter((_) => !_.startsWith(".")) ?? []);
 const extensions = computed(() => props.formats?.filter((_) => _.startsWith(".")) ?? []);
-const getSrc = (file) => {
-  const src = URL.createObjectURL(file);
-  return src;
-};
-const removeFile = (entry) => {
+onBeforeUnmount(() => {
+  for (const entry of files) {
+    if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
+  }
+});
+function removeFile(entry) {
+  if (entry.previewUrl) URL.revokeObjectURL(entry.previewUrl);
   const index = files.indexOf(entry);
-  files.splice(index, 1);
-};
+  if (index > -1) files.splice(index, 1);
+}
 const extensionsList = computed(() => extensions.value.join(", "));
 function onDrop(e) {
   if ("dataTransfer" in e && e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
@@ -304,12 +323,13 @@ function updateFiles(filesList) {
       errs.push(err);
       continue;
     }
+    const previewUrl = isImg ? URL.createObjectURL(file) : void 0;
     if (errs.length > 0) continue;
     if (!files.find((_) => _.file === file)) {
       if (props.multiple || files.length < 1) {
-        files.push({ file, isImg });
+        files.push({ file, isImg, previewUrl });
       } else {
-        files.splice(0, files.length, { file, isImg });
+        files.splice(0, files.length, { file, isImg, previewUrl });
       }
     }
   }
@@ -317,15 +337,12 @@ function updateFiles(filesList) {
     errors.splice(0, errors.length, ...errs);
     return false;
   } else if (errors.length > 0) {
-    errors.splice(0, errors.length);
+    clearErrors();
   }
   return void 0;
 }
 defineExpose({
-  clearFiles
+  clearFiles,
+  clearErrors
 });
 </script>
-
-<script>
-export default { name: "LibFileInput" };
-</script>

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

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+import type { FileInputError, TailwindClassProp } from "../../types/index.js";
+declare function clearFiles(): void;
+declare function clearErrors(): void;
+declare var __VLS_1: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    label?: (props: typeof __VLS_14) => any;
+} & {
+    formats?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{
+    id?: string;
+    multiple?: boolean;
+    /**
+     * A list of extensions or mime types to add to the input's accept. Basic validations are done so that files match an extension and mimeType, but note that a file could still be lying, all files should be validated server side.
+     *
+     * Pass an empty array to allow any filetype.
+     */
+    formats?: string[];
+    compact?: boolean;
+    inputAttrs?: Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+}, {
+    clearFiles: typeof clearFiles;
+    clearErrors: typeof clearErrors;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    input: (val: File[], clearFiles: () => void) => any;
+    errors: (val: FileInputError[], clearErrors: () => void) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id?: string;
+    multiple?: boolean;
+    /**
+     * A list of extensions or mime types to add to the input's accept. Basic validations are done so that files match an extension and mimeType, but note that a file could still be lying, all files should be validated server side.
+     *
+     * Pass an empty array to allow any filetype.
+     */
+    formats?: string[];
+    compact?: boolean;
+    inputAttrs?: Omit<InputHTMLAttributes, "class"> & TailwindClassProp;
+    wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+}> & Readonly<{
+    onInput?: ((val: File[], clearFiles: () => void) => any) | undefined;
+    onErrors?: ((val: FileInputError[], clearErrors: () => void) => any) | undefined;
+}>, {
+    multiple: boolean;
+    compact: boolean;
+    formats: string[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/{Icon/Icon.vue.d.ts → WIcon/WIcon.d.vue.ts}

@@ -3,16 +3,12 @@ import { type HTMLAttributes } from "vue";
  * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
  *
  * ```vue
- * 		<icon><i-...></icon>
+ * 		<WIcon><i-...></WIcon>
  * ``
  */
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class">> {
-}
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Omit<HTMLAttributes, "class">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Omit<HTMLAttributes, "class">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/{Icon/Icon.vue → WIcon/WIcon.vue}

@@ -19,5 +19,5 @@ defineProps({});
 </script>
 
 <script>
-
+export default { name: "Icon" };
 </script>

package/dist/runtime/components/{Icon/Icon.d.vue.ts → WIcon/WIcon.vue.d.ts}

@@ -3,16 +3,12 @@ import { type HTMLAttributes } from "vue";
  * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
  *
  * ```vue
- * 		<icon><i-...></icon>
+ * 		<WIcon><i-...></WIcon>
  * ``
  */
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<HTMLAttributes, "class">> {
-}
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Omit<HTMLAttributes, "class">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Omit<HTMLAttributes, "class">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/components/{LibMultiValues/LibMultiValues.d.vue.ts → WMultiValues/WMultiValues.d.vue.ts}

@@ -1,19 +1,11 @@
 import { type HTMLAttributes } from "vue";
-import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.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: typeof __VLS_export;
-export default _default;
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(BaseInteractiveProps & {
+        label?: string;
+        border?: boolean;
+        itemAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<HTMLAttributes, "class"> & TailwindClassProp & {
         modelValue?: T[];
     }) & {
         "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
@@ -27,6 +19,8 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/runtime/components/WMultiValues/WMultiValues.vue

@@ -0,0 +1,150 @@
+<template>
+<div
+	v-if="$modelValue && $modelValue?.length > 0"
+	role="list"
+	:class="
+  twMerge(
+    `
+		multivalues
+		group
+		flex
+		flex-initial
+		items-center
+		justify-center
+		gap-1
+		overflow-x-scroll
+		scrollbar-hidden
+	`,
+    $attrs?.class
+  )
+"
+	:data-disabled="disabled"
+	:data-read-only="readonly"
+	:aria-label="label ? `Values for ${label}` : void 0"
+	v-bind="{ ...$attrs, class: void 0 }"
+	@keydown="handleKeydown"
+>
+	<div
+		role="listitem"
+		:data-border="border"
+		:class="twMerge(
+  `
+				multivalues--item
+				flex-basis-0
+				min-w-2
+				flex
+				max-w-fit
+				flex-1
+				items-center
+				gap-0.5
+				overflow-hidden
+				px-1
+				text-xs
+				leading-none
+				focus-outline
+				outlined:outline-offset-0
+			`,
+  !(disabled || readonly) && `
+				group-focus:text-accent-500
+				focus:text-accent-500`,
+  border && `
+				rounded-sm
+				border-neutral-400
+				border
+				focus:border-accent-400
+			`,
+  border && (disabled || readonly) && `
+				border-neutral-200
+				focus:border-neutral-200
+				dark:border-neutral-800
+				dark:focus:border-neutral-800
+			`,
+  itemAttrs?.class
+)"
+		:tabindex="canEdit ? activeIndex === index ? 0 : -1 : void 0"
+		v-for="(value, index) of $modelValue"
+		:key="value"
+		ref="itemRefs"
+		@keydown.ctrl.c.prevent="copy(value.toString())"
+		@focus="activeIndex = index"
+	>
+		<span class="multivalues--label truncate">{{ value }}</span>
+		<WButton
+			class="multivalues--remove-button !p-0 text-sm !leading-none"
+			:aria-label="`Remove ${value}`"
+			:border="false"
+			:disabled="disabled || readonly"
+			tabindex="-1"
+			@click="removeVal(value)"
+		>
+			<WIcon><i-lucide-x/></WIcon>
+		</Wbutton>
+	</div>
+</div>
+</template>
+
+<script setup>
+import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
+import { computed, nextTick, ref, useAttrs } from "vue";
+import ILucideX from "~icons/lucide/x";
+import { copy } from "../../helpers/copy.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WButton from "../WButton/WButton.vue";
+import WIcon from "../WIcon/WIcon.vue";
+defineOptions({
+  name: "WMultiValues",
+  inheritAttrs: false
+});
+const $attrs = useAttrs();
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false, default: true },
+  unstyle: { type: Boolean, required: false },
+  label: { type: String, required: false },
+  itemAttrs: { type: Object, required: false }
+});
+const canEdit = computed(() => !props.disabled && !props.readonly);
+const $modelValue = defineModel({ type: Array, ...{ default: () => [] } });
+const itemRefs = ref([]);
+const activeIndex = ref(0);
+function removeVal(value) {
+  if (!canEdit.value) return;
+  removeIfIn($modelValue.value, value);
+  if ($modelValue.value.length > 0) {
+    if (activeIndex.value >= $modelValue.value.length) {
+      activeIndex.value = $modelValue.value.length - 1;
+    }
+    nextTick(() => {
+      itemRefs.value[activeIndex.value]?.focus();
+    });
+  }
+}
+function handleKeydown(e) {
+  if (props.disabled) return;
+  const len = $modelValue.value.length;
+  if (len === 0) return;
+  if (e.key === "ArrowRight") {
+    activeIndex.value = (activeIndex.value + 1) % len;
+    itemRefs.value[activeIndex.value]?.focus();
+    e.preventDefault();
+  } else if (e.key === "ArrowLeft") {
+    activeIndex.value = (activeIndex.value - 1 + len) % len;
+    itemRefs.value[activeIndex.value]?.focus();
+    e.preventDefault();
+  } else if (e.key === "Delete" || e.key === "Backspace") {
+    if (canEdit.value) {
+      removeVal($modelValue.value[activeIndex.value]);
+      e.preventDefault();
+    }
+  } else if (e.key === "Home") {
+    activeIndex.value = 0;
+    itemRefs.value[activeIndex.value]?.focus();
+    e.preventDefault();
+  } else if (e.key === "End") {
+    activeIndex.value = len - 1;
+    itemRefs.value[activeIndex.value]?.focus();
+    e.preventDefault();
+  }
+}
+</script>

package/dist/runtime/components/{LibMultiValues/LibMultiValues.vue.d.ts → WMultiValues/WMultiValues.vue.d.ts}

@@ -1,19 +1,11 @@
 import { type HTMLAttributes } from "vue";
-import type { BaseInteractiveProps, LabelProps, TailwindClassProp, WrapperProps } from "../shared/props.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: typeof __VLS_export;
-export default _default;
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js";
 declare const __VLS_export: <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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(BaseInteractiveProps & {
+        label?: string;
+        border?: boolean;
+        itemAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<HTMLAttributes, "class"> & TailwindClassProp & {
         modelValue?: T[];
     }) & {
         "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
@@ -27,6 +19,8 @@ declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+export default _default;
 type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
 } : {

package/dist/runtime/components/WNotifications/WNotification.d.vue.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "vue";
+import { type NotificationEntry, NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { TailwindClassProp } from "../../types/index.js";
+type __VLS_Props = {
+    notification: NotificationEntry;
+    handler?: NotificationHandler;
+} & /** @vue-ignore */ Omit<HTMLAttributes, "class"> & /** @vue-ignore */ TailwindClassProp;
+declare var __VLS_1: {
+    notification: NotificationEntry;
+}, __VLS_3: {
+    id: string;
+    title: string;
+    class: string;
+}, __VLS_43: {
+    class: string;
+    message: string;
+};
+type __VLS_Slots = {} & {
+    top?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    message?: (props: typeof __VLS_43) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    focus: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    handler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};