@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/components/navigation-rail/index.d.ts

@@ -15,9 +15,10 @@ type NavigationRailProps = RenderComponentProps<'nav'> & {
    */
   isExpanded?: boolean;
   /**
-   * The route of the current destination, matched against each
+   * The route of the current destination, matched exactly against each
    * destination's `href`. The match carries `aria-current="page"` and the
-   * active indicator.
+   * active indicator. For a route nested under a destination, which no
+   * `href` matches whole, mark that destination with its own `isCurrent`.
    */
   selectedRoute?: string;
 };

package/dist/components/navigation-rail/index.js

@@ -2,11 +2,28 @@
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { NavigationContext } from "../../navigation/context.js";
-import { NavigationItem } from "../../navigation/index.js";
+import { NavigationItem, NavigationList } from "../../navigation/index.js";
 import { c } from "react/compiler-runtime";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation-rail/index.tsx
+const styles = { destinations: {
+	kGNEyG: "x6s0dn4",
+	kSGwAc: "xkh2ocl",
+	kB7OPa: "x9f619",
+	k1xSpc: "x78zum5",
+	kCS8Yb: "xdl72j9",
+	kXwgrk: "xdt5ytf",
+	kzQI83: "x1iyjqo2",
+	kmuXW: "xs83m0k",
+	kqGvvJ: "x1fh6m6z",
+	kUOVxO: "xfll3lq",
+	kAzted: "x2lwn1j",
+	kORKVm: "x1odjw0f",
+	k8WAf4: "x12ulsxz",
+	kg3NbH: "xfn1xvj",
+	$$css: true
+} };
 /**
 * The column of top-level destinations a medium or wider window keeps at its
 * leading edge, collapsed or, with `isExpanded`, expanded. Each destination
@@ -27,7 +44,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * The call site's `className` and `style` land on the `<nav>`.
 */
 function NavigationRail(t0) {
-	const $ = c(34);
+	const $ = c(32);
 	let children;
 	let context;
 	let header;
@@ -97,67 +114,57 @@ function NavigationRail(t0) {
 		$[15] = t5;
 	} else t5 = $[15];
 	let t6;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = {
-			0: { className: "x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj" },
-			1: { className: "x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj xzoy561" }
-		};
-		$[16] = t6;
-	} else t6 = $[16];
-	const t7 = t6[!!!isExpanded << 0];
-	let t8;
-	if ($[17] !== children || $[18] !== t7) {
-		t8 = /* @__PURE__ */ jsx("div", {
-			...t7,
+	if ($[16] !== children) {
+		t6 = /* @__PURE__ */ jsx(NavigationList, {
+			layout: styles.destinations,
 			children
 		});
-		$[17] = children;
-		$[18] = t7;
-		$[19] = t8;
-	} else t8 = $[19];
-	let t9;
-	if ($[20] !== t5 || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t5, t8] });
-		$[20] = t5;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
-	if ($[23] !== t1 || $[24] !== t2 || $[25] !== t9) {
-		t10 = {
+		$[16] = children;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t5 || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t5, t6] });
+		$[18] = t5;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== t1 || $[22] !== t2 || $[23] !== t7) {
+		t8 = {
 			...t1,
 			...t2,
-			children: t9
+			children: t7
 		};
-		$[23] = t1;
-		$[24] = t2;
-		$[25] = t9;
-		$[26] = t10;
-	} else t10 = $[26];
-	let t11;
-	if ($[27] !== render || $[28] !== t10 || $[29] !== t3) {
-		t11 = {
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t7;
+		$[24] = t8;
+	} else t8 = $[24];
+	let t9;
+	if ($[25] !== render || $[26] !== t3 || $[27] !== t8) {
+		t9 = {
 			defaultTagName: t3,
-			props: t10,
+			props: t8,
 			render
 		};
-		$[27] = render;
-		$[28] = t10;
-		$[29] = t3;
-		$[30] = t11;
-	} else t11 = $[30];
-	const rail = t4(t11);
-	let t12;
-	if ($[31] !== context || $[32] !== rail) {
-		t12 = /* @__PURE__ */ jsx(NavigationContext, {
+		$[25] = render;
+		$[26] = t3;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	const rail = t4(t9);
+	let t10;
+	if ($[29] !== context || $[30] !== rail) {
+		t10 = /* @__PURE__ */ jsx(NavigationContext, {
 			value: context,
 			children: rail
 		});
-		$[31] = context;
-		$[32] = rail;
-		$[33] = t12;
-	} else t12 = $[33];
-	return t12;
+		$[29] = context;
+		$[30] = rail;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
 }
 /**
 * One destination of a navigation rail — an icon, a label and, when it is the

package/dist/components/navigation-rail/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","stylex","useMemo","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationContext","useRender","mergeStyles","colors","spacing","RING_REACH","NavigationRailProps","header","isExpanded","selectedRoute","NavigationRail","t0","$","children","context","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","t9","const","t10","form","0","className","1","Symbol","for","t11","defaultTagName","rail","t12","NavigationRailItem","Item","NavigationRailItemProps","_c"],"sources":["../../../src/components/navigation-rail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// The navigation rail page's rail, in both its forms: collapsed, a 96dp\n// column of vertical destinations down the leading edge of a medium or wider\n// window, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. The expanded rail is what the page has\n// replace the navigation drawer, so an app's top-level destinations reach\n// every window size between this and NavigationBar. Both forms are on the\n// surface role, with their contents 44dp from the top: the first destination,\n// or a header when the rail has one — a menu button that expands it, say —\n// with the first destination 40dp under it. The destinations are\n// `src/navigation`'s, shared with NavigationBar, which holds their values.\n//\n// The rail is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\n// How far a destination's focus ring reaches past it: the 2dp offset and\n// the 2dp ring. The destinations scroll, and a scroll container clips what\n// overflows it, so the block they scroll in is padded by this much and\n// pulled back out by as much, which leaves every destination where it was\n// and every ring whole.\nconst RING_REACH = '4px';\ntype NavigationRailProps = RenderComponentProps<'nav'> & {\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  header?: ReactNode;\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  isExpanded?: boolean;\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * is a link, so it routes through React Aria's `RouterProvider` when the app\n * has one.\n *\n * ```tsx\n * <NavigationRail aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`.\n */\nfunction NavigationRail({\n  children,\n  header,\n  isExpanded = false,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationRailProps) {\n  const context = useMemo(() => ({\n    form: isExpanded ? 'expanded' as const : 'collapsed' as const,\n    selectedRoute\n  }), [isExpanded, selectedRoute]);\n  const rail = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        0: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xzoy561 x13oubkp\"\n        },\n        1: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl\"\n        }\n      }[!!isExpanded << 0], props),\n      children: <>\n          {header === undefined ? null : <div {...{\n          0: {\n            className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf xqa3g7y\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1cy8zhl xkh2ocl x1mgj515 xdxifnh\"\n          }\n        }[!!isExpanded << 0]}>\n              {header}\n            </div>}\n          <div {...{\n          0: {\n            className: \"x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj\"\n          },\n          1: {\n            className: \"x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj xzoy561\"\n          }\n        }[!!!isExpanded << 0]}>\n            {children}\n          </div>\n        </>\n    },\n    render\n  });\n  return <NavigationContext value={context}>{rail}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation rail — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationRail`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationRailItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\nNavigationRail.Item = NavigationRailItem;\nexport type { NavigationItemProps as NavigationRailItemProps, NavigationRailProps };\nexport { NavigationRailItem };\nexport default NavigationRail;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","stylex","useMemo","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationList","NavigationContext","useRender","mergeStyles","colors","spacing","RING_REACH","styles","destinations","kGNEyG","kSGwAc","kB7OPa","k1xSpc","kCS8Yb","kXwgrk","kzQI83","kmuXW","kqGvvJ","kUOVxO","kAzted","kORKVm","k8WAf4","kg3NbH","$$css","NavigationRailProps","header","isExpanded","selectedRoute","NavigationRail","t0","$","children","context","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","t9","const","t10","form","0","className","1","defaultTagName","rail","NavigationRailItem","Item","NavigationRailItemProps","_c"],"sources":["../../../src/components/navigation-rail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem, NavigationList } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// The navigation rail page's rail, in both its forms: collapsed, a 96dp\n// column of vertical destinations down the leading edge of a medium or wider\n// window, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. The expanded rail is what the page has\n// replace the navigation drawer, so an app's top-level destinations reach\n// every window size between this and NavigationBar. Both forms are on the\n// surface role, with their contents 44dp from the top: the first destination,\n// or a header when the rail has one — a menu button that expands it, say —\n// with the first destination 40dp under it. The destinations are\n// `src/navigation`'s, shared with NavigationBar, which holds their values.\n//\n// A collapsed destination's label stays on one line in the 88dp under its\n// indicator, about thirteen characters of label medium. A longer one is cut\n// short with an ellipsis and shows its full text in the browser's tooltip on\n// hover — see `src/navigation`. The expanded rail's labels sit beside their\n// icons, with the rest of the rail's 360dp at most.\n//\n// The rail is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\n// How far a destination's focus ring reaches past it: the 2dp offset and\n// the 2dp ring. The destinations scroll, and a scroll container clips what\n// overflows it, so the block they scroll in is padded by this much and\n// pulled back out by as much, which leaves every destination where it was\n// and every ring whole.\nconst RING_REACH = '4px';\nconst styles = {\n  destinations: {\n    kGNEyG: \"x6s0dn4\",\n    kSGwAc: \"xkh2ocl\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kCS8Yb: \"xdl72j9\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kmuXW: \"xs83m0k\",\n    kqGvvJ: \"x1fh6m6z\",\n    kUOVxO: \"xfll3lq\",\n    kAzted: \"x2lwn1j\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"x12ulsxz\",\n    kg3NbH: \"xfn1xvj\",\n    $$css: true\n  }\n};\ntype NavigationRailProps = RenderComponentProps<'nav'> & {\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  header?: ReactNode;\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  isExpanded?: boolean;\n  /**\n   * The route of the current destination, matched exactly against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator. For a route nested under a destination, which no\n   * `href` matches whole, mark that destination with its own `isCurrent`.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * is a link, so it routes through React Aria's `RouterProvider` when the app\n * has one.\n *\n * ```tsx\n * <NavigationRail aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`.\n */\nfunction NavigationRail({\n  children,\n  header,\n  isExpanded = false,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationRailProps) {\n  const context = useMemo(() => ({\n    form: isExpanded ? 'expanded' as const : 'collapsed' as const,\n    selectedRoute\n  }), [isExpanded, selectedRoute]);\n  const rail = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        0: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xzoy561 x13oubkp\"\n        },\n        1: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl\"\n        }\n      }[!!isExpanded << 0], props),\n      children: <>\n          {header === undefined ? null : <div {...{\n          0: {\n            className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf xqa3g7y\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1cy8zhl xkh2ocl x1mgj515 xdxifnh\"\n          }\n        }[!!isExpanded << 0]}>\n              {header}\n            </div>}\n          <NavigationList layout={styles.destinations}>\n            {children}\n          </NavigationList>\n        </>\n    },\n    render\n  });\n  return <NavigationContext value={context}>{rail}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation rail — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationRail`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationRailItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\nNavigationRail.Item = NavigationRailItem;\nexport type { NavigationItemProps as NavigationRailItemProps, NavigationRailProps };\nexport { NavigationRailItem };\nexport default NavigationRail;"],"mappings":"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"}

package/dist/components/navigation-tree/index.js

@@ -55,7 +55,10 @@ function itemContent(label, leading, supporting, trailing, ripple) {
 		trailing,
 		variant: "drawer",
 		children: label
-	}), state.isDisabled ? null : ripple] });
+	}), state.isDisabled ? null : /* @__PURE__ */ jsx("span", {
+		...props(rowStyles.drawerSurface),
+		children: ripple
+	})] });
 }
 function itemStyles(state) {
 	return props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","leadingFor","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section","stylex.props","RACButton","NavigationTree","_c","props","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. For an app's top-level destinations Material Design has\n// the expanded navigation rail replace the drawer, and NavigationRail draws\n// it; this is for a tree of links nested deeper than a rail holds. Each row is\n// the row every list here draws — `src/row`, shared with ListItem, ListBox,\n// List, Tree and Disclosure — under that module's `drawer` variant, which is\n// the page's own 56dp row with a label-large label and a secondary-container\n// pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label 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 NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], '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 stylex.props(styles.chevron, focus.ring).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 label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): 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: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u 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 whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` 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 its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, then whatever the row was given. Its return type is written out\n * rather than inferred: `ReactNode` is a union that includes a promise, and\n * a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: NavigationTreeItemRenderProps, leading: ReactNode): ReactNode {\n  return <>\n      {chevronFor(state)}\n      {leading}\n    </>;\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\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 NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is 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.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport { NavigationTreeItem, NavigationTreeSection };\nexport default NavigationTree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","useRipple","RowContent","rowStyles","focus","mergeStatefulStyles","mergeStyles","colors","motion","radii","spacing","typography","styles","chevron","kGNEyG","kWkggS","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","$$css","indent","kZCmMZ","NavigationTreeHeaderProps","children","NavigationTreeItemText","Omit","T","className","leading","style","supporting","trailing","label","textValue","NavigationTreeSectionProps","Parameters","header","chevronClassName","props","ring","chevronFor","state","hasChildItems","isExpanded","itemContent","ripple","isDisabled","isCurrentAncestor","isCurrent","leadingFor","drawerSurface","itemStyles","base","drawer","selectedDrawer","isHovered","hovered","isFocusVisible","focusVisible","isPressed","pressed","disabled","$","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section","stylex.props","RACButton","NavigationTree","_c","props","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { NavigationTreeItemRenderProps, NavigationTreeItemProps as RACNavigationTreeItemProps, NavigationTreeProps as RACNavigationTreeProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NavigationTree as RACNavigationTree, NavigationTreeHeader as RACNavigationTreeHeader, NavigationTreeItem as RACNavigationTreeItem, NavigationTreeItemContent as RACNavigationTreeItemContent, NavigationTreeSection as RACNavigationTreeSection } from 'react-aria-components';\nimport { collectionStyles } from '../../collection/styles';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The navigation drawer page's contents: a nested set of links with the\n// current one marked. For an app's top-level destinations Material Design has\n// the expanded navigation rail replace the drawer, and NavigationRail draws\n// it; this is for a tree of links nested deeper than a rail holds. Each row is\n// the row every list here draws — `src/row`, shared with ListItem, ListBox,\n// List, Tree and Disclosure — under that module's `drawer` variant, which is\n// the page's own 56dp row with a label-large label and a secondary-container\n// pill on the current one.\n//\n// This is Tree's shape over React Aria's navigation primitive, and the\n// difference is what the two are for. A tree selects: rows are chosen and\n// the choice is reported. A navigation tree navigates: each row is a link,\n// and which one is current is decided by matching the route rather than by\n// anything the reader selected. So this takes `selectedRoute` where Tree\n// takes `selectedKeys`, and has no selection at all — React Aria omits every\n// selection prop from it.\n//\n// Three things are this component's own.\n//\n// **A level indents by one caret's width**, exactly as Tree does and for the\n// same reason: React Aria writes the depth on each row as a custom property,\n// and 24dp is the size the drawer page gives its icon, so a level of nesting\n// is as wide as the glyph beside it.\n//\n// **An ancestor of the current row is marked too, and softly.** React Aria\n// reports it, and a drawer whose current row is collapsed out of sight would\n// otherwise show nothing at all. It takes the label's weight rather than the\n// pill, so the trail reads as a trail rather than as a second current row.\n//\n// That weight goes on the label itself, through the row module's\n// `isEmphasized`, and it has to: the row's own `font-weight` never reaches\n// the text, since `RowContent` draws the label in a span stating the\n// label-large role in full, weight included. The pair also has to differ by\n// more than a step — the label's own weight is already the medium one, so a\n// trail set in medium is a trail nobody can see.\n//\n// **The pill's shape is the library's own.** The page gives the active\n// indicator's colour, height and width but keeps its shape behind a token\n// set that does not open to a script — the same gap recorded on the buttons\n// and lists pages. It is drawn as a full pill, which is what the page's own\n// images show and what 56dp of height comes to.\n\nconst styles = {\n  chevron: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1heor9g\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    $$css: true\n  },\n  indent: {\n    kZCmMZ: \"x1187sqy\",\n    $$css: true\n  }\n};\ntype NavigationTreeHeaderProps = {\n  /** The section's heading. */\n  children?: ReactNode;\n};\ntype NavigationTreeItemProps<T extends object = object> = NavigationTreeItemText & Omit<RACNavigationTreeItemProps<T>, 'children' | 'className' | 'style' | 'textValue'> & {\n  /** The rows nested under this one, as further `NavigationTree.Item` entries. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACNavigationTreeItemProps<T>['className'];\n  /** Content before the label: an icon. */\n  leading?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACNavigationTreeItemProps<T>['style'];\n  /** A second line under the label, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the label, such as a count. */\n  trailing?: ReactNode;\n};\n\n// What the row is worth as text, which React Aria requires: a row here wraps\n// its label in elements, so it cannot read one off the children the way a\n// plain-string child would give it. A string label 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 NavigationTreeItemText = {\n  /** The row's label — where it goes. */\n  label: string;\n  /** What typeahead matches the row on. Defaults to the label. */\n  textValue?: string;\n} | {\n  /** The row's label, as something other than a plain string. */\n  label?: ReactNode;\n  /** What typeahead matches the row on, and what names it. */\n  textValue: string;\n};\ntype NavigationTreeProps<T extends object = object> = Omit<RACNavigationTreeProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the tree's render state. */\n  className?: RACNavigationTreeProps<T>['className'];\n  /** A function may compute the style from the tree's render state. */\n  style?: RACNavigationTreeProps<T>['style'];\n};\ntype NavigationTreeSectionProps<T extends object = object> = Omit<Parameters<typeof RACNavigationTreeSection<T>>[0], '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 stylex.props(styles.chevron, focus.ring).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 label lines up with the\n// label of a sibling that opens.\nfunction chevronFor(state: NavigationTreeItemRenderProps): 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: \"x12w9bfk xxk0z11 xvy4d1p xu3v78v x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 xaaet9u 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 whatever the row was given — one order, always, which is what keeps a\n// column of rows reading down. The ripple goes in a box carrying the row's\n// pill — see `drawerSurface` in src/row/styles.ts.\nfunction itemContent(label: ReactNode, leading: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <>\n      <RowContent isDisabled={state.isDisabled} isEmphasized={state.isCurrentAncestor} isSelected={state.isCurrent} leading={leadingFor(state, leading)} supporting={supporting} trailing={trailing} variant=\"drawer\">\n        {label}\n      </RowContent>\n      {state.isDisabled ? null : <span {...stylex.props(rowStyles.drawerSurface)}>{ripple}</span>}\n    </>;\n}\n\n// StyleX cannot target `[data-current]` 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 its ground and colour\n// win over the current container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n// No overline, and so no three-line row: the navigation drawer page gives\n// one item height and one line of text. `List.Item` and `ListBox.Item` take\n// the prop because the lists page is what they draw; this row follows the\n// drawer's own metrics.\nfunction itemStyles(state: NavigationTreeItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.drawer, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isHovered && rowStyles.hovered, state.isFocusVisible && rowStyles.focusVisible, state.isPressed && rowStyles.pressed, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * The caret, then whatever the row was given. Its return type is written out\n * rather than inferred: `ReactNode` is a union that includes a promise, and\n * a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: NavigationTreeItemRenderProps, leading: ReactNode): ReactNode {\n  return <>\n      {chevronFor(state)}\n      {leading}\n    </>;\n}\n\n/**\n * A nested set of links, with the current one marked. Which row is current\n * is React Aria's: give the tree a `selectedRoute` and each row an `href`,\n * and the row whose `href` matches is the current one — its ancestors are\n * marked too, so a collapsed trail still shows where you are.\n *\n * ```tsx\n * <NavigationTree aria-label=\"Label\" selectedRoute=\"#second\">\n *   <NavigationTree.Item href=\"#first\" id=\"first\" label=\"First item\">\n *     <NavigationTree.Item href=\"#second\" id=\"second\" label=\"Second item\" />\n *   </NavigationTree.Item>\n * </NavigationTree>\n * ```\n *\n * There is no selection here, and that is React Aria's design rather than an\n * omission: a navigation tree navigates, so what is current comes from the\n * route rather than from anything the reader picked. `Tree` is the one that\n * selects.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction NavigationTree<T extends object>(props: NavigationTreeProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTree<T> {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\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 NavigationTreeHeader({\n  children\n}: NavigationTreeHeaderProps) {\n  return <RACNavigationTreeHeader className=\"x9f619 x1w5n3ug xkknnkr x14zspaw x1v9cpvo x155f00i x1lz68p4 xw3mh6e x1clyivc x140yoea\">\n      {children}\n    </RACNavigationTreeHeader>;\n}\n\n/**\n * One row, and the rows under it. Give it an `href` — that is what\n * `selectedRoute` is matched against — and an `id`, which is the key\n * expansion is 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.\n */\nfunction NavigationTreeItem<T extends object = object>({\n  children,\n  label,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T> & RefAttributes<HTMLDivElement>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing, ripple.surface)}\n      </RACNavigationTreeItemContent>\n      {children}\n    </RACNavigationTreeItem>;\n}\n\n/**\n * A named group of rows, with its heading above them.\n */\nfunction NavigationTreeSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: NavigationTreeSectionProps<T> & RefAttributes<HTMLDivElement>) {\n  return <RACNavigationTreeSection<T> {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <NavigationTreeHeader>{header}</NavigationTreeHeader>}\n      {children}\n    </RACNavigationTreeSection>;\n}\n\n// What React Aria matches typeahead on, and what names the row.\n// `NavigationTreeItemText` makes one of the two a string, so the last branch\n// is unreachable through the public type — it is there because destructuring\n// the two apart is what loses the narrowing, not because a row can arrive\n// without either.\nfunction textValueFor(textValue: string | undefined, label: ReactNode) {\n  if (textValue !== undefined) {\n    return textValue;\n  }\n  return typeof label === 'string' ? label : '';\n}\nNavigationTree.Item = NavigationTreeItem;\nNavigationTree.Section = NavigationTreeSection;\nexport type { NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport { NavigationTreeItem, NavigationTreeSection };\nexport default NavigationTree;"],"mappings":"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"}

package/dist/components/number-field/index.d.ts

@@ -66,10 +66,11 @@ type NumberFieldProps$1 = {
   /**
    * How the two steppers sit at the end of the box: stacked, the plus over
    * the minus, flush with the box's edge, or side by side as extra-small
-   * icon buttons.
+   * icon buttons. `'none'` draws neither, for a value that is typed rather
+   * than stepped; the keyboard still steps it.
    * @default 'vertical'
    */
-  steppers?: 'horizontal' | 'vertical';
+  steppers?: 'horizontal' | 'none' | 'vertical';
   /**
    * The filled box, or the outlined one: no fill, an outline that thickens
    * and takes the primary role while focused, and the label cutting it once

package/dist/components/number-field/index.js

@@ -3,8 +3,8 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { sizing, spacing, typography } from "../../tokens/design.tokens.stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
-import IconButton from "../icon-button/index.js";
 import { fieldStyles, invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import IconButton from "../icon-button/index.js";
 import { FieldBox, FieldInput, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -14,7 +14,11 @@ import { Button, NumberField } from "react-aria-components";
 `${spacing.lg}${typography.bodyLargeLineHeight}`;
 `${typography.bodyLargeLineHeight}${sizing.controlXs}`;
 const STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;
-const INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;
+const END_INSETS = {
+	horizontal: `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`,
+	none: void 0,
+	vertical: STACKED_INSET
+};
 const styles = {
 	stepper: {
 		k6CgDc: "x12w9bfk",
@@ -84,7 +88,7 @@ const styles = {
 * are the field chrome in `src/field`, shared with every other field.
 */
 function NumberField$1(t0) {
-	const $ = c(39);
+	const $ = c(30);
 	const { decrementLabel, description, error, floatingLabel: t1, incrementLabel, inputRef, isDisabled: t2, isWheelDisabled: t3, label, numeric: t4, steppers: t5, variant: t6, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -102,138 +106,110 @@ function NumberField$1(t0) {
 		$[1] = t7;
 	} else t7 = $[1];
 	const t8 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	const t9 = inline ? INLINE_INSET : STACKED_INSET;
+	const t9 = END_INSETS[steppers];
 	let t10;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t10 = {
-			0: { className: "x1cy8zhl x9f619 x78zum5 x126z3so" },
-			1: { className: "x9f619 x78zum5 x126z3so x6s0dn4" }
-		};
-		$[2] = t10;
-	} else t10 = $[2];
-	const t11 = t10[!!inline << 0];
-	let t12;
-	if ($[3] !== inputRef || $[4] !== numeric) {
-		t12 = /* @__PURE__ */ jsx(FieldInput, {
+	if ($[2] !== decrementLabel || $[3] !== incrementLabel || $[4] !== inline || $[5] !== inputRef || $[6] !== numeric || $[7] !== steppers || $[8] !== variant) {
+		t10 = steppers === "none" ? /* @__PURE__ */ jsx(FieldInput, {
 			numeric,
 			ref: inputRef
+		}) : /* @__PURE__ */ jsxs("div", {
+			...{
+				0: { className: "x1cy8zhl x9f619 x78zum5 x126z3so" },
+				1: { className: "x9f619 x78zum5 x126z3so x6s0dn4" }
+			}[!!inline << 0],
+			children: [/* @__PURE__ */ jsx(FieldInput, {
+				numeric,
+				ref: inputRef
+			}), /* @__PURE__ */ jsx("div", {
+				...{
+					0: { className: "x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
+					2: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv" },
+					1: { className: "x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
+					3: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf" }
+				}[!!inline << 1 | !!(!inline && variant === "outlined") << 0],
+				children: inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+					"aria-label": decrementLabel,
+					size: "xs",
+					slot: "decrement",
+					children: /* @__PURE__ */ jsx(MinusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
+				}), /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": incrementLabel,
+					size: "xs",
+					slot: "increment",
+					children: /* @__PURE__ */ jsx(PlusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
+				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StackedStepper, {
+					label: incrementLabel,
+					outlined: variant === "outlined",
+					slot: "increment",
+					children: /* @__PURE__ */ jsx(PlusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
+				}), /* @__PURE__ */ jsx(StackedStepper, {
+					label: decrementLabel,
+					outlined: variant === "outlined",
+					slot: "decrement",
+					children: /* @__PURE__ */ jsx(MinusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
+				})] })
+			})]
 		});
-		$[3] = inputRef;
-		$[4] = numeric;
-		$[5] = t12;
-	} else t12 = $[5];
-	let t13;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = {
-			0: { className: "x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
-			2: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv" },
-			1: { className: "x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
-			3: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf" }
-		};
-		$[6] = t13;
-	} else t13 = $[6];
-	const t14 = t13[!!inline << 1 | !!(!inline && variant === "outlined") << 0];
-	let t15;
-	if ($[7] !== decrementLabel || $[8] !== incrementLabel || $[9] !== inline || $[10] !== variant) {
-		t15 = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-			"aria-label": decrementLabel,
-			size: "xs",
-			slot: "decrement",
-			children: /* @__PURE__ */ jsx(MinusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
-		}), /* @__PURE__ */ jsx(IconButton, {
-			"aria-label": incrementLabel,
-			size: "xs",
-			slot: "increment",
-			children: /* @__PURE__ */ jsx(PlusGlyph, { className: "xlzyvqe x1lliihq x15vhz18" })
-		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StackedStepper, {
-			label: incrementLabel,
-			outlined: variant === "outlined",
-			slot: "increment",
-			children: /* @__PURE__ */ jsx(PlusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
-		}), /* @__PURE__ */ jsx(StackedStepper, {
-			label: decrementLabel,
-			outlined: variant === "outlined",
-			slot: "decrement",
-			children: /* @__PURE__ */ jsx(MinusGlyph, { className: "x1qx5ct2 x1lliihq xw4jnvo" })
-		})] });
-		$[7] = decrementLabel;
-		$[8] = incrementLabel;
-		$[9] = inline;
-		$[10] = variant;
-		$[11] = t15;
-	} else t15 = $[11];
-	let t16;
-	if ($[12] !== t14 || $[13] !== t15) {
-		t16 = /* @__PURE__ */ jsx("div", {
-			...t14,
-			children: t15
-		});
-		$[12] = t14;
-		$[13] = t15;
-		$[14] = t16;
-	} else t16 = $[14];
-	let t17;
-	if ($[15] !== t11 || $[16] !== t12 || $[17] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			...t11,
-			children: [t12, t16]
-		});
-		$[15] = t11;
-		$[16] = t12;
-		$[17] = t16;
-		$[18] = t17;
-	} else t17 = $[18];
-	let t18;
-	if ($[19] !== floatingLabel || $[20] !== label || $[21] !== props$1.isRequired || $[22] !== t17 || $[23] !== t9 || $[24] !== variant) {
-		t18 = /* @__PURE__ */ jsx(FieldBox, {
+		$[2] = decrementLabel;
+		$[3] = incrementLabel;
+		$[4] = inline;
+		$[5] = inputRef;
+		$[6] = numeric;
+		$[7] = steppers;
+		$[8] = variant;
+		$[9] = t10;
+	} else t10 = $[9];
+	let t11;
+	if ($[10] !== floatingLabel || $[11] !== label || $[12] !== props$1.isRequired || $[13] !== t10 || $[14] !== t9 || $[15] !== variant) {
+		t11 = /* @__PURE__ */ jsx(FieldBox, {
 			endInset: t9,
 			floatingLabel,
 			isRequired: props$1.isRequired,
 			label,
 			variant,
-			children: t17
+			children: t10
 		});
-		$[19] = floatingLabel;
-		$[20] = label;
-		$[21] = props$1.isRequired;
-		$[22] = t17;
-		$[23] = t9;
-		$[24] = variant;
-		$[25] = t18;
-	} else t18 = $[25];
-	let t19;
-	if ($[26] !== description || $[27] !== error) {
-		t19 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[10] = floatingLabel;
+		$[11] = label;
+		$[12] = props$1.isRequired;
+		$[13] = t10;
+		$[14] = t9;
+		$[15] = variant;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== description || $[18] !== error) {
+		t12 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[26] = description;
-		$[27] = error;
-		$[28] = t19;
-	} else t19 = $[28];
-	let t20;
-	if ($[29] !== T0 || $[30] !== isDisabled || $[31] !== isWheelDisabled || $[32] !== props$1 || $[33] !== t18 || $[34] !== t19 || $[35] !== t7 || $[36] !== t8 || $[37] !== validationBehavior) {
-		t20 = /* @__PURE__ */ jsxs(T0, {
+		$[17] = description;
+		$[18] = error;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== T0 || $[21] !== isDisabled || $[22] !== isWheelDisabled || $[23] !== props$1 || $[24] !== t11 || $[25] !== t12 || $[26] !== t7 || $[27] !== t8 || $[28] !== validationBehavior) {
+		t13 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t7,
 			isWheelDisabled,
 			validationBehavior,
 			...props$1,
 			...t8,
-			children: [t18, t19]
+			children: [t11, t12]
 		});
-		$[29] = T0;
-		$[30] = isDisabled;
-		$[31] = isWheelDisabled;
-		$[32] = props$1;
-		$[33] = t18;
-		$[34] = t19;
-		$[35] = t7;
-		$[36] = t8;
-		$[37] = validationBehavior;
-		$[38] = t20;
-	} else t20 = $[38];
-	return t20;
+		$[20] = T0;
+		$[21] = isDisabled;
+		$[22] = isWheelDisabled;
+		$[23] = props$1;
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = validationBehavior;
+		$[29] = t13;
+	} else t13 = $[29];
+	return t13;
 }
 function StackedStepper(t0) {
 	const $ = c(8);