@galaxy-io/dls 1.6.1 → 2.0.0

package/dist/transform/Fade.js

@@ -1,28 +1,80 @@
+import { DURATION } from "../theme/tokens/scales.js";
+import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+/* empty css               */
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
+import { cx } from "@linaria/core";
+import { AnimatePresence, motion } from "framer-motion";
 //#region src/transform/Fade.tsx
 /**
-* Fades children in on mount and out on unmount, over 200ms.
+* The opacity enter/exit for content that appears and disappears. Given `isOpen`, it fades its
+* content in, or fades it out and then removes it from the DOM, the tab order and the
+* accessibility tree. Presentational only: no trigger, no state, no surface, no role. The host
+* (an overlay backdrop, an in-place status message, content replacing a placeholder) owns those.
 *
-* The exit half only runs inside a framer-motion `AnimatePresence`. Fills its
-* parent (100% × 100%).
+* Animated with `framer-motion` (Constitution II.7) over `duration.base`, `easeInOut`; instant
+* under reduced motion. Never animates on the first render unless `shouldAnimateOnMount` is set.
+* Fade does not move focus: a host that closes while focus is inside restores it itself.
 */
-var Fade = ({ children, delay = 0 }) => {
-	return /* @__PURE__ */ jsx(motion.div, {
-		initial: { opacity: 0 },
-		animate: { opacity: 1 },
-		exit: { opacity: 0 },
-		transition: {
-			duration: .2,
-			ease: "easeInOut",
-			delay
-		},
-		style: {
-			width: "100%",
-			height: "100%"
-		},
+/** The 1.x curve over `duration.base`. */
+var FADE_TRANSITION = {
+	duration: Number.parseFloat(DURATION.base) / 1e3,
+	ease: "easeInOut"
+};
+/** Under reduced motion the state snaps; the `transitionEnd` values still apply. */
+var FADE_REDUCED_TRANSITION = { duration: 0 };
+/** Where an enter starts: transparent. */
+var FADE_START = { opacity: 0 };
+/** Open: opaque, visible from the first frame, takes pointer input. */
+var FADE_OPEN = {
+	opacity: 1,
+	visibility: "visible",
+	pointerEvents: "auto"
+};
+/**
+* Closed: transparent, no pointer input from the first frame, hidden (kept-mounted) at the end.
+* `visibility: "visible"` is listed so framer owns the key during the close; with it only in
+* `transitionEnd`, framer sets the value but never renders it at rest.
+*/
+var FADE_CLOSED = {
+	opacity: 0,
+	visibility: "visible",
+	pointerEvents: "none",
+	transitionEnd: { visibility: "hidden" }
+};
+/** Lets a Fade that is a flex or grid child shrink with its content. */
+var Root = "gx-Fade-rzn1s0s";
+/** Fades its content in and out; unmounts it when closed by default. */
+var Fade = forwardRef(function Fade({ children, isOpen = false, shouldKeepMounted = false, shouldAnimateOnMount = false, id, className, style, ...rest }, ref) {
+	const transition = usePrefersReducedMotion() ? FADE_REDUCED_TRANSITION : FADE_TRANSITION;
+	const styleProps = style === void 0 ? {} : { style };
+	if (shouldKeepMounted) return /* @__PURE__ */ jsx(motion.div, {
+		...rest,
+		ref,
+		id,
+		initial: shouldAnimateOnMount ? FADE_START : false,
+		animate: isOpen ? FADE_OPEN : FADE_CLOSED,
+		transition,
+		className: cx(Root, className),
+		...styleProps,
 		children
 	});
-};
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: shouldAnimateOnMount,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			...rest,
+			ref,
+			id,
+			initial: FADE_START,
+			animate: FADE_OPEN,
+			exit: FADE_CLOSED,
+			transition,
+			className: cx(Root, className),
+			...styleProps,
+			children
+		}, "fade")
+	});
+});
+Fade.displayName = "Fade";
 //#endregion
 export { Fade as default };

package/dist/transform/Flasher.d.ts

@@ -0,0 +1,25 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface FlasherProps extends AriaAttributes {
+    /**
+     * The content to pulse: text, an `Icon`, an inline value. Phrasing content only (it renders
+     * inside a `<span>`); for a block, put Flasher inside it, around its text.
+     */
+    children?: ReactNode;
+    /**
+     * Pulses the content while `true` to mark it as in progress; at rest it is at full opacity.
+     * Static under reduced motion, so always pair it with a completion state.
+     * @default false
+     */
+    isFlashing?: boolean;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. Must not set `animation` or `opacity`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Pulses its content while `isFlashing`; the wrapper is always rendered. */
+declare const Flasher: import("react").ForwardRefExoticComponent<FlasherProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Flasher;

package/dist/transform/Flasher.js

@@ -0,0 +1,39 @@
+/* empty css                  */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/transform/Flasher.tsx
+/**
+* Pulses its content between full and 40% opacity while `isFlashing`, to say "this is in
+* progress": a "Syncing sources" label, a value that is recalculating. It wraps real content
+* that is already there; a placeholder for content that has not arrived is `Skeleton`, and a live
+* dot is `Beacon isPulse`. A loop (CSS keyframes over `7 × duration.base`), not an enter/exit.
+*
+* An inline `<span>` that is always rendered, so turning it off leaves content and layout as
+* they are. Decorative: the words must say the progress, and a host `role="status"` region
+* announces completion. Stops under reduced motion, so always pair it with a completion state.
+* Replaces 1.x `Flash` (renamed; `isFlashing` is new).
+*/
+/** Stays inline, so a Flasher can wrap a phrase inside a sentence. */
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Flasher-r11jlx92",
+	propsAsIs: false
+});
+/** Flashing: the 1.x pulse (1 → 0.4 → 1, ease-in-out) over `7 × duration.base` (1.05s). */
+var FLASHING_CSS = "gx-Flasher-FLASHING_CSS-fo5zqvg";
+/** Pulses its content while `isFlashing`; the wrapper is always rendered. */
+var Flasher = forwardRef(function Flasher({ children, isFlashing = false, id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className: cx(isFlashing && FLASHING_CSS, className),
+		style,
+		children
+	});
+});
+Flasher.displayName = "Flasher";
+//#endregion
+export { Flasher as default };

package/dist/transform/Rotate.d.ts

@@ -1,15 +1,27 @@
-import type { PropsWithChildren } from "react";
-export interface RotateProps {
-    /** Rotated to `deg` when true, back to 0 when false. */
-    isRotated: boolean;
-    /** Angle in degrees at the rotated end. @default 180 */
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface RotateProps extends AriaAttributes {
+    /** The glyph to turn, usually an `Icon`. Phrasing content only (it renders inside a `<span>`). */
+    children?: ReactNode;
+    /**
+     * Turned to `deg` when `true`, back to 0° when `false`. Changing it animates the turn.
+     * @default false
+     */
+    isRotated?: boolean;
+    /**
+     * The angle at the rotated end, in degrees. Negative turns counter-clockwise. Use `90` for a
+     * right-pointing disclosure caret and `180` for a down-pointing select caret.
+     * @default 180
+     */
     deg?: number;
-    /** Transition duration in seconds. @default 0.075 */
-    speed?: number;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. Must not set `transform` or `transition`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Tweens children between 0° and `deg` as `isRotated` flips. State-driven, not
- * looping — the usual case is a chevron on an expand/collapse toggle.
- */
-declare const Rotate: ({ children, isRotated, deg, speed }: PropsWithChildren<RotateProps>) => import("react").JSX.Element;
+/** Turns its content to `deg` while `isRotated`; back to 0° otherwise. */
+declare const Rotate: import("react").ForwardRefExoticComponent<RotateProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Rotate;

package/dist/transform/Rotate.js

@@ -1,32 +1,46 @@
 /* empty css                 */
 import { styled } from "@linaria/react";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
 //#region src/transform/Rotate.tsx
-var _exp = () => ({ $speed }) => $speed ?? .075;
-var _exp2 = () => ({ $isRotated, $deg }) => {
-	if ($isRotated) return `${$deg}deg`;
-	return "0deg";
-};
-var RotateWrapper = /*#__PURE__*/ styled("div")({
-	name: "RotateWrapper",
-	class: "r530s5l",
-	propsAsIs: false,
-	vars: {
-		"r530s5l-0": [_exp(), "s"],
-		"r530s5l-1": [_exp2()]
-	}
-});
 /**
-* Tweens children between 0° and `deg` as `isRotated` flips. State-driven, not
-* looping — the usual case is a chevron on an expand/collapse toggle.
+* Turns its content between 0° and `deg` when `isRotated` flips: the state caret on a disclosure,
+* a select or dropdown trigger, a sort arrow. A state transition (a CSS transition over
+* `duration.base`), not a loop (`Spinner` with children) and not an enter/exit (`Fade`, `ScaleFade`).
+*
+* An inline `<span>`, so it sits inside a `<button>`. Decorative: the host owns the state, the
+* trigger and the semantics (`aria-expanded`, `aria-sort`). Snaps under reduced motion.
+*/
+/** The custom property carrying the rotated angle (a continuous value). */
+var ROTATE_DEG_VARIABLE = "--gx-rotate-deg";
+/**
+* Inline, centered, never squeezed. The explicit `rotate(0deg)` gives the transition a matching
+* transform function, so the angle interpolates numerically (360 is a full turn, negative turns
+* counter-clockwise).
 */
-var Rotate = ({ children, isRotated, deg = 180, speed }) => {
-	return /* @__PURE__ */ jsx(RotateWrapper, {
-		$isRotated: isRotated,
-		$deg: deg,
-		$speed: speed,
+var Root = /*#__PURE__*/ styled("span")({
+	name: "Root",
+	class: "gx-Rotate-r530s5l",
+	propsAsIs: false
+});
+/** Rotated: turn to the angle in `--gx-rotate-deg`. */
+var ROTATED_CSS = "gx-Rotate-ROTATED_CSS-r1qjv1rt";
+/** Turns its content to `deg` while `isRotated`; back to 0° otherwise. */
+var Rotate = forwardRef(function Rotate({ children, isRotated = false, deg = 180, id, className, style, ...rest }, ref) {
+	const variables = { [ROTATE_DEG_VARIABLE]: `${deg}deg` };
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className: cx(isRotated && ROTATED_CSS, className),
+		style: {
+			...variables,
+			...style
+		},
 		children
 	});
-};
+});
+Rotate.displayName = "Rotate";
 //#endregion
 export { Rotate as default };

package/dist/transform/ScaleFade.d.ts

@@ -1,13 +1,38 @@
-import type { PropsWithChildren } from "react";
-export interface ScaleFadeProps {
-    /** Seconds to wait before starting. @default 0 */
-    delay?: number;
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface ScaleFadeProps extends AriaAttributes {
+    /** The surface to pop in and out. */
+    children?: ReactNode;
+    /**
+     * Whether the content is shown. Changing it scales and fades the content in or out. Controlled only; the
+     * host owns the state.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Keep the content mounted while closed (transparent, scaled down, `visibility: hidden`) so its
+     * state survives. By default it unmounts after the exit.
+     * @default false
+     */
+    shouldKeepMounted?: boolean;
+    /**
+     * Pop in when the component mounts already open (a toast pushed onto a stack). By default a
+     * ScaleFade that mounts open renders at rest. The server renders it transparent, so don't use it
+     * for server-rendered content that must be readable before JavaScript runs.
+     * @default false
+     */
+    shouldAnimateOnMount?: boolean;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /**
+     * Extra class on the root `<div>`. May set `transform-origin` (the anchor point); must not set
+     * `opacity`, `transform` or `visibility`, which the animation owns.
+     */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Fades children in while scaling from 95% to 100%, over 200ms. The entrance for
- * things that pop: menus, popovers, toasts.
- *
- * The exit half only runs inside a framer-motion `AnimatePresence`.
- */
-declare const ScaleFade: ({ children, delay }: PropsWithChildren<ScaleFadeProps>) => import("react").JSX.Element;
+/** Pops its content in and out (opacity + 95% scale); unmounts it when closed by default. */
+declare const ScaleFade: import("react").ForwardRefExoticComponent<ScaleFadeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ScaleFade;

package/dist/transform/ScaleFade.js

@@ -1,37 +1,95 @@
+import { DURATION } from "../theme/tokens/scales.js";
+import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+/* empty css                    */
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
+import { cx } from "@linaria/core";
+import { AnimatePresence, motion } from "framer-motion";
 //#region src/transform/ScaleFade.tsx
 /**
-* Fades children in while scaling from 95% to 100%, over 200ms. The entrance for
-* things that pop: menus, popovers, toasts.
+* The enter/exit for surfaces that pop: popovers, menus, dialogs and toasts. Given `isOpen`, it
+* fades its content in while scaling it from 95% to 100%, or fades and shrinks it back and then
+* removes it from the DOM, the tab order and the accessibility tree. Fade's API and contract;
+* only the motion differs. Scales from the center; an anchored host sets `transform-origin`
+* through `className` so the surface grows out of its trigger.
 *
-* The exit half only runs inside a framer-motion `AnimatePresence`.
+* Animated with `framer-motion` (Constitution II.7) over `duration.base`, `easeOut` (the 1.x
+* curve); instant under reduced motion. Never animates on the first render unless
+* `shouldAnimateOnMount` is set. ScaleFade does not move focus: overlays trap and restore it
+* through `FocusScope`, which in the default mode restores at the end of the exit.
 */
-var ScaleFade = ({ children, delay = 0 }) => {
-	return /* @__PURE__ */ jsx(motion.div, {
-		initial: {
-			opacity: 0,
-			scale: .95
-		},
-		animate: {
-			opacity: 1,
-			scale: 1
-		},
-		exit: {
-			opacity: 0,
-			scale: .95
-		},
-		transition: {
-			duration: .2,
-			ease: "easeOut",
-			delay
-		},
-		style: {
-			width: "100%",
-			height: "100%"
-		},
+/** The 1.x curve over `duration.base`. */
+var SCALE_FADE_TRANSITION = {
+	duration: Number.parseFloat(DURATION.base) / 1e3,
+	ease: "easeOut"
+};
+/** The closed scale (the 1.x value). */
+var SCALE_FADE_SCALE = .95;
+/** Under reduced motion the state snaps; the `transitionEnd` values still apply. */
+var SCALE_FADE_REDUCED_TRANSITION = { duration: 0 };
+/** Where an enter starts: transparent, scaled down. */
+var SCALE_FADE_START = {
+	opacity: 0,
+	scale: SCALE_FADE_SCALE
+};
+/**
+* Open: opaque at full size (framer writes `transform: none` at scale 1), visible from the first
+* frame, takes pointer input.
+*/
+var SCALE_FADE_OPEN = {
+	opacity: 1,
+	scale: 1,
+	visibility: "visible",
+	pointerEvents: "auto"
+};
+/**
+* Closed: transparent and scaled down, no pointer input from the first frame, hidden
+* (kept-mounted) at the end. `visibility: "visible"` is listed so framer owns the key during the
+* close; with it only in `transitionEnd`, framer sets the value but never renders it at rest.
+*/
+var SCALE_FADE_CLOSED = {
+	opacity: 0,
+	scale: SCALE_FADE_SCALE,
+	visibility: "visible",
+	pointerEvents: "none",
+	transitionEnd: { visibility: "hidden" }
+};
+/**
+* Lets a ScaleFade that is a flex or grid child shrink with its content. `transform-origin` stays
+* at the CSS default (center) so a host class overrides it without a specificity contest.
+*/
+var Root = "gx-ScaleFade-r1iy8djq";
+/** Pops its content in and out (opacity + 95% scale); unmounts it when closed by default. */
+var ScaleFade = forwardRef(function ScaleFade({ children, isOpen = false, shouldKeepMounted = false, shouldAnimateOnMount = false, id, className, style, ...rest }, ref) {
+	const transition = usePrefersReducedMotion() ? SCALE_FADE_REDUCED_TRANSITION : SCALE_FADE_TRANSITION;
+	const styleProps = style === void 0 ? {} : { style };
+	if (shouldKeepMounted) return /* @__PURE__ */ jsx(motion.div, {
+		...rest,
+		ref,
+		id,
+		initial: shouldAnimateOnMount ? SCALE_FADE_START : false,
+		animate: isOpen ? SCALE_FADE_OPEN : SCALE_FADE_CLOSED,
+		transition,
+		className: cx(Root, className),
+		...styleProps,
 		children
 	});
-};
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: shouldAnimateOnMount,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			...rest,
+			ref,
+			id,
+			initial: SCALE_FADE_START,
+			animate: SCALE_FADE_OPEN,
+			exit: SCALE_FADE_CLOSED,
+			transition,
+			className: cx(Root, className),
+			...styleProps,
+			children
+		}, "scale-fade")
+	});
+});
+ScaleFade.displayName = "ScaleFade";
 //#endregion
 export { ScaleFade as default };

package/dist/transform/internal/CollapseMotion.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/** @internal Props of `CollapseMotion`. */
+export interface CollapseMotionProps {
+    /** The content to show and hide. */
+    children?: ReactNode;
+    /** Whether the content is shown. Changing it animates the height. */
+    isOpen: boolean;
+}
+/** @internal Animates its content's height open and closed; unmounts it when closed. */
+export default function CollapseMotion({ children, isOpen }: CollapseMotionProps): import("react").JSX.Element;

package/dist/transform/internal/CollapseMotion.js

@@ -0,0 +1,65 @@
+import { DURATION } from "../../theme/tokens/scales.js";
+import { usePrefersReducedMotion } from "../../hooks/usePrefersReducedMotion.js";
+/* empty css                         */
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/transform/internal/CollapseMotion.tsx
+/**
+* @internal The animated show/hide of a disclosure body, private to the DLS (an `internal/`
+* module: built, never a package export). The collapsible Widget, Tree, SidebarNav groups and
+* JsonViewer open and close through it; apps use `Widget isCollapsible`, or their own animation.
+*
+* Given `isOpen`, it grows its content from zero height to its natural height, or shrinks it back,
+* then unmounts it, so closed content is out of the layout, the tab order and the accessibility
+* tree. Presentational only: the host owns the trigger, the state and the semantic element it puts
+* inside (`role="region"`, `ul role="group"`); padding, borders and semantics go on that child,
+* never on this wrapper (padding on the animated element leaves a strip when closed).
+*
+* Animated with `framer-motion` over `duration.base`, `easeInOut` (the 1.x Accordion curve);
+* instant under reduced motion. Never animates on the first render.
+*/
+/** The 1.x Accordion timing: `duration.base`, ease-in-out. */
+var COLLAPSE_TRANSITION = {
+	duration: Number.parseFloat(DURATION.base) / 1e3,
+	ease: "easeInOut"
+};
+/** Under reduced motion the state snaps. */
+var COLLAPSE_REDUCED_TRANSITION = { duration: 0 };
+/** Where an opening starts: zero height, clipped. */
+var COLLAPSE_START = {
+	height: 0,
+	overflow: "hidden"
+};
+/**
+* Open: grow to the content's height, clipped while moving; unclipped at rest so focus rings and
+* overhangs show in full.
+*/
+var COLLAPSE_OPEN = {
+	height: "auto",
+	overflow: "hidden",
+	transitionEnd: { overflow: "visible" }
+};
+/** Closed: shrink to zero, clipped from the first frame, then unmounted. */
+var COLLAPSE_CLOSED = {
+	height: 0,
+	overflow: "hidden"
+};
+/** Lets the wrapper shrink with its content when it is a flex or grid child. */
+var Root = "gx-CollapseMotion-r1q43jfl";
+/** @internal Animates its content's height open and closed; unmounts it when closed. */
+function CollapseMotion({ children, isOpen }) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
+			initial: COLLAPSE_START,
+			animate: COLLAPSE_OPEN,
+			exit: COLLAPSE_CLOSED,
+			transition: prefersReducedMotion ? COLLAPSE_REDUCED_TRANSITION : COLLAPSE_TRANSITION,
+			className: Root,
+			children
+		}, "collapse")
+	});
+}
+//#endregion
+export { CollapseMotion as default };

package/dist/tree/Tree.d.ts

@@ -0,0 +1,85 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Row rung. Tree rows are dense: 24 and 28px, the same geometry as `JsonViewerSize`. */
+export declare enum TreeSize {
+    /** 24px rows, `body_sm` labels, 12px icons, 10px carets, 14px indent per level. */
+    SMALL = "SMALL",
+    /** 28px rows, `body_md` labels, 14px icons, 12px carets, 16px indent per level. The default. */
+    MEDIUM = "MEDIUM"
+}
+/** One row of the tree, and its children. */
+export interface TreeItem {
+    /** Unique across the whole tree; the value of `value`, `onChange` and `expandedIds`. */
+    id: string;
+    /** Row text. Also the type-ahead key. Plain text: one line, truncated with a tooltip on overflow. */
+    label: string;
+    /** Leading icon, rendered through `Icon` at the rung's icon size. */
+    icon?: PhosphorIcon;
+    /** Non-interactive mark after the label, right-aligned (a count `Chip`, a labeled `Beacon`, a `Kbd`). Never a button or link. */
+    trailing?: ReactNode;
+    /** Child rows. `undefined` on a parent with `hasChildren` means "not loaded yet". */
+    children?: TreeItem[];
+    /**
+     * Marks a parent whose children are not loaded yet (lazy).
+     * @default children !== undefined && children.length > 0
+     */
+    hasChildren?: boolean;
+    /**
+     * Not selectable; shown in the disabled color. It can still be focused and expanded.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+/** Every Tree prop except the accessible-name pair (`ariaLabel` / `aria-labelledby`). */
+interface TreeBaseProps extends AriaAttributes {
+    /** The top-level rows. Each item may hold `children`; `id`s must be unique across the whole tree. */
+    items: TreeItem[];
+    /** Controlled selected item `id`. `null` means nothing is selected. */
+    value?: string | null;
+    /**
+     * Selected item `id` while uncontrolled.
+     * @default null
+     */
+    defaultValue?: string | null;
+    /** Called with the item `id` when the user selects a row (click, Enter or Space). Not called for disabled items. */
+    onChange?: (value: string) => void;
+    /** Controlled list of expanded parent `id`s. */
+    expandedIds?: string[];
+    /**
+     * Expanded parent `id`s while uncontrolled.
+     * @default []
+     */
+    defaultExpandedIds?: string[];
+    /** Called with the full new list whenever a row expands or collapses. Use it to fetch lazy children. */
+    onExpandedIdsChange?: (expandedIds: string[]) => void;
+    /**
+     * Row rung: 24 / 28px tall, with the rung's text, icon, caret and indent (14 / 16px per level).
+     * @default TreeSize.MEDIUM
+     */
+    size?: TreeSize;
+    /** DOM id on the root `role="tree"` element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `role="tree"` element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root. */
+    className?: string;
+    /** Inline style on the root; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Named by `ariaLabel`. */
+interface TreeNamedProps {
+    /** Accessible name of the tree. Required unless `aria-labelledby` names it. */
+    ariaLabel: string;
+}
+/** Named by a visible heading through `aria-labelledby`. */
+interface TreeLabelledByProps {
+    /** Accessible name of the tree. Required unless `aria-labelledby` names it. */
+    ariaLabel?: undefined;
+    /** Id of the element that names the tree (a visible heading). */
+    "aria-labelledby": string;
+}
+/** Tree props. The tree needs a name: `ariaLabel`, or `aria-labelledby` pointing at a heading. */
+export type TreeProps = TreeBaseProps & (TreeNamedProps | TreeLabelledByProps);
+/** Hierarchical rows with expand / collapse, single selection, lazy children and tree keyboard. */
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tree;