@kanso-labs/kanso-ui 0.8.0 → 0.8.2

package/dist/components/separator/index.js

@@ -1,4 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "@base-ui/react/separator";
 //#region src/components/separator/index.tsx
@@ -6,6 +7,7 @@ const styles = {
 	base: {
 		kWkggS: "x1l12bh",
 		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
 		kmuXW: "x2lah0s",
 		kogj98: "x1ghz6dp",
 		$$css: true
@@ -25,7 +27,7 @@ function Separator$1({ orientation = "horizontal", ...props$1 }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		orientation,
 		...props$1,
-		...props(styles.base, styles[orientation])
+		...mergeStatefulStyles(props(styles.base, styles[orientation]), props$1)
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as BaseUISeparatorProps } from '@base-ui/react/separator';\nimport { Separator as BaseUISeparator } from '@base-ui/react/separator';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\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//\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.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\ntype SeparatorProps = Omit<BaseUISeparatorProps, 'orientation'> & {\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.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\nfunction Separator({\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) {\n  return <BaseUISeparator orientation={orientation} {...props} {...stylex.props(styles.base, styles[orientation])} />;\n}\nexport type { SeparatorProps };\nexport default Separator;"],"mappings":";;;;AAoBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AASA,SAAS,YAAU,EACjB,cAAc,cACd,GAAG,WACc;CACjB,OAAO,oBAAC,WAAD;EAA8B;EAAa,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,YAAY;CAAE,CAAA;AAClH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import type { SeparatorProps as BaseUISeparatorProps } from '@base-ui/react/separator';\nimport { Separator as BaseUISeparator } from '@base-ui/react/separator';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors } from '../../tokens/design.tokens.stylex';\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//\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.\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    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\ntype SeparatorProps = Omit<BaseUISeparatorProps, 'orientation'> & {\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.\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\nfunction Separator({\n  orientation = 'horizontal',\n  ...props\n}: SeparatorProps) {\n  return <BaseUISeparator orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[orientation]), props)} />;\n}\nexport type { SeparatorProps };\nexport default Separator;"],"mappings":";;;;;AAqBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AASA,SAAS,YAAU,EACjB,cAAc,cACd,GAAG,WACc;CACjB,OAAO,oBAAC,WAAD;EAA8B;EAAa,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,YAAY,GAAG,OAAK;CAAE,CAAA;AAC9I"}

package/dist/components/sheet/index.js

@@ -1,4 +1,5 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -15,6 +16,7 @@ const styles = {
 		$$css: true
 	},
 	body: {
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
 		kzQI83: "x1iyjqo2",
@@ -33,6 +35,7 @@ const styles = {
 		kfmiAY: "x1a37zkv xys6ro8",
 		krdFHd: "x6xk272 x9t1vth",
 		kGVxlE: "x19efjv6",
+		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		k1xSpc: "x78zum5",
 		kXwgrk: "xdt5ytf",
@@ -49,6 +52,7 @@ const styles = {
 		kLZC3w: "x12smttz",
 		kPef9Z: "x13fuv20",
 		kEafiO: "x178xt8z",
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kOIVth: "x126z3so",
@@ -62,6 +66,7 @@ const styles = {
 		kL6WhQ: "x1j6faob",
 		kfdmCh: "x1q0q8m5",
 		kt9PQ7: "xso031l",
+		kB7OPa: "x9f619",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kOIVth: "x1gka490",
@@ -79,6 +84,7 @@ const styles = {
 		$$css: true
 	},
 	title: {
+		kB7OPa: "x9f619",
 		kMwMTN: "x139gbkf",
 		kMv6JI: "xdy5w5q",
 		kGuDYH: "xete2z3",
@@ -111,17 +117,24 @@ function Sheet({ children, size = "md", ...props }) {
 	});
 }
 function SheetBody(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li"
-		});
+		t0 = mergeStyles({ className: "x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Closes the sheet when pressed. Carries no styling of its own, so give it
@@ -144,82 +157,83 @@ function SheetClose(props) {
 * page while this is portalled out to the end of the body.
 */
 function SheetContent(t0) {
-	const $ = c(14);
-	let children;
-	let container;
-	let props$1;
-	if ($[0] !== t0) {
-		({children, container, ...props$1} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = container;
-		$[3] = props$1;
-	} else {
-		children = $[1];
-		container = $[2];
-		props$1 = $[3];
-	}
+	const $ = c(11);
+	const { children, container, ...props$1 } = t0;
 	const size = useContext(SheetSizeContext);
-	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4" });
-		$[4] = t1;
-	} else t1 = $[4];
+	const t1 = Dialog;
 	let t2;
-	if ($[5] !== size) {
-		t2 = props(styles.content, styles[size]);
-		$[5] = size;
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== children || $[8] !== props$1 || $[9] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Dialog.Popup, {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4" });
+		$[0] = t2;
+	} else t2 = $[0];
+	const t3 = Dialog;
+	const t4 = mergeStatefulStyles(props(styles.content, styles[size]), props$1);
+	let t5;
+	if ($[1] !== children || $[2] !== props$1 || $[3] !== t3.Popup || $[4] !== t4) {
+		t5 = /* @__PURE__ */ jsx(t3.Popup, {
 			...props$1,
-			...t2,
+			...t4,
 			children
 		});
-		$[7] = children;
-		$[8] = props$1;
-		$[9] = t2;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== container || $[12] !== t3) {
-		t4 = /* @__PURE__ */ jsxs(Dialog.Portal, {
+		$[1] = children;
+		$[2] = props$1;
+		$[3] = t3.Popup;
+		$[4] = t4;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] !== container || $[7] !== t1.Portal || $[8] !== t2 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(t1.Portal, {
 			container,
-			children: [t1, t3]
+			children: [t2, t5]
 		});
-		$[11] = container;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
-	return t4;
+		$[6] = container;
+		$[7] = t1.Portal;
+		$[8] = t2;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 }
 function SheetFooter(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz"
-		});
+		t0 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function SheetHeader(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx("div", {
-			...props,
-			className: "x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz"
-		});
+		t0 = mergeStyles({ className: "x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx("div", {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Names the sheet. Rendered through Base UI's title part, which is what
@@ -227,17 +241,24 @@ function SheetHeader(props) {
 * itself as an unnamed dialog.
 */
 function SheetTitle(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Dialog.Title, {
-			...props,
-			className: "x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Dialog.Title, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 /**
 * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\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 M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\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 Base UI's:\n * pass `open` 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.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\" />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...stylex.props(styles.content, styles[size])}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x12smttz x13fuv20 x178xt8z x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\" />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} className=\"x6s0dn4 x1j6faob x1q0q8m5 xso031l x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\" />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, 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: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} className=\"x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\" />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["children","container"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { DialogCloseProps as BaseUIDialogCloseProps, DialogPopupProps as BaseUIDialogPopupProps, DialogPortalProps as BaseUIDialogPortalProps, DialogRootProps as BaseUIDialogRootProps, DialogTitleProps as BaseUIDialogTitleProps, DialogTriggerProps as BaseUIDialogTriggerProps } from '@base-ui/react/dialog';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { Dialog as BaseUIDialog } from '@base-ui/react/dialog';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\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 M3's own pairing rather than two components,\n// and it is why nothing here takes a `side` prop — a sheet that stayed on the\n// right at 375px would be a drawer covering the whole screen.\n//\n// The two differ in three things and no more: which edges they are pinned to,\n// which two corners are rounded, and which axis they arrive along.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromBottom = \"x15b941j-B\";\nconst fadeIn = \"x18re5ia-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate. See the comment on `SheetContent` for why that is a design call\n// rather than a limit of StyleX.\nconst styles = {\n  backdrop: {\n    k44tkh: \"x1vhuh8u\",\n    kKVMdj: \"xqcmdr3\",\n    kyAemX: \"x1yujl0p\",\n    kWkggS: \"x1iqbvzf\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    kmVPX3: \"xgc26li\",\n    $$css: true\n  },\n  content: {\n    k44tkh: \"x1n1nwrg\",\n    kKVMdj: \"xu2fq7p x18ihq2d\",\n    kyAemX: \"x16dv9tl\",\n    kWkggS: \"x1vnz5z6\",\n    kT0f0o: \"xkducg2\",\n    kVL7Gh: \"xrzall9 xb0nsol\",\n    kfmiAY: \"x1a37zkv xys6ro8\",\n    krdFHd: \"x6xk272 x9t1vth\",\n    kGVxlE: \"x19efjv6\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    krVfgx: \"x1ey2m1c\",\n    k87sOh: \"x13vifvy xmpip4z\",\n    kt4wiu: \"xtijo5x\",\n    kLqNvP: \"xhi6v0a x1upgybz\",\n    kskxy: \"x7ab17h x1dexy1j\",\n    kVQacm: \"xb3r6kr\",\n    kVAEAm: \"xixxii4\",\n    $$css: true\n  },\n  footer: {\n    kLZC3w: \"x12smttz\",\n    kPef9Z: \"x13fuv20\",\n    kEafiO: \"x178xt8z\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x126z3so\",\n    kjj79g: \"x13a6bvl\",\n    k8WAf4: \"x1uvvd8r\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  header: {\n    kGNEyG: \"x6s0dn4\",\n    kL6WhQ: \"x1j6faob\",\n    kfdmCh: \"x1q0q8m5\",\n    kt9PQ7: \"xso031l\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"x2lah0s\",\n    kOIVth: \"x1gka490\",\n    kjj79g: \"x1qughib\",\n    k8WAf4: \"x1cmllll\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  md: {\n    kzqmXN: \"x1l2rt3b xwvxfow\",\n    $$css: true\n  },\n  sm: {\n    kzqmXN: \"x1m258z3 xwvxfow\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\n    kMv6JI: \"xdy5w5q\",\n    kGuDYH: \"xete2z3\",\n    k63SB2: \"x14ijtet\",\n    kb6lSQ: \"xug9e1u\",\n    kLWn49: \"x2divse\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\ntype SheetSize = 'md' | 'sm';\n\n// `size` is declared on the root, where a reader expects to set the shape of\n// the whole sheet, but it is `Sheet.Content` that has to apply it. One string\n// through context rather than making the call site repeat it on both.\nconst SheetSizeContext = createContext<SheetSize>('md');\n\n// `children` is narrowed to nodes. Base UI also accepts a function there, to\n// hand the sheet a payload passed by whichever trigger opened it, and that\n// form cannot be wrapped in a context provider without calling it first —\n// which would be doing Base UI's job with none of its state. Nothing in this\n// component needs the payload, so the narrower type says so rather than\n// leaving a signature that type-checks and then fails to render.\ntype SheetProps = Omit<BaseUIDialogRootProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.\n   * Ignored below the medium breakpoint, where the sheet is full width.\n   * @default 'md'\n   */\n  size?: SheetSize;\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 Base UI's:\n * pass `open` 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.Trigger`,\n * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,\n * `Sheet.Footer`, and `Sheet.Close`.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <BaseUIDialog.Root {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </BaseUIDialog.Root>;\n}\nfunction SheetBody(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xxj4525 x1odjw0f xgc26li\"\n  }, props)} />;\n}\n\n/**\n * Closes the sheet when pressed. Carries no styling of its own, so give it\n * the control it should be through `render` — an `IconButton` in the header,\n * a `Button` in the footer.\n */\nfunction SheetClose(props: BaseUIDialogCloseProps) {\n  return <BaseUIDialog.Close {...props} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the\n * page while this is portalled out to the end of the body.\n */\nfunction SheetContent({\n  children,\n  container,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <BaseUIDialog.Portal container={container}>\n      <BaseUIDialog.Backdrop className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\" />\n      <BaseUIDialog.Popup {...props} {...mergeStatefulStyles(stylex.props(styles.content, styles[size]), props)}>\n        {children}\n      </BaseUIDialog.Popup>\n    </BaseUIDialog.Portal>;\n}\nfunction SheetFooter(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x13a6bvl x1uvvd8r x790zyz\"\n  }, props)} />;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll x790zyz\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through Base UI's title part, 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: BaseUIDialogTitleProps) {\n  return <BaseUIDialog.Title {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the\n * control through `render`.\n */\nfunction SheetTrigger(props: BaseUIDialogTriggerProps) {\n  return <BaseUIDialog.Trigger {...props} />;\n}\nSheet.Body = SheetBody;\nSheet.Close = SheetClose;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\nSheet.Trigger = SheetTrigger;\ntype SheetCloseProps = BaseUIDialogCloseProps;\ntype SheetContentProps = BaseUIDialogPopupProps & {\n  /**\n   * Where to portal the panel and scrim. Defaults to the end of `<body>`,\n   * which is right for an app that sets its StyleX theme on `:root`. An app\n   * that scopes the theme to a subtree has to point this at an element inside\n   * it, or the sheet renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: BaseUIDialogPortalProps['container'];\n};\ntype SheetTitleProps = BaseUIDialogTitleProps;\ntype SheetTriggerProps = BaseUIDialogTriggerProps;\nexport type { SheetCloseProps, SheetContentProps, SheetProps, SheetSize, SheetTitleProps, SheetTriggerProps };\nexport default Sheet;"],"mappings":"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"}

package/dist/components/supporting-pane/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
@@ -16,77 +17,84 @@ import { c } from "react/compiler-runtime";
 * screen.
 */
 function SupportingPane(t0) {
-	const $ = c(19);
-	let main;
-	let props;
+	const $ = c(22);
 	let render;
-	let supporting;
-	if ($[0] !== t0) {
-		({main, render, supporting, ...props} = t0);
-		$[0] = t0;
-		$[1] = main;
-		$[2] = props;
-		$[3] = render;
-		$[4] = supporting;
-	} else {
-		main = $[1];
-		props = $[2];
-		render = $[3];
-		supporting = $[4];
-	}
 	let t1;
-	if ($[5] !== main) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "xeuugli",
-			children: main
-		});
-		$[5] = main;
-		$[6] = t1;
-	} else t1 = $[6];
 	let t2;
-	if ($[7] !== supporting) {
-		t2 = /* @__PURE__ */ jsx("div", {
-			className: "xeuugli",
-			children: supporting
-		});
-		$[7] = supporting;
-		$[8] = t2;
-	} else t2 = $[8];
 	let t3;
-	if ($[9] !== t1 || $[10] !== t2) {
-		t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] });
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = t3;
-	} else t3 = $[11];
 	let t4;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = { className: "xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb" };
-		$[12] = t4;
-	} else t4 = $[12];
 	let t5;
-	if ($[13] !== props || $[14] !== t3) {
-		t5 = {
-			...props,
-			children: t3,
-			...t4
-		};
-		$[13] = props;
-		$[14] = t3;
-		$[15] = t5;
-	} else t5 = $[15];
+	if ($[0] !== t0) {
+		const { main, render: t6, supporting, ...props } = t0;
+		render = t6;
+		t5 = useRender;
+		t4 = "div";
+		t1 = props;
+		let t7;
+		if ($[7] !== main) {
+			t7 = /* @__PURE__ */ jsx("div", {
+				className: "x9f619 xeuugli",
+				children: main
+			});
+			$[7] = main;
+			$[8] = t7;
+		} else t7 = $[8];
+		let t8;
+		if ($[9] !== supporting) {
+			t8 = /* @__PURE__ */ jsx("div", {
+				className: "x9f619 xeuugli",
+				children: supporting
+			});
+			$[9] = supporting;
+			$[10] = t8;
+		} else t8 = $[10];
+		if ($[11] !== t7 || $[12] !== t8) {
+			t2 = /* @__PURE__ */ jsxs(Fragment, { children: [t7, t8] });
+			$[11] = t7;
+			$[12] = t8;
+			$[13] = t2;
+		} else t2 = $[13];
+		t3 = mergeStyles({ className: "x9f619 xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb" }, props);
+		$[0] = t0;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = t5;
+	} else {
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+		t5 = $[6];
+	}
 	let t6;
-	if ($[16] !== render || $[17] !== t5) {
+	if ($[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
 		t6 = {
-			defaultTagName: "div",
-			props: t5,
+			...t1,
+			children: t2,
+			...t3
+		};
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== render || $[19] !== t4 || $[20] !== t6) {
+		t7 = {
+			defaultTagName: t4,
+			props: t6,
 			render
 		};
-		$[16] = render;
-		$[17] = t5;
-		$[18] = t6;
-	} else t6 = $[18];
-	return useRender(t6);
+		$[18] = render;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t5(t7);
 }
 //#endregion
 export { SupportingPane as default };

package/dist/components/supporting-pane/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["main","supporting"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material 3's canonical layouts. The supporting pane holds content\n// that only means anything next to the main pane — reviewer comments, related\n// items, a tool panel — which is what separates it from list-detail, where\n// the second pane stands on its own.\n//\n// M3 gives this layout three shapes across the breakpoints, and all three are\n// reachable in CSS because none of them depends on what the reader selected:\n// stacked at compact, an even split at medium, two thirds to one third from\n// expanded up. Stacking is M3's \"reflow\" strategy, where the supporting pane\n// moves under the main one rather than being dismissed. The spec's other\n// compact option is a bottom sheet, which is a different component's job —\n// reach for Sheet at the call site when the supporting content should be\n// summoned rather than scrolled to.\n//\n\ntype SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {\n  /** The primary content. Takes two thirds of the width from expanded up. */\n  main?: ReactNode;\n  /**\n   * Content that only means something beside `main`. Sits below it at compact,\n   * and beside it from medium up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material 3's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction SupportingPane({\n  main,\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"xeuugli\">{main}</div>\n          <div className=\"xeuugli\">{supporting}</div>\n        </>,\n      ...{\n        className: \"xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb\"\n      }\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAwB,CAAA,CAAA,MAAA,QAAA,YAAA,GAAA,SAAA;EAKF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,OAAA,EAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;EAAA,aAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA;EAMZ,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAW,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA;EACrC,KAAA,oBAAA,OAAA;GAAe,WAAA;GAAW,UAAA;EAAiB,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,QAAA,IAAA;EAFrC,KAAA,qBAAA,UAAA,EAAA,UAAA,CACN,IACA,EAA2C,EAAA,CAAA;EAC1C,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,OAAA,IAAA,2BAAA,GAAA;EACF,KAAA,EAAA,WACU,4CACb;EAAC,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,SAAA,EAAA,QAAA,IAAA;EARI,KAAA;GAAA,GACF;GAAK,UACE;GAGL,GACF;EAGL;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,IAAA;EAXc,KAAA;GAAA,gBACC;GAAK,OACd;GASN;EAEH;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbM,UAAU,EAahB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props","main","supporting"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { media, spacing } from '../../tokens/design.tokens.stylex';\n\n// One of Material 3's canonical layouts. The supporting pane holds content\n// that only means anything next to the main pane — reviewer comments, related\n// items, a tool panel — which is what separates it from list-detail, where\n// the second pane stands on its own.\n//\n// M3 gives this layout three shapes across the breakpoints, and all three are\n// reachable in CSS because none of them depends on what the reader selected:\n// stacked at compact, an even split at medium, two thirds to one third from\n// expanded up. Stacking is M3's \"reflow\" strategy, where the supporting pane\n// moves under the main one rather than being dismissed. The spec's other\n// compact option is a bottom sheet, which is a different component's job —\n// reach for Sheet at the call site when the supporting content should be\n// summoned rather than scrolled to.\n//\n\ntype SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {\n  /** The primary content. Takes two thirds of the width from expanded up. */\n  main?: ReactNode;\n  /**\n   * Content that only means something beside `main`. Sits below it at compact,\n   * and beside it from medium up.\n   */\n  supporting?: ReactNode;\n};\n\n/**\n * Material 3's supporting pane layout: a main pane and a companion that\n * reflows underneath it when there is no room beside it.\n *\n * Layout only — neither pane paints a surface or a border of its own, so what\n * goes in them is composed at the call site out of Cards, lists, or plain\n * content. `render` swaps the container's element, for a layout that should\n * be a `<main>` rather than a `<div>`.\n *\n * The panes are written to the DOM in the order they are shown, which is what\n * M3 asks of co-planar panes: focus order has to match the arrangement on\n * screen.\n */\nfunction SupportingPane({\n  main,\n  render,\n  supporting,\n  ...props\n}: SupportingPaneProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      children: <>\n          <div className=\"x9f619 xeuugli\">{main}</div>\n          <div className=\"x9f619 xeuugli\">{supporting}</div>\n        </>,\n      ...mergeStyles({\n        className: \"x9f619 xrvj5dj xj2l1yv x1mkdm3x xj1h9sb x1bg1yrb\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { SupportingPaneProps };\nexport default SupportingPane;"],"mappings":";;;;;;;;;;;;;;;;;;AA6CA,SAAA,eAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAwB,MAAA,EAAA,MAAA,QAAA,IAAA,YAAA,GAAA,UAAA;EAAA,SAAA;EAMfA,KAAA;EACW,KAAA;EAEXC,KAAA;EAAK,IAAA;EAAA,IAAA,EAAA,OAAA,MAAA;GAEJ,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkB,UAAA;GAAW,CAAA;GAAA,EAAA,KAAA;GAAA,EAAA,KAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA;EAAA,IAAA,EAAA,OAAA,YAAA;GAC5C,KAAA,oBAAA,OAAA;IAAe,WAAA;IAAkB,UAAA;GAAiB,CAAA;GAAA,EAAA,KAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;GAF5C,KAAA,qBAAA,UAAA,EAAA,UAAA,CACN,IACA,EAAkD,EAAA,CAAA;GACjD,EAAA,MAAA;GAAA,EAAA,MAAA;GAAA,EAAA,MAAA;EAAA,OAAA,KAAA,EAAA;EACF,KAAA,YAAY,EAAA,WACF,mDACb,GAAG,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,SAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;EAAA,KAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EARJ,KAAA;GAAA,GACFA;GAAK,UACE;GAGL,GACF;EAGL;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAXc,KAAA;GAAA,gBACC;GAAK,OACd;GASN;EAEH;EAAC,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAbMD,GAAU,EAahB;AAAC"}

package/dist/components/tabs/index.js

@@ -1,15 +1,8 @@
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/tabs/index.tsx
-function tabClassName(state) {
-	return {
-		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug" },
-		2: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa" },
-		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" },
-		3: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" }
-	}[!!state.active << 1 | !!state.disabled << 0].className;
-}
 /**
 * A tab strip and its panels. Selection is Base UI's `value`: pass `value`
 * with `onValueChange` to control it, or `defaultValue` to let it keep its
@@ -30,43 +23,72 @@ function Tabs$1(props) {
 	return t0;
 }
 function TabsList(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.List, {
-			...props,
-			className: "x78zum5 x14qo01y"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 x78zum5 x14qo01y" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.List, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function TabsPanel(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.Panel, {
-			...props,
-			className: "xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn"
-		});
+		t0 = mergeStatefulStyles({ className: "x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.Panel, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
 }
 function TabsTab(props) {
-	const $ = c(2);
+	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Tabs.Tab, {
-			...props,
-			className: tabClassName
-		});
+		t0 = mergeStatefulStyles(tabStyles, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
-	return t0;
+	let t1;
+	if ($[2] !== props || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Tabs.Tab, {
+			...props,
+			...t0
+		});
+		$[2] = props;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function tabStyles(state) {
+	return {
+		0: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1p2om7n xjbqb8w x1w5n3ug" },
+		2: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x1ypdohk x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 x1hei0q8 xp89om9 xscdzaa" },
+		1: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" },
+		3: { className: "x6s0dn4 x10w6t97 x1xdvaa9 xc342km x9f619 x3nfvp2 x2lah0s xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1qno0dh xs2xxs2 xpc4ca7 xjbqb8w x1xj74d8 x1h6gzvc" }
+	}[!!state.active << 1 | !!state.disabled << 0];
 }
 Tabs$1.List = TabsList;
 Tabs$1.Panel = TabsPanel;