@mechane-ai/elements 0.9.0 → 0.10.0

package/dist/navigation/commands.js

@@ -1,6 +1,6 @@
-import { l as e } from "../src-Cc0Sadzr.js";
-import { s as t } from "../src-CfDf8TY8.js";
-import { n } from "../navigation-yxK3iQXo.js";
+import { l as e } from "../src-Be7NLG8c.js";
+import { s as t } from "../src-Cs0dRc4X.js";
+import { n } from "../navigation-D2_sGy3C.js";
 import "@stylexjs/stylex";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Autocomplete as a } from "@base-ui/react/autocomplete";
@@ -36,45 +36,48 @@ function u({ open: n, onOpenChange: o, title: s, commands: c, trigger: u, placeh
 	return /* @__PURE__ */ i(t.Root, {
 		open: n,
 		onOpenChange: o,
-		children: [u !== void 0 && /* @__PURE__ */ r(t.Trigger, { render: u }), /* @__PURE__ */ i(t.Portal, { children: [/* @__PURE__ */ r(t.Backdrop, {}), /* @__PURE__ */ r(t.Popup, { children: /* @__PURE__ */ i("div", {
-			className: "x78zum5 xdt5ytf x1n8ia3y",
-			children: [/* @__PURE__ */ r(t.Title, { children: s }), /* @__PURE__ */ i(a.Root, {
-				items: c,
-				itemToStringValue: (e) => e.label,
-				inline: !0,
-				open: !0,
-				autoHighlight: "always",
-				children: [
-					/* @__PURE__ */ r(a.Input, {
-						"aria-label": d,
-						placeholder: d,
-						render: /* @__PURE__ */ r(e, {})
-					}),
-					/* @__PURE__ */ r(a.List, {
-						className: "x1717udv x1ghz6dp x1sslpiy x1odjw0f xish69e",
-						children: (e) => /* @__PURE__ */ i(a.Item, {
-							value: e,
-							disabled: e.disabled,
-							className: "x78zum5 x6s0dn4 xaml1ju x1uey4wk xwu7q15 xn9t2bk x5g2kb4 x1ok0vyi xbixft xpvm0e4 x1hz01jw xtqrqnz x1778rvt x1ypdohk xf2ykmf xd12npn xwj21n9 x1m8qfh3",
-							onClick: () => {
-								o(!1), e.onSelect();
-							},
-							children: [/* @__PURE__ */ i("span", {
-								className: "x98rzlu xeuugli",
-								children: [e.label, e.description !== void 0 && /* @__PURE__ */ r("span", {
-									className: "x1lliihq x153jb6y xy8obcc xas2l8k",
-									children: e.description
-								})]
-							}), e.shortcut !== void 0 && /* @__PURE__ */ r(l, { shortcut: e.shortcut })]
-						}, e.id)
-					}),
-					/* @__PURE__ */ r(a.Empty, {
-						className: "x1c8xbx5 x153jb6y xtqrqnz xjl7jj",
-						children: f
-					})
-				]
-			})]
-		}) })] })]
+		children: [u !== void 0 && /* @__PURE__ */ r(t.Trigger, { render: u }), /* @__PURE__ */ i(t.Portal, { children: [/* @__PURE__ */ r(t.Backdrop, { motion: "none" }), /* @__PURE__ */ r(t.Popup, {
+			motion: "none",
+			children: /* @__PURE__ */ i("div", {
+				className: "x78zum5 xdt5ytf x1n8ia3y",
+				children: [/* @__PURE__ */ r(t.Title, { children: s }), /* @__PURE__ */ i(a.Root, {
+					items: c,
+					itemToStringValue: (e) => e.label,
+					inline: !0,
+					open: !0,
+					autoHighlight: "always",
+					children: [
+						/* @__PURE__ */ r(a.Input, {
+							"aria-label": d,
+							placeholder: d,
+							render: /* @__PURE__ */ r(e, {})
+						}),
+						/* @__PURE__ */ r(a.List, {
+							className: "x1717udv x1ghz6dp x1sslpiy x1odjw0f xish69e",
+							children: (e) => /* @__PURE__ */ i(a.Item, {
+								value: e,
+								disabled: e.disabled,
+								className: "x78zum5 x9f619 x6s0dn4 xaml1ju x1uey4wk xwu7q15 xn9t2bk x5g2kb4 x1ok0vyi xbixft xpvm0e4 x1hz01jw xj57cvi xtqrqnz x1778rvt x1ypdohk xf2ykmf x1480za7 xd12npn xwj21n9 x1m8qfh3",
+								onClick: () => {
+									o(!1), e.onSelect();
+								},
+								children: [/* @__PURE__ */ i("span", {
+									className: "x98rzlu xeuugli xj0a0fe",
+									children: [e.label, e.description !== void 0 && /* @__PURE__ */ r("span", {
+										className: "x1lliihq x153jb6y xy8obcc xas2l8k",
+										children: e.description
+									})]
+								}), e.shortcut !== void 0 && /* @__PURE__ */ r(l, { shortcut: e.shortcut })]
+							}, e.id)
+						}),
+						/* @__PURE__ */ r(a.Empty, {
+							className: "x1c8xbx5 x153jb6y xtqrqnz xjl7jj",
+							children: f
+						})
+					]
+				})]
+			})
+		})] })]
 	});
 }
 export { u as CommandPalette, l as ShortcutHint, c as useCommandShortcuts };

package/dist/{navigation-yxK3iQXo.js → navigation-D2_sGy3C.js}

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { ChevronRight as n } from "lucide-react";
 // packages/navigation/src/navigation.tsx
 function r(n) {
-	return /* @__PURE__ */ t("nav", { ...e({ className: "x1hz01jw xtqrqnz x1778rvt x153jb6y" }, n) });
+	return /* @__PURE__ */ t("nav", { ...e({ className: "x1hz01jw xj57cvi xtqrqnz x1778rvt x153jb6y" }, n) });
 }
 function i(n) {
 	return /* @__PURE__ */ t("ol", { ...e({ className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi x3ct3a4 x1717udv x1ghz6dp" }, n) });
@@ -27,7 +27,7 @@ function s() {
 	});
 }
 function c(n) {
-	return /* @__PURE__ */ t("kbd", { ...e({ className: "x3nfvp2 x6s0dn4 xl56j7k xt4ypqs x14w6jbu xt970qd xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi x1r7kqkb x153jb6y xiard35 xy8obcc xas2l8k xuxw1ft" }, n) });
+	return /* @__PURE__ */ t("kbd", { ...e({ className: "x3nfvp2 x6s0dn4 xl56j7k xt4ypqs x14w6jbu xt970qd xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi x1r7kqkb x153jb6y xiard35 xj57cvi xy8obcc xas2l8k xuxw1ft" }, n) });
 }
 var l = {
 	Root: r,

package/dist/navigation.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./navigation-yxK3iQXo.js";
+import { n as e, t } from "./navigation-D2_sGy3C.js";
 import { t as n } from "./style-composition-uYlczSsB.js";
 import { mergeProps as r } from "@base-ui/react/merge-props";
 import "@stylexjs/stylex";
@@ -10,15 +10,15 @@ function o({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections",
 		"aria-label": r,
 		tabIndex: 0,
 		...{
-			0: { className: "x78zum5 x1j825kq xeuugli xw2csxc xso031l x1q0q8m5 x1qndepd x1hz01jw x12myhf4 x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
-			1: { className: "x78zum5 x1j825kq xeuugli xw2csxc x1q0q8m5 x1qndepd x1hz01jw x12myhf4 x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal x1qhh985" }
+			0: { className: "x78zum5 xxhr3t xeuugli xw2csxc xso031l x1q0q8m5 x1qndepd x1hz01jw xtqrqnz xj57cvi x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
+			1: { className: "x78zum5 xxhr3t xeuugli xw2csxc x1q0q8m5 x1qndepd x1hz01jw xtqrqnz xj57cvi x1778rvt xvmahel x13qnu6 x9v5kkp x19rmrnh x1bqaal x1qhh985" }
 		}[!!a | 0],
 		children: e.map((e) => /* @__PURE__ */ i("a", {
 			href: e.href,
 			"aria-current": e.id === t ? "page" : void 0,
 			...{
-				0: { className: "x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk xlxy82 x1q0q8m5 x16stqrj xkrqix3 xuxw1ft x153jb6y x1mkgjtd x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
-				1: { className: "x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk xlxy82 x1q0q8m5 xkrqix3 xuxw1ft x1mkgjtd x13qnu6 x9v5kkp x19rmrnh x1bqaal xbixft xdjqune" }
+				0: { className: "x1n2onr6 x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk x1doqdfy xkrqix3 xuxw1ft x153jb6y x1mkgjtd x1s9zmfe x1kl8fbi x1s928wv x1j6awrg x1ccaobo x1xrz1ek x3cntg4 xyhc2n1 x13qnu6 x9v5kkp x19rmrnh x1bqaal" },
+				1: { className: "x1n2onr6 x9f619 x3nfvp2 x6s0dn4 x2lah0s xid9utz xn9t2bk x1doqdfy xkrqix3 xuxw1ft x1mkgjtd x1s9zmfe x1kl8fbi x1s928wv x1j6awrg x1ccaobo x1xrz1ek x3cntg4 x13qnu6 x9v5kkp x19rmrnh x1bqaal xbixft xtawafa" }
 			}[e.id === t | 0],
 			onClick: (t) => {
 				if (n === void 0 || t.defaultPrevented || t.button !== 0) return;
@@ -31,7 +31,7 @@ function o({ items: e, selectedId: t, onNavigate: n, label: r = "Page sections",
 }
 // packages/navigation/src/skip-link.tsx
 function s(e) {
-	return /* @__PURE__ */ i("a", { ...r({ className: "xixxii4 x1ridm32 x12hha37 xkwijxb x174j0rr x1mvvolr x9f619 xvv7f4i x1ok0vyi xpvm0e4 xbixft x1hz01jw xtqrqnz x1778rvt xvmahel xujl8zx x1wfrlr2 x1tkds87 x1de710j x1gnsi0 x1cm8ssg" }, e) });
+	return /* @__PURE__ */ i("a", { ...r({ className: "xixxii4 x1ridm32 x12hha37 xkwijxb x174j0rr x1mvvolr x9f619 xvv7f4i xj0a0fe x1ok0vyi xpvm0e4 xbixft x1hz01jw xk4h15q xtqrqnz x1778rvt xvmahel xujl8zx x1wfrlr2 x1tkds87 x1de710j x1gnsi0 x1cm8ssg" }, e) });
 }
 // packages/navigation/src/tabs.tsx
 function c({ className: e, style: t, ...r }) {
@@ -40,7 +40,7 @@ function c({ className: e, style: t, ...r }) {
 		...n({
 			className: e,
 			style: t,
-			styles: { className: "x1hz01jw xvmahel xeuugli" }
+			styles: { className: "x1hz01jw xj57cvi xtqrqnz x1778rvt xbixft xvmahel xeuugli xsg5m96 x7bu0ch x18eqmq0" }
 		})
 	});
 }
@@ -50,7 +50,7 @@ function l({ className: e, style: t, ...r }) {
 		...n({
 			className: e,
 			style: t,
-			styles: { className: "x78zum5 x1j825kq xso031l x1q0q8m5 x1qndepd xw2csxc" }
+			styles: { className: "x78zum5 xxhr3t xeuugli xso031l x1q0q8m5 x1qndepd xw2csxc x16yzcw2 x1mxyneg xyjviii x1y2jzqp x12ub8kb xxwvzwo x1ci5vm9" }
 		})
 	});
 }
@@ -60,7 +60,7 @@ function u({ className: e, style: t, ...r }) {
 		...n({
 			className: e,
 			style: t,
-			styles: { className: "x1hz01jw xvmahel xc342km xid9utz xn9t2bk xnjsko4 xjbqb8w xlxy82 x1q0q8m5 x16stqrj x153jb6y x1ypdohk x12myhf4 x1778rvt xuxw1ft x1wlwa7r x1wu4q4p x11v428d xwj21n9 x1m8qfh3 x13qnu6 x9v5kkp x19rmrnh x1bqaal" }
+			styles: { className: "x1n2onr6 x9f619 x2lah0s x1hz01jw xj57cvi xvmahel xc342km xid9utz xn9t2bk x1doqdfy xjbqb8w x153jb6y x1ypdohk xtqrqnz x1778rvt xuxw1ft x1wlwa7r xyg3wme xoqm7u7 x1s928wv x1j6awrg x1ccaobo x1xrz1ek x3cntg4 xyhc2n1 x11v428d x1gkyb9z xv7chyw x1pgiufq xrzcr2b x1nten1d x1wzsryr x1hjdyp1 x1i5oxzy xx75q12 x7dn452 xwj21n9 x1m8qfh3 x13qnu6 x9v5kkp x19rmrnh x1bqaal" }
 		})
 	});
 }
@@ -70,7 +70,7 @@ function d({ className: e, style: t, ...r }) {
 		...n({
 			className: e,
 			style: t,
-			styles: { className: "x1o3kwql x1k57tk5" }
+			styles: { className: "x1o3kwql xeuugli x1k57tk5 xcqfl4l xwqq6z6 x13qnu6 x9v5kkp x19rmrnh x7s97pk" }
 		})
 	});
 }

package/dist/overlays.js

@@ -1 +1 @@
-export { o as AlertDialog, s as Dialog, a as Drawer, i as Menu, r as Popover, n as Preview, t as Tooltip } from "./src-CfDf8TY8.js";
+export { o as AlertDialog, s as Dialog, a as Drawer, i as Menu, r as Popover, n as Preview, t as Tooltip } from "./src-Cs0dRc4X.js";

package/dist/packages/charts/src/cartesian/bar-chart.d.ts

@@ -22,4 +22,9 @@ export type BarChartProps = {
     readonly selection?: ChartSelection | undefined;
     readonly height?: number | undefined;
 };
+export type BarChartPlaceholderProps = Pick<BarChartProps, 'description' | 'height'> & {
+    readonly title?: string | undefined;
+    readonly series?: ReadonlyArray<Pick<BarSeries, 'id' | 'label' | 'tone'>> | undefined;
+};
+export declare function BarChartPlaceholder({ title, description, series, height, }: BarChartPlaceholderProps): ReactNode;
 export declare function BarChart({ title, description, categories, series, domain, mode, formatValue, selection, height, }: BarChartProps): ReactNode;

package/dist/packages/charts/src/cartesian/index.d.ts

@@ -1,5 +1,5 @@
-export type { BarSeries, BarChartProps } from './bar-chart.tsx';
-export { BarChart } from './bar-chart.tsx';
+export type { BarSeries, BarChartProps, BarChartPlaceholderProps } from './bar-chart.tsx';
+export { BarChart, BarChartPlaceholder } from './bar-chart.tsx';
 export type { BreakdownBarProps } from './breakdown-bar.tsx';
 export { BreakdownBar } from './breakdown-bar.tsx';
 export type { ScatterPoint, ScatterRange, ScatterRangeSelection, ScatterPlotProps } from './scatter-plot.tsx';

package/dist/packages/charts/src/chart-frame.d.ts

@@ -28,6 +28,9 @@ export declare function ChartDatumButton({ label, selected, onSelect, children,
     readonly onSelect?: (() => void) | undefined;
     readonly children: ReactNode;
 }): ReactNode;
+export declare function ChartReadout({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
 export declare function ChartDataDisclosure({ children, label, }: {
     readonly children: ReactNode;
     readonly label?: string | undefined;

package/dist/packages/charts/src/chart-theme.d.ts

@@ -26,6 +26,7 @@ export declare const chartStyles: Readonly<{
         readonly fill: stylex.StyleXClassNameFor<"fill", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
     }>;
     readonly mark: Readonly<{
@@ -43,7 +44,7 @@ export declare const chartStyles: Readonly<{
             readonly outlineColor: stylex.StyleXVar<string>;
             readonly outlineStyle: "solid";
             readonly outlineWidth: stylex.StyleXVar<string>;
-            readonly outlineOffset: 2;
+            readonly outlineOffset: `calc(-1 * ${stylex.StyleXVar<string>})`;
         }>;
     }>;
 }>;

package/dist/packages/charts/src/distribution/distribution-plot.d.ts

@@ -8,7 +8,7 @@ export declare const distributionStyles: Readonly<{
     readonly plot: Readonly<{
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly display: stylex.StyleXClassNameFor<"display", "grid">;
-        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "max-content minmax(0, 1fr)">;
+        readonly gridTemplateColumns: stylex.StyleXClassNameFor<"gridTemplateColumns", "minmax(0, max-content) minmax(0, 1fr)">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
     }>;
     readonly yAxis: Readonly<{
@@ -21,6 +21,11 @@ export declare const distributionStyles: Readonly<{
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", 120>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly plotArea: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
     }>;
     readonly svg: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "block">;
@@ -42,6 +47,17 @@ export declare const distributionStyles: Readonly<{
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
     }>;
+    readonly tick: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", "1 1 0">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly middleTick: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly endTick: Readonly<{
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;
+    }>;
     readonly axisNames: Readonly<{
         readonly gridColumn: stylex.StyleXClassNameFor<"gridColumn", "1 / -1">;
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
@@ -57,15 +73,19 @@ export declare const distributionStyles: Readonly<{
     readonly values: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "grid">;
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly containerType: stylex.StyleXClassNameFor<"containerType", "inline-size">;
     }>;
     readonly value: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
         readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
-        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly columnGap: stylex.StyleXClassNameFor<"columnGap", string>;
+        readonly rowGap: stylex.StyleXClassNameFor<"rowGap", string>;
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
     }>;
     readonly summary: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly fontVariantNumeric: stylex.StyleXClassNameFor<"fontVariantNumeric", "tabular-nums">;
         readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
         readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "end">;

package/dist/packages/collections/src/collection-scroll.d.ts

@@ -15,5 +15,6 @@ export type CollectionScrollProps = {
     readonly onEndReached?: (() => void) | undefined;
     readonly fill?: boolean;
     readonly endPosition?: 'start' | 'end';
+    readonly label?: string;
 };
-export declare function CollectionScroll({ children, endContent, onEndReached, fill, endPosition, }: CollectionScrollProps): ReactNode;
+export declare function CollectionScroll({ children, endContent, onEndReached, fill, endPosition, label, }: CollectionScrollProps): ReactNode;

package/dist/packages/content/src/diff/pierre-diff.d.ts

@@ -5,10 +5,11 @@ type PierreDiffProps = {
     readonly files: ReadonlyArray<FileDiffMetadata>;
     readonly layout: 'unified' | 'split';
     readonly wrap: boolean;
+    readonly showUnchanged: boolean;
     readonly annotations: ReadonlyArray<DiffAnnotation>;
     readonly maxHeight: number;
     readonly label: string;
 };
 export declare function prepareDiff(source: DiffSource): ReadonlyArray<FileDiffMetadata>;
-export declare function PierreDiff({ files, layout, wrap, annotations, maxHeight, label }: PierreDiffProps): ReactNode;
+export declare function PierreDiff({ files, layout, wrap, showUnchanged, annotations, maxHeight, label, }: PierreDiffProps): ReactNode;
 export {};

package/dist/packages/content/src/viewer-styles.d.ts

@@ -0,0 +1,64 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const viewerStyles: Readonly<{
+    readonly root: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+    }>;
+    readonly header: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "space-between">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly borderBlockEndWidth: stylex.StyleXClassNameFor<"borderBlockEndWidth", 1>;
+        readonly borderBlockEndStyle: stylex.StyleXClassNameFor<"borderBlockEndStyle", "solid">;
+        readonly borderBlockEndColor: stylex.StyleXClassNameFor<"borderBlockEndColor", string>;
+    }>;
+    readonly label: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", "1 1 24ch">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly actions: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexWrap: stylex.StyleXClassNameFor<"flexWrap", "wrap">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+    }>;
+    readonly scrollRegion: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none">;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineWidth: stylex.StyleXVar<string>;
+            readonly outlineStyle: "solid";
+            readonly outlineColor: stylex.StyleXVar<string>;
+            readonly outlineOffset: `calc(-1 * ${stylex.StyleXVar<string>})`;
+        }>;
+    }>;
+    readonly note: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+}>;

package/dist/packages/core/src/index.d.ts

@@ -7,5 +7,5 @@ export type { AgentAppearance, AgentAvatarColor, AgentAvatarProps, AgentAvatarSi
 export { AgentAvatar, agentAppearance, agentAvatarColors } from './agent-avatar.tsx';
 export { CopyValue } from './copy-value.tsx';
 export { Accordion, Collapsible } from './disclosure.tsx';
-export { Panel, Row, Stack, Columns, Divider } from './surfaces.tsx';
+export { Panel, SurfaceLink, Row, Stack, Columns, Divider } from './surfaces.tsx';
 export { Text, Heading, Subheading, Muted, Identifier, Prose, Badge, Status } from './text.tsx';

package/dist/packages/core/src/surfaces.d.ts

@@ -1,7 +1,11 @@
 import type { ComponentProps, ReactNode } from 'react';
+import type { PlacementStyle } from '../../foundations/src/style-composition.ts';
 type PanelProps = ComponentProps<'section'> & {
     readonly padded?: boolean;
 };
+type SurfaceLinkProps = ComponentProps<'a'> & {
+    readonly xstyle?: PlacementStyle;
+};
 type RowProps = ComponentProps<'div'> & {
     readonly between?: boolean;
 };
@@ -11,6 +15,7 @@ type StackProps = ComponentProps<'div'> & {
 type ColumnsProps = ComponentProps<'div'>;
 type DividerProps = ComponentProps<'hr'>;
 export declare function Panel({ padded, ...props }: PanelProps): ReactNode;
+export declare function SurfaceLink({ xstyle, ...props }: SurfaceLinkProps): ReactNode;
 export declare function Row({ between, ...props }: RowProps): ReactNode;
 export declare function Stack({ compact, ...props }: StackProps): ReactNode;
 export declare function Columns(props: ColumnsProps): ReactNode;

package/dist/packages/feedback/src/index.d.ts

@@ -4,6 +4,9 @@ export type { ProgressProps, MeterProps } from './progress.tsx';
 export { Progress, Meter } from './progress.tsx';
 export type { SkeletonProps, SkeletonTextProps, SpinnerProps } from './skeleton.tsx';
 export { Skeleton, SkeletonText, Spinner } from './skeleton.tsx';
-export { Toast } from './toast.tsx';
+export type { ExternalToast as ToastOptions } from 'sonner';
+export { toast } from 'sonner';
+export type { ToasterProps } from './toast.tsx';
+export { Toaster } from './toast.tsx';
 export type { AsyncRegionProps, ContentRevealProps } from './async-region.tsx';
 export { AsyncRegion, ContentReveal } from './async-region.tsx';

package/dist/packages/feedback/src/toast.d.ts

@@ -1,28 +1,6 @@
-import { Toast as BaseToast } from '@base-ui/react/toast';
-import type { ComponentProps, ReactNode } from 'react';
-type ToastViewportProps = ComponentProps<typeof BaseToast.Viewport>;
-type ToastRootProps = ComponentProps<typeof BaseToast.Root>;
-type ToastContentProps = ComponentProps<typeof BaseToast.Content>;
-type ToastTitleProps = ComponentProps<typeof BaseToast.Title>;
-type ToastDescriptionProps = ComponentProps<typeof BaseToast.Description>;
-type ToastCloseProps = ComponentProps<typeof BaseToast.Close>;
-declare function ToastViewport({ className, style, ...props }: ToastViewportProps): ReactNode;
-declare function ToastRoot({ className, style, ...props }: ToastRootProps): ReactNode;
-declare function ToastContent({ className, style, ...props }: ToastContentProps): ReactNode;
-declare function ToastTitle({ className, style, ...props }: ToastTitleProps): ReactNode;
-declare function ToastDescription({ className, style, ...props }: ToastDescriptionProps): ReactNode;
-declare function ToastClose(props: ToastCloseProps): ReactNode;
-export declare const Toast: {
-    Provider: import("react").FC<import("@base-ui/react").ToastProviderProps>;
-    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToastPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-    Viewport: typeof ToastViewport;
-    Root: typeof ToastRoot;
-    Content: typeof ToastContent;
-    Title: typeof ToastTitle;
-    Description: typeof ToastDescription;
-    Close: typeof ToastClose;
-    Action: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").ToastActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    useManager: typeof BaseToast.useToastManager;
-    createManager: typeof BaseToast.createToastManager;
+import type { ReactNode } from 'react';
+import type { ToasterProps as SonnerToasterProps } from 'sonner';
+export type ToasterProps = Pick<SonnerToasterProps, 'id' | 'position' | 'hotkey' | 'expand' | 'duration' | 'visibleToasts' | 'closeButton' | 'offset' | 'mobileOffset' | 'dir' | 'swipeDirections' | 'containerAriaLabel'> & {
+    readonly closeButtonAriaLabel?: string;
 };
-export {};
+export declare function Toaster({ closeButton, closeButtonAriaLabel, offset, mobileOffset, ...props }: ToasterProps): ReactNode;

package/dist/packages/forms/src/field-styles.d.ts

@@ -6,27 +6,35 @@ export declare const fieldStyles: Readonly<{
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
     }>;
     readonly label: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;
     readonly description: Readonly<{
         readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;
     readonly error: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;
     readonly input: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "block">;
         readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
@@ -37,6 +45,7 @@ export declare const fieldStyles: Readonly<{
         readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;

package/dist/packages/forms/src/selection-styles.d.ts

@@ -15,17 +15,21 @@ export declare const selectionStyles: Readonly<{
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "left">;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
-        readonly ':hover:not([data-disabled])': stylex.StyleXClassNameFor<":hover:not([data-disabled])", {
+        readonly ':hover:not(:active, [data-disabled])': stylex.StyleXClassNameFor<":hover:not(:active, [data-disabled])", {
             readonly backgroundColor: {
                 readonly [conditions.hoverPointer]: stylex.StyleXVar<string>;
             };
         }>;
+        readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
         readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
             readonly opacity: stylex.StyleXVar<string>;
             readonly cursor: "default";
@@ -67,6 +71,8 @@ export declare const selectionStyles: Readonly<{
         readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "calc(100vw - 16px)">;
     }>;
     readonly popup: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
         readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
         readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
         readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
@@ -75,6 +81,9 @@ export declare const selectionStyles: Readonly<{
         readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", string>;
         readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
@@ -83,22 +92,29 @@ export declare const selectionStyles: Readonly<{
     }>;
     readonly option: Readonly<{
         readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
         readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
         readonly gap: stylex.StyleXClassNameFor<"gap", string>;
         readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
         readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
         readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
         readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
         readonly cursor: stylex.StyleXClassNameFor<"cursor", "pointer">;
         readonly outlineWidth: stylex.StyleXClassNameFor<"outlineWidth", 0>;
         readonly ':is([data-highlighted])': stylex.StyleXClassNameFor<":is([data-highlighted])", {
             readonly backgroundColor: stylex.StyleXVar<string>;
         }>;
+        readonly ':active:not([data-disabled])': stylex.StyleXClassNameFor<":active:not([data-disabled])", {
+            readonly backgroundColor: stylex.StyleXVar<string>;
+        }>;
         readonly ':is([data-disabled])': stylex.StyleXClassNameFor<":is([data-disabled])", {
-            readonly color: stylex.StyleXVar<string>;
+            readonly opacity: stylex.StyleXVar<string>;
             readonly cursor: "default";
         }>;
     }>;

package/dist/packages/foundations/src/overlay-styles.d.ts

@@ -25,8 +25,9 @@ export declare const overlayStyles: Readonly<{
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
-        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 600>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;
     readonly description: Readonly<{
         readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
@@ -34,6 +35,7 @@ export declare const overlayStyles: Readonly<{
         readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
         readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
         readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
         readonly color: stylex.StyleXClassNameFor<"color", string>;
         readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
     }>;