@kanso-labs/kanso-ui 0.26.2 → 0.26.4

package/dist/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\ntype TooltipAlign = 'center' | 'end' | 'start';\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = 'bottom' | 'left' | 'right' | 'top';\n\n// React Aria names a placement by the side and, along it, the end the\n// tooltip is aligned to — the same mapping `Popover` makes, kept identical\n// so the two agree on what `side` and `align` mean.\nfunction placementOf(side: TooltipSide, align: TooltipAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":";;;;;;AAyBA,MAAM,SAAS,EACb,WAAW;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AAKA,MAAM,sBAAsB;AA6C5B,SAAS,YAAY,MAAmB,OAAqB;CAC3D,IAAI,UAAU,UACZ,OAAO;CAET,IAAI,SAAS,SAAS,SAAS,UAC7B,OAAO,GAAG,KAAI,GAAI;CAEpB,OAAO,GAAG,KAAI,GAAI,UAAU,UAAU,QAAQ;AAChD;;;;;;;;;;;;;;;AAgBA,SAAS,UAAQ,EACf,QAAQ,UACR,aACA,UACA,WACA,WACA,OACA,OAAO,OACP,aAAa,qBACb,OACA,GAAG,WACY;CACf,OAAO,qBAAC,gBAAD;EAAgB,GAAI;EAApB,UAAA,CACF,UACD,oBAAC,SAAD;GAAY,aAAa;GAAa,QAAQ;GAAY,WAAW,YAAY,MAAM,KAAK;GAE9F,0BAA0B;GAAW,GAAI,qBAAqB,UAA8B,MAAa,QAAQ,OAAO,OAAO,WAAW,YAAY,MAAM,SAAS,CAAC,GAAG;IACvK;IACA;GACF,CAAC;GACI,UAAA;EACS,CAAA,CACE;;AACpB"}
+{"version":3,"file":"index.js","names":["ReactNode","ClassNameOrFunction","StyleOrFunction","TooltipRenderProps","TooltipTriggerComponentProps","stylex","Tooltip","RACTooltip","TooltipTrigger","mergeStatefulStyles","overlay","popupOrigin","colors","radii","spacing","typography","styles","container","kWkggS","kaIpWk","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kAzted","k8WAf4","kg3NbH","$$css","DEFAULT_SIDE_OFFSET","TooltipAlign","TooltipProps","align","alignOffset","children","className","Element","label","side","TooltipSide","sideOffset","style","Omit","placementOf","const","t0","$","_c","props","t1","t2","t3","undefined","t4","t5","_temp","t6","t7","state","popup","placement"],"sources":["../../../src/components/tooltip/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction, TooltipRenderProps, TooltipTriggerComponentProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Tooltip as RACTooltip, TooltipTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The tooltips page's plain tooltip: a 24dp container on inverse surface\n// with 8dp of padding, holding one line of supporting text in inverse on\n// surface at 12 over 16, which is the body-small role. The page names a\n// shape token for the container without giving its value, so the container\n// takes the smallest corner the library has — a 24dp box has room for no\n// more.\n//\n// The rich tooltip on the same page is a hover-triggered `Popover`, which is\n// where its subhead, supporting text and buttons already live; this one is\n// text and nothing else, which is why it takes its label as a string rather\n// than as parts.\n//\n// The entry is the overlay module's, shared with every anchored surface, and\n// so is the origin it grows from — the tooltip comes out of the thing it\n// describes. The surface itself is not: a tooltip inverts the page's colours\n// where a popover sits on a container role, so it draws its own.\nconst styles = {\n  container: {\n    kWkggS: \"x1c5gpgi\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1girmi0\",\n    kMv6JI: \"x1yicsit\",\n    kGuDYH: \"x1b35g6e\",\n    k63SB2: \"x9d6959\",\n    kb6lSQ: \"xwth0xh\",\n    kLWn49: \"xybisxh\",\n    ks0D6T: \"x10u2fgw\",\n    kAzted: \"xjwf9q1\",\n    k8WAf4: \"xmqoko8\",\n    kg3NbH: \"xn60lsn\",\n    $$css: true\n  }\n};\n\n// The gap between the anchor and the tooltip. A number rather than a token,\n// because React Aria computes the position in JavaScript and so cannot read\n// a custom property — the same one place `Popover` spells a step out.\nconst DEFAULT_SIDE_OFFSET = 8;\ntype TooltipAlign = 'center' | 'end' | 'start';\ntype TooltipProps = {\n  /**\n   * Where the tooltip sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: TooltipAlign;\n  /** Shifts the tooltip along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * The element the tooltip describes, and nothing else. It has to be able\n   * to take focus, since a tooltip a keyboard cannot reach is one most\n   * people never see — wrap anything that cannot in `Focusable`, which this\n   * package re-exports.\n   */\n  children?: ReactNode;\n  /** A function may compute the class from the tooltip's render state. */\n  className?: ClassNameOrFunction<TooltipRenderProps>;\n  /**\n   * Where to portal the tooltip. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the tooltip renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /** What the tooltip says. Text, since the page's plain tooltip is text. */\n  label: ReactNode;\n  /**\n   * Which side of the element the tooltip opens on. It flips to the opposite\n   * side on its own when there is no room.\n   * @default 'top'\n   */\n  side?: TooltipSide;\n  /** The gap between the element and the tooltip, in pixels. */\n  sideOffset?: number;\n  /** A function may compute the style from the tooltip's render state. */\n  style?: StyleOrFunction<TooltipRenderProps>;\n} & Omit<TooltipTriggerComponentProps, 'children'>;\ntype TooltipSide = 'bottom' | 'left' | 'right' | 'top';\n\n// React Aria names a placement by the side and, along it, the end the\n// tooltip is aligned to — the same mapping `Popover` makes, kept identical\n// so the two agree on what `side` and `align` mean.\nfunction placementOf(side: TooltipSide, align: TooltipAlign) {\n  if (align === 'center') {\n    return side;\n  }\n  if (side === 'top' || side === 'bottom') {\n    return `${side} ${align}` as const;\n  }\n  return `${side} ${align === 'start' ? 'top' : 'bottom'}` as const;\n}\n\n/**\n * A label for the element it wraps, shown while that element is hovered or\n * focused — the tooltips page's plain tooltip. Its open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, `defaultOpen` to\n * let it keep its own, and `delay` and `closeDelay` for how long a pointer\n * has to rest before it appears and after it leaves.\n *\n * A tooltip is not a place to put anything a person has to read or reach:\n * it is skipped by touch entirely and dismissed by Escape, so what it says\n * has to be a repeat of what the element already means. Anything with a\n * button in it, or worth reading twice, is a `Popover`.\n *\n * The call site's `className` and `style` land on the tooltip itself.\n */\nfunction Tooltip({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  label,\n  side = 'top',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  ...props\n}: TooltipProps) {\n  return <TooltipTrigger {...props}>\n      {children}\n      <RACTooltip crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: TooltipRenderProps) => stylex.props(overlay.popup, styles.container, popupOrigin(state.placement)), {\n      className,\n      style\n    })}>\n        {label}\n      </RACTooltip>\n    </TooltipTrigger>;\n}\nexport type { TooltipAlign, TooltipProps, TooltipSide };\nexport default Tooltip;"],"mappings":"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"}

package/dist/components/tree/index.js

@@ -5,9 +5,9 @@ import ProgressIndicator from "../progress-indicator/index.js";
 import Checkbox from "../checkbox/index.js";
 import { rowStyles } from "../../row/styles.js";
 import { RowContent } from "../../row/index.js";
+import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
 import { Button, Tree, TreeHeader, TreeItem, TreeItemContent, TreeLoadMoreItem, TreeSection } from "react-aria-components";
 //#region src/components/tree/index.tsx
 const SelectLabelContext = createContext("Select");
@@ -84,14 +84,57 @@ function textValueFor(textValue, headline) {
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
 */
-function Tree$1({ selectLabel = "Select", ...props }) {
-	return /* @__PURE__ */ jsx(SelectLabelContext, {
-		value: selectLabel,
-		children: /* @__PURE__ */ jsx(Tree, {
-			...props,
-			...mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" }, props)
-		})
-	});
+function Tree$1(t0) {
+	const $ = c(14);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		const { selectLabel: t4, ...props } = t0;
+		const selectLabel = t4 === void 0 ? "Select" : t4;
+		T1 = SelectLabelContext;
+		t3 = selectLabel;
+		T0 = Tree;
+		t1 = props;
+		t2 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = T1;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		T0 = $[1];
+		T1 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== T0 || $[7] !== t1 || $[8] !== t2) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2
+		});
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== T1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T1, {
+			value: t3,
+			children: t4
+		});
+		$[10] = T1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
 }
 /**
 * A named group of rows. `header` names it, and is what a screen reader
@@ -172,17 +215,54 @@ function TreeItem$1(t0) {
 * `onLoadMore` when this comes into view, and draws it only while
 * `isLoading`.
 */
-function TreeLoadMore({ label = "Loading more", ...props }) {
-	return /* @__PURE__ */ jsx(TreeLoadMoreItem, {
-		...props,
-		...mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8" }, props),
-		children: /* @__PURE__ */ jsx(ProgressIndicator, {
+function TreeLoadMore(t0) {
+	const $ = c(12);
+	let T0;
+	let label;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		const { label: t3, ...props } = t0;
+		label = t3 === void 0 ? "Loading more" : t3;
+		T0 = TreeLoadMoreItem;
+		t1 = props;
+		t2 = mergeStatefulStyles({ className: "x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8" }, props);
+		$[0] = t0;
+		$[1] = T0;
+		$[2] = label;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		T0 = $[1];
+		label = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== label) {
+		t3 = /* @__PURE__ */ jsx(ProgressIndicator, {
 			"aria-label": label,
 			isIndeterminate: true,
 			size: "24px",
 			variant: "circular"
-		})
-	});
+		});
+		$[5] = label;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== T0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			...t2,
+			children: t3
+		});
+		$[7] = T0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 }
 /**
 * A named group of rows, with its heading above them.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","props","header"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TreeItemProps","RACTreeItemProps","TreeLoadMoreItemProps","RACTreeLoadMoreItemProps","TreeProps","RACTreeProps","TreeItemRenderProps","stylex","createContext","useContext","Button","RACButton","Tree","RACTree","TreeHeader","RACTreeHeader","TreeItem","RACTreeItem","TreeItemContent","RACTreeItemContent","TreeLoadMoreItem","RACTreeLoadMoreItem","TreeSection","RACTreeSection","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","Checkbox","ProgressIndicator","RACTreeSectionProps","Parameters","T","SelectLabelContext","styles","indent","kZCmMZ","$$css","TreeHeaderProps","children","Omit","TreeItemText","className","leading","style","supporting","trailing","headline","textValue","TreeLoadMoreProps","label","selectLabel","TreeSectionProps","header","chevronClassName","chevronFor","state","hasChildItems","isExpanded","itemContent","isDisabled","isSelected","leadingFor","itemStyles","props","base","list","interactive","undefined","twoLine","selectedList","disabled","selects","selectionBehavior","selectionMode","textValueFor","t0","$","_c","T0","T1","t1","t2","t3","t4","t5","TreeLoadMore","Item","LoadMore","Section"],"sources":["../../../src/components/tree/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TreeItemProps as RACTreeItemProps, TreeLoadMoreItemProps as RACTreeLoadMoreItemProps, TreeProps as RACTreeProps, TreeItemRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tree as RACTree, TreeHeader as RACTreeHeader, TreeItem as RACTreeItem, TreeItemContent as RACTreeItemContent, TreeLoadMoreItem as RACTreeLoadMoreItem, TreeSection as RACTreeSection } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Checkbox from '../checkbox';\nimport ProgressIndicator from '../progress-indicator';\n\n// A list whose rows nest. Each row is the row every list here draws —\n// `src/row`, shared with ListItem, ListBox, List and Disclosure — so its\n// 56dp floor, body-large headline, body-medium supporting line, state layers\n// and disabled treatment are that module's, and a tree beside a list cannot\n// drift from it.\n//\n// The lists page gives no nesting: it draws one flat list. So the two things\n// a tree adds beyond that row are the library's own, and both are written\n// here with their reasons. The rest — the row, the selection colours, the\n// checkbox — is the page's, through the shared module.\n//\n// Four things are this component's own.\n//\n// **A level indents by one chevron's width.** React Aria puts the depth on\n// each row as a custom property, so the inset is one `calc` against the\n// row's own inline padding rather than a style per level. 24dp is the size\n// the menus page gives that glyph, which makes a level of nesting exactly as\n// wide as the caret that opens it.\n//\n// **The caret is a button, and React Aria names it.** A `slot=\"chevron\"`\n// button is what expands and collapses; React Aria labels it Expand or\n// Collapse and composes that with the row, so nothing here names it. It is\n// drawn only on a row that has children, since a caret on a leaf says the\n// row opens when it does not.\n//\n// **A selecting tree draws a checkbox, before whatever the row was given.**\n// Same rule as List: React Aria reports the mode on each row, so a tree that\n// toggles draws one without the call site repeating it, and it always sits\n// in the same place so a column of rows reads down.\n//\n// **`TreeItemContent` has no class to style.** React Aria renders it as a\n// `display: contents` gridcell with nothing on it, so the row's own layout\n// is drawn by what goes inside rather than by that wrapper.\n\n// `TreeSection`'s props are not re-exported from the package index, only its\n// component is — so the type is taken off the component rather than imported\n// by a name that is not there to import.\ntype RACTreeSectionProps<T> = Parameters<typeof RACTreeSection<T>>[0];\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the tree's decision and repeating it per row is\n// how the two drift.\nconst SelectLabelContext = createContext('Select');\nconst styles = {\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype TreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype TreeItemProps<T extends object = object> = Omit<RACTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & TreeItemText & {\n  /** The rows nested under this one, as further `Tree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACTreeItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACTreeItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as a count or a control. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a tree row wraps\n// its headline in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string headline is taken as the value,\n// which is the common case; anything else has to say what it is worth, and\n// this is what makes the compiler ask rather than leaving a row unnamed.\ntype TreeItemText = {\n  /** The row's headline — the one thing it is mostly about. */\n  headline: string;\n  /** What typeahead matches the row on. Defaults to the headline. */\n  textValue?: string;\n} | {\n  /** The row's headline, as something other than a plain string. */\n  headline?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype TreeLoadMoreProps = Omit<RACTreeLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype TreeProps<T extends object> = Omit<RACTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACTreeProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the tree's render state. */\n  style?: RACTreeProps<T>['style'];\n};\ntype TreeSectionProps<T extends object = object> = Omit<RACTreeSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// The button itself never turns — the glyph inside it does, so the press\n// target stays a square whichever way the row is pointing.\nfunction chevronClassName() {\n  return {\n    className: \"x6s0dn4 xjbqb8w x3y1ksm xc342km x9f619 x1w5n3ug x1ypdohk x78zum5 x2lah0s xl56j7k xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn x1717udv\"\n  }.className ?? '';\n}\n\n// The caret, or the space it would have taken. Written as a call rather than\n// inline at the prop, which is what react-perf's no-new-function-as-prop and\n// jsx-no-jsx-as-prop are after; the React Compiler memoises the result on\n// its inputs.\n//\n// A leaf gets the space rather than nothing, so its headline lines up with\n// the headline of a sibling that opens.\nfunction chevronFor(state: TreeItemRenderProps): ReactNode {\n  if (!state.hasChildItems) {\n    return <span className=\"xxk0z11 x2lah0s xvy4d1p\" />;\n  }\n  return <RACButton className={chevronClassName} slot=\"chevron\">\n      <ChevronEndGlyph {...{\n      0: {\n        className: \"xxk0z11 xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n      }\n    }[!!state.isExpanded << 0]} />\n    </RACButton>;\n}\n\n// What a row draws, from React Aria's render state. The caret comes first,\n// then the selection checkbox, then whatever the row was given — one order,\n// always, which is what keeps a column of rows reading down.\nfunction itemContent(headline: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string) {\n  return (state: TreeItemRenderProps): ReactNode => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} supporting={supporting} trailing={trailing}>\n      {headline}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\nfunction itemStyles(supporting: ReactNode) {\n  return (state: TreeItemRenderProps) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.indent, supporting !== undefined && rowStyles.twoLine, state.isSelected && rowStyles.selectedList, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, the selection checkbox, then whatever the row was given. Its\n * return type is written out rather than inferred: `ReactNode` is a union\n * that includes a promise, and a function inferred as returning one has to\n * be `async`.\n */\nfunction leadingFor(state: TreeItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  const selects = state.selectionBehavior === 'toggle' && state.selectionMode !== 'none';\n  return <>\n      {chevronFor(state)}\n      {selects ? <Checkbox aria-label={selectLabel} slot=\"selection\" /> : null}\n      {leading}\n    </>;\n}\n\n// What React Aria matches typeahead on, and what names the row. `TreeItemText`\n// makes one of the two a string, so the last branch is unreachable through the\n// public type — it is there because destructuring the two apart is what loses\n// the narrowing, not because a row can arrive without either.\nfunction textValueFor(textValue: string | undefined, headline: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof headline === 'string' ? headline : '';\n}\n\n/**\n * A list whose rows nest. Which rows are open is React Aria's: pass\n * `expandedKeys` with `onExpandedChange` to control it, or\n * `defaultExpandedKeys` to let it keep its own. Selection is React Aria's\n * too — set `selectionMode` to `single` or `multiple`.\n *\n * ```tsx\n * <Tree aria-label=\"Label\">\n *   <Tree.Item headline=\"First item\" id=\"first\">\n *     <Tree.Item headline=\"Second item\" id=\"second\" />\n *   </Tree.Item>\n * </Tree>\n * ```\n *\n * Each row is the row every list here draws, indented by its depth, with a\n * caret on the rows that have children. Name the tree with `aria-label` or\n * `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction Tree<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: TreeProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACTree<T> {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x78zum5 xdt5ytf x1t137rt x1cmllll\"\n    }, props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction TreeHeader({\n  children\n}: TreeHeaderProps) {\n  return <RACTreeHeader className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x1clyivc x790zyz\">{children}</RACTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Its slots are the row's: `leading`, the\n * `headline`, `supporting` under it, and `trailing`. Give every row an `id`\n * — that is the key selection and expansion are reported by.\n *\n * Rows nested as `children` are what make it a branch; a row with none is a\n * leaf and draws no caret. `textValue` is what typeahead matches on, and is\n * taken from a plain-string headline when it is not given.\n */\nfunction TreeItem<T extends object = object>({\n  children,\n  headline,\n  leading,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: TreeItemProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  return <RACTreeItem<T> textValue={textValueFor(textValue, headline)} {...props} {...mergeStatefulStyles(itemStyles(supporting), props)}>\n      <RACTreeItemContent>\n        {itemContent(headline, leading, supporting, trailing, selectLabel)}\n      </RACTreeItemContent>\n      {children}\n    </RACTreeItem>;\n}\n\n/**\n * The row the tree shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction TreeLoadMore({\n  label = 'Loading more',\n  ...props\n}: TreeLoadMoreProps) {\n  return <RACTreeLoadMoreItem {...props} {...mergeStatefulStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k xbktkl8\"\n  }, props)}>\n      <ProgressIndicator aria-label={label} isIndeterminate size=\"24px\" variant=\"circular\" />\n    </RACTreeLoadMoreItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction TreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: TreeSectionProps<T>) {\n  return <RACTreeSection<T> {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {header === undefined ? null : <TreeHeader>{header}</TreeHeader>}\n      {children}\n    </RACTreeSection>;\n}\nTree.Item = TreeItem;\nTree.LoadMore = TreeLoadMore;\nTree.Section = TreeSection;\nexport type { TreeHeaderProps, TreeItemProps, TreeLoadMoreProps, TreeProps, TreeSectionProps };\nexport default Tree;"],"mappings":"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"}

package/dist/drag/hooks.js

@@ -1,8 +1,8 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { dragStyles } from "./styles.js";
 import { DropIndicator as DropIndicator$1 } from "./index.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useDragAndDrop } from "react-aria-components";
 //#region src/drag/hooks.tsx
 function renderDragPreview(items) {

package/dist/drag/hooks.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","names":[],"sources":["../../src/drag/hooks.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport type { DropTarget } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useDragAndDrop as useRACDragAndDrop } from 'react-aria-components';\nimport { DropIndicator } from '.';\nimport { dragStyles } from './styles';\n\n// The hook half of `src/drag`, apart from ./index.tsx so that file exports\n// components alone — which is what keeps fast refresh working for it, the\n// same arrangement `src/row` uses.\n\n// React Aria types the preview renderer's argument with a `DragItem` it does\n// not export, so the shape is read back off the option that takes it.\ntype DragItems = Parameters<NonNullable<Parameters<typeof useRACDragAndDrop>[0]['renderDragPreview']>>[0];\n\n// What is drawn under the pointer while a drag is in flight. React Aria\n// hands it the items being dragged, each a map of type to value; what is\n// shown is the plain text one, and how many others are coming with it.\n//\n// The parameter type is taken off the option rather than imported, since\n// `DragItem` is not on the package's public surface.\nfunction renderDragPreview(items: DragItems): JSX.Element {\n  const first = items[0]?.['text/plain'] ?? '';\n  const rest = items.length - 1;\n  return <div {...stylex.props(dragStyles.preview)}>\n      {rest > 0 ? `${first} + ${rest}` : first}\n    </div>;\n}\nfunction renderDropIndicator(target: DropTarget): JSX.Element {\n  return <DropIndicator target={target} />;\n}\n\n/**\n * React Aria's drag and drop hooks, with this library's drop indicator and\n * drag preview as the defaults. Hand what it returns to a `List`, `ListBox`,\n * `Table` or `Tree` as `dragAndDropHooks`.\n *\n * ```tsx\n * const { dragAndDropHooks } = useDragAndDrop({\n *   getItems: (keys) => [...keys].map((key) => ({ 'text/plain': String(key) })),\n *   onReorder: (event) => { … },\n * })\n *\n * <List aria-label=\"Label\" dragAndDropHooks={dragAndDropHooks}>…</List>\n * ```\n *\n * Everything else is React Aria's and is not wrapped — `getItems`,\n * `onReorder`, `onInsert`, `acceptedDragTypes` and the rest decide what may\n * be dragged where, which is the page's business rather than the row's.\n * Passing `renderDropIndicator` or `renderDragPreview` replaces the default.\n */\nfunction useDragAndDrop(options: Parameters<typeof useRACDragAndDrop>[0]): ReturnType<typeof useRACDragAndDrop> {\n  return useRACDragAndDrop({\n    renderDragPreview,\n    renderDropIndicator,\n    ...options\n  });\n}\nexport { useDragAndDrop };"],"mappings":";;;;;;;AAqBA,SAAS,kBAAkB,OAA+B;CACxD,MAAM,QAAQ,MAAM,EAAE,GAAG,iBAAiB;CAC1C,MAAM,OAAO,MAAM,SAAS;CAC5B,OAAO,oBAAC,OAAD;EAAK,GAAI,MAAa,WAAW,OAAO;EAC1C,UAAA,OAAO,IAAI,GAAG,MAAK,KAAM,SAAS;CAChC,CAAA;AACT;AACA,SAAS,oBAAoB,QAAiC;CAC5D,OAAO,oBAAC,iBAAD,EAAuB,OAAO,CAAA;AACvC;;;;;;;;;;;;;;;;;;;;AAqBA,SAAA,iBAAA,SAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EAC2B,KAAA;GAAA;GAAA;GAAA,GAGpB;EACL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAJM,eAAkB,EAIxB;AAAC"}
+{"version":3,"file":"hooks.js","names":["JSX","DropTarget","stylex","useDragAndDrop","useRACDragAndDrop","DropIndicator","dragStyles","DragItems","Parameters","NonNullable","renderDragPreview","items","Element","first","rest","length","props","preview","renderDropIndicator","target","options","$","_c","t0"],"sources":["../../src/drag/hooks.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport type { DropTarget } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useDragAndDrop as useRACDragAndDrop } from 'react-aria-components';\nimport { DropIndicator } from '.';\nimport { dragStyles } from './styles';\n\n// The hook half of `src/drag`, apart from ./index.tsx so that file exports\n// components alone — which is what keeps fast refresh working for it, the\n// same arrangement `src/row` uses.\n\n// React Aria types the preview renderer's argument with a `DragItem` it does\n// not export, so the shape is read back off the option that takes it.\ntype DragItems = Parameters<NonNullable<Parameters<typeof useRACDragAndDrop>[0]['renderDragPreview']>>[0];\n\n// What is drawn under the pointer while a drag is in flight. React Aria\n// hands it the items being dragged, each a map of type to value; what is\n// shown is the plain text one, and how many others are coming with it.\n//\n// The parameter type is taken off the option rather than imported, since\n// `DragItem` is not on the package's public surface.\nfunction renderDragPreview(items: DragItems): JSX.Element {\n  const first = items[0]?.['text/plain'] ?? '';\n  const rest = items.length - 1;\n  return <div {...stylex.props(dragStyles.preview)}>\n      {rest > 0 ? `${first} + ${rest}` : first}\n    </div>;\n}\nfunction renderDropIndicator(target: DropTarget): JSX.Element {\n  return <DropIndicator target={target} />;\n}\n\n/**\n * React Aria's drag and drop hooks, with this library's drop indicator and\n * drag preview as the defaults. Hand what it returns to a `List`, `ListBox`,\n * `Table` or `Tree` as `dragAndDropHooks`.\n *\n * ```tsx\n * const { dragAndDropHooks } = useDragAndDrop({\n *   getItems: (keys) => [...keys].map((key) => ({ 'text/plain': String(key) })),\n *   onReorder: (event) => { … },\n * })\n *\n * <List aria-label=\"Label\" dragAndDropHooks={dragAndDropHooks}>…</List>\n * ```\n *\n * Everything else is React Aria's and is not wrapped — `getItems`,\n * `onReorder`, `onInsert`, `acceptedDragTypes` and the rest decide what may\n * be dragged where, which is the page's business rather than the row's.\n * Passing `renderDropIndicator` or `renderDragPreview` replaces the default.\n */\nfunction useDragAndDrop(options: Parameters<typeof useRACDragAndDrop>[0]): ReturnType<typeof useRACDragAndDrop> {\n  return useRACDragAndDrop({\n    renderDragPreview,\n    renderDropIndicator,\n    ...options\n  });\n}\nexport { useDragAndDrop };"],"mappings":";;;;;;;AAqBA,SAASU,kBAAkBC,OAA+B;CACxD,MAAME,QAAQF,MAAM,EAAE,GAAG,iBAAiB;CAC1C,MAAMG,OAAOH,MAAMI,SAAS;CAC5B,OAAO,oBAAC,OAAD;EAAK,GAAIb,MAAaI,WAAWW,OAAO;EAC1CH,UAAAA,OAAO,IAAI,GAAGD,MAAK,KAAMC,SAASD;CAChC,CAAA;AACT;AACA,SAASK,oBAAoBC,QAAiC;CAC5D,OAAO,oBAAC,iBAAD,EAAuBA,OAAO,CAAA;AACvC;;;;;;;;;;;;;;;;;;;;AAqBA,SAAAhB,iBAAAiB,SAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAD,SAAA;EAC2BG,KAAA;GAAAb;GAAAQ;GAAA,GAGpBE;EACL;EAACC,EAAA,KAAAD;EAAAC,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,OAJMjB,eAAkBmB,EAIxB;AAAC"}

package/dist/drag/index.js

@@ -1,6 +1,6 @@
 import { indicatorClassName } from "./styles.js";
-import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
 import { DropIndicator } from "react-aria-components";
 //#region src/drag/index.tsx
 /**

package/dist/drag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["indicatorClassName","target"],"sources":["../../src/drag/index.tsx"],"sourcesContent":["import type { DropTarget } from 'react-aria-components'\n\nimport { DropIndicator as RACDropIndicator } from 'react-aria-components'\n\nimport { indicatorClassName } from './styles'\n\n// What drag and drop looks like across the four collections that do it —\n// List, ListBox, Table and Tree. React Aria supplies the behaviour through\n// `useDragAndDrop` and renders an unstyled line between items; what is here\n// is the line and the preview, and a wrapper that makes both the default so\n// a call site gets them without wiring either.\n//\n// Apart from `src/components` because it is shared internals rather than a\n// component: a directory there is a public component with stories, a barrel\n// entry and a `styling.test.tsx` case, and this has none of the three. The\n// one name it does put on the public surface is `useDragAndDrop`, which\n// `src/react-aria.ts` exports in place of React Aria's own.\n//\n// Two things are this module's own, since the design carries no page for\n// either — it has no drag and drop at all.\n//\n// **The line between two items is the primary role, 2dp.** It is the same\n// weight and colour a focus ring takes, which is the nearest thing the\n// system has to \"this is where the thing you are moving will land\".\n//\n// **The preview is the row's own type on a raised surface.** A drag preview\n// that looked nothing like the row it came from would read as a second\n// thing rather than as the row in transit.\n\n/**\n * The line that shows where a dragged item would land. Rendered by\n * {@link useDragAndDrop} rather than by a call site, which is why it takes\n * React Aria's target rather than props of its own.\n */\nfunction DropIndicator({ target }: { target: DropTarget }) {\n  return <RACDropIndicator className={indicatorClassName} target={target} />\n}\n\nexport { DropIndicator }\n"],"mappings":";;;;;;;;;;AAkCA,SAAA,gBAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAuB,MAAA,EAAA,WAAA;CAAkC,IAAA;CAAA,IAAA,EAAA,OAAA,QAAA;EAChD,KAAA,oBAAC,eAAD;GAA6BA,WAAA;GAA4B;EAAM,CAAA;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAnE;AAAmE"}
+{"version":3,"file":"index.js","names":["DropTarget","DropIndicator","RACDropIndicator","indicatorClassName","t0","$","_c","target","t1"],"sources":["../../src/drag/index.tsx"],"sourcesContent":["import type { DropTarget } from 'react-aria-components'\n\nimport { DropIndicator as RACDropIndicator } from 'react-aria-components'\n\nimport { indicatorClassName } from './styles'\n\n// What drag and drop looks like across the four collections that do it —\n// List, ListBox, Table and Tree. React Aria supplies the behaviour through\n// `useDragAndDrop` and renders an unstyled line between items; what is here\n// is the line and the preview, and a wrapper that makes both the default so\n// a call site gets them without wiring either.\n//\n// Apart from `src/components` because it is shared internals rather than a\n// component: a directory there is a public component with stories, a barrel\n// entry and a `styling.test.tsx` case, and this has none of the three. The\n// one name it does put on the public surface is `useDragAndDrop`, which\n// `src/react-aria.ts` exports in place of React Aria's own.\n//\n// Two things are this module's own, since the design carries no page for\n// either — it has no drag and drop at all.\n//\n// **The line between two items is the primary role, 2dp.** It is the same\n// weight and colour a focus ring takes, which is the nearest thing the\n// system has to \"this is where the thing you are moving will land\".\n//\n// **The preview is the row's own type on a raised surface.** A drag preview\n// that looked nothing like the row it came from would read as a second\n// thing rather than as the row in transit.\n\n/**\n * The line that shows where a dragged item would land. Rendered by\n * {@link useDragAndDrop} rather than by a call site, which is why it takes\n * React Aria's target rather than props of its own.\n */\nfunction DropIndicator({ target }: { target: DropTarget }) {\n  return <RACDropIndicator className={indicatorClassName} target={target} />\n}\n\nexport { DropIndicator }\n"],"mappings":";;;;;;;;;;AAkCA,SAAAC,gBAAAG,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAuB,MAAA,EAAAC,WAAAH;CAAkC,IAAAI;CAAA,IAAAH,EAAA,OAAAE,QAAA;EAChDC,KAAA,oBAAC,eAAD;GAA6BL,WAAAA;GAA4BI;EAAM,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAAnEG;AAAmE"}

package/dist/drag/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../src/drag/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n// index.test.tsx also applies these directly: React Aria draws a drop\n// indicator only while a drag is in flight, which a test cannot start.\n\nconst dragStyles = {\n  indicator: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x36qwtl\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kqGvvJ: \"x16sahtb\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  indicatorActive: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  preview: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x1va8c73\",\n    kVQacm: \"xb3r6kr\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// The line's classes, from React Aria's own render state.\nfunction indicatorClassName(state: {\n  isDropTarget: boolean;\n}) {\n  return {\n    0: {\n      className: \"xjbqb8w x36qwtl x3y1ksm x9f619 x16sahtb x1t137rt x1n2onr6 x1vjfegm\"\n    },\n    1: {\n      className: \"x36qwtl x3y1ksm x9f619 x16sahtb x1t137rt x1n2onr6 x1vjfegm xnety89\"\n    }\n  }[!!state.isDropTarget << 0].className ?? '';\n}\nexport { dragStyles, indicatorClassName };"],"mappings":";AASA,MAAM,aAAa;CACjB,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAGA,SAAS,mBAAmB,OAEzB;CACD,OAAO;EACL,GAAG,EACD,WAAW,qEACb;EACA,GAAG,EACD,WAAW,qEACb;CACF,EAAE,CAAC,CAAC,MAAM,gBAAgB,EAAE,CAAC,aAAa;AAC5C"}
+{"version":3,"file":"styles.js","names":["stylex","colors","radii","spacing","typography","dragStyles","indicator","kWkggS","kZKoxP","kaIpWk","kB7OPa","kqGvvJ","k3XXqK","kVAEAm","kY2c9j","$$css","indicatorActive","preview","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","ks0D6T","kVQacm","k8WAf4","kg3NbH","kg5iWk","khDVqt","indicatorClassName","state","isDropTarget","className"],"sources":["../../src/drag/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../tokens/design.tokens.stylex';\n\n// Apart from ./index.tsx so that file exports components alone, which is what\n// keeps fast refresh working for it — the same arrangement `src/row` uses.\n// index.test.tsx also applies these directly: React Aria draws a drop\n// indicator only while a drag is in flight, which a test cannot start.\n\nconst dragStyles = {\n  indicator: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x36qwtl\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kqGvvJ: \"x16sahtb\",\n    k3XXqK: \"x1t137rt\",\n    kVAEAm: \"x1n2onr6\",\n    kY2c9j: \"x1vjfegm\",\n    $$css: true\n  },\n  indicatorActive: {\n    kWkggS: \"xnety89\",\n    $$css: true\n  },\n  preview: {\n    kWkggS: \"xvkjz1l\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    ks0D6T: \"x1va8c73\",\n    kVQacm: \"xb3r6kr\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x18fpw6u\",\n    kg5iWk: \"xlyipyv\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  }\n};\n\n// The line's classes, from React Aria's own render state.\nfunction indicatorClassName(state: {\n  isDropTarget: boolean;\n}) {\n  return {\n    0: {\n      className: \"xjbqb8w x36qwtl x3y1ksm x9f619 x16sahtb x1t137rt x1n2onr6 x1vjfegm\"\n    },\n    1: {\n      className: \"x36qwtl x3y1ksm x9f619 x16sahtb x1t137rt x1n2onr6 x1vjfegm xnety89\"\n    }\n  }[!!state.isDropTarget << 0].className ?? '';\n}\nexport { dragStyles, indicatorClassName };"],"mappings":";AASA,MAAMK,aAAa;CACjBC,WAAW;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfT,QAAQ;EACRQ,OAAO;CACT;CACAE,SAAS;EACPV,QAAQ;EACRE,QAAQ;EACRC,QAAQ;EACRQ,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;AACF;AAGA,SAASe,mBAAmBC,OAEzB;CACD,OAAO;EACL,GAAG,EACDE,WAAW,qEACb;EACA,GAAG,EACDA,WAAW,qEACb;CACF,EAAE,CAAC,CAACF,MAAMC,gBAAgB,EAAE,CAACC,aAAa;AAC5C"}