@formbox/htmx 0.3.0

package/dist/templates/TabContainer.html.hbs

@@ -0,0 +1,27 @@
+{{!--
+Template: TabContainer
+
+Inputs:
+- linkId: tab group link id.
+- header/errors: rendered tab group sections.
+- items: tab items with token, label, content, buttonId, panelId, selected, ariaSelected, and tabAction.
+- active: currently selected item.
+- value: active item index.
+- actionName/tabName: submit fields for tab selection.
+- path: renderer node path, when present.
+--}}
+<section{{{attr "data-fb-link-id" linkId}}}>
+  {{#if tabName}}
+    <input type="hidden"{{{attr "name" tabName}}}{{{attr "value" value}}}>
+  {{/if}}
+  {{{header}}}
+  {{{errors}}}
+  <div role="tablist">
+    {{#each items}}
+      <button type="submit" role="tab"{{{attr "id" buttonId}}}{{{attr "aria-controls" panelId}}}{{{attr "aria-selected" ariaSelected}}}{{{attr "data-fb-link-id" ../linkId}}} data-fb-field="tab-action"{{{attr "name" ../actionName}}}{{{attr "value" tabAction}}}>{{{label}}}</button>
+    {{/each}}
+  </div>
+  {{#if active}}
+    <section role="tabpanel"{{{attr "id" active.panelId}}}{{{attr "aria-labelledby" active.buttonId}}}>{{{active.content}}}</section>
+  {{/if}}
+</section>

package/dist/templates/Table.html.hbs

@@ -0,0 +1,39 @@
+{{!--
+Template: Table
+
+Inputs:
+- hasRowHeader: true when rows need a header column.
+- columns: column items with token, content, errors, width, widthStyle, and isLoading.
+- rows: row items with token, content, errors, cells, remove action fields, and isLoading.
+- rows[].cells: cell items with token and content.
+--}}
+<table>
+  <thead>
+    <tr>
+      {{#if hasRowHeader}}
+        <th></th>
+      {{/if}}
+      {{#each columns}}
+        <th{{{attr "style" widthStyle}}}>{{{content}}}{{{errors}}}</th>
+      {{/each}}
+    </tr>
+  </thead>
+  <tbody>
+    {{#each rows}}
+      <tr>
+        {{#if ../hasRowHeader}}
+          <th>
+            {{{content}}}
+            {{{errors}}}
+            {{#if removeAction}}
+              <button type="submit"{{{attr "data-fb-link-id" linkId}}} data-fb-field="remove-action"{{{attr "name" actionName}}}{{{attr "value" removeAction}}}>{{{removeLabelHtml}}}</button>
+            {{/if}}
+          </th>
+        {{/if}}
+        {{#each cells}}
+          <td>{{{content}}}</td>
+        {{/each}}
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

package/dist/templates/TextArea.html.hbs

@@ -0,0 +1,13 @@
+{{!--
+Template: TextArea
+
+Inputs:
+- id: control id.
+- value: submitted text value.
+- disabled/placeholder: native textarea state.
+- ariaLabelledBy/ariaDescribedBy: accessibility references.
+- inputMode/minLength/maxLength: native text constraints.
+- field/name/data-fb-link-id/data-fb-field/hx-include: generated form field attributes.
+- path: renderer node path, when present.
+--}}
+<textarea{{{fieldAttributes}}}{{{attr "id" id}}}{{{attr "readonly" disabled}}}{{{attr "placeholder" placeholder}}}{{{attr "aria-labelledby" ariaLabelledBy}}}{{{attr "aria-describedby" ariaDescribedBy}}}{{{attr "inputmode" inputMode}}}{{{attr "minlength" minLength}}}{{{attr "maxlength" maxLength}}}>{{value}}</textarea>

package/dist/templates/TextInput.html.hbs

@@ -0,0 +1,14 @@
+{{!--
+Template: TextInput
+
+Inputs:
+- id: control id.
+- type/inputType: requested and rendered native input type.
+- value: submitted text value.
+- disabled/placeholder: native input state.
+- ariaLabelledBy/ariaDescribedBy: accessibility references.
+- inputMode/minLength/maxLength: native text constraints.
+- field/name/data-fb-link-id/data-fb-field/hx-include: generated form field attributes.
+- path: renderer node path, when present.
+--}}
+<input{{{fieldAttributes}}}{{{attr "id" id}}}{{{attr "type" inputType}}}{{{attr "value" value}}}{{{attr "readonly" disabled}}}{{{attr "placeholder" placeholder}}}{{{attr "aria-labelledby" ariaLabelledBy}}}{{{attr "aria-describedby" ariaDescribedBy}}}{{{attr "inputmode" inputMode}}}{{{attr "minlength" minLength}}}{{{attr "maxlength" maxLength}}}>

package/dist/templates/TimeInput.html.hbs

@@ -0,0 +1,12 @@
+{{!--
+Template: TimeInput
+
+Inputs:
+- id: control id.
+- value: submitted time string.
+- disabled/placeholder/min/max: native input state and constraints.
+- ariaLabelledBy/ariaDescribedBy: accessibility references.
+- field/name/data-fb-link-id/data-fb-field/hx-include: generated form field attributes.
+- path: renderer node path, when present.
+--}}
+<input{{{fieldAttributes}}}{{{attr "id" id}}} type="time" step="any"{{{attr "value" value}}}{{{attr "readonly" disabled}}}{{{attr "placeholder" placeholder}}}{{{attr "aria-labelledby" ariaLabelledBy}}}{{{attr "aria-describedby" ariaDescribedBy}}}{{{attr "min" min}}}{{{attr "max" max}}}>

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@formbox/htmx",
+  "version": "0.3.0",
+  "description": "Server-rendered HTMX HTML renderer for Formbox FHIR Questionnaires",
+  "private": false,
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HealthSamurai/formbox-renderer"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@lhncbc/ucum-lhc": "7.1.3",
+    "fhirpath": "^4.6.0",
+    "handlebars": "^4.7.9",
+    "mobx": "^6.15.0",
+    "mobx-react-lite": "^4.1.1",
+    "mobx-utils": "^6.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "@formbox/renderer": "0.3.0",
+    "@formbox/strings": "0.3.0",
+    "@formbox/fhir": "0.3.0",
+    "@formbox/theme": "0.3.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "htmx.org": "^2.0.10",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.17"
+  },
+  "scripts": {
+    "build": "tsc -b ./tsconfig.lib.json && vite build",
+    "demo": "bun run ./demo/server.ts",
+    "dev": "bun run ./demo/server.ts",
+    "lint": "eslint .",
+    "test:e2e": "pnpm run build && playwright test e2e",
+    "typecheck": "tsc --noEmit -p tsconfig.lib.json",
+    "test": "vitest --run"
+  }
+}