@kanso-labs/kanso-ui 0.30.3 → 0.31.0

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

@@ -10,6 +10,7 @@ import { Button, ButtonContext, Link, ToggleButton, useSlottedContext } from "re
 //#region src/components/icon-button/index.tsx
 const styles = {
 	base: {
+		k6CgDc: "x12w9bfk",
 		kGNEyG: "x6s0dn4",
 		kaIpWk: "x1dkaolv",
 		kMzoRj: "xc342km",
@@ -58,14 +59,14 @@ const styles = {
 		kZKoxP: "xs1ryiz",
 		kaIpWk: "xtt5grq x1dkaolv",
 		kGuDYH: "x1pvqxga",
-		kzqmXN: "x15yg21f",
+		kzqmXN: "x1fh0d6s",
 		$$css: true
 	},
 	md: {
 		kZKoxP: "x1rv7mn0",
 		kaIpWk: "x1r81nxe x1dkaolv",
 		kGuDYH: "x1pvqxga",
-		kzqmXN: "x100vrsf",
+		kzqmXN: "x1eujcsb",
 		$$css: true
 	},
 	outlined: {
@@ -129,21 +130,21 @@ const styles = {
 		kZKoxP: "x1xaimp3",
 		kaIpWk: "x11f6t2b x1dkaolv",
 		kGuDYH: "x1s3cmhv",
-		kzqmXN: "x13oubkp",
+		kzqmXN: "xszbqgh",
 		$$css: true
 	},
 	xs: {
 		kZKoxP: "xig8zya",
 		kaIpWk: "x1r81nxe x1dkaolv",
 		kGuDYH: "xwsyq91",
-		kzqmXN: "x1td3qas",
+		kzqmXN: "x11ts1a5",
 		$$css: true
 	},
 	xxl: {
 		kZKoxP: "x173yhrv",
 		kaIpWk: "x11f6t2b x1dkaolv",
 		kGuDYH: "x1tgwohi",
-		kzqmXN: "x1f2tiqu",
+		kzqmXN: "xz1kjiq",
 		$$css: true
 	}
 };
@@ -254,17 +255,18 @@ function buttonContent(children, pendingLabel, ripple) {
 * ```
 */
 function IconButton(t0) {
-	const $ = c(25);
-	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t2, rel, render, size: t3, target, variant: t4, ...props$1 } = t0;
+	const $ = c(26);
+	const { children, defaultSelected, disableRipple: t1, href, isDisabled, isPending: t2, isSelected, onChange, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, pendingLabel: t3, rel, render, size: t4, target, variant: t5, ...props$1 } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
-	const pendingLabel = t2 === void 0 ? "Loading" : t2;
-	const size = t3 === void 0 ? "md" : t3;
-	const variant = t4 === void 0 ? "standard" : t4;
+	const isPending = t2 === void 0 ? false : t2;
+	const pendingLabel = t3 === void 0 ? "Loading" : t3;
+	const size = t4 === void 0 ? "md" : t4;
+	const variant = t5 === void 0 ? "standard" : t5;
 	const context = useSlottedContext(ButtonContext, props$1.slot);
 	const disabled = isDisabled ?? context?.isDisabled ?? false;
-	let t5;
+	let t6;
 	if ($[0] !== onClick || $[1] !== onContextMenu || $[2] !== onPointerCancel || $[3] !== onPointerDown || $[4] !== onPointerLeave || $[5] !== onPointerUp) {
-		t5 = {
+		t6 = {
 			onClick,
 			onContextMenu,
 			onPointerCancel,
@@ -278,45 +280,45 @@ function IconButton(t0) {
 		$[3] = onPointerDown;
 		$[4] = onPointerLeave;
 		$[5] = onPointerUp;
-		$[6] = t5;
-	} else t5 = $[6];
-	const ripple = useRipple(!disableRipple && !disabled, t5);
+		$[6] = t6;
+	} else t6 = $[6];
+	const ripple = useRipple(!disableRipple && !disabled && !isPending, t6);
 	const element = {
 		aria: ariaAttributesOf(props$1),
 		onKeyDown,
 		onKeyUp
 	};
 	if (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0) {
-		const t6 = toggleButtonRenderer(element, render);
-		const t7 = ripple.handlers;
-		const t8 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
-		let t9;
+		const t7 = toggleButtonRenderer(element, render);
+		const t8 = ripple.handlers;
+		const t9 = mergeStatefulStyles(toggleStyleProps(size, variant), props$1);
+		let t10;
 		if ($[7] !== children || $[8] !== ripple) {
-			t9 = toggleContent(children, ripple);
+			t10 = toggleContent(children, ripple);
 			$[7] = children;
 			$[8] = ripple;
-			$[9] = t9;
-		} else t9 = $[9];
+			$[9] = t10;
+		} else t10 = $[9];
 		return /* @__PURE__ */ jsx(ToggleButton, {
 			defaultSelected,
 			isDisabled: disabled,
 			isSelected,
 			onChange,
-			render: t6,
-			...t7,
-			...props$1,
+			render: t7,
 			...t8,
-			children: t9
+			...props$1,
+			...t9,
+			children: t10
 		});
 	}
-	let t6;
+	let t7;
 	if ($[10] !== size || $[11] !== variant) {
-		t6 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
+		t7 = (state) => props(styles.base, focus.ring, styles[variant], styles[size], variant === "outlined" && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]);
 		$[10] = size;
 		$[11] = variant;
-		$[12] = t6;
-	} else t6 = $[12];
-	const styleProps = mergeStatefulStyles(t6, props$1);
+		$[12] = t7;
+	} else t7 = $[12];
+	const styleProps = mergeStatefulStyles(t7, props$1);
 	if (href !== void 0) return /* @__PURE__ */ jsxs(Link, {
 		href,
 		isDisabled: disabled,
@@ -329,36 +331,38 @@ function IconButton(t0) {
 		children: [children, ripple.surface]
 	});
 	const T0 = Button;
-	const t7 = buttonRenderer(element, render);
-	const t8 = ripple.handlers;
-	let t9;
+	const t8 = buttonRenderer(element, render);
+	const t9 = ripple.handlers;
+	let t10;
 	if ($[13] !== children || $[14] !== pendingLabel || $[15] !== ripple) {
-		t9 = buttonContent(children, pendingLabel, ripple);
+		t10 = buttonContent(children, pendingLabel, ripple);
 		$[13] = children;
 		$[14] = pendingLabel;
 		$[15] = ripple;
-		$[16] = t9;
-	} else t9 = $[16];
-	let t10;
-	if ($[17] !== T0 || $[18] !== disabled || $[19] !== props$1 || $[20] !== ripple.handlers || $[21] !== styleProps || $[22] !== t7 || $[23] !== t9) {
-		t10 = /* @__PURE__ */ jsx(T0, {
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== T0 || $[18] !== disabled || $[19] !== isPending || $[20] !== props$1 || $[21] !== ripple.handlers || $[22] !== styleProps || $[23] !== t10 || $[24] !== t8) {
+		t11 = /* @__PURE__ */ jsx(T0, {
 			isDisabled: disabled,
-			render: t7,
-			...t8,
+			isPending,
+			render: t8,
+			...t9,
 			...props$1,
 			...styleProps,
-			children: t9
+			children: t10
 		});
 		$[17] = T0;
 		$[18] = disabled;
-		$[19] = props$1;
-		$[20] = ripple.handlers;
-		$[21] = styleProps;
-		$[22] = t7;
-		$[23] = t9;
-		$[24] = t10;
-	} else t10 = $[24];
-	return t10;
+		$[19] = isPending;
+		$[20] = props$1;
+		$[21] = ripple.handlers;
+		$[22] = styleProps;
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t11;
+	} else t11 = $[25];
+	return t11;
 }
 function toggleContent(children, ripple) {
 	return () => /* @__PURE__ */ jsxs(Fragment, { children: [children, ripple.surface] });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t2","t3","t4","props","undefined","context","slot","t5","element","aria","t6","t7","handlers","t8","toggleStyleProps","t9","toggleContent","ring","styleProps","T0","t10"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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. 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.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\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: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x13oubkp\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"x1f2tiqu\",\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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\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. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\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};\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  'aria-label': string;\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.\n   * @default 'Loading'\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. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// 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\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\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  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, as in Button.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\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.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// 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 inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\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) {\n  return (state: IconButtonState) => 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.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":";;;;;;;;;;AAoEA,MAAMgC,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRd,QAAQ;EACRG,QAAQ;EACRU,OAAO;CACT;CACAE,QAAQ;EACNC,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAK,gBAAgB;EACdF,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAM,cAAc;EACZH,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAO,OAAO;EACLhB,QAAQ;EACRS,OAAO;CACT;CACAQ,cAAc;EACZC,QAAQ;EACRT,OAAO;CACT;CACAU,IAAI;EACFC,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAc,IAAI;EACFH,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACAe,UAAU;EACRZ,QAAQ;EACRa,QAAQ;EACRC,QAAQ;EACRb,QAAQ;EACRJ,OAAO;CACT;CACAkB,kBAAkB;EAChBf,QAAQ;EACRa,QAAQ;EACRZ,QAAQ;EACRJ,OAAO;CACT;CACAmB,wBAAwB;EACtBhB,QAAQ;EACRa,QAAQ;EACRZ,QAAQ;EACRJ,OAAO;CACT;CACAoB,SAAS;EACPlC,QAAQ;EACRK,QAAQ;EACR8B,QAAQ;EACR5B,QAAQ;EACRE,QAAQ;EACRK,OAAO;CACT;CACAsB,UAAU;EACRnB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAuB,kBAAkB;EAChBpB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAwB,wBAAwB;EACtBrB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACAyB,OAAO;EACLtB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA0B,eAAe;EACbvB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA2B,qBAAqB;EACnBxB,QAAQ;EACRC,QAAQ;EACRJ,OAAO;CACT;CACA4B,IAAI;EACFjB,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACA6B,IAAI;EACFlB,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;CACA8B,KAAK;EACHnB,QAAQ;EACRxB,QAAQ;EACRyB,QAAQ;EACRC,QAAQ;EACRb,OAAO;CACT;AACF;AAKA,MAAM+B,gBAAgB;CACpBrB,IAAI;EACFtB,QAAQ;EACRY,OAAO;CACT;CACAc,IAAI;EACF1B,QAAQ;EACRY,OAAO;CACT;CACA4B,IAAI;EACFxC,QAAQ;EACRY,OAAO;CACT;CACA6B,IAAI;EACFzC,QAAQ;EACRY,OAAO;CACT;CACA8B,KAAK;EACH1C,QAAQ;EACRY,OAAO;CACT;AACF;AAMA,MAAMgC,iBAAiB;CACrBtB,IAAI;EACFvB,QAAQ;EACRa,OAAO;CACT;CACAc,IAAI;EACF3B,QAAQ;EACRa,OAAO;CACT;CACA4B,IAAI;EACFzC,QAAQ;EACRa,OAAO;CACT;CACA6B,IAAI;EACF1C,QAAQ;EACRa,OAAO;CACT;CACA8B,KAAK;EACH3C,QAAQ;EACRa,OAAO;CACT;AACF;AAKA,MAAMiC,eAAe;CACnB/B,QAAQ;EACNgC,UAAUlD,OAAOkB;EACjBiC,YAAYnD,OAAOsB;CACrB;CACAS,UAAU;EACRmB,UAAUlD,OAAOmC;EACjBgB,YAAYnD,OAAO+B;CACrB;CACAO,UAAU;EACRY,UAAUlD,OAAOwC;EACjBW,YAAYnD,OAAOsC;CACrB;CACAG,OAAO;EACLS,UAAUlD,OAAO2C;EACjBQ,YAAYnD,OAAOyC;CACrB;AACF;AACA,MAAMW,iBAAiB;CACrBlC,QAAQlB,OAAOqB;CACfU,UAAU/B,OAAOkC;CACjBI,UAAUtC,OAAOuC;CACjBE,OAAOzC,OAAO0C;AAChB;AAkGA,SAAS8B,cAAclB,UAAqBQ,cAAsBW,QAAgB;CAChF,QAAQC,UAA6B,qBAAA,UAAA,EAAA,UAAA;EACjC,oBAAC,QAAD;GAAM,GAAI;IACV,GAAG,EACDnB,WAAW,UACb;IACA,GAAG,EACDA,WAAW,kBACb;GACF,EAAE,CAAC,CAACmB,MAAMC,aAAa;GAClBrB;EACG,CAAA;EACLoB,MAAMC,YAAY,oBAAC,QAAD;GAAM,WAAU;GAC/B,UAAA,oBAAC,mBAAD;IAAmB,cAAYb;IAAc,iBAAA;IAAgB,MAAK;IAAM,MAAK;IAAU,SAAQ;GAAU,CAAA;EACrG,CAAA,IAAI;EACXW,OAAOG;CACV,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;AAiBA,SAAAC,WAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAoB,MAAA,EAAA1B,UAAAG,iBAAAC,eAAAuB,IAAAtB,MAAAuB,YAAAtB,YAAAC,UAAAsB,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAA5B,cAAA6B,IAAA5B,KAAAC,QAAAC,MAAA2B,IAAAxB,QAAAC,SAAAwB,IAAA,GAAAC,YAAAhB;CAGlB,MAAApB,gBAAAuB,OAAAc,KAAAA,IAAA,QAAAd;CAaA,MAAAnB,eAAA6B,OAAAI,KAAAA,IAAA,YAAAJ;CAGA,MAAA1B,OAAA2B,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAvB,UAAAwB,OAAAE,KAAAA,IAAA,aAAAF;CASA,MAAAG,UAAgBlH,kBAAkBP,eAAeuH,QAAKG,IAAK;CAC3D,MAAAhF,WAAiBiE,cAAcc,SAAOd,cAArB;CAA2C,IAAAgB;CAAA,IAAAnB,EAAA,OAAAI,WAAAJ,EAAA,OAAAK,iBAAAL,EAAA,OAAAQ,mBAAAR,EAAA,OAAAS,iBAAAT,EAAA,OAAAU,kBAAAV,EAAA,OAAAW,aAAA;EAOYQ,KAAA;GAAAf;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOxE;EAACX,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAN,SAAexF,UAA4B,CAACyE,iBAAD,CAAmBzC,UAAUiF,EAOvE;CACD,MAAAC,UAAgB;EAAAC,MACRlH,iBAAiB4G,OAAK;EAACT;EAAAC;CAG/B;CAMA,IAAI7B,oBAAoBsC,KAAAA,KAAanC,eAAemC,KAAAA,KAAalC,aAAakC,KAAAA,GAAS;EAC+C,MAAAM,KAAAhH,qBAAqB8G,SAASnC,MAAM;EAAO,MAAAsC,KAAA7B,OAAM8B;EAA0B,MAAAC,KAAAjH,oBAAoBkH,iBAAiBxC,MAAMI,OAAO,GAAGyB,OAAK;EAAC,IAAAY;EAAA,IAAA3B,EAAA,OAAAzB,YAAAyB,EAAA,OAAAN,QAAA;GACrQiC,KAAAC,cAAcrD,UAAUmB,MAAM;GAACM,EAAA,KAAAzB;GAAAyB,EAAA,KAAAN;GAAAM,EAAA,KAAA2B;EAAA,OAAAA,KAAA3B,EAAA;EAAA,OAD7B,oBAAC,cAAD;GAAkCtB;GAA6BxC,YAAAA;GAAsB2C;GAAsBC;GAAkB,QAAAwC;GAAqC,GAAMC;GAAe,GAAMR;GAAK,GAAMU;GAC1ME,UAAAA;EADkB,CAAA;CAEH;CACrB,IAAAL;CAAA,IAAAtB,EAAA,QAAAd,QAAAc,EAAA,QAAAV,SAAA;EACsCgC,MAAA3B,UAAwBpG,MAAa0B,OAAMC,MAAOX,MAAKsH,MAAO5G,OAAOqE,UAAUrE,OAAOiE,OAAOI,YAAY,cAActB,cAAckB,OAAOS,MAAKQ,cAAelF,OAAMiB,UAAWyD,MAAKQ,cAAe9B,eAAeiB,QAAQ;EAACU,EAAA,MAAAd;EAAAc,EAAA,MAAAV;EAAAU,EAAA,MAAAsB;CAAA,OAAAA,KAAAtB,EAAA;CAApQ,MAAA8B,aAAmBtH,oBAAoB8G,IAA+NP,OAAK;CAC3Q,IAAInC,SAASoC,KAAAA,GAAS,OACb,qBAAC,MAAD;EAAepC;EAAkB1C,YAAAA;EAAe8C;EAAa,QAAA3E,aAAa+G,OAAO;EAAW/B;EAAM,GAAMK,OAAM8B;EAAS,GAAMT;EAAK,GAAMe;EAAxI,UAAA,CACFvD,UACAmB,OAAMG,OAFI;;CAKT,MAAAkC,KAAArI;CAAwC,MAAA6H,KAAAnH,eAAegH,SAASnC,MAAM;CAAO,MAAAwC,KAAA/B,OAAM8B;CAAS,IAAAG;CAAA,IAAA3B,EAAA,QAAAzB,YAAAyB,EAAA,QAAAjB,gBAAAiB,EAAA,QAAAN,QAAA;EAC/FiC,KAAAlC,cAAclB,UAAUQ,cAAcW,MAAM;EAACM,EAAA,MAAAzB;EAAAyB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAN;EAAAM,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,IAAAgC;CAAA,IAAAhC,EAAA,QAAA+B,MAAA/B,EAAA,QAAA9D,YAAA8D,EAAA,QAAAe,WAAAf,EAAA,QAAAN,OAAA8B,YAAAxB,EAAA,QAAA8B,cAAA9B,EAAA,QAAAuB,MAAAvB,EAAA,QAAA2B,IAAA;EAD3CK,MAAA,oBAAC,IAAD;GAAuB9F,YAAAA;GAAkB,QAAAqF;GAA+B,GAAME;GAAe,GAAMV;GAAK,GAAMe;GAChHH,UAAAA;EADY,CAAA;EAEH3B,EAAA,MAAA+B;EAAA/B,EAAA,MAAA9D;EAAA8D,EAAA,MAAAe;EAAAf,EAAA,MAAAN,OAAA8B;EAAAxB,EAAA,MAAA8B;EAAA9B,EAAA,MAAAuB;EAAAvB,EAAA,MAAA2B;EAAA3B,EAAA,MAAAgC;CAAA,OAAAA,MAAAhC,EAAA;CAAA,OAFPgC;AAEO;AAUhB,SAASJ,cAAcrD,UAAqBmB,QAAgB;CAC1D,aAAa,qBAAA,UAAA,EAAA,UAAA,CACRnB,UACAmB,OAAOG,OACV,EAAA,CAAA;AACJ;AAMA,SAAS6B,iBAAiBxC,MAAsBI,SAA4B;CAC1E,QAAQK,UAA2BpG,MAAa0B,OAAOC,MAAMX,MAAMsH,MAAMlC,MAAMd,eAAe,OAAOX,aAAaoB,QAAQ,CAACnB,WAAWD,aAAaoB,QAAQ,CAAClB,YAAYnD,OAAOiE,OAG/KI,YAAY,cAAcK,MAAMd,eAAe,QAAQb,cAAckB,OAAOS,MAAMQ,cAAclF,OAAOiB,UAAUyD,MAAMQ,cAAc9B,eAAeiB,UAAUK,MAAMd,eAAe,QAAQZ,eAAeiB,KAAK;AACjN"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","styles","base","k6CgDc","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\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. 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.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1dkaolv\",\n    kMzoRj: \"xc342km\",\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: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  label: {\n    k1xSpc: \"xjp7ctv\",\n    $$css: true\n  },\n  labelPending: {\n    k33iCy: \"xlshs6z\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1girmi0\",\n    $$css: true\n  },\n  pending: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kpwlN0: \"x10a8y8t\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x83qkoq x1p2om7n xjbqb8w\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w\",\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kMwMTN: \"x1xj74d8\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl\",\n    kMwMTN: \"x1lba3jz\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\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// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\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. Three of the six are the\n// plain button's own styles: a chosen filled toggle is the filled button, and\n// an unchosen tonal or standard one is the tonal or standard button.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filled,\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};\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  'aria-label': string;\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.\n   * @default 'Loading'\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. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\n\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// 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\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n  return (state: ButtonRenderProps) => <>\n      <span {...{\n      0: {\n        className: \"xjp7ctv\"\n      },\n      1: {\n        className: \"xjp7ctv xlshs6z\"\n      }\n    }[!!state.isPending << 0]}>\n        {children}\n      </span>\n      {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n          <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n        </span> : null}\n      {ripple.surface}\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  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  pendingLabel = 'Loading',\n  rel,\n  render,\n  size = 'md',\n  target,\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\n  // `props` (className/style, etc.) is spread separately: `className` and\n  // `style` there may be functions of render state, which ripple's own\n  // handler-only merge doesn't need to know about. It is also why the styles\n  // below merge through mergeStatefulStyles rather than the plain\n  // mergeStyles. The ripple is off while disabled, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\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.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\n  }\n  const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\n//\n// 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 inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\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) {\n  return (state: IconButtonState) => 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.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

package/dist/components/link/index.js

@@ -8,6 +8,7 @@ import { Link } from "react-aria-components";
 //#region src/components/link/index.tsx
 const styles = {
 	base: {
+		k6CgDc: "x12w9bfk",
 		kaIpWk: "x1tfhd1",
 		kB7OPa: "x9f619",
 		kkrTdU: "x1ypdohk",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nconst styles = {\n  base: {\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AASA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAApB,OAAA6C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR1D,iBAAiBuD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAA/C;EAAgBgD,KAAA9C,aAAawD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4B/D,MAAaW,OAAMC,MAAOP,MAAK2D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAetD,OAAMW,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA9C,oBAAoBwD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}
+{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AASA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAArB,OAAA8C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR3D,iBAAiBwD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAhD;EAAgBiD,KAAA/C,aAAayD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4BhE,MAAaW,OAAMC,MAAOP,MAAK4D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAevD,OAAMY,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA/C,oBAAoByD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}

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

@@ -1,7 +1,7 @@
 import { OverlayAlign, OverlaySide } from "../../styles/overlay.js";
 import Separator$1 from "../separator/index.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
-import { MenuItemProps, MenuLoadMoreItemProps, MenuProps, MenuSectionProps, MenuTriggerProps } from "react-aria-components";
+import { ClassNameOrFunction, MenuItemProps, MenuLoadMoreItemProps, MenuProps, MenuSectionProps, MenuTriggerProps, PopoverRenderProps, StyleOrFunction } from "react-aria-components";
 //#region src/components/menu/index.d.ts
 type MenuAlign = OverlayAlign;
 type MenuContentProps<T extends object = object> = {
@@ -9,8 +9,11 @@ type MenuContentProps<T extends object = object> = {
   align?: MenuAlign;
   /** Moves the menu along that side, in pixels. */
   alignOffset?: number;
-  /** A function may compute the class from the menu's render state. */
-  className?: MenuProps<T>['className'];
+  /**
+   * Lands on the surface, which is the element a layout positions. A
+   * function may compute the class from the surface's render state.
+   */
+  className?: ClassNameOrFunction<PopoverRenderProps>;
   /**
    * Where to portal the menu. Defaults to the end of `<body>`, which is right
    * for an app that sets its StyleX theme on `:root`. An app that scopes the
@@ -33,8 +36,8 @@ type MenuContentProps<T extends object = object> = {
   side?: MenuSide;
   /** How far the menu sits from the trigger, in pixels. @default 8 */
   sideOffset?: number;
-  /** A function may compute the style from the menu's render state. */
-  style?: MenuProps<T>['style'];
+  /** Lands on the surface, as `className` does. */
+  style?: StyleOrFunction<PopoverRenderProps>;
 } & Omit<MenuProps<T>, 'className' | 'style'>;
 type MenuItemProps$1<T extends object = object> = {
   /** The item's label — what it does. */

package/dist/components/menu/index.js

@@ -87,7 +87,7 @@ function Menu$1(t0) {
 * element a layout positions.
 */
 function MenuContent(t0) {
-	const $ = c(29);
+	const $ = c(28);
 	let alignOffset;
 	let className;
 	let container;
@@ -131,58 +131,53 @@ function MenuContent(t0) {
 		$[12] = t4;
 	} else t4 = $[12];
 	let t5;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = mergeStatefulStyles(surfaceStyles, {});
-		$[13] = t5;
-	} else t5 = $[13];
+	if ($[13] !== className || $[14] !== style) {
+		t5 = mergeStatefulStyles(surfaceStyles, {
+			className,
+			style
+		});
+		$[13] = className;
+		$[14] = style;
+		$[15] = t5;
+	} else t5 = $[15];
 	let t6;
-	if ($[14] !== search) {
+	if ($[16] !== search) {
 		t6 = search === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			className: "x9f619 xqf7pud xn60lsn",
 			children: search
 		});
-		$[14] = search;
-		$[15] = t6;
-	} else t6 = $[15];
+		$[16] = search;
+		$[17] = t6;
+	} else t6 = $[17];
 	let t7;
-	if ($[16] !== className || $[17] !== style) {
-		t7 = mergeStatefulStyles({ className: "x9f619 x78zum5 xdt5ytf x1t137rt" }, {
-			className,
-			style
-		});
-		$[16] = className;
-		$[17] = style;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== props || $[20] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Menu, {
+	if ($[18] !== props) {
+		t7 = /* @__PURE__ */ jsx(Menu, {
 			...props,
-			...t7
+			className: "x9f619 x78zum5 xdt5ytf x1t137rt"
 		});
-		$[19] = props;
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== alignOffset || $[23] !== container || $[24] !== sideOffset || $[25] !== t4 || $[26] !== t6 || $[27] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Popover, {
+		$[18] = props;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== alignOffset || $[21] !== container || $[22] !== sideOffset || $[23] !== t4 || $[24] !== t5 || $[25] !== t6 || $[26] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Popover, {
 			crossOffset: alignOffset,
 			offset: sideOffset,
 			placement: t4,
 			UNSTABLE_portalContainer: container,
 			...t5,
-			children: [t6, t8]
+			children: [t6, t7]
 		});
-		$[22] = alignOffset;
-		$[23] = container;
-		$[24] = sideOffset;
-		$[25] = t4;
-		$[26] = t6;
+		$[20] = alignOffset;
+		$[21] = container;
+		$[22] = sideOffset;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
 		$[27] = t8;
-		$[28] = t9;
-	} else t9 = $[28];
-	return t9;
+	} else t8 = $[27];
+	return t8;
 }
 /**
 * One action. Its slots are the row's: `leading` before the label, the label