@cube-dev/ui-kit 0.128.0 → 0.130.0

package/dist/tokens/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { BASE_TOKENS } from "./base.js";
 import { COLOR_TOKENS } from "./colors.js";
 import { LAYOUT_TOKENS } from "./layout.js";

package/dist/tokens/layout.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/tokens/layout.ts
 /**
 * Layout-related tokens for common UI dimensions.

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.128.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.130.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.128.0";
+const VERSION = "0.130.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;
 	window.CubeUIKit = window.CubeUIKit || { version };

package/docs/components/content/Tree.md

@@ -0,0 +1,299 @@
+# Tree
+
+Tree displays hierarchical data as a list of nodes you can expand, collapse,
+select, and (optionally) check. Built on `useTree` and `useTreeState`
+(React Aria + React Stately) and styled with Tasty.
+
+The component's data shape (`treeData`) and the public callback shape are
+designed to be a near drop-in for AntD's `Tree` (modulo the `is*` boolean
+prop convention used across `@cube-dev/ui-kit`), so existing AntD `Tree`
+consumers can be migrated with minimal churn.
+
+## When to Use
+
+- Rendering hierarchical structures such as file systems, organizational
+  charts, navigation, or schema browsers.
+- Letting users select one or many nodes from a tree, with cascading
+  parent/child checkbox semantics.
+- Lazily loading children when a node is expanded the first time
+  (`loadData`).
+- Filtering with auto-expanded ancestors (`autoExpandParent`).
+
+## Component
+
+---
+
+### Properties
+
+- **`treeData`** `CubeTreeNodeData[]` — Hierarchical data describing the
+  tree.
+- **`isCheckable`** `boolean` (default: `false`) — Render a checkbox in
+  front of every eligible row.
+- **`isSelectable`** `boolean` — Sugar for `selectionMode="none"` when
+  `false`. `selectionMode` wins when both are passed.
+- **`selectionMode`** `'none' | 'single' | 'multiple'` (default: `'single'`)
+  — Selection cardinality.
+- **`isDisabled`** `boolean` (default: `false`) — Disable the entire tree.
+- **`defaultExpandedKeys`** `string[]` — Default expanded keys
+  (uncontrolled).
+- **`expandedKeys`** `string[]` — Controlled expanded keys.
+- **`autoExpandParent`** `boolean` (default: `false`) — Auto-expand parents
+  of currently expanded keys. Useful for filtering.
+- **`defaultCheckedKeys`** `string[]` — Default checked keys (uncontrolled).
+- **`checkedKeys`** `string[] | { checked: string[]; halfChecked?: string[] }`
+  — Controlled checked keys. Pass the object form to receive the same
+  shape back from `onCheck`.
+- **`defaultSelectedKeys`** `string[]` — Default selected keys
+  (uncontrolled).
+- **`selectedKeys`** `string[]` — Controlled selected keys.
+- **`height`** `number` — Fixed height in pixels. When omitted, the tree
+  fills the available vertical space and scrolls internally.
+- **`loadData`** `(node: TreeLoadDataNode) => Promise<void>` — Async
+  loader called the first time a non-leaf node with no `children` is
+  expanded. The consumer is expected to merge new children into
+  `treeData` (typical AntD pattern).
+- **`onExpand`** `(expandedKeys: Key[], info: TreeOnExpandInfo) => void` —
+  Called when a node is expanded or collapsed.
+- **`onCheck`** `(checked: Key[] | { checked, halfChecked }, info: TreeOnCheckInfo) => void`
+  — Called when a node is checked or unchecked.
+- **`onSelect`** `(selectedKeys: Key[], info: TreeOnSelectInfo) => void` —
+  Called when row selection changes.
+- **`rowStyles`** `Styles` — Override styles for `[data-element="Row"]`.
+
+#### `CubeTreeNodeData`
+
+- **`key`** `string` — Unique identifier of the node.
+- **`title`** `ReactNode` — Visible label.
+- **`children`** `CubeTreeNodeData[]` — Children. Pass `undefined`
+  together with `isLeaf={false}` for lazy nodes.
+- **`isLeaf`** `boolean` — Force leaf rendering (no expand toggle, no
+  `loadData` call).
+- **`isDisabled`** `boolean` — Disable interactions on this row (focus /
+  select / expand / check).
+- **`isCheckboxDisabled`** `boolean` — Disable only the checkbox of this
+  row.
+- **`isCheckable`** `boolean` — Per-node override; `false` hides the
+  checkbox for this row even when the tree is `isCheckable`.
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Styling Properties
+
+#### styles
+
+Customizes the root `treegrid` element of the Tree.
+
+**Sub-elements:**
+
+- `Row` — A single tree row (also targetable via the dedicated
+  `rowStyles` prop).
+
+#### rowStyles
+
+Customizes `[data-element="Row"]`. Useful when you need to override row
+spacing, hover/selected colors, or cell layout without re-targeting via
+`styles`.
+
+**Sub-elements:**
+
+- `Toggle` — The expand/collapse button.
+- `Checkbox` — The checkbox slot (visible only when `isCheckable`).
+- `Title` — The title label.
+
+### Modifiers
+
+The following row-level modifiers are emitted automatically. They are
+useful when overriding `rowStyles`:
+
+| Modifier        | Type      | Description                                            |
+| --------------- | --------- | ------------------------------------------------------ |
+| `selected`      | `boolean` | Row is selected.                                       |
+| `checked`       | `boolean` | Row is fully checked.                                  |
+| `indeterminate` | `boolean` | Row is in the half-checked state.                      |
+| `expanded`      | `boolean` | Row is expanded.                                       |
+| `disabled`      | `boolean` | Row is disabled.                                       |
+| `loading`       | `boolean` | The row's children are being fetched via `loadData`.   |
+| `leaf`          | `boolean` | Row has no children.                                   |
+| `has-checkbox`  | `boolean` | Row renders a checkbox.                                |
+
+## Variants
+
+### Selection Modes
+
+- `none` — Row click does not select. Useful in pure-display or pure-
+  checkable trees.
+- `single` (default) — One row selected at a time.
+- `multiple` — Multi-select with keyboard modifiers and shift-range.
+
+## Examples
+
+### Basic Usage
+
+```jsx
+const data = [
+  { key: 'fruits', title: 'Fruits', children: [
+    { key: 'apple', title: 'Apple' },
+    { key: 'banana', title: 'Banana' },
+  ]},
+  { key: 'vegetables', title: 'Vegetables', children: [
+    { key: 'carrot', title: 'Carrot' },
+  ]},
+];
+
+<Tree treeData={data} defaultExpandedKeys={['fruits']} />;
+```
+
+### Checkable
+
+`isCheckable` enables AntD-style cascading parent ↔ child checkbox
+behavior: checking a parent checks all eligible descendants, and a
+parent flips into the indeterminate (half-checked) state when only some
+of its descendants are checked.
+
+```jsx
+<Tree
+  treeData={data}
+  isCheckable
+  selectionMode="none"
+  defaultCheckedKeys={['apple']}
+  onCheck={(keys, info) => {
+    console.log('checked', keys);
+    console.log('half-checked', info.halfCheckedKeys);
+  }}
+/>
+```
+
+### Controlled Checked
+
+To match AntD's object-shape API, pass `checkedKeys` as
+`{ checked, halfChecked }`. `onCheck` returns the same shape.
+
+```jsx
+const [checkedKeys, setCheckedKeys] = useState({ checked: [], halfChecked: [] });
+
+<Tree
+  treeData={data}
+  isCheckable
+  checkedKeys={checkedKeys}
+  onCheck={(next) => setCheckedKeys(next)}
+/>
+```
+
+### Lazy Loading
+
+Set `isLeaf: false` and omit `children` on a node, then provide a
+`loadData` callback. The callback should merge new children into
+`treeData`. The row shows a spinner while in flight; subsequent expands
+of the same key won't refire `loadData`.
+
+```jsx
+const handleLoadData = (node) =>
+  fetch(`/api/children?key=${node.key}`)
+    .then((r) => r.json())
+    .then((children) => mergeIntoTreeData(node.key, children));
+
+<Tree treeData={data} loadData={handleLoadData} />
+```
+
+### Auto-expand Parent (Filtering)
+
+Pass the matching keys via `expandedKeys` and set `autoExpandParent` to
+keep their ancestors expanded.
+
+```jsx
+<Tree
+  treeData={data}
+  expandedKeys={matchedKeys}
+  autoExpandParent
+/>
+```
+
+### Per-node Disabling
+
+Disable the entire row, just the checkbox, or hide the checkbox via
+node-level flags.
+
+```jsx
+const data = [
+  { key: 'a', title: 'A', children: [
+    { key: 'a-1', title: 'A-1', isDisabled: true },
+    { key: 'a-2', title: 'A-2', isCheckboxDisabled: true },
+    { key: 'a-3', title: 'A-3', isCheckable: false },
+  ]},
+];
+
+<Tree treeData={data} isCheckable defaultExpandedKeys={['a']} />
+```
+
+### Fixed Height
+
+```jsx
+<Tree treeData={data} height={300} />
+```
+
+## Accessibility
+
+Tree implements the
+[`treegrid` ARIA pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/)
+via `useTree` from React Aria.
+
+### Keyboard Navigation
+
+- `Tab` — Moves focus into / out of the tree (focus stays on the
+  currently active row inside).
+- `ArrowUp` / `ArrowDown` — Move focus to the previous / next visible row.
+- `ArrowRight` — Expand the focused row (or move to its first child if
+  already expanded).
+- `ArrowLeft` — Collapse the focused row (or move to its parent if
+  already collapsed).
+- `Home` / `End` — Move focus to the first / last visible row.
+- `Space` / `Enter` — Toggle selection on the focused row (in `single`
+  or `multiple` mode).
+
+### Screen Reader Support
+
+- Each row reports `aria-level`, `aria-posinset`, `aria-setsize`, and
+  `aria-expanded` so screen readers can announce the position and
+  expansion state.
+- When `isCheckable` is enabled, the row carries `aria-checked` (`true`,
+  `false`, or `mixed` for the indeterminate state).
+- Disabled rows expose `aria-disabled="true"`.
+
+### ARIA Properties
+
+- `aria-label` — Provide a label that describes the tree's contents
+  (defaults to `"Tree"`).
+
+## Best Practices
+
+1. **Do**: Provide stable, unique `key`s — they are used for selection,
+   expansion, checking, and lazy-load tracking.
+   ```jsx
+   <Tree treeData={data.map((node) => ({ ...node, key: node.id }))} />
+   ```
+2. **Don't**: Mutate `treeData` in place. Always return a new array
+   from `loadData`'s commit step so React Stately can rebuild the
+   collection.
+3. **Accessibility**: When using checkboxes for selection, set
+   `selectionMode="none"` so the row click doesn't compete with the
+   checkbox.
+4. **Performance**: For very large trees, prefer virtualization (planned;
+   see Suggested Improvements) or use `loadData` to defer subtree
+   construction.
+
+## Suggested Improvements
+
+- Built-in virtualization for very large trees (10k+ rows).
+- Drag-and-drop reordering, mirroring AntD's `draggable` API.
+- An `onRightClick`/context menu hook.
+- Reveal-on-mount: scroll the focused row into view when expanded
+  programmatically.
+- Optional inline title editing.
+
+## Related Components
+
+- [ListBox](/components/ListBox) — Flat list with single/multi selection.
+- [Menu](/components/Menu) — Hierarchical action lists in popovers.
+- [Tabs](/components/Tabs) — Switch between sibling content panels.

package/docs/tasty/dsl.md

@@ -59,6 +59,7 @@ Control how a sub-element selector attaches to the root selector using the `$` p
 | *(none)* | ` [el]` | Descendant (default) |
 | `>` | `> [el]` | Direct child |
 | `>Body>Row>` | `> [Body] > [Row] > [el]` | Chained elements |
+| `> SubElementName` | `> [SubElementName]` | Self-name shorthand — when the trailing element name matches the sub-element's own key, it acts as the placeholder (same as `@`); no duplication |
 | `h1` | ` h1` | Tag selector (no key injection) |
 | `h1 >` | ` h1 > [el]` | Key is direct child of tag |
 | `h1 *` | ` h1 *` | Any descendant of tag |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.128.0",
+  "version": "0.130.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -45,7 +45,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "2.1.0",
+    "@tenphi/tasty": "2.1.1",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -58,7 +58,6 @@
     "react-is": "^18.3.1",
     "react-keyed-flatten-children": "^1.3.0",
     "react-stately": "^3.43.0",
-    "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
     "tiny-invariant": "^1.3.3",
     "usehooks-ts": "^3.1.0",
@@ -94,7 +93,6 @@
     "@types/react-dom": "^19.1.7",
     "@types/react-is": "^18.2.4",
     "@types/react-test-renderer": "^18.0.7",
-    "@types/react-transition-group": "^4.4.10",
     "@typescript-eslint/eslint-plugin": "^8.31.0",
     "@typescript-eslint/parser": "^8.31.0",
     "@uiw/react-codemirror": "^4.25.4",