@fluixi/forms-framework 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @fluixi/forms-framework — JSX bindings for @fluixi/forms-core.
+ *
+ * Fine-grained by construction: `bindField` returns reactive prop accessors. In the
+ * Fluixi compiler, `value={field.value}` and `onInput={...}` wire to ONLY that field's
+ * signals, so typing in one field never re-runs another.
+ */
+import type { FieldControl } from '@fluixi/forms-core';
+export interface FieldBinding<T> {
+    /** reactive value accessor — pass as `value={binding.value}` */
+    value: () => T;
+    /** writes the field + marks touched */
+    onInput: (e: {
+        currentTarget: {
+            value: any;
+        };
+    } | any) => void;
+    onBlur: () => void;
+    'aria-invalid': () => boolean;
+    disabled: () => boolean;
+}
+/** Bind a field to a native input. `coerce` turns the DOM string into T (number, etc.). */
+export declare function bindField<T>(field: FieldControl<T>, coerce?: (raw: string) => T): FieldBinding<T>;
+/** Bind a checkbox (boolean field). */
+export declare function bindCheckbox(field: FieldControl<boolean>): {
+    checked: import("@fluixi/forms-core").Accessor<boolean>;
+    onChange: (e: any) => void;
+    onBlur: () => void;
+};
+/**
+ * `<Field>` render-prop component. Usage (Fluixi JSX):
+ *   <Field control={form.get('email')}>
+ *     {(b, field) => <>
+ *       <input value={b.value()} onInput={b.onInput} onBlur={b.onBlur} />
+ *       <Show when={field.touched() && field.error()}>{e => <span>{e().message}</span>}</Show>
+ *     </>}
+ *   </Field>
+ */
+export declare function Field<T>(props: {
+    control: FieldControl<T>;
+    children: (binding: FieldBinding<T>, field: FieldControl<T>) => any;
+    coerce?: (raw: string) => T;
+}): any;
+/**
+ * Directive-style binding for the compiler's `use:` syntax:
+ *   <input use:model={field} />
+ * Wires value + input + blur on the element, with cleanup.
+ */
+export declare function model<T>(el: HTMLInputElement, accessor: () => FieldControl<T>): void;

package/dist/index.js

@@ -0,0 +1,55 @@
+/** Bind a field to a native input. `coerce` turns the DOM string into T (number, etc.). */
+export function bindField(field, coerce) {
+    return {
+        value: field.value,
+        onInput: (e) => {
+            const raw = e?.currentTarget?.value ?? e?.target?.value ?? e;
+            field.setValue((coerce ? coerce(raw) : raw));
+        },
+        onBlur: () => field.markTouched(true),
+        'aria-invalid': () => field.invalid() && field.touched(),
+        disabled: field.disabled,
+    };
+}
+/** Bind a checkbox (boolean field). */
+export function bindCheckbox(field) {
+    return {
+        checked: field.value,
+        onChange: (e) => field.setValue(!!(e?.currentTarget?.checked ?? e?.target?.checked)),
+        onBlur: () => field.markTouched(true),
+    };
+}
+/**
+ * `<Field>` render-prop component. Usage (Fluixi JSX):
+ *   <Field control={form.get('email')}>
+ *     {(b, field) => <>
+ *       <input value={b.value()} onInput={b.onInput} onBlur={b.onBlur} />
+ *       <Show when={field.touched() && field.error()}>{e => <span>{e().message}</span>}</Show>
+ *     </>}
+ *   </Field>
+ */
+export function Field(props) {
+    return props.children(bindField(props.control, props.coerce), props.control);
+}
+/**
+ * Directive-style binding for the compiler's `use:` syntax:
+ *   <input use:model={field} />
+ * Wires value + input + blur on the element, with cleanup.
+ */
+export function model(el, accessor) {
+    const field = accessor();
+    const sync = () => {
+        const v = field.value();
+        if (el.type === 'checkbox')
+            el.checked = !!v;
+        else if (el.value !== String(v ?? ''))
+            el.value = String(v ?? '');
+    };
+    // A render-effect would normally be created by the framework around use: directives;
+    // here we attach listeners + an initial sync. (The host framework owns the effect.)
+    sync();
+    const onInput = () => field.setValue((el.type === 'checkbox' ? el.checked : el.value));
+    const onBlur = () => field.markTouched(true);
+    el.addEventListener('input', onInput);
+    el.addEventListener('blur', onBlur);
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@fluixi/forms-framework",
+  "version": "0.2.0",
+  "license": "MIT",
+  "description": "JSX bindings + Field component for @fluixi/forms-core.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@fluixi/forms-core": "0.2.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fluixi/forms.git",
+    "directory": "packages/forms-framework"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "vitest run --passWithNoTests"
+  }
+}