@witchcraft/ui 0.4.0 → 0.4.1

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

@@ -0,0 +1,348 @@
+<template>
+<div
+	:class="twMerge(
+  `
+		file-input
+		justify-center
+		border-2
+		border-dashed
+		border-accent-500/80
+		focus-outline-within
+		transition-[border-color,box-shadow]
+		ease-out
+		hover:bg-accent-500/10
+		outlined-focus-within
+	`,
+  compact && `rounded-sm`,
+  !compact && `
+			flex
+			w-full
+			flex-col
+			items-stretch
+			gap-2
+			rounded-xl
+			p-2
+		`,
+  isHovered && `bg-accent-500/10`,
+  errors.length > 0 && isErrored && `errored border-red-400 hover:border-red-500`,
+  wrapperAttrs?.class
+)"
+	v-bind="{ ...wrapperAttrs, class: void 0 }"
+	@drop="onDrop"
+	@dragover.prevent="isHovered = true"
+	@dragleave="isHovered = false"
+>
+	<div
+		:class="twMerge(
+  `
+			file-input--wrapper
+			relative
+			justify-center
+			@container
+		`,
+  compact && `flex gap-2`,
+  !compact && `
+				file-input
+				flex
+				flex-col
+				items-center
+			`
+)"
+	>
+		<label
+			:for="finalId"
+			:class="twMerge(`
+				file-input--label
+				pointer-events-none
+				flex
+				gap-1
+				items-center
+				justify-center
+				whitespace-nowrap
+				max-w-full
+			`)"
+		>
+			<slot
+				v-if="compact || multiple || files.length === 0"
+				name="icon"
+			>
+				<WIcon><i-lucide-upload/></WIcon>
+			</slot>
+			<slot name="label">
+				<div class="text-ellipsis overflow-hidden shrink-1 hidden @min-[15ch]:block">
+					{{
+						compact ? multiple ? t("file-input.compact-choose-file-plural") : t("file-input.compact-choose-file") : multiple ? t("file-input.non-compact-choose-file-plural") : t("file-input.non-compact-choose-file")
+					}}
+				</div>
+			</slot>
+			<div
+				v-if="compact && multiple"
+				class="file-input--label-count"
+			>
+				{{ ` (${files.length})` }}
+			</div>
+			<div
+				v-if="compact && !multiple && files.length > 0"
+				class="file-input--label-name text-ellipsis overflow-hidden shrink-9999 hidden @3xs:block"
+			>
+				{{ ` (${files[0]?.file.name})` }}
+			</div>
+			<div
+				v-if="compact && !multiple && files.length > 0"
+				class="file-input--label-name text-ellipsis overflow-hidden shrink-9999 @3xs:hidden"
+			>
+				{{ ` (...)` }}
+			</div>
+		</label>
+		<label
+			v-if="!compact && formats?.length > 0"
+			class="file-input--formats-label flex-col items-center text-sm max-w-full hidden @min-[15ch]:flex"
+		>
+			<slot name="formats"><div class="text-ellipsis overflow-hidden max-w-full">{{ t("file-input.accepted-formats") }}:</div> </slot>
+			<div class="file-input--formats-list overflow-hidden text-ellipsis max-w-full">
+				{{ extensions.join(", ") }}
+			</div>
+		</label>
+		<input
+			:id="finalId"
+			:class="twMerge(
+  `
+				file-input--input
+				absolute
+				inset-[calc(var(--spacing)*-2)]
+				cursor-pointer
+				z-0
+				text-[0]
+				opacity-0
+			`,
+  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"
+			@input="inputFile"
+			@click="$event.target.value = null"
+		>
+		<!--  click event allows event to fire even if the user picks the same file -->
+	</div>
+	<div
+		v-if="!compact && files.length > 0"
+		:class="twMerge(
+  `file-input--previews
+			flex items-stretch justify-center gap-4 flex-wrap
+			`,
+  multiple && `
+				w-full
+			`
+)"
+	>
+		<div
+			class="
+				file-input--preview-wrapper
+				z-1
+				relative
+				flex
+				min-w-0
+				max-w-[150px]
+				flex-initial
+				flex-col
+				items-center
+				gap-1
+				p-1
+				rounded-sm
+				border
+				border-neutral-300
+				dark:border-neutral-800
+				shadow-md
+				shadow-neutral-800/30
+				bg-neutral-100
+				dark:bg-neutral-900
+				[&:hover_.file-input--remove-button]:opacity-100
+			"
+			v-for="entry of files"
+			:key="entry.file.name"
+		>
+			<div class="flex flex-initial basis-full justify-start items-center max-w-full gap-2 px-1">
+				<WButton
+					:border="false"
+					class="file-input--remove-button rounded-full p-0"
+					:aria-label="`Remove file ${entry.file.name}`"
+					@click="removeFile(entry)"
+				>
+					<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"
+				>
+					{{ entry.file.name }}
+				</div>
+			</div>
+
+			<div class="file-input--preview flex flex-initial basis-full justify-center">
+				<div
+					v-if="entry.isImg"
+					class="file-input--preview-image
+					bg-transparency-squares flex
+					h-[80px]   flex-wrap items-center
+					justify-center
+				"
+				>
+					<img
+						class="max-h-full w-auto"
+						:src="entry.previewUrl"
+					>
+				</div>
+				<div
+					v-if="!entry.isImg"
+					class="file-input--preview-no-image
+					flex h-[80px]
+					flex-1 basis-full flex-wrap items-center justify-center
+					"
+				>
+					<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, 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 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 isErrored = ref(false);
+const isHovered = ref(false);
+function clearFiles() {
+  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, () => {
+  emits("input", files.map((entry) => entry.file), clearFiles);
+});
+watch(errors, () => {
+  if (errors.length > 0) {
+    isErrored.value = true;
+    emits("errors", [...errors], clearErrors);
+  }
+});
+function clearErrors() {
+  isErrored.value = false;
+  errors.splice(0, errors.length);
+}
+defineOptions({
+  name: "WFileInput",
+  inheritAttrs: false
+});
+const mimeTypes = computed(() => props.formats?.filter((_) => !_.startsWith(".")) ?? []);
+const extensions = computed(() => props.formats?.filter((_) => _.startsWith(".")) ?? []);
+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);
+  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) {
+    el.value.files = e.dataTransfer.files;
+    e.preventDefault();
+    isHovered.value = false;
+    return updateFiles(el.value.files);
+  }
+  return void 0;
+}
+async function inputFile(e) {
+  e.preventDefault();
+  if (el.value.files) {
+    return updateFiles(el.value.files);
+  }
+  return void 0;
+}
+function updateFiles(filesList) {
+  const errs = [];
+  for (const file of filesList) {
+    const isImg = file.type.startsWith("image");
+    const byPassValidation = props.formats.length === 0;
+    const isValidMimeType = mimeTypes.value.find((_) => _.endsWith("/*") ? file.type.startsWith(_.slice(0, -2)) : _ === file.type) !== void 0;
+    const isValidExtension = extensions.value.find((_) => file.name.endsWith(_)) !== void 0;
+    if (!byPassValidation && (!isValidMimeType || !isValidExtension)) {
+      const extension = file.name.match(/.*(\..*)/)?.[1] ?? "Unknown";
+      const type = file.type === "" ? "" : ` (${file.type})`;
+      const message = `File type ${extension}${type} is not allowed. Allowed file types are: ${extensionsList.value}.`;
+      const err = new Error(message);
+      err.file = file;
+      err.isValidExtension = isValidExtension;
+      err.isValidMimeType = isValidMimeType;
+      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, previewUrl });
+      } else {
+        files.splice(0, files.length, { file, isImg, previewUrl });
+      }
+    }
+  }
+  if (errs.length > 0) {
+    errors.splice(0, errors.length, ...errs);
+    return false;
+  } else if (errors.length > 0) {
+    clearErrors();
+  }
+  return void 0;
+}
+defineExpose({
+  clearFiles,
+  clearErrors
+});
+</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/WIcon/WIcon.d.vue.ts

@@ -0,0 +1,18 @@
+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
+ * 		<WIcon><i-...></WIcon>
+ * ``
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+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 & {
+    new (): {
+        $slots: S;
+    };
+};

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/WIcon/WIcon.vue.d.ts

@@ -0,0 +1,18 @@
+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
+ * 		<WIcon><i-...></WIcon>
+ * ``
+ */
+declare const _default: typeof __VLS_export;
+export default _default;
+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 & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from "vue";
+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<(BaseInteractiveProps & {
+        label?: string;
+        border?: boolean;
+        itemAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<HTMLAttributes, "class"> & TailwindClassProp & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T[]) => void;
+}>) => 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];
+} : {
+    [K in keyof T as K]: 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/WMultiValues/WMultiValues.vue.d.ts

@@ -0,0 +1,28 @@
+import { type HTMLAttributes } from "vue";
+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<(BaseInteractiveProps & {
+        label?: string;
+        border?: boolean;
+        itemAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp;
+    } & Omit<HTMLAttributes, "class"> & TailwindClassProp & {
+        modelValue?: T[];
+    }) & {
+        "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: T[]) => void;
+}>) => 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];
+} : {
+    [K in keyof T as K]: 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;
+    };
+};