@capra/core 1.8.2 → 1.9.0

package/dist/index.cjs

@@ -252,7 +252,7 @@ const VisuallyHidden = ({ children, ...props }) => {
 //#endregion
 //#region src/components/input-helpers/Label.tsx
 /** Label text and optional required indicator for form fields, aligned with Capra field layouts. */
-const Label$1 = react.forwardRef((props, ref) => {
+const Label = react.forwardRef((props, ref) => {
 	const [mergedProps, mergedRef] = (0, react_aria_components.useContextProps)(props, ref, react_aria_components.LabelContext);
 	const { trailingSlot, children, required, FORCE__className: classNameOverride, style, ...labelProps } = mergedProps;
 	if (!children) return null;
@@ -265,7 +265,7 @@ const Label$1 = react.forwardRef((props, ref) => {
 		"aria-hidden": true
 	}, "*"), /* @__PURE__ */ react.createElement(VisuallyHidden, null, "This field is required"))), trailingSlot && /* @__PURE__ */ react.createElement("span", { className: Label_module_default.trailingSlot }, trailingSlot));
 });
-Label$1.displayName = "Label";
+Label.displayName = "Label";
 //#endregion
 //#region src/components/TextInput/TextInput.module.css
 var TextInput_module_default = {
@@ -395,7 +395,7 @@ function AutocompleteFieldWithoutRef(props, ref) {
 		id,
 		shouldFocusWrap: true,
 		ref: comboboxRef
-	}, /* @__PURE__ */ react.default.createElement(Label$1, null, label), /* @__PURE__ */ react.default.createElement(TextInput, {
+	}, /* @__PURE__ */ react.default.createElement(Label, null, label), /* @__PURE__ */ react.default.createElement(TextInput, {
 		...inputProps,
 		ref,
 		trailingSlot: trailingContent
@@ -609,27 +609,32 @@ function BadgeLayout({ children }) {
 //#endregion
 //#region src/components/ListItem/ListItem.module.css
 var ListItem_module_default = {
-	"content": "capra-ListItem-module-VUh15W-content",
-	"description": "capra-ListItem-module-VUh15W-description",
-	"label": "capra-ListItem-module-VUh15W-label",
-	"leading": "capra-ListItem-module-VUh15W-leading",
-	"listItem": "capra-ListItem-module-VUh15W-listItem",
-	"slot": "capra-ListItem-module-VUh15W-slot",
-	"slots": "capra-ListItem-module-VUh15W-slots",
-	"suffix": "capra-ListItem-module-VUh15W-suffix",
-	"trailing": "capra-ListItem-module-VUh15W-trailing"
+	"__listItem-layout": "capra-ListItem-module-QN6vFW-__listItem-layout",
+	"content": "capra-ListItem-module-QN6vFW-content",
+	"description": "capra-ListItem-module-QN6vFW-description",
+	"label": "capra-ListItem-module-QN6vFW-label",
+	"leading": "capra-ListItem-module-QN6vFW-leading",
+	"listItem": "capra-ListItem-module-QN6vFW-listItem capra-ListItem-module-QN6vFW-__listItem-layout",
+	"slot": "capra-ListItem-module-QN6vFW-slot",
+	"slots": "capra-ListItem-module-QN6vFW-slots",
+	"suffix": "capra-ListItem-module-QN6vFW-suffix",
+	"trailing": "capra-ListItem-module-QN6vFW-trailing"
 };
 //#endregion
 //#region src/components/ListItem/ListItemSlots.tsx
+const CollapsedSlot = "__CollapsedSlot__";
 const ListItemSlots = ({ children, trailing = false, FORCE__className }) => {
 	if (react.default.Children.count(children) === 0) return null;
 	return /* @__PURE__ */ react.default.createElement("div", {
 		className: clsx(ListItem_module_default.slots, FORCE__className),
 		"data-trailing": trailing || void 0
-	}, react.default.Children.map(children, (child, index) => /* @__PURE__ */ react.default.createElement("div", {
-		key: index,
-		className: ListItem_module_default.slot
-	}, child)));
+	}, react.default.Children.map(children, (child, index) => {
+		if (child === "__CollapsedSlot__") return void 0;
+		return /* @__PURE__ */ react.default.createElement("div", {
+			key: index,
+			className: ListItem_module_default.slot
+		}, child);
+	}));
 };
 //#endregion
 //#region src/components/ListItem/ListItem.tsx
@@ -652,7 +657,7 @@ const Trailing = ({ children, FORCE__className }) => {
 const Content = ({ children, FORCE__className }) => {
 	return /* @__PURE__ */ react.createElement("div", { className: clsx(ListItem_module_default.content, FORCE__className) }, children);
 };
-const Label = ({ children, id }) => {
+const Label$1 = ({ children, id }) => {
 	return /* @__PURE__ */ react.createElement("div", {
 		id,
 		className: ListItem_module_default.label
@@ -671,7 +676,7 @@ const Spacer = () => {
 	});
 };
 ListItem.Content = Content;
-ListItem.Label = Label;
+ListItem.Label = Label$1;
 ListItem.Description = Description;
 ListItem.Suffix = Suffix;
 ListItem.Spacer = Spacer;
@@ -1112,7 +1117,7 @@ const TextField = react.forwardRef((props, ref) => {
 		className: fieldLayout_module_default.field,
 		"data-capra-field-root": "",
 		"data-layout": layout
-	}, /* @__PURE__ */ react.createElement(Label$1, { required }, label), /* @__PURE__ */ react.createElement(TextInput, {
+	}, /* @__PURE__ */ react.createElement(Label, { required }, label), /* @__PURE__ */ react.createElement(TextInput, {
 		ref,
 		...inputRest,
 		appearance,
@@ -1216,7 +1221,7 @@ const NumberField = react.forwardRef((props, ref) => {
 		className: fieldLayout_module_default.field,
 		"data-capra-field-root": "",
 		"data-layout": layout
-	}, /* @__PURE__ */ react.createElement(Label$1, { required }, label), /* @__PURE__ */ react.createElement(react_aria_components.Group, {
+	}, /* @__PURE__ */ react.createElement(Label, { required }, label), /* @__PURE__ */ react.createElement(react_aria_components.Group, {
 		"data-capra-text-input": "",
 		"data-size": size,
 		className: clsx(TextInput_module_default.wrapper, NumberField_module_default.withStepper, classNameOverride)
@@ -2232,7 +2237,7 @@ function DatePickerFieldInner(props, ref) {
 		isInvalid,
 		shouldForceLeadingZeros: true,
 		validationBehavior: "aria"
-	}, /* @__PURE__ */ react.createElement(Label$1, { required }, label), /* @__PURE__ */ react.createElement(DatePickerFieldRow, {
+	}, /* @__PURE__ */ react.createElement(Label, { required }, label), /* @__PURE__ */ react.createElement(DatePickerFieldRow, {
 		appearance,
 		size,
 		leadingSlot,
@@ -2474,7 +2479,7 @@ function DateRangePickerFieldInner(props, ref) {
 		isInvalid,
 		shouldForceLeadingZeros: true,
 		validationBehavior: "aria"
-	}, /* @__PURE__ */ react.createElement(Label$1, { required }, label), /* @__PURE__ */ react.createElement(DateRangePickerFieldRow, {
+	}, /* @__PURE__ */ react.createElement(Label, { required }, label), /* @__PURE__ */ react.createElement(DateRangePickerFieldRow, {
 		appearance,
 		size,
 		leadingSlot,
@@ -2703,7 +2708,7 @@ const TextArea = react.forwardRef((props, ref) => {
 		...ariaFieldProps,
 		className: fieldLayout_module_default.field,
 		"data-layout": layout
-	}, /* @__PURE__ */ react.createElement(Label$1, { required }, label), /* @__PURE__ */ react.createElement("div", {
+	}, /* @__PURE__ */ react.createElement(Label, { required }, label), /* @__PURE__ */ react.createElement("div", {
 		className: clsx(TextArea_module_default.wrapper, classNameOverride),
 		"data-has-indicator": hasIndicator,
 		"data-autosize": autoSizeActive,
@@ -4970,6 +4975,240 @@ function ArrowSvg() {
 	}));
 }
 //#endregion
+//#region src/components/Tree/Tree.module.css
+var Tree_module_default = {
+	"chevronButton": "capra-Tree-module--hXpBa-chevronButton",
+	"chevronIcon": "capra-Tree-module--hXpBa-chevronIcon",
+	"indentSpacer": "capra-Tree-module--hXpBa-indentSpacer",
+	"item": "capra-Tree-module--hXpBa-item capra-ListItem-module-QN6vFW-__listItem-layout",
+	"itemContent": "capra-Tree-module--hXpBa-itemContent capra-ListItem-module-QN6vFW-content",
+	"itemLabel": "capra-Tree-module--hXpBa-itemLabel capra-ListItem-module-QN6vFW-label",
+	"itemSuffix": "capra-Tree-module--hXpBa-itemSuffix capra-ListItem-module-QN6vFW-suffix",
+	"label": "capra-Tree-module--hXpBa-label",
+	"root": "capra-Tree-module--hXpBa-root",
+	"selectionCheckbox": "capra-Tree-module--hXpBa-selectionCheckbox",
+	"suffix": "capra-Tree-module--hXpBa-suffix"
+};
+//#endregion
+//#region src/components/Tree/Tree.tsx
+const TreeSelectionContext = react.createContext(null);
+function getTextValue(item) {
+	return typeof item.label === "string" ? item.label : String(item.key);
+}
+function buildTreeIndex(items) {
+	const parentByKey = /* @__PURE__ */ new Map();
+	const descendantsByKey = /* @__PURE__ */ new Map();
+	const selectableDescendantsByKey = /* @__PURE__ */ new Map();
+	const disabledKeys = /* @__PURE__ */ new Set();
+	const selectableKeys = /* @__PURE__ */ new Set();
+	const visit = (item, parent) => {
+		parentByKey.set(item.key, parent);
+		if (item.isDisabled) disabledKeys.add(item.key);
+		else selectableKeys.add(item.key);
+		const descendants = [];
+		const selectableDescendants = [];
+		for (const child of item.children ?? []) {
+			visit(child, item.key);
+			descendants.push(child.key, ...descendantsByKey.get(child.key) ?? []);
+			if (!child.isDisabled) selectableDescendants.push(child.key);
+			for (const descendant of selectableDescendantsByKey.get(child.key) ?? []) selectableDescendants.push(descendant);
+		}
+		descendantsByKey.set(item.key, descendants);
+		selectableDescendantsByKey.set(item.key, selectableDescendants);
+	};
+	for (const item of items) visit(item, null);
+	return {
+		parentByKey,
+		descendantsByKey,
+		selectableDescendantsByKey,
+		disabledKeys,
+		selectableKeys
+	};
+}
+function sanitizeSelection(selection, index) {
+	const next = /* @__PURE__ */ new Set();
+	for (const key of selection) if (index.parentByKey.has(key) && !index.disabledKeys.has(key)) next.add(key);
+	return next;
+}
+function reconcileParentKeys(selection, index) {
+	const next = new Set(selection);
+	for (const [key, selectableDescendants] of index.selectableDescendantsByKey) {
+		if (selectableDescendants.length === 0) continue;
+		if (!selectableDescendants.every((descendantKey) => next.has(descendantKey))) next.delete(key);
+	}
+	return next;
+}
+function selectionToSet(selection, index) {
+	if (selection === "all") return new Set(index.selectableKeys);
+	if (selection == null) return /* @__PURE__ */ new Set();
+	return sanitizeSelection(selection, index);
+}
+function expandKeysWithAncestors(keys, index) {
+	if (keys == null) return;
+	const expanded = /* @__PURE__ */ new Set();
+	for (const key of keys) {
+		if (!index.parentByKey.has(key)) continue;
+		let current = key;
+		while (current != null) {
+			expanded.add(current);
+			current = index.parentByKey.get(current) ?? null;
+		}
+	}
+	return expanded;
+}
+function getCheckboxState(key, selectedKeys, index) {
+	const selectableDescendants = index.selectableDescendantsByKey.get(key) ?? [];
+	if (selectableDescendants.length === 0) return {
+		checked: selectedKeys.has(key),
+		indeterminate: false
+	};
+	const selectedDescendantCount = selectableDescendants.filter((descendantKey) => selectedKeys.has(descendantKey)).length;
+	const allSelectableDescendantsSelected = selectedDescendantCount === selectableDescendants.length;
+	const someSelectableDescendantsSelected = selectedDescendantCount > 0;
+	if (allSelectableDescendantsSelected || selectedKeys.has(key)) return {
+		checked: true,
+		indeterminate: false
+	};
+	return {
+		checked: false,
+		indeterminate: someSelectableDescendantsSelected
+	};
+}
+function applySelectionChange(prev, next, index) {
+	const cascadedSelection = sanitizeSelection(next, index);
+	for (const key of next) {
+		if (prev.has(key) || index.disabledKeys.has(key)) continue;
+		if ((index.descendantsByKey.get(key) ?? []).length === 0) continue;
+		cascadedSelection.add(key);
+		for (const descendantKey of index.selectableDescendantsByKey.get(key) ?? []) cascadedSelection.add(descendantKey);
+	}
+	for (const key of prev) {
+		if (next.has(key) || index.disabledKeys.has(key)) continue;
+		if ((index.descendantsByKey.get(key) ?? []).length === 0) continue;
+		cascadedSelection.delete(key);
+		for (const descendantKey of index.descendantsByKey.get(key) ?? []) cascadedSelection.delete(descendantKey);
+	}
+	return reconcileParentKeys(cascadedSelection, index);
+}
+function TreeSelectionCheckbox({ item }) {
+	const context = react.useContext(TreeSelectionContext);
+	if (context?.selectionMode !== "multiple") return null;
+	const checkboxState = getCheckboxState(item.key, context.selectedKeys, context.index);
+	return /* @__PURE__ */ react.createElement(Checkbox, {
+		"aria-checked": checkboxState.indeterminate ? "mixed" : checkboxState.checked ? "true" : "false",
+		"aria-label": getTextValue(item),
+		checked: checkboxState.checked,
+		disabled: context.index.disabledKeys.has(item.key),
+		indeterminate: checkboxState.indeterminate,
+		FORCE__className: Tree_module_default.selectionCheckbox,
+		onChange: (event) => {
+			event.stopPropagation();
+			context.toggleSelection(item.key);
+		},
+		onClick: (event) => {
+			event.stopPropagation();
+		},
+		onMouseDown: (event) => {
+			event.stopPropagation();
+		},
+		onKeyDown: (event) => {
+			event.stopPropagation();
+		},
+		onPointerDown: (event) => {
+			event.stopPropagation();
+		}
+	});
+}
+function renderTreeItem(item) {
+	return /* @__PURE__ */ react.createElement(react_aria_components.TreeItem, {
+		id: item.key,
+		key: item.key,
+		className: Tree_module_default.item,
+		isDisabled: item.isDisabled,
+		textValue: getTextValue(item)
+	}, /* @__PURE__ */ react.createElement(react_aria_components.TreeItemContent, null, ({ hasChildItems, id, level, selectionMode }) => /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(ListItem.Leading, null, Array.from({ length: Math.max(level - 1, 0) }).map((_, index) => /* @__PURE__ */ react.createElement("span", {
+		key: `${String(item.key)}-indent-${index}`,
+		"aria-hidden": "true",
+		className: Tree_module_default.indentSpacer
+	})), hasChildItems ? /* @__PURE__ */ react.createElement(react_aria_components.Button, {
+		slot: "chevron",
+		className: Tree_module_default.chevronButton
+	}, /* @__PURE__ */ react.createElement("span", {
+		"aria-hidden": "true",
+		className: Tree_module_default.chevronIcon
+	}, /* @__PURE__ */ react.createElement(_capra_icons.CaretRight, { size: "xs" }))) : /* @__PURE__ */ react.createElement("div", null), selectionMode === "multiple" ? /* @__PURE__ */ react.createElement(TreeSelectionCheckbox, { item }) : CollapsedSlot), /* @__PURE__ */ react.createElement("div", { className: Tree_module_default.itemContent }, /* @__PURE__ */ react.createElement("div", {
+		id: String(id),
+		className: Tree_module_default.itemLabel
+	}, item.label)), /* @__PURE__ */ react.createElement(ListItem.Trailing, null, item.suffix ? /* @__PURE__ */ react.createElement("div", { className: Tree_module_default.itemSuffix }, item.suffix) : CollapsedSlot, item.trailingSlot || "__CollapsedSlot__"))), /* @__PURE__ */ react.createElement(react_aria_components.Collection, { items: item.children }, renderTreeItem));
+}
+/**
+* A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+*/
+function Tree({ FORCE__className: classNameOverride, items, selectionMode = "multiple", defaultSelectedKeys, selectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys, ...props }) {
+	const index = react.useMemo(() => buildTreeIndex(items), [items]);
+	const resolvedExpandedKeys = react.useMemo(() => expandKeysWithAncestors(expandedKeys, index), [expandedKeys, index]);
+	const resolvedDefaultExpandedKeys = react.useMemo(() => expandKeysWithAncestors(defaultExpandedKeys, index), [defaultExpandedKeys, index]);
+	const [internalSelectedKeys, setInternalSelectedKeys] = react.useState(() => applySelectionChange(/* @__PURE__ */ new Set(), selectionToSet(selectedKeys ?? defaultSelectedKeys, index), index));
+	react.useEffect(() => {
+		const nextSelectedKeys = selectedKeys != null ? applySelectionChange(/* @__PURE__ */ new Set(), selectionToSet(selectedKeys, index), index) : reconcileParentKeys(sanitizeSelection(internalSelectedKeys, index), index);
+		if (nextSelectedKeys.size !== internalSelectedKeys.size || Array.from(nextSelectedKeys).some((key) => !internalSelectedKeys.has(key))) setInternalSelectedKeys(nextSelectedKeys);
+	}, [
+		index,
+		internalSelectedKeys,
+		selectedKeys
+	]);
+	const selectedKeysRef = react.useRef(internalSelectedKeys);
+	selectedKeysRef.current = internalSelectedKeys;
+	const commitSelection = react.useCallback((nextSelectedKeys) => {
+		setInternalSelectedKeys(nextSelectedKeys);
+		onSelectionChange?.(new Set(nextSelectedKeys));
+	}, [onSelectionChange]);
+	const toggleSelection = react.useCallback((key) => {
+		if (selectionMode !== "multiple" || index.disabledKeys.has(key)) return;
+		const nextSelectedKeys = new Set(selectedKeysRef.current);
+		if (nextSelectedKeys.has(key)) nextSelectedKeys.delete(key);
+		else nextSelectedKeys.add(key);
+		commitSelection(applySelectionChange(selectedKeysRef.current, nextSelectedKeys, index));
+	}, [
+		commitSelection,
+		index,
+		selectionMode
+	]);
+	const handleSelectionChange = react.useCallback((nextSelection) => {
+		if (selectionMode !== "multiple") {
+			commitSelection(selectionToSet(nextSelection, index));
+			return;
+		}
+		commitSelection(applySelectionChange(selectedKeysRef.current, selectionToSet(nextSelection, index), index));
+	}, [
+		commitSelection,
+		index,
+		selectionMode
+	]);
+	const selectionContext = react.useMemo(() => ({
+		index,
+		selectedKeys: internalSelectedKeys,
+		selectionMode,
+		toggleSelection
+	}), [
+		index,
+		internalSelectedKeys,
+		selectionMode,
+		toggleSelection
+	]);
+	return /* @__PURE__ */ react.createElement(TreeSelectionContext.Provider, { value: selectionContext }, /* @__PURE__ */ react.createElement(react_aria_components.Tree, {
+		...props,
+		selectionBehavior: "toggle",
+		className: clsx(Tree_module_default.root, classNameOverride),
+		items,
+		selectedKeys: internalSelectedKeys,
+		selectionMode,
+		onSelectionChange: handleSelectionChange,
+		expandedKeys: resolvedExpandedKeys,
+		defaultExpandedKeys: resolvedDefaultExpandedKeys
+	}, /* @__PURE__ */ react.createElement(react_aria_components.Collection, { items }, renderTreeItem)));
+}
+//#endregion
 exports.Alert = Alert;
 exports.Anchor = Anchor;
 exports.AutocompleteField = AutocompleteField;
@@ -4990,6 +5229,7 @@ exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;
 exports.IconButton = IconButton;
 exports.InputRow = InputRow;
+exports.Label = Label;
 exports.Link = Link;
 exports.ListItem = ListItem;
 exports.Menu = Menu;
@@ -5023,6 +5263,7 @@ exports.TextField = TextField;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip;
 exports.TopNav = TopNav;
+exports.Tree = Tree;
 exports.VerticalNavigation = VerticalNavigation;
 exports.VisuallyHidden = VisuallyHidden;
 exports.submenuPanelClassName = submenuPanelClassName;

package/dist/index.d.cts

@@ -1,10 +1,14 @@
 import * as React$2 from "react";
 import React$1, { HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy } from "react";
-import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
+import { BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ButtonProps as ButtonProps$1, ComboBoxRenderProps, DatePickerProps, DateRangePickerProps, DateValue, DisclosureProps, Focusable, Key, LinkProps as LinkProps$1, ListBoxItemProps, PopoverProps as PopoverProps$1, PressEvent, RouterProvider } from "react-aria-components";
 import { SvgIcon } from "@capra/icons";
 import { SvgLogo } from "@capra/icons/logos";
 //#region src/utils/stylingOverride.d.ts
 interface StylingOverrideProps {
+  /** Use `FORCE__className` instead. */
+  className?: never;
+  /** Inline styles are not supported; use component props or `FORCE__className`. */
+  style?: never;
   /**
    * 🚨 This prop is meant to be an escape hatch. 🚨
    *
@@ -208,7 +212,7 @@ type TextProps<As extends React$2.ElementType> = {
    * The underlying element rendered by the component. Defaults to `span`.
    */
   as?: As;
-} & StylingOverrideProps & Omit<React$2.ComponentPropsWithoutRef<As>, 'className'>;
+} & StylingOverrideProps & React$2.ComponentPropsWithoutRef<As>;
 /**
  * Component for displaying text. The visual display can be controlled via
  * `variant`. The underlying HTML element can be controlled via the `as` prop,
@@ -228,7 +232,7 @@ declare const Text: <As extends React$2.ElementType = "span">(props: {
    * The underlying element rendered by the component. Defaults to `span`.
    */
   as?: As | undefined;
-} & StylingOverrideProps & Omit<React$2.PropsWithoutRef<React$2.ComponentProps<As>>, "className"> & React$2.RefAttributes<unknown>) => React$2.ReactElement;
+} & StylingOverrideProps & React$2.PropsWithoutRef<React$2.ComponentProps<As>> & React$2.RefAttributes<unknown>) => React$2.ReactElement;
 //#endregion
 //#region src/components/Card/Card.d.ts
 /**
@@ -345,7 +349,7 @@ type ListItemProps<As extends React$2.ElementType> = {
 declare function ListItem<As extends React$2.ElementType = 'li'>({ as: asComponent, children, FORCE__className: classNameOverride, ...props }: ListItemProps<As>): React$2.JSX.Element;
 declare namespace ListItem {
   export { Content };
-  export { Label };
+  export { Label$1 as Label };
   export { Description };
   export { Suffix };
   export { Spacer };
@@ -358,7 +362,7 @@ declare const Content: ({ children, FORCE__className }: React$2.PropsWithChildre
 type ListItemLabelProps = React$2.PropsWithChildren & {
   id?: string;
 };
-declare const Label: ({ children, id }: ListItemLabelProps) => React$2.JSX.Element;
+declare const Label$1: ({ children, id }: ListItemLabelProps) => React$2.JSX.Element;
 declare const Suffix: ({ children }: React$2.PropsWithChildren) => React$2.JSX.Element;
 declare const Description: ({ children }: React$2.PropsWithChildren) => React$2.JSX.Element;
 declare const Spacer: () => React$2.JSX.Element;
@@ -450,11 +454,11 @@ type ChildrenLabel = {
 /**
  * Require either 'aria-label', 'aria-labelledby', or 'children' for accessibility
  */
-type LabelProps = AccessibleLabelProps | ChildrenLabel;
+type LabelProps$1 = AccessibleLabelProps | ChildrenLabel;
 type RadioProps = {
   /** The value of the radio button. */
   value: string | null;
-} & Partial<RadioGroupContextValue> & LabelProps & StylingOverrideProps & Omit<React$2.ComponentPropsWithoutRef<'input'>, 'className' | 'type'>;
+} & Partial<RadioGroupContextValue> & LabelProps$1 & StylingOverrideProps & Omit<React$2.ComponentPropsWithoutRef<'input'>, 'className' | 'type'>;
 /**
  * A presentational radio button component. You will typically use this component within a RadioGroup component.
  */
@@ -1324,7 +1328,7 @@ declare const Link: <As extends React$2.ElementType = "a">(props: {
 } & RoutedLinkProps & StylingOverrideProps & Omit<React$2.PropsWithoutRef<React$2.ComponentProps<As>>, "className"> & React$2.RefAttributes<unknown>) => React$2.ReactElement;
 //#endregion
 //#region src/components/VerticalNavigation/VerticalNavigation.d.ts
-interface VerticalNavigationProps extends React$2.HTMLAttributes<HTMLElement>, StylingOverrideProps {
+type VerticalNavigationProps = React$2.HTMLAttributes<HTMLElement> & StylingOverrideProps & {
   /**
    * Controlled collapsed state.
    */
@@ -1338,7 +1342,7 @@ interface VerticalNavigationProps extends React$2.HTMLAttributes<HTMLElement>, S
    * @default false
    */
   defaultCollapsed?: boolean;
-}
+};
 type VerticalNavigationItemBaseProps<As extends React$2.ElementType> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'href' | 'isActive' | 'isDisabled' | 'rightElement' | 'label'> & StylingOverrideProps & {
   /**
    * The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop.
@@ -1391,19 +1395,19 @@ type VerticalNavigationItemProps<As extends React$2.ElementType> = VerticalNavig
  * Supports icons, active state, and 'subItem' variant for indentation.
  */
 declare const Item: <As extends React$2.ElementType>({ as, icon, label, isActive, href, FORCE__className, isDisabled, onClick, variant, rightElement, ...props }: VerticalNavigationItemProps<As>) => React$2.JSX.Element;
-interface VerticalNavigationCollapseProps extends React$2.ButtonHTMLAttributes<HTMLButtonElement>, StylingOverrideProps {}
+type VerticalNavigationCollapseProps = React$2.ButtonHTMLAttributes<HTMLButtonElement> & StylingOverrideProps;
 /**
  * A toggle button to collapse/expand the navigation.
  * Should be placed within VerticalNavigation to control its state.
  */
 declare const Collapse$1: ({ FORCE__className, onClick, ...props }: VerticalNavigationCollapseProps) => React$2.JSX.Element;
-interface VerticalNavigationItemListProps extends React$2.HTMLAttributes<HTMLUListElement>, StylingOverrideProps {}
+type VerticalNavigationItemListProps = React$2.HTMLAttributes<HTMLUListElement> & StylingOverrideProps;
 /**
  * Container for the primary list of navigation items.
  * Renders an unordered list with consistent spacing and layout.
  */
 declare const ItemList: ({ children, FORCE__className, ...props }: VerticalNavigationItemListProps) => React$2.JSX.Element;
-interface VerticalNavigationFooterProps extends React$2.HTMLAttributes<HTMLUListElement>, StylingOverrideProps {}
+type VerticalNavigationFooterProps = React$2.HTMLAttributes<HTMLUListElement> & StylingOverrideProps;
 /**
  * Secondary container for footer navigation actions such as settings or help.
  */
@@ -1588,7 +1592,7 @@ type SkeletonProps = {
    * (`title={false}` and `paragraph={false}`) children render inside the placeholder while loading.
    */
   children?: React$2.ReactNode;
-} & StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLSpanElement>, 'children' | 'title' | 'paragraph'>;
+} & Omit<StylingOverrideProps, 'style'> & Omit<React$2.HTMLAttributes<HTMLSpanElement>, 'children' | 'title' | 'paragraph' | 'className'>;
 declare function Skeleton(props: SkeletonProps): React$2.JSX.Element | null;
 declare namespace Skeleton {
   var displayName: string;
@@ -1610,7 +1614,7 @@ type SkeletonElementProps = {
   size?: SkeletonSize;
   /** Show animation effect. @default false */
   active?: boolean;
-} & StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLSpanElement>, 'children'>;
+} & Omit<StylingOverrideProps, 'style'> & Omit<React$2.HTMLAttributes<HTMLSpanElement>, 'children' | 'className' | 'style'>;
 type SkeletonGroupButtonProps = SkeletonElementProps & {
   block?: boolean;
   shape?: 'circle' | 'round' | 'square' | 'default';
@@ -1810,12 +1814,12 @@ type MenuSectionProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLD
    */
   children?: React$2.ReactNode;
 };
-interface MenuListProps extends StylingOverrideProps, React$2.HTMLAttributes<HTMLDivElement> {
+type MenuListProps = StylingOverrideProps & React$2.HTMLAttributes<HTMLDivElement> & {
   /**
    * Menu content. Use Menu.Item, Menu.Section, Menu.Header, Menu.Divider.
    */
   children?: React$2.ReactNode;
-}
+};
 interface MenuSubmenuProps extends StylingOverrideProps {
   /**
    * Label for the parent row (trailing chevron indicates a nested panel).
@@ -2133,4 +2137,102 @@ type CustomTooltipTriggerProps = {
  */
 declare const CustomTooltipTrigger: React$2.ForwardRefExoticComponent<CustomTooltipTriggerProps & React$2.RefAttributes<HTMLElement>>;
 //#endregion
-export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };
+//#region src/components/Tree/Tree.d.ts
+interface TreeItemType {
+  /**
+   * The unique key of the tree item.
+   */
+  key: Key;
+  /**
+   * The label of the tree item.
+   */
+  label: React$2.ReactNode;
+  /**
+   * The children of the tree item.
+   */
+  children?: TreeItemType[];
+  /**
+   * Whether the tree item is disabled.
+   */
+  isDisabled?: boolean;
+  /**
+   * The suffix of the tree item.
+   */
+  suffix?: React$2.ReactNode;
+  /**
+   * The trailing slot of the tree item.
+   */
+  trailingSlot?: React$2.ReactNode;
+}
+type TreeProps = StylingOverrideProps & {
+  /**
+   * Defines a string value that labels the current element.
+   */
+  'aria-label'?: string;
+  /**
+   * Identifies the element (or elements) that labels the current element.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Items to render in the tree.
+   */
+  items: TreeItemType[];
+  /**
+   * Handler that is called when a user performs an action on an item.
+   */
+  onAction?: (key: Key) => void;
+  /**
+   * The initial expanded keys when in uncontrolled mode.
+   */
+  defaultExpandedKeys?: Iterable<Key>;
+  /**
+   * The initial selected keys when in uncontrolled mode.
+   */
+  defaultSelectedKeys?: Iterable<Key>;
+  /**
+   * The currently expanded keys when in controlled mode.
+   */
+  expandedKeys?: Iterable<Key>;
+  /**
+   * Handler that is called when the expanded keys change.
+   */
+  onExpandedChange?: (keys: Set<Key>) => void;
+  /**
+   * Callback that is fired when the selection changes.
+   */
+  onSelectionChange?: (keys: Set<Key>) => void;
+  /**
+   * The currently selected keys when in controlled mode.
+   */
+  selectedKeys?: Iterable<Key>;
+  /**
+   * The selection mode of the tree.
+   * @default 'multiple'
+   */
+  selectionMode?: 'none' | 'multiple';
+};
+/**
+ * A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+ */
+declare function Tree({ FORCE__className: classNameOverride, items, selectionMode, defaultSelectedKeys, selectedKeys, onSelectionChange, expandedKeys, defaultExpandedKeys, ...props }: TreeProps): React$2.JSX.Element;
+//#endregion
+//#region src/components/input-helpers/Label.d.ts
+type LabelProps = {
+  /** Text to display in the label. */
+  children?: string;
+  /** Whether the field the label is labeling is required (shows asterisk after label). */
+  required?: boolean;
+  /** Content after the label text. */
+  trailingSlot?: React$2.ReactNode;
+} & StylingOverrideProps & Omit<React$2.ComponentPropsWithoutRef<'label'>, 'className' | 'style'>;
+/** Label text and optional required indicator for form fields, aligned with Capra field layouts. */
+declare const Label: React$2.ForwardRefExoticComponent<{
+  /** Text to display in the label. */
+  children?: string;
+  /** Whether the field the label is labeling is required (shows asterisk after label). */
+  required?: boolean;
+  /** Content after the label text. */
+  trailingSlot?: React$2.ReactNode;
+} & StylingOverrideProps & Omit<Omit<React$2.DetailedHTMLProps<React$2.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "className" | "style"> & React$2.RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { Alert, type AlertProps, Anchor, type AnchorProps, AutocompleteField, type AutocompleteFieldProps, Badge, BadgeLayout, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, Checkbox, type CheckboxProps, Collapse, type CollapseProps, CustomTooltipTrigger, type CustomTooltipTriggerProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldPlaceholder, type DateRangePickerFieldProps, Divider, type DividerProps, type DividerType, Drawer, type DrawerPlacement, type DrawerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, InputRow, type InputRowAddonProps, type InputRowProps, Label, type LabelProps, Link, type LinkProps, ListItem, type ListItemProps, Menu, type MenuDividerProps, type MenuHeaderProps, type MenuItemProps, type MenuListProps, type MenuPanelPadding, type MenuProps, type MenuSectionProps, type MenuSubmenuProps, Modal, type ModalProps, NumberField, type NumberFieldProps, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, Pill, type PillProps, Popover, type PopoverProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioTile, type RadioTileProps, Ribbon, type RibbonProps, type RoutedLinkProps, RouterProvider, SKELETON_SIZE, SKELETON_SIZE_TOKENS, Skeleton, type SkeletonElementProps, SkeletonGroup, type SkeletonGroupButtonProps, type SkeletonGroupInputProps, type SkeletonGroupNodeProps, type SkeletonParagraphProps, type SkeletonProps, type SkeletonSize, type SkeletonTitleProps, Spinner, type SpinnerProps, type StylingOverrideProps, Switch, type SwitchProps, TabNav, type TabNavItemType, type TabNavItemVariant, type TabNavPlacement, type TabNavProps, type TabNavSubItemType, Tag, type TagColor, type TagProps, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, TextField, type TextFieldProps, type TextProps, Toast, type ToastOptions, type ToastPosition, type ToastType, Tooltip, type TooltipProps, TopNav, type TopNavCenterProps, type TopNavEndProps, type TopNavProps, type TopNavStartProps, Tree, type TreeItemType, type TreeProps, VerticalNavigation, type VerticalNavigationCollapseProps, type VerticalNavigationFooterProps, type VerticalNavigationItemListProps, type VerticalNavigationItemProps, type VerticalNavigationProps, VisuallyHidden, type VisuallyHiddenProps, submenuPanelClassName, tagColors };