@revojs/ui 0.2.61 → 0.2.62

package/dist/vue/components/upload.vue

@@ -17,7 +17,7 @@
                 <Stack direction="horizontal" align="center" justify="between" gap="0">
                     <span class="min-w-0 flex-1 p-3">
                         <span class="block truncate px-1">{{
-                            "name" in modelValue ? modelValue.name : "File selected"
+                            "name" in modelValue ? modelValue.name : labels.fileSelected
                         }}</span>
                     </span>
 
@@ -26,7 +26,7 @@
                         variant="secondary"
                         :text="text"
                         :icon-prefix="CloseIcon"
-                        aria-label="Remove file"
+                        :aria-label="labels.removeFile"
                         :disabled="disabled"
                         @click="remove"
                     />
@@ -36,9 +36,9 @@
                 <Stack align="center" gap="3" padding="5" class="text-center">
                     <Icon :is="UploadIcon" :size="24" />
 
-                    <span class="text-sm opacity-60"> Drag and drop a file here </span>
+                    <span class="text-sm opacity-60">{{ labels.dropFile }}</span>
 
-                    <Button label="Browse files" variant="outline" :disabled="disabled" @click="browse" />
+                    <Button :label="labels.browseFiles" variant="outline" :disabled="disabled" @click="browse" />
                 </Stack>
             </slot>
 
@@ -70,6 +70,7 @@ import CloseIcon from "~icons/hugeicons/multiplication-sign";
 import { computed, ref, useTemplateRef } from "vue";
 import type { ControlInteraction } from "../../components/control.ts";
 import type { UploadProps, UploadState, UploadText } from "../../components/upload";
+import { useUiLabels } from "../utilities/labels";
 import Button from "./button.vue";
 import Icon from "./icon.vue";
 import Stack from "./stack.vue";
@@ -94,6 +95,8 @@ defineSlots<{
     file?: (props: { file: Blob | File; remove: () => void; disabled: boolean }) => unknown;
 }>();
 
+const labels = useUiLabels();
+
 const input = useTemplateRef("input");
 
 const isOver = ref(false);

package/dist/vue/index.d.ts

@@ -1,42 +1,63 @@
+export { default as Accordion } from "./components/accordion.vue";
 export { default as Badge } from "./components/badge.vue";
 export { default as Breadcrumb } from "./components/breadcrumb.vue";
 export { default as Button } from "./components/button.vue";
 export { default as Card } from "./components/card.vue";
 export { default as Checkbox } from "./components/checkbox.vue";
+export { default as Collapsible } from "./components/collapsible.vue";
 export { default as Collection } from "./components/collection.vue";
+export { default as ConfirmDialog } from "./components/confirm-dialog.vue";
 export { default as Container } from "./components/container.vue";
+export { default as ContextMenu } from "./components/context-menu.vue";
 export { default as Counter } from "./components/counter.vue";
 export { default as Dialog } from "./components/dialog.vue";
+export { default as Entry } from "./components/entry.vue";
 export { default as Field } from "./components/field.vue";
 export { default as Heading } from "./components/heading.vue";
-export { default as Shell } from "./components/shell.vue";
 export { default as Icon } from "./components/icon.vue";
 export { default as Input } from "./components/input.vue";
 export { default as Link } from "./components/link.vue";
 export { default as Markdown } from "./components/markdown.vue";
 export { default as Menu } from "./components/menu.vue";
+export { default as MenuCheckboxItem } from "./components/menu-checkbox-item.vue";
+export { default as MenuGroup } from "./components/menu-group.vue";
 export { default as MenuItem } from "./components/menu-item.vue";
-export { default as Entry } from "./components/entry.vue";
-export { default as Notification } from "./components/notification.vue";
+export { default as MenuLayer } from "./components/menu-layer.vue";
+export { default as MenuRadioGroup } from "./components/menu-radio-group.vue";
+export { default as MenuRadioItem } from "./components/menu-radio-item.vue";
 export { default as Navigate } from "./components/navigate.vue";
-export { default as Popover } from "./components/popover.vue";
+export { default as Notification } from "./components/notification.vue";
 export { default as Pagination } from "./components/pagination.vue";
+export { default as Popover } from "./components/popover.vue";
 export { default as Progress } from "./components/progress.vue";
 export { default as Radio } from "./components/radio.vue";
+export { default as RadioGroup } from "./components/radio-group.vue";
 export { default as Range } from "./components/range.vue";
 export { default as Rating } from "./components/rating.vue";
 export { default as Select } from "./components/select.vue";
 export { default as Separator } from "./components/separator.vue";
 export { default as Sheet } from "./components/sheet.vue";
+export { default as Shell } from "./components/shell.vue";
 export { default as Stack } from "./components/stack.vue";
+export { default as Stepper } from "./components/stepper.vue";
 export { default as Switch } from "./components/switch.vue";
 export { default as Tabs } from "./components/tabs.vue";
-export { default as Upload } from "./components/upload.vue";
+export { default as TagsInput } from "./components/tags-input.vue";
 export { default as Textarea } from "./components/textarea.vue";
+export { default as ToastRegion } from "./components/toast-region.vue";
 export { default as ToggleGroup } from "./components/toggle-group.vue";
+export { default as Toolbar } from "./components/toolbar.vue";
 export { default as Tooltip } from "./components/tooltip.vue";
-export { menuCloseKey, menuSizeKey } from "./utilities/menu";
+export { default as Upload } from "./components/upload.vue";
+export { defaultUiLabels, germanUiLabels, provideUiLabels, uiLabelsKey, useUiLabels } from "./utilities/labels";
+export { menuCloseKey, menuRadioKey, menuSizeKey, type MenuRadioContext } from "./utilities/menu";
+export { tooltipState } from "./utilities/tooltip";
+export { useAnchor } from "./utilities/use-anchor";
+export { useConfirm } from "./utilities/use-confirm";
 export { useControlAttributes } from "./utilities/use-control-attributes";
-export { useFocusTrap } from "./utilities/use-focus-trap";
+export { menuItemSelector, useMenuNavigation } from "./utilities/use-menu-navigation";
 export { useModalDialog } from "./utilities/use-modal-dialog";
+export { useRovingFocus } from "./utilities/use-roving-focus";
 export { useScrollLock } from "./utilities/use-scroll-lock";
+export { useToast } from "./utilities/use-toast";
+export { isTypeaheadKey, useTypeahead } from "./utilities/use-typeahead";

package/dist/vue/index.js

@@ -1,43 +1,64 @@
-import { menuCloseKey, menuSizeKey } from "./utilities/menu.js";
+import { defaultUiLabels, germanUiLabels, provideUiLabels, uiLabelsKey, useUiLabels } from "./utilities/labels.js";
+import { menuCloseKey, menuRadioKey, menuSizeKey } from "./utilities/menu.js";
+import { tooltipState } from "./utilities/tooltip.js";
+import { useAnchor } from "./utilities/use-anchor.js";
+import { useConfirm } from "./utilities/use-confirm.js";
 import { useControlAttributes } from "./utilities/use-control-attributes.js";
-import { useFocusTrap } from "./utilities/use-focus-trap.js";
+import { isTypeaheadKey, useTypeahead } from "./utilities/use-typeahead.js";
+import { menuItemSelector, useMenuNavigation } from "./utilities/use-menu-navigation.js";
 import { useScrollLock } from "./utilities/use-scroll-lock.js";
 import { useModalDialog } from "./utilities/use-modal-dialog.js";
+import { useRovingFocus } from "./utilities/use-roving-focus.js";
+import { useToast } from "./utilities/use-toast.js";
+import Accordion from "./components/accordion.vue";
 import Badge from "./components/badge.vue";
 import Breadcrumb from "./components/breadcrumb.vue";
 import Button from "./components/button.vue";
 import Card from "./components/card.vue";
 import Checkbox from "./components/checkbox.vue";
+import Collapsible from "./components/collapsible.vue";
 import Collection from "./components/collection.vue";
+import ConfirmDialog from "./components/confirm-dialog.vue";
 import Container from "./components/container.vue";
+import ContextMenu from "./components/context-menu.vue";
 import Counter from "./components/counter.vue";
 import Dialog from "./components/dialog.vue";
+import Entry from "./components/entry.vue";
 import Field from "./components/field.vue";
 import Heading from "./components/heading.vue";
-import Shell from "./components/shell.vue";
 import Icon from "./components/icon.vue";
 import Input from "./components/input.vue";
 import Link from "./components/link.vue";
 import Markdown from "./components/markdown.vue";
 import Menu from "./components/menu.vue";
+import MenuCheckboxItem from "./components/menu-checkbox-item.vue";
+import MenuGroup from "./components/menu-group.vue";
 import MenuItem from "./components/menu-item.vue";
-import Entry from "./components/entry.vue";
-import Notification from "./components/notification.vue";
+import MenuLayer from "./components/menu-layer.vue";
+import MenuRadioGroup from "./components/menu-radio-group.vue";
+import MenuRadioItem from "./components/menu-radio-item.vue";
 import Navigate from "./components/navigate.vue";
-import Popover from "./components/popover.vue";
+import Notification from "./components/notification.vue";
 import Pagination from "./components/pagination.vue";
+import Popover from "./components/popover.vue";
 import Progress from "./components/progress.vue";
 import Radio from "./components/radio.vue";
+import RadioGroup from "./components/radio-group.vue";
 import Range from "./components/range.vue";
 import Rating from "./components/rating.vue";
 import Select from "./components/select.vue";
 import Separator from "./components/separator.vue";
 import Sheet from "./components/sheet.vue";
+import Shell from "./components/shell.vue";
 import Stack from "./components/stack.vue";
+import Stepper from "./components/stepper.vue";
 import Switch from "./components/switch.vue";
 import Tabs from "./components/tabs.vue";
-import Upload from "./components/upload.vue";
+import TagsInput from "./components/tags-input.vue";
 import Textarea from "./components/textarea.vue";
+import ToastRegion from "./components/toast-region.vue";
 import ToggleGroup from "./components/toggle-group.vue";
+import Toolbar from "./components/toolbar.vue";
 import Tooltip from "./components/tooltip.vue";
-export { Badge, Breadcrumb, Button, Card, Checkbox, Collection, Container, Counter, Dialog, Entry, Field, Heading, Icon, Input, Link, Markdown, Menu, MenuItem, Navigate, Notification, Pagination, Popover, Progress, Radio, Range, Rating, Select, Separator, Sheet, Shell, Stack, Switch, Tabs, Textarea, ToggleGroup, Tooltip, Upload, menuCloseKey, menuSizeKey, useControlAttributes, useFocusTrap, useModalDialog, useScrollLock };
+import Upload from "./components/upload.vue";
+export { Accordion, Badge, Breadcrumb, Button, Card, Checkbox, Collapsible, Collection, ConfirmDialog, Container, ContextMenu, Counter, Dialog, Entry, Field, Heading, Icon, Input, Link, Markdown, Menu, MenuCheckboxItem, MenuGroup, MenuItem, MenuLayer, MenuRadioGroup, MenuRadioItem, Navigate, Notification, Pagination, Popover, Progress, Radio, RadioGroup, Range, Rating, Select, Separator, Sheet, Shell, Stack, Stepper, Switch, Tabs, TagsInput, Textarea, ToastRegion, ToggleGroup, Toolbar, Tooltip, Upload, defaultUiLabels, germanUiLabels, isTypeaheadKey, menuCloseKey, menuItemSelector, menuRadioKey, menuSizeKey, provideUiLabels, tooltipState, uiLabelsKey, useAnchor, useConfirm, useControlAttributes, useMenuNavigation, useModalDialog, useRovingFocus, useScrollLock, useToast, useTypeahead, useUiLabels };

package/dist/vue/utilities/labels.d.ts

@@ -0,0 +1,7 @@
+import { type InjectionKey } from "vue";
+import type { UiLabels } from "../../components/labels";
+export declare function useUiLabels(): UiLabels;
+export declare function provideUiLabels(labels: Partial<UiLabels>): void;
+export declare const uiLabelsKey: InjectionKey<UiLabels>;
+export declare const defaultUiLabels: UiLabels;
+export declare const germanUiLabels: UiLabels;

package/dist/vue/utilities/labels.js

@@ -0,0 +1,62 @@
+import { inject, provide } from "vue";
+//#region src/vue/utilities/labels.ts
+function useUiLabels() {
+	return inject(uiLabelsKey, defaultUiLabels);
+}
+function provideUiLabels(labels) {
+	provide(uiLabelsKey, {
+		...useUiLabels(),
+		...labels
+	});
+}
+var uiLabelsKey = Symbol("ui-labels");
+var defaultUiLabels = {
+	open: "Open",
+	close: "Close",
+	menu: "Menu",
+	select: "Select",
+	selectRequired: "Please select an option",
+	noResults: "No results found",
+	empty: "Nothing found",
+	previous: "Previous",
+	next: "Next",
+	pagination: "Pagination",
+	pageNavigation: "Page navigation",
+	fileSelected: "File selected",
+	dropFile: "Drag and drop a file here",
+	browseFiles: "Browse files",
+	removeFile: "Remove file",
+	decrease: "Decrease",
+	increase: "Increase",
+	rating: (value, max) => `${value} of ${max}`,
+	notifications: "Notifications (F8)",
+	confirm: "Confirm",
+	cancel: "Cancel",
+	remove: (label) => `Remove ${label}`
+};
+var germanUiLabels = {
+	open: "Öffnen",
+	close: "Schließen",
+	menu: "Menü",
+	select: "Auswählen",
+	selectRequired: "Bitte wähle eine Option",
+	noResults: "Keine Treffer",
+	empty: "Nichts gefunden",
+	previous: "Zurück",
+	next: "Weiter",
+	pagination: "Seiten",
+	pageNavigation: "Seitennavigation",
+	fileSelected: "Datei ausgewählt",
+	dropFile: "Datei hierher ziehen",
+	browseFiles: "Datei auswählen",
+	removeFile: "Datei entfernen",
+	decrease: "Verringern",
+	increase: "Erhöhen",
+	rating: (value, max) => `${value} von ${max}`,
+	notifications: "Mitteilungen (F8)",
+	confirm: "Bestätigen",
+	cancel: "Abbrechen",
+	remove: (label) => `${label} entfernen`
+};
+//#endregion
+export { defaultUiLabels, germanUiLabels, provideUiLabels, uiLabelsKey, useUiLabels };

package/dist/vue/utilities/menu.d.ts

@@ -1,4 +1,10 @@
 import type { ComputedRef, InjectionKey } from "vue";
 import type { ButtonSize } from "../../components/button";
+import type { MenuRadioValue } from "../../components/menu";
+export interface MenuRadioContext {
+    value: ComputedRef<MenuRadioValue | undefined>;
+    select: (value: MenuRadioValue) => void;
+}
 export declare const menuCloseKey: InjectionKey<() => void>;
 export declare const menuSizeKey: InjectionKey<ComputedRef<ButtonSize>>;
+export declare const menuRadioKey: InjectionKey<MenuRadioContext>;

package/dist/vue/utilities/menu.js

@@ -1,5 +1,6 @@
 //#region src/vue/utilities/menu.ts
 var menuCloseKey = Symbol("menu-close");
 var menuSizeKey = Symbol("menu-size");
+var menuRadioKey = Symbol("menu-radio");
 //#endregion
-export { menuCloseKey, menuSizeKey };
+export { menuCloseKey, menuRadioKey, menuSizeKey };

package/dist/vue/utilities/tooltip.d.ts

@@ -0,0 +1,3 @@
+export declare const tooltipState: {
+    closedAt: number;
+};

package/dist/vue/utilities/tooltip.js

@@ -0,0 +1,4 @@
+//#region src/vue/utilities/tooltip.ts
+var tooltipState = { closedAt: 0 };
+//#endregion
+export { tooltipState };

package/dist/vue/utilities/use-anchor.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+export declare function useAnchor(layer: Ref<HTMLElement | null>, open?: MaybeRefOrGetter<boolean>): {
+    anchored: Ref<boolean, boolean>;
+    anchorStyle: string;
+    layerStyle: string;
+};

package/dist/vue/utilities/use-anchor.js

@@ -0,0 +1,26 @@
+import { onMounted, ref, toValue, useId, watch } from "vue";
+//#region src/vue/utilities/use-anchor.ts
+function useAnchor(layer, open = true) {
+	const name = `--anchor-${useId()}`;
+	const anchored = ref(false);
+	onMounted(() => {
+		anchored.value = typeof HTMLElement.prototype.showPopover === "function" && CSS.supports("anchor-name", name);
+	});
+	watch([
+		layer,
+		anchored,
+		() => toValue(open)
+	], ([element, supported, value]) => {
+		if (!element || !supported) return;
+		const shown = element.matches(":popover-open");
+		if (value && !shown) element.showPopover();
+		else if (!value && shown) element.hidePopover();
+	}, { flush: "post" });
+	return {
+		anchored,
+		anchorStyle: `anchor-name: ${name}`,
+		layerStyle: `position-anchor: ${name}`
+	};
+}
+//#endregion
+export { useAnchor };

package/dist/vue/utilities/use-confirm.d.ts

@@ -0,0 +1,24 @@
+import type { ConfirmOptions } from "../../components/confirm";
+export declare function useConfirm(): {
+    request: Readonly<import("vue").Ref<{
+        readonly options: {
+            readonly label: string;
+            readonly description?: string;
+            readonly confirmLabel?: string;
+            readonly cancelLabel?: string;
+            readonly variant?: import("../..").ConfirmVariant;
+        };
+        readonly resolve: (value: boolean) => void;
+    } | undefined, {
+        readonly options: {
+            readonly label: string;
+            readonly description?: string;
+            readonly confirmLabel?: string;
+            readonly cancelLabel?: string;
+            readonly variant?: import("../..").ConfirmVariant;
+        };
+        readonly resolve: (value: boolean) => void;
+    } | undefined>>;
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+    answer: (value: boolean) => void;
+};

package/dist/vue/utilities/use-confirm.js

@@ -0,0 +1,27 @@
+import { readonly, shallowRef } from "vue";
+//#region src/vue/utilities/use-confirm.ts
+function useConfirm() {
+	function confirm(options) {
+		request.value?.resolve(false);
+		const { promise, resolve } = Promise.withResolvers();
+		if (typeof document === "undefined") resolve(false);
+		else request.value = {
+			options,
+			resolve
+		};
+		return promise;
+	}
+	function answer(value) {
+		const current = request.value;
+		request.value = void 0;
+		current?.resolve(value);
+	}
+	return {
+		request: readonly(request),
+		confirm,
+		answer
+	};
+}
+var request = shallowRef();
+//#endregion
+export { useConfirm };

package/dist/vue/utilities/use-menu-navigation.d.ts

@@ -0,0 +1,6 @@
+export declare function useMenuNavigation(): {
+    items: (menu: Element | null | undefined) => HTMLElement[];
+    focusItem: (menu: Element | null | undefined, index: number) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+};
+export declare const menuItemSelector = "[role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']";

package/dist/vue/utilities/use-menu-navigation.js

@@ -0,0 +1,48 @@
+import { isTypeaheadKey, useTypeahead } from "./use-typeahead.js";
+//#region src/vue/utilities/use-menu-navigation.ts
+function useMenuNavigation() {
+	const { search, pending } = useTypeahead();
+	function items(menu) {
+		const list = [];
+		for (const item of menu?.querySelectorAll("[role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']") ?? []) if (item.closest("[role='menu']") === menu && item.getAttribute("aria-disabled") !== "true") list.push(item);
+		return list;
+	}
+	function focusItem(menu, index) {
+		const list = items(menu);
+		list[(index + list.length) % list.length]?.focus();
+	}
+	function handleKeyDown(event) {
+		const target = event.target;
+		const menu = target.closest("[role='menu']");
+		const list = items(menu);
+		const index = list.indexOf(target);
+		if (index === -1) return;
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			focusItem(menu, index + 1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			focusItem(menu, index - 1);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusItem(menu, 0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusItem(menu, -1);
+		} else if (isTypeaheadKey(event) && (event.key !== " " || pending())) {
+			const labels = [];
+			for (const item of list) labels.push(item.textContent ?? "");
+			const match = search(event.key, labels, index);
+			event.preventDefault();
+			if (match !== -1) list[match].focus();
+		}
+	}
+	return {
+		items,
+		focusItem,
+		handleKeyDown
+	};
+}
+var menuItemSelector = "[role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']";
+//#endregion
+export { menuItemSelector, useMenuNavigation };

package/dist/vue/utilities/use-roving-focus.d.ts

@@ -0,0 +1,7 @@
+import { type MaybeRefOrGetter, type Ref } from "vue";
+import type { RovingFocusOptions } from "../../components/roving-focus";
+export declare function useRovingFocus(container: Ref<HTMLElement | null>, options?: MaybeRefOrGetter<RovingFocusOptions>): {
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleFocusIn: (event: FocusEvent) => void;
+    sync: () => void;
+};

package/dist/vue/utilities/use-roving-focus.js

@@ -0,0 +1,73 @@
+import { onMounted, onUpdated, toValue } from "vue";
+//#region src/vue/utilities/use-roving-focus.ts
+function useRovingFocus(container, options = {}) {
+	let active;
+	function items() {
+		const { selector = "button, a[href], input, [tabindex]" } = toValue(options);
+		const list = [];
+		for (const element of container.value?.querySelectorAll(selector) ?? []) {
+			if (element.matches(":disabled, [aria-disabled='true'], [type='hidden']") || element.getAttribute("tabindex") === "-1" && element.dataset.rovingItem === void 0 || element.closest("[role='menu'], [role='dialog'], [role='listbox']") !== container.value?.closest("[role='menu'], [role='dialog'], [role='listbox']")) continue;
+			list.push(element);
+		}
+		return list;
+	}
+	function sync() {
+		const list = items();
+		if (!container.value?.contains(document.activeElement) || !active || !list.includes(active)) active = list.find((element) => element.matches("[aria-checked='true'], [aria-selected='true'], [aria-pressed='true']")) ?? list[0];
+		for (const element of list) {
+			element.dataset.rovingItem = "";
+			element.tabIndex = element === active ? 0 : -1;
+		}
+	}
+	function focus(element) {
+		active = element;
+		sync();
+		element.focus();
+		toValue(options).onMove?.(element);
+	}
+	function handleFocusIn(event) {
+		const list = items();
+		const target = event.target;
+		if (list.includes(target)) {
+			active = target;
+			sync();
+		}
+	}
+	function handleKeyDown(event) {
+		const target = event.target;
+		if (target.matches("input:not([type='checkbox'], [type='radio'], [type='button']), textarea, [contenteditable]")) return;
+		const { orientation = "horizontal", loop = true } = toValue(options);
+		const list = items();
+		const index = list.indexOf(target);
+		if (index === -1 || event.altKey || event.ctrlKey || event.metaKey) return;
+		const rtl = getComputedStyle(container.value ?? target).direction === "rtl";
+		let step = 0;
+		if (orientation !== "vertical" && event.key === "ArrowRight") step = rtl ? -1 : 1;
+		else if (orientation !== "vertical" && event.key === "ArrowLeft") step = rtl ? 1 : -1;
+		else if (orientation !== "horizontal" && event.key === "ArrowDown") step = 1;
+		else if (orientation !== "horizontal" && event.key === "ArrowUp") step = -1;
+		else if (event.key === "Home") {
+			event.preventDefault();
+			focus(list[0]);
+			return;
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focus(list[list.length - 1]);
+			return;
+		} else return;
+		event.preventDefault();
+		let next = index + step;
+		if (loop) next = (next + list.length) % list.length;
+		const element = list[next];
+		if (element) focus(element);
+	}
+	onMounted(sync);
+	onUpdated(sync);
+	return {
+		handleKeyDown,
+		handleFocusIn,
+		sync
+	};
+}
+//#endregion
+export { useRovingFocus };

package/dist/vue/utilities/use-toast.d.ts

@@ -0,0 +1,27 @@
+import type { ToastOptions } from "../../components/toast";
+export declare function useToast(): {
+    toasts: Readonly<import("vue").Ref<readonly {
+        readonly label: string;
+        readonly subtext?: string;
+        readonly variant?: import("../..").NotificationVariant;
+        readonly duration?: number;
+        readonly action?: {
+            readonly label: string;
+            readonly onSelect: () => void;
+        } | undefined;
+        readonly id: string;
+    }[], readonly {
+        readonly label: string;
+        readonly subtext?: string;
+        readonly variant?: import("../..").NotificationVariant;
+        readonly duration?: number;
+        readonly action?: {
+            readonly label: string;
+            readonly onSelect: () => void;
+        } | undefined;
+        readonly id: string;
+    }[]>>;
+    add: (options: ToastOptions) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+};

package/dist/vue/utilities/use-toast.js

@@ -0,0 +1,33 @@
+import { readonly, shallowRef } from "vue";
+//#region src/vue/utilities/use-toast.ts
+function useToast() {
+	function add(options) {
+		if (typeof document === "undefined") return "";
+		counter.value += 1;
+		const id = `toast-${counter.value}`;
+		toasts.value = [...toasts.value, {
+			duration: 5e3,
+			...options,
+			id
+		}];
+		return id;
+	}
+	function remove(id) {
+		const list = [];
+		for (const toast of toasts.value) if (toast.id !== id) list.push(toast);
+		toasts.value = list;
+	}
+	function clear() {
+		toasts.value = [];
+	}
+	return {
+		toasts: readonly(toasts),
+		add,
+		remove,
+		clear
+	};
+}
+var counter = shallowRef(0);
+var toasts = shallowRef([]);
+//#endregion
+export { useToast };

package/dist/vue/utilities/use-typeahead.d.ts

@@ -0,0 +1,5 @@
+export declare function useTypeahead(timeout?: number): {
+    search: (key: string, labels: Array<string>, current: number) => number;
+    pending: () => boolean;
+};
+export declare function isTypeaheadKey(event: KeyboardEvent): boolean;

package/dist/vue/utilities/use-typeahead.js

@@ -0,0 +1,37 @@
+//#region src/vue/utilities/use-typeahead.ts
+function useTypeahead(timeout = 1e3) {
+	let buffer = "";
+	let timer;
+	function search(key, labels, current) {
+		clearTimeout(timer);
+		buffer += key.toLowerCase();
+		timer = setTimeout(() => {
+			buffer = "";
+		}, timeout);
+		let repeated = true;
+		for (const character of buffer) if (character !== buffer[0]) {
+			repeated = false;
+			break;
+		}
+		const term = repeated ? buffer[0] : buffer;
+		let start = current;
+		if (repeated || current < 0) start = current + 1;
+		for (let offset = 0; offset < labels.length; offset++) {
+			const index = (start + offset) % labels.length;
+			if (labels[index].trim().toLowerCase().startsWith(term)) return index;
+		}
+		return -1;
+	}
+	function pending() {
+		return buffer !== "";
+	}
+	return {
+		search,
+		pending
+	};
+}
+function isTypeaheadKey(event) {
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+//#endregion
+export { isTypeaheadKey, useTypeahead };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@revojs/ui",
-    "version": "0.2.61",
+    "version": "0.2.62",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/vue/utilities/use-focus-trap.d.ts

@@ -1,2 +0,0 @@
-import { type MaybeRefOrGetter, type Ref } from "vue";
-export declare function useFocusTrap(container: Ref<HTMLElement | null>, active: MaybeRefOrGetter<boolean>): void;