nuance-ui 0.1.6 → 0.1.8

package/dist/runtime/components/roving-focus/_lib/context.js

@@ -0,0 +1,90 @@
+import { createStrictInjection } from "@nui/helpers";
+import { unrefElement } from "@vueuse/core";
+import { nextTick, ref, watch } from "vue";
+const SELECT_ATTR = "data-roving-item";
+const injectionKey = Symbol("roving-focus");
+const [useProvide, useState] = createStrictInjection(({ list, loop, orientation, attr = SELECT_ATTR }) => {
+  const activeIx = ref(-1);
+  const init = () => activeIx.value = 0;
+  const getItems = () => Array.from(
+    unrefElement(list)?.querySelectorAll(`[${attr}]:not(:disabled)`) ?? []
+  );
+  watch(activeIx, (ix, oldIx) => {
+    const items = getItems();
+    if (ix !== oldIx) {
+      items[oldIx]?.setAttribute("tabindex", "-1");
+      items[ix]?.setAttribute("tabindex", "0");
+    }
+  });
+  const focusElement = (element) => {
+    if (!element)
+      return;
+    activeIx.value = getItems().indexOf(element);
+    nextTick(() => element.focus());
+  };
+  function focus(dir, element) {
+    if (!element && dir !== "first" && dir !== "last")
+      return;
+    const items = getItems();
+    const ix = element ? items.indexOf(element) : -1;
+    let nextIndex = ix;
+    switch (dir) {
+      case "first":
+        nextIndex = 0;
+        break;
+      case "last":
+        nextIndex = items.length - 1;
+        break;
+      case "next": {
+        nextIndex = ix + 1;
+        if (nextIndex >= items.length)
+          nextIndex = loop ? 0 : items.length - 1;
+        break;
+      }
+      case "prev": {
+        nextIndex = ix - 1;
+        if (nextIndex < 0)
+          nextIndex = loop ? items.length - 1 : 0;
+        break;
+      }
+    }
+    if (nextIndex !== ix && items[nextIndex] !== void 0) {
+      activeIx.value = nextIndex;
+      focusElement(items[nextIndex]);
+    }
+  }
+  const onItemUnmount = (element) => {
+    if (!element)
+      return;
+    const items = getItems();
+    const currentIndex = items.indexOf(element);
+    if (currentIndex === activeIx.value) {
+      nextTick(() => {
+        const newItems = getItems();
+        if (newItems.length === 0)
+          return activeIx.value = -1;
+        const nextIndex = currentIndex < newItems.length ? currentIndex : newItems.length - 1;
+        activeIx.value = nextIndex;
+        newItems[nextIndex]?.focus();
+      });
+    } else if (currentIndex < activeIx.value) {
+      activeIx.value--;
+    }
+  };
+  return {
+    attr,
+    list,
+    loop,
+    orientation,
+    init,
+    focus,
+    getItems,
+    focusElement,
+    onItemUnmount
+  };
+}, {
+  injectionKey,
+  name: "RovingFocus"
+});
+export const useProvideRovingFocus = useProvide;
+export const useRovingFocus = useState;

package/dist/runtime/components/roving-focus/index.d.ts

@@ -0,0 +1 @@
+export { useRovingFocus } from './_lib/context.js';

package/dist/runtime/components/roving-focus/index.js

@@ -0,0 +1 @@
+export { useRovingFocus } from "./_lib/context.js";

package/dist/runtime/components/roving-focus/roving-focus-item.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { unrefElement } from "@vueuse/core";
+import { computed, onBeforeUnmount, useTemplateRef } from "vue";
+import Renderless from "../renderless/renderless.vue";
+import { useRovingFocus } from "./_lib/context";
+const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus();
+const isVertical = computed(() => orientation === "vertical" || orientation === "both");
+const isHorizontal = computed(() => orientation === "horizontal" || orientation === "both");
+const attrs = computed(() => ({ [attr]: "" }));
+const ref = useTemplateRef("item");
+onBeforeUnmount(() => {
+  const el = unrefElement(ref);
+  onItemUnmount(el);
+});
+</script>
+
+<template>
+	<Renderless
+		v-bind='attrs'
+		ref='item'
+		:tabindex='-1'
+		@keydown.up.prevent='isVertical && focus("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus("next", $event.currentTarget)'
+		@keydown.home.prevent='focus("first")'
+		@keydown.end.prevent='focus("last")'
+		@click.prevent='focusElement($event.currentTarget)'
+	>
+		<slot />
+	</Renderless>
+</template>

package/dist/runtime/components/roving-focus/roving-focus-item.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_16: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus.d.vue.ts

@@ -0,0 +1,21 @@
+export interface RovingFocusProps {
+    /** Loop focus from last to first and vice versa */
+    loop?: boolean;
+    /** Allowed arrow key directions */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Custom attribute instead of data-roving-item */
+    attr?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RovingFocusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RovingFocusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/roving-focus/roving-focus.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { nextTick, onMounted, useTemplateRef } from "vue";
+import Renderless from "../renderless/renderless.vue";
+import { useProvideRovingFocus } from "./_lib/context";
+const { loop = false, orientation = "vertical" } = defineProps({
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false }
+});
+const list = useTemplateRef("list");
+const { init } = useProvideRovingFocus({
+  list,
+  loop,
+  orientation
+});
+onMounted(() => nextTick(() => init()));
+</script>
+
+<template>
+	<Renderless ref='list'>
+		<slot />
+	</Renderless>
+</template>

package/dist/runtime/components/roving-focus/roving-focus.vue.d.ts

@@ -0,0 +1,21 @@
+export interface RovingFocusProps {
+    /** Loop focus from last to first and vice versa */
+    loop?: boolean;
+    /** Allowed arrow key directions */
+    orientation?: 'vertical' | 'horizontal' | 'both';
+    /** Custom attribute instead of data-roving-item */
+    attr?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RovingFocusProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RovingFocusProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/select/select.d.vue.ts

@@ -23,7 +23,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         open?: boolean;
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
@@ -37,7 +37,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/select/select.vue.d.ts

@@ -23,7 +23,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         open?: boolean;
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
-    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
@@ -37,7 +37,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/tabs/tabs-tab.d.vue.ts

@@ -1,4 +1,4 @@
-import type { Mod } from '@nui/composals';
+import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
     value: string;
     mod?: Mod | Mod[];

package/dist/runtime/components/tabs/tabs-tab.vue.d.ts

@@ -1,4 +1,4 @@
-import type { Mod } from '@nui/composals';
+import type { Mod } from '@nui/utils';
 export interface TabsTabProps {
     value: string;
     mod?: Mod | Mod[];

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -0,0 +1,171 @@
+<script setup>
+import { useTheme } from "@nui/composals";
+import { getThemeColor, isFalsy } from "@nui/utils";
+import { computed } from "vue";
+import Button from "../../button/button.vue";
+import { useRovingFocus } from "../../roving-focus";
+import RovingFocusItem from "../../roving-focus/roving-focus-item.vue";
+import { useTreeState } from "../lib/context";
+const { item, level } = defineProps({
+  item: { type: Object, required: true },
+  level: { type: Number, required: true }
+});
+const {
+  icon = "gravity-ui:folder",
+  trailingIcon = "gravity-ui:folder-open",
+  value,
+  label,
+  children,
+  disabled
+} = item;
+const { value: theme } = useTheme();
+const isFolder = computed(() => !isFalsy(children));
+const ctx = useTreeState();
+const selected = computed(() => ctx.selected.value.includes(value));
+const expanded = computed(() => ctx.expanded.value.includes(value));
+const active = computed(() => ctx.active.value === value);
+const { icon: fileIcon, color } = ctx.iconResolver(item);
+const { focus } = useRovingFocus();
+function handleClick(event) {
+  if (event.shiftKey)
+    ctx.toggle("select", value, "range");
+  else if (event.ctrlKey || event.metaKey)
+    ctx.toggle("select", value, "multiple");
+  else
+    ctx.toggle("select", value, "single");
+  if (isFolder.value && !event.ctrlKey && !event.metaKey && !event.shiftKey)
+    ctx.toggle("expand", value);
+}
+function handleKeyDown(event) {
+  switch (event.key) {
+    // Arrow Left - закрыть папку или перейти к родителю
+    case "ArrowLeft": {
+      event.preventDefault();
+      if (isFolder.value && expanded.value)
+        return ctx.off("expand", value);
+      else
+        return focus("prev", event.currentTarget);
+    }
+    // Arrow Right - открыть папку или перейти к первому ребенку
+    case "ArrowRight": {
+      event.preventDefault();
+      if (isFolder.value && !expanded.value)
+        return ctx.on("expand", value);
+      else if (expanded.value)
+        return focus("next", event.currentTarget);
+      break;
+    }
+    // Enter/Space - выбор элемента
+    case "Enter":
+      ctx.on("select", value);
+      return ctx.setActive(value);
+    case " ": {
+      event.preventDefault();
+      if (event.shiftKey)
+        return ctx.toggle("select", value, "range");
+      else if (event.ctrlKey || event.metaKey)
+        return ctx.toggle("select", value, "multiple");
+      return ctx.toggle("select", value, "single");
+    }
+  }
+}
+</script>
+
+<template>
+	<li :class='$style.root' role='presentation'>
+		<RovingFocusItem>
+			<Button
+				variant='subtle'
+				size='compact-md'
+				role='treeitem'
+				:classes='{
+  root: $style.button,
+  label: $style.label,
+  inner: $style.inner,
+  section: $style.section
+}'
+				:mod='{ active, selected, level }'
+				:aria-selected='selected'
+				:aria-level='level'
+				:disabled
+				@click.prevent='handleClick'
+				@keydown.prevent='handleKeyDown'
+			>
+				<template v-if='isFolder' #leftSection>
+					<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+					<Icon v-else :class='$style.icon' :name='icon' />
+				</template>
+				<template v-else #leftSection>
+					<Icon
+						:class='$style.icon'
+						:name='fileIcon'
+						:style='{ color: color && getThemeColor(color, theme) }'
+					/>
+				</template>
+				{{ label ?? value }}
+			</Button>
+		</RovingFocusItem>
+
+		<ul
+			v-if='expanded && item.children && item.children.length > 0'
+			:class='$style.list'
+			role='group'
+		>
+			<TreeItem
+				v-for='child in item.children'
+				:key='child.value'
+				:item='child'
+				:level='level + 1'
+			/>
+		</ul>
+	</li>
+</template>
+
+<style module lang="postcss">
+.root {
+	display: grid;
+	gap: .25rem;
+}
+
+.button {
+	.inner {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+
+		color: var(--color-text);
+
+		.label {
+			font-size: var(--font-size-sm);
+			font-weight: 500;
+		}
+	}
+
+	&[data-active],
+	&[data-selected] {
+		.inner {
+			color: var(--button-color);
+		}
+	}
+
+	&[data-selected] {
+		background: alpha(var(--button-color), .1);
+	}
+}
+
+.icon {
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+
+	list-style: none;
+}
+</style>

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -0,0 +1,33 @@
+import type { NuanceSize } from '@nui/types';
+import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
+import type { TreeIconResolver, TreeModels } from '../model.js';
+export type TreeRootProps<T extends string = string> = RovingFocusProps & {
+    size?: NuanceSize | string;
+    iconResolver?: TreeIconResolver<T>;
+    removable?: boolean;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(RovingFocusProps & {
+        size?: NuanceSize | string;
+        iconResolver?: TreeIconResolver<T> | undefined;
+        removable?: boolean;
+    } & {
+        tree: TreeModels<T>["tree"];
+        active?: TreeModels<T>["active"];
+        selected?: TreeModels<T>["selected"];
+        expanded?: TreeModels<T>["expanded"];
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: ((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { useStyleResolver } from "@nui/composals";
+import { getSize, removeTreeNodes } from "@nui/utils";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+import { useTemplateRef } from "vue";
+import Box from "../../box.vue";
+import RovingFocus from "../../roving-focus/roving-focus.vue";
+import { useProvideTreeState } from "../lib/context";
+const {
+  size,
+  attr,
+  loop,
+  orientation,
+  iconResolver = () => ({ icon: "gravity-ui:file" }),
+  removable = false
+} = defineProps({
+  loop: { type: Boolean, required: false },
+  orientation: { type: String, required: false },
+  attr: { type: String, required: false },
+  size: { type: String, required: false },
+  iconResolver: { type: Function, required: false },
+  removable: { type: Boolean, required: false }
+});
+const tree = defineModel("tree", { type: Array, ...{ required: true } });
+const active = defineModel("active", { type: null, ...{ default: null } });
+const selected = defineModel("selected", { type: Array, ...{ default: [] } });
+const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
+const style = useStyleResolver(() => ({
+  "--icon-size": getSize(size)
+}));
+const root = useTemplateRef("parent");
+onClickOutside(root, () => selected.value = []);
+useProvideTreeState({
+  tree,
+  active,
+  selected,
+  expanded,
+  iconResolver
+});
+if (removable) {
+  useEventListener(root, "keydown", (event) => {
+    if (event.key === "Delete") {
+      event.preventDefault();
+      return tree.value = removeTreeNodes(tree.value, selected.value);
+    }
+  });
+}
+</script>
+
+<template>
+	<RovingFocus :attr :loop :orientation>
+		<Box
+			is='ul'
+			ref='parent'
+			role='tree'
+			:style
+			:class='$style.root'
+			@keydown.esc.prevent='selected.value = []'
+		>
+			<slot />
+		</Box>
+	</RovingFocus>
+</template>
+
+<style module lang="postcss">
+.root {
+	--tree-icon-size: var(--spacing-md);
+
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+
+	padding-inline-start: 0;
+
+	list-style: none;
+}
+</style>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -0,0 +1,33 @@
+import type { NuanceSize } from '@nui/types';
+import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
+import type { TreeIconResolver, TreeModels } from '../model.js';
+export type TreeRootProps<T extends string = string> = RovingFocusProps & {
+    size?: NuanceSize | string;
+    iconResolver?: TreeIconResolver<T>;
+    removable?: boolean;
+};
+declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(RovingFocusProps & {
+        size?: NuanceSize | string;
+        iconResolver?: TreeIconResolver<T> | undefined;
+        removable?: boolean;
+    } & {
+        tree: TreeModels<T>["tree"];
+        active?: TreeModels<T>["active"];
+        selected?: TreeModels<T>["selected"];
+        expanded?: TreeModels<T>["expanded"];
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: ((evt: "update:tree", value: import("..").TreeItem<T>[]) => void) & ((evt: "update:active", value: T | null) => void) & ((evt: "update:selected", value: T[]) => void) & ((evt: "update:expanded", value: T[]) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/tree/index.d.ts

@@ -0,0 +1 @@
+export * from './model.js';

package/dist/runtime/components/tree/index.js

@@ -0,0 +1 @@
+export * from "./model.js";

package/dist/runtime/components/tree/lib/context.d.ts

@@ -0,0 +1,24 @@
+import type { TreeIconResolver, TreeItem } from '@nui/components';
+import type { ModelRef } from 'vue';
+type EventType = 'select' | 'expand';
+type SelectMode = 'single' | 'multiple' | 'range';
+export interface TreeContext<T extends string = string> {
+    tree: ModelRef<TreeItem<T>[]>;
+    active: ModelRef<T | null>;
+    selected: ModelRef<T[]>;
+    expanded: ModelRef<T[]>;
+    iconResolver: TreeIconResolver<T>;
+}
+export interface TreeState<T extends string = string> {
+    active: ModelRef<T | null>;
+    selected: ModelRef<T[]>;
+    expanded: ModelRef<T[]>;
+    iconResolver: TreeIconResolver<T>;
+    toggle: (type: EventType, value: T, mode?: SelectMode) => void;
+    on: ((type: 'expand', value: T) => void) & ((type: 'select', value: T, mode?: SelectMode) => void);
+    off: (type: EventType, value: T) => void;
+    setActive: (value: T | null) => void;
+}
+export declare function useProvideTreeState<T extends string = string>(ctx: TreeContext<T>): TreeState<T>;
+export declare function useTreeState<T extends string = string>(): TreeState<T>;
+export {};