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

package/dist/tooltip.d.ts

@@ -0,0 +1,160 @@
+import type { Anchor, ChangeDetails, Side } from "@ui-sdk/core";
+import { type TooltipController, type TooltipOpenChangeReason, type TooltipPayloadChangeReason } from "@ui-sdk/core/tooltip";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type OpenDetails = ChangeDetails<TooltipOpenChangeReason>;
+type PayloadDetails = ChangeDetails<TooltipPayloadChangeReason>;
+/**
+ * A short label or hint that appears when the pointer rests on its trigger or keyboard focus reaches it.
+ * @stable
+ */
+declare const Tooltip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    delay: NumberConstructor;
+    closeDelay: NumberConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toggleable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    closeOnPress: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    type: PropType<"label" | "description">;
+    shortcut: StringConstructor;
+    controller: PropType<TooltipController<any>>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (_open: boolean) => true;
+    "update:modelValue": (_open: boolean) => true;
+    openChange: (_open: boolean, _details: OpenDetails) => true;
+    openChangeComplete: (_open: boolean) => true;
+    payloadChange: (_payload: unknown, _details: PayloadDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultOpen: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    delay: NumberConstructor;
+    closeDelay: NumberConstructor;
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    toggleable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    closeOnPress: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    type: PropType<"label" | "description">;
+    shortcut: StringConstructor;
+    controller: PropType<TooltipController<any>>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((_open: boolean) => any) | undefined;
+    onOpenChange?: ((_open: boolean, _details: OpenDetails) => any) | undefined;
+    onOpenChangeComplete?: ((_open: boolean) => any) | undefined;
+    onPayloadChange?: ((_payload: unknown, _details: PayloadDetails) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    debug: boolean;
+    defaultOpen: boolean;
+    modelValue: boolean;
+    toggleable: boolean;
+    closeOnPress: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/**
+ * The element the tooltip names or describes, usually a button.
+ * @stable
+ */
+declare const TooltipTrigger: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    payload: PropType<unknown>;
+    controller: PropType<TooltipController<any>>;
+}>, () => unknown, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    payload: PropType<unknown>;
+    controller: PropType<TooltipController<any>>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/tooltip").TooltipPrimitive, "trigger">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "button">;
+/**
+ * The tooltip itself, positioned against its trigger.
+ * @stable
+ */
+declare const TooltipContent: import("./popup.js").PayloadPart<import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    container: PropType<Element | DocumentFragment | null>;
+}>, () => 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, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    side: PropType<Side>;
+    align: PropType<"start" | "center" | "end">;
+    sideOffset: NumberConstructor;
+    alignOffset: NumberConstructor;
+    collisionPadding: NumberConstructor;
+    arrowPadding: NumberConstructor;
+    anchor: PropType<Anchor | string | null>;
+    container: PropType<Element | DocumentFragment | null>;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/tooltip").TooltipPrimitive, "content">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">>;
+/**
+ * An arrow on the tooltip's edge that points at its trigger.
+ * @stable
+ */
+declare const TooltipArrow: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core").PopupPartState>>>, 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").PopupPartState>>>, "div">;
+/**
+ * Shows the tooltip's shortcut, like `⌘S`, formatted for the platform.
+ * @stable
+ */
+declare const TooltipShortcut: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shortcut: StringConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/tooltip").TooltipPrimitive, "shortcut">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+export { createTooltipController } from "@ui-sdk/core/tooltip";
+export type { TooltipApi, TooltipArrowState, TooltipContentProps, TooltipContentState, TooltipController, TooltipOpenChangeReason, TooltipOptions, TooltipPayloadChangeReason, TooltipPrimitive, TooltipShortcutProps, TooltipShortcutState, TooltipTriggerProps, TooltipTriggerState, } from "@ui-sdk/core/tooltip";
+export { Tooltip, TooltipArrow, TooltipContent, TooltipShortcut, TooltipTrigger, };

package/dist/tooltip.js

@@ -0,0 +1,224 @@
+// src/tooltip.ts
+import {
+  tooltip as tooltipPrimitive
+} from "@ui-sdk/core/tooltip";
+import {
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  provide,
+  ref,
+  useId
+} from "vue";
+import { slotContent } from "./children.js";
+import {
+  containerProp,
+  renderPopup,
+  renderUnbound,
+  useConnectedPart,
+  useControllerEntry,
+  useControllerTarget,
+  usePopupContainer,
+  withPayload
+} from "./popup.js";
+import { createParts, withElement } from "./create-parts.js";
+import {
+  copyProps,
+  optionalBoolean,
+  orModel,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+} from "./use-primitive.js";
+import { renderless } from "./renderless.js";
+import { createTooltipController } from "@ui-sdk/core/tooltip";
+var ContainerKey = /* @__PURE__ */ Symbol("tooltip-container");
+var TriggerKey = /* @__PURE__ */ Symbol("tooltip-trigger");
+var parts = createParts(tooltipPrimitive, { arrow: "div" });
+var Tooltip = /* @__PURE__ */ renderless(
+  defineComponent({
+    name: "Tooltip",
+    props: {
+      open: optionalBoolean,
+      modelValue: optionalBoolean,
+      defaultOpen: optionalBoolean,
+      delay: Number,
+      closeDelay: Number,
+      disabled: optionalBoolean,
+      toggleable: optionalBoolean,
+      closeOnPress: optionalBoolean,
+      type: String,
+      shortcut: String,
+      controller: Object,
+      debug: optionalBoolean,
+      container: containerProp
+    },
+    emits: {
+      "update:open": (_open) => true,
+      "update:modelValue": (_open) => true,
+      openChange: (_open, _details) => true,
+      openChangeComplete: (_open) => true,
+      payloadChange: (_payload, _details) => true
+    },
+    setup(props, { slots, emit }) {
+      provide(ContainerKey, () => props.container);
+      const tooltip = usePrimitive(tooltipPrimitive, () => ({
+        ...copyProps(props),
+        open: orModel(props.open, props.modelValue),
+        container: void 0,
+        onOpenChange: (open, details) => {
+          emit("openChange", open, details);
+          if (details.canceled) {
+            return;
+          }
+          emit("update:open", open);
+          emit("update:modelValue", open);
+        },
+        onOpenChangeComplete: (open) => emit("openChangeComplete", open),
+        onPayloadChange: (payload, details) => emit("payloadChange", payload, details)
+      }));
+      useControllerEntry(() => props.controller, tooltip);
+      return () => slots.default?.();
+    }
+  })
+);
+var TooltipTrigger = withElement(
+  "button",
+  defineComponent({
+    name: "TooltipTrigger",
+    inheritAttrs: false,
+    props: {
+      payload: null,
+      // Connects a trigger outside the tooltip to the tooltip with this controller.
+      controller: Object
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const connected = useControllerTarget(
+        tooltipPrimitive,
+        () => props.controller
+      );
+      provide(TriggerKey, connected);
+      const id = useId();
+      return useConnectedPart(
+        connected,
+        (tooltip) => usePart(
+          tooltip,
+          "trigger",
+          () => ({ id, payload: props.payload }),
+          void 0,
+          "button"
+        ),
+        // Until the tooltip it names mounts, a trigger outside the tooltip is a plain button.
+        () => renderUnbound(
+          "button",
+          { type: "button", ...attrs },
+          { slots, state: { open: false } }
+        )
+      );
+    }
+  })
+);
+var TooltipContent = withPayload(
+  withElement(
+    "div",
+    defineComponent({
+      name: "TooltipContent",
+      inheritAttrs: false,
+      props: {
+        side: String,
+        align: String,
+        sideOffset: Number,
+        alignOffset: Number,
+        collisionPadding: Number,
+        arrowPadding: Number,
+        anchor: [Object, String],
+        // Renders the popup into this element instead of in place.
+        container: containerProp
+      },
+      slots: Object,
+      setup(props) {
+        const tooltip = useHandle(tooltipPrimitive);
+        const fromRoot = inject(ContainerKey, () => void 0);
+        const target = usePopupContainer(() => props.container ?? fromRoot());
+        const content = () => {
+          const { container, ...content2 } = copyProps(props);
+          return content2;
+        };
+        const part = usePart(tooltip, "content", content);
+        return () => {
+          const element = part();
+          return element && renderPopup(element, target());
+        };
+      }
+    })
+  )
+);
+var TooltipArrow = parts.Arrow;
+var ShortcutBinding = defineComponent({
+  name: "TooltipShortcutBinding",
+  inheritAttrs: false,
+  props: {
+    tooltip: { type: Object, required: true },
+    shortcut: String
+  },
+  setup(props, { slots }) {
+    return usePart(
+      props.tooltip,
+      "shortcut",
+      () => ({ shortcut: props.shortcut }),
+      void 0,
+      {
+        tag: "span",
+        children: (state) => slotContent(slots.default, { state }) ?? state.text
+      }
+    );
+  }
+});
+var TooltipShortcut = withElement(
+  "span",
+  defineComponent({
+    name: "TooltipShortcut",
+    inheritAttrs: false,
+    props: {
+      // The keys to show. By default, the tooltip's shortcut.
+      shortcut: String
+    },
+    slots: Object,
+    setup(props, { slots, attrs }) {
+      const context = useScope(tooltipPrimitive)?.handle;
+      const trigger = inject(TriggerKey, null);
+      if (!context && !trigger) {
+        throw new Error("Tooltip parts must be used inside <Tooltip>.");
+      }
+      const mounted = ref(!!context);
+      onMounted(() => mounted.value = true);
+      return () => {
+        const tooltip = context ?? (mounted.value ? trigger?.() : void 0);
+        if (!tooltip) {
+          return null;
+        }
+        return h(
+          ShortcutBinding,
+          {
+            ...attrs,
+            key: tooltip.instance.id,
+            tooltip,
+            shortcut: props.shortcut
+          },
+          slots
+        );
+      };
+    }
+  })
+);
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipShortcut,
+  TooltipTrigger,
+  createTooltipController
+};

package/dist/tree.d.ts

@@ -0,0 +1,300 @@
+import { type ListHighlightDetails, type TreeActionDetails, type TreeAnnouncement, type TreeCheckStrategy, type TreeCheckedChangeReason, type TreeController, type TreeExpandedChangeReason, type TreeItemData, type TreeMode, type TreeValueChangeReason } from "@ui-sdk/core/tree";
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type PropType, type VNode } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type Value = string | string[] | null;
+/**
+ * A tree of items that expand and collapse, with one tab stop and arrow keys between its items.
+ * @stable
+ */
+declare const Tree: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: PropType<TreeItemData[]>;
+    paths: PropType<string[]>;
+    mode: PropType<TreeMode>;
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    activation: PropType<"automatic" | "manual">;
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    expandOnPress: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checked: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    checkStrategy: PropType<TreeCheckStrategy>;
+    onAction: PropType<(value: string, details: TreeActionDetails) => unknown>;
+    pendingAnnouncement: StringConstructor;
+    loadChildren: PropType<(value: string, details: {
+        signal: AbortSignal;
+    }) => void | Promise<unknown>>;
+    current: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    hiddenUntilFound: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    announcement: PropType<(change: TreeAnnouncement) => string | null | undefined>;
+    controller: PropType<TreeController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => 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/tree").TreeState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: Value) => true;
+    "update:modelValue": (_value: Value) => true;
+    valueChange: (_value: Value, _details: ChangeDetails<TreeValueChangeReason>) => true;
+    "update:expanded": (_expanded: string[]) => true;
+    expandedChange: (_expanded: string[], _details: ChangeDetails<TreeExpandedChangeReason>) => true;
+    "update:checked": (_checked: string[]) => true;
+    checkedChange: (_checked: string[], _details: ChangeDetails<TreeCheckedChangeReason>) => true;
+    highlight: (_value: string, _details: ListHighlightDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: PropType<TreeItemData[]>;
+    paths: PropType<string[]>;
+    mode: PropType<TreeMode>;
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    activation: PropType<"automatic" | "manual">;
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    expandOnPress: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    checked: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultChecked: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    checkStrategy: PropType<TreeCheckStrategy>;
+    onAction: PropType<(value: string, details: TreeActionDetails) => unknown>;
+    pendingAnnouncement: StringConstructor;
+    loadChildren: PropType<(value: string, details: {
+        signal: AbortSignal;
+    }) => void | Promise<unknown>>;
+    current: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    focusableWhenDisabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    keepMounted: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    hiddenUntilFound: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    announcement: PropType<(change: TreeAnnouncement) => string | null | undefined>;
+    controller: PropType<TreeController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: Value) => any) | undefined;
+    "onUpdate:value"?: ((_value: Value) => any) | undefined;
+    onValueChange?: ((_value: Value, _details: ChangeDetails<TreeValueChangeReason>) => any) | undefined;
+    onHighlight?: ((_value: string, _details: ListHighlightDetails) => any) | undefined;
+    "onUpdate:checked"?: ((_checked: string[]) => any) | undefined;
+    onCheckedChange?: ((_checked: string[], _details: ChangeDetails<TreeCheckedChangeReason>) => any) | undefined;
+    "onUpdate:expanded"?: ((_expanded: string[]) => any) | undefined;
+    onExpandedChange?: ((_expanded: string[], _details: ChangeDetails<TreeExpandedChangeReason>) => any) | undefined;
+}>, {
+    value: Value;
+    disabled: boolean;
+    debug: boolean;
+    checked: string[];
+    keepMounted: boolean;
+    hiddenUntilFound: boolean;
+    defaultValue: Value;
+    checkable: boolean;
+    focusableWhenDisabled: boolean;
+    defaultChecked: string[];
+    current: string | null;
+    expanded: string[];
+    expandOnPress: boolean;
+    defaultExpanded: string[];
+    modelValue: Value;
+}, PartSlots<import("@ui-sdk/core/tree").TreePrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * An item. Put its text in a `TreeItemLabel` and its children in a
+ * `TreeGroup`, which makes it a branch. Set `branch` for one whose children
+ * load later, or whose group is inside a component of your own.
+ * @stable
+ */
+declare const TreeItem: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    branch: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    branch: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    label: StringConstructor;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    branch: boolean;
+}, PartSlots<import("@ui-sdk/core/tree").TreePrimitive, "item">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The item's text, which names it. Render it as a link to make the item one.
+ * @stable
+ */
+declare const TreeItemLabel: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, "span">;
+/**
+ * The arrow that expands and collapses a branch. Alt or Option expands everything in it.
+ * @stable
+ */
+declare const TreeItemIndicator: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, "span">;
+/**
+ * The item's checkbox, with `checkable`. Screen readers hear the item's checked state instead.
+ * @stable
+ */
+declare const TreeItemCheckbox: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeItemState>>>, "span">;
+/**
+ * A branch's children. Rendered while the branch is expanded or animating closed.
+ * @stable
+ */
+declare const TreeGroup: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+} & {
+    keepMounted?: boolean;
+    hiddenUntilFound?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeGroupState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+} & {
+    keepMounted?: boolean;
+    hiddenUntilFound?: boolean;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/tree").TreeGroupState>>>, "div">;
+/**
+ * Renders data items. Used by data trees, and available for custom layouts.
+ * @stable
+ */
+declare const TreeItems: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<TreeItemData[]>;
+        required: true;
+    };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<TreeItemData[]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { createTreeController, toggleTreeChecked, treeCheckedStates, treeFromPaths, visibleTreeRows, } from "@ui-sdk/core/tree";
+export { Tree, TreeGroup, TreeItem, TreeItemCheckbox, TreeItemIndicator, TreeItemLabel, TreeItems, };
+export type { ListHighlightDetails, TreeActionDetails, TreeAnnouncement, TreeApi, TreeChangeOptions, TreeCheckStrategy, TreeCheckedChangeReason, TreeCheckedState, TreeCollection, TreeCollectionNode, TreeController, TreeExpandedChangeReason, TreeGroupProps, TreeGroupState, TreeItemData, TreeItemPartProps, TreeItemProps, TreeItemState, TreeOptions, TreePrimitive, TreeState, TreeRow, TreeMode, TreeValue, TreeValueChangeReason, } from "@ui-sdk/core/tree";