@mortenbrudvik/waveui 0.4.0 → 0.8.0

package/dist/components/layout/TabList.mjs

@@ -0,0 +1,239 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { flattenChildren as t, getElementType as n } from "../../lib/children.mjs";
+import { reportMissingContext as r, resolveDeprecatedProp as i, warnDeprecated as a, warnOnce as o } from "../../lib/dev.mjs";
+import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
+import { tabListClassNames as c, tabListPanelClassNames as l, tabListPanelsClassNames as u, tabListTabClassNames as d } from "../../lib/classNames.mjs";
+import { useEventCallback as f } from "../../hooks/useEventCallback.mjs";
+import { useControllable as p } from "../../hooks/useControllable.mjs";
+import { useId as m } from "../../hooks/useId.mjs";
+import { useRovingTabIndex as h } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as g } from "../../hooks/useMergedRefs.mjs";
+import { disabledStyles as _, focusRing as v, focusRingInset as y } from "../../lib/styles.mjs";
+import { getPartId as b } from "./disclosureIds.mjs";
+import * as x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+//#region src/components/layout/TabList.tsx
+function w(e) {
+	o(`TabList:duplicate:${e}`, `TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`);
+}
+function T() {
+	let e = {
+		tab: /* @__PURE__ */ new Map(),
+		panel: /* @__PURE__ */ new Map()
+	}, t = /* @__PURE__ */ new Set(), n = !1, r = () => {
+		t.forEach((e) => e());
+	};
+	return {
+		register(t, n, i) {
+			let a = e[t], o = a.get(n) ?? [];
+			return t === "tab" && o.length > 0 && w(n), a.set(n, [...o, i]), r(), () => {
+				let e = [...a.get(n) ?? []], t = e.indexOf(i);
+				t !== -1 && e.splice(t, 1), e.length > 0 ? a.set(n, e) : a.delete(n), r();
+			};
+		},
+		get: (t, r) => n ? e[t].get(r)?.[0] ?? null : void 0,
+		markReady() {
+			n || (n = !0, r());
+		},
+		subscribe(e) {
+			return t.add(e), () => {
+				t.delete(e);
+			};
+		}
+	};
+}
+var E = {
+	register: () => () => {},
+	get: () => void 0,
+	markReady: () => {},
+	subscribe: () => () => {}
+}, D = x.createContext(null), O = {
+	orientation: "horizontal",
+	isSelected: () => !1,
+	select: () => {},
+	getTabIndex: () => -1,
+	getGeneratedId: (e, t) => `wave-tablist-inert-${e}-${t}`,
+	getStaticTabId: (e) => `wave-tablist-inert-tab-${e}`,
+	getStaticPanelId: () => void 0,
+	registry: E
+};
+function k(e) {
+	return x.useContext(D) || (r(e, "<TabList>"), O);
+}
+function A(e) {
+	let t = e["aria-disabled"];
+	return e.disabled === !0 || t === !0 || t === "true";
+}
+function j(e) {
+	return typeof e == "string" && e !== "" ? e : null;
+}
+function M(e, t) {
+	if (Array.isArray(e)) return e.forEach((e) => M(e, t)), t;
+	if (!x.isValidElement(e)) return t;
+	let { props: r } = e, i = n(e, { suspend: !1 }), a = typeof r.value == "string" ? r.value : void 0;
+	if (i === R) {
+		if (a !== void 0) {
+			t.firstEnabled === void 0 && !A(r) && (t.firstEnabled = a);
+			let e = j(r.id);
+			e !== null && t.tabIds.push([a, e]);
+		}
+		return t;
+	}
+	return i === z ? (a !== void 0 && t.panels.push([a, j(r.id)]), t) : i === L ? t : M(r.children, t);
+}
+function N(e, t) {
+	if (Array.isArray(e)) return e.some((e) => N(e, t));
+	if (!x.isValidElement(e)) return !1;
+	let r = n(e, { suspend: !1 });
+	return r === R ? t === "tab" : r === z || r === B ? t === "panel" : r !== L && N(e.props.children, t);
+}
+function P(e) {
+	return N(e, "panel") && !N(e, "tab");
+}
+var F = x.createContext(null), I = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", L = ({ value: n, defaultValue: r, onValueChange: o, orientation: l, selectTabOnFocus: u = !0, selectedValue: d, defaultSelectedValue: _, onTabSelect: v, vertical: y, className: w, children: E, onKeyDown: O, onFocus: k, ref: A, ...j }) => {
+	let N = i("TabList", n, d, "selectedValue", "value"), I = i("TabList", r, _, "defaultSelectedValue", "defaultValue"), L = i("TabList", l, y === void 0 ? void 0 : y ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
+	v && a("TabList", "onTabSelect", "onValueChange", "`onValueChange` is called only when the selected tab changes.");
+	let [R, z, B] = p(N, I ?? "", o), V = JSON.stringify(M(E, {
+		tabIds: [],
+		panels: []
+	})), H = x.useMemo(() => {
+		let e = JSON.parse(V);
+		return {
+			firstEnabled: e.firstEnabled,
+			tabIds: new Map(e.tabIds),
+			panels: new Map(e.panels)
+		};
+	}, [V]), U = !B && R === "", { containerProps: W, getTabIndex: G } = h({
+		activeValue: U ? H.firstEnabled ?? null : R,
+		orientation: L,
+		loop: !0,
+		onFocusMove: u ? (e) => q(e) : void 0
+	}), K = x.useCallback((e) => U ? G(e) === 0 : R === e, [
+		U,
+		G,
+		R
+	]), q = f((e) => {
+		v?.(e), K(e) || z(e);
+	}), J = m("tablist"), [Y] = x.useState(T);
+	x.useLayoutEffect(() => Y.markReady(), [Y]);
+	let X = x.useMemo(() => ({
+		orientation: L,
+		isSelected: K,
+		select: q,
+		getTabIndex: G,
+		getGeneratedId: (e, t) => b(J, e, t),
+		getStaticTabId: (e) => H.tabIds.get(e) ?? b(J, "tab", e),
+		getStaticPanelId: (e) => {
+			let t = H.panels.get(e);
+			if (t !== void 0) return t ?? b(J, "panel", e);
+		},
+		registry: Y
+	}), [
+		L,
+		K,
+		q,
+		G,
+		J,
+		H,
+		Y
+	]), ee = g(A, W.ref), Z = [], Q = [];
+	t(E).forEach(({ key: e, node: t }) => {
+		let n = /* @__PURE__ */ S(x.Fragment, { children: t }, e);
+		(P(t) ? Q : Z).push(n);
+	});
+	let $ = L === "vertical";
+	return /* @__PURE__ */ S(D.Provider, {
+		value: X,
+		children: /* @__PURE__ */ C("div", {
+			className: e($ && "flex"),
+			children: [/* @__PURE__ */ S("div", {
+				role: "tablist",
+				"aria-orientation": L,
+				className: e(c.root, $ ? "flex w-40 flex-col border-e border-border" : "flex border-b border-border", w),
+				...j,
+				"data-roving-container": "",
+				onKeyDown: s(O, W.onKeyDown),
+				onFocus: s(k, W.onFocus, { checkDefaultPrevented: !1 }),
+				ref: ee,
+				children: /* @__PURE__ */ S(F.Provider, {
+					value: "tabs",
+					children: Z
+				})
+			}), /* @__PURE__ */ S(F.Provider, {
+				value: "panels",
+				children: Q
+			})]
+		})
+	});
+};
+L.displayName = "TabList";
+var R = ({ value: t, id: n, className: r, children: i, onClick: a, ref: o, ...c }) => {
+	let l = k("TabList.Tab"), u = l.isSelected(t), f = l.orientation === "vertical", p = A(c), { registry: m } = l, h = j(n) ?? l.getGeneratedId("tab", t);
+	x.useLayoutEffect(() => m.register("tab", t, h), [
+		m,
+		t,
+		h
+	]);
+	let g = x.useSyncExternalStore(m.subscribe, () => m.get("panel", t), () => void 0), v = g === void 0 ? l.getStaticPanelId(t) : g ?? void 0;
+	return /* @__PURE__ */ S("button", {
+		type: "button",
+		role: "tab",
+		className: e(d.root, "px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none", f && "text-start", u ? e("text-primary", f ? "border-s-2 border-s-primary" : "border-b-2 border-b-primary") : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground", _, y, r),
+		...c,
+		id: h,
+		"aria-selected": u,
+		"aria-controls": u ? v : void 0,
+		tabIndex: l.getTabIndex(t),
+		"data-roving-value": t,
+		"data-selected": u ? "" : void 0,
+		onClick: s(a, () => {
+			p || l.select(t);
+		}),
+		ref: o,
+		children: i
+	});
+};
+R.displayName = "Tab";
+var z = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
+	let c = k("TabList.Panel"), u = x.useContext(F) === "tabs";
+	x.useEffect(() => {
+		u && o("TabList.Panel:inside-tablist", I);
+	}, [u]);
+	let { registry: d } = c, f = j(n) ?? c.getGeneratedId("panel", t);
+	x.useLayoutEffect(() => d.register("panel", t, f), [
+		d,
+		t,
+		f
+	]);
+	let p = x.useSyncExternalStore(d.subscribe, () => d.get("tab", t), () => void 0);
+	if (!c.isSelected(t)) return null;
+	let m = p === void 0 ? c.getStaticTabId(t) : p ?? void 0;
+	return /* @__PURE__ */ S("div", {
+		role: "tabpanel",
+		tabIndex: 0,
+		className: e(l.root, "p-4", v, i),
+		...s,
+		id: f,
+		"aria-labelledby": m,
+		ref: a,
+		children: r
+	});
+};
+z.displayName = "TabPanel";
+var B = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ S("div", {
+	ref: r,
+	className: e(u.root, "min-w-0 flex-1", t),
+	...i,
+	children: n
+});
+B.displayName = "TabPanels";
+var V = /* @__PURE__ */ Object.assign(L, {
+	Tab: R,
+	Panel: z,
+	Panels: B
+});
+//#endregion
+export { V as TabList, z as TabListPanel, B as TabListPanels, R as TabListTab };
+
+//# sourceMappingURL=TabList.mjs.map

package/dist/components/layout/TabList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.mjs","names":["useId","useId$1","React","warnDuplicateTabValue","value","createRegistry","entries","listeners","ready","emit","listener","map","part","ids","id","index","INERT_REGISTRY","TabListContext","INERT_CONTEXT","useTabListContext","reportMissingContext","component","isUnavailable","ariaDisabled","props","consumerId","collectStructure","node","child","into","type","getElementType","Tab","TabPanel","TabListRoot","containsPart","TabPanels","rendersAfterTablist","TabListAreaContext","PANEL_IN_TABLIST_MESSAGE","valueProp","defaultValueProp","orientationProp","rest","resolveDeprecatedProp","selectedValue","defaultValue","defaultSelectedValue","orientation","vertical","onTabSelect","warnDeprecated","selected","setSelected","isControlled","useControllable","onValueChange","structureKey","children","structure","parsed","derivesSelection","useRovingTabIndex","selectTabOnFocus","select","next","isSelected","getTabIndex","tabValue","useEventCallback","baseId","registry","context","getPartId","itemValue","panel","mergedRef","useMergedRefs","ref","containerProps","tabs","panels","keyed","key","isVertical","cn","tabListClassNames","className","composeEventHandlers","onKeyDown","onFocus","idProp","ctx","unavailable","mountedPanelId","panelId","tabListTabClassNames","disabledStyles","focusRingInset","onClick","insideTablist","warnOnce","mountedTabId","tabId","tabListPanelClassNames","focusRing","tabListPanelsClassNames","TabList"],"sources":["../../../src/components/layout/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  tabListClassNames,\n  tabListPanelClassNames,\n  tabListPanelsClassNames,\n  tabListTabClassNames,\n} from '../../lib/classNames';\nimport { flattenChildren, getElementType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport {\n  reportMissingContext,\n  resolveDeprecatedProp,\n  warnDeprecated,\n  warnOnce,\n} from '../../lib/dev';\nimport { disabledStyles, focusRing, focusRingInset } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { getPartId } from './disclosureIds';\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabListPart = 'tab' | 'panel';\n\n/**\n * The ids of the mounted Tabs and Panels by value. A Tab references a panel only while one with\n * its value is mounted (a TabList used as a filter bar has none), and each side references the\n * other's actual id, a consumer `id` included. Read with `useSyncExternalStore`.\n *\n * Before the TabList has mounted (server HTML, hydration and the first client render) the\n * registry is not ready and the static structure of the children stands in for it; once it is\n * ready, it alone decides, so a Panel that is in the element tree but never mounts (inside a\n * wrapper that renders nothing) is not referenced.\n */\ninterface TabListRegistry {\n  /** Registers a mounted Tab or Panel; returns the unregister function. */\n  register: (part: TabListPart, value: string, id: string) => () => void;\n  /**\n   * Id of the first mounted Tab or Panel with this value, `null` when none is mounted, or\n   * `undefined` while the registry is not ready (use the static structure then).\n   */\n  get: (part: TabListPart, value: string) => string | null | undefined;\n  /** Called by the TabList once it (and so every Tab and Panel mounted with it) has mounted. */\n  markReady: () => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\n/** Tabs that share a value share one id, and are selected and tab stops together. */\nfunction warnDuplicateTabValue(value: string): void {\n  warnOnce(\n    `TabList:duplicate:${value}`,\n    `TabList: several tabs share the value \"${value}\". Tab values must be unique within a ` +\n      'TabList; tabs with the same value share one id and are selected (and tab stops) together.',\n  );\n}\n\nfunction createRegistry(): TabListRegistry {\n  const entries: Record<TabListPart, Map<string, string[]>> = { tab: new Map(), panel: new Map() };\n  const listeners = new Set<() => void>();\n  let ready = false;\n  const emit = () => {\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    register(part, value, id) {\n      const map = entries[part];\n      const ids = map.get(value) ?? [];\n      // Called from the part's layout effect (C-DEV). Two Panels may share a value (the Tab links\n      // to the first mounted one); two Tabs may not.\n      if (part === 'tab' && ids.length > 0) warnDuplicateTabValue(value);\n      map.set(value, [...ids, id]);\n      emit();\n      return () => {\n        const ids = [...(map.get(value) ?? [])];\n        const index = ids.indexOf(id);\n        if (index !== -1) ids.splice(index, 1);\n        if (ids.length > 0) map.set(value, ids);\n        else map.delete(value);\n        emit();\n      };\n    },\n    get: (part, value) => (ready ? (entries[part].get(value)?.[0] ?? null) : undefined),\n    markReady() {\n      if (ready) return;\n      ready = true;\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\nconst INERT_REGISTRY: TabListRegistry = {\n  register: () => () => {},\n  get: () => undefined,\n  markReady: () => {},\n  subscribe: () => () => {},\n};\n\n/**\n * What the TabList's children show before anything mounts (server HTML and the first render):\n * found in the element tree through Fragments and the `children` of wrapper elements, but not\n * inside a component that renders a Tab or Panel itself (the registry covers those once mounted).\n */\ninterface TabListStructure {\n  /** Value of the first Tab without `disabled`/`aria-disabled`: the uncontrolled default. */\n  firstEnabled?: string;\n  /** Consumer `id`s of Tabs, by value. */\n  tabIds: Array<[string, string]>;\n  /** Values of the Panels, each with its consumer `id` or `null`. */\n  panels: Array<[string, string | null]>;\n}\n\ninterface TabListContextValue {\n  orientation: Orientation;\n  /** Whether the tab with this value is the selected one (explicit value, else the tab stop). */\n  isSelected: (value: string) => boolean;\n  /**\n   * Activates a tab: a click (Enter and Space click the tab button), or with automatic activation\n   * focus moved by the keys.\n   */\n  select: (value: string) => void;\n  getTabIndex: (value: string) => 0 | -1;\n  /** The generated id of a Tab or Panel (used when it has no consumer `id`). */\n  getGeneratedId: (part: TabListPart, value: string) => string;\n  /**\n   * Id of the Tab with this value before the TabList mounts: its consumer `id`, else the\n   * generated one.\n   */\n  getStaticTabId: (value: string) => string;\n  /**\n   * Id of the Panel with this value before the TabList mounts, or `undefined` when the children\n   * have none.\n   */\n  getStaticPanelId: (value: string) => string | undefined;\n  registry: TabListRegistry;\n}\n\nconst TabListContext = React.createContext<TabListContextValue | null>(null);\n\nconst INERT_CONTEXT: TabListContextValue = {\n  orientation: 'horizontal',\n  isSelected: () => false,\n  select: () => {},\n  getTabIndex: () => -1,\n  getGeneratedId: (part, value) => `wave-tablist-inert-${part}-${value}`,\n  getStaticTabId: (value) => `wave-tablist-inert-tab-${value}`,\n  getStaticPanelId: () => undefined,\n  registry: INERT_REGISTRY,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useTabListContext(component: string): TabListContextValue {\n  const context = React.useContext(TabListContext);\n  if (context) return context;\n  reportMissingContext(component, '<TabList>');\n  return INERT_CONTEXT;\n}\n\ninterface StructureProps {\n  value?: unknown;\n  id?: unknown;\n  disabled?: unknown;\n  'aria-disabled'?: unknown;\n  children?: unknown;\n}\n\n/** Whether a Tab's props make it unavailable (it cannot be selected and is skipped by keys). */\nfunction isUnavailable(props: StructureProps): boolean {\n  const ariaDisabled = props['aria-disabled'];\n  return props.disabled === true || ariaDisabled === true || ariaDisabled === 'true';\n}\n\n/** A consumer `id` that replaces the generated one: a non-empty string (`''` counts as none). */\nfunction consumerId(id: unknown): string | null {\n  return typeof id === 'string' && id !== '' ? id : null;\n}\n\n/**\n * Walks the element tree of the TabList's children (see {@link TabListStructure}). Parts are\n * identified through their element type, so parts written in a Server Component (lazy\n * references) count too. A `React.lazy` still loading (inside the consumer's own `<Suspense>`,\n * such as code-split panels in `TabList.Panels`) is no part and never suspends the TabList: its\n * children are walked instead. Runs during render only.\n */\nfunction collectStructure(node: unknown, into: TabListStructure): TabListStructure {\n  if (Array.isArray(node)) {\n    node.forEach((child) => collectStructure(child, into));\n    return into;\n  }\n  if (!React.isValidElement<StructureProps>(node)) return into;\n  const { props } = node;\n  const type = getElementType(node, { suspend: false });\n  const value = typeof props.value === 'string' ? props.value : undefined;\n  if (type === Tab) {\n    if (value !== undefined) {\n      if (into.firstEnabled === undefined && !isUnavailable(props)) into.firstEnabled = value;\n      const id = consumerId(props.id);\n      if (id !== null) into.tabIds.push([value, id]);\n    }\n    return into;\n  }\n  if (type === TabPanel) {\n    if (value !== undefined) into.panels.push([value, consumerId(props.id)]);\n    return into;\n  }\n  if (type === TabListRoot) return into;\n  return collectStructure(props.children, into);\n}\n\n/**\n * Whether an element tree shows a Tab, or a Panel (`TabList.Panel` or `TabList.Panels`), found as\n * in {@link collectStructure}: through Fragments and the `children` of wrapper elements, not inside\n * a nested TabList or a component that renders the part itself.\n */\nfunction containsPart(node: unknown, part: TabListPart): boolean {\n  if (Array.isArray(node)) return node.some((child) => containsPart(child, part));\n  if (!React.isValidElement<StructureProps>(node)) return false;\n  const type = getElementType(node, { suspend: false });\n  if (type === Tab) return part === 'tab';\n  if (type === TabPanel || type === TabPanels) return part === 'panel';\n  if (type === TabListRoot) return false;\n  return containsPart(node.props.children, part);\n}\n\n/**\n * Whether a child of the TabList renders after the tablist: a Panel, `TabList.Panels`, or a\n * wrapper (an element, `Suspense`, an error boundary) that holds panels and no tab.\n */\nfunction rendersAfterTablist(child: React.ReactNode): boolean {\n  return containsPart(child, 'panel') && !containsPart(child, 'tab');\n}\n\n/**\n * Where the TabList renders its children: inside the `role=\"tablist\"` element (`'tabs'`) or after\n * it (`'panels'`). A Panel that ends up inside the tablist warns in development.\n */\nconst TabListAreaContext = React.createContext<'tabs' | 'panels' | null>(null);\n\nconst PANEL_IN_TABLIST_MESSAGE =\n  'TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe ' +\n  'aria-required-children). The TabList moves a Panel after the tablist when it is its child, or ' +\n  'in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or ' +\n  \"separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which \" +\n  'renders after the tablist.';\n\n/* ------------------------------------------------------------------ */\n/*  TabList                                                            */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabList component. */\nexport interface TabListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /**\n   * Controlled value of the selected tab (`''`: no tab selected). A controlled value that becomes\n   * `undefined` also selects no tab: the TabList stays controlled.\n   */\n  value?: string;\n  /**\n   * Selected tab for uncontrolled usage. When it is omitted (or `''`), the first enabled tab\n   * written in the TabList's children is selected, from the first render (and in server-rendered\n   * HTML) on. Tabs written directly in the children, in Fragments or in wrapper elements that\n   * pass them as `children` (such as a Tooltip) count; a tab rendered by a custom component that\n   * renders `TabList.Tab` itself does not, even when it comes first in the DOM, so that server\n   * and client pick the same tab. When every tab comes from such a component, the first enabled\n   * tab in the DOM is selected once the tabs mount. To select a tab that a custom component\n   * renders, pass `defaultValue`.\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selected tab changes (not when it is activated again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Layout and arrow-key axis: `'horizontal'` (Left/Right, mirrored in RTL) or `'vertical'`\n   * (Up/Down).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic\n   * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click\n   * selects the focused tab (manual activation, for panels that are slow to show). Fluent's\n   * default is `false`.\n   * @default true\n   */\n  selectTabOnFocus?: boolean;\n  /** @deprecated Use `value`. */\n  selectedValue?: string;\n  /** @deprecated Use `defaultValue`. */\n  defaultSelectedValue?: string;\n  /**\n   * @deprecated Use `onValueChange`. Unlike `onValueChange`, it is called on every activation,\n   * including a click on the tab that is already selected.\n   */\n  onTabSelect?: (value: string) => void;\n  /** @deprecated Use `orientation=\"vertical\"`. */\n  vertical?: boolean;\n  /** Ref to the `role=\"tablist\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst TabListRoot = ({\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  onValueChange,\n  orientation: orientationProp,\n  selectTabOnFocus = true,\n  selectedValue,\n  defaultSelectedValue,\n  onTabSelect,\n  vertical,\n  className,\n  children,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: TabListProps) => {\n  const value = resolveDeprecatedProp(\n    'TabList',\n    valueProp,\n    selectedValue,\n    'selectedValue',\n    'value',\n  );\n  const defaultValue = resolveDeprecatedProp(\n    'TabList',\n    defaultValueProp,\n    defaultSelectedValue,\n    'defaultSelectedValue',\n    'defaultValue',\n  );\n  const orientation =\n    resolveDeprecatedProp<Orientation>(\n      'TabList',\n      orientationProp,\n      vertical === undefined ? undefined : vertical ? 'vertical' : 'horizontal',\n      'vertical',\n      'orientation',\n    ) ?? 'horizontal';\n  if (onTabSelect) {\n    warnDeprecated(\n      'TabList',\n      'onTabSelect',\n      'onValueChange',\n      '`onValueChange` is called only when the selected tab changes.',\n    );\n  }\n\n  // The sticky mode: a controlled value that becomes `undefined` clears the selection (`''`).\n  const [selected, setSelected, isControlled] = useControllable(\n    value,\n    defaultValue ?? '',\n    onValueChange,\n  );\n\n  // The children are a new element tree on every parent render: memoized by content, so the\n  // context value stays stable while the tabs and panels stay the same.\n  const structureKey = JSON.stringify(collectStructure(children, { tabIds: [], panels: [] }));\n  const structure = React.useMemo(() => {\n    const parsed = JSON.parse(structureKey) as TabListStructure;\n    return {\n      firstEnabled: parsed.firstEnabled,\n      tabIds: new Map(parsed.tabIds),\n      panels: new Map(parsed.panels),\n    };\n  }, [structureKey]);\n\n  // Uncontrolled without a selection: the first enabled tab is selected. It is the tab stop the\n  // roving store resolves from `activeValue` (the first enabled tab of the children, replaced by\n  // the first enabled tab in the DOM once the store sees it disabled), so the selection is\n  // derived during render, present from the first render on, and follows tabs that disable\n  // themselves.\n  const derivesSelection = !isControlled && selected === '';\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: derivesSelection ? (structure.firstEnabled ?? null) : selected,\n    orientation,\n    loop: true,\n    // Automatic activation (APG Tabs): moving focus selects the tab. With manual activation the\n    // keys only move focus; the tab stop stays on the selected tab (`tabStop: 'active'`), and Enter\n    // or Space selects the focused tab through its native click.\n    onFocusMove: selectTabOnFocus ? (next) => select(next) : undefined,\n  });\n\n  const isSelected = React.useCallback(\n    (tabValue: string) => (derivesSelection ? getTabIndex(tabValue) === 0 : selected === tabValue),\n    [derivesSelection, getTabIndex, selected],\n  );\n\n  const select = useEventCallback((next: string) => {\n    onTabSelect?.(next);\n    if (!isSelected(next)) setSelected(next);\n  });\n\n  const baseId = useId('tablist');\n  const [registry] = React.useState(createRegistry);\n  // Runs after the layout effects of the Tabs and Panels mounted with the TabList, which have\n  // registered by then: from here on the registry, not the static structure, decides the links.\n  React.useLayoutEffect(() => registry.markReady(), [registry]);\n  const context = React.useMemo<TabListContextValue>(\n    () => ({\n      orientation,\n      isSelected,\n      select,\n      getTabIndex,\n      getGeneratedId: (part, itemValue) => getPartId(baseId, part, itemValue),\n      getStaticTabId: (tabValue) =>\n        structure.tabIds.get(tabValue) ?? getPartId(baseId, 'tab', tabValue),\n      getStaticPanelId: (tabValue) => {\n        const panel = structure.panels.get(tabValue);\n        if (panel === undefined) return undefined;\n        return panel ?? getPartId(baseId, 'panel', tabValue);\n      },\n      registry,\n    }),\n    [orientation, isSelected, select, getTabIndex, baseId, structure, registry],\n  );\n\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref);\n\n  const tabs: React.ReactNode[] = [];\n  const panels: React.ReactNode[] = [];\n  flattenChildren(children).forEach(({ key, node: child }) => {\n    const keyed = <React.Fragment key={key}>{child}</React.Fragment>;\n    (rendersAfterTablist(child) ? panels : tabs).push(keyed);\n  });\n\n  const isVertical = orientation === 'vertical';\n  return (\n    <TabListContext.Provider value={context}>\n      <div className={cn(isVertical && 'flex')}>\n        <div\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className={cn(\n            tabListClassNames.root,\n            isVertical\n              ? 'flex w-40 flex-col border-e border-border'\n              : 'flex border-b border-border',\n            className,\n          )}\n          {...rest}\n          data-roving-container=\"\"\n          onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n          onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n            checkDefaultPrevented: false,\n          })}\n          ref={mergedRef}\n        >\n          <TabListAreaContext.Provider value=\"tabs\">{tabs}</TabListAreaContext.Provider>\n        </div>\n        <TabListAreaContext.Provider value=\"panels\">{panels}</TabListAreaContext.Provider>\n      </div>\n    </TabListContext.Provider>\n  );\n};\nTabListRoot.displayName = 'TabList';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Tab                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Tab sub-component. */\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Unique value identifying this tab (and its panel). */\n  value: string;\n  /** Ref to the tab `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A tab button. `onClick` runs before the selection (call `event.preventDefault()` to keep the\n * current tab). A `disabled` (or `aria-disabled=\"true\"`) tab is skipped by the keyboard and cannot\n * be selected. A non-empty `id` replaces the generated one (its panel's `aria-labelledby` follows\n * it). The selected tab references its panel with `aria-controls` only while a `TabList.Panel`\n * with its value is mounted.\n */\nconst Tab = ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps) => {\n  const ctx = useTabListContext('TabList.Tab');\n  const selected = ctx.isSelected(value);\n  const isVertical = ctx.orientation === 'vertical';\n  const unavailable = isUnavailable(rest);\n\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('tab', value);\n  React.useLayoutEffect(() => registry.register('tab', value, id), [registry, value, id]);\n  const mountedPanelId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('panel', value),\n    () => undefined,\n  );\n  // Before the TabList mounts the static structure stands in; after that only a mounted panel is\n  // referenced (`null`: none).\n  const panelId =\n    mountedPanelId === undefined ? ctx.getStaticPanelId(value) : (mountedPanelId ?? undefined);\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      className={cn(\n        tabListTabClassNames.root,\n        'px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none',\n        isVertical && 'text-start',\n        selected\n          ? cn(\n              'text-primary',\n              isVertical ? 'border-s-2 border-s-primary' : 'border-b-2 border-b-primary',\n            )\n          : 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground',\n        disabledStyles,\n        focusRingInset,\n        className,\n      )}\n      {...rest}\n      id={id}\n      aria-selected={selected}\n      aria-controls={selected ? panelId : undefined}\n      tabIndex={ctx.getTabIndex(value)}\n      data-roving-value={value}\n      data-selected={selected ? '' : undefined}\n      onClick={composeEventHandlers(onClick, () => {\n        if (!unavailable) ctx.select(value);\n      })}\n      ref={ref}\n    >\n      {children}\n    </button>\n  );\n};\nTab.displayName = 'Tab';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panel                                                      */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanel sub-component. */\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value of the Tab that shows this panel. */\n  value: string;\n  /** Ref to the `role=\"tabpanel\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab\n * with its value is mounted). A non-empty `id` replaces the generated one (the tab's\n * `aria-controls` follows it).\n */\nconst TabPanel = ({ value, id: idProp, children, className, ref, ...rest }: TabPanelProps) => {\n  const ctx = useTabListContext('TabList.Panel');\n  const insideTablist = React.useContext(TabListAreaContext) === 'tabs';\n  React.useEffect(() => {\n    if (insideTablist) warnOnce('TabList.Panel:inside-tablist', PANEL_IN_TABLIST_MESSAGE);\n  }, [insideTablist]);\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('panel', value);\n  // Registered while mounted, also while hidden: the tab that selects it links to it.\n  React.useLayoutEffect(() => registry.register('panel', value, id), [registry, value, id]);\n  const mountedTabId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('tab', value),\n    () => undefined,\n  );\n  if (!ctx.isSelected(value)) return null;\n  // As for the Tab's aria-controls: the static structure only before the TabList mounts.\n  const tabId =\n    mountedTabId === undefined ? ctx.getStaticTabId(value) : (mountedTabId ?? undefined);\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cn(tabListPanelClassNames.root, 'p-4', focusRing, className)}\n      {...rest}\n      id={id}\n      aria-labelledby={tabId}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n};\nTabPanel.displayName = 'TabPanel';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panels                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanels sub-component. */\nexport interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the container `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Optional container for the panels, rendered after the tablist. Use it to style the panel area,\n * and for panels that components render themselves: the TabList finds a Panel in its children, in\n * a Fragment or in a wrapper that holds no Tab, but a component that renders a Panel itself\n * renders inside the tablist unless it is placed in `TabList.Panels`.\n */\nconst TabPanels = ({ className, children, ref, ...rest }: TabPanelsProps) => (\n  <div\n    ref={ref}\n    className={cn(tabListPanelsClassNames.root, 'min-w-0 flex-1', className)}\n    {...rest}\n  >\n    {children}\n  </div>\n);\nTabPanels.displayName = 'TabPanels';\n\n/* ------------------------------------------------------------------ */\n/*  Export                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored\n * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with\n * `selectTabOnFocus={false}` they only move focus, and Enter, Space or a click selects the focused\n * tab (manual activation). The selected tab is the only tab stop; disabled tabs are skipped. Every\n * tab needs a `value` that is unique within the TabList (a development warning names a value that\n * several tabs share).\n *\n * Tabs register through context and are found in DOM order, so they may be wrapped (a Fragment,\n * a Tooltip). The children render inside the `role=\"tablist\"` element, except panels, which render\n * after it: a `TabList.Panel` or `TabList.Panels` child, or a wrapper (an element, `Suspense`, an\n * error boundary) that holds panels and no Tab. A Panel that a component renders itself cannot be\n * seen from the children: put that component inside `TabList.Panels` (a development warning names\n * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to\n * the tabs, does not belong in a tablist either: render it outside the TabList.\n *\n * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,\n * `TabListPanels`) for React Server Components, which cannot use the dotted form.\n */\nexport const TabList = /* @__PURE__ */ Object.assign(TabListRoot, {\n  Tab,\n  Panel: TabPanel,\n  Panels: TabPanels,\n});\n\nexport { Tab as TabListTab, TabPanel as TabListPanel, TabPanels as TabListPanels };\n"],"mappings":"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"}

package/dist/components/layout/Tree.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("./Tree.core.cjs"),t=require("./Tree.itemPersonaLayout.cjs");var n=Object.assign(e.TreeRoot,{Item:e.TreeItem,ItemPersonaLayout:t.TreeItemPersonaLayout});exports.Tree=n,exports.TreeItem=e.TreeItem,exports.TreeItemPersonaLayout=t.TreeItemPersonaLayout;
+//# sourceMappingURL=Tree.cjs.map

package/dist/components/layout/Tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.cjs","names":["TreeRoot","TreeItem","TreeItemPersonaLayout","require_Tree_core","require_Tree_itemPersonaLayout","Tree"],"sources":["../../../src/components/layout/Tree.tsx"],"sourcesContent":["import { TreeItem, TreeRoot } from './Tree.core';\nimport { TreeItemPersonaLayout } from './Tree.itemPersonaLayout';\n\nexport type { TreeCheckedItemsChangeDetails, TreeItemProps, TreeProps } from './Tree.core';\nexport type { TreeItemPersonaLayoutProps } from './Tree.itemPersonaLayout';\n\n/**\n * A hierarchical list (WAI-ARIA Tree View pattern) with a single tab stop: Up/Down move between\n * visible items, Home/End to the first/last, Right expands or moves to the first child (or into\n * the row's actions, see below), Left collapses or moves to the parent (both mirrored in RTL),\n * Enter activates (and toggles a parent), and so does Space unless the tree has checkboxes, `*`\n * expands the siblings, and typing jumps to an item by its text.\n *\n * Keyboard focus enters at the `selected` item, else the first item; while focus is inside, the\n * tab stop follows it, so Shift+Tab leaves the tree.\n *\n * `selectionMode=\"multiple\"` draws a checkbox on every item, bound to `checkedItems`: Space\n * toggles the focused item's check, a click on the checkbox toggles it, and a click elsewhere on\n * the row activates the item (as Enter does). Checks cascade: checking an item checks every item\n * nested in it, and an item shows checked when all of its nested items are checked, mixed when\n * some are. `onCheckedItemsChange` receives every checked item in tree order (fully checked parents\n * included), followed by listed values that match no item, and `details` (`value`, `checked`,\n * `event`).\n *\n * Row content: `actions` (buttons at the end of the row, in a toolbar named by the item, shown on\n * hover and focus, and always where there is no hover or colors are forced), `aside` (a count or a\n * badge that describes the item), `iconAfter` and `expandIcon`. Tab from the focused item enters\n * its actions and Shift+Tab returns. Keys and clicks on the actions never activate or check the\n * item. With `navigationMode=\"treegrid\"`, Right (Left in right-to-left layouts) moves from an\n * item into its actions and Left returns, the actions take no Tab stop, and on an open parent Right\n * moves into its actions rather than to its first child (Down does); the roles stay `tree` and\n * `treeitem`.\n *\n * Items are `Tree.Item` elements; nested items are written in their parent's children (directly,\n * in Fragments, or returned by a render function), not rendered by a component of their own.\n * Every item needs a `value` that is unique within the Tree. `Tree.ItemPersonaLayout` lays out a\n * person (media, name and description) as an item's label.\n *\n * `Tree.Item` and `Tree.ItemPersonaLayout` are also exported as `TreeItem` and\n * `TreeItemPersonaLayout` for React Server Components, which cannot use the dotted form.\n */\nexport const Tree = /* @__PURE__ */ Object.assign(TreeRoot, {\n  Item: TreeItem,\n  ItemPersonaLayout: TreeItemPersonaLayout,\n});\n\nexport { TreeItem, TreeItemPersonaLayout };\n"],"mappings":"0FAyCA,IAAaK,EAAuB,OAAO,OAAOL,EAAAA,SAAU,CAC1D,KAAMC,EAAAA,SACN,kBAAmBC,EAAAA,qBACrB,CAAC"}

package/dist/components/layout/Tree.context.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/dev.cjs");let n=require("react");n=e.__toESM(n,1);var r=n.createContext(!1),i=n.createContext(null),a=n.createContext(null),o=n.createContext(!1),s=n.createContext(null),c={registerLayout:()=>()=>{}};function l(e){return n.useContext(s)||(t.reportMissingContext(e,`<Tree.Item>`),c)}var u={expanded:new Set,toggle:()=>{},expand:()=>{},activate:()=>{},selected:void 0,current:void 0,getTabIndex:()=>-1,focusValue:()=>{},onItemFocus:()=>{},focusedItem:null,navigationMode:`tree`,registerValue:()=>()=>{},selectionMode:`none`,checked:new Set,toggleChecked:()=>{},registerTopLevel:()=>()=>{}};function d(e){return n.useContext(i)||(t.reportMissingContext(e,`<Tree>`),u)}exports.TreeCheckForcedContext=r,exports.TreeContext=i,exports.TreeItemContext=s,exports.TreeLabelContext=o,exports.TreeParentContext=a,exports.useTreeContext=d,exports.useTreeItemContext=l;
+//# sourceMappingURL=Tree.context.cjs.map

package/dist/components/layout/Tree.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.context.cjs","names":["React","require_runtime","require_dev","react","TreeCheckForcedContext","TreeContext","TreeParentContext","TreeLabelContext","TreeItemContext","INERT_ITEM_CONTEXT","useTreeItemContext","component","INERT_CONTEXT","useTreeContext"],"sources":["../../../src/components/layout/Tree.context.ts"],"sourcesContent":["import * as React from 'react';\nimport { reportMissingContext } from '../../lib/dev';\nimport type { SelectionMode } from '../../lib/types';\nimport type { TreeNode } from './Tree.selection';\n\n/** What a top-level item hands to the root for the tree order of a toggle. */\nexport interface TreeSelectionEntry {\n  /** The item's value and the Tree.Item elements among its children, recursively. */\n  node: TreeNode;\n  /** The treeitem element, which orders the top-level items. */\n  element: HTMLElement | null;\n}\n\n/**\n * `true` inside the child group of an item that the checked list checks (its own value or an\n * ancestor's is listed): every item there is checked.\n */\nexport const TreeCheckForcedContext = React.createContext(false);\n\nexport interface TreeContextValue {\n  expanded: ReadonlySet<string>;\n  toggle: (value: string) => void;\n  expand: (values: readonly string[]) => void;\n  activate: (value: string) => void;\n  selected: string | null | undefined;\n  current: string | null | undefined;\n  getTabIndex: (value: string) => 0 | -1;\n  focusValue: (value: string) => void;\n  onItemFocus: (value: string) => void;\n  /** The item that focus is on or inside (its actions); `null` while focus is outside the tree. */\n  focusedItem: string | null;\n  /** `'tree'` (Tab enters a row's actions) or `'treegrid'` (the arrow keys do). */\n  navigationMode: 'tree' | 'treegrid';\n  /**\n   * Development only: counts a mounted item's value and warns once per value that several items\n   * share. Returns the unregistration.\n   */\n  registerValue: (value: string) => () => void;\n  /** The resolved selection mode. */\n  selectionMode: 'none' | SelectionMode;\n  /** The checked item values (`selectionMode=\"multiple\"`); every item computes its state from them. */\n  checked: ReadonlySet<string>;\n  /** Toggles an item's check; `event` becomes `details.event` of `onCheckedItemsChange`. */\n  toggleChecked: (value: string, event: Event) => void;\n  /**\n   * Registers a top-level item's selection entry, read when a check toggles to put the items in\n   * tree order. Returns the unregistration.\n   */\n  registerTopLevel: (entry: React.RefObject<TreeSelectionEntry | null>) => () => void;\n}\n\nexport const TreeContext = React.createContext<TreeContextValue | null>(null);\n\n/** Value of the enclosing Tree.Item (`null` at the top level), for ArrowLeft → parent. */\nexport const TreeParentContext = React.createContext<string | null>(null);\n\n/**\n * `true` inside the label of a Tree.Item, where a nested Tree.Item ends up when a component\n * renders it (the parent cannot see it among its children); its child group and every Tree root\n * reset it.\n */\nexport const TreeLabelContext = React.createContext(false);\n\n/** The ids a Tree.ItemPersonaLayout registers with its item. */\nexport interface PersonaLayoutIds {\n  /** The name element: the item's name. */\n  nameId: string;\n  /** The description element, while it renders: it joins the item's description. */\n  descriptionId: string | undefined;\n}\n\n/** What a Tree.Item gives the content of its label. */\nexport interface TreeItemContextValue {\n  /** Registers a persona layout's ids with the item; returns the unregistration. */\n  registerLayout: (ids: PersonaLayoutIds) => () => void;\n}\n\nexport const TreeItemContext = React.createContext<TreeItemContextValue | null>(null);\n\nconst INERT_ITEM_CONTEXT: TreeItemContextValue = { registerLayout: () => () => {} };\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nexport function useTreeItemContext(component: string): TreeItemContextValue {\n  const context = React.useContext(TreeItemContext);\n  if (context) return context;\n  reportMissingContext(component, '<Tree.Item>');\n  return INERT_ITEM_CONTEXT;\n}\n\nconst INERT_CONTEXT: TreeContextValue = {\n  expanded: new Set(),\n  toggle: () => {},\n  expand: () => {},\n  activate: () => {},\n  selected: undefined,\n  current: undefined,\n  getTabIndex: () => -1,\n  focusValue: () => {},\n  onItemFocus: () => {},\n  focusedItem: null,\n  navigationMode: 'tree',\n  registerValue: () => () => {},\n  selectionMode: 'none',\n  checked: new Set(),\n  toggleChecked: () => {},\n  registerTopLevel: () => () => {},\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nexport function useTreeContext(component: string): TreeContextValue {\n  const context = React.useContext(TreeContext);\n  if (context) return context;\n  reportMissingContext(component, '<Tree>');\n  return INERT_CONTEXT;\n}\n"],"mappings":"4IAiBA,IAAaI,EAAyBJ,EAAM,cAAc,EAAK,EAkClDK,EAAcL,EAAM,cAAuC,IAAI,EAG/DM,EAAoBN,EAAM,cAA6B,IAAI,EAO3DO,EAAmBP,EAAM,cAAc,EAAK,EAgB5CQ,EAAkBR,EAAM,cAA2C,IAAI,EAE9ES,EAA2C,CAAE,uBAA4B,CAAC,CAAE,EAGlF,SAAgBC,EAAmB,EAAyC,CAI1E,OAHgBV,EAAM,WAAWQ,CAC7B,IACJN,EAAA,qBAAqBS,EAAW,aAAa,EACtCF,EACT,CAEA,IAAMG,EAAkC,CACtC,SAAU,IAAI,IACd,WAAc,CAAC,EACf,WAAc,CAAC,EACf,aAAgB,CAAC,EACjB,SAAU,IAAA,GACV,QAAS,IAAA,GACT,gBAAmB,GACnB,eAAkB,CAAC,EACnB,gBAAmB,CAAC,EACpB,YAAa,KACb,eAAgB,OAChB,sBAA2B,CAAC,EAC5B,cAAe,OACf,QAAS,IAAI,IACb,kBAAqB,CAAC,EACtB,yBAA8B,CAAC,CACjC,EAGA,SAAgBC,EAAe,EAAqC,CAIlE,OAHgBb,EAAM,WAAWK,CAC7B,IACJH,EAAA,qBAAqBS,EAAW,QAAQ,EACjCC,EACT"}

package/dist/components/layout/Tree.context.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { reportMissingContext as e } from "../../lib/dev.mjs";
+import * as t from "react";
+//#region src/components/layout/Tree.context.ts
+var n = t.createContext(!1), r = t.createContext(null), i = t.createContext(null), a = t.createContext(!1), o = t.createContext(null), s = { registerLayout: () => () => {} };
+function c(n) {
+	return t.useContext(o) || (e(n, "<Tree.Item>"), s);
+}
+var l = {
+	expanded: /* @__PURE__ */ new Set(),
+	toggle: () => {},
+	expand: () => {},
+	activate: () => {},
+	selected: void 0,
+	current: void 0,
+	getTabIndex: () => -1,
+	focusValue: () => {},
+	onItemFocus: () => {},
+	focusedItem: null,
+	navigationMode: "tree",
+	registerValue: () => () => {},
+	selectionMode: "none",
+	checked: /* @__PURE__ */ new Set(),
+	toggleChecked: () => {},
+	registerTopLevel: () => () => {}
+};
+function u(n) {
+	return t.useContext(r) || (e(n, "<Tree>"), l);
+}
+//#endregion
+export { n as TreeCheckForcedContext, r as TreeContext, o as TreeItemContext, a as TreeLabelContext, i as TreeParentContext, u as useTreeContext, c as useTreeItemContext };
+
+//# sourceMappingURL=Tree.context.mjs.map

package/dist/components/layout/Tree.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.context.mjs","names":["React","TreeCheckForcedContext","TreeContext","TreeParentContext","TreeLabelContext","TreeItemContext","INERT_ITEM_CONTEXT","useTreeItemContext","reportMissingContext","component","INERT_CONTEXT","useTreeContext"],"sources":["../../../src/components/layout/Tree.context.ts"],"sourcesContent":["import * as React from 'react';\nimport { reportMissingContext } from '../../lib/dev';\nimport type { SelectionMode } from '../../lib/types';\nimport type { TreeNode } from './Tree.selection';\n\n/** What a top-level item hands to the root for the tree order of a toggle. */\nexport interface TreeSelectionEntry {\n  /** The item's value and the Tree.Item elements among its children, recursively. */\n  node: TreeNode;\n  /** The treeitem element, which orders the top-level items. */\n  element: HTMLElement | null;\n}\n\n/**\n * `true` inside the child group of an item that the checked list checks (its own value or an\n * ancestor's is listed): every item there is checked.\n */\nexport const TreeCheckForcedContext = React.createContext(false);\n\nexport interface TreeContextValue {\n  expanded: ReadonlySet<string>;\n  toggle: (value: string) => void;\n  expand: (values: readonly string[]) => void;\n  activate: (value: string) => void;\n  selected: string | null | undefined;\n  current: string | null | undefined;\n  getTabIndex: (value: string) => 0 | -1;\n  focusValue: (value: string) => void;\n  onItemFocus: (value: string) => void;\n  /** The item that focus is on or inside (its actions); `null` while focus is outside the tree. */\n  focusedItem: string | null;\n  /** `'tree'` (Tab enters a row's actions) or `'treegrid'` (the arrow keys do). */\n  navigationMode: 'tree' | 'treegrid';\n  /**\n   * Development only: counts a mounted item's value and warns once per value that several items\n   * share. Returns the unregistration.\n   */\n  registerValue: (value: string) => () => void;\n  /** The resolved selection mode. */\n  selectionMode: 'none' | SelectionMode;\n  /** The checked item values (`selectionMode=\"multiple\"`); every item computes its state from them. */\n  checked: ReadonlySet<string>;\n  /** Toggles an item's check; `event` becomes `details.event` of `onCheckedItemsChange`. */\n  toggleChecked: (value: string, event: Event) => void;\n  /**\n   * Registers a top-level item's selection entry, read when a check toggles to put the items in\n   * tree order. Returns the unregistration.\n   */\n  registerTopLevel: (entry: React.RefObject<TreeSelectionEntry | null>) => () => void;\n}\n\nexport const TreeContext = React.createContext<TreeContextValue | null>(null);\n\n/** Value of the enclosing Tree.Item (`null` at the top level), for ArrowLeft → parent. */\nexport const TreeParentContext = React.createContext<string | null>(null);\n\n/**\n * `true` inside the label of a Tree.Item, where a nested Tree.Item ends up when a component\n * renders it (the parent cannot see it among its children); its child group and every Tree root\n * reset it.\n */\nexport const TreeLabelContext = React.createContext(false);\n\n/** The ids a Tree.ItemPersonaLayout registers with its item. */\nexport interface PersonaLayoutIds {\n  /** The name element: the item's name. */\n  nameId: string;\n  /** The description element, while it renders: it joins the item's description. */\n  descriptionId: string | undefined;\n}\n\n/** What a Tree.Item gives the content of its label. */\nexport interface TreeItemContextValue {\n  /** Registers a persona layout's ids with the item; returns the unregistration. */\n  registerLayout: (ids: PersonaLayoutIds) => () => void;\n}\n\nexport const TreeItemContext = React.createContext<TreeItemContextValue | null>(null);\n\nconst INERT_ITEM_CONTEXT: TreeItemContextValue = { registerLayout: () => () => {} };\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nexport function useTreeItemContext(component: string): TreeItemContextValue {\n  const context = React.useContext(TreeItemContext);\n  if (context) return context;\n  reportMissingContext(component, '<Tree.Item>');\n  return INERT_ITEM_CONTEXT;\n}\n\nconst INERT_CONTEXT: TreeContextValue = {\n  expanded: new Set(),\n  toggle: () => {},\n  expand: () => {},\n  activate: () => {},\n  selected: undefined,\n  current: undefined,\n  getTabIndex: () => -1,\n  focusValue: () => {},\n  onItemFocus: () => {},\n  focusedItem: null,\n  navigationMode: 'tree',\n  registerValue: () => () => {},\n  selectionMode: 'none',\n  checked: new Set(),\n  toggleChecked: () => {},\n  registerTopLevel: () => () => {},\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nexport function useTreeContext(component: string): TreeContextValue {\n  const context = React.useContext(TreeContext);\n  if (context) return context;\n  reportMissingContext(component, '<Tree>');\n  return INERT_CONTEXT;\n}\n"],"mappings":";;;;AAiBA,IAAaC,IAAyBD,EAAM,cAAc,EAAK,GAkClDE,IAAcF,EAAM,cAAuC,IAAI,GAG/DG,IAAoBH,EAAM,cAA6B,IAAI,GAO3DI,IAAmBJ,EAAM,cAAc,EAAK,GAgB5CK,IAAkBL,EAAM,cAA2C,IAAI,GAE9EM,IAA2C,EAAE,4BAA4B,CAAC,EAAE;AAGlF,SAAgBC,EAAmB,GAAyC;CAI1E,OAHgBP,EAAM,WAAWK,CAC7B,MACJG,EAAqBC,GAAW,aAAa,GACtCH;AACT;AAEA,IAAMI,IAAkC;CACtC,0BAAU,IAAI,IAAI;CAClB,cAAc,CAAC;CACf,cAAc,CAAC;CACf,gBAAgB,CAAC;CACjB,UAAU,KAAA;CACV,SAAS,KAAA;CACT,mBAAmB;CACnB,kBAAkB,CAAC;CACnB,mBAAmB,CAAC;CACpB,aAAa;CACb,gBAAgB;CAChB,2BAA2B,CAAC;CAC5B,eAAe;CACf,yBAAS,IAAI,IAAI;CACjB,qBAAqB,CAAC;CACtB,8BAA8B,CAAC;AACjC;AAGA,SAAgBC,EAAe,GAAqC;CAIlE,OAHgBX,EAAM,WAAWE,CAC7B,MACJM,EAAqBC,GAAW,QAAQ,GACjCC;AACT"}

package/dist/components/layout/Tree.core.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),l=require("../../hooks/useId.cjs"),u=require("../../lib/direction.cjs"),d=require("../../lib/focus.cjs"),f=require("../../hooks/useRovingTabIndex.cjs"),p=require("../../hooks/useMergedRefs.cjs"),m=require("../../lib/aria.cjs"),h=require("../../lib/styles.cjs"),g=require("../../lib/icons.cjs"),_=require("../../lib/events.cjs"),v=require("./Tree.context.cjs"),ee=require("./Tree.selection.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x=[],te="Tree.Item was rendered inside the label of another Tree.Item, so it is not part of that item's child group: the parent cannot expand, its name includes the nested text, and a treeitem sits inside a label (axe aria-required-parent). A Tree.Item finds its nested items among its own children (written directly, in Fragments, or returned by a render function such as `children.map(renderNode)`), but not inside a component that renders Tree.Item itself. Build a data-driven tree with a render function instead of a recursive component.";function ne(e){r.warnOnce(`Tree:duplicate:${e}`,`Tree: several items share the value "${e}". Item values must be unique within a Tree; items with the same value share their expanded, selected and focus state.`)}var S='Tree: `selected` has no effect with selectionMode="multiple"; use `checkedItems`, and `current` for the item the user is on.',re='Tree: `checkedItems` and `defaultCheckedItems` need selectionMode="multiple"; without it the tree draws no checkboxes and ignores them.',ie='Tree: selectionMode="single" draws a radio on every item for `selected`; pass `selected` (null while nothing is selected) and update it from `onItemSelect`.';function ae(e){return e?Array.from(e,e=>e.current).filter(e=>e!==null).sort((e,t)=>!e.element||!t.element||e.element===t.element?0:e.element.compareDocumentPosition(t.element)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1).map(e=>e.node):[]}var oe=`[role="treeitem"]`,C=`button, [href], input, select, textarea, [role="button"], [tabindex]`,se=`[&:focus-within:not(:has(>[role=group]_:focus))>[data-tree-row]_[data-tree-actions]]:visible`,ce=`[@media(hover:hover)]:not-forced-colors:[&:focus-within:not(:has(>[role=group]_:focus))>[data-tree-row]_[data-tree-aside]]:invisible`,le=`invisible group-hover/row:visible focus-within:visible forced-colors:visible [@media(hover:none)]:visible has-[[aria-expanded=true]]:visible data-[focus-in-popup]:visible`,ue=`not-forced-colors:group-hover/row:invisible [@media(hover:hover)]:not-forced-colors:group-focus-within/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[aria-expanded=true]]/end:invisible [@media(hover:hover)]:not-forced-colors:group-has-[[data-focus-in-popup]]/end:invisible`,de=`[&>*]:[grid-area:1/1] forced-colors:flex [@media(hover:none)]:flex`;function fe(e){let t=e.querySelector(`:scope > [data-tree-row] [data-tree-actions]`);if(!t)return!1;let n=new Map;for(let e of Array.from(t.querySelectorAll(C))){if(d.isHiddenInput(e)||e.matches(`:disabled`))continue;let r=e.closest(`[hidden], [inert]`);if(r&&t.contains(r))continue;let i=e.getAttribute(`data-roving-disabled`);if((i===null||i===`false`)&&(e.getAttribute(`aria-disabled`)!==`true`||e.hasAttribute(`data-disabled-focusable`))&&!f.isHiddenByCss(e,t,n)&&(e.focus(),e.ownerDocument.activeElement===e))return!0}return!1}var w=({expandedItems:e,defaultExpandedItems:n,onExpandedItemsChange:i,onItemSelect:l,selected:u,current:d,selectionMode:m=`none`,navigationMode:h=`tree`,checkedItems:g,defaultCheckedItems:_,onCheckedItemsChange:te,className:C,children:se,onKeyDown:ce,onKeyDownCapture:le,onFocus:ue,onBlur:de,ref:fe,...w})=>{let[me]=y.useState(()=>n??x),[he,T]=c.useControllable(e,me,e=>i?.([...e])),E=y.useMemo(()=>new Set(he),[he]),D=y.useCallback(e=>{T(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},[T]),O=y.useCallback(e=>{T(t=>{let n=e.filter(e=>!t.includes(e));return n.length>0?[...t,...n]:t})},[T]),k=s.useEventCallback(e=>{l?.(e)}),[A]=y.useState(()=>_??x),j=y.useRef(void 0),[M,ge]=c.useControllable(g,A,e=>te?.([...e],j.current)),N=y.useMemo(()=>new Set(M),[M]),P=y.useRef(null),_e=y.useCallback(e=>{P.current??=new Set;let t=P.current;return t.add(e),()=>{t.delete(e)}},[]),F=s.useEventCallback((e,t)=>{let n=ae(P.current);ge(r=>{let i=ee.toggleCheck(n,r,e);return j.current={value:e,checked:i.includes(e),event:t},i}),j.current=void 0}),I=m===`multiple`?void 0:m===`single`?u??null:u;y.useEffect(()=>{m===`multiple`&&u!==void 0&&r.warnOnce(`Tree:selected-with-multiple`,S)},[m,u]),y.useEffect(()=>{m===`single`&&u===void 0&&r.warnOnce(`Tree:single-without-selected`,ie)},[m,u]);let L=g!==void 0||_!==void 0;y.useEffect(()=>{m!==`multiple`&&L&&r.warnOnce(`Tree:checked-without-multiple`,re)},[m,L]);let[R,z]=y.useState(null),B=y.useRef(null),V=y.useCallback(e=>{if(!r.isDev)return()=>{};B.current??=new Map;let t=B.current,n=(t.get(e)??0)+1;return t.set(e,n),n>1&&ne(e),()=>{let n=(t.get(e)??1)-1;n>0?t.set(e,n):t.delete(e)}},[]),{containerProps:H,getTabIndex:U,focusValue:W}=f.useRovingTabIndex({activeValue:R??I??null,itemSelector:oe,orientation:`vertical`,loop:!1,typeahead:!0}),ve=y.useMemo(()=>({expanded:E,toggle:D,expand:O,activate:k,selected:I,current:d,getTabIndex:U,focusValue:W,onItemFocus:z,focusedItem:R,navigationMode:h,registerValue:V,selectionMode:m,checked:N,toggleChecked:F,registerTopLevel:_e}),[E,D,O,k,I,d,U,W,R,h,V,m,N,F,_e]),ye=p.useMergedRefs(fe,H.ref),G=e=>{e.key.length===1&&pe(e.currentTarget),H.onKeyDown(e)},K=e=>{e.key===` `&&pe(e.currentTarget),H.onKeyDownCapture(e)},q=e=>{let t=e.relatedTarget;(!t||!e.currentTarget.contains(t))&&z(null)};return(0,b.jsx)(v.TreeContext.Provider,{value:ve,children:(0,b.jsx)(v.TreeParentContext.Provider,{value:null,children:(0,b.jsx)(v.TreeCheckForcedContext.Provider,{value:!1,children:(0,b.jsx)(`div`,{role:`tree`,"data-selection-mode":m,"aria-multiselectable":m===`multiple`||void 0,className:t.cn(o.treeClassNames.root,`text-body-1`,C),...w,"data-roving-container":``,onKeyDown:a.composeEventHandlers(ce,G),onKeyDownCapture:a.composeEventHandlers(le,K),onFocus:a.composeEventHandlers(ue,H.onFocus,{checkDefaultPrevented:!1}),onBlur:a.composeEventHandlers(de,q,{checkDefaultPrevented:!1}),ref:ye,children:(0,b.jsx)(v.TreeLabelContext.Provider,{value:!1,children:se})})})})})};w.displayName=`Tree`;function pe(e){e.querySelectorAll(`[role="treeitem"]`).forEach(e=>{let t=e.querySelector(`:scope > [data-tree-row] > [data-tree-label]`);if(!t)return;let n=t.querySelector(`[data-tree-persona-name]`),r=t.getAttribute(`data-roving-text`)??n?.textContent??t.textContent??``;e.getAttribute(`data-roving-text`)!==r&&e.setAttribute(`data-roving-text`,r)})}function me(e){let t=e.target;return!t?.closest?.(`[data-tree-actions]`)&&t?.closest?.(`[role="treeitem"]`)===e.currentTarget}function he(e){let t=e.target;return t===e.currentTarget||!t?.closest?.(`[data-tree-checkbox], [data-tree-actions]`)&&t?.closest?.(`[data-tree-row]`)?.parentElement===e.currentTarget}var T=({labelledBy:e,tabStop:n,navigationMode:r,onReturn:i,children:a})=>{let s=r===`treegrid`,{containerProps:{ref:c},handleKeyDown:l,handleFocus:d}=f.useRovingTabIndex({itemSelector:C,manageTabIndex:!0,orientation:`horizontal`,loop:!s,tabStop:n}),[p,m]=y.useState(null);y.useEffect(()=>{if(p!==`leaving`)return;let e=requestAnimationFrame(()=>m(null));return()=>cancelAnimationFrame(e)},[p]);let h=e=>{d(e),m(e.currentTarget.contains(e.target)?null:`inside`)},g=e=>{if(e.currentTarget.contains(e.target))return;let t=e.relatedTarget;t instanceof Node&&e.currentTarget.contains(t)||m(`leaving`)},v=e=>{if(e.defaultPrevented||!_.isOwnEvent(e))return!1;let t=e.target,n=t.getAttribute(`aria-haspopup`);return(e.key===`ArrowDown`||e.key===`ArrowUp`)&&n!==null&&n!==`false`?(e.preventDefault(),!1):!s||e.altKey||e.ctrlKey||e.metaKey||_.isEditableTarget(t)?!1:u.getArrowIntent(e.key,{orientation:`horizontal`,dir:u.getDirection(e.currentTarget)})===`prev`};return(0,b.jsx)(`span`,{role:`toolbar`,"aria-labelledby":e,"aria-orientation":`horizontal`,"data-tree-actions":``,"data-roving-container":``,ref:c,"data-focus-in-popup":p===null?void 0:``,onKeyDown:e=>{let t=v(e);e.defaultPrevented||(l(e),t&&e.target===document.activeElement&&(e.preventDefault(),i()))},onFocus:h,onBlur:g,className:t.cn(o.treeItemClassNames.actions,`inline-flex items-center gap-1`,le),children:a})};T.displayName=`TreeItemActions`;var E=({value:e,icon:s,iconAfter:c,expandIcon:d,aside:f,actions:_,leaf:x=!1,className:ne,children:S,onClick:re,onKeyDown:ie,onFocus:ae,onBlur:oe,ref:C,...le})=>{let{"data-roving-text":pe,...D}=le,O=v.useTreeContext(`Tree.Item`),k=y.useContext(v.TreeParentContext),A=y.useContext(v.TreeLabelContext),j=O.expanded.has(e),M=l.useId(`tree-item-label`),ge=l.useId(`tree-item-aside`),N=y.useContext(v.TreeCheckForcedContext),P=y.useRef(null),_e=p.useMergedRefs(C,P),[F,I]=y.useState(null),L=y.useCallback(e=>(I(e),()=>I(t=>t===e?null:t)),[]),R=y.useMemo(()=>({registerLayout:L}),[L]),z=F?.nameId??M,{registerValue:B,registerTopLevel:V}=O;y.useEffect(()=>B(e),[B,e]),y.useEffect(()=>{A&&r.warnOnce(`Tree.Item:inside-label`,te)},[A]);let H=[],U=[],W;n.flattenChildren(S).forEach(({key:e,node:t})=>{let r=(0,b.jsx)(y.Fragment,{children:t},e);n.isElementOfType(t,E)?(W??=t.props.value,H.push(r)):n.isElementOfType(t,w)?H.push(r):U.push(r)});let ve=s&&i.slotRendersContent(s)?i.renderSlot(s,`span`,t.cn(o.treeItemClassNames.icon,`inline-flex shrink-0`),{"aria-hidden":!0}):null,ye=c&&i.slotRendersContent(c)?i.renderSlot(c,`span`,t.cn(o.treeItemClassNames.iconAfter,`inline-flex shrink-0`),{"aria-hidden":!0}):null,G=i.slotRendersContent(f),K=i.slotRendersContent(_),q=H.length>0&&!x,be=(0,b.jsx)(`span`,{className:`w-3 shrink-0`,"aria-hidden":`true`});q&&d==null?be=(0,b.jsx)(g.ChevronRightIcon,{className:t.cn(o.treeItemClassNames.expandIcon,`shrink-0 transition-transform motion-reduce:transition-none`,j?`rotate-90`:`wave-rtl:-scale-x-100`)}):q&&i.slotRendersContent(d)&&(be=i.renderSlot(d,`span`,t.cn(o.treeItemClassNames.expandIcon,`inline-flex shrink-0`),{"aria-hidden":!0}));let J=O.selectionMode===`multiple`,Y=y.useMemo(()=>J?{value:e,children:x?[]:ee.collectItems(S,{item:E,tree:w})}:null,[J,e,x,S]),X=Y?ee.computeCheckStates([Y],O.checked,N).get(e):void 0,xe=y.useRef(null);y.useLayoutEffect(()=>{xe.current=Y?{node:Y,element:P.current}:null});let Se=k===null&&!A;y.useLayoutEffect(()=>J&&Se?V(xe):void 0,[J,Se,V]);let Z=O.selected===void 0?void 0:O.selected===e,Ce=O.current!==void 0&&O.current!==null&&O.current===e,we=()=>{q&&O.toggle(e),O.activate(e)},Te=e=>{he(e)&&(re?.(e),e.defaultPrevented||we())},Ee=t=>{if(!me(t)||(ie?.(t),t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey))return;switch(t.key){case`Enter`:t.preventDefault(),we();return;case` `:t.preventDefault(),X===void 0?we():O.toggleChecked(e,t.nativeEvent);return;case`*`:{t.preventDefault();let e=t.currentTarget.parentElement?.querySelectorAll(`:scope > [role="treeitem"][aria-expanded="false"][data-roving-value]`);O.expand(Array.from(e??[],e=>e.getAttribute(`data-roving-value`)??``).filter(Boolean));return}}let n=u.getArrowIntent(t.key,{orientation:`horizontal`,dir:u.getDirection(t.currentTarget)});if(n===`next`){if(t.preventDefault(),q&&!j){O.toggle(e);return}if(O.navigationMode===`treegrid`&&fe(t.currentTarget))return;q&&W!==void 0&&O.focusValue(W)}else n===`prev`&&(t.preventDefault(),q&&j?O.toggle(e):k!==null&&O.focusValue(k))},Q=y.useRef(null),$=e=>e.target.closest(`[data-tree-actions]`)?.closest(`[role="treeitem"]`)===e.currentTarget,De=t=>{(t.target===t.currentTarget||$(t))&&O.onItemFocus(e),$(t)&&(Q.current=t.target)},Oe=e=>{$(e)&&(e.relatedTarget!==null||e.target.isConnected)&&(Q.current=null)};y.useLayoutEffect(()=>{let e=Q.current;if(!e)return;let t=P.current,n=t?.ownerDocument.activeElement;n&&n!==t.ownerDocument.body?Q.current=null:t&&!e.isConnected&&(Q.current=null,t.focus({preventScroll:!0}))});let ke=X===void 0?null:(0,b.jsx)(`span`,{role:`checkbox`,"aria-checked":X===`mixed`?`mixed`:X===`checked`,"aria-labelledby":z,tabIndex:-1,"data-tree-checkbox":``,onMouseDown:e=>{e.preventDefault(),P.current?.focus({preventScroll:!0})},onClick:t=>{O.toggleChecked(e,t.nativeEvent)},className:t.cn(o.treeItemClassNames.indicator,`relative inline-flex size-4 shrink-0 items-center justify-center rounded-xs border transition-colors motion-reduce:transition-none`,`before:absolute before:-inset-1`,X===`unchecked`?t.cn(`border-stroke-accessible bg-transparent`,h.forcedColors.control):`border-primary bg-primary text-primary-foreground forced-colors:border-[Highlight] forced-colors:bg-[Highlight]`),children:X===`mixed`?(0,b.jsx)(g.SubtractIcon,{size:12,className:h.forcedColors.selectedLeaf}):X===`checked`?(0,b.jsx)(g.CheckIcon,{size:12,className:h.forcedColors.selectedLeaf}):null}),Ae=O.selectionMode===`single`?(0,b.jsx)(`span`,{"aria-hidden":`true`,className:t.cn(o.treeItemClassNames.indicator,`inline-flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors motion-reduce:transition-none`,Z?`border-2 border-primary forced-colors:border-[Highlight]`:t.cn(`border-stroke-accessible`,h.forcedColors.control)),children:Z&&(0,b.jsx)(`span`,{className:t.cn(`block size-2 rounded-full bg-primary`,h.forcedColors.selectedLeaf)})}):null,je=ke??Ae,Me=N||J&&O.checked.has(e);return(0,b.jsxs)(`div`,{role:`treeitem`,"aria-selected":Z,"aria-current":Ce?!0:void 0,"data-checked":X===`checked`?``:void 0,"data-mixed":X===`mixed`?``:void 0,className:t.cn(o.treeItemClassNames.root,`block outline-none`,`[&:focus-visible>[data-tree-row]]:outline-2 [&:focus-visible>[data-tree-row]]:-outline-offset-2 [&:focus-visible>[data-tree-row]]:outline-ring`,K&&se,K&&G&&ce,ne),...D,"aria-labelledby":D[`aria-labelledby`]??(D[`aria-label`]===void 0?z:void 0),"aria-describedby":m.joinIds(D[`aria-describedby`],G?ge:void 0,F?.descriptionId),"aria-expanded":q?j:void 0,"aria-checked":X===void 0?void 0:X===`mixed`?`mixed`:X===`checked`,tabIndex:O.getTabIndex(e),"data-roving-value":e,"data-selected":Z?``:void 0,"data-current":Ce?``:void 0,onClick:Te,onKeyDown:Ee,onFocus:e=>a.composeEventHandlers(ae,De,{checkDefaultPrevented:!1})(e),onBlur:e=>a.composeEventHandlers(oe,Oe,{checkDefaultPrevented:!1})(e),ref:_e,children:[(0,b.jsxs)(`div`,{"data-tree-row":``,className:t.cn(o.treeItemClassNames.row,`flex cursor-pointer items-center gap-1.5 rounded px-2 py-1 hover:bg-subtle-hover`,K&&`group/row`,Z&&t.cn(`bg-subtle-selected font-semibold`,h.forcedColors.selectedContainer)),children:[be,je,ve,(0,b.jsx)(`span`,{id:M,"data-tree-label":``,"data-roving-text":pe,className:t.cn(o.treeItemClassNames.label,`truncate`,(ye||G||K)&&`min-w-0`),children:(0,b.jsx)(v.TreeCheckForcedContext.Provider,{value:!1,children:(0,b.jsx)(v.TreeLabelContext.Provider,{value:!0,children:(0,b.jsx)(v.TreeItemContext.Provider,{value:R,children:U})})})}),ye,(G||K)&&(0,b.jsxs)(`span`,{"data-tree-end":``,className:t.cn(`group/end ms-auto inline-grid shrink-0 items-center gap-1`,G&&K&&de),children:[G&&(0,b.jsx)(`span`,{id:ge,"data-tree-aside":``,className:t.cn(o.treeItemClassNames.aside,`inline-flex items-center text-caption-1 text-muted-foreground`,K&&ue),children:i.materialiseSlotContent(f)}),K&&(0,b.jsx)(T,{labelledBy:z,tabStop:O.navigationMode===`tree`&&O.focusedItem===e?`last-focused`:`none`,navigationMode:O.navigationMode,onReturn:()=>O.focusValue(e),children:i.materialiseSlotContent(_)})]})]}),q&&j&&(0,b.jsx)(v.TreeParentContext.Provider,{value:e,children:(0,b.jsx)(v.TreeCheckForcedContext.Provider,{value:Me,children:(0,b.jsx)(v.TreeLabelContext.Provider,{value:!1,children:(0,b.jsx)(`div`,{role:`group`,className:t.cn(o.treeItemClassNames.group,`ps-4`),children:H})})})})]})};E.displayName=`TreeItem`,exports.TreeItem=E,exports.TreeRoot=w;
+//# sourceMappingURL=Tree.core.cjs.map