@kanso-labs/kanso-ui 0.34.0 → 0.34.2

package/dist/components/meter/index.d.ts

@@ -21,8 +21,9 @@ type MeterProps$1 = Omit<MeterProps, 'children' | 'className' | 'style'> & {
   /**
    * Which colours the measurement is drawn in. `primary` states without
    * ranking; `negative` and `positive` say the value is bad or good, and
-   * recolour the active indicator alone so a column of meters still shares
-   * one track.
+   * recolour the active indicator and the stop indicator, leaving the track
+   * in its secondary container so a column of meters still shares one
+   * track.
    * @default 'primary'
    */
   tone?: MeterTone;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","_c","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","valueText","percentage"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator alone so a column of meters still shares\n   * one track.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;AA+EA,SAAAK,QAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAC;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAc,IAAAC,UAAAC,IAAAC,UAAAC,IAAAjB,WAAAkB,IAAAhB,MAAAiB,IAAA,GAAAC,YAAAf;EAAAN,QAAAc;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAjB,YAAAkB,OAAAG,KAAAA,IAAA,OAAAH;EACAhB,OAAAiB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAjB;EAAmBuB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBP,MAAaM,gBAAe2B,IAAK,GAAGF,OAAK;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAJ;CAAA,OAAA;EAAAM,KAAAF,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIW,KAAAU,aAAaxB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHP,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFNS;AAEM;AAOf,SAASQ,aAAaxB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQsB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBzB;EAAO,OAAOC,YAAYwB,MAAMC,YAAYJ,KAAAA;CAAU,CAAA,GAC9E,oBAAC,eAAD;EAAe,YAAYG,MAAME;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ"}
+{"version":3,"file":"index.js","names":["ReactNode","MeterRenderProps","MeterProps","RACMeterProps","stylex","Meter","RACMeter","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","Omit","className","label","showValue","style","tone","MeterTone","Extract","t0","$","_c","T0","t1","t2","t3","t4","t5","maxValue","t6","minValue","t7","t8","t9","props","undefined","root","meterContent","state","valueText","percentage"],"sources":["../../../src/components/meter/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { MeterRenderProps, MeterProps as RACMeterProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Meter as RACMeter } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// A meter is the progress indicators page's line, drawn for a measurement\n// rather than for a task: the same three parts at the same 4dp, the same\n// label row above them, and the same motion when the number changes. All of\n// that is `src/indicator`, shared with ProgressIndicator, so what is here is\n// the two things that make it a meter rather than a progress bar.\n//\n// The first is the role. React Aria's `Meter` reports `meter` rather than\n// `progressbar`, and a screen reader says the two differently: one is how\n// full something is, the other how far along something is. That difference\n// is the whole reason both exist, and it is why a meter has no\n// indeterminate state to offer — a measurement whose value is unknown is\n// not a measurement.\n//\n// The second is `tone`. The page draws one colour pair, which is right for\n// a task: progress does not become good or bad on its way to done. A\n// measurement does — a disk at 96% and a signal at 96% mean opposite\n// things — so `negative` and `positive` recolour the active indicator and\n// the stop indicator while leaving the track alone. A column of meters then\n// reads as one scale with bars of different colours, rather than as several\n// gauges that happen to sit together. Which tone a value deserves is the\n// call site's to decide: nothing here reads the number and picks one, since\n// where the line falls between good and bad is the measurement's own\n// business.\n//\n// The value is shown by default, where a progress indicator hides it. A\n// meter is the number — a bar with no figure beside it says only \"some\" —\n// and `formatOptions` is what makes that figure read as a percentage, bytes\n// or a plain count, in the page's locale.\n\ntype MeterProps = Omit<RACMeterProps, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the meter's render state. */\n  className?: RACMeterProps['className'];\n  /**\n   * What is being measured, shown above the line. A screen reader reads it\n   * as the meter's name; a meter whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label.\n   * @default true\n   */\n  showValue?: boolean;\n  /** A function may compute the style from the meter's render state. */\n  style?: RACMeterProps['style'];\n  /**\n   * Which colours the measurement is drawn in. `primary` states without\n   * ranking; `negative` and `positive` say the value is bad or good, and\n   * recolour the active indicator and the stop indicator, leaving the track\n   * in its secondary container so a column of meters still shares one\n   * track.\n   * @default 'primary'\n   */\n  tone?: MeterTone;\n};\n\n// The three of the shared line's four tones a meter draws. The fourth,\n// `inherit`, is for an indicator inside something that carries its own\n// colour, which is a pending button rather than a measurement.\ntype MeterTone = Extract<IndicatorTone, 'negative' | 'positive' | 'primary'>;\n\n/**\n * How full something is, on a scale it names: disk used, storage left,\n * a rating out of five. Pass `value` between `minValue` and `maxValue`, and\n * `formatOptions` to say how the number reads. For how far along a task is,\n * reach for ProgressIndicator instead — a meter has no indeterminate state,\n * because a measurement always has a value.\n *\n * The call site's `className` and `style` land on the meter as a whole,\n * which is the element a layout positions.\n */\nfunction Meter({\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = true,\n  tone = 'primary',\n  ...props\n}: MeterProps) {\n  return <RACMeter maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root), props)}>\n      {meterContent(label, showValue, tone)}\n    </RACMeter>;\n}\n\n// What the meter draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction meterContent(label: ReactNode, showValue: boolean, tone: MeterTone) {\n  return (state: MeterRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue ? state.valueText : undefined} />\n      <IndicatorLine percentage={state.percentage} tone={tone} />\n    </>;\n}\nexport type { MeterProps, MeterTone };\nexport default Meter;"],"mappings":";;;;;;;;;;;;;;;;;;AAgFA,SAAAK,QAAAe,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAT;CAAA,IAAAC;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAV;CAAA,IAAAI,EAAA,OAAAD,IAAA;EAAe,MAAA,EAAAN,OAAAc,IAAAC,UAAAC,IAAAC,UAAAC,IAAAjB,WAAAkB,IAAAhB,MAAAiB,IAAA,GAAAC,YAAAf;EAAAN,QAAAc;EAEb,MAAAC,WAAAC,OAAAM,KAAAA,IAAA,MAAAN;EACA,MAAAC,WAAAC,OAAAI,KAAAA,IAAA,IAAAJ;EACAjB,YAAAkB,OAAAG,KAAAA,IAAA,OAAAH;EACAhB,OAAAiB,OAAAE,KAAAA,IAAA,YAAAF;EAGQX,KAAAjB;EAAmBuB,KAAAA;EAAoBE,KAAAA;EAAcI,KAAAA;EAAWR,KAAAhB,oBAAoBP,MAAaM,gBAAe2B,IAAK,GAAGF,OAAK;EAACd,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAP;EAAAO,EAAA,KAAAN;EAAAM,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAJ;CAAA,OAAA;EAAAM,KAAAF,EAAA;EAAAP,QAAAO,EAAA;EAAAN,YAAAM,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAJ,OAAAI,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAP,SAAAO,EAAA,QAAAN,aAAAM,EAAA,QAAAJ,MAAA;EACjIW,KAAAU,aAAaxB,OAAOC,WAAWE,IAAI;EAACI,EAAA,KAAAP;EAAAO,EAAA,MAAAN;EAAAM,EAAA,MAAAJ;EAAAI,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAO,IAAA;EADlCE,KAAA,oBAAC,IAAD;GAAoBD,UAAAA;GAAoBE,UAAAA;GAAQ,GAAMI;GAAK,GAAMR;GACnEC,UAAAA;EADW,CAAA;EAEHP,EAAA,MAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFNS;AAEM;AAOf,SAASQ,aAAaxB,OAAkBC,WAAoBE,MAAiB;CAC3E,QAAQsB,UAA4B,qBAAA,UAAA,EAAA,UAAA,CAChC,oBAAC,iBAAD;EAAwBzB;EAAO,OAAOC,YAAYwB,MAAMC,YAAYJ,KAAAA;CAAU,CAAA,GAC9E,oBAAC,eAAD;EAAe,YAAYG,MAAME;EAAkBxB;CAAK,CAAA,CAC1D,EAAA,CAAA;AACJ"}

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

@@ -84,7 +84,7 @@ declare namespace NavigationTree$1 {
  * Rows nested as `children` are what make it a branch; a row with none is a
  * leaf and draws no caret.
  */
-declare function NavigationTreeItem$1<T extends object = object>({ children, label, leading, supporting, textValue, trailing, ...props }: NavigationTreeItemProps$1<T>): import("react").JSX.Element;
+declare function NavigationTreeItem$1<T extends object = object>({ children, label, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, supporting, textValue, trailing, ...props }: NavigationTreeItemProps$1<T>): import("react").JSX.Element;
 /**
  * A named group of rows, with its heading above them.
  */

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

@@ -2,6 +2,7 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
 import { focus } from "../../styles/focus.js";
+import { useRipple } from "../../hooks/useRipple.js";
 import { rowStyles } from "../../row/styles.js";
 import { collectionStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
@@ -43,8 +44,8 @@ function chevronFor(state) {
 		}[!!state.isExpanded << 0] })
 	});
 }
-function itemContent(label, leading, supporting, trailing) {
-	return (state) => /* @__PURE__ */ jsx(RowContent, {
+function itemContent(label, leading, supporting, trailing, ripple) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isEmphasized: state.isCurrentAncestor,
 		isSelected: state.isCurrent,
@@ -53,7 +54,7 @@ function itemContent(label, leading, supporting, trailing) {
 		trailing,
 		variant: "drawer",
 		children: label
-	});
+	}), state.isDisabled ? null : ripple] });
 }
 function itemStyles(state) {
 	return props(rowStyles.base, rowStyles.drawer, rowStyles.interactive, styles.indent, state.isCurrent && rowStyles.selectedDrawer, state.isDisabled && rowStyles.disabled);
@@ -135,85 +136,70 @@ function NavigationTreeHeader$1(t0) {
 * leaf and draws no caret.
 */
 function NavigationTreeItem$1(t0) {
-	const $ = c(27);
-	let T0;
-	let children;
-	let label;
-	let leading;
-	let supporting;
+	const $ = c(25);
+	const { children, label, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, supporting, textValue, trailing, ...props } = t0;
 	let t1;
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+		t1 = {
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onContextMenu;
+		$[1] = onPointerCancel;
+		$[2] = onPointerDown;
+		$[3] = onPointerLeave;
+		$[4] = onPointerUp;
+		$[5] = t1;
+	} else t1 = $[5];
+	const ripple = useRipple(true, t1, true);
+	const T0 = NavigationTreeItem;
 	let t2;
-	let t3;
-	let trailing;
-	if ($[0] !== t0) {
-		const { children: t4, label: t5, leading: t6, supporting: t7, textValue, trailing: t8, ...props } = t0;
-		children = t4;
-		label = t5;
-		leading = t6;
-		supporting = t7;
-		trailing = t8;
-		T0 = NavigationTreeItem;
-		if ($[10] !== label || $[11] !== textValue) {
-			t1 = textValueFor(textValue, label);
-			$[10] = label;
-			$[11] = textValue;
-			$[12] = t1;
-		} else t1 = $[12];
-		t2 = props;
-		t3 = mergeStatefulStyles(itemStyles, props);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = children;
-		$[3] = label;
-		$[4] = leading;
-		$[5] = supporting;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = trailing;
-	} else {
-		T0 = $[1];
-		children = $[2];
-		label = $[3];
-		leading = $[4];
-		supporting = $[5];
-		t1 = $[6];
-		t2 = $[7];
-		t3 = $[8];
-		trailing = $[9];
-	}
-	let t4;
-	if ($[13] !== label || $[14] !== leading || $[15] !== supporting || $[16] !== trailing) {
-		t4 = itemContent(label, leading, supporting, trailing);
-		$[13] = label;
-		$[14] = leading;
-		$[15] = supporting;
-		$[16] = trailing;
-		$[17] = t4;
-	} else t4 = $[17];
+	if ($[6] !== label || $[7] !== textValue) {
+		t2 = textValueFor(textValue, label);
+		$[6] = label;
+		$[7] = textValue;
+		$[8] = t2;
+	} else t2 = $[8];
+	const t3 = ripple.handlers;
+	const t4 = mergeStatefulStyles(itemStyles, props);
 	let t5;
-	if ($[18] !== t4) {
-		t5 = /* @__PURE__ */ jsx(NavigationTreeItemContent, { children: t4 });
-		$[18] = t4;
-		$[19] = t5;
-	} else t5 = $[19];
+	if ($[9] !== label || $[10] !== leading || $[11] !== ripple.surface || $[12] !== supporting || $[13] !== trailing) {
+		t5 = itemContent(label, leading, supporting, trailing, ripple.surface);
+		$[9] = label;
+		$[10] = leading;
+		$[11] = ripple.surface;
+		$[12] = supporting;
+		$[13] = trailing;
+		$[14] = t5;
+	} else t5 = $[14];
 	let t6;
-	if ($[20] !== T0 || $[21] !== children || $[22] !== t1 || $[23] !== t2 || $[24] !== t3 || $[25] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(T0, {
-			textValue: t1,
-			...t2,
+	if ($[15] !== t5) {
+		t6 = /* @__PURE__ */ jsx(NavigationTreeItemContent, { children: t5 });
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== T0 || $[18] !== children || $[19] !== props || $[20] !== ripple.handlers || $[21] !== t2 || $[22] !== t4 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T0, {
+			textValue: t2,
 			...t3,
-			children: [t5, children]
+			...props,
+			...t4,
+			children: [t6, children]
 		});
-		$[20] = T0;
-		$[21] = children;
-		$[22] = t1;
-		$[23] = t2;
-		$[24] = t3;
-		$[25] = t5;
-		$[26] = t6;
-	} else t6 = $[26];
-	return t6;
+		$[17] = T0;
+		$[18] = children;
+		$[19] = props;
+		$[20] = ripple.handlers;
+		$[21] = t2;
+		$[22] = t4;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
 }
 /**
 * A named group of rows, with its heading above them.

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","NavigationTreeItemRenderProps","NavigationTreeItemProps","RACNavigationTreeItemProps","NavigationTreeProps","RACNavigationTreeProps","stylex","Button","RACButton","NavigationTree","RACNavigationTree","NavigationTreeHeader","RACNavigationTreeHeader","NavigationTreeItem","RACNavigationTreeItem","NavigationTreeItemContent","RACNavigationTreeItemContent","NavigationTreeSection","RACNavigationTreeSection","collectionStyles","ChevronEndGlyph","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","isDisabled","isCurrentAncestor","isCurrent","leadingFor","itemStyles","base","drawer","interactive","selectedDrawer","disabled","$","_c","t0","container","t1","T0","t2","t3","t4","t5","t6","t7","t8","textValueFor","section","undefined","Item","Section"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["import type { ReactNode } 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 { 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. Each row is the row every list here draws — `src/row`,\n// shared with ListItem, ListBox, List, Tree and Disclosure — under that\n// module's `drawer` variant, which is the page's own 56dp row with a\n// label-large label and a secondary-container 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 x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk 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 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) {\n  return (state: NavigationTreeItemRenderProps): ReactNode => <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}\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 it wins over both the\n// interactive and the current branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\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, rowStyles.interactive, styles.indent, state.isCurrent && rowStyles.selectedDrawer, 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>) {\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  supporting,\n  textValue,\n  trailing,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  return <RACNavigationTreeItem<T> textValue={textValueFor(textValue, label)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      <RACNavigationTreeItemContent>\n        {itemContent(label, leading, supporting, trailing)}\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>) {\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 { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport default NavigationTree;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","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","interactive","selectedDrawer","disabled","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","T0","t2","textValueFor","t3","handlers","t4","t5","surface","t6","t7","section","undefined","Item","Section"],"sources":["../../../src/components/navigation-tree/index.tsx"],"sourcesContent":["import type { ReactNode } 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. Each row is the row every list here draws — `src/row`,\n// shared with ListItem, ListBox, List, Tree and Disclosure — under that\n// module's `drawer` variant, which is the page's own 56dp row with a\n// label-large label and a secondary-container 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 x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk 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 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 it wins over both the\n// interactive and the current branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\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, rowStyles.interactive, styles.indent, state.isCurrent && rowStyles.selectedDrawer, 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>) {\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>) {\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>) {\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 { NavigationTreeHeaderProps, NavigationTreeItemProps, NavigationTreeProps, NavigationTreeSectionProps };\nexport default NavigationTree;"],"mappings":";;;;;;;;;;;;AAqDA,MAAMgC,SAAS;CACbC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,QAAQ;EACNC,QAAQ;EACRF,OAAO;CACT;AACF;AA0DA,SAASkB,mBAAmB;CAC1B,OAAOzD,MAAa0B,OAAOC,SAAST,MAAMyC,IAAI,CAAC,CAACZ,aAAa;AAC/D;AASA,SAASa,WAAWC,OAAiD;CACnE,IAAI,CAACA,MAAMC,eACT,OAAO,oBAAC,QAAD,EAAM,WAAU,0BAAyB,CAAA;CAElD,OAAO,oBAAC,QAAD;EAAW,WAAWL;EAAkB,MAAK;EAChD,UAAA,oBAAC,iBAAD,EAAiB,GAAI;GACrB,GAAG,EACDV,WAAW,sEACb;GACA,GAAG,EACDA,WAAW,sEACb;EACF,EAAE,CAAC,CAACc,MAAME,cAAc,GAAG,CAAA;CAChB,CAAA;AACf;AAKA,SAASC,YAAYZ,OAAkBJ,SAAoBE,YAAuBC,UAAqBc,QAAmB;CACxH,QAAQJ,UAAoD,qBAAA,UAAA,EAAA,UAAA,CACxD,oBAAC,YAAD;EAAY,YAAYA,MAAMK;EAAY,cAAcL,MAAMM;EAAmB,YAAYN,MAAMO;EAAW,SAASC,WAAWR,OAAOb,OAAO;EAAeE;EAAsBC;EAAU,SAAQ;EACpMC,UAAAA;CACS,CAAA,GACXS,MAAMK,aAAa,OAAOD,MAC7B,EAAA,CAAA;AACJ;AAWA,SAASK,WAAWT,OAAsC;CACxD,OAAO7D,MAAaiB,UAAUsD,MAAMtD,UAAUuD,QAAQvD,UAAUwD,aAAa/C,OAAOc,QAAQqB,MAAMO,aAAanD,UAAUyD,gBAAgBb,MAAMK,cAAcjD,UAAU0D,QAAQ;AACjL;;;;;;AAOA,SAASN,WAAWR,OAAsCb,SAA+B;CACvF,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFY,WAAWC,KAAK,GAChBb,OACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;;AAwBA,SAAA7C,iBAAAuD,SAAA;CAAA,MAAAkB,IAAAC,EAAA,CAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAlB,SAAA;EAC8CoB,KAAA3D,oBAAoBnB,MAAaa,iBAAgBkE,SAAU,GAAGrB,OAAK;EAACkB,EAAA,KAAAlB;EAAAkB,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAlB,WAAAkB,EAAA,OAAAE,IAAA;EAAzGE,KAAA,oBAAC,gBAAD;GAAkB,GAAQtB;GAAK,GAAMoB;EAAoE,CAAA;EAAIF,EAAA,KAAAlB;EAAAkB,EAAA,KAAAE;EAAAF,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAA7GI;AAA6G;;;;;AAOtH,SAAA3E,uBAAAyE,IAAA;CAAA,MAAAF,IAAAC,EAAA,CAAA;CAA8B,MAAA,EAAAlC,aAAAmC;CAEF,IAAAE;CAAA,IAAAJ,EAAA,OAAAjC,UAAA;EACnBqC,KAAA,oBAAC,sBAAD;GAAmC,WAAA;GACrCrC;EAD0B,CAAA;EAEHiC,EAAA,KAAAjC;EAAAiC,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFrBI;AAEqB;;;;;;;;;AAW9B,SAAAzE,qBAAAuE,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAuD,MAAA,EAAAlC,UAAAS,OAAAJ,SAAAiC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAAnC,YAAAG,WAAAF,UAAA,GAAAO,UAAAoB;CAa1B,IAAAE;CAAA,IAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAEoBL,KAAA;GAAAC;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAACT,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAND,MAAAX,SAAelD,UAA0B,MAAMiE,IAM5C,IAAI;CACC,MAAAM,KAAA9E;CAAqB,IAAA+E;CAAA,IAAAX,EAAA,OAAAxB,SAAAwB,EAAA,OAAAvB,WAAA;EAAekC,KAAAC,aAAanC,WAAWD,KAAK;EAACwB,EAAA,KAAAxB;EAAAwB,EAAA,KAAAvB;EAAAuB,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAM,MAAAa,KAAAxB,OAAMyB;CAA0B,MAAAC,KAAAxE,oBAAoBmD,YAAYZ,KAAK;CAAC,IAAAkC;CAAA,IAAAhB,EAAA,OAAAxB,SAAAwB,EAAA,QAAA5B,WAAA4B,EAAA,QAAAX,OAAA4B,WAAAjB,EAAA,QAAA1B,cAAA0B,EAAA,QAAAzB,UAAA;EAE/IyC,KAAA5B,YAAYZ,OAAOJ,SAASE,YAAYC,UAAUc,OAAM4B,OAAQ;EAACjB,EAAA,KAAAxB;EAAAwB,EAAA,MAAA5B;EAAA4B,EAAA,MAAAX,OAAA4B;EAAAjB,EAAA,MAAA1B;EAAA0B,EAAA,MAAAzB;EAAAyB,EAAA,MAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAgB,IAAA;EADpEE,KAAA,oBAAC,2BAAD,EAAA,UACGF,GAD0B,CAAA;EAEEhB,EAAA,MAAAgB;EAAAhB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,IAAAmB;CAAA,IAAAnB,EAAA,QAAAU,MAAAV,EAAA,QAAAjC,YAAAiC,EAAA,QAAAlB,SAAAkB,EAAA,QAAAX,OAAAyB,YAAAd,EAAA,QAAAW,MAAAX,EAAA,QAAAe,MAAAf,EAAA,QAAAkB,IAAA;EAH5BC,KAAA,qBAAC,IAAD;GAAqC,WAAAR;GAA8B,GAAME;GAAe,GAAM/B;GAAK,GAAMiC;GAAzG,UAAA,CACHG,IAGCnD,QAJwB;;EAKHiC,EAAA,MAAAU;EAAAV,EAAA,MAAAjC;EAAAiC,EAAA,MAAAlB;EAAAkB,EAAA,MAAAX,OAAAyB;EAAAd,EAAA,MAAAW;EAAAX,EAAA,MAAAe;EAAAf,EAAA,MAAAkB;EAAAlB,EAAA,MAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,OALnBmB;AAKmB;;;;AAM5B,SAAApF,wBAAAmE,IAAA;CAAA,MAAAF,IAAAC,EAAA,EAAA;CAAA,IAAAS;CAAA,IAAA3C;CAAA,IAAAa;CAAA,IAAAwB;CAAA,IAAAO;CAAA,IAAAX,EAAA,OAAAE,IAAA;EAA0D,MAAA,EAAAnC,UAAA8C,IAAAjC,QAAAmC,IAAA,GAAAjC,YAAAoB;EAAAnC,WAAA8C;EAAAjC,SAAAmC;EAKhDL,KAAA1E;EAAgC8C,KAAAA;EAAW6B,KAAAnE,YAAYpB,MAAaa,iBAAgBmF,OAAQ,GAAGtC,OAAK;EAACkB,EAAA,KAAAE;EAAAF,EAAA,KAAAU;EAAAV,EAAA,KAAAjC;EAAAiC,EAAA,KAAApB;EAAAoB,EAAA,KAAAI;EAAAJ,EAAA,KAAAW;CAAA,OAAA;EAAAD,KAAAV,EAAA;EAAAjC,WAAAiC,EAAA;EAAApB,SAAAoB,EAAA;EAAAI,KAAAJ,EAAA;EAAAW,KAAAX,EAAA;CAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAApB,QAAA;EACxGiC,KAAAjC,WAAWyC,KAAAA,IAAX,OAA8B,oBAAC,wBAAD,EAAA,UAAuBzC,OAAF,CAAA;EAAgCoB,EAAA,KAAApB;EAAAoB,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAAU,MAAAV,EAAA,OAAAjC,YAAAiC,EAAA,QAAAI,MAAAJ,EAAA,QAAAW,MAAAX,EAAA,QAAAa,IAAA;EADjFE,KAAA,qBAAC,IAAD;GAAyB,GAAQjC;GAAK,GAAM6B;GAA5C,UAAA,CACFE,IACA9C,QAF2B;;EAGHiC,EAAA,KAAAU;EAAAV,EAAA,KAAAjC;EAAAiC,EAAA,MAAAI;EAAAJ,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAHtBe;AAGsB;AAQ/B,SAASH,aAAanC,WAA+BD,OAAkB;CACrE,IAAIC,cAAc4C,KAAAA,GAChB,OAAO5C;CAET,OAAO,OAAOD,UAAU,WAAWA,QAAQ;AAC7C;AACAjD,iBAAe+F,OAAO3F;AACtBJ,iBAAegG,UAAUxF"}

package/dist/components/product-icon/index.js

@@ -89,16 +89,32 @@ function initialFrom(name) {
 * can be handed over as it was drawn.
 */
 function ProductIcon(t0) {
-	const $ = c(13);
+	const $ = c(18);
 	const { name, render, size: t1, src, tone: t2, ...props$1 } = t0;
 	const size = t1 === void 0 ? "md" : t1;
 	const tone = t2 === void 0 ? "primary" : t2;
 	const status = useImageLoadingStatus(src);
-	const t3 = "span";
-	const t4 = "img";
+	let t3;
+	if ($[0] !== name) {
+		t3 = name.trim();
+		$[0] = name;
+		$[1] = t3;
+	} else t3 = $[1];
+	const named = t3 !== "";
+	const t4 = "span";
 	let t5;
-	if ($[0] !== name || $[1] !== src || $[2] !== status || $[3] !== tone) {
-		t5 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
+	if ($[2] !== name || $[3] !== named) {
+		t5 = named ? {
+			"aria-label": name,
+			role: "img"
+		} : {};
+		$[2] = name;
+		$[3] = named;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== name || $[6] !== src || $[7] !== status || $[8] !== tone) {
+		t6 = status === "loaded" ? /* @__PURE__ */ jsx("img", {
 			alt: "",
 			src,
 			className: "x5yr21d xh8yej3 x19kjcj4"
@@ -106,40 +122,39 @@ function ProductIcon(t0) {
 			...props(styles.fallback, styles[tone]),
 			children: initialFrom(name)
 		});
-		$[0] = name;
-		$[1] = src;
-		$[2] = status;
-		$[3] = tone;
-		$[4] = t5;
-	} else t5 = $[4];
-	const t6 = mergeStyles(props(styles.base, styles[size]), props$1);
-	let t7;
-	if ($[5] !== name || $[6] !== props$1 || $[7] !== t5 || $[8] !== t6) {
-		t7 = {
-			"aria-label": name,
-			role: t4,
-			...props$1,
-			children: t5,
-			...t6
-		};
 		$[5] = name;
-		$[6] = props$1;
-		$[7] = t5;
-		$[8] = t6;
-		$[9] = t7;
-	} else t7 = $[9];
+		$[6] = src;
+		$[7] = status;
+		$[8] = tone;
+		$[9] = t6;
+	} else t6 = $[9];
+	const t7 = mergeStyles(props(styles.base, styles[size]), props$1);
 	let t8;
-	if ($[10] !== render || $[11] !== t7) {
+	if ($[10] !== props$1 || $[11] !== t5 || $[12] !== t6 || $[13] !== t7) {
 		t8 = {
-			defaultTagName: t3,
-			props: t7,
+			...t5,
+			...props$1,
+			children: t6,
+			...t7
+		};
+		$[10] = props$1;
+		$[11] = t5;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== render || $[16] !== t8) {
+		t9 = {
+			defaultTagName: t4,
+			props: t8,
 			render
 		};
-		$[10] = render;
-		$[11] = t7;
-		$[12] = t8;
-	} else t8 = $[12];
-	return useRender(t8);
+		$[15] = render;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	return useRender(t9);
 }
 //#endregion
 export { ProductIcon as default };

package/dist/components/product-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","t4","t5","t6","t7","role","children","t8","defaultTagName"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark, so its sizes are Avatar's —\n// 36, 40 and 56 — which is what lets a mark and a person fill the same slot.\n// Avatar's own comment is where those three are argued, against the\n// library's control scale rather than against a page. The fallback's tint is\n// a container role under its on-colour, the pairing every filled surface in\n// the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      'aria-label': name,\n      role: 'img',\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","named","t4","t5","role","t6","t7","t8","children","t9","defaultTagName"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark, so its sizes are Avatar's —\n// 36, 40 and 56 — which is what lets a mark and a person fill the same slot.\n// Avatar's own comment is where those three are argued, against the\n// library's control scale rather than against a page. The fallback's tint is\n// a container role under its on-colour, the pairing every filled surface in\n// the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the icon is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initial, or its mark with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":"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"}

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

@@ -11,7 +11,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Token, TokenField, TokenInput } from "react-aria-components";
 //#region src/components/token-field/index.tsx
 const styles = { token: {
-	kfSwDN: "x87ps6o",
 	kXLuUW: "xxymvpz",
 	$$css: true
 } };
@@ -25,9 +24,12 @@ function isPopulated(value) {
 	if (value === void 0) return;
 	return value.segments.some((segment) => segment.text.length > 0);
 }
+function tokenClassName({ isSelected }) {
+	return props(chipStyles.base, focus.ring, isSelected ? chipStyles.selected : chipStyles.unselected, styles.token).className ?? "";
+}
 function tokenContent(renderToken) {
 	return (segment) => /* @__PURE__ */ jsx(Token, {
-		...props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token),
+		className: tokenClassName,
 		children: chipLabel(renderToken === void 0 ? segment.text : renderToken(segment))
 	});
 }

package/dist/components/token-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","useState","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipLabel","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","changeHandler","setHeld","value","onChange","isPopulated","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","t1","t2","held","defaultValue","populated","T0","t3","t4","root","t5","isDisabled","t6","t7","Symbol","for","0","1","t8","t9","t10","t11","t12","t13"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kfSwDN: \"x87ps6o\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Keeps the mirrored copy in step and then hands the change on to the call\n// site. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its input.\nfunction changeHandler<T extends TokenFieldValue>(setHeld: (value: T) => void, onChange: ((value: T) => void) | undefined) {\n  return (value: T) => {\n    setHeld(value);\n    onChange?.(value);\n  };\n}\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n      {chipLabel(renderToken === undefined ? segment.text : renderToken(segment))}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  // A copy of what the field holds, kept only so the label can float from\n  // it. React Aria's token field reports `isDisabled` and `isReadOnly`\n  // through its render props and not its value, and it hands its state down\n  // a context of its own that nothing outside the module can read — so an\n  // uncontrolled field has no other way to say what it is holding now.\n  //\n  // This mirrors rather than controls: `defaultValue` still goes through, so\n  // React Aria keeps owning the value and the editing it does with it. A\n  // controlled field is read straight off the prop, which already moves.\n  const [held, setHeld] = useState(props.defaultValue);\n  const populated = isPopulated(props.value ?? held);\n  return <RACTokenField<T> {...props} onChange={changeHandler(setHeld, props.onChange)} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","TokenRenderProps","stylex","useState","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipLabel","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","changeHandler","setHeld","value","onChange","isPopulated","undefined","segments","some","text","length","tokenClassName","isSelected","props","base","ring","selected","unselected","tokenContent","t0","$","_c","t1","t2","held","defaultValue","populated","T0","t3","t4","root","t5","isDisabled","t6","t7","Symbol","for","0","1","t8","t9","t10","t11","t12","t13"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps, TokenRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useState } from 'react';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipLabel } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// **The editable area is not an input.** React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// **The box's whole height is the editable area.** A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// **A token is drawn by the call site, or by this.** `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n  token: {\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n  /** A function may compute the class from the field's render state. */\n  className?: RACTokenFieldProps<T>['className'];\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and the red underline both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. An icon drawn in `em` takes\n   * that size from the slot.\n   */\n  leadingIcon?: ReactNode;\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text.\n   */\n  renderToken?: (segment: TokenSegment) => ReactNode;\n  /** A function may compute the style from the field's render state. */\n  style?: RACTokenFieldProps<T>['style'];\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role once the field has an error.\n   * An icon drawn in `em` takes that size from the slot.\n   */\n  trailingIcon?: ReactNode;\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' | 'className' | 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Keeps the mirrored copy in step and then hands the change on to the call\n// site. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its input.\nfunction changeHandler<T extends TokenFieldValue>(setHeld: (value: T) => void, onChange: ((value: T) => void) | undefined) {\n  return (value: T) => {\n    setHeld(value);\n    onChange?.(value);\n  };\n}\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue | undefined) {\n  if (value === undefined) {\n    return undefined;\n  }\n  return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\n// A token is the chip it looks like: unselected at rest, and the selected\n// chip — Material's selected input chip — once the selection covers it. A\n// click selects the whole token, since React Aria gives it\n// `user-select: all`, and so does the keyboard's selection running across\n// it; either way it is the token Backspace removes next, and this is what\n// says so.\nfunction tokenClassName({\n  isSelected\n}: TokenRenderProps) {\n  return stylex.props(chipStyles.base, focus.ring, isSelected ? chipStyles.selected : chipStyles.unselected, styles.token).className ?? '';\n}\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n  return (segment: TokenSegment) => <RACToken className={tokenClassName}>\n      {chipLabel(renderToken === undefined ? segment.text : renderToken(segment))}\n    </RACToken>;\n}\n\n/**\n * A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n *\n * The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  description,\n  error,\n  floatingLabel = true,\n  label,\n  leadingIcon,\n  renderToken,\n  trailingIcon,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  // A copy of what the field holds, kept only so the label can float from\n  // it. React Aria's token field reports `isDisabled` and `isReadOnly`\n  // through its render props and not its value, and it hands its state down\n  // a context of its own that nothing outside the module can read — so an\n  // uncontrolled field has no other way to say what it is holding now.\n  //\n  // This mirrors rather than controls: `defaultValue` still goes through, so\n  // React Aria keeps owning the value and the editing it does with it. A\n  // controlled field is read straight off the prop, which already moves.\n  const [held, setHeld] = useState(props.defaultValue);\n  const populated = isPopulated(props.value ?? held);\n  return <RACTokenField<T> {...props} onChange={changeHandler(setHeld, props.onChange)} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel}\n    // React Aria's `TextField` hands its group the field's disabled and\n    // invalid state through context; its `TokenField` does not, so the\n    // box is told outright or its label and its underline never turn.\n    isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n        <RACTokenInput<T> {...{\n        0: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n        },\n        1: {\n          className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n        }\n      }[!!(variant === 'filled') << 0]}>\n          {tokenContent(renderToken)}\n        </RACTokenInput>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

package/dist/components/tree/index.d.ts

@@ -100,7 +100,7 @@ declare namespace Tree$1 {
  * leaf and draws no caret. `textValue` is what typeahead matches on, and is
  * taken from a plain-string headline when it is not given.
  */
-declare function TreeItem$1<T extends object = object>({ children, headline, leading, supporting, textValue, trailing, ...props }: TreeItemProps$1<T>): import("react").JSX.Element;
+declare function TreeItem$1<T extends object = object>({ children, headline, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, supporting, textValue, trailing, ...props }: TreeItemProps$1<T>): import("react").JSX.Element;
 /**
  * The row the tree shows while it is fetching more. React Aria calls
  * `onLoadMore` when this comes into view, and draws it only while