@mechane-ai/elements 0.5.1 → 0.7.0

package/README.md

@@ -39,8 +39,10 @@ export function Example() {
 ```
 
 Elements supplies compiled ESM, TypeScript declarations, and CSS. Ordinary React consumers need no StyleX compiler.
-Applications install their own reset and fonts. Put reset rules in the `reset` CSS layer; the package's `elements` layer
-comes after it. Application styles and StyleX themes can override that layer.
+Applications install their own reset and fonts. Put reset rules in the `reset` CSS layer. Elements and consumer StyleX
+rules share the compiler's ordered `priority` layers. Keep those layers at the top level: wrapping Elements in another
+layer lets consumer base declarations override component hover and focus states. Unlayered application themes can
+override token defaults.
 
 ## Imports
 

package/dist/ai.js

@@ -1,6 +1,6 @@
-import { b as e, f as t, p as n, t as r, v as i } from "./src-CbYaLvhD.js";
-import { t as a } from "./content-link-Bm-Td5wm.js";
-import { c as o, u as s } from "./src-CjnbzSgq.js";
+import { b as e, f as t, p as n, t as r, v as i } from "./src-BkCsvZGi.js";
+import { t as a } from "./content-link-HLYu0cmz.js";
+import { c as o, u as s } from "./src-DjTM64tN.js";
 import { r as c } from "./src-CfDf8TY8.js";
 import * as l from "@stylexjs/stylex";
 import { createContext as u, useContext as d, useId as f, useRef as p } from "react";
@@ -193,52 +193,53 @@ var I = { action: {
 	keTefX: "xvc5jky",
 	$$css: !0
 } };
-function L({ label: e, value: t, onValueChange: n, onSubmit: r, name: a = "prompt", placeholder: c, maxLength: l, required: u = !0, pending: d = !1, disabled: p = !1, submitDisabled: g = !1, submitLabel: v = "Send message", pendingLabel: y = "Sending…", enterBehavior: x = "newline", description: S, error: C, controls: w, attachments: T, onStop: E, stopPending: D = !1, stopLabel: O = "Stop response" }) {
-	let k = f(), A = p || d;
-	function j(e) {
+function L({ label: e, value: t, onValueChange: n, onSubmit: r, name: a = "prompt", placeholder: c, maxLength: l, required: u = !0, pending: d = !1, disabled: p = !1, submitDisabled: g = !1, submitLabel: v = "Send message", pendingLabel: y = "Sending…", enterBehavior: x = "newline", compact: S = !1, description: C, error: w, controls: T, attachments: E, onStop: D, stopPending: O = !1, stopLabel: k = "Stop response" }) {
+	let A = f(), j = p || d;
+	function M(e) {
 		if (x !== "submit" || e.key !== "Enter" || e.repeat) return;
 		let t = e.altKey || e.ctrlKey || e.metaKey;
-		e.shiftKey || t || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.preventDefault(), !A && !g && E === void 0 && e.currentTarget.form?.requestSubmit());
+		e.shiftKey || t || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || (e.preventDefault(), !j && !g && D === void 0 && e.currentTarget.form?.requestSubmit());
 	}
-	function M(e) {
-		e.preventDefault(), !A && !g && E === void 0 && r(e);
+	function N(e) {
+		e.preventDefault(), !j && !g && D === void 0 && r(e);
 	}
 	return /* @__PURE__ */ h("form", {
-		onSubmit: M,
+		onSubmit: N,
 		className: "x78zum5 xdt5ytf x1n8ia3y xeuugli",
 		children: [
 			/* @__PURE__ */ h(o.Root, {
-				invalid: C !== void 0,
+				invalid: w !== void 0,
 				children: [
 					/* @__PURE__ */ m(o.Label, { children: e }),
 					/* @__PURE__ */ m(s, {
+						compact: S,
 						name: a,
 						value: t,
 						onChange: (e) => n(e.currentTarget.value),
-						onKeyDown: j,
+						onKeyDown: M,
 						placeholder: c,
 						maxLength: l,
 						required: u,
 						disabled: p,
 						readOnly: d,
-						"aria-errormessage": C === void 0 ? void 0 : k
+						"aria-errormessage": w === void 0 ? void 0 : A
 					}),
-					S !== void 0 && /* @__PURE__ */ m(o.Description, { children: S }),
-					C !== void 0 && /* @__PURE__ */ m(o.Error, {
-						id: k,
+					C !== void 0 && /* @__PURE__ */ m(o.Description, { children: C }),
+					w !== void 0 && /* @__PURE__ */ m(o.Error, {
+						id: A,
 						match: !0,
 						role: "alert",
-						children: C
+						children: w
 					})
 				]
 			}),
-			T,
+			E,
 			/* @__PURE__ */ h("div", {
 				className: "x78zum5 x1a02dak x6s0dn4 x1qughib x1n8ia3y",
 				children: [/* @__PURE__ */ m("div", {
 					className: "x78zum5 x1a02dak x6s0dn4 x1hnptsi xeuugli x12lumcd",
-					children: w
-				}), E === void 0 ? /* @__PURE__ */ h(i, {
+					children: T
+				}), D === void 0 ? /* @__PURE__ */ h(i, {
 					xstyle: I.action,
 					type: "submit",
 					variant: "solid",
@@ -253,15 +254,15 @@ function L({ label: e, value: t, onValueChange: n, onSubmit: r, name: a = "promp
 					xstyle: I.action,
 					type: "button",
 					onClick: (e) => {
-						e.preventDefault(), E();
+						e.preventDefault(), D();
 					},
 					disabled: p,
-					pending: D,
+					pending: O,
 					pendingLabel: "Stopping…",
 					children: [/* @__PURE__ */ m(b, {
 						size: 14,
 						"aria-hidden": !0
-					}), O]
+					}), k]
 				})]
 			})
 		]

package/dist/assets/stylex.css

@@ -1382,6 +1382,12 @@
     transform: translateY(0);
   }
 
+  @media (width <= 1100px) {
+    .x1g9v1si.x1g9v1si {
+      display: none;
+    }
+  }
+
   @media (width <= 650px) {
     .xj8mwme.xj8mwme {
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -1574,6 +1580,10 @@
     height: 8px;
   }
 
+  .x1b7uu3i {
+    height: calc(100dvh - var(--xrzfcxb));
+  }
+
   .x16ye13r {
     height: var(--x-height);
   }
@@ -1650,6 +1660,10 @@
     margin-top: var(--x1xijsos);
   }
 
+  .x1y3glee {
+    max-height: 30dvh;
+  }
+
   .x1sslpiy {
     max-height: 320px;
   }
@@ -1702,6 +1716,10 @@
     max-width: 280px;
   }
 
+  .xxc7z9f {
+    max-width: 360px;
+  }
+
   .x1ewvobj {
     max-width: 72ch;
   }
@@ -1754,6 +1772,10 @@
     min-height: 52px;
   }
 
+  .xseoqlg {
+    min-height: 80px;
+  }
+
   .x1avwmir {
     min-height: var(--x10l6e8v);
   }
@@ -1830,10 +1852,6 @@
     min-width: var(--x6uufy4);
   }
 
-  .x167izq3 {
-    min-width: var(--xrzfcxb);
-  }
-
   .xelkyza {
     min-width: var(--xymjgzc);
   }
@@ -1950,6 +1968,10 @@
     width: 40px;
   }
 
+  .x1peuizl {
+    width: 440px;
+  }
+
   .x187nhsf {
     width: 44px;
   }
@@ -2053,6 +2075,12 @@
   .x1t1lzn6:last-child {
     border-bottom-width: 0;
   }
+
+  @media (width <= 1100px) {
+    .x1tama1k.x1tama1k {
+      width: 100%;
+    }
+  }
 }
 
 @layer priority6 {

package/dist/{categorical-values-BfAEQUd0.js → categorical-values-75J0TUkR.js}

@@ -1,5 +1,5 @@
-import { n as e, o as t } from "./chart-frame-bX0VLC_W.js";
-import { n } from "./chart-input--VSrlMl-.js";
+import { n as e, o as t } from "./chart-frame--DOsZKwP.js";
+import { n } from "./chart-input-C-g586YE.js";
 import * as r from "@stylexjs/stylex";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 // packages/charts/src/categorical-values.tsx

package/dist/{chart-frame-bX0VLC_W.js → chart-frame--DOsZKwP.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./src-CbYaLvhD.js";
+import { h as e } from "./src-BkCsvZGi.js";
 import { chartColors as t, colors as n } from "./tokens.js";
 import * as r from "@stylexjs/stylex";
 import { useId as i } from "react";

package/dist/{chart-input--VSrlMl-.js → chart-input-C-g586YE.js}

@@ -1,5 +1,5 @@
-import { d as e } from "./src-CbJTK9oP.js";
-import { r as t } from "./chart-frame-bX0VLC_W.js";
+import { d as e } from "./src-B_DCatpY.js";
+import { r as t } from "./chart-frame--DOsZKwP.js";
 import { jsx as n } from "react/jsx-runtime";
 // packages/charts/src/chart-input.tsx
 function r(e) {