@kanso-labs/kanso-ui 0.11.21 → 0.12.0

package/dist/components/separator/index.js

@@ -1,7 +1,6 @@
 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";
+import { useRender } from "../../render/useRender.js";
+import { mergeStyles } from "../../styles/merge.js";
 //#region src/components/separator/index.tsx
 const styles = {
 	base: {
@@ -23,14 +22,29 @@ const styles = {
 		$$css: true
 	}
 };
-function Separator$1({ orientation = "horizontal", ...props$1 }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		orientation,
-		...props$1,
-		...mergeStatefulStyles(props(styles.base, styles[orientation]), props$1)
+/**
+* A 1px rule between items. The orientation drives the accessibility tree as
+* well as which side the rule is drawn on: `aria-orientation` is spelled out
+* in both directions rather than leaving the horizontal case to the role's
+* implicit value.
+*
+* A styled element rather than a primitive from the behaviour library: a
+* separator has no behaviour, and the library's own would drop the
+* `aria-orientation` written here on its way to the DOM.
+*/
+function Separator({ orientation = "horizontal", render, ...props$1 }) {
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			"aria-orientation": orientation,
+			role: "separator",
+			...props$1,
+			...mergeStyles(props(styles.base, styles[orientation]), props$1)
+		},
+		render
 	});
 }
 //#endregion
-export { Separator$1 as default };
+export { Separator as default };
 
 //# sourceMappingURL=index.js.map

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 { 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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } 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 = RenderComponentProps<'div'> & {\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};\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: `aria-orientation` is spelled out\n * in both directions rather than leaving the horizontal case to the role's\n * implicit value.\n *\n * A styled element rather than a primitive from the behaviour library: a\n * separator has no behaviour, and the library's own would drop the\n * `aria-orientation` written here on its way to the DOM.\n */\nfunction Separator({\n  orientation = 'horizontal',\n  render,\n  ...props\n}: SeparatorProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      'aria-orientation': orientation,\n      role: 'separator',\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[orientation]), props)\n    },\n    render\n  });\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;;;;;;;;;;;AAoBA,SAAS,UAAU,EACjB,cAAc,cACd,QACA,GAAG,WACc;CACjB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,oBAAoB;GACpB,MAAM;GACN,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,YAAY,GAAG,OAAK;EACtE;EACA;CACF,CAAC;AACH"}

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

@@ -1,8 +1,8 @@
 import { HTMLAttributes, ReactNode } from "react";
-import { DialogCloseProps, DialogPopupProps, DialogPortalProps, DialogRootProps, DialogTitleProps, DialogTriggerProps } from "@base-ui/react/dialog";
+import { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from "react-aria-components";
 //#region src/components/sheet/index.d.ts
 type SheetSize = 'md' | 'sm';
-type SheetProps = Omit<DialogRootProps, 'children'> & {
+type SheetProps = Omit<DialogTriggerProps, 'children'> & {
   children?: ReactNode;
   /**
    * Panel width on the side-sheet presentation: `sm` 320px, `md` 400px.
@@ -13,52 +13,47 @@ type SheetProps = Omit<DialogRootProps, 'children'> & {
 };
 /**
  * A modal panel that arrives from the edge of the screen — a side sheet on a
- * wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:
- * pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it
+ * wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:
+ * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it
  * keep its own.
  *
  * Composed rather than configured by props, because a sheet's header, body,
- * and footer all take arbitrary content — the parts are `Sheet.Trigger`,
- * `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,
- * `Sheet.Footer`, and `Sheet.Close`.
+ * and footer all take arbitrary content — the parts are `Sheet.Content`,
+ * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A
+ * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one
+ * given `slot="close"` anywhere inside the content closes it; neither needs
+ * a part of its own.
  */
 declare function Sheet({ children, size, ...props }: SheetProps): import("react").JSX.Element;
 declare namespace Sheet {
   var Body: typeof SheetBody;
-  var Close: typeof SheetClose;
   var Content: typeof SheetContent;
   var Footer: typeof SheetFooter;
   var Header: typeof SheetHeader;
   var Title: typeof SheetTitle;
-  var Trigger: typeof SheetTrigger;
 }
 declare function SheetBody(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-/**
- * Closes the sheet when pressed. Carries no styling of its own, so give it
- * the control it should be through `render` — an `IconButton` in the header,
- * a `Button` in the footer.
- */
-declare function SheetClose(props: DialogCloseProps): import("react").JSX.Element;
 /**
  * The panel itself, and the scrim behind it. Everything the sheet shows goes
- * in here; `Sheet.Trigger` stays outside it, since the trigger lives in the
- * page while this is portalled out to the end of the body.
+ * in here; the trigger stays outside it, since the trigger lives in the page
+ * while this is portalled out to the end of the body.
+ *
+ * A press on the scrim closes the sheet unless `isDismissable` says
+ * otherwise — React Aria's own default is the reverse, and a sheet that
+ * ignores a tap outside it reads as stuck.
  */
-declare function SheetContent({ children, container, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetContent({ children, className, container, isDismissable, isKeyboardDismissDisabled, style, ...props }: SheetContentProps): import("react").JSX.Element;
 declare function SheetFooter(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 declare function SheetHeader(props: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
 /**
- * Names the sheet. Rendered through Base UI's title part, which is what
+ * Names the sheet. Rendered through React Aria's title slot, which is what
  * points the dialog's `aria-labelledby` at it — a sheet without one announces
  * itself as an unnamed dialog.
  */
-declare function SheetTitle(props: DialogTitleProps): import("react").JSX.Element;
-/**
- * Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the
- * control through `render`.
- */
-declare function SheetTrigger(props: DialogTriggerProps): import("react").JSX.Element;
-type SheetContentProps = DialogPopupProps & {
+declare function SheetTitle(props: SheetTitleProps): import("react").JSX.Element;
+type SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {
+  /** A function may compute the class from the panel's render state. */
+  className?: ClassNameOrFunction<ModalRenderProps>;
   /**
    * Where to portal the panel and scrim. Defaults to the end of `<body>`,
    * which is right for an app that sets its StyleX theme on `:root`. An app
@@ -66,8 +61,11 @@ type SheetContentProps = DialogPopupProps & {
    * it, or the sheet renders outside the theme and falls back to the tokens'
    * `prefers-color-scheme` default.
    */
-  container?: DialogPortalProps['container'];
+  container?: Element;
+  /** A function may compute the style from the panel's render state. */
+  style?: StyleOrFunction<ModalRenderProps>;
 };
+type SheetTitleProps = HeadingProps;
 //#endregion
-export { type SheetContentProps, type SheetProps, type SheetSize, Sheet as default };
+export { type SheetContentProps, type SheetProps, type SheetSize, type SheetTitleProps, Sheet as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/sheet/index.js

@@ -1,9 +1,9 @@
 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";
-import { Dialog } from "@base-ui/react/dialog";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from "react-aria-components";
 //#region src/components/sheet/index.tsx
 const styles = {
 	backdrop: {
@@ -48,6 +48,14 @@ const styles = {
 		kVAEAm: "xixxii4",
 		$$css: true
 	},
+	dialog: {
+		kZKoxP: "x5yr21d",
+		kB7OPa: "x9f619",
+		k1xSpc: "x78zum5",
+		kXwgrk: "xdt5ytf",
+		k3XXqK: "x1t137rt",
+		$$css: true
+	},
 	footer: {
 		kLZC3w: "x12smttz",
 		kPef9Z: "x13fuv20",
@@ -98,17 +106,19 @@ const styles = {
 const SheetSizeContext = createContext("md");
 /**
 * A modal panel that arrives from the edge of the screen — a side sheet on a
-* wide viewport, a bottom sheet on a narrow one. Open state is Base UI's:
-* pass `open` with `onOpenChange` to control it, or `defaultOpen` to let it
+* wide viewport, a bottom sheet on a narrow one. Open state is React Aria's:
+* pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it
 * keep its own.
 *
 * Composed rather than configured by props, because a sheet's header, body,
-* and footer all take arbitrary content — the parts are `Sheet.Trigger`,
-* `Sheet.Content`, `Sheet.Header`, `Sheet.Title`, `Sheet.Body`,
-* `Sheet.Footer`, and `Sheet.Close`.
+* and footer all take arbitrary content — the parts are `Sheet.Content`,
+* `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A
+* `Button` or `IconButton` placed directly inside `Sheet` opens it, and one
+* given `slot="close"` anywhere inside the content closes it; neither needs
+* a part of its own.
 */
 function Sheet({ children, size = "md", ...props }) {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
+	return /* @__PURE__ */ jsx(DialogTrigger, {
 		...props,
 		children: /* @__PURE__ */ jsx(SheetSizeContext, {
 			value: size,
@@ -137,63 +147,33 @@ function SheetBody(props) {
 	return t1;
 }
 /**
-* Closes the sheet when pressed. Carries no styling of its own, so give it
-* the control it should be through `render` — an `IconButton` in the header,
-* a `Button` in the footer.
-*/
-function SheetClose(props) {
-	const $ = c(2);
-	let t0;
-	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Dialog.Close, { ...props });
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
-/**
 * The panel itself, and the scrim behind it. Everything the sheet shows goes
-* in here; `Sheet.Trigger` stays outside it, since the trigger lives in the
-* page while this is portalled out to the end of the body.
+* in here; the trigger stays outside it, since the trigger lives in the page
+* while this is portalled out to the end of the body.
+*
+* A press on the scrim closes the sheet unless `isDismissable` says
+* otherwise — React Aria's own default is the reverse, and a sheet that
+* ignores a tap outside it reads as stuck.
 */
-function SheetContent(t0) {
-	const $ = c(11);
-	const { children, container, ...props$1 } = t0;
+function SheetContent({ children, className, container, isDismissable = true, isKeyboardDismissDisabled, style, ...props$1 }) {
 	const size = useContext(SheetSizeContext);
-	const t1 = Dialog;
-	let t2;
-	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,
-			...t4,
-			children
-		});
-		$[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: [t2, t5]
-		});
-		$[6] = container;
-		$[7] = t1.Portal;
-		$[8] = t2;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	return t6;
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		isDismissable,
+		isKeyboardDismissDisabled,
+		UNSTABLE_portalContainer: container,
+		className: "x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4",
+		children: /* @__PURE__ */ jsx(Modal, {
+			...mergeStatefulStyles(props(styles.content, styles[size]), {
+				className,
+				style
+			}),
+			children: /* @__PURE__ */ jsx(Dialog, {
+				...props$1,
+				className: "x5yr21d x9f619 x78zum5 xdt5ytf x1t137rt",
+				children
+			})
+		})
+	});
 }
 function SheetFooter(props) {
 	const $ = c(5);
@@ -236,7 +216,7 @@ function SheetHeader(props) {
 	return t1;
 }
 /**
-* Names the sheet. Rendered through Base UI's title part, which is what
+* Names the sheet. Rendered through React Aria's title slot, which is what
 * points the dialog's `aria-labelledby` at it — a sheet without one announces
 * itself as an unnamed dialog.
 */
@@ -244,13 +224,14 @@ function SheetTitle(props) {
 	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = mergeStatefulStyles({ className: "x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp" }, props);
+		t0 = mergeStyles({ className: "x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
 	if ($[2] !== props || $[3] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Dialog.Title, {
+		t1 = /* @__PURE__ */ jsx(Heading, {
+			slot: "title",
 			...props,
 			...t0
 		});
@@ -260,27 +241,11 @@ function SheetTitle(props) {
 	} else t1 = $[4];
 	return t1;
 }
-/**
-* Opens the sheet when pressed. Unstyled like `Sheet.Close`, so pass the
-* control through `render`.
-*/
-function SheetTrigger(props) {
-	const $ = c(2);
-	let t0;
-	if ($[0] !== props) {
-		t0 = /* @__PURE__ */ jsx(Dialog.Trigger, { ...props });
-		$[0] = props;
-		$[1] = t0;
-	} else t0 = $[1];
-	return t0;
-}
 Sheet.Body = SheetBody;
-Sheet.Close = SheetClose;
 Sheet.Content = SheetContent;
 Sheet.Footer = SheetFooter;
 Sheet.Header = SheetHeader;
 Sheet.Title = SheetTitle;
-Sheet.Trigger = SheetTrigger;
 //#endregion
 export { Sheet as default };
 

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 { 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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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\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: 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: `backdrop` on\n// the scrim, `content` and a size on the panel, `dialog` on the element that\n// carries the role.\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  dialog: {\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    k3XXqK: \"x1t137rt\",\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');\ntype SheetProps = Omit<DialogTriggerProps, '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 React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n */\nfunction Sheet({\n  children,\n  size = 'md',\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>\n      <SheetSizeContext value={size}>{children}</SheetSizeContext>\n    </DialogTrigger>;\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 * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  style,\n  ...props\n}: SheetContentProps) {\n  const size = useContext(SheetSizeContext);\n  return <ModalOverlay isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} className=\"x1vhuh8u xqcmdr3 x1yujl0p x1iqbvzf x10a8y8t xixxii4\">\n      <Modal {...mergeStatefulStyles(stylex.props(styles.content, styles[size]), {\n      className,\n      style\n    })}>\n        <Dialog {...props} className=\"x5yr21d x9f619 x78zum5 xdt5ytf x1t137rt\">\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\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 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: SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x139gbkf xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's dismissal settings and the panel's\n// styling. A call site has no reason to know there are three elements:\n// `className` and `style` reach the panel, which is the one worth restyling\n// and positioning, and everything else lands on the dialog.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'isDismissable' | 'isKeyboardDismissDisabled'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the 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?: Element;\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, SheetSize, SheetTitleProps };\nexport default Sheet;"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 //#region src/components/stack/index.d.ts
 type StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
 type StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';
@@ -41,7 +41,7 @@ type StackProps = {
    * @default false
    */
   wrap?: boolean;
-} & useRender.ComponentProps<'div'>;
+} & RenderComponentProps<'div'>;
 /**
  * A row or a column of children with one gap between them, taken from the
  * spacing scale.

package/dist/components/stack/index.js

@@ -1,6 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { useRender } from "../../render/useRender.js";
 import { mergeStyles } from "../../styles/merge.js";
-import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/index.tsx
 const alignments = {
 	baseline: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Badge or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & useRender.ComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":";;;;AAUA,MAAM,aAAa;CACjB,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAM,OAAO;CACX,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AAwDA,SAAS,MAAM,EACb,OACA,YAAY,UACZ,MAAM,MACN,SACA,QACA,OAAO,OACP,GAAG,WACU;CACb,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,YAAY,KAAK,MAAM,UAAU,KAAA,KAAa,WAAW,QAAQ,YAAY,KAAA,KAAa,eAAe,UAAU,QAAQ,OAAO,IAAI,GAAG,OAAK;EAChM;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/stack/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Short names rather than the CSS values they map to, so a call site reads\n// `align=\"start\"` instead of `align=\"flex-start\"`. A lookup is unavoidable\n// either way — `alignItems` takes `flex-start` and `justifyContent` takes\n// `space-between`, neither of which is a word anyone wants in a prop.\nconst alignments = {\n  baseline: {\n    kGNEyG: \"x1pha0wt\",\n    $$css: true\n  },\n  center: {\n    kGNEyG: \"x6s0dn4\",\n    $$css: true\n  },\n  end: {\n    kGNEyG: \"xuk3077\",\n    $$css: true\n  },\n  start: {\n    kGNEyG: \"x1cy8zhl\",\n    $$css: true\n  },\n  stretch: {\n    kGNEyG: \"x1qjc9v5\",\n    $$css: true\n  }\n};\n\n// One key per step of the spacing scale, named exactly as the token group\n// names it, so `gaps[gap]` indexes straight off the prop with no lookup table\n// to keep in sync — the same arrangement Text's type scale uses.\n//\n// `none` is the one key with no token behind it, and deliberately so: zero is\n// the absence of a spacing decision rather than a step of the scale, so there\n// is nothing for the scale to name. It exists because a stack that only wants\n// the direction and the alignment is otherwise a plain flex container written\n// out by hand.\nconst gaps = {\n  lg: {\n    kOIVth: \"xxj4525\",\n    $$css: true\n  },\n  md: {\n    kOIVth: \"x1gka490\",\n    $$css: true\n  },\n  none: {\n    kOIVth: \"xxhr3t\",\n    $$css: true\n  },\n  sm: {\n    kOIVth: \"x126z3so\",\n    $$css: true\n  },\n  xl: {\n    kOIVth: \"xj2l1yv\",\n    $$css: true\n  },\n  xs: {\n    kOIVth: \"xzoy561\",\n    $$css: true\n  },\n  xxl: {\n    kOIVth: \"xghv2kt\",\n    $$css: true\n  },\n  xxs: {\n    kOIVth: \"x14qo01y\",\n    $$css: true\n  },\n  xxxl: {\n    kOIVth: \"xvm9ira\",\n    $$css: true\n  }\n};\nconst justifications = {\n  around: {\n    kjj79g: \"x1l1ennw\",\n    $$css: true\n  },\n  between: {\n    kjj79g: \"x1qughib\",\n    $$css: true\n  },\n  center: {\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  end: {\n    kjj79g: \"x13a6bvl\",\n    $$css: true\n  },\n  start: {\n    kjj79g: \"x1nhvcw1\",\n    $$css: true\n  }\n};\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    $$css: true\n  },\n  column: {\n    kXwgrk: \"xdt5ytf\",\n    $$css: true\n  },\n  row: {\n    kXwgrk: \"x1q0g3np\",\n    $$css: true\n  },\n  wrap: {\n    kwnvtZ: \"x1a02dak\",\n    $$css: true\n  }\n};\ntype StackAlign = 'baseline' | 'center' | 'end' | 'start' | 'stretch';\ntype StackGap = 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs' | 'xxxl';\ntype StackJustify = 'around' | 'between' | 'center' | 'end' | 'start';\ntype StackProps = {\n  /**\n   * How the children line up across the stack: down the inline axis of a\n   * column, down the block axis of a row. Left unset, they stretch, which is\n   * what makes every card in a column the same width.\n   *\n   * `start` is what an inline-sized child needs in a column — a Badge or a\n   * Chip spans the whole width otherwise.\n   */\n  align?: StackAlign;\n  /**\n   * Which way the children run.\n   * @default 'column'\n   */\n  direction?: 'column' | 'row';\n  /**\n   * The space between children, as a step of the spacing scale. `none` closes\n   * it entirely.\n   *\n   * Worth setting. The default is a middle step, and how much air a group of\n   * things wants is the one thing a stack cannot work out for itself.\n   * @default 'md'\n   */\n  gap?: StackGap;\n  /**\n   * How leftover space is distributed along the stack. Left unset, the\n   * children sit at the start and the space collects after them.\n   *\n   * `between` is the one that puts a headline at one end of a row and its\n   * actions at the other.\n   */\n  justify?: StackJustify;\n  /**\n   * Lets a row wrap onto further lines rather than overflowing. Has no effect\n   * on a column, which has as many lines as it has children.\n   * @default false\n   */\n  wrap?: boolean;\n} & RenderComponentProps<'div'>;\n\n/**\n * A row or a column of children with one gap between them, taken from the\n * spacing scale.\n *\n * Layout only — it paints no surface and wraps no child, so each child is a\n * flex item exactly as it was written. It is the answer to spacing a group of\n * things, which is why no component here carries a margin of its own: the\n * space between two things belongs to whatever holds both of them.\n *\n * `render` swaps the element, for a stack that should be a `<ul>`, a `<nav>`,\n * or a `<section>` rather than a `<div>`.\n */\nfunction Stack({\n  align,\n  direction = 'column',\n  gap = 'md',\n  justify,\n  render,\n  wrap = false,\n  ...props\n}: StackProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.base, styles[direction], gaps[gap], align !== undefined && alignments[align], justify !== undefined && justifications[justify], wrap && styles.wrap), props)\n    },\n    render\n  });\n}\nexport type { StackAlign, StackGap, StackJustify, StackProps };\nexport default Stack;"],"mappings":";;;;AAWA,MAAM,aAAa;CACjB,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAM,OAAO;CACX,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,iBAAiB;CACrB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;AACF;;;;;;;;;;;;;AAwDA,SAAS,MAAM,EACb,OACA,YAAY,UACZ,MAAM,MACN,SACA,QACA,OAAO,OACP,GAAG,WACU;CACb,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,MAAM,OAAO,YAAY,KAAK,MAAM,UAAU,KAAA,KAAa,WAAW,QAAQ,YAAY,KAAA,KAAa,eAAe,UAAU,QAAQ,OAAO,IAAI,GAAG,OAAK;EAChM;EACA;CACF,CAAC;AACH"}

package/dist/components/supporting-pane/index.d.ts

@@ -1,7 +1,7 @@
-import { useRender } from "@base-ui/react/use-render";
+import { RenderComponentProps } from "../../render/useRender.js";
 import { ReactNode } from "react";
 //#region src/components/supporting-pane/index.d.ts
-type SupportingPaneProps = Omit<useRender.ComponentProps<'div'>, 'children'> & {
+type SupportingPaneProps = Omit<RenderComponentProps<'div'>, 'children'> & {
   /** The primary content. Takes two thirds of the width from expanded up. */
   main?: ReactNode;
   /**

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

@@ -1,5 +1,5 @@
+import { useRender } from "../../render/useRender.js";
 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";
 //#region src/components/supporting-pane/index.tsx

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","names":["useRender","props","main","supporting"],"sources":["../../../src/components/supporting-pane/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\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<RenderComponentProps<'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":";;;;;;;;;;;;;;;;;;AA8CA,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.d.ts

@@ -1,15 +1,20 @@
-import { TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "@base-ui/react/tabs";
+import { ReactNode } from "react";
+import { TabListProps, TabPanelProps, TabProps, TabsProps } from "react-aria-components";
 //#region src/components/tabs/index.d.ts
+type TabsProps$1 = Omit<TabsProps, 'children'> & {
+  children?: ReactNode;
+};
 /**
- * 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
- * own.
+ * A tab strip and its panels. Selection is React Aria's `selectedKey`: pass
+ * it with `onSelectionChange` to control it, or `defaultSelectedKey` to let
+ * it keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it controls through
+ * a shared `id`, and a strip may stand alone without panels.
  *
  * Composed rather than configured by props, because the number of tabs and
  * what each panel holds are the call site's to decide — the parts are
  * `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`.
  */
-declare function Tabs$1(props: TabsRootProps): import("react").JSX.Element;
+declare function Tabs$1({ children, ...props }: TabsProps$1): import("react").JSX.Element;
 declare namespace Tabs$1 {
   var List: typeof TabsList;
   var Panel: typeof TabsPanel;
@@ -17,8 +22,10 @@ declare namespace Tabs$1 {
 }
 declare function TabsList(props: TabsListProps): import("react").JSX.Element;
 declare function TabsPanel(props: TabsPanelProps): import("react").JSX.Element;
-declare function TabsTab(props: TabsTabProps): import("react").JSX.Element;
-type TabsProps = TabsRootProps;
+declare function TabsTab({ render, ...props }: TabsTabProps): import("react").JSX.Element;
+type TabsListProps = TabListProps<object>;
+type TabsPanelProps = TabPanelProps;
+type TabsTabProps = TabProps;
 //#endregion
-export { type TabsProps, Tabs$1 as default };
+export { type TabsListProps, type TabsPanelProps, type TabsProps$1 as TabsProps, type TabsTabProps, Tabs$1 as default };
 //# sourceMappingURL=index.d.ts.map