@kanso-labs/kanso-ui 0.44.0 → 0.45.0

package/dist/components/dialog/index.js

@@ -1,17 +1,18 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { sizing, typography } from "../../tokens/design.tokens.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 { useScrollStop } from "../../hooks/useScrollStop.js";
 import { OverlayScope } from "../../overlay/index.js";
-import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, useSlottedContext } from "react-aria-components";
 //#region src/components/dialog/index.tsx
+`${sizing.controlSm}${typography.headlineSmallLineHeight}`;
 const FULL_SCREEN = "(width < 600px)";
 const styles = {
 	body: {
@@ -52,6 +53,7 @@ const basic = {
 	}
 };
 const BasicContext = createContext(false);
+const HeaderContext = createContext(false);
 const DescriptionContext = createContext(null);
 /**
 * A modal dialog centred over the page, and the same dialog filling the
@@ -68,11 +70,38 @@ const DescriptionContext = createContext(null);
 * `Dialog` opens it, and one given `slot="close"` anywhere inside the
 * content closes it; neither needs a part of its own.
 *
+* ```tsx
+* <Dialog>
+*   <Button>Open dialog</Button>
+*   <Dialog.Content>
+*     <Dialog.Header>
+*       <Dialog.Title>Headline</Dialog.Title>
+*       <IconButton aria-label="Close" slot="close">
+*         <CloseIcon />
+*       </IconButton>
+*     </Dialog.Header>
+*     <Dialog.Body>Supporting text</Dialog.Body>
+*     <Dialog.Footer>
+*       <Button slot="close" variant="text">
+*         Cancel
+*       </Button>
+*       <Button onPress={confirm} slot="close" variant="text">
+*         Confirm
+*       </Button>
+*     </Dialog.Footer>
+*   </Dialog.Content>
+* </Dialog>
+* ```
+*
 * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one
 * a route shows, or a menu item raises — leaves it out and passes `isOpen`
 * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no
 * button inside it, React Aria warns that its press responder found nothing
 * to press.
+*
+* Tab stays inside an open dialog, so a `Snackbar` shown meanwhile is
+* reached with F6, which React Aria uses to move between landmarks. Tabbing
+* on past the snackbar's last control leads back into the dialog.
 */
 function Dialog$1(t0) {
 	const $ = c(6);
@@ -177,7 +206,7 @@ function DialogBody(t0) {
 * over it, and React Aria's popovers and menus draw above both.
 */
 function DialogContent(t0) {
-	const $ = c(43);
+	const $ = c(42);
 	let children;
 	let className;
 	let container;
@@ -219,17 +248,15 @@ function DialogContent(t0) {
 	const isDismissable = t1 === void 0 ? true : t1;
 	const isBasic = props$1.role === "alertdialog";
 	const [body, setBody] = useState();
-	const overModal = useContext(InsideModalContext);
 	const t2 = isBasic ? setBody : null;
 	let t3;
-	if ($[12] !== isBasic || $[13] !== overModal) {
-		t3 = props(overlay.scrim, overModal && overlay.scrimOverModal, styles.centre, isBasic && basic.centre);
+	if ($[12] !== isBasic) {
+		t3 = props(overlay.scrim, styles.centre, isBasic && basic.centre);
 		$[12] = isBasic;
-		$[13] = overModal;
-		$[14] = t3;
-	} else t3 = $[14];
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[15] !== className || $[16] !== isBasic || $[17] !== style) {
+	if ($[14] !== className || $[15] !== isBasic || $[16] !== style) {
 		t4 = mergeStatefulStyles({
 			0: { 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" },
 			1: { className: "x1n1nwrg x1u6grsq x16dv9tl xvkjz1l x1w1tqly x13rsnn2 x1udv5rz x9f619 x139gbkf x78zum5 xdt5ytf xh8yej3 xmz0i5r xb3r6kr xbhiib0 xt7dq6l x19pkqky xx61lck x27kpxv x1u2d2a2" }
@@ -237,21 +264,21 @@ function DialogContent(t0) {
 			className,
 			style
 		});
-		$[15] = className;
-		$[16] = isBasic;
-		$[17] = style;
-		$[18] = t4;
-	} else t4 = $[18];
+		$[14] = className;
+		$[15] = isBasic;
+		$[16] = style;
+		$[17] = t4;
+	} else t4 = $[17];
 	const t5 = props$1["aria-describedby"] ?? (isBasic ? body : void 0);
 	let t6;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
 		t6 = props(overlay.modalDialog);
-		$[19] = t6;
-	} else t6 = $[19];
+		$[18] = t6;
+	} else t6 = $[18];
 	let t7;
-	if ($[20] !== children || $[21] !== props$1 || $[22] !== t5) {
-		t7 = /* @__PURE__ */ jsx(InsideModalContext, {
-			value: true,
+	if ($[19] !== children || $[20] !== props$1 || $[21] !== t5) {
+		t7 = /* @__PURE__ */ jsx(HeaderContext, {
+			value: false,
 			children: /* @__PURE__ */ jsx(Dialog, {
 				...props$1,
 				"aria-describedby": t5,
@@ -259,25 +286,25 @@ function DialogContent(t0) {
 				children
 			})
 		});
-		$[20] = children;
-		$[21] = props$1;
-		$[22] = t5;
-		$[23] = t7;
-	} else t7 = $[23];
+		$[19] = children;
+		$[20] = props$1;
+		$[21] = t5;
+		$[22] = t7;
+	} else t7 = $[22];
 	let t8;
-	if ($[24] !== ref || $[25] !== t4 || $[26] !== t7) {
+	if ($[23] !== ref || $[24] !== t4 || $[25] !== t7) {
 		t8 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t4,
 			children: t7
 		});
-		$[24] = ref;
-		$[25] = t4;
-		$[26] = t7;
-		$[27] = t8;
-	} else t8 = $[27];
+		$[23] = ref;
+		$[24] = t4;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
 	let t9;
-	if ($[28] !== container || $[29] !== defaultOpen || $[30] !== isDismissable || $[31] !== isKeyboardDismissDisabled || $[32] !== isOpen || $[33] !== onOpenChange || $[34] !== t3 || $[35] !== t8) {
+	if ($[27] !== container || $[28] !== defaultOpen || $[29] !== isDismissable || $[30] !== isKeyboardDismissDisabled || $[31] !== isOpen || $[32] !== onOpenChange || $[33] !== t3 || $[34] !== t8) {
 		t9 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
 			defaultOpen,
 			isDismissable,
@@ -288,36 +315,36 @@ function DialogContent(t0) {
 			...t3,
 			children: t8
 		}) });
-		$[28] = container;
-		$[29] = defaultOpen;
-		$[30] = isDismissable;
-		$[31] = isKeyboardDismissDisabled;
-		$[32] = isOpen;
-		$[33] = onOpenChange;
-		$[34] = t3;
-		$[35] = t8;
-		$[36] = t9;
-	} else t9 = $[36];
+		$[27] = container;
+		$[28] = defaultOpen;
+		$[29] = isDismissable;
+		$[30] = isKeyboardDismissDisabled;
+		$[31] = isOpen;
+		$[32] = onOpenChange;
+		$[33] = t3;
+		$[34] = t8;
+		$[35] = t9;
+	} else t9 = $[35];
 	let t10;
-	if ($[37] !== t2 || $[38] !== t9) {
+	if ($[36] !== t2 || $[37] !== t9) {
 		t10 = /* @__PURE__ */ jsx(DescriptionContext, {
 			value: t2,
 			children: t9
 		});
-		$[37] = t2;
-		$[38] = t9;
-		$[39] = t10;
-	} else t10 = $[39];
+		$[36] = t2;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
 	let t11;
-	if ($[40] !== isBasic || $[41] !== t10) {
+	if ($[39] !== isBasic || $[40] !== t10) {
 		t11 = /* @__PURE__ */ jsx(BasicContext, {
 			value: isBasic,
 			children: t10
 		});
-		$[40] = isBasic;
-		$[41] = t10;
-		$[42] = t11;
-	} else t11 = $[42];
+		$[39] = isBasic;
+		$[40] = t10;
+		$[41] = t11;
+	} else t11 = $[41];
 	return t11;
 }
 /**
@@ -363,8 +390,8 @@ function DialogHeader(props) {
 	let t0;
 	if ($[0] !== isBasic || $[1] !== props) {
 		t0 = mergeStyles({
-			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" }
+			0: { className: "x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j x11wnguw x1pr6p50 x1837goc xs3zajk xg0ps1x" },
+			1: { className: "x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr x11wnguw x1837goc" }
 		}[!!isBasic << 0], props);
 		$[0] = isBasic;
 		$[1] = props;
@@ -372,9 +399,12 @@ function DialogHeader(props) {
 	} else t0 = $[2];
 	let t1;
 	if ($[3] !== props || $[4] !== t0) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			...props,
-			...t0
+		t1 = /* @__PURE__ */ jsx(HeaderContext, {
+			value: true,
+			children: /* @__PURE__ */ jsx("div", {
+				...props,
+				...t0
+			})
 		});
 		$[3] = props;
 		$[4] = t0;
@@ -388,29 +418,37 @@ function DialogHeader(props) {
 * announces itself unnamed.
 */
 function DialogTitle(props) {
-	const $ = c(6);
+	const $ = c(7);
 	const isBasic = useContext(BasicContext);
+	const isHeaded = useContext(HeaderContext);
 	let t0;
-	if ($[0] !== isBasic || $[1] !== props) {
+	if ($[0] !== isBasic || $[1] !== isHeaded || $[2] !== props) {
 		t0 = mergeStyles({
 			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);
+			4: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda xa4amcs" },
+			2: { className: "x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury" },
+			6: { className: "x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe xs2ltda xa4amcs x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury" },
+			1: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda" },
+			5: { className: "x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda" },
+			3: { className: "x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury xs2ltda" },
+			7: { className: "x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury xs2ltda" }
+		}[!!isHeaded << 2 | !!isBasic << 1 | !!(isBasic && isHeaded) << 0], props);
 		$[0] = isBasic;
-		$[1] = props;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[1] = isHeaded;
+		$[2] = props;
+		$[3] = t0;
+	} else t0 = $[3];
 	let t1;
-	if ($[3] !== props || $[4] !== t0) {
+	if ($[4] !== props || $[5] !== t0) {
 		t1 = /* @__PURE__ */ jsx(Heading, {
 			slot: "title",
 			...props,
 			...t0
 		});
-		$[3] = props;
-		$[4] = t0;
-		$[5] = t1;
-	} else t1 = $[5];
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
 	return t1;
 }
 function isFullScreen() {

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","useId","useLayoutEffect","useMemo","useRef","useState","useSyncExternalStore","DialogTrigger","Heading","HeadingContext","Modal","ModalOverlay","Dialog","RACDialog","useSlottedContext","useHoldBottomEdge","useScrollStop","OverlayScope","InsideModalContext","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","kHjlTd","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","DescriptionContext","id","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","describe","generated","undefined","title","scrollStop","label","t2","merged","t3","modalBodyRing","t4","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","setBody","overModal","scrim","scrimOverModal","0","1","t5","t6","Symbol","for","modalDialog","t7","t8","t9","t10","t11","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, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, Dialog as RACDialog, useSlottedContext } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollStop } from '../../hooks/useScrollStop';\nimport { OverlayScope } from '../../overlay';\nimport { InsideModalContext } from '../../overlay/modal';\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    kHjlTd: \"xj0a0fe\",\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);\n\n// Where an alert dialog's body hands Content its id, so the dialog can name\n// the body as its description: the message an alert dialog interrupts with\n// is what a screen reader should read out with the title. Null in a dialog\n// of any other role, whose body may hold a form or a long document rather\n// than one message.\nconst DescriptionContext = createContext<((id: string | undefined) => void) | null>(null);\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 describe = useContext(DescriptionContext);\n  const generated = useId();\n  // An alert dialog's body describes the dialog, so it carries an id for the\n  // dialog to point at: the call site's own, or one of its own. In a layout\n  // effect, so the dialog carries its description from its first paint.\n  const id = props.id ?? (describe === null ? undefined : generated);\n  useLayoutEffect(() => {\n    if (describe === null || id === undefined) {\n      return undefined;\n    }\n    describe(id);\n    return () => {\n      describe(undefined);\n    };\n  }, [describe, id]);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop named by the title, so a\n  // keyboard can scroll it, when nothing inside it takes focus; a call\n  // site's own name, role and tabIndex still win. See useScrollStop.\n  const title = useSlottedContext(HeadingContext, 'title');\n  const scrollStop = useScrollStop(ref, {\n    label: props['aria-label'],\n    title: title?.id\n  });\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 {...scrollStop} id={id} {...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. Its\n * `Dialog.Body` is its description, so the message is read out with the\n * title; an `aria-describedby` of the call site's own names another.\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  // The id of the body, which an alert dialog is described by unless the\n  // call site names a description of its own.\n  const [body, setBody] = useState<string>();\n  const overModal = useContext(InsideModalContext);\n  return <BasicContext value={isBasic}>\n      <DescriptionContext value={isBasic ? setBody : null}>\n        <OverlayScope>\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, overModal && overlay.scrimOverModal, 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              <InsideModalContext value>\n                <RACDialog {...props} aria-describedby={props['aria-describedby'] ?? (isBasic ? body : undefined)} {...stylex.props(overlay.modalDialog)}>\n                  {children}\n                </RACDialog>\n              </InsideModalContext>\n            </Modal>\n          </ModalOverlay>\n        </OverlayScope>\n      </DescriptionContext>\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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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","DialogProps","RACDialogProps","StyleOrFunction","stylex","createContext","useContext","useId","useLayoutEffect","useMemo","useRef","useState","useSyncExternalStore","DialogTrigger","Heading","HeadingContext","Modal","ModalOverlay","Dialog","RACDialog","useSlottedContext","useHoldBottomEdge","useScrollStop","OverlayScope","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","sizing","spacing","typography","FORCED_COLORS","HEADLINE_REACH","controlSm","headlineSmallLineHeight","FULL_SCREEN","scaleIn","slideInFromBottom","styles","body","kB7OPa","kMwMTN","k1xSpc","kXwgrk","kzQI83","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kHjlTd","kORKVm","kGO01o","kLKAdn","kg3NbH","$$css","centre","kGNEyG","kjj79g","kmVPX3","basic","BasicContext","HeaderContext","DescriptionContext","id","Omit","children","t0","$","props","t1","DialogBody","ref","callerRef","isBasic","describe","generated","undefined","title","scrollStop","label","t2","merged","t3","modalBodyRing","t4","DialogContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","role","setBody","scrim","0","1","t5","t6","Symbol","for","modalDialog","t7","t8","t9","t10","t11","DialogFooter","useFullScreen","DialogHeader","DialogTitle","isHeaded","4","2","6","5","3","7","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, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';\nimport { DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, Dialog as RACDialog, useSlottedContext } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollStop } from '../../hooks/useScrollStop';\nimport { OverlayScope } from '../../overlay';\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, sizing, 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// How far a headline in a header reaches past its own line, above and below:\n// half of what the headline-small line lacks of a standard control's\n// height, which is 4 at the default tokens. The header gives the same back\n// out of its padding. See `header`.\nconst HEADLINE_REACH = `max(0px, calc((${sizing.controlSm} - ${typography.headlineSmallLineHeight}) / 2))`;\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    kHjlTd: \"xj0a0fe\",\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);\n\n// Whether a title sits in a header, which is what it reaches past its line\n// in; see `header`. Content clears it, so a dialog opened from inside a\n// header starts outside one.\nconst HeaderContext = createContext(false);\n\n// Where an alert dialog's body hands Content its id, so the dialog can name\n// the body as its description: the message an alert dialog interrupts with\n// is what a screen reader should read out with the title. Null in a dialog\n// of any other role, whose body may hold a form or a long document rather\n// than one message.\nconst DescriptionContext = createContext<((id: string | undefined) => void) | null>(null);\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 * ```tsx\n * <Dialog>\n *   <Button>Open dialog</Button>\n *   <Dialog.Content>\n *     <Dialog.Header>\n *       <Dialog.Title>Headline</Dialog.Title>\n *       <IconButton aria-label=\"Close\" slot=\"close\">\n *         <CloseIcon />\n *       </IconButton>\n *     </Dialog.Header>\n *     <Dialog.Body>Supporting text</Dialog.Body>\n *     <Dialog.Footer>\n *       <Button slot=\"close\" variant=\"text\">\n *         Cancel\n *       </Button>\n *       <Button onPress={confirm} slot=\"close\" variant=\"text\">\n *         Confirm\n *       </Button>\n *     </Dialog.Footer>\n *   </Dialog.Content>\n * </Dialog>\n * ```\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 *\n * Tab stays inside an open dialog, so a `Snackbar` shown meanwhile is\n * reached with F6, which React Aria uses to move between landmarks. Tabbing\n * on past the snackbar's last control leads back into the dialog.\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 describe = useContext(DescriptionContext);\n  const generated = useId();\n  // An alert dialog's body describes the dialog, so it carries an id for the\n  // dialog to point at: the call site's own, or one of its own. In a layout\n  // effect, so the dialog carries its description from its first paint.\n  const id = props.id ?? (describe === null ? undefined : generated);\n  useLayoutEffect(() => {\n    if (describe === null || id === undefined) {\n      return undefined;\n    }\n    describe(id);\n    return () => {\n      describe(undefined);\n    };\n  }, [describe, id]);\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop named by the title, so a\n  // keyboard can scroll it, when nothing inside it takes focus; a call\n  // site's own name, role and tabIndex still win. See useScrollStop.\n  const title = useSlottedContext(HeadingContext, 'title');\n  const scrollStop = useScrollStop(ref, {\n    label: props['aria-label'],\n    title: title?.id\n  });\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 {...scrollStop} id={id} {...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. Its\n * `Dialog.Body` is its description, so the message is read out with the\n * title; an `aria-describedby` of the call site's own names another.\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  // The id of the body, which an alert dialog is described by unless the\n  // call site names a description of its own.\n  const [body, setBody] = useState<string>();\n  return <BasicContext value={isBasic}>\n      <DescriptionContext value={isBasic ? setBody : null}>\n        <OverlayScope>\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              <HeaderContext value={false}>\n                <RACDialog {...props} aria-describedby={props['aria-describedby'] ?? (isBasic ? body : undefined)} {...stylex.props(overlay.modalDialog)}>\n                  {children}\n                </RACDialog>\n              </HeaderContext>\n            </Modal>\n          </ModalOverlay>\n        </OverlayScope>\n      </DescriptionContext>\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 <HeaderContext value>\n      <div {...props} {...mergeStyles({\n      0: {\n        className: \"x6s0dn4 x1j6faob x1sy0etr xf6te7g xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xnvi70j x11wnguw x1pr6p50 x1837goc xs3zajk xg0ps1x\"\n      },\n      1: {\n        className: \"x6s0dn4 x1j6faob xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib xg0ps1x x1sy0etr x11wnguw x1837goc\"\n      }\n    }[!!isBasic << 0], props)} />\n    </HeaderContext>;\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  const isHeaded = useContext(HeaderContext);\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    4: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda xa4amcs\"\n    },\n    2: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    },\n    6: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe xs2ltda xa4amcs x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury\"\n    },\n    1: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda\"\n    },\n    5: {\n      className: \"x9f619 x139gbkf x1fz0g89 xl849ld xkb6epg xcji80f x76yrz5 x6ksu6j x1s1qhaa x1khanjg x1voeury xrr2tf9 x1ghz6dp xeuugli xj0a0fe xs2ltda\"\n    },\n    3: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury xs2ltda\"\n    },\n    7: {\n      className: \"x9f619 x139gbkf x1ghz6dp xeuugli xj0a0fe x1fz0g89 xkb6epg x76yrz5 x1s1qhaa x1voeury xs2ltda\"\n    }\n  }[!!isHeaded << 2 | !!isBasic << 1 | !!(isBasic && isHeaded) << 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/fab/index.d.ts

@@ -51,7 +51,7 @@ type FabProps = {
    * @default 'tonal'
    */
   variant?: FabVariant;
-} & Omit<ButtonDOMProps, 'isPending'>;
+} & Omit<ButtonDOMProps, 'aria-label' | 'isPending'>;
 type FabSize = 'lg' | 'md' | 'xl';
 type FabTone = 'primary' | 'secondary' | 'tertiary';
 type FabVariant = 'filled' | 'tonal';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","ButtonDOMProps","ButtonState","ButtonBase","extendedFabSizes","fabIconSizes","fabSizes","fabStyles","fabTones","focus","FabProps","children","className","disableRipple","href","label","rel","size","FabSize","style","target","tone","FabTone","variant","FabVariant","Omit","Fab","t0","$","props","t1","t2","t3","undefined","t4","t5","fabClasses","t6","icon","t7","isExtended","state","base","ring","isHovered","hovered","isFocusVisible","focused","isPressed","pressed","isDisabled","disabled","_c","props","stylex.props"],"sources":["../../../src/components/fab/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport type { ButtonDOMProps, ButtonState } from '../../button';\nimport { ButtonBase } from '../../button';\nimport { extendedFabSizes, fabIconSizes, fabSizes, fabStyles, fabTones } from '../../fab/styles';\nimport { focus } from '../../styles/focus';\n\n// The FAB page's floating action button, and the extended FAB page's form of\n// it with a label: a screen's primary action, raised over the content on the\n// pages' level 3 shadow and lifted to level 4 under a hovering pointer.\n//\n// Three sizes, the pages' FAB, medium FAB and large FAB: `md` is 56dp with a\n// 24dp icon and a 16dp corner, `lg` 80dp with 28dp and 20dp, and `xl` 96dp\n// with 36dp and 28dp. The extended form keeps the size's height and corner\n// and sets a label after the icon in the size's type role — title medium,\n// title large and headline small — with 16dp, 26dp and 28dp of padding and\n// 8dp, 12dp and 16dp before the label. The 80dp size, the 20dp corner and\n// the 26dp and 28dp paddings fall between steps of their scales and are\n// written out. The pages' small FAB is gone from the newer set, so there is\n// no `xs`.\n//\n// Six colour pairs, by `tone` and `variant`: `tonal` draws the tone's\n// container pair — primary container is the pages' default — and `filled`\n// the tone itself, as Button's two variants of those names do.\n//\n// The hover, focus and pressed layers are the label colour at the usual 8%,\n// 10% and 10%, drawn as an image over the container, as the row module draws\n// its layers, so one style serves all six pairs. The pages give no disabled\n// FAB; a disabled one takes the 12% and 38% every disabled container takes,\n// and drops its shadow.\n//\n// Under forced colours the shadow goes and the container is painted over, so\n// the button is drawn as a 1px `ButtonText` rule, as Button's are.\n//\n// What every button does past its own styles — the ripple, the link form, a\n// parent's disabled state — is `src/button`'s, shared with Button and\n// IconButton. The styles below are `src/fab`'s, shared with FabMenu's FAB.\n\ntype FabProps = {\n  /**\n   * What the FAB does, in words. A FAB without a `label` is an icon alone,\n   * which has no name of its own, so give it this; with a `label` the label\n   * is its name.\n   */\n  'aria-label'?: string;\n  /** The FAB's icon, drawn at the size's icon size. */\n  children?: ReactNode;\n  /** A function may compute the class from the FAB's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The state layers are unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the FAB leads. Given one, it is rendered as a link — an `<a>`,\n   * announced as the link it is — with the same styles and ripple.\n   */\n  href?: string;\n  /**\n   * A label after the icon, which makes this the extended FAB: as tall as\n   * the size, as wide as what it holds.\n   */\n  label?: ReactNode;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The pages' three sizes: `md` the FAB at 56px, `lg` the medium FAB at\n   * 80px and `xl` the large FAB at 96px.\n   * @default 'md'\n   */\n  size?: FabSize;\n  /** A function may compute the style from the FAB's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * The colour role the FAB is drawn in.\n   * @default 'primary'\n   */\n  tone?: FabTone;\n  /**\n   * `tonal` draws the tone's container pair, the pages' default; `filled`\n   * draws the tone itself.\n   * @default 'tonal'\n   */\n  variant?: FabVariant;\n} & Omit<ButtonDOMProps, 'isPending'>;\ntype FabSize = 'lg' | 'md' | 'xl';\ntype FabTone = 'primary' | 'secondary' | 'tertiary';\ntype FabVariant = 'filled' | 'tonal';\n\n/**\n * A screen's primary action, raised over its content. Its icon is its\n * children; given a `label` it is the extended FAB, with the label after the\n * icon. Given `href` it is a link with the same appearance.\n *\n * ```tsx\n * <Fab aria-label=\"Label\">\n *   <PlusIcon />\n * </Fab>\n * ```\n */\nfunction Fab({\n  children,\n  label,\n  size = 'md',\n  tone = 'primary',\n  variant = 'tonal',\n  ...props\n}: FabProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  return <ButtonBase {...props} classes={fabClasses(label !== undefined, size, tone, variant)}>\n      {children === undefined ? null : <span {...stylex.props(fabStyles.icon, fabIconSizes[size])}>\n          {children}\n        </span>}\n      {label}\n    </ButtonBase>;\n}\n\n// The FAB's classes, from React Aria's render state: the layers from what it\n// reports rather than from `:hover` and `:active`, for Button's reasons — see\n// its header. Built by a call rather than written inline at the prop, which\n// is what react-perf's no-new-function-as-prop is after.\nfunction fabClasses(isExtended: boolean, size: FabSize, tone: FabTone, variant: FabVariant) {\n  return (state: ButtonState) => stylex.props(fabStyles.base, focus.ring, fabTones[variant][tone], isExtended ? extendedFabSizes[size] : fabSizes[size], state.isHovered && fabStyles.hovered, state.isFocusVisible && fabStyles.focused, state.isPressed && fabStyles.pressed, state.isDisabled && fabStyles.disabled);\n}\nexport type { FabProps, FabSize, FabTone, FabVariant };\nexport default Fab;"],"mappings":";;;;;;;;;;;;;;;;;;;AA0GA,SAAAgC,IAAAC,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAA,IAAAgB;CAAA,IAAAI;CAAA,IAAAc;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAa,CAAA,CAAAhB,UAAAI,OAAAE,MAAAa,IAAAT,MAAAU,IAAAR,SAAAS,IAAA,GAAAH,WAAAF;EAOqDC,EAAA,KAAAD;EAAAC,EAAA,KAAAjB;EAAAiB,EAAA,KAAAb;EAAAa,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAArB,WAAAiB,EAAA;EAAAb,QAAAa,EAAA;EAAAC,UAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJhE,MAAAX,OAAAa,OAAAG,KAAAA,IAAA,OAAAH;CACA,MAAAT,OAAAU,OAAAE,KAAAA,IAAA,YAAAF;CACA,MAAAR,UAAAS,OAAAC,KAAAA,IAAA,UAAAD;CAGkD,MAAAE,KAAAnB,UAAUkB,KAAAA;CAAS,IAAAE;CAAA,IAAAP,EAAA,OAAAX,QAAAW,EAAA,OAAAM,MAAAN,EAAA,OAAAP,QAAAO,EAAA,QAAAL,SAAA;EAA9BY,KAAAC,WAAWF,IAAqBjB,MAAMI,MAAME,OAAO;EAACK,EAAA,KAAAX;EAAAW,EAAA,KAAAM;EAAAN,EAAA,KAAAP;EAAAO,EAAA,MAAAL;EAAAK,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAjB,YAAAiB,EAAA,QAAAX,MAAA;EACtFoB,KAAA1B,aAAasB,KAAAA,IAAb,OAAgC,oBAAA,QAAA;GAExB,GAFkCjC,MAAaO,UAAS+B,MAAOjC,aAAaY,KAAK;GACrFN;EACI,CAAA;EAAAiB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAX;EAAAW,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAb,SAAAa,EAAA,QAAAC,WAAAD,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAHNE,KAAA,qBAAC,YAAD;GAAW,GAAKV;GAAgB,SAAAM;GAAhC,UAAA,CACFE,IAGAtB,KAJa;;EAKHa,EAAA,MAAAb;EAAAa,EAAA,MAAAC;EAAAD,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OALRW;AAKQ;AAOjB,SAASH,WAAWI,YAAqBvB,MAAeI,MAAeE,SAAqB;CAC1F,QAAQkB,UAAuBzC,MAAaO,UAAUmC,MAAMjC,MAAMkC,MAAMnC,SAASe,QAAQ,CAACF,OAAOmB,aAAapC,iBAAiBa,QAAQX,SAASW,OAAOwB,MAAMG,aAAarC,UAAUsC,SAASJ,MAAMK,kBAAkBvC,UAAUwC,SAASN,MAAMO,aAAazC,UAAU0C,SAASR,MAAMS,cAAc3C,UAAU4C,QAAQ;AACtT"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ClassNameOrFunction","StyleOrFunction","stylex","ButtonDOMProps","ButtonState","ButtonBase","extendedFabSizes","fabIconSizes","fabSizes","fabStyles","fabTones","focus","FabProps","children","className","disableRipple","href","label","rel","size","FabSize","style","target","tone","FabTone","variant","FabVariant","Omit","Fab","t0","$","props","t1","t2","t3","undefined","t4","t5","fabClasses","t6","icon","t7","isExtended","state","base","ring","isHovered","hovered","isFocusVisible","focused","isPressed","pressed","isDisabled","disabled","_c","props","stylex.props"],"sources":["../../../src/components/fab/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport type { ButtonDOMProps, ButtonState } from '../../button';\nimport { ButtonBase } from '../../button';\nimport { extendedFabSizes, fabIconSizes, fabSizes, fabStyles, fabTones } from '../../fab/styles';\nimport { focus } from '../../styles/focus';\n\n// The FAB page's floating action button, and the extended FAB page's form of\n// it with a label: a screen's primary action, raised over the content on the\n// pages' level 3 shadow and lifted to level 4 under a hovering pointer.\n//\n// Three sizes, the pages' FAB, medium FAB and large FAB: `md` is 56dp with a\n// 24dp icon and a 16dp corner, `lg` 80dp with 28dp and 20dp, and `xl` 96dp\n// with 36dp and 28dp. The extended form keeps the size's height and corner\n// and sets a label after the icon in the size's type role — title medium,\n// title large and headline small — with 16dp, 26dp and 28dp of padding and\n// 8dp, 12dp and 16dp before the label. The 80dp size, the 20dp corner and\n// the 26dp and 28dp paddings fall between steps of their scales and are\n// written out. The pages' small FAB is gone from the newer set, so there is\n// no `xs`.\n//\n// Six colour pairs, by `tone` and `variant`: `tonal` draws the tone's\n// container pair — primary container is the pages' default — and `filled`\n// the tone itself, as Button's two variants of those names do.\n//\n// The hover, focus and pressed layers are the label colour at the usual 8%,\n// 10% and 10%, drawn as an image over the container, as the row module draws\n// its layers, so one style serves all six pairs. The pages give no disabled\n// FAB; a disabled one takes the 12% and 38% every disabled container takes,\n// and drops its shadow.\n//\n// Under forced colours the shadow goes and the container is painted over, so\n// the button is drawn as a 1px `ButtonText` rule, as Button's are.\n//\n// What every button does past its own styles — the ripple, the link form, a\n// parent's disabled state — is `src/button`'s, shared with Button and\n// IconButton. The styles below are `src/fab`'s, shared with FabMenu's FAB.\n\ntype FabProps = {\n  /**\n   * What the FAB does, in words. A FAB without a `label` is an icon alone,\n   * which has no name of its own, so give it this; with a `label` the label\n   * is its name.\n   */\n  'aria-label'?: string;\n  /** The FAB's icon, drawn at the size's icon size. */\n  children?: ReactNode;\n  /** A function may compute the class from the FAB's render state. */\n  className?: ClassNameOrFunction<ButtonState>;\n  /**\n   * Disables the press ripple. The state layers are unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Where the FAB leads. Given one, it is rendered as a link — an `<a>`,\n   * announced as the link it is — with the same styles and ripple.\n   */\n  href?: string;\n  /**\n   * A label after the icon, which makes this the extended FAB: as tall as\n   * the size, as wide as what it holds.\n   */\n  label?: ReactNode;\n  /** The link's `rel`, when `href` is set. */\n  rel?: string;\n  /**\n   * The pages' three sizes: `md` the FAB at 56px, `lg` the medium FAB at\n   * 80px and `xl` the large FAB at 96px.\n   * @default 'md'\n   */\n  size?: FabSize;\n  /** A function may compute the style from the FAB's render state. */\n  style?: StyleOrFunction<ButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * The colour role the FAB is drawn in.\n   * @default 'primary'\n   */\n  tone?: FabTone;\n  /**\n   * `tonal` draws the tone's container pair, the pages' default; `filled`\n   * draws the tone itself.\n   * @default 'tonal'\n   */\n  variant?: FabVariant;\n} & Omit<ButtonDOMProps, 'aria-label' | 'isPending'>;\ntype FabSize = 'lg' | 'md' | 'xl';\ntype FabTone = 'primary' | 'secondary' | 'tertiary';\ntype FabVariant = 'filled' | 'tonal';\n\n/**\n * A screen's primary action, raised over its content. Its icon is its\n * children; given a `label` it is the extended FAB, with the label after the\n * icon. Given `href` it is a link with the same appearance.\n *\n * ```tsx\n * <Fab aria-label=\"Label\">\n *   <PlusIcon />\n * </Fab>\n * ```\n */\nfunction Fab({\n  children,\n  label,\n  size = 'md',\n  tone = 'primary',\n  variant = 'tonal',\n  ...props\n}: FabProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>) {\n  return <ButtonBase {...props} classes={fabClasses(label !== undefined, size, tone, variant)}>\n      {children === undefined ? null : <span {...stylex.props(fabStyles.icon, fabIconSizes[size])}>\n          {children}\n        </span>}\n      {label}\n    </ButtonBase>;\n}\n\n// The FAB's classes, from React Aria's render state: the layers from what it\n// reports rather than from `:hover` and `:active`, for Button's reasons — see\n// its header. Built by a call rather than written inline at the prop, which\n// is what react-perf's no-new-function-as-prop is after.\nfunction fabClasses(isExtended: boolean, size: FabSize, tone: FabTone, variant: FabVariant) {\n  return (state: ButtonState) => stylex.props(fabStyles.base, focus.ring, fabTones[variant][tone], isExtended ? extendedFabSizes[size] : fabSizes[size], state.isHovered && fabStyles.hovered, state.isFocusVisible && fabStyles.focused, state.isPressed && fabStyles.pressed, state.isDisabled && fabStyles.disabled);\n}\nexport type { FabProps, FabSize, FabTone, FabVariant };\nexport default Fab;"],"mappings":";;;;;;;;;;;;;;;;;;;AA0GA,SAAAgC,IAAAC,IAAA;CAAA,MAAAC,IAAAjC,EAAA,EAAA;CAAA,IAAAgB;CAAA,IAAAI;CAAA,IAAAc;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAa,CAAA,CAAAhB,UAAAI,OAAAE,MAAAa,IAAAT,MAAAU,IAAAR,SAAAS,IAAA,GAAAH,WAAAF;EAOqDC,EAAA,KAAAD;EAAAC,EAAA,KAAAjB;EAAAiB,EAAA,KAAAb;EAAAa,EAAA,KAAAC;EAAAD,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAArB,WAAAiB,EAAA;EAAAb,QAAAa,EAAA;EAAAC,UAAAD,EAAA;EAAAE,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAJhE,MAAAX,OAAAa,OAAAG,KAAAA,IAAA,OAAAH;CACA,MAAAT,OAAAU,OAAAE,KAAAA,IAAA,YAAAF;CACA,MAAAR,UAAAS,OAAAC,KAAAA,IAAA,UAAAD;CAGkD,MAAAE,KAAAnB,UAAUkB,KAAAA;CAAS,IAAAE;CAAA,IAAAP,EAAA,OAAAX,QAAAW,EAAA,OAAAM,MAAAN,EAAA,OAAAP,QAAAO,EAAA,QAAAL,SAAA;EAA9BY,KAAAC,WAAWF,IAAqBjB,MAAMI,MAAME,OAAO;EAACK,EAAA,KAAAX;EAAAW,EAAA,KAAAM;EAAAN,EAAA,KAAAP;EAAAO,EAAA,MAAAL;EAAAK,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAjB,YAAAiB,EAAA,QAAAX,MAAA;EACtFoB,KAAA1B,aAAasB,KAAAA,IAAb,OAAgC,oBAAA,QAAA;GAExB,GAFkCjC,MAAaO,UAAS+B,MAAOjC,aAAaY,KAAK;GACrFN;EACI,CAAA;EAAAiB,EAAA,MAAAjB;EAAAiB,EAAA,MAAAX;EAAAW,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAAb,SAAAa,EAAA,QAAAC,WAAAD,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAHNE,KAAA,qBAAC,YAAD;GAAW,GAAKV;GAAgB,SAAAM;GAAhC,UAAA,CACFE,IAGAtB,KAJa;;EAKHa,EAAA,MAAAb;EAAAa,EAAA,MAAAC;EAAAD,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OALRW;AAKQ;AAOjB,SAASH,WAAWI,YAAqBvB,MAAeI,MAAeE,SAAqB;CAC1F,QAAQkB,UAAuBzC,MAAaO,UAAUmC,MAAMjC,MAAMkC,MAAMnC,SAASe,QAAQ,CAACF,OAAOmB,aAAapC,iBAAiBa,QAAQX,SAASW,OAAOwB,MAAMG,aAAarC,UAAUsC,SAASJ,MAAMK,kBAAkBvC,UAAUwC,SAASN,MAAMO,aAAazC,UAAU0C,SAASR,MAAMS,cAAc3C,UAAU4C,QAAQ;AACtT"}

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

@@ -11,6 +11,13 @@ type FormProps$1 = {
    * malformed field blocks submission, and its message is the browser's
    * own, shown once submission is tried.
    *
+   * Under `aria`, `isRequired` marks a field and checks nothing. The label
+   * takes its asterisk and the control `aria-required`, but an empty
+   * required field neither stops the form submitting nor shows a message,
+   * since the control carries no `required` for the browser to enforce. A
+   * form that must not go out with one empty checks it in `onSubmit` and
+   * hands the field its `error`, as the Client validation story does.
+   *
    * 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` — and each is read out politely as it appears
@@ -21,7 +28,7 @@ type FormProps$1 = {
    * @default 'aria'
    */
   validationBehavior?: 'aria' | 'native';
-} & Omit<FormProps, 'className' | 'style'>;
+} & Omit<FormProps, 'className' | 'style' | 'validationBehavior'>;
 /**
  * A form: the fields inside it and what they are told about validation. Pass
  * `validationErrors`, an object keyed by field `name`, to show what a server
@@ -37,9 +44,12 @@ type FormProps$1 = {
  * A form also reserves each field's message line. A field on its own draws
  * that line only once it has something to say, so an error arriving after a
  * submit or an async check makes the field taller and moves everything below
- * it down the page. Inside a form the line is there from the start, empty,
- * and nothing moves when it fills — which is the whole reason a form is where
- * a message arrives after the fact.
+ * it down the page. Inside a form the line is there from the start, empty
+ * and one line tall, so a message that fits on it moves nothing when it
+ * arrives — which is the whole reason a form is where a message arrives
+ * after the fact. A longer message wraps, and each line past the first
+ * pushes everything below it down, so keep a message that arrives after the
+ * fact to one line.
  *
  * The call site's `className` and `style` land on the form element, which is
  * the element a layout positions.

package/dist/components/form/index.js

@@ -20,9 +20,12 @@ import { Form } from "react-aria-components";
 * A form also reserves each field's message line. A field on its own draws
 * that line only once it has something to say, so an error arriving after a
 * submit or an async check makes the field taller and moves everything below
-* it down the page. Inside a form the line is there from the start, empty,
-* and nothing moves when it fills — which is the whole reason a form is where
-* a message arrives after the fact.
+* it down the page. Inside a form the line is there from the start, empty
+* and one line tall, so a message that fits on it moves nothing when it
+* arrives — which is the whole reason a form is where a message arrives
+* after the fact. A longer message wraps, and each line past the first
+* pushes everything below it down, so keep a message that arrives after the
+* fact to one line.
 *
 * The call site's `className` and `style` land on the form element, which is
 * the element a layout positions.

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` — 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"}
+{"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`, `isRequired` marks a field and checks nothing. The label\n   * takes its asterisk and the control `aria-required`, but an empty\n   * required field neither stops the form submitting nor shows a message,\n   * since the control carries no `required` for the browser to enforce. A\n   * form that must not go out with one empty checks it in `onSubmit` and\n   * hands the field its `error`, as the Client validation story does.\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' | 'validationBehavior'>;\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 one line tall, so a message that fits on it moves nothing when it\n * arrives — which is the whole reason a form is where a message arrives\n * after the fact. A longer message wraps, and each line past the first\n * pushes everything below it down, so keep a message that arrives after the\n * fact to one line.\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,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/icon-button/index.d.ts

@@ -52,7 +52,7 @@ type IconButtonProps = {
    * @default 'standard'
    */
   variant?: IconButtonVariant;
-} & ButtonForm & Omit<ButtonDOMProps, 'render'>;
+} & ButtonForm & Omit<ButtonDOMProps, 'aria-label' | 'render'>;
 type IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';
 type IconButtonState = ButtonState;
 type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
@@ -73,6 +73,20 @@ type IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';
  *   <StarIcon />
  * </IconButton>
  * ```
+ *
+ * An icon shows a sighted reader no words, so one whose meaning is not plain
+ * from its shape goes inside a `Tooltip` that repeats its `aria-label`,
+ * shown while a pointer rests on it or it holds focus. The tooltip repeats
+ * the name rather than giving it: touch never shows one, so `aria-label` is
+ * still what names the button.
+ *
+ * ```tsx
+ * <Tooltip label="Search">
+ *   <IconButton aria-label="Search">
+ *     <SearchIcon />
+ *   </IconButton>
+ * </Tooltip>
+ * ```
  */
 declare function IconButton({ defaultSelected, href, isPending, isSelected, onChange, pendingLabel, rel, size: ownSize, target, variant, ...props }: IconButtonProps & RefAttributes<HTMLAnchorElement | HTMLButtonElement>): import("react").JSX.Element;
 //#endregion