@kanso-labs/kanso-ui 0.40.7 → 0.40.8

package/dist/badge/index.js

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+//#region src/badge/index.ts
+/**
+* A style laid over a large badge's mark by what the badge is drawn in,
+* after the mark's own, so it can move the mark out of its corner. A
+* navigation destination sets its label beside its icon in its horizontal
+* forms, and a count overhangs the icon by up to 22dp on that side: the
+* destination puts the mark in the flow there, so the label starts after it
+* rather than under it. See src/navigation/styles.ts.
+*/
+const BadgeMarkContext = createContext(null);
+//#endregion
+export { BadgeMarkContext };
+
+//# sourceMappingURL=index.js.map

package/dist/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["StyleXStyles","createContext","BadgeMarkContext"],"sources":["../../src/badge/index.ts"],"sourcesContent":["import type { StyleXStyles } from '@stylexjs/stylex';\nimport { createContext } from 'react';\n\n// What a component drawing a badge can say about where its large mark goes.\n// Apart from the badge itself for the reason src/row gives, and a module of\n// its own rather than a part of the one place that uses it, since the badge\n// imports it and that place imports the badge.\n\n/**\n * A style laid over a large badge's mark by what the badge is drawn in,\n * after the mark's own, so it can move the mark out of its corner. A\n * navigation destination sets its label beside its icon in its horizontal\n * forms, and a count overhangs the icon by up to 22dp on that side: the\n * destination puts the mark in the flow there, so the label starts after it\n * rather than under it. See src/navigation/styles.ts.\n */\nconst BadgeMarkContext = createContext<null | StyleXStyles>(null);\nexport { BadgeMarkContext };"],"mappings":";;;;;;;;;;AAgBA,MAAME,mBAAmBD,cAAmC,IAAI"}

package/dist/components/badge/index.js

@@ -1,10 +1,56 @@
 "use client";
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
+import { BadgeMarkContext } from "../../badge/index.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useLocale } from "react-aria-components";
 //#region src/components/badge/index.tsx
+const styles = {
+	inFlow: {
+		kVAEAm: "x1uhb9sk",
+		$$css: true
+	},
+	large: {
+		kGNEyG: "x6s0dn4",
+		kZKoxP: "xlup9mm",
+		kMwMTN: "x1l7c2jh",
+		k1xSpc: "x78zum5",
+		kMv6JI: "xs1w0rn",
+		kGuDYH: "x1n35her",
+		kcqcaj: "xss6m8b",
+		k63SB2: "x1su64ma",
+		k87sOh: "x1qiirwl",
+		kLqNvP: "xty0069",
+		kjj79g: "xl56j7k",
+		kb6lSQ: "xdlnduh",
+		kLWn49: "xaomhve",
+		k7Eaqz: "x15kz4h8",
+		kg3NbH: "ximhkdq",
+		khDVqt: "xuxw1ft",
+		$$css: true
+	},
+	mark: {
+		kWkggS: "xwi4nbo",
+		kVAM5u: "x1w1tqly",
+		kaIpWk: "x1dkaolv",
+		ksu8eU: "xx61lck",
+		kMzoRj: "x13rsnn2",
+		kB7OPa: "x9f619",
+		kfzvcC: "x47corl",
+		kVAEAm: "x10l6tqk",
+		$$css: true
+	},
+	small: {
+		kZKoxP: "xols6we",
+		kzqmXN: "x1v4s8kt",
+		k87sOh: "x13vifvy",
+		kt4wiu: "xtijo5x",
+		$$css: true
+	}
+};
 /**
 * A badge on the corner of what it wraps, usually an icon: the small dot,
 * or with `count` the large badge holding a number. The mark is hidden from
@@ -26,10 +72,11 @@ import { useLocale } from "react-aria-components";
 * the badge is drawn on.
 */
 function Badge(t0) {
-	const $ = c(18);
-	const { children, count, max: t1, render, ...props } = t0;
+	const $ = c(21);
+	const { children, count, max: t1, render, ...props$1 } = t0;
 	const max = t1 === void 0 ? 999 : t1;
 	const { locale } = useLocale();
+	const placed = useContext(BadgeMarkContext);
 	let t2;
 	if ($[0] !== count || $[1] !== locale || $[2] !== max) {
 		const numbers = new Intl.NumberFormat(locale);
@@ -41,60 +88,57 @@ function Badge(t0) {
 	} else t2 = $[3];
 	const label = t2;
 	const t3 = "span";
-	const t4 = mergeStyles({ className: "x9f619 x3nfvp2 x1n2onr6" }, props);
+	const t4 = mergeStyles({ className: "x9f619 x3nfvp2 x1n2onr6" }, props$1);
 	let t5;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = {
-			0: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft" },
-			2: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x" },
-			1: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk" },
-			3: { className: "xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk" }
-		};
-		$[4] = t5;
-	} else t5 = $[4];
-	const t6 = t5[!!(label === void 0) << 1 | !!(children === void 0 || children === null) << 0];
-	let t7;
-	if ($[5] !== label || $[6] !== t6) {
-		t7 = /* @__PURE__ */ jsx("span", {
+	if ($[4] !== children || $[5] !== label || $[6] !== placed) {
+		t5 = props(styles.mark, label === void 0 ? styles.small : styles.large, (children === void 0 || children === null) && styles.inFlow, label !== void 0 && placed);
+		$[4] = children;
+		$[5] = label;
+		$[6] = placed;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== label || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			...t6,
+			...t5,
 			children: label
 		});
-		$[5] = label;
-		$[6] = t6;
-		$[7] = t7;
-	} else t7 = $[7];
+		$[8] = label;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== children || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [children, t6] });
+		$[11] = children;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
 	let t8;
-	if ($[8] !== children || $[9] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [children, t7] });
-		$[8] = children;
-		$[9] = t7;
-		$[10] = t8;
-	} else t8 = $[10];
-	let t9;
-	if ($[11] !== props || $[12] !== t4 || $[13] !== t8) {
-		t9 = {
-			...props,
+	if ($[14] !== props$1 || $[15] !== t4 || $[16] !== t7) {
+		t8 = {
+			...props$1,
 			...t4,
-			children: t8
+			children: t7
 		};
-		$[11] = props;
-		$[12] = t4;
-		$[13] = t8;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== render || $[16] !== t9) {
-		t10 = {
+		$[14] = props$1;
+		$[15] = t4;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== render || $[19] !== t8) {
+		t9 = {
 			defaultTagName: t3,
-			props: t9,
+			props: t8,
 			render
 		};
-		$[15] = render;
-		$[16] = t9;
-		$[17] = t10;
-	} else t10 = $[17];
-	return useRender(t10);
+		$[18] = render;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return useRender(t9);
 }
 //#endregion
 export { Badge as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","stylex","useLocale","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","Symbol","for","0","2","1","3","t6","t7","t8","t9","t10","defaultTagName","_c"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above it.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label.\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...{\n          0: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft\"\n          },\n          2: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x10l6tqk xols6we x1v4s8kt x13vifvy xtijo5x\"\n          },\n          1: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl x6s0dn4 xlup9mm x1l7c2jh x78zum5 xs1w0rn x1n35her xss6m8b x1su64ma x1qiirwl xty0069 xl56j7k xdlnduh xaomhve x15kz4h8 ximhkdq xuxw1ft x1uhb9sk\"\n          },\n          3: {\n            className: \"xwi4nbo x1w1tqly x1dkaolv xx61lck x13rsnn2 x9f619 x47corl xols6we x1v4s8kt x13vifvy xtijo5x x1uhb9sk\"\n          }\n        }[!!(label === undefined) << 1 | !!(children === undefined || children === null) << 0]}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,SAAAe,MAAAC,IAAA;CAAA,MAAAC,IAAAhB,EAAA,EAAA;CAAe,MAAA,EAAAiB,UAAAL,OAAAC,KAAAK,IAAAC,QAAA,GAAAC,UAAAL;CAGb,MAAAF,MAAAK,OAAAG,KAAAA,IAAA,MAAAH;CAIA,MAAA,EAAAI,WAEIpB,UAAU;CAAE,IAAAqB;CAAA,IAAAP,EAAA,OAAAJ,SAAAI,EAAA,OAAAM,UAAAN,EAAA,OAAAH,KAAA;EAChB,MAAAW,UAAgB,IAAIC,KAAIC,aAAcJ,MAAM;EAC9BC,KAAAX,UAAUS,KAAAA,IAAVA,KAAAA,IAAkCT,QAAQC,MAAR,GAAiBW,QAAOG,OAAQd,GAAG,EAAC,KAAMW,QAAOG,OAAQf,KAAK;EAACI,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;EAAAN,EAAA,KAAAH;EAAAG,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAA/G,MAAAY,QAAcL;CAEI,MAAAM,KAAA;CAGX,MAAAC,KAAAzB,YAAY,EAAA0B,WACF,0BACb,GAAGX,KAAK;CAAC,IAAAY;CAAA,IAAAhB,EAAA,OAAAiB,OAAAC,IAAA,2BAAA,GAAA;EAGwBF,KAAA;GAAAG,GAC1B,EAAAJ,WACU,0MACb;GAACK,GACE,EAAAL,WACU,uGACb;GAACM,GACE,EAAAN,WACU,0MACb;GAACO,GACE,EAAAP,WACU,uGACb;EACF;EAACf,EAAA,KAAAgB;CAAA,OAAAA,KAAAhB,EAAA;CAb8B,MAAAuB,KAAAP,GAa7B,CAAC,EAAEJ,UAAUP,KAAAA,MAAc,IAAI,CAAC,EAAEJ,aAAaI,KAAAA,KAAaJ,aAAa,SAAS;CAAE,IAAAuB;CAAA,IAAAxB,EAAA,OAAAY,SAAAZ,EAAA,OAAAuB,IAAA;EAbpFC,KAAA,oBAAA,QAAA;GAAkB,eAAA;GAAM,GAAKD;GAc1BX,UAAAA;EACI,CAAA;EAAAZ,EAAA,KAAAY;EAAAZ,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAAyB;CAAA,IAAAzB,EAAA,OAAAC,YAAAD,EAAA,OAAAwB,IAAA;EAjBDC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACLxB,UACDuB,EAeO,EAAA,CAAA;EACNxB,EAAA,KAAAC;EAAAD,EAAA,KAAAwB;EAAAxB,EAAA,MAAAyB;CAAA,OAAAA,KAAAzB,EAAA;CAAA,IAAA0B;CAAA,IAAA1B,EAAA,QAAAI,SAAAJ,EAAA,QAAAc,MAAAd,EAAA,QAAAyB,IAAA;EAvBAC,KAAA;GAAA,GACFtB;GAAK,GACLU;GAEMb,UACCwB;EAmBZ;EAACzB,EAAA,MAAAI;EAAAJ,EAAA,MAAAc;EAAAd,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAG,UAAAH,EAAA,QAAA0B,IAAA;EA1BcC,MAAA;GAAAC,gBACCf;GAAMT,OACfsB;GAwBNvB;EAEH;EAACH,EAAA,MAAAG;EAAAH,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,OA5BMZ,UAAUuC,GA4BhB;AAAC"}
+{"version":3,"file":"index.js","names":["c","_c","stylex","useContext","useLocale","RenderComponentProps","BadgeMarkContext","useRender","mergeStyles","colors","radii","spacing","typography","FORCED_COLORS","styles","inFlow","kVAEAm","$$css","large","kGNEyG","kZKoxP","kMwMTN","k1xSpc","kMv6JI","kGuDYH","kcqcaj","k63SB2","k87sOh","kLqNvP","kjj79g","kb6lSQ","kLWn49","k7Eaqz","kg3NbH","khDVqt","mark","kWkggS","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kfzvcC","small","kzqmXN","kt4wiu","BadgeProps","count","max","Badge","t0","$","children","t1","render","props","undefined","locale","placed","t2","numbers","Intl","NumberFormat","format","label","t3","t4","className","t5","t6","t7","t8","t9","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/badge/index.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { useLocale } from 'react-aria-components';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { BadgeMarkContext } from '../../badge';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The badges page's badge: a mark on the corner of an icon that flags\n// something new there, either as the 6dp small badge or as the 16dp large\n// badge holding a count. Both are the error pair — the error role, with the\n// count in on error — on a full corner, and the count is label small, capped\n// at four characters with a plus, as \"999+\".\n//\n// The badge wraps what it is drawn on, usually an icon, and places the mark\n// against that element's box, which is what the page measures from. The\n// small badge fills the icon's top trailing 6dp square. The large badge's\n// bottom leading corner sits 14dp down and 12dp in from the icon's top\n// trailing corner, so it stands 2dp above the icon and grows toward the end\n// as its count lengthens, to the page's 34dp at \"999+\". Both are logical\n// insets, so the mark stays on the trailing corner under right-to-left.\n//\n// Given nothing to wrap, the badge is the mark alone, standing in the line\n// rather than over a corner. That is the form the tabs page draws after a\n// label with no icon above it.\n//\n// The mark is hidden from assistive technology. A count read on its own is a\n// number with no subject; it belongs in the name of the control it sits on,\n// where a reader meets it with what it counts — \"Notifications, 3 new\" — and\n// the stories show it there.\n//\n// Under forced colours the error fill is painted over in the mode's\n// background, which left the small badge as nothing at all. It takes a 1px\n// border there instead, which the mode keeps and paints in its text colour.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  inFlow: {\n    kVAEAm: \"x1uhb9sk\",\n    $$css: true\n  },\n  large: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"xlup9mm\",\n    kMwMTN: \"x1l7c2jh\",\n    k1xSpc: \"x78zum5\",\n    kMv6JI: \"xs1w0rn\",\n    kGuDYH: \"x1n35her\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1su64ma\",\n    k87sOh: \"x1qiirwl\",\n    kLqNvP: \"xty0069\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"xdlnduh\",\n    kLWn49: \"xaomhve\",\n    k7Eaqz: \"x15kz4h8\",\n    kg3NbH: \"ximhkdq\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  mark: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x1w1tqly\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kfzvcC: \"x47corl\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  small: {\n    kZKoxP: \"xols6we\",\n    kzqmXN: \"x1v4s8kt\",\n    k87sOh: \"x13vifvy\",\n    kt4wiu: \"xtijo5x\",\n    $$css: true\n  }\n};\ntype BadgeProps = RenderComponentProps<'span'> & {\n  /**\n   * The number to show, which draws the page's large badge. Left out, the\n   * badge is the small 6dp dot, which flags without counting. A count of 0\n   * still draws, so leave the badge out when there is nothing to count.\n   */\n  count?: number;\n  /**\n   * The largest count drawn as itself. Above it the badge reads `max` and a\n   * plus, which is the page's 999+ at the default.\n   * @default 999\n   */\n  max?: number;\n};\n\n/**\n * A badge on the corner of what it wraps, usually an icon: the small dot,\n * or with `count` the large badge holding a number. The mark is hidden from\n * assistive technology, so put what it says in the name of the control it\n * sits on.\n *\n * ```tsx\n * <IconButton aria-label=\"Notifications, 3 new\">\n *   <Badge count={3}>\n *     <BellIcon />\n *   </Badge>\n * </IconButton>\n * ```\n *\n * Given no children, the mark stands alone in the line, as a tab draws it\n * after its label.\n *\n * The call site's `className` and `style` land on the element wrapping what\n * the badge is drawn on.\n */\nfunction Badge({\n  children,\n  count,\n  max = 999,\n  render,\n  ...props\n}: BadgeProps) {\n  const {\n    locale\n  } = useLocale();\n  const placed = useContext(BadgeMarkContext);\n  const numbers = new Intl.NumberFormat(locale);\n  const label = count === undefined ? undefined : count > max ? `${numbers.format(max)}+` : numbers.format(count);\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x3nfvp2 x1n2onr6\"\n      }, props),\n      children: <>\n          {children}\n          <span aria-hidden=\"true\" {...stylex.props(styles.mark, label === undefined ? styles.small : styles.large, (children === undefined || children === null) && styles.inFlow,\n        // What a destination drawing it asks of a count's mark — see\n        // src/badge. The small mark stays inside its icon's box, so\n        // nothing has to make room for it.\n        label !== undefined && placed)}>\n            {label}\n          </span>\n        </>\n    },\n    render\n  });\n}\nexport type { BadgeProps };\nexport default Badge;"],"mappings":"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"}

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

@@ -63,7 +63,12 @@ declare function DialogBody({ ref: callerRef, ...props }: HTMLAttributes<HTMLDiv
  * over it, and React Aria's popovers and menus draw above both.
  */
 declare function DialogContent({ children, className, container, defaultOpen, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props }: DialogContentProps & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
-declare function DialogFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+/**
+ * The dialog's actions. Full screen they are the action bar on the window's
+ * bottom edge, which a toast rises clear of while the dialog is open, so a
+ * tap meant for one of them never lands on the toast's own action instead.
+ */
+declare function DialogFooter({ ref: callerRef, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare function DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**
  * Names the dialog. Rendered through React Aria's title slot, which is what

package/dist/components/dialog/index.js

@@ -3,12 +3,14 @@ import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
+import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
 import { useScrollable } from "../../hooks/useScrollable.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useContext, useRef } from "react";
+import { createContext, useContext, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/dialog/index.tsx
+const FULL_SCREEN = "(width < 600px)";
 const styles = {
 	body: {
 		kB7OPa: "x9f619",
@@ -277,30 +279,42 @@ function DialogContent(t0) {
 	} else t8 = $[37];
 	return t8;
 }
-function DialogFooter(props) {
+/**
+* The dialog's actions. Full screen they are the action bar on the window's
+* bottom edge, which a toast rises clear of while the dialog is open, so a
+* tap meant for one of them never lands on the toast's own action instead.
+*/
+function DialogFooter(t0) {
 	const $ = c(6);
+	const { ref: callerRef, ...props } = t0;
 	const isBasic = useContext(BasicContext);
-	let t0;
-	if ($[0] !== isBasic || $[1] !== props) {
-		t0 = mergeStyles({
-			0: { className: "x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x" },
-			1: { className: "x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl xg0ps1x xt7dq6l x1ejq31n x8i8c5o x13h71tw" }
-		}[!!isBasic << 0], props);
-		$[0] = isBasic;
-		$[1] = props;
-		$[2] = t0;
-	} else t0 = $[2];
-	let t1;
-	if ($[3] !== props || $[4] !== t0) {
-		t1 = /* @__PURE__ */ jsx("div", {
+	const ref = useRef(null);
+	useHoldBottomEdge(ref, useFullScreen() && !isBasic);
+	const t1 = callerRef ?? void 0;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = mergeRefs(ref, t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const merged = t2;
+	const t3 = mergeStyles({
+		0: { className: "x6s0dn4 x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xnvi70j x8i8c5o x1pr6p50 x13h71tw xs3zajk xg0ps1x" },
+		1: { className: "x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xg0ps1x x1ejq31n x8i8c5o x13h71tw" }
+	}[!!isBasic << 0], props);
+	let t4;
+	if ($[2] !== merged || $[3] !== props || $[4] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
 			...props,
-			...t0
+			ref: merged,
+			...t3
 		});
+		$[2] = merged;
 		$[3] = props;
-		$[4] = t0;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
 }
 function DialogHeader(props) {
 	const $ = c(6);
@@ -308,8 +322,8 @@ function DialogHeader(props) {
 	let t0;
 	if ($[0] !== isBasic || $[1] !== props) {
 		t0 = mergeStyles({
-			0: { className: "x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x" },
-			1: { className: "x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x xt7dq6l x1sy0etr xzfxn0k x13h71tw" }
+			0: { className: "x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j xzfxn0k x1pr6p50 x13h71tw xs3zajk xg0ps1x" },
+			1: { className: "x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr xzfxn0k x13h71tw" }
 		}[!!isBasic << 0], props);
 		$[0] = isBasic;
 		$[1] = props;
@@ -338,8 +352,8 @@ function DialogTitle(props) {
 	let t0;
 	if ($[0] !== isBasic || $[1] !== props) {
 		t0 = mergeStyles({
-			0: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp" },
-			1: { className: "x9f619 x139gbkf x1ghz6dp x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury" }
+			0: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe" },
+			1: { className: "x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury" }
 		}[!!isBasic << 0], props);
 		$[0] = isBasic;
 		$[1] = props;
@@ -358,6 +372,22 @@ function DialogTitle(props) {
 	} else t1 = $[5];
 	return t1;
 }
+function isFullScreen() {
+	return window.matchMedia(FULL_SCREEN).matches;
+}
+function isFullScreenOnServer() {
+	return false;
+}
+function subscribeToFullScreen(listener) {
+	const query = window.matchMedia(FULL_SCREEN);
+	query.addEventListener("change", listener);
+	return () => {
+		query.removeEventListener("change", listener);
+	};
+}
+function useFullScreen() {
+	return useSyncExternalStore(subscribeToFullScreen, isFullScreen, isFullScreenOnServer);
+}
 Dialog$1.Body = DialogBody;
 Dialog$1.Content = DialogContent;
 Dialog$1.Footer = DialogFooter;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useMemo","useRef","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","scrim","0","1","Symbol","for","modalDialog","t6","t7","t8","DialogFooter","DialogHeader","DialogTitle","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useMemo, useRef } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The pairing is for a dialog that is a task, which needs the room. An alert\n// dialog is a question with two or three answers, and the page keeps the\n// full-screen dialog for tasks, so `role=\"alertdialog\"` stays the basic dialog\n// at every width. Filled to a phone's window it read as a headline at the top\n// of the screen and its answers at the bottom, with nothing between them but\n// the chrome. The `basic` styles below are how: each restates, without the\n// breakpoint, the properties the paired styles change below it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\n\n// The basic dialog at every width, for an alert dialog. Each entry is the\n// above-breakpoint value of every property its namesake in `styles` changes\n// below the breakpoint, laid over that namesake, so a property it leaves out\n// is the same in both presentations already. A value changed above the\n// breakpoint there has to change here too, which `index.test.tsx` checks by\n// comparing an alert dialog on a phone with any dialog on a desktop.\nconst basic = {\n  body: {\n    kLKAdn: \"x886u18 xexx8yu\",\n    $$css: true\n  },\n  centre: {\n    kmVPX3: \"x1apw6a7\",\n    $$css: true\n  }\n};\n\n// Whether this dialog is the basic one at every width. Content decides it from\n// the role and the parts read it, since each part carries its own share of\n// the full-screen presentation.\nconst BasicContext = createContext(false);\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. An\n * alert dialog stays the basic one at every width. Open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n *\n * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked. It also keeps the\n * dialog the basic one below the medium breakpoint, centred and sized to its\n * content, where a dialog of the default role fills the window.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n *\n * Inside `Dialog`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Dialog`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the dialog is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  return <BasicContext value={isBasic}>\n      <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre, isBasic && basic.centre)}>\n        <Modal\n      // The panel, where the call site's class and style land, rather\n      // than the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles({\n        0: {\n          className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n        },\n        1: {\n          className: \"x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2\"\n        }\n      }[!!isBasic << 0], {\n        className,\n        style\n      })}>\n          <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n            {children}\n          </RACDialog>\n        </Modal>\n      </ModalOverlay>\n    </BasicContext>;\n}\nfunction DialogFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 xt7dq6l xxcmccx x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x8i8c5o x11d16zi x13h71tw x5ubeis xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl xg0ps1x xt7dq6l x1ejq31n x8i8c5o x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 xt7dq6l xxcmccx x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xzfxn0k x11d16zi x13h71tw x5ubeis xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x xt7dq6l x1sy0etr xzfxn0k x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  const isBasic = useContext(BasicContext);\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1ghz6dp x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the container's styling. A call site has no reason to know there are\n// three elements: `className` and `style` reach the container, which is the\n// one worth restyling, the open state and the dismissal settings reach the\n// scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useMemo","useRef","useSyncExternalStore","DialogTrigger","Heading","Modal","ModalOverlay","Dialog","RACDialog","useHoldBottomEdge","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","FULL_SCREEN","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","scrim","0","1","Symbol","for","modalDialog","t6","t7","t8","DialogFooter","useFullScreen","DialogHeader","DialogTitle","isFullScreen","window","matchMedia","matches","isFullScreenOnServer","subscribeToFullScreen","listener","query","addEventListener","removeEventListener","Body","Content","Footer","Header","Title","DialogContentProps","Element","Pick","DialogTitleProps","Dialog","_c","props","stylex.props","RACDialog"],"sources":["../../../src/components/dialog/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, DialogProps as RACDialogProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext, useMemo, useRef, useSyncExternalStore } from 'react';\nimport { DialogTrigger, Heading, Modal, ModalOverlay, Dialog as RACDialog } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n// The window size the full-screen dialog is drawn at, which the styles read\n// as `media.belowMedium`. Spelled again for `matchMedia`, which is the one\n// thing in this file that has to know it outside a stylesheet: the footer\n// holds the window's bottom edge only there. See `useFullScreen`.\nconst FULL_SCREEN = '(width < 600px)';\n\n// The dialogs page's two dialogs, which are one component here for the same\n// reason Sheet's two presentations are: the page pairs them by window size\n// rather than offering a choice. Above the medium breakpoint it is the basic\n// dialog — a container on surface container high with a 28dp corner, between\n// 280 and 560dp wide, centred over the scrim, with 24dp of padding all round,\n// 16dp between the headline and the body and 24dp between the body and the\n// actions. Below it the same dialog fills the window as the page's\n// full-screen dialog: square corners, a 56dp header with the headline and a\n// divider under it, and a 56dp action bar with a divider over it.\n//\n// The pairing is for a dialog that is a task, which needs the room. An alert\n// dialog is a question with two or three answers, and the page keeps the\n// full-screen dialog for tasks, so `role=\"alertdialog\"` stays the basic dialog\n// at every width. Filled to a phone's window it read as a headline at the top\n// of the screen and its answers at the bottom, with nothing between them but\n// the chrome. The `basic` styles below are how: each restates, without the\n// breakpoint, the properties the paired styles change below it.\n//\n// The headline is headline-small on surface, the body body-medium on surface\n// variant, and the buttons are the call site's — the page draws text buttons\n// there, which is `Button`'s `text` variant.\n//\n// Two things the page draws are the call site's rather than the component's.\n// The optional icon above the headline, which the page centres the headline\n// and body with when it is there, is anything a `Dialog.Header` is given; a\n// dialog that wants it centres its own header. And the dividers a basic\n// dialog may show around a scrolling body are left out, since the page has\n// them only for that case and the body here scrolls with the header and\n// footer pinned either side of it, which is what they were marking.\n//\n// React Aria's overlay is three nested elements — the scrim, the container,\n// and the dialog inside it — so the styles split the same way, and the scrim\n// and the element carrying the dialog role are the ones every modal overlay\n// shares.\nconst scaleIn = \"xnirehn-B\";\nconst slideInFromBottom = \"x1itx4s0-B\";\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kOIVth: \"xxj4525\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kORKVm: \"x1odjw0f\",\n    kGO01o: \"x1az23kl x18d9i69\",\n    kLKAdn: \"x886u18 xexx8yu x3reb9c\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  centre: {\n    kGNEyG: \"x6s0dn4\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1apw6a7 xd76zvj\",\n    $$css: true\n  }\n};\n\n// The basic dialog at every width, for an alert dialog. Each entry is the\n// above-breakpoint value of every property its namesake in `styles` changes\n// below the breakpoint, laid over that namesake, so a property it leaves out\n// is the same in both presentations already. A value changed above the\n// breakpoint there has to change here too, which `index.test.tsx` checks by\n// comparing an alert dialog on a phone with any dialog on a desktop.\nconst basic = {\n  body: {\n    kLKAdn: \"x886u18 xexx8yu\",\n    $$css: true\n  },\n  centre: {\n    kmVPX3: \"x1apw6a7\",\n    $$css: true\n  }\n};\n\n// Whether this dialog is the basic one at every width. Content decides it from\n// the role and the parts read it, since each part carries its own share of\n// the full-screen presentation.\nconst BasicContext = createContext(false);\ntype DialogProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal dialog centred over the page, and the same dialog filling the\n * window below the medium breakpoint — the dialogs page's basic and\n * full-screen dialogs, paired by window size as the page pairs them. An\n * alert dialog stays the basic one at every width. Open state is React\n * Aria's: pass `isOpen` with `onOpenChange` to control it, or\n * `defaultOpen` to let it keep its own.\n *\n * Composed rather than configured by props, as `Sheet` is, since a dialog's\n * header, body and actions all take arbitrary content — the parts are\n * `Dialog.Content`, `Dialog.Header`, `Dialog.Title`, `Dialog.Body` and\n * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside\n * `Dialog` opens it, and one given `slot=\"close\"` anywhere inside the\n * content closes it; neither needs a part of its own.\n *\n * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Dialog({\n  children,\n  ...props\n}: DialogProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction DialogBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, isBasic && basic.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The dialog itself, and the scrim behind it. Everything the dialog shows\n * goes in here; the trigger stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n *\n * `role=\"alertdialog\"` is React Aria's, for a dialog interrupting with\n * something that has to be answered before the page carries on — a screen\n * reader announces it rather than waiting to be asked. It also keeps the\n * dialog the basic one below the medium breakpoint, centred and sized to its\n * content, where a dialog of the default role fills the window.\n *\n * A press on the scrim closes the dialog unless `isDismissable` says\n * otherwise, which is the same default `Sheet` takes and the reverse of\n * React Aria's own. Escape is a separate prop, `isKeyboardDismissDisabled`,\n * and `isDismissable` says nothing about it — so a dialog that has to be\n * answered from one of its actions, as an alert dialog usually does, turns\n * off both.\n *\n * Inside `Dialog`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Dialog`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the dialog is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  return <BasicContext value={isBasic}>\n      <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim, styles.centre, isBasic && basic.centre)}>\n        <Modal\n      // The panel, where the call site's class and style land, rather\n      // than the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles({\n        0: {\n          className: \"x1n1nwrg x1u6grsq xbhiib0 x1ebxanj x16dv9tl xvkjz1l xt7dq6l x1ju3lih x1w1tqly x19pkqky x1f120ba xx61lck x1gb867b x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r x27kpxv x6iovhr x1u2d2a2 xxzqys8 xb3r6kr x9xqwrn xg8iv3o x19b5e0v xsds98l\"\n        },\n        1: {\n          className: \"x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2\"\n        }\n      }[!!isBasic << 0], {\n        className,\n        style\n      })}>\n          <RACDialog {...props} {...stylex.props(overlay.modalDialog)}>\n            {children}\n          </RACDialog>\n        </Modal>\n      </ModalOverlay>\n    </BasicContext>;\n}\n\n/**\n * The dialog's actions. Full screen they are the action bar on the window's\n * bottom edge, which a toast rises clear of while the dialog is open, so a\n * tap meant for one of them never lands on the toast's own action instead.\n */\nfunction DialogFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, useFullScreen() && !isBasic);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x12smttz x1ejq31n x1vv4zg8 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xnvi70j x8i8c5o x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x12smttz x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x13a6bvl xg0ps1x x1ejq31n x8i8c5o x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\nfunction DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const isBasic = useContext(BasicContext);\n  return <div {...props} {...mergeStyles({\n    0: {\n      className: \"x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j xzfxn0k x1pr6p50 x13h71tw xs3zajk xg0ps1x\"\n    },\n    1: {\n      className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr xzfxn0k x13h71tw\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n/**\n * Names the dialog. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a dialog without one\n * announces itself unnamed.\n */\nfunction DialogTitle(props: DialogTitleProps & RefAttributes<HTMLHeadingElement>) {\n  const isBasic = useContext(BasicContext);\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    0: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    }\n  }[!!isBasic << 0], props)} />;\n}\n\n// Whether the window is at the size the full-screen dialog is drawn at, kept\n// current as it resizes. False on the server, where there is no window and\n// nothing is open.\nfunction isFullScreen() {\n  return window.matchMedia(FULL_SCREEN).matches;\n}\nfunction isFullScreenOnServer() {\n  return false;\n}\nfunction subscribeToFullScreen(listener: () => void) {\n  const query = window.matchMedia(FULL_SCREEN);\n  query.addEventListener('change', listener);\n  return () => {\n    query.removeEventListener('change', listener);\n  };\n}\nfunction useFullScreen() {\n  return useSyncExternalStore(subscribeToFullScreen, isFullScreen, isFullScreenOnServer);\n}\nDialog.Body = DialogBody;\nDialog.Content = DialogContent;\nDialog.Footer = DialogFooter;\nDialog.Header = DialogHeader;\nDialog.Title = DialogTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the container's styling. A call site has no reason to know there are\n// three elements: `className` and `style` reach the container, which is the\n// one worth restyling, the open state and the dismissal settings reach the\n// scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype DialogContentProps = {\n  /** A function may compute the class from the container's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the dialog and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the dialog on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it, or\n   * the dialog renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the container, closes the\n   * dialog. `true` here where React Aria's own default is `false`, the\n   * same default `Sheet` takes. Escape is `isKeyboardDismissDisabled`'s,\n   * and this says nothing about it — an alert dialog, which has to be\n   * answered from one of its actions, turns off both.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the container's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n} & Omit<RACDialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'>;\ntype DialogTitleProps = HeadingProps;\nexport type { DialogContentProps, DialogProps, DialogTitleProps };\nexport { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle };\nexport default Dialog;"],"mappings":"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"}

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

@@ -13,10 +13,11 @@ type FormProps$1 = {
    *
    * Under `aria`, moving focus after a server answers is the call site's.
    * The errors are associated — `aria-invalid` on each control, the message
-   * in its `aria-describedby` — but nothing moves and nothing is read out,
-   * because no part of the form knows a round trip happened. `validationErrors`
-   * is a prop rather than an event, so a form cannot tell a submission coming
-   * back from a first render that was given errors to begin with.
+   * in its `aria-describedby` — and each is read out politely as it appears
+   * under its field, but nothing moves, because no part of the form knows a
+   * round trip happened. `validationErrors` is a prop rather than an event,
+   * so a form cannot tell a submission coming back from a first render that
+   * was given errors to begin with. The Async submit story shows the move.
    * @default 'aria'
    */
   validationBehavior?: 'aria' | 'native';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","CSSProperties","RefAttributes","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","T0","t1","t2","t3","t4","props","undefined","Form","_c","RACForm"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, RefAttributes } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — but nothing moves and nothing is read out,\n   * because no part of the form knows a round trip happened. `validationErrors`\n   * is a prop rather than an event, so a form cannot tell a submission coming\n   * back from a first render that was given errors to begin with.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the page. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills — which is the whole reason a form is where\n * a message arrives after the fact.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps & RefAttributes<HTMLFormElement>) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAO,OAAAQ,IAAA;CAAA,MAAAC,IAAAf,EAAA,EAAA;CAAA,IAAAgB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAQ,IAAA,GAAAC,UAAAP;EACZ,MAAAF,qBAAAQ,OAAAE,KAAAA,IAAAd,4BAAAY;EAGQJ,KAAAT;EAA4BK,KAAAA;EAAwBS,KAAAA;EAAWF,KAAAV,YAAY,EAAAC,WACtE,SACb,GAAGW,KAAK;EAACN,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAC,MAAAD,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BR,oBAAAA;GAAkB,GAAMS;GAAK,GAAMF;EAE9D,CAAA;EAAIJ,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAFNK;AAEM"}
+{"version":3,"file":"index.js","names":["c","_c","CSSProperties","RefAttributes","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","T0","t1","t2","t3","t4","props","undefined","Form","_c","RACForm"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["'use client';\n\nimport type { CSSProperties, RefAttributes } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — and each is read out politely as it appears\n   * under its field, but nothing moves, because no part of the form knows a\n   * round trip happened. `validationErrors` is a prop rather than an event,\n   * so a form cannot tell a submission coming back from a first render that\n   * was given errors to begin with. The Async submit story shows the move.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the page. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills — which is the whole reason a form is where\n * a message arrives after the fact.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps & RefAttributes<HTMLFormElement>) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAAO,OAAAQ,IAAA;CAAA,MAAAC,IAAAf,EAAA,EAAA;CAAA,IAAAgB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAQ,IAAA,GAAAC,UAAAP;EACZ,MAAAF,qBAAAQ,OAAAE,KAAAA,IAAAd,4BAAAY;EAGQJ,KAAAT;EAA4BK,KAAAA;EAAwBS,KAAAA;EAAWF,KAAAV,YAAY,EAAAC,WACtE,SACb,GAAGW,KAAK;EAACN,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAH,KAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAC,MAAAD,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BR,oBAAAA;GAAkB,GAAMS;GAAK,GAAMF;EAE9D,CAAA;EAAIJ,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,OAFNK;AAEM"}

package/dist/components/link/index.js

@@ -30,13 +30,13 @@ const styles = {
 };
 const tones = {
 	inherit: {
-		kMwMTN: "x1aetzt3 x1heor9g",
-		k1TLXF: "x1rdisx9 x1dbr5dg",
+		kMwMTN: "x1heor9g",
+		k1TLXF: "x1dbr5dg",
 		$$css: true
 	},
 	primary: {
 		kMwMTN: "x1mxwv8y",
-		k1TLXF: "x1rdisx9 xfhk6l2",
+		k1TLXF: "x1q3xnwu",
 		$$css: true
 	}
 };
@@ -46,7 +46,7 @@ const underlines = {
 		$$css: true
 	},
 	hover: {
-		kMnn75: "x1sur9pj xkrqix3",
+		kMnn75: "xkrqix3",
 		$$css: true
 	},
 	none: {
@@ -54,6 +54,17 @@ const underlines = {
 		$$css: true
 	}
 };
+const hovered = {
+	tone: {
+		kMwMTN: "x1mxwv8y",
+		k1TLXF: "xv4vikv",
+		$$css: true
+	},
+	underline: {
+		kMnn75: "xujl8zx",
+		$$css: true
+	}
+};
 /**
 * A navigational link. It renders an `<a>` and sets no type of its own, so it
 * takes the size and face of the text it sits in. Without `href`, or while
@@ -87,7 +98,7 @@ function Link$1(t0) {
 		t2 = props$1;
 		let t6;
 		if ($[5] !== tone || $[6] !== underline) {
-			t6 = (state) => props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled);
+			t6 = (state) => props(styles.base, focus.ring, tones[tone], underlines[underline], state.isHovered && hovered.tone, state.isHovered && underline === "hover" && hovered.underline, state.isDisabled && styles.disabled);
 			$[5] = tone;
 			$[6] = underline;
 			$[7] = t6;