@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/token-input.d.ts

@@ -0,0 +1,136 @@
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type UndoStackOptions, type Token, type TokenCodec, type TokenDeletion, type TokenInputController, type TokenInputSubmitDetails, type TokenInputValue, type TokenInputValueChangeReason } from "@ui-sdk/core/token-input";
+import { type PropType, type SlotsType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type ValueDetails = ChangeDetails<TokenInputValueChangeReason> & {
+    inputType?: string;
+    removed: Token[];
+};
+/**
+ * A text field with atomic tokens. A TriggerMenu inside it suggests into it. The `token` slot renders each token's content.
+ * @stable
+ */
+declare const TokenInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: PropType<TokenInputValue>;
+    modelValue: PropType<TokenInputValue>;
+    defaultValue: PropType<TokenInputValue>;
+    submitShortcut: PropType<"enter" | "mod+enter">;
+    tokenDeletion: PropType<TokenDeletion>;
+    copy: PropType<"codec" | "label">;
+    codec: PropType<TokenCodec>;
+    getTokenDescription: PropType<(token: Token) => string>;
+    history: PropType<UndoStackOptions>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<TokenInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onSubmit: PropType<(value: TokenInputValue, details: TokenInputSubmitDetails) => void>;
+}>, () => (VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined)[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: TokenInputValue) => true;
+    "update:modelValue": (_value: TokenInputValue) => true;
+    valueChange: (_value: TokenInputValue, _details: ValueDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: PropType<TokenInputValue>;
+    modelValue: PropType<TokenInputValue>;
+    defaultValue: PropType<TokenInputValue>;
+    submitShortcut: PropType<"enter" | "mod+enter">;
+    tokenDeletion: PropType<TokenDeletion>;
+    copy: PropType<"codec" | "label">;
+    codec: PropType<TokenCodec>;
+    getTokenDescription: PropType<(token: Token) => string>;
+    history: PropType<UndoStackOptions>;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readOnly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    name: StringConstructor;
+    form: StringConstructor;
+    controller: PropType<TokenInputController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onSubmit: PropType<(value: TokenInputValue, details: TokenInputSubmitDetails) => void>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: TokenInputValue) => any) | undefined;
+    "onUpdate:value"?: ((_value: TokenInputValue) => any) | undefined;
+    onValueChange?: ((_value: TokenInputValue, _details: ValueDetails) => any) | undefined;
+}>, {
+    disabled: boolean;
+    debug: boolean;
+    required: boolean;
+    readOnly: boolean;
+}, SlotsType<{
+    default?: () => VNode[];
+    /** Renders each token's content: `#token="{ token }"`. */
+    token?: (scope: {
+        token: Token;
+    }) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The editable text. The core owns its content; style it, and show the placeholder with `data-empty`.
+ * @stable
+ */
+declare const TokenInputEditor: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    placeholder: StringConstructor;
+}>, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/token-input").TokenInputEditorState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholder: StringConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/token-input").TokenInputPrimitive, "editor">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A token's content, inside the `token` slot, with its state for styling.
+ * @stable
+ */
+declare const TokenInputToken: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/token-input").TokenInputTokenState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/token-input").TokenInputPrimitive, "token">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * Removes its token when pressed. Hidden from assistive technology: the keyboard's way is Backspace.
+ * @stable
+ */
+declare const TokenInputTokenRemove: import("./create-parts.js").ElementPart<import("vue").DefineComponent<{}, (() => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: {};
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/token-input").TokenInputPrimitive, "token-remove">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { createTokenInputController, defaultCodec, fromText, toLabel, toText, } from "@ui-sdk/core/token-input";
+export type { UndoStackOptions, TextEditorAdapter, TextRange, Token, TokenCodec, TokenDeletion, TokenInputApi, TokenInputChangeOptions, TokenInputController, TokenInputEditorProps, TokenInputEditorState, TokenInputOptions, TokenInputPrimitive, TokenInputTokenProps, TokenInputTokenState, TokenInputValue, TokenInputSubmitDetails, TokenInputValueChangeDetails, TokenInputValueChangeReason, TokenInsert, } from "@ui-sdk/core/token-input";
+export { TokenInput, TokenInputEditor, TokenInputToken, TokenInputTokenRemove };

package/dist/token-input.js

@@ -0,0 +1,214 @@
+// src/token-input.ts
+import {
+  tokenInput as tokenInputPrimitive
+} from "@ui-sdk/core/token-input";
+import { renderStaticHtml, renderVersion } from "@ui-sdk/core/renderer";
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  shallowRef,
+  onBeforeUpdate,
+  onScopeDispose,
+  Teleport,
+  toRaw
+} from "vue";
+import { withElement } from "./create-parts.js";
+import { EditorKey } from "./editor-context.js";
+import { useFieldControl } from "./field-context.js";
+import {
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { readOnlyOf } from "./text-control.js";
+import {
+  createTokenInputController,
+  defaultCodec,
+  fromText,
+  toLabel,
+  toText
+} from "@ui-sdk/core/token-input";
+var TokenKey = /* @__PURE__ */ Symbol("token-input-token");
+var useTokenInput = () => useHandle(tokenInputPrimitive);
+function given(list) {
+  list?.forEach(() => {
+  });
+  return list && toRaw(list);
+}
+function useTokenId(part) {
+  const id = inject(TokenKey, null);
+  if (!id) {
+    throw new Error(`<${part}> must be used inside the token slot.`);
+  }
+  return id;
+}
+var TokenInput = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "TokenInput",
+    props: {
+      value: Array,
+      modelValue: Array,
+      defaultValue: Array,
+      submitShortcut: String,
+      tokenDeletion: String,
+      copy: String,
+      codec: Object,
+      getTokenDescription: Function,
+      history: Object,
+      disabled: optionalBoolean,
+      readOnly: optionalBoolean,
+      required: optionalBoolean,
+      name: String,
+      form: String,
+      controller: Object,
+      debug: optionalBoolean,
+      // A function prop, so `@submit` binds to it, and without one the shortcut submits the form.
+      onSubmit: Function
+    },
+    emits: {
+      "update:value": (_value) => true,
+      "update:modelValue": (_value) => true,
+      valueChange: (_value, _details) => true
+    },
+    slots: Object,
+    setup(props, { slots, attrs, emit }) {
+      const field = useFieldControl();
+      const input = usePrimitive(tokenInputPrimitive, () => ({
+        ...props,
+        value: given(orModel(props.value, props.modelValue)),
+        defaultValue: props.defaultValue && toRaw(props.defaultValue),
+        name: props.name ?? field?.name(),
+        disabled: props.disabled || field?.disabled(),
+        readOnly: readOnlyOf(props, attrs),
+        onValueChange: (value, details) => {
+          emit("valueChange", value, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:value", value);
+          emit("update:modelValue", value);
+        }
+      }));
+      provide(EditorKey, () => input.api.editor);
+      const version = shallowRef(renderVersion(input.instance));
+      onScopeDispose(
+        input.instance.subscribe(
+          () => version.value = renderVersion(input.instance)
+        )
+      );
+      input.api.internal.setCustom(!!slots.token);
+      onBeforeUpdate(() => input.api.internal.setCustom(!!slots.token));
+      return () => {
+        version.value;
+        return [
+          slots.default?.(),
+          slots.token && input.api.internal.hosts().map(
+            ({ id, token, host }) => h(Teleport, { key: id, to: host }, [
+              h(TokenScope, { id }, () => slots.token({ token }))
+            ])
+          ),
+          h(FormInput)
+        ];
+      };
+    }
+  })
+);
+var TokenScope = defineComponent({
+  name: "TokenInputTokenScope",
+  props: { id: { type: String, required: true } },
+  setup(props, { slots }) {
+    provide(TokenKey, props.id);
+    return () => slots.default?.();
+  }
+});
+var FormInput = defineComponent({
+  name: "TokenInputFormInput",
+  setup() {
+    const input = useTokenInput();
+    return () => input.state.name ? h("textarea", input.slot("form-input")) : null;
+  }
+});
+var TokenInputEditor = withElement(
+  "div",
+  defineComponent({
+    name: "TokenInputEditor",
+    inheritAttrs: false,
+    props: { placeholder: String },
+    slots: Object,
+    setup(props, { attrs }) {
+      const input = useTokenInput();
+      const field = useFieldControl(attrs);
+      const html = renderStaticHtml(
+        input.api.getValue(),
+        input.api.internal.describe
+      );
+      return usePart(
+        input,
+        "editor",
+        () => ({ placeholder: props.placeholder }),
+        void 0,
+        {
+          tag: "div",
+          // The core owns the content.
+          children: () => void 0,
+          extend: (editor) => {
+            const own = { ...editor, innerHTML: html };
+            return field ? field.props(own) : own;
+          }
+        }
+      );
+    }
+  })
+);
+var TokenInputToken = withElement(
+  "span",
+  defineComponent({
+    name: "TokenInputToken",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const id = useTokenId("TokenInputToken");
+      return usePart(
+        useTokenInput(),
+        "token",
+        () => ({ id, token: id }),
+        void 0,
+        "span"
+      );
+    }
+  })
+);
+var TokenInputTokenRemove = withElement(
+  "span",
+  defineComponent({
+    name: "TokenInputTokenRemove",
+    inheritAttrs: false,
+    slots: Object,
+    setup() {
+      const id = useTokenId("TokenInputTokenRemove");
+      return usePart(
+        useTokenInput(),
+        "token-remove",
+        () => ({ id, token: id }),
+        void 0,
+        "span"
+      );
+    }
+  })
+);
+export {
+  TokenInput,
+  TokenInputEditor,
+  TokenInputToken,
+  TokenInputTokenRemove,
+  createTokenInputController,
+  defaultCodec,
+  fromText,
+  toLabel,
+  toText
+};

package/dist/toolbar-context.d.ts

@@ -0,0 +1,7 @@
+import type { toolbar } from "@ui-sdk/core/toolbar";
+import { type InjectionKey } from "vue";
+import type { PrimitiveHandle } from "./use-primitive.js";
+declare const ToolbarKey: InjectionKey<PrimitiveHandle<typeof toolbar>>;
+declare const ToolbarGroupKey: InjectionKey<() => boolean>;
+declare function useToolbarScope(): import("vue").ComputedRef<(() => import("@ui-sdk/core/renderer").RovingScope) | undefined>;
+export { ToolbarGroupKey, ToolbarKey, useToolbarScope };

package/dist/toolbar-context.js

@@ -0,0 +1,20 @@
+// src/toolbar-context.ts
+import { computed, inject } from "vue";
+var ToolbarKey = /* @__PURE__ */ Symbol("toolbar");
+var ToolbarGroupKey = /* @__PURE__ */ Symbol("toolbar-group");
+function useToolbarScope() {
+  const toolbar = inject(ToolbarKey, null);
+  const groupDisabled = inject(ToolbarGroupKey, () => false);
+  return computed(() => {
+    if (!toolbar) {
+      return void 0;
+    }
+    const disabled = groupDisabled();
+    return () => toolbar.api.internal.scopeIn(disabled);
+  });
+}
+export {
+  ToolbarGroupKey,
+  ToolbarKey,
+  useToolbarScope
+};

package/dist/toolbar.d.ts

@@ -0,0 +1,120 @@
+import { type ToolbarController, type ToolbarOrientation } from "@ui-sdk/core/toolbar";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+/**
+ * A row of controls with one tab stop and arrow keys between them. Toggles and
+ * toggle groups inside join it. Render menu and select triggers through
+ * `ToolbarButton`, and fields through `ToolbarInput`, with the `render` slot.
+ * @stable
+ */
+declare const Toolbar: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    orientation: PropType<ToolbarOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToolbarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/toolbar").ToolbarState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    orientation: PropType<ToolbarOrientation>;
+    loop: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    controller: PropType<ToolbarController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    debug: boolean;
+    loop: boolean;
+}, PartSlots<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A button in the toolbar. Arrow keys move between it and the toolbar's other items.
+ * @stable
+ */
+declare const ToolbarButton: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarButtonState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarButtonState>>>, "button">;
+/**
+ * A text field. Arrows move its caret, and leave it only from the end they point at.
+ * @stable
+ */
+declare const ToolbarInput: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarButtonState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarButtonState>>>, "input">;
+/**
+ * A link in the toolbar. Arrow keys move between it and the toolbar's other items.
+ * @stable
+ */
+declare const ToolbarLink: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<Pick<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}, "groupDisabled">> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarLinkState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<Pick<{
+    disabled?: boolean;
+    focusableWhenDisabled?: boolean;
+    groupDisabled?: boolean;
+}, "groupDisabled">> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarLinkState>>>, "a">;
+/**
+ * A group of related items in the toolbar. `disabled` disables every item in it.
+ * @stable
+ */
+declare const ToolbarGroup: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/toolbar").ToolbarGroupState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, PartSlots<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "group">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A line between groups of items.
+ * @stable
+ */
+declare const ToolbarSeparator: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarSeparatorState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/toolbar").ToolbarSeparatorState>>>, "div">;
+export { createToolbarController } from "@ui-sdk/core/toolbar";
+export type { ToolbarApi, ToolbarButtonProps, ToolbarButtonState, ToolbarController, ToolbarGroupProps, ToolbarGroupState, ToolbarInputProps, ToolbarInputState, ToolbarLinkState, ToolbarOptions, ToolbarOrientation, ToolbarPrimitive, ToolbarState, ToolbarSeparatorState, } from "@ui-sdk/core/toolbar";
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, };

package/dist/toolbar.js

@@ -0,0 +1,77 @@
+// src/toolbar.ts
+import {
+  toolbar as toolbarPrimitive
+} from "@ui-sdk/core/toolbar";
+import { computed, defineComponent, provide, useId } from "vue";
+import { ToolbarGroupKey, ToolbarKey } from "./toolbar-context.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  optionalBoolean,
+  provideProps,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createToolbarController } from "@ui-sdk/core/toolbar";
+var parts = createParts(toolbarPrimitive, {
+  button: "button",
+  input: "input",
+  link: "a",
+  separator: "div"
+});
+var Toolbar = withElement(
+  "div",
+  defineComponent({
+    name: "Toolbar",
+    inheritAttrs: false,
+    props: {
+      orientation: String,
+      loop: optionalBoolean,
+      disabled: optionalBoolean,
+      controller: Object,
+      debug: optionalBoolean
+    },
+    slots: Object,
+    setup(props) {
+      const toolbar = usePrimitive(toolbarPrimitive, () => ({
+        orientation: props.orientation,
+        loop: props.loop,
+        disabled: props.disabled,
+        controller: props.controller,
+        debug: props.debug
+      }));
+      provide(ToolbarKey, toolbar);
+      return usePart(toolbar, "root", void 0, void 0, "div");
+    }
+  })
+);
+var ToolbarButton = parts.Button;
+var ToolbarInput = parts.Input;
+var ToolbarLink = parts.Link;
+var ToolbarGroup = withElement(
+  "div",
+  defineComponent({
+    name: "ToolbarGroup",
+    inheritAttrs: false,
+    props: { disabled: optionalBoolean },
+    slots: Object,
+    setup(props) {
+      const id = useId();
+      const group = () => ({ id, disabled: props.disabled });
+      provideProps(toolbarPrimitive, "group", group);
+      const part = usePart(toolbarPrimitive, "group", group);
+      const disabled = computed(() => part.state.disabled);
+      provide(ToolbarGroupKey, () => disabled.value);
+      return part;
+    }
+  })
+);
+var ToolbarSeparator = parts.Separator;
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator,
+  createToolbarController
+};