@kanso-labs/kanso-ui 0.39.5 → 0.40.1

package/README.md

@@ -272,6 +272,21 @@ content given `slot="close"`:
 </Sheet>
 ```
 
+A sheet or dialog nothing on the page opens, such as one a route shows or a menu
+item raises, has no trigger. It is then `Sheet.Content` or `Dialog.Content` on
+its own, holding the open state through `isOpen` and `onOpenChange`; a
+`slot="close"` button, Escape and the scrim report through `onOpenChange` as
+they would to the trigger. Wrapped in `Sheet` or `Dialog` with no button inside,
+React Aria warns that its press responder found nothing to press.
+
+```tsx
+<Sheet.Content isOpen={isOpen} onOpenChange={setOpen}>
+  <Sheet.Header>
+    <Sheet.Title>Headline</Sheet.Title>
+  </Sheet.Header>
+</Sheet.Content>
+```
+
 An open overlay carries a visually hidden dismiss button for screen readers,
 named in the reader's language like every other control here; see
 [Localisation](#localisation).

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

@@ -18,6 +18,12 @@ type DialogProps$1 = Omit<DialogTriggerProps, 'children'> & {
  * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside
  * `Dialog` opens it, and one given `slot="close"` anywhere inside the
  * content closes it; neither needs a part of its own.
+ *
+ * `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.
  */
 declare function Dialog$1({ children, ...props }: DialogProps$1): import("react").JSX.Element;
 declare namespace Dialog$1 {
@@ -45,8 +51,13 @@ declare function DialogBody({ ref: callerRef, ...props }: HTMLAttributes<HTMLDiv
  * and `isDismissable` says nothing about it — so a dialog that has to be
  * answered from one of its actions, as an alert dialog usually does, turns
  * off both.
+ *
+ * Inside `Dialog`, the open state is the trigger's. On its own, with no
+ * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and
+ * a `slot="close"` button, Escape and the scrim all report through
+ * `onOpenChange`, as they would to `Dialog`.
  */
-declare function DialogContent({ children, className, container, isDismissable, isKeyboardDismissDisabled, ref, style, ...props }: DialogContentProps & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+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;
 declare function DialogHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**
@@ -77,7 +88,7 @@ type DialogContentProps = {
   isDismissable?: boolean;
   /** A function may compute the style from the container's render state. */
   style?: StyleOrFunction<ModalRenderProps>;
-} & Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'>;
+} & Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'>;
 type DialogTitleProps = HeadingProps;
 //#endregion
 export { DialogBody, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogProps$1 as DialogProps, DialogTitle, type DialogTitleProps, Dialog$1 as default };

package/dist/components/dialog/index.js

@@ -61,6 +61,12 @@ const BasicContext = createContext(false);
 * `Dialog.Footer`. A `Button` or `IconButton` placed directly inside
 * `Dialog` opens it, and one given `slot="close"` anywhere inside the
 * content closes it; neither needs a part of its own.
+*
+* `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.
 */
 function Dialog$1(t0) {
 	const $ = c(6);
@@ -136,48 +142,62 @@ function DialogBody(t0) {
 * and `isDismissable` says nothing about it — so a dialog that has to be
 * answered from one of its actions, as an alert dialog usually does, turns
 * off both.
+*
+* Inside `Dialog`, the open state is the trigger's. On its own, with no
+* trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and
+* a `slot="close"` button, Escape and the scrim all report through
+* `onOpenChange`, as they would to `Dialog`.
 */
 function DialogContent(t0) {
-	const $ = c(32);
+	const $ = c(38);
 	let children;
 	let className;
 	let container;
+	let defaultOpen;
 	let isKeyboardDismissDisabled;
+	let isOpen;
+	let onOpenChange;
 	let props$2;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, ref, style, ...props$2} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$2} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = container;
-		$[4] = isKeyboardDismissDisabled;
-		$[5] = props$2;
-		$[6] = ref;
-		$[7] = style;
-		$[8] = t1;
+		$[4] = defaultOpen;
+		$[5] = isKeyboardDismissDisabled;
+		$[6] = isOpen;
+		$[7] = onOpenChange;
+		$[8] = props$2;
+		$[9] = ref;
+		$[10] = style;
+		$[11] = t1;
 	} else {
 		children = $[1];
 		className = $[2];
 		container = $[3];
-		isKeyboardDismissDisabled = $[4];
-		props$2 = $[5];
-		ref = $[6];
-		style = $[7];
-		t1 = $[8];
+		defaultOpen = $[4];
+		isKeyboardDismissDisabled = $[5];
+		isOpen = $[6];
+		onOpenChange = $[7];
+		props$2 = $[8];
+		ref = $[9];
+		style = $[10];
+		t1 = $[11];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
 	const isBasic = props$2.role === "alertdialog";
 	let t2;
-	if ($[9] !== isBasic) {
+	if ($[12] !== isBasic) {
 		t2 = props(overlay.scrim, styles.centre, isBasic && basic.centre);
-		$[9] = isBasic;
-		$[10] = t2;
-	} else t2 = $[10];
+		$[12] = isBasic;
+		$[13] = t2;
+	} else t2 = $[13];
 	let t3;
-	if ($[11] !== className || $[12] !== isBasic || $[13] !== style) {
+	if ($[14] !== className || $[15] !== isBasic || $[16] !== style) {
 		t3 = 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" }
@@ -185,65 +205,71 @@ function DialogContent(t0) {
 			className,
 			style
 		});
-		$[11] = className;
-		$[12] = isBasic;
-		$[13] = style;
-		$[14] = t3;
-	} else t3 = $[14];
+		$[14] = className;
+		$[15] = isBasic;
+		$[16] = style;
+		$[17] = t3;
+	} else t3 = $[17];
 	let t4;
-	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = props(overlay.modalDialog);
-		$[15] = t4;
-	} else t4 = $[15];
+		$[18] = t4;
+	} else t4 = $[18];
 	let t5;
-	if ($[16] !== children || $[17] !== props$2) {
+	if ($[19] !== children || $[20] !== props$2) {
 		t5 = /* @__PURE__ */ jsx(Dialog, {
 			...props$2,
 			...t4,
 			children
 		});
-		$[16] = children;
-		$[17] = props$2;
-		$[18] = t5;
-	} else t5 = $[18];
+		$[19] = children;
+		$[20] = props$2;
+		$[21] = t5;
+	} else t5 = $[21];
 	let t6;
-	if ($[19] !== ref || $[20] !== t3 || $[21] !== t5) {
+	if ($[22] !== ref || $[23] !== t3 || $[24] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t3,
 			children: t5
 		});
-		$[19] = ref;
-		$[20] = t3;
-		$[21] = t5;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[22] = ref;
+		$[23] = t3;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
 	let t7;
-	if ($[23] !== container || $[24] !== isDismissable || $[25] !== isKeyboardDismissDisabled || $[26] !== t2 || $[27] !== t6) {
+	if ($[26] !== container || $[27] !== defaultOpen || $[28] !== isDismissable || $[29] !== isKeyboardDismissDisabled || $[30] !== isOpen || $[31] !== onOpenChange || $[32] !== t2 || $[33] !== t6) {
 		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
+			defaultOpen,
 			isDismissable,
 			isKeyboardDismissDisabled,
+			isOpen,
+			onOpenChange,
 			UNSTABLE_portalContainer: container,
 			...t2,
 			children: t6
 		});
-		$[23] = container;
-		$[24] = isDismissable;
-		$[25] = isKeyboardDismissDisabled;
-		$[26] = t2;
-		$[27] = t6;
-		$[28] = t7;
-	} else t7 = $[28];
+		$[26] = container;
+		$[27] = defaultOpen;
+		$[28] = isDismissable;
+		$[29] = isKeyboardDismissDisabled;
+		$[30] = isOpen;
+		$[31] = onOpenChange;
+		$[32] = t2;
+		$[33] = t6;
+		$[34] = t7;
+	} else t7 = $[34];
 	let t8;
-	if ($[29] !== isBasic || $[30] !== t7) {
+	if ($[35] !== isBasic || $[36] !== t7) {
 		t8 = /* @__PURE__ */ jsx(BasicContext, {
 			value: isBasic,
 			children: t7
 		});
-		$[29] = isBasic;
-		$[30] = t7;
-		$[31] = t8;
-	} else t8 = $[31];
+		$[35] = isBasic;
+		$[36] = t7;
+		$[37] = t8;
+	} else t8 = $[37];
 	return t8;
 }
 function DialogFooter(props) {

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","isKeyboardDismissDisabled","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 */\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 */\nfunction DialogContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: DialogContentProps & RefAttributes<HTMLDivElement>) {\n  const isBasic = props.role === 'alertdialog';\n  return <BasicContext value={isBasic}>\n      <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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 dismissal settings and the\n// container's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the container, which is the one\n// worth restyling, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// 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, 'isKeyboardDismissDisabled'>;\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","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 */\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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"}

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

@@ -16,6 +16,12 @@ type SheetProps = Omit<DialogTriggerProps, 'children'> & {
  * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one
  * given `slot="close"` anywhere inside the content closes it; neither needs
  * a part of its own.
+ *
+ * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one
+ * a route shows, or a menu item raises — leaves it out and passes `isOpen`
+ * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no
+ * button inside it, React Aria warns that its press responder found nothing
+ * to press.
  */
 declare function Sheet({ children, ...props }: SheetProps): import("react").JSX.Element;
 declare namespace Sheet {
@@ -35,8 +41,13 @@ declare function SheetBody({ ref: callerRef, ...props }: HTMLAttributes<HTMLDivE
  * A press on the scrim closes the sheet unless `isDismissable` says
  * otherwise — React Aria's own default is the reverse, and a sheet that
  * ignores a tap outside it reads as stuck.
+ *
+ * Inside `Sheet`, the open state is the trigger's. On its own, with no
+ * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and
+ * a `slot="close"` button, Escape and the scrim all report through
+ * `onOpenChange`, as they would to `Sheet`.
  */
-declare function SheetContent({ children, className, container, isDismissable, isKeyboardDismissDisabled, ref, style, ...props }: RefAttributes<HTMLDivElement> & SheetContentProps): import("react").JSX.Element;
+declare function SheetContent({ children, className, container, defaultOpen, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props }: RefAttributes<HTMLDivElement> & SheetContentProps): import("react").JSX.Element;
 declare function SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**
  * The bottom sheets page's drag handle: a short bar above the sheet's
@@ -59,7 +70,7 @@ declare function SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttribut
  * itself as an unnamed dialog.
  */
 declare function SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps): import("react").JSX.Element;
-type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {
+type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {
   /** A function may compute the class from the panel's render state. */
   className?: ClassNameOrFunction<ModalRenderProps>;
   /**

package/dist/components/sheet/index.js

@@ -32,6 +32,12 @@ const styles = { body: {
 * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one
 * given `slot="close"` anywhere inside the content closes it; neither needs
 * a part of its own.
+*
+* `Sheet` is the trigger's half, so a sheet nothing on the page opens — one
+* a route shows, or a menu item raises — leaves it out and passes `isOpen`
+* and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no
+* button inside it, React Aria warns that its press responder found nothing
+* to press.
 */
 function Sheet(t0) {
 	const $ = c(6);
@@ -97,97 +103,117 @@ function SheetBody(t0) {
 * A press on the scrim closes the sheet unless `isDismissable` says
 * otherwise — React Aria's own default is the reverse, and a sheet that
 * ignores a tap outside it reads as stuck.
+*
+* Inside `Sheet`, the open state is the trigger's. On its own, with no
+* trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and
+* a `slot="close"` button, Escape and the scrim all report through
+* `onOpenChange`, as they would to `Sheet`.
 */
 function SheetContent(t0) {
-	const $ = c(26);
+	const $ = c(32);
 	let children;
 	let className;
 	let container;
+	let defaultOpen;
 	let isKeyboardDismissDisabled;
+	let isOpen;
+	let onOpenChange;
 	let props$1;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, isDismissable: t1, isKeyboardDismissDisabled, ref, style, ...props$1} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = container;
-		$[4] = isKeyboardDismissDisabled;
-		$[5] = props$1;
-		$[6] = ref;
-		$[7] = style;
-		$[8] = t1;
+		$[4] = defaultOpen;
+		$[5] = isKeyboardDismissDisabled;
+		$[6] = isOpen;
+		$[7] = onOpenChange;
+		$[8] = props$1;
+		$[9] = ref;
+		$[10] = style;
+		$[11] = t1;
 	} else {
 		children = $[1];
 		className = $[2];
 		container = $[3];
-		isKeyboardDismissDisabled = $[4];
-		props$1 = $[5];
-		ref = $[6];
-		style = $[7];
-		t1 = $[8];
+		defaultOpen = $[4];
+		isKeyboardDismissDisabled = $[5];
+		isOpen = $[6];
+		onOpenChange = $[7];
+		props$1 = $[8];
+		ref = $[9];
+		style = $[10];
+		t1 = $[11];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
 	let t2;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = props(overlay.scrim);
-		$[9] = t2;
-	} else t2 = $[9];
+		$[12] = t2;
+	} else t2 = $[12];
 	let t3;
-	if ($[10] !== className || $[11] !== style) {
+	if ($[13] !== className || $[14] !== style) {
 		t3 = mergeStatefulStyles({ className: "x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4" }, {
 			className,
 			style
 		});
-		$[10] = className;
-		$[11] = style;
-		$[12] = t3;
-	} else t3 = $[12];
+		$[13] = className;
+		$[14] = style;
+		$[15] = t3;
+	} else t3 = $[15];
 	let t4;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = props(overlay.modalDialog);
-		$[13] = t4;
-	} else t4 = $[13];
+		$[16] = t4;
+	} else t4 = $[16];
 	let t5;
-	if ($[14] !== children || $[15] !== props$1) {
+	if ($[17] !== children || $[18] !== props$1) {
 		t5 = /* @__PURE__ */ jsx(Dialog, {
 			...props$1,
 			...t4,
 			children
 		});
-		$[14] = children;
-		$[15] = props$1;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[17] = children;
+		$[18] = props$1;
+		$[19] = t5;
+	} else t5 = $[19];
 	let t6;
-	if ($[17] !== ref || $[18] !== t3 || $[19] !== t5) {
+	if ($[20] !== ref || $[21] !== t3 || $[22] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t3,
 			children: t5
 		});
-		$[17] = ref;
-		$[18] = t3;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
+		$[20] = ref;
+		$[21] = t3;
+		$[22] = t5;
+		$[23] = t6;
+	} else t6 = $[23];
 	let t7;
-	if ($[21] !== container || $[22] !== isDismissable || $[23] !== isKeyboardDismissDisabled || $[24] !== t6) {
+	if ($[24] !== container || $[25] !== defaultOpen || $[26] !== isDismissable || $[27] !== isKeyboardDismissDisabled || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t6) {
 		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
+			defaultOpen,
 			isDismissable,
 			isKeyboardDismissDisabled,
+			isOpen,
+			onOpenChange,
 			UNSTABLE_portalContainer: container,
 			...t2,
 			children: t6
 		});
-		$[21] = container;
-		$[22] = isDismissable;
-		$[23] = isKeyboardDismissDisabled;
-		$[24] = t6;
-		$[25] = t7;
-	} else t7 = $[25];
+		$[24] = container;
+		$[25] = defaultOpen;
+		$[26] = isDismissable;
+		$[27] = isKeyboardDismissDisabled;
+		$[28] = isOpen;
+		$[29] = onOpenChange;
+		$[30] = t6;
+		$[31] = t7;
+	} else t7 = $[31];
 	return t7;
 }
 function SheetFooter(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","isKeyboardDismissDisabled","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } 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// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\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, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\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)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its sibling, since\n// the picked one carries React Aria's documentation, whose default is the\n// reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet 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,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } 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// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet 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 `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\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, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, 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 `Sheet`.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <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)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xqu0tyb x1dkaolv x9f619 x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the 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 SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet 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,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.39.5",
+  "version": "0.40.1",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -126,7 +126,7 @@
     "tsdown": "0.23.0",
     "typescript": "6.0.3",
     "typescript-eslint": "8.71.1",
-    "vite": "8.3.3",
+    "vite": "8.3.4",
     "vitest": "4.1.11"
   },
   "peerDependencies": {