@mantine-vue/spotlight 1.1.2

package/cjs/index.cjs

@@ -0,0 +1,1007 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _mantine_vue_store = require("@mantine-vue/store");
+let vue = require("vue");
+let _mantine_vue_core = require("@mantine-vue/core");
+let _mantine_vue_hooks = require("@mantine-vue/hooks");
+//#region src/spotlight.store.ts
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+var createSpotlightStore = () => (0, _mantine_vue_store.createStore)({
+	opened: false,
+	empty: false,
+	selected: -1,
+	listId: "",
+	query: "",
+	registeredActions: /* @__PURE__ */ new Set()
+});
+var useSpotlight = (store) => store.value;
+function updateSpotlightStateAction(update, store) {
+	const state = store.getState();
+	store.setState({
+		...state,
+		...update(store.getState())
+	});
+}
+function openSpotlightAction(store) {
+	updateSpotlightStateAction(() => ({
+		opened: true,
+		selected: -1
+	}), store);
+}
+function closeSpotlightAction(store) {
+	updateSpotlightStateAction(() => ({ opened: false }), store);
+}
+function toggleSpotlightAction(store) {
+	updateSpotlightStateAction((state) => ({
+		opened: !state.opened,
+		selected: state.opened ? state.selected : -1
+	}), store);
+}
+function setSelectedAction(index, store) {
+	store.setState((state) => ({
+		...state,
+		selected: index
+	}));
+}
+function setListId(id, store) {
+	store.setState((state) => ({
+		...state,
+		listId: id
+	}));
+}
+function findElementByQuerySelector(selector, root = document) {
+	const element = root.querySelector(selector);
+	if (element) return element;
+	const children = root instanceof ShadowRoot ? root.host.children : root.children;
+	for (let i = 0; i < children.length; i += 1) {
+		const child = children[i];
+		if (child.shadowRoot) {
+			const shadowElement = findElementByQuerySelector(selector, child.shadowRoot);
+			if (shadowElement) return shadowElement;
+		}
+		const nestedElement = findElementByQuerySelector(selector, child);
+		if (nestedElement) return nestedElement;
+	}
+	return null;
+}
+function selectAction(index, store) {
+	const state = store.getState();
+	const actionsList = state.listId ? findElementByQuerySelector(`#${state.listId}`) : null;
+	const selected = actionsList?.querySelector("[data-selected]");
+	const actions = actionsList?.querySelectorAll("[data-action]") ?? [];
+	const selectedIndex = clamp(index === -1 ? actions.length - 1 : index === actions.length ? 0 : index, 0, actions.length - 1);
+	selected?.removeAttribute("data-selected");
+	actions[selectedIndex]?.scrollIntoView?.({ block: "nearest" });
+	actions[selectedIndex]?.setAttribute("data-selected", "true");
+	setSelectedAction(selectedIndex, store);
+	return selectedIndex;
+}
+function selectNextAction(store) {
+	return selectAction(store.getState().selected + 1, store);
+}
+function selectPreviousAction(store) {
+	return selectAction(store.getState().selected - 1, store);
+}
+function triggerSelectedAction(store) {
+	const state = store.getState();
+	(state.listId ? findElementByQuerySelector(`#${state.listId} [data-selected]`) : null)?.click();
+}
+function registerAction(id, store) {
+	const state = store.getState();
+	state.registeredActions.add(id);
+	return () => {
+		state.registeredActions.delete(id);
+	};
+}
+function setQuery(query, store) {
+	updateSpotlightStateAction(() => ({ query }), store);
+	Promise.resolve().then(() => {
+		selectAction(0, store);
+		updateSpotlightStateAction((state) => ({ empty: state.query.trim().length > 0 && state.registeredActions.size === 0 || false }), store);
+	});
+}
+function clearSpotlightState({ clearQuery }, store) {
+	store.setState((state) => ({
+		...state,
+		selected: -1,
+		query: clearQuery ? "" : state.query,
+		empty: clearQuery ? false : state.empty
+	}));
+}
+var spotlightActions = {
+	open: openSpotlightAction,
+	close: closeSpotlightAction,
+	toggle: toggleSpotlightAction,
+	updateState: updateSpotlightStateAction,
+	setSelectedAction,
+	setListId,
+	selectAction,
+	selectNextAction,
+	selectPreviousAction,
+	triggerSelectedAction,
+	registerAction,
+	setQuery,
+	clearSpotlightState
+};
+function createSpotlight() {
+	const store = createSpotlightStore();
+	return [store, {
+		open: () => openSpotlightAction(store),
+		close: () => closeSpotlightAction(store),
+		toggle: () => toggleSpotlightAction(store)
+	}];
+}
+var [spotlightStore, spotlight] = createSpotlight();
+var { open: openSpotlight, close: closeSpotlight, toggle: toggleSpotlight } = spotlight;
+//#endregion
+//#region src/is-actions-group.ts
+function isActionsGroup(item) {
+	const group = item;
+	return group.group !== void 0 && Array.isArray(group.actions);
+}
+//#endregion
+//#region src/default-spotlight-filter.ts
+function getKeywords(keywords) {
+	if (Array.isArray(keywords)) return keywords.map((keyword) => keyword.trim()).join(",").toLowerCase().trim();
+	if (typeof keywords === "string") return keywords.toLowerCase().trim();
+	return "";
+}
+function getFlatActions(data) {
+	return data.reduce((acc, item) => {
+		if ("actions" in item) return [...acc, ...item.actions.map((action) => ({
+			...action,
+			group: item.group
+		}))];
+		return [...acc, item];
+	}, []);
+}
+function flatActionsToGroups(data) {
+	const groups = {};
+	const result = [];
+	data.forEach((action) => {
+		if (action.group) {
+			if (!groups[action.group]) groups[action.group] = {
+				pushed: false,
+				data: {
+					group: action.group,
+					actions: []
+				}
+			};
+			groups[action.group].data.actions.push(action);
+			if (!groups[action.group].pushed) {
+				groups[action.group].pushed = true;
+				result.push(groups[action.group].data);
+			}
+		} else result.push(action);
+	});
+	return result;
+}
+var defaultSpotlightFilter = (_query, data) => {
+	const query = _query.trim().toLowerCase();
+	const priorityMatrix = [[], []];
+	getFlatActions(data).forEach((item) => {
+		if (item.label?.toLowerCase().includes(query)) priorityMatrix[0].push(item);
+		else if (item.description?.toLowerCase().includes(query) || getKeywords(item.keywords).includes(query)) priorityMatrix[1].push(item);
+	});
+	return flatActionsToGroups(priorityMatrix.flat());
+};
+//#endregion
+//#region src/limit-actions.ts
+function limitActions(actions, limit) {
+	if (!Array.isArray(actions)) return [];
+	let count = 0;
+	return actions.reduce((acc, item) => {
+		if (count >= limit) return acc;
+		if (isActionsGroup(item)) {
+			const groupActions = limitActions(item.actions, limit - count);
+			acc.push({
+				group: item.group,
+				actions: groupActions
+			});
+			count += groupActions.length;
+		} else {
+			acc.push(item);
+			count += 1;
+		}
+		return acc;
+	}, []);
+}
+//#endregion
+//#region src/Spotlight.context.ts
+var SpotlightContextKey = Symbol("SpotlightContext");
+function provideSpotlightContext(value) {
+	(0, vue.provide)(SpotlightContextKey, value);
+}
+function useSpotlightContext() {
+	const ctx = (0, vue.inject)(SpotlightContextKey, null);
+	if (ctx === null) throw new Error("Spotlight component was not found in tree");
+	return ctx;
+}
+//#endregion
+//#region src/style-api.ts
+function mergeClassNames(...items) {
+	return items.reduce((acc, item) => {
+		if (!item || typeof item !== "object" || Array.isArray(item)) return acc;
+		Object.entries(item).forEach(([key, value]) => {
+			acc[key] = acc[key] ? [acc[key], value] : value;
+		});
+		return acc;
+	}, {});
+}
+function mergeStyles(...items) {
+	return items.reduce((acc, item) => {
+		if (!item || typeof item !== "object" || Array.isArray(item)) return acc;
+		Object.entries(item).forEach(([key, value]) => {
+			acc[key] = acc[key] ? [acc[key], value] : value;
+		});
+		return acc;
+	}, {});
+}
+function renderContent$1(value) {
+	return typeof value === "function" ? value() : value;
+}
+var Spotlight_module_default = {
+	root: "_root_87n7g_1",
+	content: "_content_87n7g_7",
+	body: "_body_87n7g_13",
+	search: "_search_87n7g_19",
+	actionsList: "_actionsList_87n7g_24",
+	action: "_action_87n7g_24",
+	actionBody: "_actionBody_87n7g_73",
+	actionSection: "_actionSection_87n7g_77",
+	actionLabel: "_actionLabel_87n7g_99",
+	actionDescription: "_actionDescription_87n7g_103",
+	empty: "_empty_87n7g_110",
+	footer: "_footer_87n7g_116",
+	actionsGroup: "_actionsGroup_87n7g_129"
+};
+//#endregion
+//#region src/SpotlightAction.ts
+var defaultProps$3 = {
+	dimmedSections: true,
+	highlightQuery: false
+};
+var SpotlightAction = (0, vue.defineComponent)({
+	name: "SpotlightAction",
+	inheritAttrs: false,
+	props: {
+		label: {
+			type: String,
+			default: void 0
+		},
+		description: {
+			type: String,
+			default: void 0
+		},
+		leftSection: {
+			type: [
+				String,
+				Number,
+				Object,
+				Function
+			],
+			default: void 0
+		},
+		rightSection: {
+			type: [
+				String,
+				Number,
+				Object,
+				Function
+			],
+			default: void 0
+		},
+		dimmedSections: {
+			type: Boolean,
+			default: void 0
+		},
+		highlightQuery: {
+			type: Boolean,
+			default: void 0
+		},
+		highlightColor: {
+			type: String,
+			default: void 0
+		},
+		closeSpotlightOnTrigger: {
+			type: Boolean,
+			default: void 0
+		},
+		keywords: {
+			type: [String, Array],
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightAction", defaultProps$3, rawProps);
+		const ctx = useSpotlightContext();
+		return () => {
+			const stylesApi = {
+				classNames: props.classNames,
+				styles: props.styles
+			};
+			const labelNode = props.highlightQuery && typeof props.label === "string" ? (0, vue.h)(_mantine_vue_core.Highlight, {
+				component: "span",
+				highlight: ctx.query,
+				color: props.highlightColor,
+				...ctx.getStyles("actionLabel", stylesApi)
+			}, () => props.label) : (0, vue.h)("span", ctx.getStyles("actionLabel", stylesApi), props.label);
+			return (0, vue.h)(_mantine_vue_core.UnstyledButton, {
+				...attrs,
+				"data-action": true,
+				...ctx.getStyles("action", {
+					className: attrs.class,
+					style: attrs.style,
+					...stylesApi
+				}),
+				onMousedown: (event) => {
+					event.preventDefault();
+					attrs.onMousedown?.(event);
+				},
+				onClick: (event) => {
+					attrs.onClick?.(event);
+					if (props.closeSpotlightOnTrigger ?? ctx.closeOnActionTrigger) spotlightActions.close(ctx.store);
+				},
+				tabindex: -1
+			}, () => slots.default?.() ?? [
+				props.leftSection ? (0, vue.h)(_mantine_vue_core.Box, {
+					component: "span",
+					mod: {
+						position: "left",
+						dimmed: props.dimmedSections
+					},
+					...ctx.getStyles("actionSection", stylesApi)
+				}, () => renderContent$1(props.leftSection)) : null,
+				(0, vue.h)("span", ctx.getStyles("actionBody", stylesApi), [labelNode, (0, vue.h)("span", ctx.getStyles("actionDescription", stylesApi), props.description)]),
+				props.rightSection ? (0, vue.h)(_mantine_vue_core.Box, {
+					component: "span",
+					mod: {
+						position: "right",
+						dimmed: props.dimmedSections
+					},
+					...ctx.getStyles("actionSection", stylesApi)
+				}, () => renderContent$1(props.rightSection)) : null
+			]);
+		};
+	}
+});
+Object.assign(SpotlightAction, { classes: Spotlight_module_default });
+//#endregion
+//#region src/SpotlightActionsGroup.ts
+var SpotlightActionsGroup = (0, vue.defineComponent)({
+	name: "SpotlightActionsGroup",
+	inheritAttrs: false,
+	props: {
+		label: {
+			type: String,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightActionsGroup", null, rawProps);
+		const ctx = useSpotlightContext();
+		return () => (0, vue.h)(_mantine_vue_core.Box, {
+			...attrs,
+			...ctx.getStyles("actionsGroup", {
+				className: attrs.class,
+				style: attrs.style,
+				classNames: props.classNames,
+				styles: props.styles
+			}),
+			style: [
+				ctx.getStyles("actionsGroup", { styles: props.styles }).style,
+				attrs.style,
+				{ "--spotlight-label": `'${props.label?.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'` }
+			]
+		}, () => slots.default?.());
+	}
+});
+Object.assign(SpotlightActionsGroup, { classes: Spotlight_module_default });
+//#endregion
+//#region src/SpotlightActionsList.ts
+var SpotlightActionsList = (0, vue.defineComponent)({
+	name: "SpotlightActionsList",
+	inheritAttrs: false,
+	props: {
+		id: {
+			type: String,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightActionsList", null, rawProps);
+		const ctx = useSpotlightContext();
+		const generatedId = (0, _mantine_vue_hooks.useId)();
+		const listId = props.id || `mantine-${generatedId.value.replace(/:/g, "")}`;
+		(0, vue.onMounted)(() => spotlightActions.setListId(listId, ctx.store));
+		(0, vue.onBeforeUnmount)(() => spotlightActions.setListId("", ctx.store));
+		return () => (0, vue.h)(_mantine_vue_core.ScrollAreaAutosize, {
+			...attrs,
+			...ctx.getStyles("actionsList", {
+				className: attrs.class,
+				style: attrs.style,
+				classNames: props.classNames,
+				styles: props.styles
+			}),
+			type: "scroll",
+			scrollbarSize: "var(--spotlight-actions-list-padding)",
+			offsetScrollbars: "y",
+			id: listId
+		}, () => slots.default?.());
+	}
+});
+Object.assign(SpotlightActionsList, { classes: Spotlight_module_default });
+//#endregion
+//#region src/SpotlightEmpty.ts
+var SpotlightEmpty = (0, vue.defineComponent)({
+	name: "SpotlightEmpty",
+	inheritAttrs: false,
+	props: {
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightEmpty", null, rawProps);
+		const ctx = useSpotlightContext();
+		return () => (0, vue.h)(_mantine_vue_core.Box, {
+			...attrs,
+			...ctx.getStyles("empty", {
+				className: attrs.class,
+				style: attrs.style,
+				classNames: props.classNames,
+				styles: props.styles
+			})
+		}, () => slots.default?.());
+	}
+});
+Object.assign(SpotlightEmpty, { classes: Spotlight_module_default });
+//#endregion
+//#region src/SpotlightFooter.ts
+var SpotlightFooter = (0, vue.defineComponent)({
+	name: "SpotlightFooter",
+	inheritAttrs: false,
+	props: {
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightFooter", null, rawProps);
+		const ctx = useSpotlightContext();
+		return () => (0, vue.h)(_mantine_vue_core.Box, {
+			...attrs,
+			...ctx.getStyles("footer", {
+				className: attrs.class,
+				style: attrs.style,
+				classNames: props.classNames,
+				styles: props.styles
+			})
+		}, () => slots.default?.());
+	}
+});
+Object.assign(SpotlightFooter, { classes: Spotlight_module_default });
+//#endregion
+//#region src/get-hotkeys.ts
+function getHotkeys(hotkeys, store) {
+	if (!hotkeys) return [];
+	const open = () => spotlightActions.open(store);
+	if (Array.isArray(hotkeys)) return hotkeys.map((hotkey) => [hotkey, open]);
+	return [[hotkeys, open]];
+}
+//#endregion
+//#region src/SpotlightRoot.ts
+var defaultProps$2 = {
+	size: 600,
+	yOffset: 80,
+	zIndex: (0, _mantine_vue_core.getDefaultZIndex)("max"),
+	overlayProps: {
+		backgroundOpacity: .35,
+		blur: 7
+	},
+	transitionProps: {
+		duration: 200,
+		transition: "pop"
+	},
+	store: spotlightStore,
+	clearQueryOnClose: true,
+	closeOnActionTrigger: true,
+	shortcut: "mod + K",
+	maxHeight: 400
+};
+var SpotlightRoot = (0, vue.defineComponent)({
+	name: "SpotlightRoot",
+	inheritAttrs: false,
+	props: {
+		store: {
+			type: Object,
+			default: void 0
+		},
+		query: {
+			type: String,
+			default: void 0
+		},
+		onQueryChange: {
+			type: Function,
+			default: void 0
+		},
+		clearQueryOnClose: {
+			type: Boolean,
+			default: void 0
+		},
+		shortcut: {
+			type: [
+				String,
+				Array,
+				null
+			],
+			default: void 0
+		},
+		tagsToIgnore: {
+			type: Array,
+			default: void 0
+		},
+		triggerOnContentEditable: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		onSpotlightOpen: {
+			type: Function,
+			default: void 0
+		},
+		onSpotlightClose: {
+			type: Function,
+			default: void 0
+		},
+		forceOpened: {
+			type: Boolean,
+			default: false
+		},
+		closeOnActionTrigger: {
+			type: Boolean,
+			default: void 0
+		},
+		maxHeight: {
+			type: [String, Number],
+			default: void 0
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(rawProps, { attrs, slots }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightRoot", defaultProps$2, rawProps);
+		const state = useSpotlight(props.store);
+		const previousOpened = (0, vue.ref)(state.value.opened);
+		const currentQuery = (0, vue.computed)(() => typeof props.query === "string" ? props.query : state.value.query);
+		const setQuery = (query) => {
+			props.onQueryChange?.(query);
+			spotlightActions.setQuery(query, props.store);
+		};
+		const getStyles = (0, _mantine_vue_core.useStyles)({
+			name: "Spotlight",
+			classes: Spotlight_module_default,
+			props,
+			className: attrs.class,
+			style: attrs.style,
+			classNames: props.classNames,
+			styles: props.styles,
+			unstyled: props.unstyled,
+			vars: props.vars
+		});
+		provideSpotlightContext({
+			get query() {
+				return currentQuery.value;
+			},
+			setQuery,
+			getStyles,
+			store: props.store,
+			get closeOnActionTrigger() {
+				return props.closeOnActionTrigger;
+			}
+		});
+		(0, _mantine_vue_hooks.useHotkeys)(() => getHotkeys(props.shortcut, props.store), () => props.tagsToIgnore, () => props.triggerOnContentEditable);
+		(0, vue.watch)(() => state.value.opened, (opened) => {
+			if (opened === previousOpened.value) return;
+			if (opened) props.onSpotlightOpen?.();
+			else props.onSpotlightClose?.();
+			previousOpened.value = opened;
+		});
+		return () => {
+			if (props.disabled) return null;
+			const rootStyles = getStyles("root", {
+				className: attrs.class,
+				style: attrs.style
+			});
+			const { classNames: _classNames, styles: _styles, vars: _vars, unstyled: _unstyled, store: _store, query: _query, onQueryChange: _onQueryChange, clearQueryOnClose: _clearQueryOnClose, shortcut: _shortcut, tagsToIgnore: _tagsToIgnore, triggerOnContentEditable: _triggerOnContentEditable, disabled: _disabled, onSpotlightOpen: _onSpotlightOpen, onSpotlightClose: _onSpotlightClose, forceOpened: _forceOpened, closeOnActionTrigger: _closeOnActionTrigger, maxHeight: _maxHeight, scrollable: _scrollable, ...modalAttrs } = {
+				...attrs,
+				...props
+			};
+			return (0, vue.h)(_mantine_vue_core.Modal, {
+				...modalAttrs,
+				withCloseButton: false,
+				opened: state.value.opened || !!props.forceOpened,
+				padding: 0,
+				onClose: () => spotlightActions.close(props.store),
+				class: rootStyles.class,
+				style: rootStyles.style,
+				classNames: mergeClassNames({
+					body: Spotlight_module_default.body,
+					content: Spotlight_module_default.content
+				}, props.classNames),
+				styles: mergeStyles(props.styles),
+				vars: mergeStyles({ root: { "--spotlight-max-height": props.scrollable ? (0, _mantine_vue_core.rem)(props.maxHeight) : void 0 } }, props.vars),
+				onExitTransitionEnd: () => {
+					if (props.clearQueryOnClose) setQuery("");
+					spotlightActions.clearSpotlightState({ clearQuery: props.clearQueryOnClose }, props.store);
+					props.transitionProps?.onExited?.();
+					props.onExitTransitionEnd?.();
+				},
+				"data-scrollable": props.scrollable || void 0
+			}, slots);
+		};
+	}
+});
+Object.assign(SpotlightRoot, { classes: Spotlight_module_default });
+//#endregion
+//#region src/SpotlightSearch.ts
+var defaultProps$1 = { size: "lg" };
+var SpotlightSearch = (0, vue.defineComponent)({
+	name: "SpotlightSearch",
+	inheritAttrs: false,
+	props: {
+		size: {
+			type: [String, Number],
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
+		onKeydown: {
+			type: Function,
+			default: void 0
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		}
+	},
+	setup(rawProps, { attrs }) {
+		const props = (0, _mantine_vue_core.useProps)("SpotlightSearch", defaultProps$1, rawProps);
+		const ctx = useSpotlightContext();
+		const isComposing = (0, vue.ref)(false);
+		const handleKeydown = (event) => {
+			props.onKeydown?.(event);
+			if (isComposing.value) return;
+			if (event.code === "ArrowDown") {
+				event.preventDefault();
+				spotlightActions.selectNextAction(ctx.store);
+			}
+			if (event.code === "ArrowUp") {
+				event.preventDefault();
+				spotlightActions.selectPreviousAction(ctx.store);
+			}
+			if (event.code === "Enter" || event.code === "NumpadEnter") {
+				event.preventDefault();
+				spotlightActions.triggerSelectedAction(ctx.store);
+			}
+		};
+		return () => {
+			const inputStyles = ctx.getStyles("search");
+			return (0, vue.h)(_mantine_vue_core.Input, {
+				...attrs,
+				size: props.size,
+				value: props.value ?? ctx.query,
+				classNames: mergeClassNames({ input: inputStyles.class }, props.classNames),
+				styles: mergeStyles({ input: inputStyles.style }, props.styles),
+				vars: props.vars,
+				onInput: (event) => {
+					ctx.setQuery(event.currentTarget.value);
+					props.onChange?.(event);
+				},
+				onKeydown: handleKeydown,
+				onCompositionstart: () => {
+					isComposing.value = true;
+				},
+				onCompositionend: () => {
+					isComposing.value = false;
+				}
+			});
+		};
+	}
+});
+Object.assign(SpotlightSearch, { classes: Spotlight_module_default });
+//#endregion
+//#region src/Spotlight.ts
+var defaultProps = {
+	size: 600,
+	yOffset: 80,
+	limit: Infinity,
+	zIndex: (0, _mantine_vue_core.getDefaultZIndex)("max"),
+	overlayProps: {
+		backgroundOpacity: .35,
+		blur: 7
+	},
+	transitionProps: {
+		duration: 200,
+		transition: "pop"
+	},
+	store: spotlightStore,
+	filter: defaultSpotlightFilter,
+	clearQueryOnClose: true,
+	closeOnActionTrigger: true,
+	shortcut: "mod + K"
+};
+function renderContent(value) {
+	return typeof value === "function" ? value() : value;
+}
+var SpotlightBase = (0, vue.defineComponent)({
+	name: "Spotlight",
+	inheritAttrs: false,
+	props: {
+		searchProps: {
+			type: Object,
+			default: void 0
+		},
+		actions: {
+			type: Array,
+			required: true
+		},
+		filter: {
+			type: Function,
+			default: void 0
+		},
+		nothingFound: {
+			type: [
+				String,
+				Number,
+				Object,
+				Function
+			],
+			default: void 0
+		},
+		highlightQuery: {
+			type: Boolean,
+			default: false
+		},
+		limit: {
+			type: Number,
+			default: void 0
+		},
+		scrollAreaProps: {
+			type: Object,
+			default: void 0
+		},
+		query: {
+			type: String,
+			default: void 0
+		},
+		onQueryChange: {
+			type: Function,
+			default: void 0
+		},
+		store: {
+			type: Object,
+			default: void 0
+		},
+		clearQueryOnClose: {
+			type: Boolean,
+			default: void 0
+		},
+		shortcut: {
+			type: [String, Array],
+			default: void 0
+		},
+		tagsToIgnore: {
+			type: Array,
+			default: void 0
+		},
+		triggerOnContentEditable: {
+			type: Boolean,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		onSpotlightOpen: {
+			type: Function,
+			default: void 0
+		},
+		onSpotlightClose: {
+			type: Function,
+			default: void 0
+		},
+		forceOpened: {
+			type: Boolean,
+			default: false
+		},
+		closeOnActionTrigger: {
+			type: Boolean,
+			default: void 0
+		},
+		maxHeight: {
+			type: [String, Number],
+			default: void 0
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		classNames: {
+			type: [Object, Function],
+			default: void 0
+		},
+		styles: {
+			type: [Object, Function],
+			default: void 0
+		},
+		vars: {
+			type: [Object, Function],
+			default: void 0
+		},
+		unstyled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(rawProps, { attrs }) {
+		const props = (0, _mantine_vue_core.useProps)("Spotlight", defaultProps, rawProps);
+		const uncontrolledQuery = (0, vue.ref)("");
+		const currentQuery = (0, vue.computed)(() => typeof props.query === "string" ? props.query : uncontrolledQuery.value);
+		const setQuery = (query) => {
+			if (typeof props.query !== "string") uncontrolledQuery.value = query;
+			props.onQueryChange?.(query);
+		};
+		return () => {
+			const renderedActions = limitActions(props.filter(currentQuery.value, props.actions), props.limit).map((item) => {
+				if (isActionsGroup(item)) return (0, vue.h)(SpotlightActionsGroup, {
+					key: item.group,
+					label: item.group
+				}, () => item.actions.map(({ id, ...actionData }) => (0, vue.h)(SpotlightAction, {
+					key: id,
+					highlightQuery: props.highlightQuery,
+					...actionData
+				})));
+				const { id, ...actionData } = item;
+				return (0, vue.h)(SpotlightAction, {
+					key: id,
+					highlightQuery: props.highlightQuery,
+					...actionData
+				});
+			});
+			const { searchProps: _searchProps, actions: _actions, filter: _filter, nothingFound: _nothingFound, highlightQuery: _highlightQuery, limit: _limit, scrollAreaProps: _scrollAreaProps, query: _query, onQueryChange: _onQueryChange, ...rootProps } = props;
+			return (0, vue.h)(SpotlightRoot, {
+				...attrs,
+				...rootProps,
+				query: currentQuery.value,
+				onQueryChange: setQuery
+			}, () => [
+				(0, vue.h)(SpotlightSearch, props.searchProps),
+				renderedActions.length > 0 ? (0, vue.h)(SpotlightActionsList, props.scrollAreaProps, () => renderedActions) : null,
+				renderedActions.length === 0 && props.nothingFound ? (0, vue.h)(SpotlightEmpty, null, () => renderContent(props.nothingFound)) : null
+			]);
+		};
+	}
+});
+var Spotlight = Object.assign(SpotlightBase, {
+	classes: Spotlight_module_default,
+	Search: SpotlightSearch,
+	ActionsList: SpotlightActionsList,
+	Action: SpotlightAction,
+	Empty: SpotlightEmpty,
+	Footer: SpotlightFooter,
+	ActionsGroup: SpotlightActionsGroup,
+	Root: SpotlightRoot,
+	open: spotlight.open,
+	close: spotlight.close,
+	toggle: spotlight.toggle
+});
+//#endregion
+exports.Spotlight = Spotlight;
+exports.SpotlightAction = SpotlightAction;
+exports.SpotlightActionsGroup = SpotlightActionsGroup;
+exports.SpotlightActionsList = SpotlightActionsList;
+exports.SpotlightEmpty = SpotlightEmpty;
+exports.SpotlightFooter = SpotlightFooter;
+exports.SpotlightRoot = SpotlightRoot;
+exports.SpotlightSearch = SpotlightSearch;
+exports.closeSpotlight = closeSpotlight;
+exports.createSpotlight = createSpotlight;
+exports.createSpotlightStore = createSpotlightStore;
+exports.isActionsGroup = isActionsGroup;
+exports.openSpotlight = openSpotlight;
+exports.spotlight = spotlight;
+exports.toggleSpotlight = toggleSpotlight;
+exports.useSpotlight = useSpotlight;
+
+//# sourceMappingURL=index.cjs.map