@kanso-labs/kanso-ui 0.8.1 → 0.9.0

package/dist/components/code/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 import { c } from "react/compiler-runtime";
 //#region src/components/code/index.tsx
@@ -6,44 +7,55 @@ import { c } from "react/compiler-runtime";
 * renders a `<code>` and takes its scale from the text around it.
 */
 function Code(t0) {
-	const $ = c(9);
-	let props;
+	const $ = c(13);
 	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({render, ...props} = t0);
+		const { render: t5, ...props } = t0;
+		render = t5;
+		t4 = useRender;
+		t3 = "code";
+		t1 = props;
+		t2 = mergeStyles({ className: "x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe" }, props);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = render;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
 	} else {
-		props = $[1];
-		render = $[2];
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
 	}
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { className: "x139gbkf xbppi91 x1s8wshw xj0a0fe" };
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== props) {
-		t2 = {
-			...props,
-			...t1
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
 		};
-		$[4] = props;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== render || $[7] !== t2) {
-		t3 = {
-			defaultTagName: "code",
-			props: t2,
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
 			render
 		};
-		$[6] = render;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	return useRender(t3);
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Code as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...{\n        className: \"x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;AAsBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,CAAA,CAAA,QAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQH,KAAA,EAAA,WACU,oCACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/code/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 { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"x9f619 x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;;AAuBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAILA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,2CACb,GAAG,KAAK;EAAC,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;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}

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

@@ -0,0 +1,36 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/container/index.d.ts
+type ContainerProps = useRender.ComponentProps<'div'> & {
+  /**
+   * How wide the content may run before it stops growing. The container is
+   * centred in whatever space is left over.
+   *
+   * Worth setting. The default suits a page of mixed components; prose wants
+   * a measure in `ch`, since what makes a line hard to read is how many
+   * characters it holds rather than how many pixels.
+   * @default '960px'
+   */
+  maxInlineSize?: string;
+  /**
+   * Inline padding, which is what keeps the content off the edge of the
+   * window once it is narrower than the measure. `none` is for a container
+   * nested inside one that already has it.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none';
+};
+/**
+ * A centred measure for a page or a section of one: content grows to a width
+ * and stops, with the leftover space split evenly either side.
+ *
+ * Layout only — it paints no surface and gives its children no container of
+ * their own, which is what separates it from Card. It sets no gaps either, so
+ * reach for Stack inside it for the rhythm between sections.
+ *
+ * `render` swaps the element, for a container that should be a `<main>` or a
+ * `<section>` rather than a `<div>`.
+ */
+declare function Container({ maxInlineSize, padding, render, ...props }: ContainerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type ContainerProps, Container as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/container/index.js

@@ -0,0 +1,49 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/container/index.tsx
+const DEFAULT_MAX_INLINE_SIZE = "960px";
+const _temp = {
+	kB7OPa: "x9f619",
+	kzqmXN: "xh8yej3",
+	kUOVxO: "xvueqy4",
+	ks0D6T: "x13i5qev",
+	"$$css": true
+};
+const styles = {
+	paddingDefault: {
+		kg3NbH: "xg0ps1x",
+		$$css: true
+	},
+	paddingNone: {
+		kg3NbH: "xnjsko4",
+		$$css: true
+	},
+	root: (maxInlineSize) => [_temp, { "--x-maxInlineSize": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(maxInlineSize) }]
+};
+/**
+* A centred measure for a page or a section of one: content grows to a width
+* and stops, with the leftover space split evenly either side.
+*
+* Layout only — it paints no surface and gives its children no container of
+* their own, which is what separates it from Card. It sets no gaps either, so
+* reach for Stack inside it for the rhythm between sections.
+*
+* `render` swaps the element, for a container that should be a `<main>` or a
+* `<section>` rather than a `<div>`.
+*/
+function Container({ maxInlineSize = DEFAULT_MAX_INLINE_SIZE, padding = "default", render, ...props$1 }) {
+	const padded = padding === "none" ? styles.paddingNone : styles.paddingDefault;
+	return useRender({
+		defaultTagName: "div",
+		props: {
+			...props$1,
+			...mergeStyles(props(styles.root(maxInlineSize), padded), props$1)
+		},
+		render
+	});
+}
+//#endregion
+export { Container as default };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/container/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// The width fourteen of this library's own story files already centre their\n// page on, which is what makes it the default rather than a number picked\n// here. A measure is a property of the content: 960px suits a page of mixed\n// components, and prose wants something nearer 58ch, which is what the story\n// files that hold prose use. Say which one you mean rather than taking this.\nconst DEFAULT_MAX_INLINE_SIZE = '960px';\n\n// A dynamic style rather than a static one, for the same reason Feed's is:\n// the measure comes from the call site and StyleX compiles its classes ahead\n// of time, so the value is written to a custom property inline instead.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  kzqmXN: \"xh8yej3\",\n  kUOVxO: \"xvueqy4\",\n  ks0D6T: \"x13i5qev\",\n  \"$$css\": true\n};\nconst styles = {\n  paddingDefault: {\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  },\n  paddingNone: {\n    kg3NbH: \"xnjsko4\",\n    $$css: true\n  },\n  root: (maxInlineSize: string) => [_temp, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize)\n  }]\n};\ntype ContainerProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How wide the content may run before it stops growing. The container is\n   * centred in whatever space is left over.\n   *\n   * Worth setting. The default suits a page of mixed components; prose wants\n   * a measure in `ch`, since what makes a line hard to read is how many\n   * characters it holds rather than how many pixels.\n   * @default '960px'\n   */\n  maxInlineSize?: string;\n  /**\n   * Inline padding, which is what keeps the content off the edge of the\n   * window once it is narrower than the measure. `none` is for a container\n   * nested inside one that already has it.\n   * @default 'default'\n   */\n  padding?: 'default' | 'none';\n};\n\n/**\n * A centred measure for a page or a section of one: content grows to a width\n * and stops, with the leftover space split evenly either side.\n *\n * Layout only — it paints no surface and gives its children no container of\n * their own, which is what separates it from Card. It sets no gaps either, so\n * reach for Stack inside it for the rhythm between sections.\n *\n * `render` swaps the element, for a container that should be a `<main>` or a\n * `<section>` rather than a `<div>`.\n */\nfunction Container({\n  maxInlineSize = DEFAULT_MAX_INLINE_SIZE,\n  padding = 'default',\n  render,\n  ...props\n}: ContainerProps) {\n  const padded = padding === 'none' ? styles.paddingNone : styles.paddingDefault;\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      ...mergeStyles(stylex.props(styles.root(maxInlineSize), padded), props)\n    },\n    render\n  });\n}\nexport type { ContainerProps };\nexport default Container;"],"mappings":";;;;AAWA,MAAM,0BAA0B;AAKhC,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS;CACb,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,OAAO;CACT;CACA,OAAO,kBAA0B,CAAC,OAAO,EACvC,uBAAsB,QAAO,OAAO,QAAQ,WAAW,MAAM,OAAO,OAAO,OAAO,MAAM,KAAA,EAAA,CAAW,aAAa,EAClH,CAAC;AACH;;;;;;;;;;;;AAgCA,SAAS,UAAU,EACjB,gBAAgB,yBAChB,UAAU,WACV,QACA,GAAG,WACc;CACjB,MAAM,SAAS,YAAY,SAAS,OAAO,cAAc,OAAO;CAChE,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,GAAG,YAAY,MAAa,OAAO,KAAK,aAAa,GAAG,MAAM,GAAG,OAAK;EACxE;EACA;CACF,CAAC;AACH"}

package/dist/components/copy-field/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import Button from "../button/index.js";
 import Code from "../code/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,7 +35,7 @@ function CopyField({ copiedLabel = "Copied", copyLabel = "Copy", onCopied, value
 	}, [onCopied, value]);
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u",
+		...mergeStyles({ className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u" }, props),
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "x1iyjqo2 x1b35g6e xeuugli",

package/dist/components/copy-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} className=\"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u\">\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        {copied ? copiedLabel : copyLabel}\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":";;;;;AAYA,MAAM,kBAAkB;;;;;;AAgCxB,SAAS,UAAU,EACjB,cAAc,UACd,YAAY,QACZ,UACA,OACA,GAAG,SACc;CACjB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAIzE,sBAAsB;EACpB,aAAa,MAAM,OAAO;CAC5B,GAAG,CAAA,CAAE;CACL,MAAM,aAAa,kBAAkB;EACnC,MAAM,QAAQ,YAAY;GACxB,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;GAC3C,QAAQ;IAKN,UAAU,KAAK;IACf;GACF;GACA,UAAU,IAAI;GACd,WAAW,KAAK;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB;IAC/B,UAAU,KAAK;GACjB,GAAG,eAAe;EACpB;EACA,MAAW;CACb,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,OAAO,qBAAC,OAAD;EAAK,GAAI;EAAO,WAAU;EAA1B,UAAA;GACH,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,MAAD,EAAA,UAAO,MAAY,CAAA;GACf,CAAA;GACN,oBAAC,QAAD;IAAQ,SAAS;IAAY,MAAK;IAAK,SAAQ;IAC5C,UAAA,SAAS,cAAc;GAClB,CAAA;GAIR,oBAAC,UAAD;IAAQ,WAAU;IACf,UAAA,SAAS,cAAc;GAClB,CAAA;EACL;;AACT"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x9f619 x78zum5 x126z3so xmqoko8 x18fpw6u\"\n  }, props)}>\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        {copied ? copiedLabel : copyLabel}\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":";;;;;;AAaA,MAAM,kBAAkB;;;;;;AAgCxB,SAAS,UAAU,EACjB,cAAc,UACd,YAAY,QACZ,UACA,OACA,GAAG,SACc;CACjB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAIzE,sBAAsB;EACpB,aAAa,MAAM,OAAO;CAC5B,GAAG,CAAA,CAAE;CACL,MAAM,aAAa,kBAAkB;EACnC,MAAM,QAAQ,YAAY;GACxB,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;GAC3C,QAAQ;IAKN,UAAU,KAAK;IACf;GACF;GACA,UAAU,IAAI;GACd,WAAW,KAAK;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB;IAC/B,UAAU,KAAK;GACjB,GAAG,eAAe;EACpB;EACA,MAAW;CACb,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,OAAO,qBAAC,OAAD;EAAK,GAAI;EAAO,GAAI,YAAY,EACrC,WAAW,+FACb,GAAG,KAAK;EAFD,UAAA;GAGH,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,MAAD,EAAA,UAAO,MAAY,CAAA;GACf,CAAA;GACN,oBAAC,QAAD;IAAQ,SAAS;IAAY,MAAK;IAAK,SAAQ;IAC5C,UAAA,SAAS,cAAc;GAClB,CAAA;GAIR,oBAAC,UAAD;IAAQ,WAAU;IACf,UAAA,SAAS,cAAc;GAClB,CAAA;EACL;;AACT"}

package/dist/components/currency/index.js

@@ -1,7 +1,9 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/currency/index.tsx
 const styles = { base: {
+	kB7OPa: "x9f619",
 	kMv6JI: "xbppi91",
 	kcqcaj: "xss6m8b",
 	k63SB2: "x1bf3uqz",
@@ -32,7 +34,7 @@ function Currency({ currency = "USD", locale, render, sign = "auto", tone = "aut
 				locale,
 				sign
 			}),
-			...props(styles.base, tones[resolveTone(value, tone)])
+			...mergeStyles(props(styles.base, tones[resolveTone(value, tone)]), props$1)
 		},
 		render
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/currency/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\nconst styles = {\n  base: {\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  // stylex.props() spreads after `props` for the same reason Text does it: it\n  // wins over a consumer-supplied className rather than merging with one.\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...stylex.props(styles.base, tones[resolveTone(value, tone)])\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":";;;AAWA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AACA,MAAM,QAAQ;CACZ,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,aAAa;AA+BnB,SAAS,SAAS,EAChB,WAAW,OACX,QACA,QACA,OAAO,QACP,OAAO,QACP,OACA,GAAG,WACa;CAGhB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE;EAC9D;EACA;CACF,CAAC;AACH;AAMA,SAAS,eAAe,OAAe,SAIpC;CACD,OAAO,IAAI,KAAK,aAAa,QAAQ,QAAQ;EAC3C,UAAU,QAAQ;EAClB,aAAa,QAAQ;EACrB,OAAO;CACT,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,KAAI,SAAQ,KAAK,SAAS,cAAc,aAAa,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE;AAClG;AAKA,SAAS,YAAY,OAAe,MAAY;CAC9C,IAAI,SAAS,QACX,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/currency/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 { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Deliberately sets no font-size. The same value turns up at several sizes —\n// inside a list row, as a heading-scale figure, as a total — differing in\n// nothing else, so the size is the container's decision. What must never vary\n// is here: the mono face, tabular figures so a column of them lines up on the\n// decimal point, and the medium weight that separates a figure from the prose\n// around it.\nconst styles = {\n  base: {\n    kB7OPa: \"x9f619\",\n    kMv6JI: \"xbppi91\",\n    kcqcaj: \"xss6m8b\",\n    k63SB2: \"x1bf3uqz\",\n    $$css: true\n  }\n};\nconst tones = {\n  negative: {\n    kMwMTN: \"x12gp0t\",\n    $$css: true\n  },\n  neutral: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  positive: {\n    kMwMTN: \"x4no3js\",\n    $$css: true\n  }\n};\n\n// U+2212 MINUS SIGN, not the U+002D hyphen Intl actually emits. The hyphen is\n// a typographic stand-in: it is narrower than the plus it pairs with and does\n// not sit on the same optical centre as the digits, which shows up as a\n// wobbling column the moment amounts are stacked.\nconst MINUS_SIGN = '−';\ntype CurrencyProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {\n  /**\n   * ISO 4217 code for the currency to format in.\n   * @default 'USD'\n   */\n  currency?: string;\n  /**\n   * BCP 47 locale to format for. Defaults to the runtime's own locale, so an\n   * app that has not chosen one still formats the way its reader expects.\n   */\n  locale?: string;\n  /**\n   * When to show the sign. `auto` shows one only on negatives, `always` also\n   * prefixes positives with a plus, and `never` shows neither — which leaves\n   * colour as the only thing separating a credit from a debt, so reach for it\n   * only where the direction is already stated some other way.\n   * @default 'auto'\n   */\n  sign?: SignDisplay;\n  /**\n   * Which colour role to render in. `auto` follows the sign of `value`, with\n   * zero reading as neutral.\n   * @default 'auto'\n   */\n  tone?: Tone;\n  /** The amount, in the currency's major units. */\n  value: number;\n};\ntype SignDisplay = 'always' | 'auto' | 'never';\ntype Tone = 'auto' | 'negative' | 'neutral' | 'positive';\nfunction Currency({\n  currency = 'USD',\n  locale,\n  render,\n  sign = 'auto',\n  tone = 'auto',\n  value,\n  ...props\n}: CurrencyProps) {\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...props,\n      children: formatCurrency(value, {\n        currency,\n        locale,\n        sign\n      }),\n      ...mergeStyles(stylex.props(styles.base, tones[resolveTone(value, tone)]), props)\n    },\n    render\n  });\n}\n\n// formatToParts rather than a replace over the formatted string, so only the\n// sign is substituted. A blind replace would also hit a hyphen inside a\n// locale's currency name or grouping, and locales that wrap negatives in\n// parentheses have no minus to swap at all — both of which this leaves alone.\nfunction formatCurrency(value: number, options: {\n  currency: string;\n  locale: string | undefined;\n  sign: SignDisplay;\n}) {\n  return new Intl.NumberFormat(options.locale, {\n    currency: options.currency,\n    signDisplay: options.sign,\n    style: 'currency'\n  }).formatToParts(value).map(part => part.type === 'minusSign' ? MINUS_SIGN : part.value).join('');\n}\n\n// Zero is neither owed nor owing, so it takes the neutral role rather than\n// being forced into one of the two. Negative zero lands here too, which is\n// what a rounded-away debt should read as.\nfunction resolveTone(value: number, tone: Tone) {\n  if (tone !== 'auto') {\n    return tone;\n  }\n  if (value > 0) {\n    return 'positive';\n  }\n  if (value < 0) {\n    return 'negative';\n  }\n  return 'neutral';\n}\nexport type { CurrencyProps };\nexport default Currency;"],"mappings":";;;;AAYA,MAAM,SAAS,EACb,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF;AACA,MAAM,QAAQ;CACZ,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAMA,MAAM,aAAa;AA+BnB,SAAS,SAAS,EAChB,WAAW,OACX,QACA,QACA,OAAO,QACP,OAAO,QACP,OACA,GAAG,WACa;CAChB,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GACH,UAAU,eAAe,OAAO;IAC9B;IACA;IACA;GACF,CAAC;GACD,GAAG,YAAY,MAAa,OAAO,MAAM,MAAM,YAAY,OAAO,IAAI,EAAE,GAAG,OAAK;EAClF;EACA;CACF,CAAC;AACH;AAMA,SAAS,eAAe,OAAe,SAIpC;CACD,OAAO,IAAI,KAAK,aAAa,QAAQ,QAAQ;EAC3C,UAAU,QAAQ;EAClB,aAAa,QAAQ;EACrB,OAAO;CACT,CAAC,CAAC,CAAC,cAAc,KAAK,CAAC,CAAC,KAAI,SAAQ,KAAK,SAAS,cAAc,aAAa,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE;AAClG;AAKA,SAAS,YAAY,OAAe,MAAY;CAC9C,IAAI,SAAS,QACX,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,IAAI,QAAQ,GACV,OAAO;CAET,OAAO;AACT"}

package/dist/components/feed/index.js

@@ -1,8 +1,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/feed/index.tsx
 const DEFAULT_MIN_ITEM_WIDTH = "180px";
 const _temp = {
+	kB7OPa: "x9f619",
 	k1xSpc: "xrvj5dj",
 	kOIVth: "xj2l1yv",
 	kumcoG: "xqketvx",
@@ -28,7 +30,7 @@ function Feed({ minItemWidth = DEFAULT_MIN_ITEM_WIDTH, render, ...props$1 }) {
 		defaultTagName: "div",
 		props: {
 			...props$1,
-			...props(styles.root(minItemWidth))
+			...mergeStyles(props(styles.root(minItemWidth)), props$1)
 		},
 		render
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material 3's example minimum for an adaptive grid cell, and the only number\n// the spec puts on one. It is a floor rather than a recommendation: how narrow\n// a card can get before its contents stop making sense is a property of the\n// contents, which is why M3 leaves it a parameter rather than fixing it. Most\n// feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material 3's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// M3 describes the grid by its cell rather than by its columns: Compose spells\n// it `GridCells.Adaptive(minSize)`, meaning every column is at least that wide\n// and the grid fits as many as it can. `repeat(auto-fill, minmax(…, 1fr))` is\n// the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how M3 describes an adaptive grid — by its cell rather than by a column\n   * count per breakpoint.\n   *\n   * Worth setting. The default is the figure M3's own example uses, and it is\n   * a floor rather than advice: only the contents know how narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n};\n\n/**\n * Material 3's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // Spread last so the grid wins over a consumer-supplied className,\n      // matching Text, Badge and Card. The dynamic style carries the cell\n      // minimum as a custom property, so this also has to come after `props`\n      // for that value to survive.\n      ...stylex.props(styles.root(minItemWidth))\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;AAUA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA6BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAKH,GAAG,MAAa,OAAO,KAAK,YAAY,CAAC;EAC3C;EACA;CACF,CAAC;AACH"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/feed/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// Material 3's example minimum for an adaptive grid cell, and the only number\n// the spec puts on one. It is a floor rather than a recommendation: how narrow\n// a card can get before its contents stop making sense is a property of the\n// contents, which is why M3 leaves it a parameter rather than fixing it. Most\n// feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material 3's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// M3 describes the grid by its cell rather than by its columns: Compose spells\n// it `GridCells.Adaptive(minSize)`, meaning every column is at least that wide\n// and the grid fits as many as it can. `repeat(auto-fill, minmax(…, 1fr))` is\n// the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = useRender.ComponentProps<'div'> & {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how M3 describes an adaptive grid — by its cell rather than by a column\n   * count per breakpoint.\n   *\n   * Worth setting. The default is the figure M3's own example uses, and it is\n   * a floor rather than advice: only the contents know how narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n};\n\n/**\n * Material 3's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;AAWA,MAAM,yBAAyB;AAsB/B,MAAM,QAAQ;CACZ,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;AACX;AACA,MAAM,SAAS,EACb,OAAO,iBAAyB,CAAC,OAAO,EACtC,2BAA2B,4BAA4B,aAAY,YAAa,OAAO,4BAA4B,aAAY,WAAY,KAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA6BA,SAAS,KAAK,EACZ,eAAe,wBACf,QACA,GAAG,WACS;CACZ,OAAO,UAAU;EACf,gBAAgB;EAChB,OAAO;GACL,GAAG;GAIH,GAAG,YAAY,MAAa,OAAO,KAAK,YAAY,CAAC,GAAG,OAAK;EAC/D;EACA;CACF,CAAC;AACH"}

package/dist/components/icon-button/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "@base-ui/react/button";
 //#region src/components/icon-button/index.d.ts
-type IconButtonProps = ButtonProps & {
+type IconButtonProps = {
   /**
    * What the button does, in words. Required rather than optional: an icon
    * on its own has no accessible name, so without this the control announces
@@ -13,6 +13,23 @@ type IconButtonProps = ButtonProps & {
    * @default false
    */
   disableRipple?: boolean;
+  /**
+   * Whether the element `render` produces is a real `<button>`, which decides
+   * whether Base UI supplies the button role, keyboard activation and
+   * disabled semantics itself.
+   *
+   * Read off `render` when that is a plain element, so
+   * `render={<a href="…" />}` needs nothing here. Worth setting only when
+   * `render` is a component or a function, where the tag it will produce
+   * cannot be read ahead of time.
+   *
+   * An anchor rendered this way is announced as a button rather than as a
+   * link, since that is what Base UI's non-native mode applies. For a control
+   * that should be announced as the link it is, reach for `Link`, or `Card`
+   * with `render`, neither of which imposes button semantics.
+   * @default true
+   */
+  nativeButton?: boolean;
   /**
    * Control size: `xs` 32px, `md` 40px, `lg` 56px — the same heights `Button`
    * uses, so the two line up beside each other in a row.
@@ -25,8 +42,8 @@ type IconButtonProps = ButtonProps & {
    * @default 'standard'
    */
   variant?: 'filled' | 'standard' | 'tonal';
-};
-declare function IconButton({ children, disabled, disableRipple, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, variant, ...props }: IconButtonProps): import("react").JSX.Element;
+} & ButtonProps;
+declare function IconButton({ children, disabled, disableRipple, nativeButton, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size, variant, ...props }: IconButtonProps): import("react").JSX.Element;
 //#endregion
 export { type IconButtonProps, IconButton as default };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/icon-button/index.js

@@ -1,5 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
 import { useRipple } from "../../hooks/useRipple.js";
+import { rendersNativeButton } from "../../render/nativeButton.js";
 import { jsxs } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 //#region src/components/icon-button/index.tsx
@@ -8,6 +10,7 @@ const styles = {
 		kGNEyG: "x6s0dn4",
 		kaIpWk: "xtecew7 x3y1ksm",
 		kMzoRj: "xc342km",
+		kB7OPa: "x9f619",
 		kkrTdU: "x1s07b3s x1ypdohk",
 		k1xSpc: "x3nfvp2",
 		kmuXW: "x2lah0s",
@@ -18,6 +21,7 @@ const styles = {
 		kMeerF: "x1de99jn",
 		kmVPX3: "x1717udv",
 		kVAEAm: "x1n2onr6",
+		kybGjl: "x1hl2dhg",
 		kIyJzY: "x1iuyhda",
 		k1ekBW: "xb5u718",
 		kAMwcw: "x15l9jch",
@@ -57,7 +61,7 @@ const styles = {
 		$$css: true
 	}
 };
-function IconButton({ children, disabled = false, disableRipple = false, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "standard", ...props$1 }) {
+function IconButton({ children, disabled = false, disableRipple = false, nativeButton, onClick, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, size = "md", variant = "standard", ...props$1 }) {
 	const ripple = useRipple(!disableRipple, {
 		onClick,
 		onContextMenu,
@@ -68,9 +72,10 @@ function IconButton({ children, disabled = false, disableRipple = false, onClick
 	});
 	return /* @__PURE__ */ jsxs(Button, {
 		disabled,
+		nativeButton: nativeButton ?? rendersNativeButton(props$1.render),
 		...ripple.handlers,
 		...props$1,
-		...props(styles.base, styles[variant], styles[size]),
+		...mergeStatefulStyles(props(styles.base, styles[variant], styles[size]), props$1),
 		children: [children, ripple.surface]
 	});
 }

package/dist/components/icon-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';\nimport { Button as BaseUIButton } from '@base-ui/react/button';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// :hover and :active still match a disabled native <button>, and stylex's\n// fixed pseudo-class ordering places both after :disabled, so without the\n// :not(:disabled) guard a hovered disabled button would render with the\n// interaction color instead of the disabled one.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the source design gives this control. The two\n// transitioned properties take different curves — the colour change is\n// linear-ish and the shape change is emphasized — so the timing functions are\n// a matching comma list rather than one value.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"xtecew7 x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kkrTdU: \"x1s07b3s x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xm7dzmu x1n0xrd1 x197hsbc xnety89\",\n    kMwMTN: \"xhfb3ry xwjo7ld\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1a42vn9 x6gcojk xjbqb8w\",\n    kMwMTN: \"xhfb3ry x1w5n3ug\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1c3n7wt x1n0xrd1 xwypj8i xp89om9\",\n    kMwMTN: \"xhfb3ry xscdzaa\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  }\n};\ntype IconButtonProps = BaseUIButtonProps & {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px — the same heights `Button`\n   * uses, so the two line up beside each other in a row.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'xs';\n  /**\n   * `standard` is transparent and tints what it sits on; `filled` and `tonal`\n   * carry a container of their own.\n   * @default 'standard'\n   */\n  variant?: 'filled' | 'standard' | 'tonal';\n};\nfunction IconButton({\n  children,\n  disabled = false,\n  disableRipple = false,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'md',\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // `props` (className/style/render, etc.) is spread separately: `className`\n  // and `style` there may be functions of render state, a Base UI extension\n  // ripple's own handler-only merge doesn't need to know about.\n  const ripple = useRipple<HTMLButtonElement>(!disableRipple, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <BaseUIButton disabled={disabled} {...ripple.handlers} {...props} {...stylex.props(styles.base, styles[variant], styles[size])}>\n      {children}\n      {ripple.surface}\n    </BaseUIButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;AAwBA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA2BA,SAAS,WAAW,EAClB,UACA,WAAW,OACX,gBAAgB,OAChB,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,YACV,GAAG,WACe;CAIlB,MAAM,SAAS,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,qBAAC,QAAD;EAAwB;EAAU,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK;EAA7H,UAAA,CACF,UACA,OAAO,OACI;;AAClB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ButtonProps as BaseUIButtonProps } from '@base-ui/react/button';\nimport { Button as BaseUIButton } from '@base-ui/react/button';\nimport * as stylex from '@stylexjs/stylex';\nimport { useRipple } from '../../hooks/useRipple';\nimport { rendersNativeButton } from '../../render/nativeButton';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// :hover and :active still match a disabled native <button>, and stylex's\n// fixed pseudo-class ordering places both after :disabled, so without the\n// :not(:disabled) guard a hovered disabled button would render with the\n// interaction color instead of the disabled one.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the source design gives this control. The two\n// transitioned properties take different curves — the colour change is\n// linear-ish and the shape change is emphasized — so the timing functions are\n// a matching comma list rather than one value.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"xtecew7 x3y1ksm\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1s07b3s x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xm7dzmu x1n0xrd1 x197hsbc xnety89\",\n    kMwMTN: \"xhfb3ry xwjo7ld\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  standard: {\n    kWkggS: \"x1a42vn9 x6gcojk xjbqb8w\",\n    kMwMTN: \"xhfb3ry x1w5n3ug\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"x1c3n7wt x1n0xrd1 xwypj8i xp89om9\",\n    kMwMTN: \"xhfb3ry xscdzaa\",\n    $$css: true\n  },\n  xs: {\n    kZKoxP: \"x10w6t97\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x1td3qas\",\n    $$css: true\n  }\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * Whether the element `render` produces is a real `<button>`, which decides\n   * whether Base UI supplies the button role, keyboard activation and\n   * disabled semantics itself.\n   *\n   * Read off `render` when that is a plain element, so\n   * `render={<a href=\"…\" />}` needs nothing here. Worth setting only when\n   * `render` is a component or a function, where the tag it will produce\n   * cannot be read ahead of time.\n   *\n   * An anchor rendered this way is announced as a button rather than as a\n   * link, since that is what Base UI's non-native mode applies. For a control\n   * that should be announced as the link it is, reach for `Link`, or `Card`\n   * with `render`, neither of which imposes button semantics.\n   * @default true\n   */\n  nativeButton?: boolean;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px — the same heights `Button`\n   * uses, so the two line up beside each other in a row.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'xs';\n  /**\n   * `standard` is transparent and tints what it sits on; `filled` and `tonal`\n   * carry a container of their own.\n   * @default 'standard'\n   */\n  variant?: 'filled' | 'standard' | 'tonal';\n} & BaseUIButtonProps;\nfunction IconButton({\n  children,\n  disabled = false,\n  disableRipple = false,\n  nativeButton,\n  onClick,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  size = 'md',\n  variant = 'standard',\n  ...props\n}: IconButtonProps) {\n  // `props` (className/style/render, etc.) is spread separately: `className`\n  // and `style` there may be functions of render state, a Base UI extension\n  // ripple's own handler-only merge doesn't need to know about. It is also\n  // why the styles below merge through mergeStatefulStyles rather than the\n  // plain mergeStyles.\n  const ripple = useRipple<HTMLButtonElement>(!disableRipple, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <BaseUIButton disabled={disabled}\n  // Destructured out of `props` above rather than left to flow through\n  // with it: spread later, an absent `nativeButton` would arrive as an\n  // explicit `undefined` and overwrite what is inferred here.\n  nativeButton={nativeButton ?? rendersNativeButton(props.render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(stylex.props(styles.base, styles[variant], styles[size]), props)}>\n      {children}\n      {ripple.surface}\n    </BaseUIButton>;\n}\nexport type { IconButtonProps };\nexport default IconButton;"],"mappings":";;;;;;;AA0BA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,IAAI;EACF,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA4CA,SAAS,WAAW,EAClB,UACA,WAAW,OACX,gBAAgB,OAChB,cACA,SACA,eACA,iBACA,eACA,gBACA,aACA,OAAO,MACP,UAAU,YACV,GAAG,WACe;CAMlB,MAAM,SAAS,UAA6B,CAAC,eAAe;EAC1D;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,OAAO,qBAAC,QAAD;EAAwB;EAI/B,cAAc,gBAAgB,oBAAoB,QAAM,MAAM;EAAG,GAAI,OAAO;EAAU,GAAI;EAAO,GAAI,oBAAoB,MAAa,OAAO,MAAM,OAAO,UAAU,OAAO,KAAK,GAAG,OAAK;EAJjL,UAAA,CAKF,UACA,OAAO,OACI;;AAClB"}

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ import Button, { ButtonProps } from "./button/index.js";
 import Card, { CardProps } from "./card/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
 import Code, { CodeProps } from "./code/index.js";
+import Container, { ContainerProps } from "./container/index.js";
 import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } from "./currency/index.js";
 import Feed, { FeedProps } from "./feed/index.js";
@@ -16,8 +17,9 @@ import ListItem, { ListItemProps } from "./list-item/index.js";
 import ProductIcon, { ProductIconProps } from "./product-icon/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
 import Sheet, { SheetProps } from "./sheet/index.js";
+import Stack, { StackAlign, StackGap, StackJustify, StackProps } from "./stack/index.js";
 import SupportingPane, { SupportingPaneProps } from "./supporting-pane/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
-export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { AppBar, type AppBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, Container, type ContainerProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, Feed, type FeedProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListDetail, type ListDetailProps, ListItem, type ListItemProps, ProductIcon, type ProductIconProps, Separator, type SeparatorProps, Sheet, type SheetProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, SupportingPane, type SupportingPaneProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/keycap/index.js

@@ -1,3 +1,4 @@
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 import { c } from "react/compiler-runtime";
 //#region src/components/keycap/index.tsx
@@ -7,44 +8,55 @@ import { c } from "react/compiler-runtime";
 * chord is several of these, combined at the call site.
 */
 function Keycap(t0) {
-	const $ = c(9);
-	let props;
+	const $ = c(13);
 	let render;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
 	if ($[0] !== t0) {
-		({render, ...props} = t0);
+		const { render: t5, ...props } = t0;
+		render = t5;
+		t4 = useRender;
+		t3 = "kbd";
+		t1 = props;
+		t2 = mergeStyles({ className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" }, props);
 		$[0] = t0;
-		$[1] = props;
-		$[2] = render;
+		$[1] = render;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
 	} else {
-		props = $[1];
-		render = $[2];
+		render = $[1];
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
 	}
-	let t1;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = { className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" };
-		$[3] = t1;
-	} else t1 = $[3];
-	let t2;
-	if ($[4] !== props) {
-		t2 = {
-			...props,
-			...t1
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = {
+			...t1,
+			...t2
 		};
-		$[4] = props;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== render || $[7] !== t2) {
-		t3 = {
-			defaultTagName: "kbd",
-			props: t2,
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== render || $[10] !== t3 || $[11] !== t5) {
+		t6 = {
+			defaultTagName: t3,
+			props: t5,
 			render
 		};
-		$[6] = render;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
-	return useRender(t3);
+		$[9] = render;
+		$[10] = t3;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t4(t6);
 }
 //#endregion
 export { Keycap as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...{\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;AA2BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,CAAA,CAAA,QAAA,GAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQL,KAAA,EAAA,WACU,8GACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["useRender","props"],"sources":["../../../src/components/keycap/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 { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;AA4BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,MAAA,EAAA,QAAA,IAAA,GAAA,UAAA;EAAA,SAAA;EAIPA,KAAA;EACW,KAAA;EAEXC,KAAA;EACA,KAAA,YAAY,EAAA,WACF,qHACb,GAAG,KAAK;EAAC,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;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,MAAA,EAAA,OAAA,IAAA;EAJJ,KAAA;GAAA,GACFA;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,QAAA,MAAA,EAAA,QAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATMD,GAAU,EAShB;AAAC"}

package/dist/components/link/index.js

@@ -1,8 +1,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStyles } from "../../styles/merge.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/link/index.tsx
 const styles = { base: {
 	kaIpWk: "x1tfhd1",
+	kB7OPa: "x9f619",
 	kkrTdU: "x1ypdohk",
 	kjBf7l: "xrgy624",
 	kInvED: "x1hl8ikr",
@@ -50,7 +52,7 @@ function Link({ render, tone = "primary", underline = "always", ...props$1 }) {
 		defaultTagName: "a",
 		props: {
 			...props$1,
-			...props(styles.base, tones[tone], underlines[underline])
+			...mergeStyles(props(styles.base, tones[tone], underlines[underline]), props$1)
 		},
 		render
 	});