@transitionsag/bloom-form 0.0.0

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright © 2026 TransitionsAg
+
+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/README.md

@@ -0,0 +1,21 @@
+# @transitionsag/bloom-form
+
+Solid form bindings for Bloom components.
+
+Import component-specific bindings from subpaths so applications only load the Bloom inputs they use:
+
+```tsx
+import { FieldDurationInput } from "@transitionsag/bloom-form/duration-input";
+import { FieldInput } from "@transitionsag/bloom-form/input";
+import { FieldNumberInput } from "@transitionsag/bloom-form/number-input";
+import { FieldTextarea } from "@transitionsag/bloom-form/textarea";
+
+<FieldDurationInput field={form.field("duration")} label="Duration" min={0} />;
+<FieldInput field={form.field("title")} label="Title" type="text" />;
+<FieldNumberInput field={form.field("price")} label="Price" min={0} />;
+<FieldTextarea field={form.field("description")} label="Description" />;
+```
+
+## License
+
+MIT.

package/dist/duration-input/index.d.ts

@@ -0,0 +1,15 @@
+import { type DurationInputRootProps, type DurationUnit, type DurationValue } from "@transitionsag/bloom";
+import type { FormLeaf } from "@transitionsag/form";
+import { type JSX } from "solid-js";
+export type FieldDurationInputProps<Error extends JSX.Element = JSX.Element> = Omit<DurationInputRootProps, "aria-describedby" | "children" | "defaultValue" | "invalid" | "onFocusChange" | "onValueChange" | "value"> & {
+    "aria-describedby"?: string | undefined;
+    field: FormLeaf<DurationValue, Error>;
+    invalid?: boolean | undefined;
+    label: JSX.Element;
+    onFocusChange?: DurationInputRootProps["onFocusChange"] | undefined;
+    onValueChange?: DurationInputRootProps["onValueChange"] | undefined;
+    showError?: boolean | "blur";
+    unitLabels?: Partial<Record<DurationUnit, JSX.Element>> | undefined;
+    children?: never;
+};
+export declare function FieldDurationInput<Error extends JSX.Element = JSX.Element>(props: FieldDurationInputProps<Error>): JSX.Element;

package/dist/duration-input/index.js

@@ -0,0 +1,134 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { DurationInput, durationUnits } from "@transitionsag/bloom";
+import { For, Show, createUniqueId, splitProps } from "solid-js";
+//#region src/duration-input/index.tsx
+const defaultUnitLabels = {
+	year: "Year",
+	month: "Month",
+	week: "Week",
+	day: "Day",
+	hour: "Hour",
+	minute: "Minute",
+	second: "Second"
+};
+const emptyDurationValue = [{
+	value: null,
+	unit: null
+}];
+function FieldDurationInput(props) {
+	const generatedId = createUniqueId();
+	const [local, durationInputProps] = splitProps(props, [
+		"aria-describedby",
+		"children",
+		"field",
+		"id",
+		"invalid",
+		"label",
+		"onFocusChange",
+		"onValueChange",
+		"showError",
+		"unitLabels",
+		"units"
+	]);
+	const inputId = () => local.id ?? `field-duration-input-${generatedId}`;
+	const errorId = () => `${inputId()}-error`;
+	const value = () => local.field.value() ?? emptyDurationValue;
+	const parts = () => value().length > 0 ? value() : emptyDurationValue;
+	const unitOptions = () => local.units?.length ? local.units : durationUnits;
+	const showErrors = () => local.field.errors().length > 0 && local.showError !== false && (local.showError === true || local.field.state.isBlurred());
+	return [createComponent(DurationInput, mergeProps(durationInputProps, {
+		get id() {
+			return inputId();
+		},
+		get units() {
+			return local.units;
+		},
+		get value() {
+			return value();
+		},
+		get invalid() {
+			return local.invalid ?? !local.field.state.isValid();
+		},
+		onValueChange: (details) => {
+			local.field.update(details.value);
+			local.onValueChange?.(details);
+		},
+		onFocusChange: (details) => {
+			if (details.index === null) local.field.blur();
+			local.onFocusChange?.(details);
+		},
+		get children() {
+			return [
+				createComponent(DurationInput.HiddenInput, {}),
+				createComponent(DurationInput.Control, { get children() {
+					return createComponent(For, {
+						get each() {
+							return parts();
+						},
+						children: (_, index) => createComponent(DurationInput.Part, {
+							get index() {
+								return index();
+							},
+							get children() {
+								return [createComponent(DurationInput.Part.Control, { get children() {
+									return [
+										createComponent(DurationInput.Part.Input, { get ["aria-describedby"]() {
+											return [local["aria-describedby"], showErrors() ? errorId() : void 0].filter((id) => !!id).join(" ") || void 0;
+										} }),
+										createComponent(DurationInput.Part.Unit.Trigger, {}),
+										createComponent(Show, {
+											get when() {
+												return parts().length > 1;
+											},
+											get children() {
+												return createComponent(DurationInput.Part.Trigger.Remove, {});
+											}
+										})
+									];
+								} }), createComponent(DurationInput.Part.Unit.Positioner, { get children() {
+									return createComponent(DurationInput.Part.Unit.Content, { get children() {
+										return createComponent(DurationInput.Part.Unit.List, { get children() {
+											return createComponent(For, {
+												get each() {
+													return unitOptions();
+												},
+												children: (unit) => createComponent(DurationInput.Part.Unit.Item, {
+													value: unit,
+													get children() {
+														return [createComponent(DurationInput.Part.Unit.Item.Text, { get children() {
+															return local.unitLabels?.[unit] ?? defaultUnitLabels[unit];
+														} }), createComponent(DurationInput.Part.Unit.Item.Indicator, {})];
+													}
+												})
+											});
+										} });
+									} });
+								} })];
+							}
+						})
+					});
+				} }),
+				createComponent(DurationInput.Label, { get children() {
+					return local.label;
+				} }),
+				createComponent(DurationInput.Trigger.Add, {})
+			];
+		}
+	})), createComponent(Show, {
+		get when() {
+			return showErrors();
+		},
+		get children() {
+			return createComponent(DurationInput.Error, {
+				get id() {
+					return errorId();
+				},
+				get children() {
+					return local.field.errors();
+				}
+			});
+		}
+	})];
+}
+//#endregion
+export { FieldDurationInput };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { FieldDurationInput } from "./duration-input/index.js";
+export type { FieldDurationInputProps } from "./duration-input/index.js";
+export { FieldInput } from "./input/index.js";
+export type { FieldInputProps } from "./input/index.js";
+export { FieldNumberInput } from "./number-input/index.js";
+export type { FieldNumberInputProps } from "./number-input/index.js";
+export { FieldTextarea } from "./textarea/index.js";
+export type { FieldTextareaProps } from "./textarea/index.js";

package/dist/index.js

@@ -0,0 +1,5 @@
+import { FieldDurationInput } from "./duration-input/index.js";
+import { FieldInput } from "./input/index.js";
+import { FieldNumberInput } from "./number-input/index.js";
+import { FieldTextarea } from "./textarea/index.js";
+export { FieldDurationInput, FieldInput, FieldNumberInput, FieldTextarea };

package/dist/input/index.d.ts

@@ -0,0 +1,14 @@
+import { type InputRootProps } from "@transitionsag/bloom";
+import type { FormLeaf } from "@transitionsag/form";
+import { type JSX } from "solid-js";
+export type FieldInputProps<Error extends JSX.Element = JSX.Element> = Omit<InputRootProps, "aria-describedby" | "aria-invalid" | "children" | "onBlur" | "onInput" | "value"> & {
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | undefined;
+    field: FormLeaf<string, Error>;
+    label: JSX.Element;
+    onBlur?: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> | undefined;
+    onInput?: JSX.InputEventHandler<HTMLInputElement, InputEvent> | undefined;
+    showError?: boolean | "blur";
+    children?: never;
+};
+export declare function FieldInput<Error extends JSX.Element = JSX.Element>(props: FieldInputProps<Error>): JSX.Element;

package/dist/input/index.js

@@ -0,0 +1,69 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Input } from "@transitionsag/bloom";
+import { Show, createUniqueId, splitProps } from "solid-js";
+//#region src/input/index.tsx
+function FieldInput(props) {
+	const generatedId = createUniqueId();
+	const [local, inputProps] = splitProps(props, [
+		"aria-describedby",
+		"aria-invalid",
+		"children",
+		"field",
+		"id",
+		"label",
+		"onBlur",
+		"onInput",
+		"showError"
+	]);
+	const inputId = () => local.id ?? `field-input-${generatedId}`;
+	const errorId = () => `${inputId()}-error`;
+	const showErrors = () => local.field.errors().length > 0 && local.showError !== false && (local.showError === true || local.field.state.isBlurred());
+	return [createComponent(Input, mergeProps(inputProps, {
+		get id() {
+			return inputId();
+		},
+		get value() {
+			return local.field.value() ?? "";
+		},
+		get ["aria-describedby"]() {
+			return [local["aria-describedby"], showErrors() ? errorId() : void 0].filter((id) => !!id).join(" ") || void 0;
+		},
+		get ["aria-invalid"]() {
+			return local["aria-invalid"] ?? (local.field.state.isValid() ? void 0 : "true");
+		},
+		onInput: (event) => {
+			local.field.update(event.currentTarget.value);
+			local.onInput?.(event);
+		},
+		onBlur: (event) => {
+			local.field.blur();
+			local.onBlur?.(event);
+		},
+		get children() {
+			return createComponent(Input.Label, {
+				get ["for"]() {
+					return inputId();
+				},
+				get children() {
+					return local.label;
+				}
+			});
+		}
+	})), createComponent(Show, {
+		get when() {
+			return showErrors();
+		},
+		get children() {
+			return createComponent(Input.Error, {
+				get id() {
+					return errorId();
+				},
+				get children() {
+					return local.field.errors();
+				}
+			});
+		}
+	})];
+}
+//#endregion
+export { FieldInput };

package/dist/number-input/index.d.ts

@@ -0,0 +1,14 @@
+import { type NumberInputRootProps } from "@transitionsag/bloom";
+import type { FormLeaf } from "@transitionsag/form";
+import { type JSX } from "solid-js";
+export type FieldNumberInputProps<Error extends JSX.Element = JSX.Element> = Omit<NumberInputRootProps, "aria-describedby" | "aria-invalid" | "children" | "defaultValue" | "invalid" | "onBlur" | "onValueChange" | "value"> & {
+    "aria-describedby"?: string | undefined;
+    field: FormLeaf<number, Error>;
+    invalid?: boolean | undefined;
+    label: JSX.Element;
+    onBlur?: JSX.FocusEventHandler<HTMLInputElement, FocusEvent> | undefined;
+    onValueChange?: NumberInputRootProps["onValueChange"] | undefined;
+    showError?: boolean | "blur";
+    children?: never;
+};
+export declare function FieldNumberInput<Error extends JSX.Element = JSX.Element>(props: FieldNumberInputProps<Error>): JSX.Element;

package/dist/number-input/index.js

@@ -0,0 +1,72 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { NumberInput } from "@transitionsag/bloom";
+import { Show, createUniqueId, splitProps } from "solid-js";
+//#region src/number-input/index.tsx
+function FieldNumberInput(props) {
+	const generatedId = createUniqueId();
+	const [local, numberInputProps] = splitProps(props, [
+		"aria-describedby",
+		"children",
+		"field",
+		"id",
+		"invalid",
+		"label",
+		"onBlur",
+		"onValueChange",
+		"showError"
+	]);
+	const inputId = () => local.id ?? `field-number-input-${generatedId}`;
+	const errorId = () => `${inputId()}-error`;
+	const showErrors = () => local.field.errors().length > 0 && local.showError !== false && (local.showError === true || local.field.state.isBlurred());
+	return [createComponent(NumberInput, mergeProps(numberInputProps, {
+		get id() {
+			return inputId();
+		},
+		get value() {
+			return String(local.field.value() ?? "");
+		},
+		get invalid() {
+			return local.invalid ?? !local.field.state.isValid();
+		},
+		onValueChange: (details) => {
+			local.field.update(details.value === "" ? 0 : Number(details.value));
+			local.onValueChange?.(details);
+		},
+		get children() {
+			return createComponent(NumberInput.Control, { get children() {
+				return [
+					createComponent(NumberInput.Input, {
+						get ["aria-describedby"]() {
+							return [local["aria-describedby"], showErrors() ? errorId() : void 0].filter((id) => !!id).join(" ") || void 0;
+						},
+						onBlur: (event) => {
+							local.field.blur();
+							local.onBlur?.(event);
+						}
+					}),
+					createComponent(NumberInput.Label, { get children() {
+						return local.label;
+					} }),
+					createComponent(NumberInput.Minus, {}),
+					createComponent(NumberInput.Plus, {})
+				];
+			} });
+		}
+	})), createComponent(Show, {
+		get when() {
+			return showErrors();
+		},
+		get children() {
+			return createComponent(NumberInput.Error, {
+				get id() {
+					return errorId();
+				},
+				get children() {
+					return local.field.errors();
+				}
+			});
+		}
+	})];
+}
+//#endregion
+export { FieldNumberInput };

package/dist/textarea/index.d.ts

@@ -0,0 +1,14 @@
+import { type TextareaRootProps } from "@transitionsag/bloom";
+import type { FormLeaf } from "@transitionsag/form";
+import { type JSX } from "solid-js";
+export type FieldTextareaProps<Error extends JSX.Element = JSX.Element> = Omit<TextareaRootProps, "aria-describedby" | "aria-invalid" | "children" | "onBlur" | "onInput" | "value"> & {
+    "aria-describedby"?: string | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | undefined;
+    field: FormLeaf<string, Error>;
+    label: JSX.Element;
+    onBlur?: JSX.FocusEventHandler<HTMLTextAreaElement, FocusEvent> | undefined;
+    onInput?: JSX.InputEventHandler<HTMLTextAreaElement, InputEvent> | undefined;
+    showError?: boolean | "blur";
+    children?: never;
+};
+export declare function FieldTextarea<Error extends JSX.Element = JSX.Element>(props: FieldTextareaProps<Error>): JSX.Element;

package/dist/textarea/index.js

@@ -0,0 +1,69 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { Textarea } from "@transitionsag/bloom";
+import { Show, createUniqueId, splitProps } from "solid-js";
+//#region src/textarea/index.tsx
+function FieldTextarea(props) {
+	const generatedId = createUniqueId();
+	const [local, textareaProps] = splitProps(props, [
+		"aria-describedby",
+		"aria-invalid",
+		"children",
+		"field",
+		"id",
+		"label",
+		"onBlur",
+		"onInput",
+		"showError"
+	]);
+	const textareaId = () => local.id ?? `field-textarea-${generatedId}`;
+	const errorId = () => `${textareaId()}-error`;
+	const showErrors = () => local.field.errors().length > 0 && local.showError !== false && (local.showError === true || local.field.state.isBlurred());
+	return [createComponent(Textarea, mergeProps(textareaProps, {
+		get id() {
+			return textareaId();
+		},
+		get value() {
+			return local.field.value() ?? "";
+		},
+		get ["aria-describedby"]() {
+			return [local["aria-describedby"], showErrors() ? errorId() : void 0].filter((id) => !!id).join(" ") || void 0;
+		},
+		get ["aria-invalid"]() {
+			return local["aria-invalid"] ?? (local.field.state.isValid() ? void 0 : "true");
+		},
+		onInput: (event) => {
+			local.field.update(event.currentTarget.value);
+			local.onInput?.(event);
+		},
+		onBlur: (event) => {
+			local.field.blur();
+			local.onBlur?.(event);
+		},
+		get children() {
+			return createComponent(Textarea.Label, {
+				get ["for"]() {
+					return textareaId();
+				},
+				get children() {
+					return local.label;
+				}
+			});
+		}
+	})), createComponent(Show, {
+		get when() {
+			return showErrors();
+		},
+		get children() {
+			return createComponent(Textarea.Error, {
+				get id() {
+					return errorId();
+				},
+				get children() {
+					return local.field.errors();
+				}
+			});
+		}
+	})];
+}
+//#endregion
+export { FieldTextarea };

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@transitionsag/bloom-form",
+  "version": "0.0.0",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./duration-input": {
+      "types": "./dist/duration-input/index.d.ts",
+      "import": "./dist/duration-input/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "import": "./dist/input/index.js"
+    },
+    "./number-input": {
+      "types": "./dist/number-input/index.d.ts",
+      "import": "./dist/number-input/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/textarea/index.d.ts",
+      "import": "./dist/textarea/index.js"
+    }
+  },
+  "devDependencies": {
+    "@rolldown-plugin/solid": "^0.0.4",
+    "@transitionsag/form": "0.1.0-rc4",
+    "rolldown": "^1.0.1",
+    "solid-js": "^1.9.13",
+    "typescript": "^5.9.3",
+    "@transitionsag/bloom": "0.1.0-rc3"
+  },
+  "peerDependencies": {
+    "@transitionsag/bloom": "0.0.0",
+    "@transitionsag/form": "0.1.0-rc4",
+    "solid-js": "^1.9.13"
+  },
+  "scripts": {
+    "build": "tsc --noEmit -p tsconfig.json && rm -rf dist && rolldown -c ../../rolldown.config.ts && tsc -p tsconfig.build.json && node ../../scripts/rewrite-declarations.mjs",
+    "check": "tsc --noEmit -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "fmt": "vp fmt .",
+    "lint": "vp lint ."
+  }
+}