base-ui-vue 0.1.0 → 0.2.0

package/dist/button/ToolbarButton.cjs

@@ -0,0 +1,367 @@
+const require_button_Button = require('./Button.cjs');
+let vue = require("vue");
+
+//#region src/composite/list/CompositeListContext.ts
+const compositeListContextKey = Symbol("CompositeListContext");
+function useCompositeListContext() {
+	return (0, vue.inject)(compositeListContextKey);
+}
+
+//#endregion
+//#region src/composite/list/useCompositeListItem.ts
+let IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior) {
+	IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+	IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+	return IndexGuessBehavior;
+}({});
+/**
+* Used to register a list item and its index (DOM position) in the `CompositeList`.
+*/
+function useCompositeListItem(params = {}) {
+	const externalIndex = (0, vue.computed)(() => params.index?.());
+	const label = (0, vue.computed)(() => params.label?.());
+	const metadata = (0, vue.computed)(() => params.metadata?.());
+	const textRef = (0, vue.computed)(() => params.textRef?.());
+	const indexGuessBehavior = (0, vue.computed)(() => params.indexGuessBehavior?.());
+	const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
+	const indexRef = (0, vue.ref)(-1);
+	function initializeIndex() {
+		if (externalIndex.value != null) return externalIndex.value;
+		if (indexGuessBehavior.value === IndexGuessBehavior.GuessFromOrder) {
+			if (indexRef.value === -1) {
+				const newIndex = nextIndexRef.value;
+				nextIndexRef.value += 1;
+				indexRef.value = newIndex;
+			}
+			return indexRef.value;
+		}
+		return -1;
+	}
+	const internalIndex = (0, vue.ref)(initializeIndex());
+	const index = (0, vue.computed)(() => externalIndex.value ?? internalIndex.value);
+	const componentRef = (0, vue.ref)(null);
+	function setRef(node) {
+		const el = node?.$el || node;
+		componentRef.value = el;
+		if (index.value !== -1 && el !== null) {
+			elementsRef.value[index.value] = el;
+			if (labelsRef) {
+				const isLabelDefined = label.value !== void 0;
+				labelsRef.value[index.value] = isLabelDefined ? label.value : textRef.value?.value?.textContent ?? el.textContent;
+			}
+		}
+	}
+	(0, vue.watchEffect)((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const node = componentRef.value;
+		if (node) {
+			register(node, metadata.value);
+			onCleanup(() => {
+				unregister(node);
+			});
+		}
+	}, { flush: "post" });
+	(0, vue.watchEffect)((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const unsubscribe = subscribeMapChange((map) => {
+			const i = componentRef.value ? map.get(componentRef.value)?.index : null;
+			if (i != null) internalIndex.value = i;
+		});
+		onCleanup(() => {
+			unsubscribe();
+		});
+	}, { flush: "post" });
+	return {
+		ref: setRef,
+		index
+	};
+}
+
+//#endregion
+//#region src/composite/item/useCompositeItem.ts
+function useCompositeItem(params = {}) {
+	const context = require_button_Button.useCompositeRootContext();
+	const { ref: listItemRef, index } = useCompositeListItem(params);
+	const isHighlighted = (0, vue.computed)(() => context.highlightedIndex === index.value);
+	const itemRef = (0, vue.ref)(null);
+	const mergedRef = require_button_Button.useMergedRefs(listItemRef, itemRef);
+	(0, vue.watch)(index, (newIndex, oldIndex) => {
+		if (oldIndex === -1 && newIndex !== -1 && itemRef.value) {
+			if (document.activeElement === itemRef.value) context.onHighlightedIndexChange(newIndex);
+		}
+	});
+	return {
+		compositeProps: (0, vue.computed)(() => ({
+			tabindex: isHighlighted.value ? 0 : -1,
+			onFocus() {
+				context.onHighlightedIndexChange(index.value);
+			},
+			onMousemove() {
+				const item = itemRef.value;
+				if (!context.highlightItemOnHover || !item) return;
+				const disabled = item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true";
+				if (!isHighlighted.value && !disabled) item.focus();
+			}
+		})),
+		compositeRef: mergedRef,
+		index
+	};
+}
+
+//#endregion
+//#region src/composite/item/CompositeItem.vue?vue&type=script&setup=true&lang.ts
+var CompositeItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "BaseUICompositeItem",
+	inheritAttrs: false,
+	__name: "CompositeItem",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		metadata: {
+			type: null,
+			required: false
+		},
+		refs: {
+			type: Array,
+			required: false
+		},
+		props: {
+			type: Array,
+			required: false
+		},
+		stateAttributesMapping: {
+			type: null,
+			required: false
+		},
+		state: {
+			type: null,
+			required: false,
+			default: () => require_button_Button.EMPTY_OBJECT
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const { compositeProps, compositeRef } = useCompositeItem({ metadata: () => props.metadata });
+		const externalProps = (0, vue.computed)(() => {
+			let externalProps = {};
+			if (props.props) props.props.forEach((prop) => {
+				const p = typeof prop === "function" ? prop() : prop;
+				externalProps = require_button_Button.mergeProps(externalProps, p);
+			});
+			return require_button_Button.mergeProps(attrs, externalProps, compositeProps.value);
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state: (0, vue.computed)(() => props.state),
+			props: externalProps,
+			stateAttributesMapping: props.stateAttributesMapping,
+			defaultTagName: "div",
+			ref: props.refs?.length ? require_button_Button.useMergedRefs(...props.refs, compositeRef) : compositeRef
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				ref: (0, vue.unref)(renderRef),
+				props: (0, vue.unref)(mergedProps),
+				state: props.state
+			}) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.mergeProps)({
+				key: 1,
+				ref: (0, vue.unref)(renderRef)
+			}, (0, vue.unref)(mergedProps)), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: props.state })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/composite/item/CompositeItem.vue
+var CompositeItem_default = CompositeItem_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/root/ToolbarRootContext.ts
+const toolbarRootContextKey = Symbol("ToolbarRootContext");
+function useToolbarRootContext(optional = false) {
+	const context = (0, vue.inject)(toolbarRootContextKey, void 0);
+	if (context === void 0 && !optional) throw new Error("Base UI Vue: ToolbarRootContext is missing. Toolbar parts must be placed within <ToolbarRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/toolbar/group/ToolbarGroupContext.ts
+const toolbarGroupContextKey = Symbol("ToolbarGroupContext");
+function useToolbarGroupContext(optional = false) {
+	const context = (0, vue.inject)(toolbarGroupContextKey, void 0);
+	if (context === void 0 && !optional) throw new Error("Base UI Vue: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <ToolbarGroup>.");
+	return context;
+}
+
+//#endregion
+//#region src/toolbar/button/ToolbarButton.vue?vue&type=script&setup=true&lang.ts
+/**
+* A button that can be used as-is or as a trigger for other components.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+*/
+var ToolbarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "ToolbarButton",
+	inheritAttrs: false,
+	__name: "ToolbarButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		focusableWhenDisabled: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const toolbarRootContext = useToolbarRootContext();
+		const toolbarGroupContext = useToolbarGroupContext(true);
+		const disabled = (0, vue.computed)(() => toolbarRootContext.disabled.value || (toolbarGroupContext?.disabled.value ?? false) || props.disabled);
+		const { getButtonProps, buttonRef } = require_button_Button.useButton({
+			disabled,
+			focusableWhenDisabled: () => props.focusableWhenDisabled,
+			native: () => props.nativeButton ?? true
+		});
+		const state = (0, vue.computed)(() => ({
+			disabled: disabled.value,
+			orientation: toolbarRootContext.orientation.value,
+			focusable: props.focusableWhenDisabled
+		}));
+		const itemRefs = [buttonRef];
+		const componentProps = (0, vue.computed)(() => typeof props.as === "string" ? {} : { disabled: disabled.value });
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(CompositeItem_default, {
+				as: __props.as,
+				class: (0, vue.normalizeClass)(props.class),
+				style: (0, vue.normalizeStyle)(props.style),
+				metadata: { focusableWhenDisabled: __props.focusableWhenDisabled },
+				state: state.value,
+				refs: itemRefs,
+				props: [componentProps.value, () => (0, vue.unref)(getButtonProps)((0, vue.unref)(attrs))]
+			}, {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style",
+				"metadata",
+				"state",
+				"props"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/button/ToolbarButton.vue
+var ToolbarButton_default = ToolbarButton_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'CompositeItem_default', {
+  enumerable: true,
+  get: function () {
+    return CompositeItem_default;
+  }
+});
+Object.defineProperty(exports, 'ToolbarButton_default', {
+  enumerable: true,
+  get: function () {
+    return ToolbarButton_default;
+  }
+});
+Object.defineProperty(exports, 'compositeListContextKey', {
+  enumerable: true,
+  get: function () {
+    return compositeListContextKey;
+  }
+});
+Object.defineProperty(exports, 'toolbarGroupContextKey', {
+  enumerable: true,
+  get: function () {
+    return toolbarGroupContextKey;
+  }
+});
+Object.defineProperty(exports, 'toolbarRootContextKey', {
+  enumerable: true,
+  get: function () {
+    return toolbarRootContextKey;
+  }
+});
+Object.defineProperty(exports, 'useCompositeListItem', {
+  enumerable: true,
+  get: function () {
+    return useCompositeListItem;
+  }
+});
+Object.defineProperty(exports, 'useToolbarGroupContext', {
+  enumerable: true,
+  get: function () {
+    return useToolbarGroupContext;
+  }
+});
+Object.defineProperty(exports, 'useToolbarRootContext', {
+  enumerable: true,
+  get: function () {
+    return useToolbarRootContext;
+  }
+});
+//# sourceMappingURL=ToolbarButton.cjs.map

package/dist/button/ToolbarButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.cjs","names":["useCompositeRootContext","useMergedRefs"],"sources":["../../src/composite/list/CompositeListContext.ts","../../src/composite/list/useCompositeListItem.ts","../../src/composite/item/useCompositeItem.ts","../../src/composite/item/CompositeItem.vue","../../src/composite/item/CompositeItem.vue","../../src/toolbar/root/ToolbarRootContext.ts","../../src/toolbar/group/ToolbarGroupContext.ts","../../src/toolbar/button/ToolbarButton.vue","../../src/toolbar/button/ToolbarButton.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/button/ToolbarButton.js

@@ -0,0 +1,320 @@
+import { EMPTY_OBJECT, mergeProps as mergeProps$1, useButton, useCompositeRootContext, useMergedRefs, useRenderElement } from "./Button.js";
+import { computed, createBlock, createCommentVNode, defineComponent, inject, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, unref, useAttrs, watch, watchEffect, withCtx } from "vue";
+
+//#region src/composite/list/CompositeListContext.ts
+const compositeListContextKey = Symbol("CompositeListContext");
+function useCompositeListContext() {
+	return inject(compositeListContextKey);
+}
+
+//#endregion
+//#region src/composite/list/useCompositeListItem.ts
+let IndexGuessBehavior = /* @__PURE__ */ function(IndexGuessBehavior) {
+	IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+	IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+	return IndexGuessBehavior;
+}({});
+/**
+* Used to register a list item and its index (DOM position) in the `CompositeList`.
+*/
+function useCompositeListItem(params = {}) {
+	const externalIndex = computed(() => params.index?.());
+	const label = computed(() => params.label?.());
+	const metadata = computed(() => params.metadata?.());
+	const textRef = computed(() => params.textRef?.());
+	const indexGuessBehavior = computed(() => params.indexGuessBehavior?.());
+	const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
+	const indexRef = ref(-1);
+	function initializeIndex() {
+		if (externalIndex.value != null) return externalIndex.value;
+		if (indexGuessBehavior.value === IndexGuessBehavior.GuessFromOrder) {
+			if (indexRef.value === -1) {
+				const newIndex = nextIndexRef.value;
+				nextIndexRef.value += 1;
+				indexRef.value = newIndex;
+			}
+			return indexRef.value;
+		}
+		return -1;
+	}
+	const internalIndex = ref(initializeIndex());
+	const index = computed(() => externalIndex.value ?? internalIndex.value);
+	const componentRef = ref(null);
+	function setRef(node) {
+		const el = node?.$el || node;
+		componentRef.value = el;
+		if (index.value !== -1 && el !== null) {
+			elementsRef.value[index.value] = el;
+			if (labelsRef) {
+				const isLabelDefined = label.value !== void 0;
+				labelsRef.value[index.value] = isLabelDefined ? label.value : textRef.value?.value?.textContent ?? el.textContent;
+			}
+		}
+	}
+	watchEffect((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const node = componentRef.value;
+		if (node) {
+			register(node, metadata.value);
+			onCleanup(() => {
+				unregister(node);
+			});
+		}
+	}, { flush: "post" });
+	watchEffect((onCleanup) => {
+		if (externalIndex.value != null) return;
+		const unsubscribe = subscribeMapChange((map) => {
+			const i = componentRef.value ? map.get(componentRef.value)?.index : null;
+			if (i != null) internalIndex.value = i;
+		});
+		onCleanup(() => {
+			unsubscribe();
+		});
+	}, { flush: "post" });
+	return {
+		ref: setRef,
+		index
+	};
+}
+
+//#endregion
+//#region src/composite/item/useCompositeItem.ts
+function useCompositeItem(params = {}) {
+	const context = useCompositeRootContext();
+	const { ref: listItemRef, index } = useCompositeListItem(params);
+	const isHighlighted = computed(() => context.highlightedIndex === index.value);
+	const itemRef = ref(null);
+	const mergedRef = useMergedRefs(listItemRef, itemRef);
+	watch(index, (newIndex, oldIndex) => {
+		if (oldIndex === -1 && newIndex !== -1 && itemRef.value) {
+			if (document.activeElement === itemRef.value) context.onHighlightedIndexChange(newIndex);
+		}
+	});
+	return {
+		compositeProps: computed(() => ({
+			tabindex: isHighlighted.value ? 0 : -1,
+			onFocus() {
+				context.onHighlightedIndexChange(index.value);
+			},
+			onMousemove() {
+				const item = itemRef.value;
+				if (!context.highlightItemOnHover || !item) return;
+				const disabled = item.hasAttribute("disabled") || item.getAttribute("aria-disabled") === "true";
+				if (!isHighlighted.value && !disabled) item.focus();
+			}
+		})),
+		compositeRef: mergedRef,
+		index
+	};
+}
+
+//#endregion
+//#region src/composite/item/CompositeItem.vue?vue&type=script&setup=true&lang.ts
+var CompositeItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "BaseUICompositeItem",
+	inheritAttrs: false,
+	__name: "CompositeItem",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		},
+		metadata: {
+			type: null,
+			required: false
+		},
+		refs: {
+			type: Array,
+			required: false
+		},
+		props: {
+			type: Array,
+			required: false
+		},
+		stateAttributesMapping: {
+			type: null,
+			required: false
+		},
+		state: {
+			type: null,
+			required: false,
+			default: () => EMPTY_OBJECT
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { compositeProps, compositeRef } = useCompositeItem({ metadata: () => props.metadata });
+		const externalProps = computed(() => {
+			let externalProps = {};
+			if (props.props) props.props.forEach((prop) => {
+				const p = typeof prop === "function" ? prop() : prop;
+				externalProps = mergeProps$1(externalProps, p);
+			});
+			return mergeProps$1(attrs, externalProps, compositeProps.value);
+		});
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state: computed(() => props.state),
+			props: externalProps,
+			stateAttributesMapping: props.stateAttributesMapping,
+			defaultTagName: "div",
+			ref: props.refs?.length ? useMergedRefs(...props.refs, compositeRef) : compositeRef
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: props.state
+			}) : (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: props.state })]),
+				_: 3
+			}, 16));
+		};
+	}
+});
+
+//#endregion
+//#region src/composite/item/CompositeItem.vue
+var CompositeItem_default = CompositeItem_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/toolbar/root/ToolbarRootContext.ts
+const toolbarRootContextKey = Symbol("ToolbarRootContext");
+function useToolbarRootContext(optional = false) {
+	const context = inject(toolbarRootContextKey, void 0);
+	if (context === void 0 && !optional) throw new Error("Base UI Vue: ToolbarRootContext is missing. Toolbar parts must be placed within <ToolbarRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/toolbar/group/ToolbarGroupContext.ts
+const toolbarGroupContextKey = Symbol("ToolbarGroupContext");
+function useToolbarGroupContext(optional = false) {
+	const context = inject(toolbarGroupContextKey, void 0);
+	if (context === void 0 && !optional) throw new Error("Base UI Vue: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <ToolbarGroup>.");
+	return context;
+}
+
+//#endregion
+//#region src/toolbar/button/ToolbarButton.vue?vue&type=script&setup=true&lang.ts
+/**
+* A button that can be used as-is or as a trigger for other components.
+* Renders a `<button>` element.
+*
+* Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+*/
+var ToolbarButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "ToolbarButton",
+	inheritAttrs: false,
+	__name: "ToolbarButton",
+	props: {
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		focusableWhenDisabled: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		nativeButton: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "button"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const toolbarRootContext = useToolbarRootContext();
+		const toolbarGroupContext = useToolbarGroupContext(true);
+		const disabled = computed(() => toolbarRootContext.disabled.value || (toolbarGroupContext?.disabled.value ?? false) || props.disabled);
+		const { getButtonProps, buttonRef } = useButton({
+			disabled,
+			focusableWhenDisabled: () => props.focusableWhenDisabled,
+			native: () => props.nativeButton ?? true
+		});
+		const state = computed(() => ({
+			disabled: disabled.value,
+			orientation: toolbarRootContext.orientation.value,
+			focusable: props.focusableWhenDisabled
+		}));
+		const itemRefs = [buttonRef];
+		const componentProps = computed(() => typeof props.as === "string" ? {} : { disabled: disabled.value });
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(CompositeItem_default, {
+				as: __props.as,
+				class: normalizeClass(props.class),
+				style: normalizeStyle(props.style),
+				metadata: { focusableWhenDisabled: __props.focusableWhenDisabled },
+				state: state.value,
+				refs: itemRefs,
+				props: [componentProps.value, () => unref(getButtonProps)(unref(attrs))]
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 8, [
+				"as",
+				"class",
+				"style",
+				"metadata",
+				"state",
+				"props"
+			]);
+		};
+	}
+});
+
+//#endregion
+//#region src/toolbar/button/ToolbarButton.vue
+var ToolbarButton_default = ToolbarButton_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { CompositeItem_default, ToolbarButton_default, compositeListContextKey, toolbarGroupContextKey, toolbarRootContextKey, useCompositeListItem, useToolbarGroupContext, useToolbarRootContext };
+//# sourceMappingURL=ToolbarButton.js.map