@expressive/ui 0.0.0 → 0.1.0

package/dist/form/form.d.ts

@@ -0,0 +1,123 @@
+import { Button } from "../button/button.js";
+import { Field as Field$1, Form as Form$1, Submit as Submit$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/form/form.d.ts
+declare namespace Form {
+  type Values<T extends Form$1> = Form$1.Values<T>;
+  type Check = Form$1.Check;
+}
+/**
+ * Form whose values are the fields a subclass declares, edited through `Field` children.
+ *
+ * Submitting checks every field, focuses the first that fails, and otherwise passes `values()` to `onSubmit` -
+ * or to `submit()` in a subclass. `pending` holds while that runs; a throw lands on `error` and shows below the
+ * fields. Pieces - `Root`, `Failure` - are function components reading `Form.get()`, each styled on its own; pass
+ * one as a prop or assign it in a subclass to replace it. Stock pieces are statics.
+ *
+ * @example
+ * class Signup extends Form {
+ *   email = '';
+ *   password = '';
+ * }
+ *
+ * <Signup onSubmit={(values) => api.signup(values)}>
+ *   <Field name="email" type="email" />
+ *   <Field name="password" type="password" validate={(value) => value.length >= 8 || 'At least 8 characters'} />
+ *   <Submit>Sign up</Submit>
+ * </Signup>
+ */
+declare class Form extends Form$1 {
+  static Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  static Failure: ({
+    error
+  }: {
+    error: Error;
+  }) => Component.Node;
+  Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  Failure: ({
+    error
+  }: {
+    error: Error;
+  }) => Component.Node;
+}
+/**
+ * Labelled input bound to the enclosing `Form`'s field `name`.
+ *
+ * Required unless `optional`. `validate` returns `false` or a message to fail. A failed field rechecks as it
+ * changes. The input's type follows `type`; `multiline` renders a textarea, and a number field writes numbers.
+ * Pieces - `Root`, `Label`, `Control`, `Message` - are function components reading `Field.get()`, each styled on
+ * its own; a replacement `Control` binds another control by calling `update(value)`. Stock pieces are statics.
+ *
+ * @example
+ * <Field name="email" type="email" hint="We never share it." />
+ */
+declare class Field<T = any> extends Field$1<T> {
+  static Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  static Label: () => Component.Node;
+  static Control: () => Component.Node;
+  static Message: () => Component.Node;
+  Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  Label: () => Component.Node;
+  Control: () => Component.Node;
+  Message: () => Component.Node;
+}
+/**
+ * Submit button for the enclosing `Form`; shows pending while it submits.
+ *
+ * Pieces - `Root`, `Label`, `Status` - are `Button`'s.
+ *
+ * @example
+ * <Submit>Save</Submit>
+ */
+declare class Submit extends Submit$1 {
+  static Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  static Label: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  static Status: ({
+    status
+  }: {
+    status: Button.Status;
+  }) => Component.Node;
+  Root: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  Label: ({
+    children
+  }: {
+    children?: Component.Node;
+  }) => Component.Node;
+  Status: ({
+    status
+  }: {
+    status: Button.Status;
+  }) => Component.Node;
+}
+//#endregion
+export { Field, Form, Submit };
+//# sourceMappingURL=form.d.ts.map

package/dist/form/form.js

@@ -0,0 +1,179 @@
+import { Field as Field$1, Form as Form$1, Submit as Submit$1 } from "./base.js";
+import { Button } from "../button/button.js";
+import { style } from "@expressive/dom";
+import { jsx, jsxs } from "@expressive/dom/jsx-runtime";
+
+//#region src/form/form.tsx
+const Root = ({ children }) => /* @__PURE__ */ jsx("form", {
+	...Form$1.get().formProps,
+	children
+});
+style(Root, {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "stretch",
+	gap: "16px"
+});
+const Failure = ({ error }) => /* @__PURE__ */ jsx("p", {
+	role: "alert",
+	children: error.message
+});
+style(Failure, {
+	margin: "0",
+	color: "var(--ui-danger, #e5484d)"
+});
+/**
+* Form whose values are the fields a subclass declares, edited through `Field` children.
+*
+* Submitting checks every field, focuses the first that fails, and otherwise passes `values()` to `onSubmit` -
+* or to `submit()` in a subclass. `pending` holds while that runs; a throw lands on `error` and shows below the
+* fields. Pieces - `Root`, `Failure` - are function components reading `Form.get()`, each styled on its own; pass
+* one as a prop or assign it in a subclass to replace it. Stock pieces are statics.
+*
+* @example
+* class Signup extends Form {
+*   email = '';
+*   password = '';
+* }
+*
+* <Signup onSubmit={(values) => api.signup(values)}>
+*   <Field name="email" type="email" />
+*   <Field name="password" type="password" validate={(value) => value.length >= 8 || 'At least 8 characters'} />
+*   <Submit>Sign up</Submit>
+* </Signup>
+*/
+var Form = class extends Form$1 {
+	static Root = Root;
+	static Failure = Failure;
+	Root = Root;
+	Failure = Failure;
+};
+const Group = ({ children }) => /* @__PURE__ */ jsx("div", {
+	_check: Field$1.get().type == "checkbox",
+	children
+});
+style(Group, {
+	display: "flex",
+	flexDirection: "column",
+	gap: "6px",
+	_check: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		gap: "8px"
+	}
+});
+const Label = () => {
+	const { optional, labelProps } = Field$1.get();
+	return /* @__PURE__ */ jsxs("label", {
+		...labelProps.props,
+		children: [labelProps.text, optional && /* @__PURE__ */ jsx("span", {
+			_optional: true,
+			children: " (optional)"
+		})]
+	});
+};
+style(Label, {
+	fontWeight: "500",
+	_optional: {
+		color: "var(--ui-muted, #999)",
+		fontWeight: "400"
+	}
+});
+const box = {
+	boxSizing: "border-box",
+	width: "100%",
+	padding: "8px 10px",
+	border: "1px solid var(--ui-line, #ccc)",
+	borderRadius: "4px",
+	background: "var(--ui-surface, #fff)",
+	color: "inherit",
+	font: "inherit",
+	outline: "0",
+	transition: "border-color 100ms, box-shadow 100ms",
+	":focus": {
+		borderColor: "var(--ui-accent, #2684ff)",
+		boxShadow: "0 0 0 1px var(--ui-accent, #2684ff)"
+	},
+	":disabled": { opacity: "0.6" }
+};
+const Control = () => {
+	const { type, multiline, controlProps } = Field$1.get();
+	const { failed, props } = controlProps;
+	if (type == "checkbox") return /* @__PURE__ */ jsx("input", { ...props });
+	if (multiline) return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		_text: true,
+		_failed: failed
+	});
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		_text: true,
+		_failed: failed
+	});
+};
+style(Control, {
+	_text: box,
+	_textarea: {
+		minHeight: "80px",
+		resize: "vertical"
+	},
+	_failed: { borderColor: "var(--ui-danger, #e5484d)" }
+});
+const Message = () => {
+	const { text, failed, props } = Field$1.get().messageProps;
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		_failed: failed,
+		children: text
+	});
+};
+style(Message, {
+	flexBasis: "100%",
+	margin: "0",
+	color: "var(--ui-muted, #999)",
+	fontSize: "13px",
+	_failed: { color: "var(--ui-danger, #e5484d)" }
+});
+/**
+* Labelled input bound to the enclosing `Form`'s field `name`.
+*
+* Required unless `optional`. `validate` returns `false` or a message to fail. A failed field rechecks as it
+* changes. The input's type follows `type`; `multiline` renders a textarea, and a number field writes numbers.
+* Pieces - `Root`, `Label`, `Control`, `Message` - are function components reading `Field.get()`, each styled on
+* its own; a replacement `Control` binds another control by calling `update(value)`. Stock pieces are statics.
+*
+* @example
+* <Field name="email" type="email" hint="We never share it." />
+*/
+var Field = class extends Field$1 {
+	static Root = Group;
+	static Label = Label;
+	static Control = Control;
+	static Message = Message;
+	Root = Group;
+	Label = Label;
+	Control = Control;
+	Message = Message;
+};
+/**
+* Submit button for the enclosing `Form`; shows pending while it submits.
+*
+* Pieces - `Root`, `Label`, `Status` - are `Button`'s.
+*
+* @example
+* <Submit>Save</Submit>
+*/
+var Submit = class extends Submit$1 {
+	static Root = Button.Root;
+	static Label = Button.Label;
+	static Status = Button.Status;
+	Root = Button.Root;
+	Label = Button.Label;
+	Status = Button.Status;
+};
+style(Submit, { alignSelf: "flex-start" });
+
+//#endregion
+export { Field, Form, Submit };
+//# sourceMappingURL=form.js.map

package/dist/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","names":["Base.Form","Base.Field","Base.Submit"],"sources":["../../src/form/form.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { Button } from '../button/button';\nimport * as Base from './base';\n\ndeclare namespace Form {\n  type Values<T extends Base.Form> = Base.Form.Values<T>;\n  type Check = Base.Form.Check;\n}\n\nconst Root = ({ children }: { children?: Component.Node }): Component.Node => (\n  <form {...Base.Form.get().formProps}>{children}</form>\n);\n\nstyle(Root, {\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  gap: '16px'\n});\n\nconst Failure = ({ error }: { error: Error }): Component.Node => (\n  <p role=\"alert\">{error.message}</p>\n);\n\nstyle(Failure, {\n  margin: '0',\n  color: 'var(--ui-danger, #e5484d)'\n});\n\n/**\n * Form whose values are the fields a subclass declares, edited through `Field` children.\n *\n * Submitting checks every field, focuses the first that fails, and otherwise passes `values()` to `onSubmit` -\n * or to `submit()` in a subclass. `pending` holds while that runs; a throw lands on `error` and shows below the\n * fields. Pieces - `Root`, `Failure` - are function components reading `Form.get()`, each styled on its own; pass\n * one as a prop or assign it in a subclass to replace it. Stock pieces are statics.\n *\n * @example\n * class Signup extends Form {\n *   email = '';\n *   password = '';\n * }\n *\n * <Signup onSubmit={(values) => api.signup(values)}>\n *   <Field name=\"email\" type=\"email\" />\n *   <Field name=\"password\" type=\"password\" validate={(value) => value.length >= 8 || 'At least 8 characters'} />\n *   <Submit>Sign up</Submit>\n * </Signup>\n */\nclass Form extends Base.Form {\n  static Root = Root;\n  static Failure = Failure;\n\n  Root = Root;\n  Failure = Failure;\n}\n\nconst Group = ({ children }: { children?: Component.Node }): Component.Node => (\n  <div _check={Base.Field.get().type == 'checkbox'}>{children}</div>\n);\n\nstyle(Group, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '6px',\n  _check: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    gap: '8px'\n  }\n});\n\nconst Label = (): Component.Node => {\n  const { optional, labelProps } = Base.Field.get();\n\n  return (\n    <label {...labelProps.props}>\n      {labelProps.text}\n      {optional && <span _optional> (optional)</span>}\n    </label>\n  );\n};\n\nstyle(Label, {\n  fontWeight: '500',\n  _optional: {\n    color: 'var(--ui-muted, #999)',\n    fontWeight: '400'\n  }\n});\n\nconst box = {\n  boxSizing: 'border-box',\n  width: '100%',\n  padding: '8px 10px',\n  border: '1px solid var(--ui-line, #ccc)',\n  borderRadius: '4px',\n  background: 'var(--ui-surface, #fff)',\n  color: 'inherit',\n  font: 'inherit',\n  outline: '0',\n  transition: 'border-color 100ms, box-shadow 100ms',\n  ':focus': {\n    borderColor: 'var(--ui-accent, #2684ff)',\n    boxShadow: '0 0 0 1px var(--ui-accent, #2684ff)'\n  },\n  ':disabled': {\n    opacity: '0.6'\n  }\n};\n\nconst Control = (): Component.Node => {\n  const { type, multiline, controlProps } = Base.Field.get();\n  const { failed, props } = controlProps;\n\n  if (type == 'checkbox') return <input {...props} />;\n\n  if (multiline) return <textarea {...props} _text _failed={failed} />;\n\n  return <input {...props} _text _failed={failed} />;\n};\n\nstyle(Control, {\n  _text: box,\n  _textarea: {\n    minHeight: '80px',\n    resize: 'vertical'\n  },\n  _failed: {\n    borderColor: 'var(--ui-danger, #e5484d)'\n  }\n});\n\nconst Message = (): Component.Node => {\n  const { text, failed, props } = Base.Field.get().messageProps;\n\n  return (\n    <p {...props} _failed={failed}>\n      {text}\n    </p>\n  );\n};\n\nstyle(Message, {\n  flexBasis: '100%',\n  margin: '0',\n  color: 'var(--ui-muted, #999)',\n  fontSize: '13px',\n  _failed: {\n    color: 'var(--ui-danger, #e5484d)'\n  }\n});\n\n/**\n * Labelled input bound to the enclosing `Form`'s field `name`.\n *\n * Required unless `optional`. `validate` returns `false` or a message to fail. A failed field rechecks as it\n * changes. The input's type follows `type`; `multiline` renders a textarea, and a number field writes numbers.\n * Pieces - `Root`, `Label`, `Control`, `Message` - are function components reading `Field.get()`, each styled on\n * its own; a replacement `Control` binds another control by calling `update(value)`. Stock pieces are statics.\n *\n * @example\n * <Field name=\"email\" type=\"email\" hint=\"We never share it.\" />\n */\nclass Field<T = any> extends Base.Field<T> {\n  static Root = Group;\n  static Label = Label;\n  static Control = Control;\n  static Message = Message;\n\n  Root = Group;\n  Label = Label;\n  Control = Control;\n  Message = Message;\n}\n\n/**\n * Submit button for the enclosing `Form`; shows pending while it submits.\n *\n * Pieces - `Root`, `Label`, `Status` - are `Button`'s.\n *\n * @example\n * <Submit>Save</Submit>\n */\nclass Submit extends Base.Submit {\n  static Root = Button.Root;\n  static Label = Button.Label;\n  static Status = Button.Status;\n\n  Root = Button.Root;\n  Label = Button.Label;\n  Status = Button.Status;\n}\n\nstyle(Submit, {\n  alignSelf: 'flex-start'\n});\n\nexport { Control, Failure, Field, Form, Group, Label, Message, Root, Submit };\n"],"mappings":";;;;;;AAYA,MAAM,QAAQ,EAAE,eACd,oBAAC;CAAK,UAAc,KAAK,CAAC;CAAY;EAAgB;AAGxD,MAAM,MAAM;CACV,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACN,CAAC;AAEF,MAAM,WAAW,EAAE,YACjB,oBAAC;CAAE,MAAK;WAAS,MAAM;EAAY;AAGrC,MAAM,SAAS;CACb,QAAQ;CACR,OAAO;CACR,CAAC;;;;;;;;;;;;;;;;;;;;;AAsBF,IAAM,OAAN,cAAmBA,OAAU;CAC3B,OAAO,OAAO;CACd,OAAO,UAAU;CAEjB,OAAO;CACP,UAAU;;AAGZ,MAAM,SAAS,EAAE,eACf,oBAAC;CAAI,gBAAmB,KAAK,CAAC,QAAQ;CAAa;EAAe;AAGpE,MAAM,OAAO;CACX,SAAS;CACT,eAAe;CACf,KAAK;CACL,QAAQ;EACN,eAAe;EACf,UAAU;EACV,YAAY;EACZ,KAAK;EACN;CACF,CAAC;AAEF,MAAM,cAA8B;CAClC,MAAM,EAAE,UAAU,uBAA0B,KAAK;AAEjD,QACE,qBAAC;EAAM,GAAI,WAAW;aACnB,WAAW,MACX,YAAY,oBAAC;GAAK;aAAU;IAAkB;GACzC;;AAIZ,MAAM,OAAO;CACX,YAAY;CACZ,WAAW;EACT,OAAO;EACP,YAAY;EACb;CACF,CAAC;AAEF,MAAM,MAAM;CACV,WAAW;CACX,OAAO;CACP,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,MAAM;CACN,SAAS;CACT,YAAY;CACZ,UAAU;EACR,aAAa;EACb,WAAW;EACZ;CACD,aAAa,EACX,SAAS,OACV;CACF;AAED,MAAM,gBAAgC;CACpC,MAAM,EAAE,MAAM,WAAW,yBAA4B,KAAK;CAC1D,MAAM,EAAE,QAAQ,UAAU;AAE1B,KAAI,QAAQ,WAAY,QAAO,oBAAC,WAAM,GAAI,QAAS;AAEnD,KAAI,UAAW,QAAO,oBAAC;EAAS,GAAI;EAAO;EAAM,SAAS;GAAU;AAEpE,QAAO,oBAAC;EAAM,GAAI;EAAO;EAAM,SAAS;GAAU;;AAGpD,MAAM,SAAS;CACb,OAAO;CACP,WAAW;EACT,WAAW;EACX,QAAQ;EACT;CACD,SAAS,EACP,aAAa,6BACd;CACF,CAAC;AAEF,MAAM,gBAAgC;CACpC,MAAM,EAAE,MAAM,QAAQ,kBAAqB,KAAK,CAAC;AAEjD,QACE,oBAAC;EAAE,GAAI;EAAO,SAAS;YACpB;GACC;;AAIR,MAAM,SAAS;CACb,WAAW;CACX,QAAQ;CACR,OAAO;CACP,UAAU;CACV,SAAS,EACP,OAAO,6BACR;CACF,CAAC;;;;;;;;;;;;AAaF,IAAM,QAAN,cAA6BC,QAAc;CACzC,OAAO,OAAO;CACd,OAAO,QAAQ;CACf,OAAO,UAAU;CACjB,OAAO,UAAU;CAEjB,OAAO;CACP,QAAQ;CACR,UAAU;CACV,UAAU;;;;;;;;;;AAWZ,IAAM,SAAN,cAAqBC,SAAY;CAC/B,OAAO,OAAO,OAAO;CACrB,OAAO,QAAQ,OAAO;CACtB,OAAO,SAAS,OAAO;CAEvB,OAAO,OAAO;CACd,QAAQ,OAAO;CACf,SAAS,OAAO;;AAGlB,MAAM,QAAQ,EACZ,WAAW,cACZ,CAAC"}

package/dist/icons/caret.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/icons/caret.d.ts
+/** Downward caret for a dropdown; inherits `currentColor`. */
+declare const Caret: () => Component.Node;
+//#endregion
+export { Caret };
+//# sourceMappingURL=caret.d.ts.map

package/dist/icons/caret.js

@@ -0,0 +1,16 @@
+import { icon } from "./icon.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/icons/caret.tsx
+/** Downward caret for a dropdown; inherits `currentColor`. */
+const Caret = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+});
+style(Caret, icon, { transition: "transform 150ms" });
+
+//#endregion
+export { Caret };
+//# sourceMappingURL=caret.js.map

package/dist/icons/caret.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"caret.js","names":[],"sources":["../../src/icons/caret.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport type { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { icon } from './icon';\n\n/** Downward caret for a dropdown; inherits `currentColor`. */\nconst Caret = (): Component.Node => (\n  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <path d=\"M4 6l4 4 4-4\" />\n  </svg>\n);\n\nstyle(Caret, icon, { transition: 'transform 150ms' });\n\nexport { Caret };\n"],"mappings":";;;;;;AAOA,MAAM,cACJ,oBAAC;CAAI,SAAQ;CAAY,eAAY;WACnC,oBAAC,UAAK,GAAE,iBAAiB;EACrB;AAGR,MAAM,OAAO,MAAM,EAAE,YAAY,mBAAmB,CAAC"}

package/dist/icons/check.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/icons/check.d.ts
+/** Check mark for success; inherits `currentColor`. */
+declare const Check: () => Component.Node;
+//#endregion
+export { Check };
+//# sourceMappingURL=check.d.ts.map

package/dist/icons/check.js

@@ -0,0 +1,16 @@
+import { icon } from "./icon.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/icons/check.tsx
+/** Check mark for success; inherits `currentColor`. */
+const Check = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7" })
+});
+style(Check, icon);
+
+//#endregion
+export { Check };
+//# sourceMappingURL=check.js.map

package/dist/icons/check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"check.js","names":[],"sources":["../../src/icons/check.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport type { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { icon } from './icon';\n\n/** Check mark for success; inherits `currentColor`. */\nconst Check = (): Component.Node => (\n  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <path d=\"M3.5 8.5l3 3 6-7\" />\n  </svg>\n);\n\nstyle(Check, icon);\n\nexport { Check };\n"],"mappings":";;;;;;AAOA,MAAM,cACJ,oBAAC;CAAI,SAAQ;CAAY,eAAY;WACnC,oBAAC,UAAK,GAAE,qBAAqB;EACzB;AAGR,MAAM,OAAO,KAAK"}

package/dist/icons/cross.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/icons/cross.d.ts
+/** Cross for clear and remove buttons; inherits `currentColor`. */
+declare const Cross: () => Component.Node;
+//#endregion
+export { Cross };
+//# sourceMappingURL=cross.d.ts.map

package/dist/icons/cross.js

@@ -0,0 +1,16 @@
+import { icon } from "./icon.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/icons/cross.tsx
+/** Cross for clear and remove buttons; inherits `currentColor`. */
+const Cross = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+});
+style(Cross, icon);
+
+//#endregion
+export { Cross };
+//# sourceMappingURL=cross.js.map

package/dist/icons/cross.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross.js","names":[],"sources":["../../src/icons/cross.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport type { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { icon } from './icon';\n\n/** Cross for clear and remove buttons; inherits `currentColor`. */\nconst Cross = (): Component.Node => (\n  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <path d=\"M4 4l8 8M12 4l-8 8\" />\n  </svg>\n);\n\nstyle(Cross, icon);\n\nexport { Cross };\n"],"mappings":";;;;;;AAOA,MAAM,cACJ,oBAAC;CAAI,SAAQ;CAAY,eAAY;WACnC,oBAAC,UAAK,GAAE,uBAAuB;EAC3B;AAGR,MAAM,OAAO,KAAK"}

package/dist/icons/icon.js

@@ -0,0 +1,16 @@
+//#region src/icons/icon.ts
+const icon = {
+	display: "block",
+	flexShrink: "0",
+	width: "16px",
+	height: "16px",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.75",
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+};
+
+//#endregion
+export { icon };
+//# sourceMappingURL=icon.js.map

package/dist/icons/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","names":[],"sources":["../../src/icons/icon.ts"],"sourcesContent":["export const icon = {\n  display: 'block',\n  flexShrink: '0',\n  width: '16px',\n  height: '16px',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: '1.75',\n  strokeLinecap: 'round',\n  strokeLinejoin: 'round'\n};\n"],"mappings":";AAAA,MAAa,OAAO;CAClB,SAAS;CACT,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;CACb,eAAe;CACf,gBAAgB;CACjB"}

package/dist/icons/spinner.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/icons/spinner.d.ts
+/** Spinning arc for pending work; inherits `currentColor`. */
+declare const Spinner: () => Component.Node;
+//#endregion
+export { Spinner };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/icons/spinner.js

@@ -0,0 +1,27 @@
+import { icon } from "./icon.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/icons/spinner.tsx
+/** Spinning arc for pending work; inherits `currentColor`. */
+const Spinner = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M8 2a6 6 0 1 1-6 6",
+		children: /* @__PURE__ */ jsx("animateTransform", { ...spin })
+	})
+});
+style(Spinner, icon);
+const spin = {
+	attributeName: "transform",
+	type: "rotate",
+	from: "0 8 8",
+	to: "360 8 8",
+	dur: "0.8s",
+	repeatCount: "indefinite"
+};
+
+//#endregion
+export { Spinner };
+//# sourceMappingURL=spinner.js.map

package/dist/icons/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../src/icons/spinner.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport type { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { icon } from './icon';\n\n/** Spinning arc for pending work; inherits `currentColor`. */\nconst Spinner = (): Component.Node => (\n  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <path d=\"M8 2a6 6 0 1 1-6 6\">\n      <animateTransform {...spin} />\n    </path>\n  </svg>\n);\n\nstyle(Spinner, icon);\n\nconst spin: {} = {\n  attributeName: 'transform',\n  type: 'rotate',\n  from: '0 8 8',\n  to: '360 8 8',\n  dur: '0.8s',\n  repeatCount: 'indefinite'\n};\n\nexport { Spinner };\n"],"mappings":";;;;;;AAOA,MAAM,gBACJ,oBAAC;CAAI,SAAQ;CAAY,eAAY;WACnC,oBAAC;EAAK,GAAE;YACN,oBAAC,sBAAiB,GAAI,OAAQ;GACzB;EACH;AAGR,MAAM,SAAS,KAAK;AAEpB,MAAM,OAAW;CACf,eAAe;CACf,MAAM;CACN,MAAM;CACN,IAAI;CACJ,KAAK;CACL,aAAa;CACd"}

package/dist/icons/upload.d.ts

@@ -0,0 +1,8 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/icons/upload.d.ts
+/** Upward arrow into a tray, for uploads; inherits `currentColor`. */
+declare const Upload: () => Component.Node;
+//#endregion
+export { Upload };
+//# sourceMappingURL=upload.d.ts.map

package/dist/icons/upload.js

@@ -0,0 +1,16 @@
+import { icon } from "./icon.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/icons/upload.tsx
+/** Upward arrow into a tray, for uploads; inherits `currentColor`. */
+const Upload = () => /* @__PURE__ */ jsx("svg", {
+	viewBox: "0 0 16 16",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: "M8 10V2.5M4.5 6L8 2.5 11.5 6M2.5 10v2.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V10" })
+});
+style(Upload, icon);
+
+//#endregion
+export { Upload };
+//# sourceMappingURL=upload.js.map

package/dist/icons/upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload.js","names":[],"sources":["../../src/icons/upload.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport type { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { icon } from './icon';\n\n/** Upward arrow into a tray, for uploads; inherits `currentColor`. */\nconst Upload = (): Component.Node => (\n  <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n    <path d=\"M8 10V2.5M4.5 6L8 2.5 11.5 6M2.5 10v2.5a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V10\" />\n  </svg>\n);\n\nstyle(Upload, icon);\n\nexport { Upload };\n"],"mappings":";;;;;;AAOA,MAAM,eACJ,oBAAC;CAAI,SAAQ;CAAY,eAAY;WACnC,oBAAC,UAAK,GAAE,6EAA6E;EACjF;AAGR,MAAM,QAAQ,KAAK"}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { Button } from "./button/base.js";
+import { Calendar } from "./calendar/base.js";
+import { Dialog } from "./dialog/base.js";
+import { Dropzone } from "./dropzone/base.js";
+import { Field, Form, Submit } from "./form/base.js";
+import { Layout } from "./layout/base.js";
+import { Popover } from "./popover/base.js";
+import { Select } from "./select/base.js";
+import { CellProps, CellSlot, Column, HeadProps, HeadSlot } from "./table/column.js";
+import { Table } from "./table/base.js";
+export { Button, Calendar, type CellProps, type CellSlot, Column, Dialog, Dropzone, Field, Form, type HeadProps, type HeadSlot, Layout, Popover, Select, Submit, Table };

package/dist/index.js

@@ -0,0 +1,12 @@
+import { Button } from "./button/base.js";
+import { Calendar } from "./calendar/base.js";
+import { Dialog } from "./dialog/base.js";
+import { Dropzone } from "./dropzone/base.js";
+import { Field, Form, Submit } from "./form/base.js";
+import { Layout } from "./layout/base.js";
+import { Popover } from "./popover/base.js";
+import { Select } from "./select/base.js";
+import { Column } from "./table/column.js";
+import { Table } from "./table/base.js";
+
+export { Button, Calendar, Column, Dialog, Dropzone, Field, Form, Layout, Popover, Select, Submit, Table };

package/dist/layout/base.d.ts

@@ -0,0 +1,88 @@
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/layout/base.d.ts
+declare namespace Layout {
+  type Direction = 'row' | 'column';
+  interface HandleProps {
+    /** Index of the pane before this handle. */
+    index: number;
+    /** True while this handle is being dragged. */
+    active: boolean;
+  }
+  type Key = Pick<KeyboardEvent, 'key' | 'preventDefault'>;
+  type Point = Pick<PointerEvent, 'clientX' | 'clientY'>;
+  type Pointer = Point & Pick<PointerEvent, 'button' | 'preventDefault'>;
+  type Style = Record<string, string>;
+  type Root = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  type Handle = (props: HandleProps) => Component.Node;
+}
+/**
+ * Resizable panes without a look: weights, pointer and keyboard resizing and ARIA, assembled from pieces.
+ *
+ * `Root` wraps the panes and spreads `rootProps`, styled by `arrange`. `Handle` sits between neighbors and spreads
+ * `handleProps(index)`. Both are placeholders that throw when rendered, and `arrange` throws when called - a skin
+ * supplies all three.
+ */
+declare class Layout extends Component {
+  /** `row` puts panes side by side. Defaults to across the parent `Layout`, else `row`. */
+  direction?: Layout.Direction;
+  /** Initial weights per pane; read until the first resize, or when the pane count changes. */
+  sizes?: readonly number[];
+  /** Handle thickness in pixels. */
+  gap: number;
+  /** Smallest a pane can be dragged, in pixels. */
+  min: number;
+  /** Weights after a resize. */
+  weights: number[];
+  /** Index of the handle being dragged. */
+  dragging?: number;
+  Root: Layout.Root;
+  Handle: Layout.Handle;
+  protected parent?: Layout;
+  constructor(...args: Model.Args);
+  /** Panes in the last render. */
+  protected panes: number;
+  get row(): boolean;
+  /** For the element holding the panes: its ref, and the style `arrange` gives current weights. */
+  get rootProps(): {
+    ref: (element: HTMLElement | null) => void;
+    style: Layout.Style;
+  };
+  /** For the separator after pane `index`: role, orientation, position as a percentage, focus and resize handlers. */
+  get handleProps(): (index: number) => {
+    readonly role: "separator";
+    readonly 'aria-orientation': "vertical" | "horizontal";
+    readonly 'aria-label': "Resize";
+    readonly 'aria-valuemin': 0;
+    readonly 'aria-valuemax': 100;
+    readonly 'aria-valuenow': number;
+    readonly tabIndex: 0;
+    readonly onPointerDown: (event: Layout.Pointer) => void;
+    readonly onKeyDown: (event: Layout.Key) => void;
+  };
+  /** Style for the root laying panes out by `weights` along the axis, `gap` pixels apart. A skin supplies it. */
+  protected arrange(weights: number[], row: boolean, gap: number): Layout.Style;
+  /** Length of the root along the axis, in pixels. Defaults to the DOM's layout. */
+  protected measure(): number;
+  /**
+   * Report pointer moves to `move` until release or cancel, then call `end`; returns a stop for unmount mid-drag.
+   * Defaults to `document`.
+   */
+  protected follow(move: (event: Layout.Point) => void, end: () => void): () => void;
+  /** Move the handle after pane `index` by `delta` pixels. */
+  resize(index: number, delta: number): void;
+  private pixels;
+  private bind;
+  /** Start dragging the handle after pane `index`, from pointer down. */
+  grab(index: number, event: Layout.Pointer): void;
+  /** Move the handle after pane `index` by 10px per arrow key along the axis. */
+  nudge(index: number, event: Layout.Key): void;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+//#endregion
+export { Layout };
+//# sourceMappingURL=base.d.ts.map