@mechane-ai/elements 0.7.0 → 0.8.0

package/dist/content/tree.js

@@ -1,4 +1,4 @@
-import { b as e } from "../src-BkCsvZGi.js";
+import { b as e } from "../src-Bc5sEhdO.js";
 import * as t from "@stylexjs/stylex";
 import { useEffect as n, useState as r } from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ function u(c) {
 		let e = !0;
 		async function t() {
 			try {
-				let t = await import("../pierre-tree-DVybsnm4.js");
+				let t = await import("../pierre-tree-DdE1boiT.js");
 				e && d({
 					Component: t.PierreTree,
 					hasFailed: !1

package/dist/{content-link-HLYu0cmz.js → content-link-Dd8gapwc.js}

@@ -1,4 +1,4 @@
-import { x as e } from "./src-BkCsvZGi.js";
+import { x as e } from "./src-Bc5sEhdO.js";
 import { jsx as t } from "react/jsx-runtime";
 // packages/content/src/content-link.tsx
 var n = "https://content.invalid", r = /* @__PURE__ */ new Set([

package/dist/content.js

@@ -1,5 +1,5 @@
-import { b as e, g as t, h as n, v as r, x as i } from "./src-BkCsvZGi.js";
-import { t as a } from "./code-block-D0Jmsj7w.js";
+import { b as e, g as t, h as n, v as r, x as i } from "./src-Bc5sEhdO.js";
+import { t as a } from "./code-block-BRNdtTaP.js";
 import * as o from "@stylexjs/stylex";
 import { useCallback as s, useEffect as c, useRef as l, useState as u } from "react";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";

package/dist/feedback.js

@@ -1 +1 @@
-export { t as AsyncRegion, n as ContentReveal, u as EmptyState, o as Loading, i as Meter, d as Notice, a as Progress, s as Skeleton, c as SkeletonText, l as Spinner, r as Toast } from "./src-B_DCatpY.js";
+export { t as AsyncRegion, n as ContentReveal, u as EmptyState, o as Loading, i as Meter, d as Notice, a as Progress, s as Skeleton, c as SkeletonText, l as Spinner, r as Toast } from "./src-DV0BNk1M.js";

package/dist/forms/dates.js

@@ -1,4 +1,4 @@
-import { b as e, v as t } from "../src-BkCsvZGi.js";
+import { b as e, v as t } from "../src-Bc5sEhdO.js";
 import { r as n } from "../src-CfDf8TY8.js";
 import "@stylexjs/stylex";
 import { useState as r } from "react";

package/dist/forms.js

@@ -1 +1 @@
-export { r as Checkbox, g as Combobox, c as Field, d as Fieldset, f as FilePicker, l as Input, p as InputGroup, m as NumberField, i as RadioGroup, s as Select, n as SettingsRow, t as SettingsSection, h as Slider, a as Switch, u as Textarea, o as ToggleGroup } from "./src-DjTM64tN.js";
+export { r as Checkbox, g as Combobox, c as Field, d as Fieldset, f as FilePicker, l as Input, p as InputGroup, m as NumberField, i as RadioGroup, s as Select, n as SettingsRow, t as SettingsSection, h as Slider, a as Switch, u as Textarea, o as ToggleGroup } from "./src-Eg_ytPjv.js";

package/dist/index.js

@@ -1 +1 @@
-export { m as Accordion, _ as Avatar, t as Badge, v as Button, h as Collapsible, l as Columns, g as CopyValue, u as Divider, n as Heading, y as IconButton, r as Identifier, i as Muted, d as Panel, a as Prose, f as Row, p as Stack, o as Status, s as Subheading, c as Text, b as TextButton, x as TextLink } from "./src-BkCsvZGi.js";
+export { m as Accordion, _ as Avatar, t as Badge, v as Button, h as Collapsible, l as Columns, g as CopyValue, u as Divider, n as Heading, y as IconButton, r as Identifier, i as Muted, d as Panel, a as Prose, f as Row, p as Stack, o as Status, s as Subheading, c as Text, b as TextButton, x as TextLink } from "./src-Bc5sEhdO.js";

package/dist/layout.js

@@ -1,5 +1,5 @@
 import { a as e } from "./src-CfDf8TY8.js";
-import { i as t, n, v as r, y as i } from "./src-BkCsvZGi.js";
+import { i as t, n, v as r, y as i } from "./src-Bc5sEhdO.js";
 import { mergeProps as a } from "@base-ui/react/merge-props";
 import "@stylexjs/stylex";
 import { createContext as o, useContext as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
@@ -64,7 +64,7 @@ function w({ header: e, footer: t, close: n, children: r }) {
 			role: "region",
 			"aria-label": "Navigation links",
 			tabIndex: 0,
-			className: "x98rzlu x2lwn1j x1odjw0f xish69e x7d1sxj x13qnu6 x9v5kkp x19rmrnh x1bqaal",
+			className: "x98rzlu x2lwn1j x1odjw0f xish69e x1t137rt x7d1sxj x13qnu6 x9v5kkp x19rmrnh x1bqaal",
 			children: r
 		}),
 		t != null && /* @__PURE__ */ p("div", {
@@ -91,8 +91,8 @@ function E({ children: e, label: t = "Main" }) {
 	return /* @__PURE__ */ p("nav", {
 		"aria-label": t,
 		...{
-			0: { className: "x78zum5 xdt5ytf xfko13i xksvo5r" },
-			1: { className: "x78zum5 xdt5ytf xfko13i xksvo5r x1dbbav" }
+			0: { className: "x78zum5 xdt5ytf xksvo5r" },
+			1: { className: "x78zum5 xdt5ytf xksvo5r x1dbbav" }
 		}[!!r | 0],
 		children: e
 	});
@@ -312,7 +312,7 @@ function I({ header: e, children: t, inspector: n }) {
 			className: "x1ydxw8w xnx3t7k xso031l x1q0q8m5 x1qndepd",
 			children: e
 		}), /* @__PURE__ */ m("div", {
-			className: "x78zum5 x98rzlu xeuugli x2lwn1j xb3r6kr",
+			className: "x78zum5 x98rzlu xeuugli x2lwn1j x7giv3",
 			children: [/* @__PURE__ */ p("div", {
 				...{
 					0: { className: "x78zum5 x98rzlu xdt5ytf xeuugli x2lwn1j" },
@@ -352,7 +352,7 @@ function B({ title: e, actions: t, breadcrumb: n = !1, navigation: r = !0 }) {
 			/* @__PURE__ */ p(n ? "nav" : "h1", {
 				tabIndex: n ? void 0 : -1,
 				"aria-label": n ? "Breadcrumb" : void 0,
-				className: "x78zum5 x6s0dn4 x1hnptsi x1m92p3w xeuugli xs83m0k x1ghz6dp x1qlqyl8 xo1l8bm",
+				className: "x78zum5 x6s0dn4 x1hnptsi x1m92p3w xeuugli xs83m0k x1ghz6dp x1qlqyl8 xo1l8bm x1t137rt",
 				children: /* @__PURE__ */ p("span", {
 					className: "xeuugli xb3r6kr xlyipyv xuxw1ft",
 					children: e
@@ -417,7 +417,7 @@ function W({ children: e }) {
 }
 function G({ children: e }) {
 	return /* @__PURE__ */ p("div", {
-		className: "x78zum5 xdt5ytf x1ewej1i x1iyjqo2 x1j825kq xeuugli",
+		className: "x78zum5 xdt5ytf x1ewej1i x1iyjqo2 x1m6b44x xeuugli",
 		children: e
 	});
 }
@@ -433,6 +433,7 @@ function K({ title: e, description: r, icon: i, titleRef: a }) {
 			}), /* @__PURE__ */ p(n, {
 				ref: a,
 				tabIndex: -1,
+				className: "xeuugli x1t137rt",
 				children: e
 			})]
 		}), r != null && /* @__PURE__ */ p(t, { children: r })]

package/dist/navigation/commands.js

@@ -1,4 +1,4 @@
-import { l as e } from "../src-DjTM64tN.js";
+import { l as e } from "../src-Eg_ytPjv.js";
 import { s as t } from "../src-CfDf8TY8.js";
 import { n } from "../navigation-yxK3iQXo.js";
 import "@stylexjs/stylex";

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

@@ -38,6 +38,7 @@ export declare const chartStyles: Readonly<{
         readonly vectorEffect: stylex.StyleXClassNameFor<"vectorEffect", "non-scaling-stroke">;
     }>;
     readonly focus: Readonly<{
+        readonly outlineStyle: stylex.StyleXClassNameFor<"outlineStyle", "none">;
         readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
             readonly outlineColor: stylex.StyleXVar<string>;
             readonly outlineStyle: "solid";

package/dist/packages/collections/src/data-table.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 type ColumnAlignment = 'start' | 'end';
+type RowSizing = 'fixed' | 'content';
 export type DataTableColumn<Row> = {
     readonly id: string;
     readonly label: string;
@@ -58,10 +59,11 @@ export type DataTableProps<Row> = SortProperties<Row> & OptionalSelection<Row> &
     readonly focusRowId?: string | undefined;
     readonly hideCaption?: boolean;
     readonly hideHeaders?: boolean;
+    readonly rowSizing?: RowSizing;
     readonly window?: DataTableWindow;
     readonly endContent?: ReactNode;
     readonly onEndReached?: () => void;
     readonly footer?: ReactNode;
 };
-export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, focusRowId, hideCaption, hideHeaders, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
+export declare function DataTable<Row extends object>({ rows, columns, getRowId, caption, empty, sort, onSortChange, selectedIds, onSelectionChange, selectionLabel, rowAction, activeRowId, focusRowId, hideCaption, hideHeaders, rowSizing, window, endContent, onEndReached, footer, }: DataTableProps<Row>): ReactNode;
 export {};

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

@@ -10,3 +10,5 @@ export { MetricGrid, Metric } from './metrics.tsx';
 export { Table, Cell } from './table.tsx';
 export type { TimestampProps } from './timestamp.tsx';
 export { Timestamp } from './timestamp.tsx';
+export { Timeline } from './timeline.tsx';
+export type { TimelineProps, TimelineItemProps } from './timeline.tsx';

package/dist/packages/collections/src/metrics.d.ts

@@ -1,9 +1,12 @@
 import type { ComponentProps, ReactNode } from 'react';
-type MetricGridProps = ComponentProps<'dl'>;
+type MetricLayout = 'inline' | 'columns';
+type MetricGridProps = ComponentProps<'dl'> & {
+    readonly layout?: MetricLayout;
+};
 type MetricProps = ComponentProps<'div'> & {
     readonly label: string;
     readonly value: string;
 };
-export declare function MetricGrid(props: MetricGridProps): ReactNode;
+export declare function MetricGrid({ layout, ...props }: MetricGridProps): ReactNode;
 export declare function Metric({ label, value, ...props }: MetricProps): ReactNode;
 export {};

package/dist/packages/collections/src/timeline.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export type TimelineProps = {
+    readonly label: string;
+    readonly children: ReactNode;
+};
+export type TimelineItemProps = {
+    readonly icon: ReactNode;
+    readonly title: ReactNode;
+    readonly time?: ReactNode;
+    readonly metadata?: ReactNode;
+    readonly children?: ReactNode;
+};
+declare function TimelineRoot({ label, children }: TimelineProps): ReactNode;
+declare function TimelineItem({ icon, title, time, metadata, children }: TimelineItemProps): ReactNode;
+export declare const Timeline: {
+    Root: typeof TimelineRoot;
+    Item: typeof TimelineItem;
+};
+export {};

package/dist/packages/core/src/copy-value.d.ts

@@ -5,5 +5,5 @@ type CopyValueProps = Omit<ComponentProps<typeof BaseButton>, 'value'> & {
     readonly value: CopySource;
     readonly label: string;
 };
-export declare function CopyValue({ value, label, children, className, style, disabled, onClick, ...props }: CopyValueProps): ReactNode;
+export declare function CopyValue({ value, label, children, className, style, disabled, onClick, render, ...props }: CopyValueProps): ReactNode;
 export {};

package/dist/{pierre-tree-DVybsnm4.js → pierre-tree-DdE1boiT.js}

@@ -1,5 +1,5 @@
-import { c as e } from "./src-BkCsvZGi.js";
-import { l as t } from "./src-DjTM64tN.js";
+import { c as e } from "./src-Bc5sEhdO.js";
+import { l as t } from "./src-Eg_ytPjv.js";
 import { conditions as n } from "./tokens.js";
 import { r } from "./pierre-theme-BpESNIsV.js";
 import * as i from "@stylexjs/stylex";

package/dist/{src-BkCsvZGi.js → src-Bc5sEhdO.js}

@@ -228,7 +228,7 @@ function O({ size: e = "sm", children: t, xstyle: n, ...r }) {
 		})
 	});
 }
-function ee({ tone: t = "neutral", pending: r = !1, pendingLabel: a, children: s, className: c, style: u, xstyle: d, disabled: f = !1, ...p }) {
+function k({ tone: t = "neutral", pending: r = !1, pendingLabel: a, children: s, className: c, style: u, xstyle: d, disabled: f = !1, ...p }) {
 	let m = o(), h = i.props(x.text, T[t], d);
 	return /* @__PURE__ */ l(n, {
 		...p,
@@ -249,7 +249,7 @@ function ee({ tone: t = "neutral", pending: r = !1, pendingLabel: a, children: s
 		})
 	});
 }
-function k({ xstyle: e, ...t }) {
+function ee({ xstyle: e, ...t }) {
 	return /* @__PURE__ */ l("a", { ...r(i.props(x.link, e), t) });
 }
 // packages/core/src/avatar.tsx
@@ -308,69 +308,74 @@ function M({ label: e, fallback: t, src: n, size: r = "md" }) {
 }
 // packages/core/src/copy-value.tsx
 var N = 1600, P = /* @__PURE__ */ new Set(["copied", "failed"]);
-function F({ value: o, label: d, children: p, className: m, style: h, disabled: g = !1, onClick: _, ...y }) {
-	let [b, x] = c({
+function F({ value: o, label: d, children: p, className: m, style: h, disabled: g = !1, onClick: _, render: y, ...b }) {
+	let [x, S] = c({
 		value: o,
 		status: "idle"
-	}), S = s(0), C = b.value === o ? b.status : "idle";
+	}), C = s(0), w = x.value === o ? x.status : "idle";
 	a(() => () => {
-		S.current += 1;
+		C.current += 1;
 	}, [o]), a(() => {
-		if (!P.has(b.status)) return;
+		if (!P.has(x.status)) return;
 		let e = globalThis.setTimeout(() => {
-			x((e) => e === b ? {
+			S((e) => e === x ? {
 				value: o,
 				status: "idle"
 			} : e);
 		}, N);
 		return () => globalThis.clearTimeout(e);
-	}, [b, o]);
-	async function w() {
-		S.current += 1;
-		let e = S.current;
-		x({
+	}, [x, o]);
+	async function T() {
+		C.current += 1;
+		let e = C.current;
+		S({
 			value: o,
 			status: "pending"
 		});
 		try {
-			await navigator.clipboard.writeText(typeof o == "string" ? o : o()), S.current === e && x({
+			await navigator.clipboard.writeText(typeof o == "string" ? o : o()), C.current === e && S({
 				value: o,
 				status: "copied"
 			});
 		} catch {
-			S.current === e && x({
+			C.current === e && S({
 				value: o,
 				status: "failed"
 			});
 		}
 	}
-	let T = C === "copied" ? f : v, E = {
+	let E = w === "copied" ? f : v, D = {
 		idle: "",
 		pending: "",
 		copied: `${d} copied`,
 		failed: `Could not copy ${d}. Select and copy the value.`
-	}, D = r({ onClick: () => {
-		w();
+	}, O = r({ onClick: () => {
+		T();
 	} }, { onClick: _ });
 	return /* @__PURE__ */ u(n, {
-		...y,
-		...D,
+		...b,
+		render: y,
+		...O,
 		...e({
 			className: m,
 			style: h,
-			styles: { className: "x3nfvp2 x6s0dn4 x193iq5w x16exltd xwu7q15 xbgj81g x1717udv xc342km xjbqb8w x153jb6y x1hz01jw xvmahel xtqrqnz x1778rvt x1yc453h x1ypdohk x1wlwa7r x19rmrnh x9v5kkp x13qnu6 x7s97pk" }
+			styles: {
+				0: {},
+				1: { className: "x3nfvp2 x6s0dn4 x193iq5w x16exltd xwu7q15 xbgj81g x1717udv xc342km xjbqb8w x153jb6y x1hz01jw xvmahel xtqrqnz x1778rvt x1yc453h x1ypdohk x1wlwa7r x19rmrnh x9v5kkp x13qnu6 x7s97pk" }
+			}[y === void 0 | 0]
 		}),
 		type: "button",
 		"aria-label": `Copy ${d}`,
-		"aria-busy": C === "pending" || y["aria-busy"],
-		disabled: g || C === "pending",
-		title: typeof o == "string" ? o : d,
+		"aria-busy": w === "pending" || b["aria-busy"],
+		disabled: g || w === "pending",
+		focusableWhenDisabled: w === "pending" || b.focusableWhenDisabled,
+		title: b.title ?? (typeof o == "string" ? o : d),
 		children: [
 			/* @__PURE__ */ l("span", {
 				className: "xeuugli xj0a0fe xss6m8b x1hx0egp",
-				children: C === "copied" ? "Copied" : p ?? (typeof o == "string" ? o : d)
+				children: w === "copied" ? "Copied" : p ?? (typeof o == "string" ? o : d)
 			}),
-			/* @__PURE__ */ l(T, {
+			/* @__PURE__ */ l(E, {
 				size: 12,
 				"aria-hidden": !0,
 				className: "x2lah0s"
@@ -378,7 +383,7 @@ function F({ value: o, label: d, children: p, className: m, style: h, disabled:
 			/* @__PURE__ */ l("span", {
 				role: "status",
 				...i.props(t.hidden),
-				children: E[C]
+				children: D[w]
 			})
 		]
 	});
@@ -478,13 +483,13 @@ var W = {
 	Header: R,
 	Trigger: z,
 	Panel: B
-}, te = {
+}, G = {
 	Root: V,
 	Trigger: H,
 	Panel: U
 };
 // packages/core/src/surfaces.tsx
-function G({ padded: e = !0, ...t }) {
+function te({ padded: e = !0, ...t }) {
 	return /* @__PURE__ */ l("section", { ...r({
 		0: { className: "xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi xpvm0e4 xb3r6kr x1hz01jw xvmahel" },
 		1: { className: "xmkeg23 x1y0btm7 x1ey3b81 x1ok0vyi xpvm0e4 xb3r6kr x1hz01jw xvmahel x1jvlu93" }
@@ -672,4 +677,4 @@ function de({ children: e, tone: t = "neutral", ...n }) {
 		}), e]
 	});
 }
-export { M as _, le as a, ee as b, ae as c, G as d, K as f, F as g, te as h, se as i, J as l, W as m, oe as n, de as o, q as p, ce as r, $ as s, ue as t, Y as u, D as v, k as x, O as y };
+export { M as _, le as a, k as b, ae as c, te as d, K as f, F as g, G as h, se as i, J as l, W as m, oe as n, de as o, q as p, ce as r, $ as s, ue as t, Y as u, D as v, ee as x, O as y };

package/dist/{src-B_DCatpY.js → src-DV0BNk1M.js}

@@ -1,4 +1,4 @@
-import { i as e, s as t } from "./src-BkCsvZGi.js";
+import { i as e, s as t } from "./src-Bc5sEhdO.js";
 import { t as n } from "./accessibility-C-aIZ1Yx.js";
 import { n as r, t as i } from "./popup-styles-CvtZDE2t.js";
 import { t as a } from "./style-composition-uYlczSsB.js";

package/dist/{src-DjTM64tN.js → src-Eg_ytPjv.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./style-composition-uYlczSsB.js";
-import { i as t, s as n } from "./src-BkCsvZGi.js";
+import { i as t, s as n } from "./src-Bc5sEhdO.js";
 import { mergeProps as r } from "@base-ui/react/merge-props";
 import * as i from "@stylexjs/stylex";
 import { useId as a } from "react";
@@ -1084,7 +1084,7 @@ function Je({ label: e, description: t, controlId: n, children: r }) {
 				children: t
 			})]
 		}), /* @__PURE__ */ o("div", {
-			className: "xeuugli x2lah0s",
+			className: "xeuugli x193iq5w x2lah0s",
 			children: r
 		})]
 	});
@@ -1094,7 +1094,7 @@ function Ye({ title: e, description: r, children: i }) {
 	let c = a();
 	return /* @__PURE__ */ s("section", {
 		"aria-labelledby": c,
-		className: "xrvj5dj x1n8ia3y xeuugli",
+		className: "xrvj5dj x1mkdm3x x1n8ia3y xeuugli",
 		children: [/* @__PURE__ */ s("header", {
 			className: "xrvj5dj xunmzkg xeuugli",
 			children: [/* @__PURE__ */ o(n, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {