@expressive/ui 0.0.0 → 0.1.0

package/README.md

@@ -1,3 +1,49 @@
 # @expressive/ui
 
-Placeholder release. Components for Expressive MVC - see https://github.com/gabeklein/expressive-ui.
+Components for [Expressive](https://github.com/gabeklein/expressive) apps - every piece a function component you can swap by prop or subclass.
+
+`Button`, `Calendar`, `Dialog`, `Dropzone`, `Form` (`Field`, `Submit`), `Layout`, `Popover`, `Select`, `Table` (`Column`).
+
+Two entries export the same names:
+
+- `@expressive/ui/dom` - styled for `@expressive/dom`, plus the icons `Caret`, `Check`, `Cross`, `Spinner`, `Upload`.
+- `@expressive/ui` - the same components without a look: state, keyboard, focus and ARIA, rendered through pieces that throw until a subclass provides them. No `@expressive/dom` import, so any mvc host can skin them.
+
+```tsx
+import { Dialog } from '@expressive/ui/dom';
+
+const Tall = (props) => <Dialog.Panel _tall {...props} />;
+
+<Dialog Panel={Tall} />;
+```
+
+A skin of your own spreads the base's `*Props` getters onto its elements and stays accessible:
+
+```tsx
+import { Select } from '@expressive/ui';
+
+class Fruit extends Select {
+  Option: Select.Item = ({ option, index }) => {
+    const { active, props } = Select.get().optionProps(option, index);
+
+    return <li {...props} _active={active}>{option.label}</li>;
+  };
+  // Root, Control, Values, Value, Input, Toggle, Menu likewise
+}
+```
+
+```bash
+npm install @expressive/ui @expressive/mvc @expressive/dom
+```
+
+`@expressive/dom` is needed only for `/dom`. Scope and status in [FEATURE.md](FEATURE.md).
+
+## Develop
+
+```bash
+bun install
+bun run test    # typecheck + coverage (100% gate)
+bun run build
+bun run dev     # examples site with live source, http://localhost:3200
+bun run e2e     # Playwright specs beside each example
+```

package/dist/button/base.d.ts

@@ -0,0 +1,63 @@
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/button/base.d.ts
+declare namespace Button {
+  type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';
+  type Size = 'sm' | 'md' | 'lg';
+  type Status = 'idle' | 'pending' | 'done' | 'error';
+  type Wrap = (props: {
+    children?: Component.Node;
+  }) => Component.Node;
+  type Mark = (props: {
+    status: Status;
+  }) => Component.Node;
+}
+/**
+ * Button behavior without a look: press handling, async status, debounce and ARIA, assembled from pieces.
+ *
+ * `Root` and `Label` are placeholders that throw when rendered - a skin assigns them. `Status` renders nothing
+ * unless assigned. `Root` spreads `rootProps.props` onto its element to stay accessible.
+ */
+declare class Button extends Component {
+  onClick?: (event: MouseEvent) => unknown;
+  onError?: (error: Error) => void;
+  type: 'button' | 'submit' | 'reset';
+  variant: Button.Variant;
+  size: Button.Size;
+  disabled: boolean;
+  /** Show as pending regardless of `onClick` - for work started elsewhere. */
+  pending: boolean;
+  /** Milliseconds after an accepted press during which presses are dropped. */
+  debounce: number;
+  /** Milliseconds a done or error status shows before returning to idle. */
+  settle: number;
+  status: Button.Status;
+  error?: Error;
+  Root: Button.Wrap;
+  Label: Button.Wrap;
+  Status: Button.Mark;
+  constructor(...args: Model.Args);
+  /** Whether a press would be ignored right now. */
+  get busy(): boolean;
+  /** For the button element, with `busy` and the shown `status` for styling. */
+  get rootProps(): {
+    busy: boolean;
+    status: Button.Status;
+    props: {
+      readonly type: "button" | "submit" | "reset";
+      readonly disabled: boolean;
+      readonly 'aria-busy': boolean;
+      readonly 'aria-disabled': true | undefined;
+      readonly 'data-status': Button.Status;
+      readonly onClick: (event: MouseEvent) => void;
+    };
+  };
+  press(event: MouseEvent): void;
+  private track;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+//#endregion
+export { Button };
+//# sourceMappingURL=base.d.ts.map

package/dist/button/base.js

@@ -0,0 +1,90 @@
+import { missing, none } from "../piece.js";
+import { Component } from "@expressive/mvc";
+import { jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/button/base.tsx
+const COOLDOWN = /* @__PURE__ */ new WeakMap();
+const SETTLE = /* @__PURE__ */ new WeakMap();
+/**
+* Button behavior without a look: press handling, async status, debounce and ARIA, assembled from pieces.
+*
+* `Root` and `Label` are placeholders that throw when rendered - a skin assigns them. `Status` renders nothing
+* unless assigned. `Root` spreads `rootProps.props` onto its element to stay accessible.
+*/
+var Button = class extends Component {
+	onClick = void 0;
+	onError = void 0;
+	type = "button";
+	variant = "primary";
+	size = "md";
+	disabled = false;
+	/** Show as pending regardless of `onClick` - for work started elsewhere. */
+	pending = false;
+	/** Milliseconds after an accepted press during which presses are dropped. */
+	debounce = 0;
+	/** Milliseconds a done or error status shows before returning to idle. */
+	settle = 1500;
+	status = "idle";
+	error = void 0;
+	Root = missing("Button.Root");
+	Label = missing("Button.Label");
+	Status = none;
+	constructor(...args) {
+		super(...args, () => {
+			this.get(null, () => clearTimeout(SETTLE.get(this)));
+		});
+	}
+	/** Whether a press would be ignored right now. */
+	get busy() {
+		return this.pending || this.status == "pending";
+	}
+	/** For the button element, with `busy` and the shown `status` for styling. */
+	get rootProps() {
+		const { type, disabled, busy, status, pending } = this;
+		const shown = pending ? "pending" : status;
+		return {
+			busy,
+			status: shown,
+			props: {
+				type,
+				disabled,
+				"aria-busy": busy,
+				"aria-disabled": busy || void 0,
+				"data-status": shown,
+				onClick: this.press
+			}
+		};
+	}
+	press(event) {
+		const now = Date.now();
+		if (this.disabled || this.busy || now < (COOLDOWN.get(this) || 0)) {
+			event.preventDefault();
+			return;
+		}
+		if (this.debounce) COOLDOWN.set(this, now + this.debounce);
+		const result = this.onClick && this.onClick(event);
+		if (result instanceof Promise) this.track(result);
+	}
+	async track(result) {
+		clearTimeout(SETTLE.get(this));
+		this.status = "pending";
+		this.error = void 0;
+		try {
+			await result;
+			this.status = "done";
+		} catch (error) {
+			this.error = error instanceof Error ? error : new Error(String(error));
+			this.status = "error";
+			if (this.onError) this.onError(this.error);
+		}
+		SETTLE.set(this, setTimeout(() => this.status = "idle", this.settle));
+	}
+	render(props) {
+		const { status } = this.rootProps;
+		return /* @__PURE__ */ jsxs(this.Root, { children: [/* @__PURE__ */ jsx(this.Label, { children: props.children }), status != "idle" && /* @__PURE__ */ jsx(this.Status, { status })] });
+	}
+};
+
+//#endregion
+export { Button };
+//# sourceMappingURL=base.js.map

package/dist/button/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/button/base.tsx"],"sourcesContent":["import { Component, type Model } from '@expressive/mvc';\n\nimport { missing, none } from '../piece';\n\ndeclare namespace Button {\n  type Variant = 'primary' | 'secondary' | 'ghost' | 'danger';\n  type Size = 'sm' | 'md' | 'lg';\n  type Status = 'idle' | 'pending' | 'done' | 'error';\n\n  type Wrap = (props: { children?: Component.Node }) => Component.Node;\n  type Mark = (props: { status: Status }) => Component.Node;\n}\n\nconst COOLDOWN = new WeakMap<Button, number>();\n\nconst SETTLE = new WeakMap<Button, ReturnType<typeof setTimeout>>();\n\n/**\n * Button behavior without a look: press handling, async status, debounce and ARIA, assembled from pieces.\n *\n * `Root` and `Label` are placeholders that throw when rendered - a skin assigns them. `Status` renders nothing\n * unless assigned. `Root` spreads `rootProps.props` onto its element to stay accessible.\n */\nclass Button extends Component {\n  onClick?: (event: MouseEvent) => unknown = undefined;\n  onError?: (error: Error) => void = undefined;\n\n  type: 'button' | 'submit' | 'reset' = 'button';\n  variant: Button.Variant = 'primary';\n  size: Button.Size = 'md';\n  disabled = false;\n\n  /** Show as pending regardless of `onClick` - for work started elsewhere. */\n  pending = false;\n\n  /** Milliseconds after an accepted press during which presses are dropped. */\n  debounce = 0;\n\n  /** Milliseconds a done or error status shows before returning to idle. */\n  settle = 1500;\n\n  status: Button.Status = 'idle';\n  error?: Error = undefined;\n\n  Root: Button.Wrap = missing('Button.Root');\n  Label: Button.Wrap = missing('Button.Label');\n  Status: Button.Mark = none;\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(null, () => clearTimeout(SETTLE.get(this)));\n    });\n  }\n\n  /** Whether a press would be ignored right now. */\n  get busy(): boolean {\n    return this.pending || this.status == 'pending';\n  }\n\n  /** For the button element, with `busy` and the shown `status` for styling. */\n  get rootProps() {\n    const { type, disabled, busy, status, pending } = this;\n    const shown: Button.Status = pending ? 'pending' : status;\n\n    return {\n      busy,\n      status: shown,\n      props: {\n        type,\n        disabled,\n        'aria-busy': busy,\n        'aria-disabled': busy || undefined,\n        'data-status': shown,\n        onClick: this.press\n      } as const\n    };\n  }\n\n  press(event: MouseEvent) {\n    const now = Date.now();\n\n    if (this.disabled || this.busy || now < (COOLDOWN.get(this) || 0)) {\n      event.preventDefault();\n      return;\n    }\n\n    if (this.debounce) COOLDOWN.set(this, now + this.debounce);\n\n    const result = this.onClick && this.onClick(event);\n\n    if (result instanceof Promise) this.track(result);\n  }\n\n  private async track(result: Promise<unknown>) {\n    clearTimeout(SETTLE.get(this));\n    this.status = 'pending';\n    this.error = undefined;\n\n    try {\n      await result;\n      this.status = 'done';\n    } catch (error) {\n      this.error = error instanceof Error ? error : new Error(String(error));\n      this.status = 'error';\n\n      if (this.onError) this.onError(this.error);\n    }\n\n    SETTLE.set(this, setTimeout(() => (this.status = 'idle'), this.settle));\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { status } = this.rootProps;\n\n    return (\n      <this.Root>\n        <this.Label>{props.children}</this.Label>\n        {status != 'idle' && <this.Status status={status} />}\n      </this.Root>\n    );\n  }\n}\n\nexport { Button };\n"],"mappings":";;;;;AAaA,MAAM,2BAAW,IAAI,SAAyB;AAE9C,MAAM,yBAAS,IAAI,SAAgD;;;;;;;AAQnE,IAAM,SAAN,cAAqB,UAAU;CAC7B,UAA2C;CAC3C,UAAmC;CAEnC,OAAsC;CACtC,UAA0B;CAC1B,OAAoB;CACpB,WAAW;;CAGX,UAAU;;CAGV,WAAW;;CAGX,SAAS;CAET,SAAwB;CACxB,QAAgB;CAEhB,OAAoB,QAAQ,cAAc;CAC1C,QAAqB,QAAQ,eAAe;CAC5C,SAAsB;CAEtB,YAAY,GAAG,MAAkB;AAC/B,QAAM,GAAG,YAAY;AACnB,QAAK,IAAI,YAAY,aAAa,OAAO,IAAI,KAAK,CAAC,CAAC;IACpD;;;CAIJ,IAAI,OAAgB;AAClB,SAAO,KAAK,WAAW,KAAK,UAAU;;;CAIxC,IAAI,YAAY;EACd,MAAM,EAAE,MAAM,UAAU,MAAM,QAAQ,YAAY;EAClD,MAAM,QAAuB,UAAU,YAAY;AAEnD,SAAO;GACL;GACA,QAAQ;GACR,OAAO;IACL;IACA;IACA,aAAa;IACb,iBAAiB,QAAQ;IACzB,eAAe;IACf,SAAS,KAAK;IACf;GACF;;CAGH,MAAM,OAAmB;EACvB,MAAM,MAAM,KAAK,KAAK;AAEtB,MAAI,KAAK,YAAY,KAAK,QAAQ,OAAO,SAAS,IAAI,KAAK,IAAI,IAAI;AACjE,SAAM,gBAAgB;AACtB;;AAGF,MAAI,KAAK,SAAU,UAAS,IAAI,MAAM,MAAM,KAAK,SAAS;EAE1D,MAAM,SAAS,KAAK,WAAW,KAAK,QAAQ,MAAM;AAElD,MAAI,kBAAkB,QAAS,MAAK,MAAM,OAAO;;CAGnD,MAAc,MAAM,QAA0B;AAC5C,eAAa,OAAO,IAAI,KAAK,CAAC;AAC9B,OAAK,SAAS;AACd,OAAK,QAAQ;AAEb,MAAI;AACF,SAAM;AACN,QAAK,SAAS;WACP,OAAO;AACd,QAAK,QAAQ,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC;AACtE,QAAK,SAAS;AAEd,OAAI,KAAK,QAAS,MAAK,QAAQ,KAAK,MAAM;;AAG5C,SAAO,IAAI,MAAM,iBAAkB,KAAK,SAAS,QAAS,KAAK,OAAO,CAAC;;CAGzE,OAAO,OAAsD;EAC3D,MAAM,EAAE,WAAW,KAAK;AAExB,SACE,qBAAC,KAAK,mBACJ,oBAAC,KAAK,mBAAO,MAAM,WAAsB,EACxC,UAAU,UAAU,oBAAC,KAAK,UAAe,SAAU,IAC1C"}

package/dist/button/button.d.ts

@@ -0,0 +1,56 @@
+import { Button as Button$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/button/button.d.ts
+declare namespace Button {
+  type Variant = Button$1.Variant;
+  type Size = Button$1.Size;
+  type Status = Button$1.Status;
+}
+/**
+ * Button with variants, sizes and a status for async work.
+ *
+ * When `onClick` returns a promise the button shows a spinner and ignores presses until it settles, then shows
+ * done or error for `settle` milliseconds. A rejection is kept on `error` and passed to `onError`. `debounce`
+ * drops presses that follow an accepted one within that many milliseconds. `data-status` on the element mirrors
+ * the status. Pieces - `Root`, `Label`, `Status` - are function components reading `Button.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
+ * <Button variant="secondary" onClick={() => this.save()}>Save</Button>
+ */
+declare class Button extends Button$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 { Button };
+//# sourceMappingURL=button.d.ts.map

package/dist/button/button.js

@@ -0,0 +1,138 @@
+import { Button as Button$1 } from "./base.js";
+import { Check } from "../icons/check.js";
+import { Cross } from "../icons/cross.js";
+import { Spinner } from "../icons/spinner.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/button/button.tsx
+const Root = ({ children }) => {
+	const { variant, size, rootProps } = Button$1.get();
+	const { busy, status, props } = rootProps;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		_secondary: variant == "secondary",
+		_ghost: variant == "ghost",
+		_danger: variant == "danger",
+		_sm: size == "sm",
+		_lg: size == "lg",
+		_busy: busy,
+		_failed: status == "error",
+		children
+	});
+};
+style(Root, {
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "8px",
+	height: "36px",
+	padding: "0 16px",
+	border: "1px solid transparent",
+	borderRadius: "6px",
+	background: "var(--ui-accent, #2684ff)",
+	color: "#fff",
+	font: "inherit",
+	fontWeight: "500",
+	whiteSpace: "nowrap",
+	cursor: "pointer",
+	userSelect: "none",
+	transition: "filter 100ms, background 100ms, transform 50ms",
+	":hover": { filter: "brightness(1.08)" },
+	":active": { transform: "scale(0.98)" },
+	":focus-visible": {
+		outline: "2px solid var(--ui-accent, #2684ff)",
+		outlineOffset: "2px"
+	},
+	":disabled": {
+		opacity: "0.5",
+		cursor: "not-allowed",
+		filter: "none",
+		transform: "none"
+	},
+	_secondary: {
+		background: "var(--ui-surface, #fff)",
+		borderColor: "var(--ui-line, #ccc)",
+		color: "inherit",
+		":hover": {
+			filter: "none",
+			background: "var(--ui-highlight, #deebff)"
+		}
+	},
+	_ghost: {
+		background: "none",
+		color: "inherit",
+		":hover": {
+			filter: "none",
+			background: "var(--ui-highlight, #deebff)"
+		}
+	},
+	_danger: { background: "var(--ui-danger, #e5484d)" },
+	_sm: {
+		height: "30px",
+		padding: "0 10px",
+		fontSize: "13px"
+	},
+	_lg: {
+		height: "44px",
+		padding: "0 22px",
+		fontSize: "16px"
+	},
+	_busy: {
+		cursor: "progress",
+		":active": { transform: "none" }
+	},
+	_failed: {
+		background: "var(--ui-danger, #e5484d)",
+		borderColor: "var(--ui-danger, #e5484d)",
+		color: "#fff"
+	}
+});
+const Label = ({ children }) => {
+	const { status } = Button$1.get().rootProps;
+	return /* @__PURE__ */ jsx("span", {
+		_marked: status != "idle",
+		children
+	});
+};
+style(Label, {
+	transition: "opacity 100ms",
+	_marked: { opacity: "0" }
+});
+const Status = ({ status }) => {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: status == "pending" ? /* @__PURE__ */ jsx(Spinner, {}) : status == "done" ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Cross, {})
+	});
+};
+style(Status, {
+	position: "absolute",
+	inset: "0",
+	display: "grid",
+	placeItems: "center"
+});
+/**
+* Button with variants, sizes and a status for async work.
+*
+* When `onClick` returns a promise the button shows a spinner and ignores presses until it settles, then shows
+* done or error for `settle` milliseconds. A rejection is kept on `error` and passed to `onError`. `debounce`
+* drops presses that follow an accepted one within that many milliseconds. `data-status` on the element mirrors
+* the status. Pieces - `Root`, `Label`, `Status` - are function components reading `Button.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
+* <Button variant="secondary" onClick={() => this.save()}>Save</Button>
+*/
+var Button = class extends Button$1 {
+	static Root = Root;
+	static Label = Label;
+	static Status = Status;
+	Root = Root;
+	Label = Label;
+	Status = Status;
+};
+
+//#endregion
+export { Button };
+//# sourceMappingURL=button.js.map

package/dist/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["Base.Button"],"sources":["../../src/button/button.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { Check, Cross, Spinner } from '../icons';\nimport * as Base from './base';\n\ndeclare namespace Button {\n  type Variant = Base.Button.Variant;\n  type Size = Base.Button.Size;\n  type Status = Base.Button.Status;\n}\n\nconst Root = ({ children }: { children?: Component.Node }): Component.Node => {\n  const { variant, size, rootProps } = Base.Button.get();\n  const { busy, status, props } = rootProps;\n\n  return (\n    <button\n      {...props}\n      _secondary={variant == 'secondary'}\n      _ghost={variant == 'ghost'}\n      _danger={variant == 'danger'}\n      _sm={size == 'sm'}\n      _lg={size == 'lg'}\n      _busy={busy}\n      _failed={status == 'error'}>\n      {children}\n    </button>\n  );\n};\n\nstyle(Root, {\n  position: 'relative',\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: '8px',\n  height: '36px',\n  padding: '0 16px',\n  border: '1px solid transparent',\n  borderRadius: '6px',\n  background: 'var(--ui-accent, #2684ff)',\n  color: '#fff',\n  font: 'inherit',\n  fontWeight: '500',\n  whiteSpace: 'nowrap',\n  cursor: 'pointer',\n  userSelect: 'none',\n  transition: 'filter 100ms, background 100ms, transform 50ms',\n  ':hover': {\n    filter: 'brightness(1.08)'\n  },\n  ':active': {\n    transform: 'scale(0.98)'\n  },\n  ':focus-visible': {\n    outline: '2px solid var(--ui-accent, #2684ff)',\n    outlineOffset: '2px'\n  },\n  ':disabled': {\n    opacity: '0.5',\n    cursor: 'not-allowed',\n    filter: 'none',\n    transform: 'none'\n  },\n  _secondary: {\n    background: 'var(--ui-surface, #fff)',\n    borderColor: 'var(--ui-line, #ccc)',\n    color: 'inherit',\n    ':hover': {\n      filter: 'none',\n      background: 'var(--ui-highlight, #deebff)'\n    }\n  },\n  _ghost: {\n    background: 'none',\n    color: 'inherit',\n    ':hover': {\n      filter: 'none',\n      background: 'var(--ui-highlight, #deebff)'\n    }\n  },\n  _danger: {\n    background: 'var(--ui-danger, #e5484d)'\n  },\n  _sm: {\n    height: '30px',\n    padding: '0 10px',\n    fontSize: '13px'\n  },\n  _lg: {\n    height: '44px',\n    padding: '0 22px',\n    fontSize: '16px'\n  },\n  _busy: {\n    cursor: 'progress',\n    ':active': {\n      transform: 'none'\n    }\n  },\n  _failed: {\n    background: 'var(--ui-danger, #e5484d)',\n    borderColor: 'var(--ui-danger, #e5484d)',\n    color: '#fff'\n  }\n});\n\nconst Label = ({ children }: { children?: Component.Node }): Component.Node => {\n  const { status } = Base.Button.get().rootProps;\n\n  return <span _marked={status != 'idle'}>{children}</span>;\n};\n\nstyle(Label, {\n  transition: 'opacity 100ms',\n  _marked: {\n    opacity: '0'\n  }\n});\n\nconst Status = ({ status }: { status: Button.Status }): Component.Node => {\n  return (\n    <span aria-hidden=\"true\">\n      {status == 'pending' ? <Spinner /> : status == 'done' ? <Check /> : <Cross />}\n    </span>\n  );\n};\n\nstyle(Status, {\n  position: 'absolute',\n  inset: '0',\n  display: 'grid',\n  placeItems: 'center'\n});\n\n/**\n * Button with variants, sizes and a status for async work.\n *\n * When `onClick` returns a promise the button shows a spinner and ignores presses until it settles, then shows\n * done or error for `settle` milliseconds. A rejection is kept on `error` and passed to `onError`. `debounce`\n * drops presses that follow an accepted one within that many milliseconds. `data-status` on the element mirrors\n * the status. Pieces - `Root`, `Label`, `Status` - are function components reading `Button.get()`, each styled on\n * its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics.\n *\n * @example\n * <Button variant=\"secondary\" onClick={() => this.save()}>Save</Button>\n */\nclass Button extends Base.Button {\n  static Root = Root;\n  static Label = Label;\n  static Status = Status;\n\n  Root = Root;\n  Label = Label;\n  Status = Status;\n}\n\nexport { Button, Label, Root, Status };\n"],"mappings":";;;;;;;;AAaA,MAAM,QAAQ,EAAE,eAA8D;CAC5E,MAAM,EAAE,SAAS,MAAM,uBAA0B,KAAK;CACtD,MAAM,EAAE,MAAM,QAAQ,UAAU;AAEhC,QACE,oBAAC;EACC,GAAI;EACJ,YAAY,WAAW;EACvB,QAAQ,WAAW;EACnB,SAAS,WAAW;EACpB,KAAK,QAAQ;EACb,KAAK,QAAQ;EACb,OAAO;EACP,SAAS,UAAU;EAClB;GACM;;AAIb,MAAM,MAAM;CACV,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,KAAK;CACL,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,MAAM;CACN,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,YAAY;CACZ,YAAY;CACZ,UAAU,EACR,QAAQ,oBACT;CACD,WAAW,EACT,WAAW,eACZ;CACD,kBAAkB;EAChB,SAAS;EACT,eAAe;EAChB;CACD,aAAa;EACX,SAAS;EACT,QAAQ;EACR,QAAQ;EACR,WAAW;EACZ;CACD,YAAY;EACV,YAAY;EACZ,aAAa;EACb,OAAO;EACP,UAAU;GACR,QAAQ;GACR,YAAY;GACb;EACF;CACD,QAAQ;EACN,YAAY;EACZ,OAAO;EACP,UAAU;GACR,QAAQ;GACR,YAAY;GACb;EACF;CACD,SAAS,EACP,YAAY,6BACb;CACD,KAAK;EACH,QAAQ;EACR,SAAS;EACT,UAAU;EACX;CACD,KAAK;EACH,QAAQ;EACR,SAAS;EACT,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,WAAW,EACT,WAAW,QACZ;EACF;CACD,SAAS;EACP,YAAY;EACZ,aAAa;EACb,OAAO;EACR;CACF,CAAC;AAEF,MAAM,SAAS,EAAE,eAA8D;CAC7E,MAAM,EAAE,oBAAuB,KAAK,CAAC;AAErC,QAAO,oBAAC;EAAK,SAAS,UAAU;EAAS;GAAgB;;AAG3D,MAAM,OAAO;CACX,YAAY;CACZ,SAAS,EACP,SAAS,KACV;CACF,CAAC;AAEF,MAAM,UAAU,EAAE,aAAwD;AACxE,QACE,oBAAC;EAAK,eAAY;YACf,UAAU,YAAY,oBAAC,YAAU,GAAG,UAAU,SAAS,oBAAC,UAAQ,GAAG,oBAAC,UAAQ;GACxE;;AAIX,MAAM,QAAQ;CACZ,UAAU;CACV,OAAO;CACP,SAAS;CACT,YAAY;CACb,CAAC;;;;;;;;;;;;;AAcF,IAAM,SAAN,cAAqBA,SAAY;CAC/B,OAAO,OAAO;CACd,OAAO,QAAQ;CACf,OAAO,SAAS;CAEhB,OAAO;CACP,QAAQ;CACR,SAAS"}

package/dist/calendar/base.d.ts

@@ -0,0 +1,112 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/calendar/base.d.ts
+declare namespace Calendar {
+  interface Day {
+    date: Date;
+    display: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isPast: boolean;
+    selected: boolean;
+    /** Holds keyboard focus within the grid. */
+    focused: boolean;
+    /** `false` when out of range. */
+    select: false | (() => void);
+  }
+  interface Option {
+    value: number;
+    label: string;
+    disabled: boolean;
+  }
+  /** A boundary date, or `true` for "today". */
+  type Bound = Date | boolean | undefined;
+  type Key = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;
+  type Wrap = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  type Each = (props: {
+    day: Day;
+  }) => Component.Node;
+  type Label = (props: {
+    name: string;
+  }) => Component.Node;
+  type Part = () => Component.Node;
+}
+/**
+ * Month grid date picker behavior without a look: bounds, keyboard navigation, roving focus and ARIA, assembled
+ * from pieces.
+ *
+ * Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching
+ * `*Props` getter onto their element to stay accessible. ARIA a skin writes itself: `role="row"` on `Row`,
+ * `role="columnheader"` on `Weekday`, and `aria-live="polite"` around the month title in `Header`.
+ */
+declare class Calendar extends Component {
+  static months: string[];
+  static weekdays: string[];
+  value?: Date;
+  onChange?: (date: Date) => void;
+  /** The day holding keyboard focus; its month is the one shown. Starts at `value` or today, within `min`/`max`. */
+  focus: Date;
+  min: Calendar.Bound;
+  max: Calendar.Bound;
+  Root: Calendar.Wrap;
+  Header: Calendar.Part;
+  Grid: Calendar.Wrap;
+  Row: Calendar.Wrap;
+  Weekday: Calendar.Label;
+  Day: Calendar.Each;
+  /** Month and year shown, e.g. "January 2024". */
+  get title(): string;
+  /** `false` when the step would cross a bound. */
+  get backMonth(): false | (() => void);
+  get nextMonth(): false | (() => void);
+  /** Whole weeks covering the focused month. */
+  get days(): Calendar.Day[];
+  get months(): Calendar.Option[];
+  get years(): Calendar.Option[];
+  get backProps(): {
+    readonly type: "button";
+    readonly 'aria-label': "Previous month";
+    readonly disabled: boolean;
+    readonly onClick: (() => void) | undefined;
+  };
+  get nextProps(): {
+    readonly type: "button";
+    readonly 'aria-label': "Next month";
+    readonly disabled: boolean;
+    readonly onClick: (() => void) | undefined;
+  };
+  get gridProps(): {
+    readonly role: "grid";
+    readonly 'aria-label': string;
+    readonly onKeyDown: (event: Calendar.Key) => void;
+  };
+  /** For a day's element, with `outside`, `today` and `selected` for styling. Binds `claim` on the focused day. */
+  get dayProps(): (day: Calendar.Day) => {
+    outside: boolean;
+    today: boolean;
+    selected: boolean;
+    props: {
+      readonly type: "button";
+      readonly role: "gridcell";
+      readonly 'aria-label': string;
+      readonly 'aria-selected': boolean;
+      readonly 'aria-current': "date" | undefined;
+      readonly tabIndex: 0 | -1;
+      readonly ref: ((element: HTMLElement | null) => void) | undefined;
+      readonly disabled: boolean;
+      readonly onClick: (() => void) | undefined;
+    };
+  };
+  select(date: Date): void;
+  /** Move focus to `date`, clamped to `min`/`max`. */
+  move(date: Date): void;
+  keyDown(event: Calendar.Key): void;
+  /** Ref for the focused day; moves focus to it after keyboard navigation. `dayProps` binds it. */
+  claim(element: HTMLElement | null): void;
+  render(): Component.Node;
+}
+//#endregion
+export { Calendar };
+//# sourceMappingURL=base.d.ts.map