@kanso-labs/kanso-ui 0.40.7 → 0.40.9

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

@@ -27,7 +27,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * The call site's `className` and `style` land on the `<nav>`.
 */
 function NavigationRail(t0) {
-	const $ = c(30);
+	const $ = c(34);
 	let children;
 	let context;
 	let header;
@@ -59,8 +59,8 @@ function NavigationRail(t0) {
 		t3 = "nav";
 		t1 = props;
 		t2 = mergeStyles({
-			0: { className: "x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x8i8c5o xlaft8j xzoy561 x13oubkp" },
-			1: { className: "x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl" }
+			0: { className: "x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xzoy561 x13oubkp" },
+			1: { className: "x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl" }
 		}[!!isExpanded << 0], props);
 		$[0] = t0;
 		$[1] = children;
@@ -88,7 +88,7 @@ function NavigationRail(t0) {
 		t5 = header === void 0 ? null : /* @__PURE__ */ jsx("div", {
 			...{
 				0: { className: "x6s0dn4 x9f619 x78zum5 xdt5ytf xqa3g7y" },
-				1: { className: "x9f619 x78zum5 xdt5ytf x1cy8zhl x1mgj515" }
+				1: { className: "x9f619 x78zum5 xdt5ytf x1cy8zhl xkh2ocl x1mgj515 xdxifnh" }
 			}[!!isExpanded << 0],
 			children: header
 		});
@@ -97,48 +97,67 @@ function NavigationRail(t0) {
 		$[15] = t5;
 	} else t5 = $[15];
 	let t6;
-	if ($[16] !== children || $[17] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t5, children] });
-		$[16] = children;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	let t7;
-	if ($[19] !== t1 || $[20] !== t2 || $[21] !== t6) {
-		t7 = {
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			0: { className: "x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj" },
+			1: { className: "x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj xzoy561" }
+		};
+		$[16] = t6;
+	} else t6 = $[16];
+	const t7 = t6[!!!isExpanded << 0];
+	let t8;
+	if ($[17] !== children || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx("div", {
+			...t7,
+			children
+		});
+		$[17] = children;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t5 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t5, t8] });
+		$[20] = t5;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t1 || $[24] !== t2 || $[25] !== t9) {
+		t10 = {
 			...t1,
 			...t2,
-			children: t6
+			children: t9
 		};
-		$[19] = t1;
-		$[20] = t2;
-		$[21] = t6;
-		$[22] = t7;
-	} else t7 = $[22];
-	let t8;
-	if ($[23] !== render || $[24] !== t3 || $[25] !== t7) {
-		t8 = {
+		$[23] = t1;
+		$[24] = t2;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== render || $[28] !== t10 || $[29] !== t3) {
+		t11 = {
 			defaultTagName: t3,
-			props: t7,
+			props: t10,
 			render
 		};
-		$[23] = render;
-		$[24] = t3;
-		$[25] = t7;
-		$[26] = t8;
-	} else t8 = $[26];
-	const rail = t4(t8);
-	let t9;
-	if ($[27] !== context || $[28] !== rail) {
-		t9 = /* @__PURE__ */ jsx(NavigationContext, {
+		$[27] = render;
+		$[28] = t10;
+		$[29] = t3;
+		$[30] = t11;
+	} else t11 = $[30];
+	const rail = t4(t11);
+	let t12;
+	if ($[31] !== context || $[32] !== rail) {
+		t12 = /* @__PURE__ */ jsx(NavigationContext, {
 			value: context,
 			children: rail
 		});
-		$[27] = context;
-		$[28] = rail;
-		$[29] = t9;
-	} else t9 = $[29];
-	return t9;
+		$[31] = context;
+		$[32] = rail;
+		$[33] = t12;
+	} else t12 = $[33];
+	return t12;
 }
 /**
 * One destination of a navigation rail — an icon, a label and, when it is the

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","stylex","useMemo","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationContext","useRender","mergeStyles","colors","spacing","NavigationRailProps","header","isExpanded","selectedRoute","NavigationRail","t0","$","children","context","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","t9","const","t10","form","0","className","1","defaultTagName","rail","NavigationRailItem","Item","NavigationRailItemProps","_c"],"sources":["../../../src/components/navigation-rail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// The navigation rail page's rail, in both its forms: collapsed, a 96dp\n// column of vertical destinations down the leading edge of a medium or wider\n// window, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. The expanded rail is what the page has\n// replace the navigation drawer, so an app's top-level destinations reach\n// every window size between this and NavigationBar. Both forms are on the\n// surface role, with their contents 44dp from the top: the first destination,\n// or a header when the rail has one — a menu button that expands it, say —\n// with the first destination 40dp under it. The destinations are\n// `src/navigation`'s, shared with NavigationBar, which holds their values.\n//\n// The rail is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\ntype NavigationRailProps = RenderComponentProps<'nav'> & {\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  header?: ReactNode;\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  isExpanded?: boolean;\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * is a link, so it routes through React Aria's `RouterProvider` when the app\n * has one.\n *\n * ```tsx\n * <NavigationRail aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`.\n */\nfunction NavigationRail({\n  children,\n  header,\n  isExpanded = false,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationRailProps) {\n  const context = useMemo(() => ({\n    form: isExpanded ? 'expanded' as const : 'collapsed' as const,\n    selectedRoute\n  }), [isExpanded, selectedRoute]);\n  const rail = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        0: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x8i8c5o xlaft8j xzoy561 x13oubkp\"\n        },\n        1: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl\"\n        }\n      }[!!isExpanded << 0], props),\n      children: <>\n          {header === undefined ? null : <div {...{\n          0: {\n            className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf xqa3g7y\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1cy8zhl x1mgj515\"\n          }\n        }[!!isExpanded << 0]}>\n              {header}\n            </div>}\n          {children}\n        </>\n    },\n    render\n  });\n  return <NavigationContext value={context}>{rail}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation rail — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationRail`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationRailItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\nNavigationRail.Item = NavigationRailItem;\nexport type { NavigationItemProps as NavigationRailItemProps, NavigationRailProps };\nexport { NavigationRailItem };\nexport default NavigationRail;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAAkB,eAAAC,IAAA;CAAA,MAAAC,IAAAnB,EAAA,EAAA;CAAA,IAAAoB;CAAA,IAAAC;CAAA,IAAAP;CAAA,IAAAC;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAAwB,MAAA,EAAAE,UAAAO,IAAAb,QAAAc,IAAAb,YAAAc,IAAAP,QAAAQ,IAAAd,eAAA,GAAAe,UAAAb;EAAAE,WAAAO;EAAAb,SAAAc;EAAAN,SAAAQ;EAGtBf,aAAAc,OAAAG,KAAAA,IAAA,QAAAH;EAMQ,MAAAI,KAAAlB,aAAa,aAAsB;EAAoB,IAAAoB;EAAA,IAAAhB,EAAA,QAAAH,iBAAAG,EAAA,QAAAc,IAAA;GADhCE,MAAA;IAAAC,MACvBH;IAAuDjB;GAE/D;GAACG,EAAA,MAAAH;GAAAG,EAAA,MAAAc;GAAAd,EAAA,MAAAgB;EAAA,OAAAA,MAAAhB,EAAA;EAHDE,UAA+Bc;EAIlB1B,KAAAA;EACKgB,KAAA;EAEXM,KAAAA;EACAP,KAAAd,YAAY;GAAA2B,GACV,EAAAC,WACU,mFACb;GAACC,GACE,EAAAD,WACU,oGACb;EACF,EAAE,CAAC,CAACvB,cAAc,IAAIgB,KAAK;EAACZ,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAL;EAAAK,EAAA,KAAAJ;EAAAI,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;EAAAN,EAAA,KAAAO;CAAA,OAAA;EAAAN,WAAAD,EAAA;EAAAE,UAAAF,EAAA;EAAAL,SAAAK,EAAA;EAAAJ,aAAAI,EAAA;EAAAG,SAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,QAAAL,UAAAK,EAAA,QAAAJ,YAAA;EAEvBY,KAAAb,WAAWkB,KAAAA,IAAX,OAA8B,oBAAA,OAAA;GASvB,GATgC;IAAAK,GACrC,EAAAC,WACU,yCACb;IAACC,GACE,EAAAD,WACU,2CACb;GACF,EAAE,CAAC,CAACvB,cAAc;GACXD,UAAAA;EACG,CAAA;EAAAK,EAAA,MAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAC,YAAAD,EAAA,QAAAQ,IAAA;EAVFC,KAAA,qBAAA,YAAA,EAAA,UAAA,CACLD,IAUAP,QAAQ,EAAA,CAAA;EACRD,EAAA,MAAAC;EAAAD,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,MAAAL,EAAA,QAAAS,IAAA;EAtBAC,KAAA;GAAA,GACFE;GAAK,GACLP;GAOyBJ,UAClBQ;EAaZ;EAACT,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAG,UAAAH,EAAA,QAAAM,MAAAN,EAAA,QAAAU,IAAA;EAzBoBC,KAAA;GAAAU,gBACLf;GAAKM,OACdF;GAuBNP;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAAM;EAAAN,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CA3BD,MAAAsB,OAAahC,GAAUqB,EA2BtB;CAAE,IAAAG;CAAA,IAAAd,EAAA,QAAAE,WAAAF,EAAA,QAAAsB,MAAA;EACIR,KAAA,oBAAC,mBAAD;GAA0BZ,OAAAA;GAAUoB,UAAAA;EAAlB,CAAA;EAA2CtB,EAAA,MAAAE;EAAAF,EAAA,MAAAsB;EAAAtB,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OAA7Dc;AAA6D;;;;;;;;;;AAYtE,SAAAS,mBAAAX,OAAA;CAAA,MAAAZ,IAAAnB,EAAA,CAAA;CAAA,IAAAkB;CAAA,IAAAC,EAAA,OAAAY,OAAA;EACSb,KAAA,oBAAC,gBAAD,EAAe,GAAKa,MAAK,CAAA;EAAIZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B;AAEtCD,eAAe0B,OAAOD"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","stylex","useMemo","NavigationItemProps","RenderComponentProps","NavigationItem","NavigationContext","useRender","mergeStyles","colors","spacing","RING_REACH","NavigationRailProps","header","isExpanded","selectedRoute","NavigationRail","t0","$","children","context","render","t1","t2","t3","t4","t5","t6","t7","t8","props","undefined","t9","const","t10","form","0","className","1","Symbol","for","t11","defaultTagName","rail","t12","NavigationRailItem","Item","NavigationRailItemProps","_c"],"sources":["../../../src/components/navigation-rail/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo } from 'react';\nimport type { NavigationItemProps } from '../../navigation';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { NavigationItem } from '../../navigation';\nimport { NavigationContext } from '../../navigation/context';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\n\n// The navigation rail page's rail, in both its forms: collapsed, a 96dp\n// column of vertical destinations down the leading edge of a medium or wider\n// window, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. The expanded rail is what the page has\n// replace the navigation drawer, so an app's top-level destinations reach\n// every window size between this and NavigationBar. Both forms are on the\n// surface role, with their contents 44dp from the top: the first destination,\n// or a header when the rail has one — a menu button that expands it, say —\n// with the first destination 40dp under it. The destinations are\n// `src/navigation`'s, shared with NavigationBar, which holds their values.\n//\n// The rail is a `<nav>`, and a page usually has more than one navigation\n// landmark, so name it with `aria-label`.\n\n// How far a destination's focus ring reaches past it: the 2dp offset and\n// the 2dp ring. The destinations scroll, and a scroll container clips what\n// overflows it, so the block they scroll in is padded by this much and\n// pulled back out by as much, which leaves every destination where it was\n// and every ring whole.\nconst RING_REACH = '4px';\ntype NavigationRailProps = RenderComponentProps<'nav'> & {\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  header?: ReactNode;\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  isExpanded?: boolean;\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match carries `aria-current=\"page\"` and the\n   * active indicator.\n   */\n  selectedRoute?: string;\n};\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * is a link, so it routes through React Aria's `RouterProvider` when the app\n * has one.\n *\n * ```tsx\n * <NavigationRail aria-label=\"Label\" selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * The call site's `className` and `style` land on the `<nav>`.\n */\nfunction NavigationRail({\n  children,\n  header,\n  isExpanded = false,\n  render,\n  selectedRoute,\n  ...props\n}: NavigationRailProps) {\n  const context = useMemo(() => ({\n    form: isExpanded ? 'expanded' as const : 'collapsed' as const,\n    selectedRoute\n  }), [isExpanded, selectedRoute]);\n  const rail = useRender({\n    defaultTagName: 'nav',\n    props: {\n      ...props,\n      ...mergeStyles({\n        0: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xzoy561 x13oubkp\"\n        },\n        1: {\n          className: \"x6s0dn4 x14s9m32 x5yr21d x9f619 x78zum5 xdt5ytf x2lah0s x8i8c5o xlaft8j xeq5yr9 xxc7z9f x12rczxh x17qtykl\"\n        }\n      }[!!isExpanded << 0], props),\n      children: <>\n          {header === undefined ? null : <div {...{\n          0: {\n            className: \"x6s0dn4 x9f619 x78zum5 xdt5ytf xqa3g7y\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1cy8zhl xkh2ocl x1mgj515 xdxifnh\"\n          }\n        }[!!isExpanded << 0]}>\n              {header}\n            </div>}\n          <div {...{\n          0: {\n            className: \"x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj\"\n          },\n          1: {\n            className: \"x6s0dn4 xkh2ocl x9f619 x78zum5 xdl72j9 xdt5ytf x1iyjqo2 xs83m0k x1fh6m6z xfll3lq x2lwn1j x1odjw0f x12ulsxz xfn1xvj xzoy561\"\n          }\n        }[!!!isExpanded << 0]}>\n            {children}\n          </div>\n        </>\n    },\n    render\n  });\n  return <NavigationContext value={context}>{rail}</NavigationContext>;\n}\n\n/**\n * One destination of a navigation rail — an icon, a label and, when it is the\n * current one, the active indicator. See `NavigationRail`.\n *\n * Defined here rather than re-exported from `src/navigation`: a re-export\n * let the build hand the package entry that module directly, past this\n * module's client directive, and a server component importing it got the\n * component itself rather than a reference to a client one.\n */\nfunction NavigationRailItem(props: NavigationItemProps & RefAttributes<HTMLAnchorElement>) {\n  return <NavigationItem {...props} />;\n}\nNavigationRail.Item = NavigationRailItem;\nexport type { NavigationItemProps as NavigationRailItemProps, NavigationRailProps };\nexport { NavigationRailItem };\nexport default NavigationRail;"],"mappings":"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"}

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

@@ -42,6 +42,15 @@ type NumberFieldProps$1 = {
    * focus to — after a server's error, say. `ref` is the field as a whole.
    */
   inputRef?: Ref<HTMLInputElement>;
+  /**
+   * Whether the mouse wheel and a trackpad's scroll leave the value alone.
+   * React Aria steps a focused number field's value with the wheel, so a
+   * reader scrolling a long form past a field they had left focused changed
+   * its value instead of moving the page. Stepping from the wheel is the
+   * call site's to ask for, with `false`.
+   * @default true
+   */
+  isWheelDisabled?: boolean;
   /**
    * What the field is for. Required rather than optional: a field with no
    * label is a box a screen reader cannot name.
@@ -68,7 +77,7 @@ type NumberFieldProps$1 = {
    * @default 'filled'
    */
   variant?: FieldVariant;
-} & Omit<NumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;
+} & Omit<NumberFieldProps, 'children' | 'isInvalid' | 'isWheelDisabled' | 'validationBehavior'>;
 /**
  * A labelled number input with steppers. Its value is React Aria's: pass
  * `value` with `onChange` to control it, or `defaultValue` to let it keep
@@ -76,12 +85,14 @@ type NumberFieldProps$1 = {
  * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`
  * says how it reads, in the locale the page is in: a currency, a percentage,
  * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.
+ * The mouse wheel scrolls the page past it rather than stepping it, unless
+ * `isWheelDisabled` is `false`.
  *
  * The call site's `className` and `style` land on the field as a whole,
  * which is the element a layout positions. The box, label, input and message
  * are the field chrome in `src/field`, shared with every other field.
  */
-declare function NumberField$1({ decrementLabel, description, error, floatingLabel, incrementLabel, inputRef, isDisabled, label, numeric, steppers, variant, ...props }: NumberFieldProps$1 & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function NumberField$1({ decrementLabel, description, error, floatingLabel, incrementLabel, inputRef, isDisabled, isWheelDisabled, label, numeric, steppers, variant, ...props }: NumberFieldProps$1 & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type NumberFieldProps$1 as NumberFieldProps, NumberField$1 as default };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,6 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
-import { spacing, typography } from "../../tokens/design.tokens.stylex.js";
+import { sizing, spacing, typography } from "../../tokens/design.tokens.stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import IconButton from "../icon-button/index.js";
@@ -12,6 +12,9 @@ import { Button, NumberField } from "react-aria-components";
 //#region src/components/number-field/index.tsx
 `${spacing.sm}${typography.bodySmallLineHeight}${typography.bodyLargeLineHeight}`;
 `${spacing.lg}${typography.bodyLargeLineHeight}`;
+`${typography.bodyLargeLineHeight}${sizing.controlXs}`;
+const STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;
+const INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;
 const styles = {
 	stepper: {
 		k6CgDc: "x12w9bfk",
@@ -73,62 +76,66 @@ const styles = {
 * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`
 * says how it reads, in the locale the page is in: a currency, a percentage,
 * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.
+* The mouse wheel scrolls the page past it rather than stepping it, unless
+* `isWheelDisabled` is `false`.
 *
 * The call site's `className` and `style` land on the field as a whole,
 * which is the element a layout positions. The box, label, input and message
 * are the field chrome in `src/field`, shared with every other field.
 */
 function NumberField$1(t0) {
-	const $ = c(37);
-	const { decrementLabel, description, error, floatingLabel: t1, incrementLabel, inputRef, isDisabled: t2, label, numeric: t3, steppers: t4, variant: t5, ...props$1 } = t0;
+	const $ = c(39);
+	const { decrementLabel, description, error, floatingLabel: t1, incrementLabel, inputRef, isDisabled: t2, isWheelDisabled: t3, label, numeric: t4, steppers: t5, variant: t6, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
-	const numeric = t3 === void 0 ? true : t3;
-	const steppers = t4 === void 0 ? "vertical" : t4;
-	const variant = t5 === void 0 ? "filled" : t5;
+	const isWheelDisabled = t3 === void 0 ? true : t3;
+	const numeric = t4 === void 0 ? true : t4;
+	const steppers = t5 === void 0 ? "vertical" : t5;
+	const variant = t6 === void 0 ? "filled" : t6;
 	const inline = steppers === "horizontal";
 	const validationBehavior = useFieldValidationBehavior();
 	const T0 = NumberField;
-	let t6;
+	let t7;
 	if ($[0] !== error) {
-		t6 = invalidFrom(error);
+		t7 = invalidFrom(error);
 		$[0] = error;
-		$[1] = t6;
-	} else t6 = $[1];
-	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
-	let t8;
+		$[1] = t7;
+	} else t7 = $[1];
+	const t8 = mergeStatefulStyles(props(fieldStyles.root), props$1);
+	const t9 = inline ? INLINE_INSET : STACKED_INSET;
+	let t10;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = {
+		t10 = {
 			0: { className: "x1cy8zhl x9f619 x78zum5 x126z3so" },
 			1: { className: "x9f619 x78zum5 x126z3so x6s0dn4" }
 		};
-		$[2] = t8;
-	} else t8 = $[2];
-	const t9 = t8[!!inline << 0];
-	let t10;
+		$[2] = t10;
+	} else t10 = $[2];
+	const t11 = t10[!!inline << 0];
+	let t12;
 	if ($[3] !== inputRef || $[4] !== numeric) {
-		t10 = /* @__PURE__ */ jsx(FieldInput, {
+		t12 = /* @__PURE__ */ jsx(FieldInput, {
 			numeric,
 			ref: inputRef
 		});
 		$[3] = inputRef;
 		$[4] = numeric;
-		$[5] = t10;
-	} else t10 = $[5];
-	let t11;
+		$[5] = t12;
+	} else t12 = $[5];
+	let t13;
 	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = {
-			0: { className: "x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
-			2: { className: "x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv" },
-			1: { className: "x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
-			3: { className: "x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf" }
+		t13 = {
+			0: { className: "x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur" },
+			2: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv" },
+			1: { className: "x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf" },
+			3: { className: "x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf" }
 		};
-		$[6] = t11;
-	} else t11 = $[6];
-	const t12 = t11[!!inline << 1 | !!(!inline && variant === "outlined") << 0];
-	let t13;
+		$[6] = t13;
+	} else t13 = $[6];
+	const t14 = t13[!!inline << 1 | !!(!inline && variant === "outlined") << 0];
+	let t15;
 	if ($[7] !== decrementLabel || $[8] !== incrementLabel || $[9] !== inline || $[10] !== variant) {
-		t13 = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		t15 = inline ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
 			"aria-label": decrementLabel,
 			size: "xs",
 			slot: "decrement",
@@ -153,76 +160,80 @@ function NumberField$1(t0) {
 		$[8] = incrementLabel;
 		$[9] = inline;
 		$[10] = variant;
-		$[11] = t13;
-	} else t13 = $[11];
-	let t14;
-	if ($[12] !== t12 || $[13] !== t13) {
-		t14 = /* @__PURE__ */ jsx("div", {
-			...t12,
-			children: t13
+		$[11] = t15;
+	} else t15 = $[11];
+	let t16;
+	if ($[12] !== t14 || $[13] !== t15) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			...t14,
+			children: t15
 		});
-		$[12] = t12;
-		$[13] = t13;
-		$[14] = t14;
-	} else t14 = $[14];
-	let t15;
-	if ($[15] !== t10 || $[16] !== t14 || $[17] !== t9) {
-		t15 = /* @__PURE__ */ jsxs("div", {
-			...t9,
-			children: [t10, t14]
+		$[12] = t14;
+		$[13] = t15;
+		$[14] = t16;
+	} else t16 = $[14];
+	let t17;
+	if ($[15] !== t11 || $[16] !== t12 || $[17] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			...t11,
+			children: [t12, t16]
 		});
-		$[15] = t10;
-		$[16] = t14;
-		$[17] = t9;
-		$[18] = t15;
-	} else t15 = $[18];
-	let t16;
-	if ($[19] !== floatingLabel || $[20] !== label || $[21] !== props$1.isRequired || $[22] !== t15 || $[23] !== variant) {
-		t16 = /* @__PURE__ */ jsx(FieldBox, {
+		$[15] = t11;
+		$[16] = t12;
+		$[17] = t16;
+		$[18] = t17;
+	} else t17 = $[18];
+	let t18;
+	if ($[19] !== floatingLabel || $[20] !== label || $[21] !== props$1.isRequired || $[22] !== t17 || $[23] !== t9 || $[24] !== variant) {
+		t18 = /* @__PURE__ */ jsx(FieldBox, {
+			endInset: t9,
 			floatingLabel,
 			isRequired: props$1.isRequired,
 			label,
 			variant,
-			children: t15
+			children: t17
 		});
 		$[19] = floatingLabel;
 		$[20] = label;
 		$[21] = props$1.isRequired;
-		$[22] = t15;
-		$[23] = variant;
-		$[24] = t16;
-	} else t16 = $[24];
-	let t17;
-	if ($[25] !== description || $[26] !== error) {
-		t17 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[22] = t17;
+		$[23] = t9;
+		$[24] = variant;
+		$[25] = t18;
+	} else t18 = $[25];
+	let t19;
+	if ($[26] !== description || $[27] !== error) {
+		t19 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[25] = description;
-		$[26] = error;
-		$[27] = t17;
-	} else t17 = $[27];
-	let t18;
-	if ($[28] !== T0 || $[29] !== isDisabled || $[30] !== props$1 || $[31] !== t16 || $[32] !== t17 || $[33] !== t6 || $[34] !== t7 || $[35] !== validationBehavior) {
-		t18 = /* @__PURE__ */ jsxs(T0, {
+		$[26] = description;
+		$[27] = error;
+		$[28] = t19;
+	} else t19 = $[28];
+	let t20;
+	if ($[29] !== T0 || $[30] !== isDisabled || $[31] !== isWheelDisabled || $[32] !== props$1 || $[33] !== t18 || $[34] !== t19 || $[35] !== t7 || $[36] !== t8 || $[37] !== validationBehavior) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
-			isInvalid: t6,
+			isInvalid: t7,
+			isWheelDisabled,
 			validationBehavior,
 			...props$1,
-			...t7,
-			children: [t16, t17]
+			...t8,
+			children: [t18, t19]
 		});
-		$[28] = T0;
-		$[29] = isDisabled;
-		$[30] = props$1;
-		$[31] = t16;
-		$[32] = t17;
-		$[33] = t6;
-		$[34] = t7;
-		$[35] = validationBehavior;
-		$[36] = t18;
-	} else t18 = $[36];
-	return t18;
+		$[29] = T0;
+		$[30] = isDisabled;
+		$[31] = isWheelDisabled;
+		$[32] = props$1;
+		$[33] = t18;
+		$[34] = t19;
+		$[35] = t7;
+		$[36] = t8;
+		$[37] = validationBehavior;
+		$[38] = t20;
+	} else t20 = $[38];
+	return t20;
 }
 function StackedStepper(t0) {
 	const $ = c(8);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","props","undefined","inline","validationBehavior","T0","t6","t7","root","t8","Symbol","for","0","className","1","t9","t10","t11","2","3","t12","t13","t14","t15","t16","isRequired","t17","t18","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} ref={inputRef} />\n          <div {...{\n          0: {\n            className: \"x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so xdj266r x1tn5xpv\"\n          },\n          1: {\n            className: \"x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x78zum5 x2lah0s x1q0g3np x126z3so x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","Ref","RefAttributes","ButtonRenderProps","NumberFieldProps","RACNumberFieldProps","stylex","Button","RACButton","NumberField","RACNumberField","FieldVariant","FieldBox","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","MinusGlyph","PlusGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","IconButton","BOX_HALF","sm","bodySmallLineHeight","bodyLargeLineHeight","BOX_OUTLINED_HALF","lg","STEPPER_REACH","controlXs","STACKED_INSET","INLINE_INSET","md","styles","stepper","k6CgDc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kzqmXN","kjj79g","kjBf7l","kInvED","k3XXqK","kMeerF","kmVPX3","kIyJzY","k1ekBW","kAMwcw","$$css","stepperBottomOutlined","kT0f0o","stepperDisabled","stepperFocused","stepperHovered","stepperOutlined","stepperPressed","stepperTop","kfmiAY","decrementLabel","description","error","floatingLabel","incrementLabel","inputRef","HTMLInputElement","isWheelDisabled","label","numeric","steppers","variant","Omit","t0","$","t1","isDisabled","t2","t3","t4","t5","t6","props","undefined","inline","validationBehavior","T0","t7","t8","root","t9","t10","Symbol","for","0","className","1","t11","t12","t13","2","3","t14","t15","t16","t17","t18","isRequired","t19","t20","StackedStepper","children","outlined","slot","stepperStyles","top","state","isHovered","isPressed","isFocusVisible","NumberField","_c","props","RACNumberField","stylex.props","RACButton"],"sources":["../../../src/components/number-field/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, Ref, RefAttributes } from 'react';\nimport type { ButtonRenderProps, NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, NumberField as RACNumberField } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { MinusGlyph, PlusGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\n\n// The text fields page's field, holding a number: the same box, floating\n// label, underline and message as TextField, with the value in the mono\n// face and tabular figures by default, since a number is what those are\n// for, and two steppers at the trailing end.\n//\n// The steppers come in two layouts. Stacked, the plus over the minus, they\n// are a column flush with the box's top, end and bottom, each half of the\n// box's 56dp and 32dp wide, drawn here since the smallest icon button is\n// 32dp and two of those do not fit; the glyph is the icon buttons page's\n// 20dp for that size, and the hover, pressed, focus and disabled treatments\n// are the standard icon button's. Side by side, they are extra-small icon\n// buttons, the page's trailing icons in the library's own control, 12dp\n// from the end where the page puts a field's icons — the box's 16dp of\n// padding less the 4dp they pull back.\n//\n// **The stacked pair is the one control here that does not reach the 48dp\n// target**, and it is the layout rather than an oversight. Every other small\n// control in the library draws that target out of flow, over whatever sits\n// beside it — src/control/styles.ts carries the decision. These two have only\n// each other beside them: the column is 56dp tall in total, so two 48dp\n// targets inside it would overlap across most of their height, and the half\n// of a press that landed in the overlap would go to whichever box was\n// uppermost rather than to the glyph under the finger. Incrementing when a\n// reader meant to decrement is worse than a target that is short, so the\n// stacked layout keeps its 32 by 28 and the reader who needs the larger one\n// has `steppers=\"horizontal\"`, where each is an extra-small icon button and\n// gets the target from there — with the gap that keeps those two targets off\n// each other, which is the room the column has none of.\n//\n// React Aria's `NumberField` is the root and the box is its `Group`, which\n// is what names the box and the two steppers as one control; the steppers\n// are its increment and decrement buttons through context, disabled at the\n// ends of the range and kept out of the tab order, and the formatting is its\n// `formatOptions`.\n// Half the box, spelled from the same tokens the box derives its height\n// from rather than as the 28 that half of 56 comes to. A theme with a longer\n// body line makes the box taller — `Editorial` in src/theming/themes.ts does\n// — and a stated half leaves the pair short of the bottom edge they are\n// flush with.\n//\n// Written here rather than imported from src/field/styles.ts, which spells\n// the same two expressions: the StyleX compiler resolves a constant across\n// files only out of a `.stylex.ts` module, the same reason that file gives\n// for re-declaring the forced-colours query. The two have to move together.\nconst BOX_HALF = `calc((2 * ${spacing.sm} + ${typography.bodySmallLineHeight} + ${typography.bodyLargeLineHeight}) / 2)`;\nconst BOX_OUTLINED_HALF = `calc((2 * ${spacing.lg} + ${typography.bodyLargeLineHeight}) / 2)`;\n\n// How much of the end of the box's column the steppers take, with the 8dp\n// between them and the input, which the label stops short of — FieldBox's\n// `endInset`. Without it the label ran the column's width, under the\n// steppers, and a long one was cut short beneath them. Each is the input's\n// own end, so the label ends where the value does.\n//\n// Stacked, the 32dp column less the 16dp of the box's padding it reaches\n// into; side by side, the two extra-small buttons and the 8dp between them,\n// less the 4dp they reach into the padding.\n// How far a side-by-side stepper reaches past the control's line above and\n// below it: a negative margin, half the difference between the two.\nconst STEPPER_REACH = `calc((${typography.bodyLargeLineHeight} - ${sizing.controlXs}) / 2)`;\nconst STACKED_INSET = `calc(32px - ${spacing.lg} + ${spacing.sm})`;\nconst INLINE_INSET = `calc(2 * ${sizing.controlXs} + ${spacing.sm} + ${spacing.md} - ${spacing.lg} + ${spacing.sm})`;\nconst styles = {\n  stepper: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1viytl0\",\n    kaIpWk: \"x2u8bby\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1td3qas\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x2ssjo2\",\n    k3XXqK: \"x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xs2xxs2\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  stepperBottomOutlined: {\n    kT0f0o: \"x4gcak0\",\n    $$css: true\n  },\n  stepperDisabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  stepperFocused: {\n    k3XXqK: \"xaatb59\",\n    $$css: true\n  },\n  stepperHovered: {\n    kWkggS: \"x14noynh\",\n    $$css: true\n  },\n  stepperOutlined: {\n    kZKoxP: \"x1o675yb\",\n    $$css: true\n  },\n  stepperPressed: {\n    kWkggS: \"x123fei2\",\n    $$css: true\n  },\n  stepperTop: {\n    kfmiAY: \"xirz1nw\",\n    $$css: true\n  }\n};\ntype NumberFieldProps = {\n  /**\n   * The name of the stepper that lowers the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Decrease Quantity\" in English.\n   */\n  decrementLabel?: string;\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message, the red underline, and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  floatingLabel?: boolean;\n  /**\n   * The name of the stepper that raises the value, for a screen reader. Left\n   * out, React Aria names it in the reader's locale, followed by the field's\n   * own label — \"Increase Quantity\" in English.\n   */\n  incrementLabel?: string;\n  /**\n   * A ref to the field's own `<input>`, which is the element a call site moves\n   * focus to — after a server's error, say. `ref` is the field as a whole.\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Whether the mouse wheel and a trackpad's scroll leave the value alone.\n   * React Aria steps a focused number field's value with the wheel, so a\n   * reader scrolling a long form past a field they had left focused changed\n   * its value instead of moving the page. Stepping from the wheel is the\n   * call site's to ask for, with `false`.\n   * @default true\n   */\n  isWheelDisabled?: boolean;\n  /**\n   * What the field is for. Required rather than optional: a field with no\n   * label is a box a screen reader cannot name.\n   */\n  label: string;\n  /**\n   * Renders the value in the mono face with tabular figures, for amounts and\n   * other numbers meant to be compared down a column. On by default, since a\n   * number field holds nothing else.\n   * @default true\n   */\n  numeric?: boolean;\n  /**\n   * How the two steppers sit at the end of the box: stacked, the plus over\n   * the minus, flush with the box's edge, or side by side as extra-small\n   * icon buttons.\n   * @default 'vertical'\n   */\n  steppers?: 'horizontal' | 'vertical';\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats — the text fields page's two fields.\n   * @default 'filled'\n   */\n  variant?: FieldVariant;\n} & Omit<RACNumberFieldProps, 'children' | 'isInvalid' | 'isWheelDisabled' | 'validationBehavior'>;\n\n/**\n * A labelled number input with steppers. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own — and `onChange` is handed the number, `NaN` while the field is\n * empty. `minValue`, `maxValue` and `step` shape it, and `formatOptions`\n * says how it reads, in the locale the page is in: a currency, a percentage,\n * a unit. Arrow keys step the value, and Page Up and Page Down by ten steps.\n * The mouse wheel scrolls the page past it rather than stepping it, unless\n * `isWheelDisabled` is `false`.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The box, label, input and message\n * are the field chrome in `src/field`, shared with every other field.\n */\nfunction NumberField({\n  decrementLabel,\n  description,\n  error,\n  floatingLabel = true,\n  incrementLabel,\n  inputRef,\n  isDisabled = false,\n  isWheelDisabled = true,\n  label,\n  numeric = true,\n  steppers = 'vertical',\n  variant = 'filled',\n  ...props\n}: NumberFieldProps & RefAttributes<HTMLDivElement>) {\n  const inline = steppers === 'horizontal';\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACNumberField isDisabled={isDisabled} isInvalid={invalidFrom(error)} isWheelDisabled={isWheelDisabled} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      <FieldBox endInset={inline ? INLINE_INSET : STACKED_INSET} floatingLabel={floatingLabel} isRequired={props.isRequired} label={label} variant={variant}>\n        <div {...{\n        0: {\n          className: \"x1cy8zhl x9f619 x78zum5 x126z3so\"\n        },\n        1: {\n          className: \"x9f619 x78zum5 x126z3so x6s0dn4\"\n        }\n      }[!!inline << 0]}>\n          <FieldInput numeric={numeric} ref={inputRef} />\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s x1motrhk xk4mfur\"\n          },\n          2: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x6rec7h x1tn5xpv\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x2lah0s xk4mfur x17v9ssf\"\n          },\n          3: {\n            className: \"x9f619 x78zum5 x2lah0s x1q0g3np x126z3so x1jblbm6 x1tn5xpv x17v9ssf\"\n          }\n        }[!!inline << 1 | !!(!inline && variant === 'outlined') << 0]}>\n            {inline ? <>\n                <IconButton aria-label={decrementLabel} size=\"xs\" slot=\"decrement\">\n                  <MinusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n                <IconButton aria-label={incrementLabel} size=\"xs\" slot=\"increment\">\n                  <PlusGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n                </IconButton>\n              </> : <>\n                <StackedStepper label={incrementLabel} outlined={variant === 'outlined'} slot=\"increment\">\n                  <PlusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n                <StackedStepper label={decrementLabel} outlined={variant === 'outlined'} slot=\"decrement\">\n                  <MinusGlyph className=\"x1qx5ct2 x1lliihq xw4jnvo\" />\n                </StackedStepper>\n              </>}\n          </div>\n        </div>\n      </FieldBox>\n      <FieldMessage description={description} error={error} />\n    </RACNumberField>;\n}\nfunction StackedStepper({\n  children,\n  label,\n  outlined,\n  slot\n}: {\n  children: ReactNode;\n  label: string | undefined;\n  outlined: boolean;\n  slot: 'decrement' | 'increment';\n}) {\n  return <RACButton aria-label={label} slot={slot} {...mergeStatefulStyles(stepperStyles(slot === 'increment', outlined), {})}>\n      {children}\n    </RACButton>;\n}\n\n// A stacked stepper: React Aria's button with the slot the field's context\n// looks for, drawn from its render state. Built by a call rather than\n// written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after.\nfunction stepperStyles(top: boolean, outlined: boolean) {\n  return (state: ButtonRenderProps) => stylex.props(styles.stepper, outlined && styles.stepperOutlined, top && styles.stepperTop, !top && outlined && styles.stepperBottomOutlined, state.isHovered && !state.isDisabled && styles.stepperHovered, state.isPressed && !state.isDisabled && styles.stepperPressed, state.isFocusVisible && styles.stepperFocused, state.isDisabled && styles.stepperDisabled);\n}\nexport type { NumberFieldProps };\nexport default NumberField;"],"mappings":"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"}

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

@@ -48,7 +48,10 @@ type PopoverTrigger = 'hover' | 'press';
  * keep its own.
  *
  * Non-modal by design — the page behind stays scrollable and clickable, which
- * is the difference from `Sheet`. Pass `modal` to change that.
+ * is the difference from `Sheet`. Pass `modal` to change that. Escape, a press
+ * anywhere outside the panel and a button given `slot="close"` close it, and
+ * a press on its trigger toggles it. Inside a dialog, a press on the scrim
+ * closes the popover first and the dialog on the next, as a menu does.
  *
  * Composed rather than configured by props, because a popover's contents are
  * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and