@kanso-labs/kanso-ui 0.43.7 → 0.44.0

package/dist/components/separator/index.js

@@ -2,6 +2,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStyles } from "../../styles/merge.js";
 import { c } from "react/compiler-runtime";
+import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Separator, SeparatorContext, useSlottedContext } from "react-aria-components";
 //#region src/components/separator/index.tsx
@@ -27,7 +28,10 @@ const styles = {
 		kGJrpR: "xjslfuv",
 		kVhnKS: "x1gbqego",
 		k2ei4v: "xjg5lhu",
+		k1xSpc: "x1rg5ohu",
 		kzqmXN: "x1i1rx1s",
+		kAzted: "x1xaadd7",
+		kXLuUW: "xxymvpz",
 		$$css: true
 	}
 };
@@ -59,11 +63,24 @@ const insets = {
 		}
 	}
 };
+function decorativeRenderer(element, render) {
+	return (domProps, renderProps) => {
+		const hidden = {
+			...domProps,
+			"aria-hidden": true,
+			"aria-orientation": void 0,
+			role: void 0
+		};
+		return render === void 0 ? createElement(element, hidden) : render(hidden, renderProps);
+	};
+}
 /**
 * A 1px rule between items. The orientation drives the accessibility tree as
 * well as which side the rule is drawn on: horizontal renders an `<hr>`,
 * whose role and orientation are implicit, and vertical a `<div>` given the
-* separator role and `aria-orientation="vertical"`.
+* separator role and `aria-orientation="vertical"`. `decorative` takes the
+* rule out of that tree altogether, for one that only draws a line between
+* items that already carry their own structure.
 *
 * `inset` holds the rule off the ends it runs between — `start` off the
 * leading one, `both` off each — which is what a rule between list rows
@@ -76,27 +93,33 @@ const insets = {
 * different element, and `render` is React Aria's function form.
 */
 function Separator$1(t0) {
-	const $ = c(5);
-	const { inset: t1, orientation, ...props$1 } = t0;
-	const inset = t1 === void 0 ? "none" : t1;
+	const $ = c(6);
+	const { decorative: t1, inset: t2, orientation, render, ...props$1 } = t0;
+	const decorative = t1 === void 0 ? false : t1;
+	const inset = t2 === void 0 ? "none" : t2;
 	const context = useSlottedContext(SeparatorContext, props$1.slot);
 	const resolved = orientation ?? context?.orientation ?? "horizontal";
+	const requested = props$1.elementType ?? context?.elementType ?? "hr";
+	const element = requested === "hr" && resolved === "vertical" ? "div" : requested;
 	const T0 = Separator;
-	const t2 = mergeStyles(props(styles.base, styles[resolved], insets[resolved][inset]), props$1);
-	let t3;
-	if ($[0] !== T0 || $[1] !== props$1 || $[2] !== resolved || $[3] !== t2) {
-		t3 = /* @__PURE__ */ jsx(T0, {
+	const t3 = decorative ? decorativeRenderer(element, render) : render;
+	const t4 = mergeStyles(props(styles.base, styles[resolved], insets[resolved][inset]), props$1);
+	let t5;
+	if ($[0] !== T0 || $[1] !== props$1 || $[2] !== resolved || $[3] !== t3 || $[4] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
 			orientation: resolved,
+			render: t3,
 			...props$1,
-			...t2
+			...t4
 		});
 		$[0] = T0;
 		$[1] = props$1;
 		$[2] = resolved;
-		$[3] = t2;
-		$[4] = t3;
-	} else t3 = $[4];
-	return t3;
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	return t5;
 }
 //#endregion
 export { Separator$1 as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } 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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule's length is `100%` less its margins: a margin\n// sits outside the box, so a full-width rule with one would overflow its\n// parent by exactly the inset, and `auto` in its place gives an empty `<hr>`\n// a width only where the parent stretches it — in a flex row, or a parent\n// centring its children, the rule came out 0 wide and vanished.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. The length is the\n// full-width rule's `100%` less the margins, which keeps the rule inside its\n// parent — a margin outside a 100% box overflows by the inset — and still\n// gives it a width in every layout, where `auto` gives an `<hr>` with no\n// content one only in a parent that stretches it.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x1n0idw\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x1u7osep\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;AAwDA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAwCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAA/C,EAAA,CAAA;CAAmB,MAAA,EAAA4C,OAAAI,IAAAH,aAAA,GAAAI,YAAAH;CACjB,MAAAF,QAAAI,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB3C,kBAAkBD,kBAAkB0C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBR,eAAeM,SAAON,eAAtB;CACT,MAAAS,KAAAhD;CAAmD,MAAAiD,KAAA9C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOwC,WAAWZ,OAAOY,SAAS,CAACT,MAAM,GAAGK,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAO,MAAAP,EAAA,OAAAE,WAAAF,EAAA,OAAAM,YAAAN,EAAA,OAAAQ,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIR,EAAA,KAAAO;EAAAP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAhJS;AAAgJ"}
+{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","createElement","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","k1xSpc","kAzted","kXLuUW","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","decorative","inset","orientation","Omit","decorativeRenderer","element","render","NonNullable","domProps","renderProps","hidden","undefined","role","t0","$","t1","t2","props","context","slot","resolved","requested","elementType","T0","t3","t4","t5","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createElement } from 'react';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } 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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical takes its length from the flex or grid parent through\n// `alignSelf: stretch`, since a divider between two columns should match\n// whatever they turn out to be rather than being told a height at the call\n// site. Anywhere else there is nothing to stretch to, so it falls back to\n// `1em`, one line of the text around it, and sits in that line as an inline\n// block rather than breaking it: between two words in a paragraph it is a\n// short upright bar, rather than a 1px box with no height that draws\n// nothing. The divider page gives no length for a vertical rule standing on\n// its own, so the `1em` is this library's choice. Inside a flex or grid\n// parent the inline display is blockified and the floor sits below any\n// length the parent stretches it to, so neither changes the rule there.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule's length is `100%` less its margins: a margin\n// sits outside the box, so a full-width rule with one would overflow its\n// parent by exactly the inset, and `auto` in its place gives an empty `<hr>`\n// a width only where the parent stretches it — in a flex row, or a parent\n// centring its children, the rule came out 0 wide and vanished.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    k1xSpc: \"x1rg5ohu\",\n    kzqmXN: \"x1i1rx1s\",\n    kAzted: \"x1xaadd7\",\n    kXLuUW: \"xxymvpz\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. The length is the\n// full-width rule's `100%` less the margins, which keeps the rule inside its\n// parent — a margin outside a 100% box overflows by the inset — and still\n// gives it a width in every layout, where `auto` gives an `<hr>` with no\n// content one only in a parent that stretches it.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x1n0idw\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x1u7osep\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it. The\n// `1em` floor is the rule's own length and the margins sit outside it: a\n// stretched rule is shortened down to the floor and no further, and one with\n// no parent to stretch to keeps its `1em` and takes the inset as space above\n// and below, since there is no length of the parent's for it to hold off.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = {\n  /**\n   * Takes the rule out of the accessibility tree, for a divider that only\n   * draws a line between things that already say where each starts — the\n   * sections of a `DisclosureGroup`, or rows that are each a control. A\n   * reader then hears nothing between them rather than \"separator\" at every\n   * one. The rule draws the same either way.\n   * @default false\n   */\n  decorative?: boolean;\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent, and is one line of the text around it, `1em`, in\n   * any other. Defaults to whatever the container asks for — a `Toolbar`\n   * asks for the rule across its own direction — and to horizontal outside\n   * one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n} & Omit<RACSeparatorProps, 'orientation'>;\n\n// A rule taken out of the accessibility tree. React Aria passes on neither\n// `aria-hidden` nor `role` from a separator's props, and sets the separator\n// role itself, so the element is rewritten in its render function, after\n// both: hidden, with the role and orientation it would be announced by\n// dropped. A render function from the call site still gets the last word.\nfunction decorativeRenderer(element: string, render: RACSeparatorProps['render']): NonNullable<RACSeparatorProps['render']> {\n  return (domProps, renderProps) => {\n    const hidden = {\n      ...domProps,\n      'aria-hidden': true,\n      'aria-orientation': undefined,\n      role: undefined\n    };\n    return render === undefined ? createElement(element, hidden) : render(hidden, renderProps);\n  };\n}\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`. `decorative` takes the\n * rule out of that tree altogether, for one that only draws a line between\n * items that already carry their own structure.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  decorative = false,\n  inset = 'none',\n  orientation,\n  render,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  // The element React Aria renders, which its render function is held to:\n  // an <hr> unless the call site or a container asks for another, and a\n  // <div> in place of a vertical <hr>.\n  const requested = props.elementType ?? context?.elementType ?? 'hr';\n  const element = requested === 'hr' && resolved === 'vertical' ? 'div' : requested;\n  return <RACSeparator orientation={resolved} render={decorative ? decorativeRenderer(element, render) : render} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;;AA+DA,MAAMe,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,QAAQ;EACRO,QAAQ;EACRC,QAAQ;EACRd,OAAO;CACT;AACF;AA4CA,MAAMwB,SAAS;CACbvB,YAAYc;EArCZC,MAAM;GACJV,QAAQ;GACRW,QAAQ;GACRC,QAAQ;GACRlB,OAAO;EACT;EACAmB,MAAM,EACJnB,OAAO,KACT;EACAoB,OAAO;GACLd,QAAQ;GACRY,QAAQ;GACRlB,OAAO;EACT;CAwBYe;CACZR,UAAUc;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRvB,OAAO;EACT;EACAmB,MAAM,EACJnB,OAAO,KACT;EACAoB,OAAO;GACLG,QAAQ;GACRvB,OAAO;EACT;CAIUqB;AACZ;AAmCA,SAASS,mBAAmBC,SAAiBC,QAA+E;CAC1H,QAAQE,UAAUC,gBAAgB;EAChC,MAAMC,SAAS;GACb,GAAGF;GACH,eAAe;GACf,oBAAoBG,KAAAA;GACpBC,MAAMD,KAAAA;EACR;EACA,OAAOL,WAAWK,KAAAA,IAAYrD,cAAc+C,SAASK,MAAM,IAAIJ,OAAOI,QAAQD,WAAW;CAC3F;AACF;;;;;;;;;;;;;;;;;;;AAoBA,SAAAlD,YAAAsD,IAAA;CAAA,MAAAC,IAAA7D,EAAA,CAAA;CAAmB,MAAA,EAAA+C,YAAAe,IAAAd,OAAAe,IAAAd,aAAAI,QAAA,GAAAW,YAAAJ;CACjB,MAAAb,aAAAe,OAAAJ,KAAAA,IAAA,QAAAI;CACA,MAAAd,QAAAe,OAAAL,KAAAA,IAAA,SAAAK;CAKA,MAAAE,UAAgBxD,kBAAkBD,kBAAkBwD,QAAKE,IAAK;CAC9D,MAAAC,WAAiBlB,eAAegB,SAAOhB,eAAtB;CAIjB,MAAAmB,YAAkBJ,QAAKK,eAAgBJ,SAAOI,eAA5B;CAClB,MAAAjB,UAAgBgB,cAAc,QAAQD,aAAa,aAAnC,QAAAC;CACR,MAAAE,KAAA/D;CAA4C,MAAAgE,KAAAxB,aAAaI,mBAAmBC,SAASC,MAAe,IAAxDA;CAA0E,MAAAmB,KAAA9D,YAAYN,MAAaU,OAAMC,MAAOD,OAAOqD,WAAWtB,OAAOsB,SAAS,CAACnB,MAAM,GAAGgB,OAAK;CAAC,IAAAS;CAAA,IAAAZ,EAAA,OAAAS,MAAAT,EAAA,OAAAG,WAAAH,EAAA,OAAAM,YAAAN,EAAA,OAAAU,MAAAV,EAAA,OAAAW,IAAA;EAA/MC,KAAA,oBAAC,IAAD;GAA2BN,aAAAA;GAAkB,QAAAI;GAAyD,GAAMP;GAAK,GAAMQ;EAAwF,CAAA;EAAIX,EAAA,KAAAS;EAAAT,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAU;EAAAV,EAAA,KAAAW;EAAAX,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAAnNY;AAAmN"}

package/dist/components/sheet/index.js

@@ -4,12 +4,13 @@ import { mergeRefs } from "../../render/ref.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
 import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
-import { useScrollable } from "../../hooks/useScrollable.js";
+import { useScrollStop } from "../../hooks/useScrollStop.js";
 import { OverlayScope } from "../../overlay/index.js";
+import { InsideModalContext } from "../../overlay/modal.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
+import { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, useSlottedContext } from "react-aria-components";
 //#region src/components/sheet/index.tsx
 const styles = { body: {
 	kB7OPa: "x9f619",
@@ -17,6 +18,7 @@ const styles = { body: {
 	kXwgrk: "xdt5ytf",
 	kzQI83: "x1iyjqo2",
 	kOIVth: "xxj4525",
+	kHjlTd: "xj0a0fe",
 	kORKVm: "x1odjw0f",
 	k8WAf4: "xp6hjv6",
 	kg3NbH: "xg0ps1x",
@@ -68,9 +70,13 @@ function Sheet(t0) {
 }
 function SheetBody(t0) {
 	const $ = c(7);
-	const { ref: callerRef, ...props$1 } = t0;
+	const { ref: callerRef, ...props$2 } = t0;
 	const ref = useRef(null);
-	const scrollable = useScrollable(ref);
+	const title = useSlottedContext(HeadingContext, "title");
+	const scrollStop = useScrollStop(ref, {
+		label: props$2["aria-label"],
+		title: title?.id
+	});
 	const t1 = callerRef ?? void 0;
 	let t2;
 	if ($[0] !== t1) {
@@ -79,23 +85,22 @@ function SheetBody(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const merged = t2;
-	const t3 = scrollable ? 0 : void 0;
-	const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$1);
-	let t5;
-	if ($[2] !== merged || $[3] !== props$1 || $[4] !== t3 || $[5] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			tabIndex: t3,
-			...props$1,
+	const t3 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$2);
+	let t4;
+	if ($[2] !== merged || $[3] !== props$2 || $[4] !== scrollStop || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			...scrollStop,
+			...props$2,
 			ref: merged,
-			...t4
+			...t3
 		});
 		$[2] = merged;
-		$[3] = props$1;
-		$[4] = t3;
-		$[5] = t4;
-		$[6] = t5;
-	} else t5 = $[6];
-	return t5;
+		$[3] = props$2;
+		$[4] = scrollStop;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
 }
 /**
 * The panel itself, and the scrim behind it. Everything the sheet shows goes
@@ -117,7 +122,7 @@ function SheetBody(t0) {
 * over it, and React Aria's popovers and menus draw above both.
 */
 function SheetContent(t0) {
-	const $ = c(32);
+	const $ = c(34);
 	let children;
 	let className;
 	let container;
@@ -125,12 +130,12 @@ function SheetContent(t0) {
 	let isKeyboardDismissDisabled;
 	let isOpen;
 	let onOpenChange;
-	let props$2;
+	let props$1;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$2} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -139,7 +144,7 @@ function SheetContent(t0) {
 		$[5] = isKeyboardDismissDisabled;
 		$[6] = isOpen;
 		$[7] = onOpenChange;
-		$[8] = props$2;
+		$[8] = props$1;
 		$[9] = ref;
 		$[10] = style;
 		$[11] = t1;
@@ -151,57 +156,62 @@ function SheetContent(t0) {
 		isKeyboardDismissDisabled = $[5];
 		isOpen = $[6];
 		onOpenChange = $[7];
-		props$2 = $[8];
+		props$1 = $[8];
 		ref = $[9];
 		style = $[10];
 		t1 = $[11];
 	}
 	const isDismissable = t1 === void 0 ? true : t1;
+	const overModal = useContext(InsideModalContext);
 	let t2;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = props(overlay.scrim);
-		$[12] = t2;
-	} else t2 = $[12];
+	if ($[12] !== overModal) {
+		t2 = props(overlay.scrim, overModal && overlay.scrimOverModal);
+		$[12] = overModal;
+		$[13] = t2;
+	} else t2 = $[13];
 	let t3;
-	if ($[13] !== className || $[14] !== style) {
+	if ($[14] !== className || $[15] !== 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
 		});
-		$[13] = className;
-		$[14] = style;
-		$[15] = t3;
-	} else t3 = $[15];
+		$[14] = className;
+		$[15] = style;
+		$[16] = t3;
+	} else t3 = $[16];
 	let t4;
-	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = props(overlay.modalDialog);
-		$[16] = t4;
-	} else t4 = $[16];
+		$[17] = t4;
+	} else t4 = $[17];
 	let t5;
-	if ($[17] !== children || $[18] !== props$2) {
-		t5 = /* @__PURE__ */ jsx(Dialog, {
-			...props$2,
-			...t4,
-			children
+	if ($[18] !== children || $[19] !== props$1) {
+		t5 = /* @__PURE__ */ jsx(InsideModalContext, {
+			value: true,
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...props$1,
+				...t4,
+				children
+			})
 		});
-		$[17] = children;
-		$[18] = props$2;
-		$[19] = t5;
-	} else t5 = $[19];
+		$[18] = children;
+		$[19] = props$1;
+		$[20] = t5;
+	} else t5 = $[20];
 	let t6;
-	if ($[20] !== ref || $[21] !== t3 || $[22] !== t5) {
+	if ($[21] !== ref || $[22] !== t3 || $[23] !== t5) {
 		t6 = /* @__PURE__ */ jsx(Modal, {
 			ref,
 			...t3,
 			children: t5
 		});
-		$[20] = ref;
-		$[21] = t3;
-		$[22] = t5;
-		$[23] = t6;
-	} else t6 = $[23];
+		$[21] = ref;
+		$[22] = t3;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
 	let t7;
-	if ($[24] !== container || $[25] !== defaultOpen || $[26] !== isDismissable || $[27] !== isKeyboardDismissDisabled || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t6) {
+	if ($[25] !== container || $[26] !== defaultOpen || $[27] !== isDismissable || $[28] !== isKeyboardDismissDisabled || $[29] !== isOpen || $[30] !== onOpenChange || $[31] !== t2 || $[32] !== t6) {
 		t7 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
 			defaultOpen,
 			isDismissable,
@@ -212,15 +222,16 @@ function SheetContent(t0) {
 			...t2,
 			children: t6
 		}) });
-		$[24] = container;
-		$[25] = defaultOpen;
-		$[26] = isDismissable;
-		$[27] = isKeyboardDismissDisabled;
-		$[28] = isOpen;
-		$[29] = onOpenChange;
-		$[30] = t6;
-		$[31] = t7;
-	} else t7 = $[31];
+		$[25] = container;
+		$[26] = defaultOpen;
+		$[27] = isDismissable;
+		$[28] = isKeyboardDismissDisabled;
+		$[29] = isOpen;
+		$[30] = onOpenChange;
+		$[31] = t2;
+		$[32] = t6;
+		$[33] = t7;
+	} else t7 = $[33];
 	return t7;
 }
 /**

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","useHoldBottomEdge","useScrollable","OverlayScope","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 { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\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, 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 *\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 sheet is read\n * over it, and React Aria's popovers and menus draw above both.\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 <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)}>\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    </OverlayScope>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\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    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak 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 xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp 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 xeuugli xj0a0fe\"\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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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useContext","useMemo","useRef","Dialog","DialogTrigger","Heading","HeadingContext","Modal","ModalOverlay","useSlottedContext","useHoldBottomEdge","useScrollStop","OverlayScope","InsideModalContext","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kHjlTd","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","title","scrollStop","label","id","undefined","t2","merged","t3","modalBodyRing","t4","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","overModal","scrim","scrimOverModal","Symbol","for","modalDialog","t5","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 { useContext, useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, HeadingContext, Modal, ModalOverlay, 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// 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    kHjlTd: \"xj0a0fe\",\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 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} {...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 *\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 sheet is read\n * over it, and React Aria's popovers and menus draw above both.\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  const overModal = useContext(InsideModalContext);\n  return <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)}>\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          <InsideModalContext value>\n            <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n              {children}\n            </Dialog>\n          </InsideModalContext>\n        </Modal>\n      </ModalOverlay>\n    </OverlayScope>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\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    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak 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 xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp 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 xeuugli xj0a0fe\"\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/dist/components/snackbar/index.d.ts

@@ -22,7 +22,7 @@ type SnackbarOptions = {
   /**
    * Run when the snackbar closes, however it was closed: by its timer, its
    * action or close button, `close`, `clear`, or a newer message added in its
-   * place.
+   * place. It runs as the snackbar starts to fade out, not once it has gone.
    */
   onClose?: () => void;
   /**
@@ -43,6 +43,9 @@ type SnackbarOptions = {
    * action than any timer allows. The timer is paused while the region is
    * hovered or focused, so a message never expires while it is being read.
    *
+   * A timer shorter than four seconds, the least Material Design allows, is
+   * lengthened to four, since a message gone sooner cannot be read.
+   *
    * `0` is the page's indefinite length: the snackbar stays until something
    * closes it. Give one of those an action or `showCloseButton`, or there is no
    * way to be rid of it.