@expressive/ui 0.0.0-stage → 0.1.0

package/dist/table/table.js

@@ -0,0 +1,101 @@
+import { Column } from "./column.js";
+import { Row as Row$1, Table as Table$1 } from "./base.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/table/table.tsx
+const Root = ({ children }) => /* @__PURE__ */ jsx("table", { children });
+style(Root, {
+	width: "100%",
+	borderCollapse: "collapse",
+	fontVariantNumeric: "tabular-nums"
+});
+const Header = ({ children }) => /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children }) });
+const Body = ({ children }) => /* @__PURE__ */ jsx("tbody", { children });
+const pad = {
+	padding: "8px 12px",
+	textAlign: "left"
+};
+const Head = ({ field, className, children }) => {
+	const { size } = field;
+	const width = typeof size == "number" ? `${size}px` : size;
+	return /* @__PURE__ */ jsx("th", {
+		scope: "col",
+		className,
+		style: width && { width },
+		children
+	});
+};
+style(Head, pad, {
+	borderBottom: "1px solid var(--ui-line, #ccc)",
+	color: "var(--ui-muted, #999)",
+	fontSize: "85%",
+	fontWeight: "500"
+});
+var Row = class extends Row$1 {
+	render({ children }) {
+		const { attrs, pressable, selected } = this;
+		return /* @__PURE__ */ jsx("tr", {
+			...attrs,
+			_pressable: pressable,
+			_selected: selected,
+			children
+		});
+	}
+};
+style(Row, {
+	_pressable: {
+		cursor: "pointer",
+		outline: "0",
+		":hover": { background: "var(--ui-highlight, #deebff)" },
+		":focus-visible": { boxShadow: "inset 0 0 0 2px var(--ui-accent, #2684ff)" }
+	},
+	_selected: {
+		background: "var(--ui-accent, #2684ff)",
+		color: "#fff",
+		":hover": { background: "var(--ui-accent, #2684ff)" }
+	}
+});
+const Cell = ({ className, children }) => /* @__PURE__ */ jsx("td", {
+	className,
+	children
+});
+style(Cell, pad, { borderBottom: "1px solid var(--ui-line, #ccc)" });
+const Empty = ({ span }) => {
+	const { empty } = Table$1.get();
+	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+		colSpan: span,
+		children: empty
+	}) });
+};
+style(Empty, { _td: [pad, {
+	textAlign: "center",
+	color: "var(--ui-muted, #999)"
+}] });
+/**
+* Data table whose columns are declared as `Column` children.
+*
+* Pieces - `Root`, `Header`, `Body`, `Head`, `Row`, `Cell`, `Empty` - are function components reading `Table.get()`,
+* each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics. A
+* `Column` can also bring its own `Head` or `Cell`. With `onPress`, rows are focusable and respond to click, Enter
+* and Space; `selected` marks one.
+*
+* @example
+* <Table data={people} rowKey={(person) => person.id}>
+*   <Column name="Name" />
+*   <Column name="Age" format={(person) => `${person.age} yrs`} />
+* </Table>
+*/
+var Table = class extends Table$1 {
+	static Root = Root;
+	static Header = Header;
+	static Body = Body;
+	static Head = Head;
+	static Row = Row;
+	static Cell = Cell;
+	static Empty = Empty;
+};
+
+//#endregion
+export { Table };
+//# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":["Base.Row","Base.Table"],"sources":["../../src/table/table.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport type { CellProps, CellSlot, HeadProps, HeadSlot } from './column';\nimport * as Base from './base';\n\ndeclare namespace Table {\n  type RowProps<T = any> = Base.Table.RowProps<T>;\n}\n\nconst Root = ({ children }: { children: Component.Node }): Component.Node => <table>{children}</table>;\n\nstyle(Root, {\n  width: '100%',\n  borderCollapse: 'collapse',\n  fontVariantNumeric: 'tabular-nums'\n});\n\nconst Header = ({ children }: { children: Component.Node }): Component.Node => (\n  <thead>\n    <tr>{children}</tr>\n  </thead>\n);\n\nconst Body = ({ children }: { children: Component.Node }): Component.Node => <tbody>{children}</tbody>;\n\nconst pad = {\n  padding: '8px 12px',\n  textAlign: 'left'\n};\n\nconst Head = ({ field, className, children }: HeadProps<any>): Component.Node => {\n  const { size } = field;\n  const width = typeof size == 'number' ? `${size}px` : size;\n\n  return (\n    <th scope=\"col\" className={className} style={width && { width }}>\n      {children}\n    </th>\n  );\n};\n\nstyle(Head, pad, {\n  borderBottom: '1px solid var(--ui-line, #ccc)',\n  color: 'var(--ui-muted, #999)',\n  fontSize: '85%',\n  fontWeight: '500'\n});\n\nclass Row<T = any> extends Base.Row<T> {\n  render({ children }: { children: Component.Node }): Component.Node {\n    const { attrs, pressable, selected } = this;\n\n    return (\n      <tr {...attrs} _pressable={pressable} _selected={selected}>\n        {children}\n      </tr>\n    );\n  }\n}\n\nstyle(Row, {\n  _pressable: {\n    cursor: 'pointer',\n    outline: '0',\n    ':hover': {\n      background: 'var(--ui-highlight, #deebff)'\n    },\n    ':focus-visible': {\n      boxShadow: 'inset 0 0 0 2px var(--ui-accent, #2684ff)'\n    }\n  },\n  _selected: {\n    background: 'var(--ui-accent, #2684ff)',\n    color: '#fff',\n    ':hover': {\n      background: 'var(--ui-accent, #2684ff)'\n    }\n  }\n});\n\nconst Cell = ({ className, children }: CellProps<any>): Component.Node => <td className={className}>{children}</td>;\n\nstyle(Cell, pad, {\n  borderBottom: '1px solid var(--ui-line, #ccc)'\n});\n\nconst Empty = ({ span }: { span: number }): Component.Node => {\n  const { empty } = Base.Table.get();\n\n  return (\n    <tr>\n      <td colSpan={span}>{empty}</td>\n    </tr>\n  );\n};\n\nstyle(Empty, {\n  _td: [pad, {\n    textAlign: 'center',\n    color: 'var(--ui-muted, #999)'\n  }]\n});\n\n/**\n * Data table whose columns are declared as `Column` children.\n *\n * Pieces - `Root`, `Header`, `Body`, `Head`, `Row`, `Cell`, `Empty` - are function components reading `Table.get()`,\n * each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics. A\n * `Column` can also bring its own `Head` or `Cell`. With `onPress`, rows are focusable and respond to click, Enter\n * and Space; `selected` marks one.\n *\n * @example\n * <Table data={people} rowKey={(person) => person.id}>\n *   <Column name=\"Name\" />\n *   <Column name=\"Age\" format={(person) => `${person.age} yrs`} />\n * </Table>\n */\nclass Table<T = any> extends Base.Table<T> {\n  static Root: Base.Table.Wrap = Root;\n  static Header: Base.Table.Wrap = Header;\n  static Body: Base.Table.Wrap = Body;\n  static Head: HeadSlot = Head;\n  static Row: typeof Row<any> = Row;\n  static Cell: CellSlot = Cell;\n  static Empty: Base.Table.Fill = Empty;\n}\n\nexport { Column } from './column';\nexport type { CellProps, CellSlot, Field, HeadProps, HeadSlot } from './column';\nexport { Body, Cell, Empty, Head, Header, Root, Row, Table };\n"],"mappings":";;;;;;AAWA,MAAM,QAAQ,EAAE,eAA6D,oBAAC,WAAO,WAAiB;AAEtG,MAAM,MAAM;CACV,OAAO;CACP,gBAAgB;CAChB,oBAAoB;CACrB,CAAC;AAEF,MAAM,UAAU,EAAE,eAChB,oBAAC,qBACC,oBAAC,QAAI,WAAc,GACb;AAGV,MAAM,QAAQ,EAAE,eAA6D,oBAAC,WAAO,WAAiB;AAEtG,MAAM,MAAM;CACV,SAAS;CACT,WAAW;CACZ;AAED,MAAM,QAAQ,EAAE,OAAO,WAAW,eAA+C;CAC/E,MAAM,EAAE,SAAS;CACjB,MAAM,QAAQ,OAAO,QAAQ,WAAW,GAAG,KAAK,MAAM;AAEtD,QACE,oBAAC;EAAG,OAAM;EAAiB;EAAW,OAAO,SAAS,EAAE,OAAO;EAC5D;GACE;;AAIT,MAAM,MAAM,KAAK;CACf,cAAc;CACd,OAAO;CACP,UAAU;CACV,YAAY;CACb,CAAC;AAEF,IAAM,MAAN,cAA2BA,MAAY;CACrC,OAAO,EAAE,YAA0D;EACjE,MAAM,EAAE,OAAO,WAAW,aAAa;AAEvC,SACE,oBAAC;GAAG,GAAI;GAAO,YAAY;GAAW,WAAW;GAC9C;IACE;;;AAKX,MAAM,KAAK;CACT,YAAY;EACV,QAAQ;EACR,SAAS;EACT,UAAU,EACR,YAAY,gCACb;EACD,kBAAkB,EAChB,WAAW,6CACZ;EACF;CACD,WAAW;EACT,YAAY;EACZ,OAAO;EACP,UAAU,EACR,YAAY,6BACb;EACF;CACF,CAAC;AAEF,MAAM,QAAQ,EAAE,WAAW,eAA+C,oBAAC;CAAc;CAAY;EAAc;AAEnH,MAAM,MAAM,KAAK,EACf,cAAc,kCACf,CAAC;AAEF,MAAM,SAAS,EAAE,WAA6C;CAC5D,MAAM,EAAE,kBAAqB,KAAK;AAElC,QACE,oBAAC,kBACC,oBAAC;EAAG,SAAS;YAAO;GAAW,GAC5B;;AAIT,MAAM,OAAO,EACX,KAAK,CAAC,KAAK;CACT,WAAW;CACX,OAAO;CACR,CAAC,EACH,CAAC;;;;;;;;;;;;;;;AAgBF,IAAM,QAAN,cAA6BC,QAAc;CACzC,OAAO,OAAwB;CAC/B,OAAO,SAA0B;CACjC,OAAO,OAAwB;CAC/B,OAAO,OAAiB;CACxB,OAAO,MAAuB;CAC9B,OAAO,OAAiB;CACxB,OAAO,QAAyB"}

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@expressive/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Components for Expressive MVC: host-agnostic behavior from the root, styled for @expressive/dom from /dom, every piece replaceable.",
+  "sideEffects": false,
+  "license": "MIT",
+  "author": {
+    "name": "Gabe Klein",
+    "email": "gabe@termtm.com",
+    "url": "https://github.com/gabeklein"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gabeklein/expressive-ui.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./dom": {
+      "types": "./dist/dom.d.ts",
+      "default": "./dist/dom.js"
+    }
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit --incremental && tsc -p examples",
+    "coverage": "vitest run --coverage",
+    "test": "bun run typecheck && bun run coverage",
+    "dev": "cd examples && expressive dev",
+    "e2e": "cd examples && playwright test",
+    "changeset": "changeset",
+    "ci:version": "changeset version && bun install",
+    "ci:publish": "bun run build && bun .github/scripts/shake-check.ts && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "@expressive/dev": "^0.1.3",
+    "@expressive/dom": "^0.12.1",
+    "@expressive/mvc": "^0.94.3",
+    "@lezer/highlight": "^1.2.5",
+    "@playwright/test": "^1.65.0",
+    "@vitest/coverage-istanbul": "^4.1.10",
+    "happy-dom": "^20.11.1",
+    "tsdown": "^0.20.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@expressive/mvc": "^0.94.3",
+    "@expressive/dom": "^0.12.1"
+  },
+  "peerDependenciesMeta": {
+    "@expressive/dom": {
+      "optional": true
+    }
+  },
+  "packageManager": "bun@1.3.1"
+}