@kanso-labs/kanso-ui 0.40.4 → 0.40.6

package/dist/components/icon-button/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonDOMProps, ButtonState } from "../../button/index.js";
+import { ButtonDOMProps, ButtonForm, ButtonState } from "../../button/index.js";
 import { ReactNode, RefAttributes } from "react";
 import { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from "react-aria-components";
 //#region src/components/icon-button/index.d.ts
@@ -17,43 +17,18 @@ type IconButtonProps = {
   children?: ReactNode;
   /** A function may compute the class from the button's render state. */
   className?: ClassNameOrFunction<IconButtonState>;
-  /**
-   * Whether a toggle starts chosen, when it keeps its own state. Passing
-   * this, `isSelected` or `onChange` is what makes the button a toggle.
-   */
-  defaultSelected?: boolean;
   /**
    * Disables the press ripple. The hover and pressed state layers are
    * unaffected.
    * @default false
    */
   disableRipple?: boolean;
-  /**
-   * Where the button leads. Given one, the button is rendered as a link —
-   * an `<a>`, announced as the link it is — with the same styles and ripple.
-   * `render`, `type`, and the form and pending props apply to the button
-   * form only, and a toggle is never a link.
-   */
-  href?: string;
-  /**
-   * Whether a toggle is chosen, when the call site holds the state. Pass it
-   * with `onChange`; passing this, `defaultSelected` or `onChange` is what
-   * makes the button a toggle.
-   */
-  isSelected?: boolean;
-  /**
-   * Called with the new state when a toggle is pressed. Passing this,
-   * `isSelected` or `defaultSelected` is what makes the button a toggle.
-   */
-  onChange?: (isSelected: boolean) => void;
   /**
    * The name of the ring shown while the button is pending, for a screen
    * reader. The label it replaces is hidden while it shows. Left out, it is
    * the word for it in the I18nProvider's locale — "Loading" in English.
    */
   pendingLabel?: string;
-  /** The link's `rel`, when `href` is set. */
-  rel?: string;
   /**
    * The element to render, given the props it would have carried. React
    * Aria's own form: it has to return the element the component would have
@@ -70,8 +45,6 @@ type IconButtonProps = {
   size?: IconButtonSize;
   /** A function may compute the style from the button's render state. */
   style?: StyleOrFunction<IconButtonState>;
-  /** The link's `target`, when `href` is set. */
-  target?: string;
   /**
    * `standard` is transparent and tints what it sits on; `outlined` is
    * transparent with a rule around it; `filled` and `tonal` carry a container
@@ -79,7 +52,7 @@ type IconButtonProps = {
    * @default 'standard'
    */
   variant?: IconButtonVariant;
-} & Omit<ButtonDOMProps, 'render'>;
+} & ButtonForm & Omit<ButtonDOMProps, 'render'>;
 type IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
 type IconButtonState = ButtonState;
 type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
@@ -90,8 +63,10 @@ type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
  *
  * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which
  * reports its state through `aria-pressed` and draws the page's second pair
- * of colour roles for its variant. A toggle takes neither `href` nor the
- * pending props.
+ * of colour roles for its variant. The three forms are exclusive, so a toggle
+ * given `href` does not compile. A toggle may be pending, for a state saved
+ * somewhere slow: the ring replaces its icon and a press changes nothing
+ * until it clears.
  *
  * ```tsx
  * <IconButton aria-label="Label" defaultSelected variant="tonal">

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

@@ -2,9 +2,11 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { sizing } from "../../tokens/design.tokens.stylex.js";
 import { focus } from "../../styles/focus.js";
+import { useSelection } from "../../button/hooks.js";
 import { ButtonBase, ToggleButtonBase } from "../../button/index.js";
 import { ButtonGroupItemContext } from "../../button/context.js";
 import { groupPressHandlers } from "../../button/group.js";
+import { pressThen } from "../../button/toggle.js";
 import { c } from "react/compiler-runtime";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -374,8 +376,10 @@ function groupStyles(group, size, state) {
 *
 * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which
 * reports its state through `aria-pressed` and draws the page's second pair
-* of colour roles for its variant. A toggle takes neither `href` nor the
-* pending props.
+* of colour roles for its variant. The three forms are exclusive, so a toggle
+* given `href` does not compile. A toggle may be pending, for a state saved
+* somewhere slow: the ring replaces its icon and a press changes nothing
+* until it clears.
 *
 * ```tsx
 * <IconButton aria-label="Label" defaultSelected variant="tonal">
@@ -391,68 +395,76 @@ function IconButton(t0) {
 	const size = ownSize ?? group?.size ?? "md";
 	const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;
 	const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);
-	if (inSelectingGroup || defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
-		let t2;
-		if ($[0] !== group || $[1] !== size || $[2] !== variant) {
-			t2 = toggleStyleProps(size, variant, group);
-			$[0] = group;
-			$[1] = size;
-			$[2] = variant;
-			$[3] = t2;
-		} else t2 = $[3];
+	let t2;
+	if ($[0] !== defaultSelected || $[1] !== isSelected || $[2] !== onChange) {
+		t2 = {
+			defaultSelected,
+			isSelected,
+			onChange
+		};
+		$[0] = defaultSelected;
+		$[1] = isSelected;
+		$[2] = onChange;
+		$[3] = t2;
+	} else t2 = $[3];
+	const selection = useSelection(t2);
+	if (inSelectingGroup) {
 		let t3;
-		if ($[4] !== defaultSelected || $[5] !== isPending || $[6] !== isSelected || $[7] !== onChange || $[8] !== press || $[9] !== props || $[10] !== t2) {
-			t3 = /* @__PURE__ */ jsx(ToggleButtonBase, {
-				...props,
-				...press,
-				classes: t2,
-				defaultSelected,
-				isPending,
-				isSelected,
-				onChange
-			});
-			$[4] = defaultSelected;
-			$[5] = isPending;
-			$[6] = isSelected;
-			$[7] = onChange;
-			$[8] = press;
-			$[9] = props;
-			$[10] = t2;
-			$[11] = t3;
-		} else t3 = $[11];
-		return t3;
+		if ($[4] !== group || $[5] !== size || $[6] !== variant) {
+			t3 = toggleStyleProps(size, variant, group);
+			$[4] = group;
+			$[5] = size;
+			$[6] = variant;
+			$[7] = t3;
+		} else t3 = $[7];
+		return /* @__PURE__ */ jsx(ToggleButtonBase, {
+			...props,
+			...press,
+			classes: t3,
+			isPending
+		});
 	}
-	let t2;
-	if ($[12] !== group || $[13] !== size || $[14] !== variant) {
-		t2 = iconButtonClasses(size, variant, group);
-		$[12] = group;
-		$[13] = size;
-		$[14] = variant;
-		$[15] = t2;
-	} else t2 = $[15];
+	const isToggle = defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0;
+	const T0 = ButtonBase;
 	let t3;
-	if ($[16] !== href || $[17] !== isPending || $[18] !== pendingLabel || $[19] !== press || $[20] !== props || $[21] !== rel || $[22] !== t2 || $[23] !== target) {
-		t3 = /* @__PURE__ */ jsx(ButtonBase, {
+	if ($[8] !== group || $[9] !== isToggle || $[10] !== size || $[11] !== variant) {
+		t3 = isToggle ? toggleStyleProps(size, variant, group) : iconButtonClasses(size, variant, group);
+		$[8] = group;
+		$[9] = isToggle;
+		$[10] = size;
+		$[11] = variant;
+		$[12] = t3;
+	} else t3 = $[12];
+	const t4 = isToggle ? selection.selected : void 0;
+	const t5 = isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress;
+	let t6;
+	if ($[13] !== T0 || $[14] !== href || $[15] !== isPending || $[16] !== pendingLabel || $[17] !== press || $[18] !== props || $[19] !== rel || $[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== target) {
+		t6 = /* @__PURE__ */ jsx(T0, {
 			...props,
 			...press,
-			classes: t2,
+			classes: t3,
 			href,
 			isPending,
+			isSelected: t4,
+			onPress: t5,
 			pendingLabel,
 			rel,
 			target
 		});
-		$[16] = href;
-		$[17] = isPending;
-		$[18] = pendingLabel;
-		$[19] = press;
-		$[20] = props;
-		$[21] = rel;
-		$[22] = t2;
+		$[13] = T0;
+		$[14] = href;
+		$[15] = isPending;
+		$[16] = pendingLabel;
+		$[17] = press;
+		$[18] = props;
+		$[19] = rel;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
 		$[23] = target;
-		$[24] = t3;
-	} else t3 = $[24];
-	return t3;
+		$[24] = t6;
+	} else t6 = $[24];
+	return t6;
 }
 function iconButtonClasses(size, variant, group) {
 	return (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DOMRenderFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","focus","colors","motion","radii","sizing","stateLayerOpacity","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","hovered","focused","pressed","outlineWidths","EDGES","controlLg","controlSm","controlXl","controlXs","controlXxl","_temp","shifted","width","value","val","undefined","selectedShapes","toggleStyles","selected","unselected","toggleContainers","const","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","groupStyles","group","state","shift","IconButton","t0","$","isPending","ownSize","t1","props","inSelectingGroup","press","onPressStart","onPressEnd","t2","toggleStyleProps","t3","iconButtonClasses","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_c","stylex.props"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `src/button`'s, shared with Button.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x9w8ftz\",\n    k1ekBW: \"x1n0k3g7\",\n    kAMwcw: \"x1hu1jz6\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The hover, focus and pressed layers, one style per container, applied from\n// React Aria's render state rather than from `:hover`, `:focus-visible` and\n// `:active`, for Button's reasons — see its header: a hover layer stayed on\n// after a tap, and no pressed layer or corner showed for a press made from\n// the keyboard. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. A chosen toggle's layer keeps its forced-colours `Highlight`,\n// since a later style replaces the property whole.\nconst hovered = {\n  filled: {\n    kWkggS: \"xo1ct44\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x659ado x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1sog3nf x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\nconst pressed = {\n  filled: {\n    kWkggS: \"x7b25lv\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1dvjsmr x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// Each size's edge again, for the one place it is read at runtime: a standard\n// ButtonGroup widening a pressed button by adding to it. The size styles\n// above write the same values.\nconst EDGES = {\n  lg: sizing.controlLg,\n  md: sizing.controlSm,\n  xl: sizing.controlXl,\n  xs: sizing.controlXs,\n  xxl: sizing.controlXxl\n};\n\n// The width a standard group sets while it widens or narrows the button.\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst shifted = {\n  width: (value: string) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The corner each size presses to, which is the page's round-to-square\n// morph, and the corner a chosen toggle rests at. A style per size rather than\n// a value inside each size style, since StyleX replaces the property whole:\n// it comes after the size's circle while pressed, and after the disabled\n// style's circle too for a chosen toggle, which keeps its corner disabled.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\n\n// The same containers by name, for the layers above.\nconst toggleContainers = {\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  standard: {\n    selected: 'standardToggleSelected',\n    unselected: 'standard'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   *\n   * `undefined` is for a button inside a React Aria component that names it\n   * itself — a search field's clear button, a number field's steppers. React\n   * Aria takes a prop over its context, so a name written here would replace\n   * the one it gives in the reader's locale, and undefined leaves that stand.\n   */\n  'aria-label': string | undefined;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the button leads. Given one, the button is rendered as a link —\n   * an `<a>`, announced as the link it is — with the same styles and ripple.\n   * `render`, `type`, and the form and pending props apply to the button\n   * form only, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed: the one every button shares, whose `isSelected` only the toggle\n// form fills in — see `ButtonState` in src/button.\ntype IconButtonState = ButtonState;\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What a group lays over the button: its own styles for the button's state,\n// last so a connected group's corners hold whatever the button's own shape\n// would be, and the standard group's widening or narrowing as extra width.\nfunction groupStyles(group: ButtonGroupItem | null, size: IconButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];\n}\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  defaultSelected,\n  href,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  size: ownSize,\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup around the button hands it a size, its shape at the\n  // group's inner edges and the press interaction, as it does Button's; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean. A selecting ButtonGroup\n  // around it makes it one as well, to take part in the group's selection.\n  if (inSelectingGroup || defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <ToggleButtonBase {...props} {...press} classes={toggleStyleProps(size, variant, group)} defaultSelected={defaultSelected} isPending={isPending} isSelected={isSelected} onChange={onChange} />;\n  }\n  return <ButtonBase {...props} {...press} classes={iconButtonClasses(size, variant, group)} href={href} isPending={isPending} pendingLabel={pendingLabel} rel={rel} target={target} />;\n}\n\n// The plain button's classes, from React Aria's render state — see the hover\n// and pressed layers above for why that and not the pseudo-classes. Built by\n// a call 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 on\n// its inputs.\nfunction iconButtonClasses(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: IconButtonState) => {\n    const container = toggleContainers[variant][state.isSelected === true ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n    // A chosen outlined toggle has a container rather than a rule, so the\n    // width goes on only while it is unchosen.\n    variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));\n  };\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","DOMRenderFunction","StyleOrFunction","stylex","useContext","ToggleGroupStateContext","ButtonDOMProps","ButtonForm","ButtonState","ButtonGroupItem","ButtonBase","ToggleButtonBase","ButtonGroupItemContext","groupPressHandlers","useSelection","pressThen","focus","colors","motion","radii","sizing","stateLayerOpacity","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","hovered","focused","pressed","outlineWidths","EDGES","controlLg","controlSm","controlXl","controlXs","controlXxl","_temp","shifted","width","value","val","undefined","selectedShapes","toggleStyles","selected","unselected","toggleContainers","const","disabledStyles","IconButtonProps","children","className","IconButtonState","disableRipple","pendingLabel","render","size","IconButtonSize","style","variant","IconButtonVariant","Omit","groupStyles","group","state","shift","IconButton","t0","$","defaultSelected","href","isPending","isSelected","onChange","rel","ownSize","target","t1","props","inSelectingGroup","press","onPressStart","onPressEnd","t2","selection","t3","toggleStyleProps","isToggle","T0","iconButtonClasses","t4","t5","onPress","toggle","t6","ring","isHovered","isFocusVisible","isPressed","isDisabled","container","_c","stylex.props"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DOMRenderFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { ToggleGroupStateContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonForm, ButtonState } from '../../button';\nimport type { ButtonGroupItem } from '../../button/context';\nimport { ButtonBase, ToggleButtonBase } from '../../button';\nimport { ButtonGroupItemContext } from '../../button/context';\nimport { groupPressHandlers } from '../../button/group';\nimport { useSelection } from '../../button/hooks';\nimport { pressThen } from '../../button/toggle';\nimport { focus } from '../../styles/focus';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\n//\n// What every button does past its own styles — the ripple, the link and\n// toggle forms, the pending ring, a parent's disabled state — is\n// `src/button`'s, shared with Button.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x9w8ftz\",\n    k1ekBW: \"x1n0k3g7\",\n    kAMwcw: \"x1hu1jz6\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The hover, focus and pressed layers, one style per container, applied from\n// React Aria's render state rather than from `:hover`, `:focus-visible` and\n// `:active`, for Button's reasons — see its header: a hover layer stayed on\n// after a tap, and no pressed layer or corner showed for a press made from\n// the keyboard. In the order they are applied, so where two hold the later\n// wins, as the page draws one layer at a time: focus over hover, and a press\n// over both. A chosen toggle's layer keeps its forced-colours `Highlight`,\n// since a later style replaces the property whole.\nconst hovered = {\n  filled: {\n    kWkggS: \"xo1ct44\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xtxe0ya\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xo1ct44 x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1hxzsxp x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x659ado x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1fctxn6\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12r95rf x1jzqe4\",\n    $$css: true\n  }\n};\nconst focused = {\n  filled: {\n    kWkggS: \"xhodiby\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1ppcb1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xhodiby x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"xn4e5mw x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x19p5drm\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1sog3nf x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1s5x49g\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x16tkg7c x1jzqe4\",\n    $$css: true\n  }\n};\nconst pressed = {\n  filled: {\n    kWkggS: \"x7b25lv\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"x1qdfkg1\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"x7b25lv x1jzqe4\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x167cdfs x1jzqe4\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x1dvjsmr x1jzqe4\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xzpauq9\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x12o6fnv x1jzqe4\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's colour.\nconst outlineWidths = {\n  lg: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  md: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xl: {\n    kMzoRj: \"xdh2fpr\",\n    $$css: true\n  },\n  xs: {\n    kMzoRj: \"xmkeg23\",\n    $$css: true\n  },\n  xxl: {\n    kMzoRj: \"x9r2w2z\",\n    $$css: true\n  }\n};\n\n// Each size's edge again, for the one place it is read at runtime: a standard\n// ButtonGroup widening a pressed button by adding to it. The size styles\n// above write the same values.\nconst EDGES = {\n  lg: sizing.controlLg,\n  md: sizing.controlSm,\n  xl: sizing.controlXl,\n  xs: sizing.controlXs,\n  xxl: sizing.controlXxl\n};\n\n// The width a standard group sets while it widens or narrows the button.\nconst _temp = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst shifted = {\n  width: (value: string) => [_temp, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(value)\n  }]\n};\n\n// The corner each size presses to, which is the page's round-to-square\n// morph, and the corner a chosen toggle rests at. A style per size rather than\n// a value inside each size style, since StyleX replaces the property whole:\n// it comes after the size's circle while pressed, and after the disabled\n// style's circle too for a chosen toggle, which keeps its corner disabled.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\n\n// The same containers by name, for the layers above.\nconst toggleContainers = {\n  filled: {\n    selected: 'filledToggleSelected',\n    unselected: 'filledToggle'\n  },\n  outlined: {\n    selected: 'outlinedToggleSelected',\n    unselected: 'outlined'\n  },\n  standard: {\n    selected: 'standardToggleSelected',\n    unselected: 'standard'\n  },\n  tonal: {\n    selected: 'tonalToggleSelected',\n    unselected: 'tonal'\n  }\n} as const;\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   *\n   * `undefined` is for a button inside a React Aria component that names it\n   * itself — a search field's clear button, a number field's steppers. React\n   * Aria takes a prop over its context, so a name written here would replace\n   * the one it gives in the reader's locale, and undefined leaves that stand.\n   */\n  'aria-label': string | undefined;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * The name of the ring shown while the button is pending, for a screen\n   * reader. The label it replaces is hidden while it shows. Left out, it is\n   * the word for it in the I18nProvider's locale — \"Loading\" in English.\n   */\n  pendingLabel?: string;\n  /**\n   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & ButtonForm & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed: the one every button shares, whose `isSelected` only the toggle\n// form fills in — see `ButtonState` in src/button.\ntype IconButtonState = ButtonState;\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What a group lays over the button: its own styles for the button's state,\n// last so a connected group's corners hold whatever the button's own shape\n// would be, and the standard group's widening or narrowing as extra width.\nfunction groupStyles(group: ButtonGroupItem | null, size: IconButtonSize, state: ButtonState) {\n  if (group === null) {\n    return null;\n  }\n  return [group.styles?.(state), group.shift !== 0 && shifted.width(`calc(${EDGES[size]} + ${group.shift}px)`)];\n}\n\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. The three forms are exclusive, so a toggle\n * given `href` does not compile. A toggle may be pending, for a state saved\n * somewhere slow: the ring replaces its icon and a press changes nothing\n * until it clears.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  defaultSelected,\n  href,\n  isPending,\n  isSelected,\n  onChange,\n  pendingLabel,\n  rel,\n  size: ownSize,\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  // A ButtonGroup around the button hands it a size, its shape at the\n  // group's inner edges and the press interaction, as it does Button's; see\n  // src/button/context.ts. A size named here still wins.\n  const group = useContext(ButtonGroupItemContext);\n  const size = ownSize ?? group?.size ?? 'md';\n  const inSelectingGroup = useContext(ToggleGroupStateContext) !== null;\n  const press = groupPressHandlers(group, props.onPressStart, props.onPressEnd);\n  const selection = useSelection({\n    defaultSelected,\n    isSelected,\n    onChange\n  });\n\n  // A selecting ButtonGroup around it makes it React Aria's ToggleButton, to\n  // take part in the group's selection. Whether a button sits in one does\n  // not change from one render to the next.\n  if (inSelectingGroup) {\n    return <ToggleButtonBase {...props} {...press} classes={toggleStyleProps(size, variant, group)} isPending={isPending} />;\n  }\n\n  // The three props that make this a toggle on its own. Read together rather\n  // than behind a `toggle` word of its own, the way `href` already turns the\n  // button into a link: a button given none of them has no state to report,\n  // and one given any of them has nothing else it could mean. Either way it\n  // is the same component underneath, so a toggle whose `isSelected` is\n  // still loading stays the same element when the value arrives, and keeps\n  // focus.\n  const isToggle = defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined;\n  return <ButtonBase {...props} {...press} classes={isToggle ? toggleStyleProps(size, variant, group) : iconButtonClasses(size, variant, group)} href={href} isPending={isPending} isSelected={isToggle ? selection.selected : undefined} onPress={isToggle ? pressThen(props.onPress, selection.toggle) : props.onPress} pendingLabel={pendingLabel} rel={rel} target={target} />;\n}\n\n// The plain button's classes, from React Aria's render state — see the hover\n// and pressed layers above for why that and not the pseudo-classes. Built by\n// a call 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 on\n// its inputs.\nfunction iconButtonClasses(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isHovered && hovered[variant], state.isFocusVisible && focused[variant], state.isPressed && pressed[variant], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], groupStyles(group, size, state));\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant, group: ButtonGroupItem | null) {\n  return (state: IconButtonState) => {\n    const container = toggleContainers[variant][state.isSelected === true ? 'selected' : 'unselected'];\n    return stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n    // A chosen outlined toggle has a container rather than a rule, so the\n    // width goes on only while it is unchosen.\n    variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isHovered && hovered[container], state.isFocusVisible && focused[container], state.isPressed && pressed[container], state.isPressed && selectedShapes[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size], groupStyles(group, size, state));\n  };\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 import { FieldVariant } from "../field/index.js";
+import { AppBarScroll, AppBarScrollOptions, useAppBarScroll } from "../hooks/useAppBarScroll.js";
 import AppBar, { AppBarProps } from "./app-bar/index.js";
 import Autocomplete, { AutocompleteFilter, AutocompleteProps } from "./autocomplete/index.js";
 import Avatar, { AvatarProps } from "./avatar/index.js";
@@ -81,4 +82,4 @@ import TokenField, { TokenFieldProps, TokenSegment } from "./token-field/index.j
 import Toolbar, { ToolbarProps, ToolbarTone } from "./toolbar/index.js";
 import Tooltip, { TooltipAlign, TooltipProps, TooltipSide } from "./tooltip/index.js";
 import Tree, { TreeItem, TreeItemProps, TreeLoadMore, TreeLoadMoreProps, TreeProps, TreeSection, TreeSectionProps } from "./tree/index.js";
-export { AppBar, type AppBarProps, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps };
+export { AppBar, type AppBarProps, type AppBarScroll, type AppBarScrollOptions, Autocomplete, type AutocompleteFilter, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, type CardVariant, Carousel, CarouselItem, type CarouselItemProps, type CarouselLayout, type CarouselProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipActionProps, type ChipFilterProps, ChipGroup, ChipGroupChip, type ChipGroupChipProps, type ChipGroupProps, type ChipProps, type ChipVariant, Code, type CodeProps, ColorArea, type ColorAreaProps, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, ColorSwatchPickerItem, type ColorSwatchPickerItemProps, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, ComboBox, type ComboBoxProps, type ComboBoxSelectionMode, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, type CurrencySignDisplay, type CurrencyTone, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps, DialogTitle, type DialogTitleProps, Disclosure, DisclosureGroup, type DisclosureGroupProps, DisclosureHeader, type DisclosureHeaderProps, DisclosurePanel, type DisclosurePanelProps, type DisclosureProps, DropZone, type DropZoneProps, Fab, FabMenu, FabMenuItem, type FabMenuItemProps, type FabMenuProps, type FabProps, type FabSize, type FabTone, type FabVariant, Feed, type FeedProps, type FieldVariant, FileTrigger, type FileTriggerProps, Form, type FormProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Keycap, type KeycapProps, Link, type LinkProps, type LinkTone, type LinkUnderline, List, ListBox, ListBoxItem, type ListBoxItemProps, ListBoxLoadMore, type ListBoxLoadMoreProps, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ListLoadMore, type ListLoadMoreProps, type ListProps, ListRow, type ListRowProps, ListSection, type ListSectionProps, LoadingIndicator, type LoadingIndicatorProps, Menu, type MenuAlign, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLoadMore, type MenuLoadMoreProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuSubmenu, type MenuSubmenuProps, Meter, type MeterProps, type MeterTone, NavigationBar, NavigationBarItem, type NavigationItemProps as NavigationBarItemProps, type NavigationBarProps, NavigationRail, NavigationRailItem, type NavigationItemProps as NavigationRailItemProps, type NavigationRailProps, NavigationTree, NavigationTreeItem, type NavigationTreeItemProps, type NavigationTreeProps, NavigationTreeSection, type NavigationTreeSectionProps, NumberField, type NumberFieldProps, Popover, type PopoverAlign, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, type PopoverProps, type PopoverSide, type PopoverSize, PopoverTitle, type PopoverTitleProps, type PopoverTrigger, ProductIcon, type ProductIconProps, ProgressIndicator, type ProgressIndicatorProps, type ProgressIndicatorShape, type ProgressIndicatorTone, type ProgressIndicatorVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, SearchField, type SearchFieldProps, SearchView, SearchViewContent, type SearchViewContentProps, type SearchViewProps, SegmentedButton, type SegmentedButtonProps, SegmentedButtonSegment, type SegmentedButtonSegmentProps, Select, type SelectProps, Separator, type SeparatorInset, type SeparatorProps, Sheet, SheetBody, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, SheetHeader, type SheetProps, SheetTitle, type SheetTitleProps, Slider, type SliderProps, type SliderSize, Snackbar, type SnackbarAction, type SnackbarMessage, type SnackbarOptions, type SnackbarProps, type SnackbarQueue, type ToastRegionRenderProps as SnackbarRegionRenderProps, SplitButton, SplitButtonAction, type SplitButtonActionProps, SplitButtonMenu, type SplitButtonMenuProps, type SplitButtonProps, type SplitButtonVariant, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, TableLoadMore, type TableLoadMoreProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsLayout, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, TabsPanels, type TabsPanelsProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagProps, type TagTone, type TagVariant, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, TimeField, type TimeFieldProps, TimePicker, type TimePickerMode, type TimePickerProps, TokenField, type TokenFieldProps, type TokenSegment, Toolbar, type ToolbarProps, type ToolbarTone, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, Tree, TreeItem, type TreeItemProps, TreeLoadMore, type TreeLoadMoreProps, type TreeProps, TreeSection, type TreeSectionProps, useAppBarScroll };

package/dist/components/list/index.js

@@ -1,11 +1,11 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
+import { CollectionLoadMore } from "../../collection/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import Checkbox from "../checkbox/index.js";
 import { textOf } from "../../collection/text.js";
-import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";

package/dist/components/list-box/index.d.ts

@@ -30,12 +30,20 @@ type ListBoxLoadMoreProps = Omit<ListBoxLoadMoreItemProps, 'children'> & {
    */
   label?: string;
 };
-type ListBoxProps$1<T extends object = object> = Omit<ListBoxProps<T>, 'className' | 'style'> & {
+type ListBoxProps$1<T extends object = object> = {
   /** A function may compute the class from the list's render state. */
   className?: ListBoxProps<T>['className'];
+  /**
+   * What the list shows when nothing is in it — after a search that matched
+   * nothing, usually. Left out, it is a muted row saying "No results" in the
+   * I18nProvider's locale, which an `Autocomplete` around the list also
+   * announces. One of the call site's own replaces the announcement as well
+   * as the row, so what it says to a screen reader is the call site's too.
+   */
+  renderEmptyState?: ListBoxProps<T>['renderEmptyState'];
   /** A function may compute the style from the list's render state. */
   style?: ListBoxProps<T>['style'];
-};
+} & Omit<ListBoxProps<T>, 'className' | 'renderEmptyState' | 'style'>;
 type ListBoxSectionProps$1<T extends object = object> = Omit<ListBoxSectionProps<T>, 'children'> & {
   /**
    * The options in the section. A section built from data puts React Aria's
@@ -62,6 +70,10 @@ type ListBoxSectionProps$1<T extends object = object> = Omit<ListBoxSectionProps
  *
  * The call site's `className` and `style` land on the container, which is
  * the element a layout positions.
+ *
+ * A list with nothing in it shows a muted "No results" row in place of its
+ * options, which is what a search that matches nothing leaves; pass
+ * `renderEmptyState` to draw something else.
  */
 declare function ListBox$1<T extends object>(props: ListBoxProps$1<T> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare namespace ListBox$1 {

package/dist/components/list-box/index.js

@@ -1,15 +1,18 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
+import { CollectionEmpty, CollectionLoadMore } from "../../collection/index.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { textOf } from "../../collection/text.js";
-import { CollectionLoadMore } from "../../collection/index.js";
-import { collectionStyles, containerClasses, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Header, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection } from "react-aria-components";
 //#region src/components/list-box/index.tsx
+function emptyState() {
+	return /* @__PURE__ */ jsx(CollectionEmpty, { variant: "list" });
+}
 function itemContent(children, leading, overline, supporting, trailing, ripple) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
@@ -34,6 +37,10 @@ function itemContent(children, leading, overline, supporting, trailing, ripple)
 *
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
+*
+* A list with nothing in it shows a muted "No results" row in place of its
+* options, which is what a search that matches nothing leaves; pass
+* `renderEmptyState` to draw something else.
 */
 function ListBox$1(props) {
 	const $ = c(5);
@@ -46,6 +53,7 @@ function ListBox$1(props) {
 	let t1;
 	if ($[2] !== props || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(ListBox, {
+			renderEmptyState: emptyState,
 			...props,
 			...t0
 		});
@@ -132,11 +140,11 @@ function ListBoxLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$2 } = t0;
+		const { label: t3, ...props$1 } = t0;
 		label = t3;
 		T0 = ListBoxLoadMoreItem;
-		t1 = props$2;
-		t2 = mergeStyles(props(collectionStyles.loading), props$2);
+		t1 = props$1;
+		t2 = mergeStyles(props(collectionStyles.loading), props$1);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -184,12 +192,12 @@ function ListBoxSection$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$1 } = t0;
+		const { children: t3, header: t4, ...props$2 } = t0;
 		children = t3;
 		header = t4;
 		T0 = ListBoxSection;
-		t1 = props$1;
-		t2 = mergeStyles(props(collectionStyles.section), props$1);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.section), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;