react-science 23.0.0 → 23.1.0

package/lib/components/form/components/field_groups/svg_line_style.d.ts

@@ -21,6 +21,7 @@ export declare const FieldGroupSVGLineStyleFields: <TFormData, TFields extends i
         readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
         readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
         readonly DraggableNumericInput: typeof import("../input/draggable_numeric_input.tsx").DraggableNumericInput;
+        readonly TextArea: typeof import("../input/textarea.tsx").TextArea;
     }, {
         readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
         readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
@@ -34,6 +35,7 @@ export declare const FieldGroupSVGLineStyleFields: <TFormData, TFields extends i
         readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
         readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
         readonly DraggableNumericInput: typeof import("../input/draggable_numeric_input.tsx").DraggableNumericInput;
+        readonly TextArea: typeof import("../input/textarea.tsx").TextArea;
     }, {
         readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
         readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;

package/lib/components/form/components/field_groups/svg_line_style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg_line_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAqCvC,CAAC"}
+{"version":3,"file":"svg_line_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_line_style.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAqCvC,CAAC"}

package/lib/components/form/components/field_groups/svg_text_style.d.ts

@@ -22,6 +22,7 @@ export declare const FieldGroupSVGTextStyleFields: <TFormData, TFields extends i
         readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
         readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
         readonly DraggableNumericInput: typeof import("../input/draggable_numeric_input.tsx").DraggableNumericInput;
+        readonly TextArea: typeof import("../input/textarea.tsx").TextArea;
     }, {
         readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
         readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;
@@ -35,6 +36,7 @@ export declare const FieldGroupSVGTextStyleFields: <TFormData, TFields extends i
         readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
         readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
         readonly DraggableNumericInput: typeof import("../input/draggable_numeric_input.tsx").DraggableNumericInput;
+        readonly TextArea: typeof import("../input/textarea.tsx").TextArea;
     }, {
         readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
         readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;

package/lib/components/form/components/field_groups/svg_text_style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svg_text_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA4DvC,CAAC"}
+{"version":3,"file":"svg_text_style.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/field_groups/svg_text_style.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA4DvC,CAAC"}

package/lib/components/form/components/input/textarea.d.ts

@@ -0,0 +1,7 @@
+import type { TextAreaProps as BPTextAreaProps } from '@blueprintjs/core';
+import type { FormGroupInputProps } from '../input_groups/index.ts';
+interface TextAreaProps extends FormGroupInputProps, BPTextAreaProps {
+}
+export declare function TextArea(props: TextAreaProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=textarea.d.ts.map

package/lib/components/form/components/input/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/input/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGpE,UAAU,aAAc,SAAQ,mBAAmB,EAAE,eAAe;CAAG;AAOvE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAqC5C"}

package/lib/components/form/components/input/textarea.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextArea as BPTextArea } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import { useFieldContext } from "../../context/use_ts_form.js";
+import { FormGroup } from "../input_groups/index.js";
+const ResizeableTextArea = styled(BPTextArea) `
+  resize: both;
+  max-width: 100%;
+`;
+export function TextArea(props) {
+    const { label, required, helpText, layout, fullWidth, ...otherProps } = props;
+    const field = useFieldContext();
+    const error = field
+        .getMeta()
+        .errors.map((e) => e.message)
+        .at(0);
+    function onChange(event) {
+        return field.handleChange(event.target.value);
+    }
+    return (_jsx(FormGroup, { name: field.name, label: label, intent: error ? 'danger' : 'none', required: required, error: error, helpText: helpText, layout: layout, fullWidth: fullWidth, contentFullWidth: true, children: _jsx(ResizeableTextArea, { ...otherProps, id: field.name, name: field.name, onChange: onChange, onBlur: field.handleBlur, intent: error ? 'danger' : 'none', value: field.state.value, required: required }) }));
+}
+//# sourceMappingURL=textarea.js.map

package/lib/components/form/components/input/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../../src/components/form/components/input/textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAIrD,MAAM,kBAAkB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAG5C,CAAC;AAEF,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,MAAM,KAAK,GAAG,eAAe,EAAU,CAAC;IACxC,MAAM,KAAK,GAAG,KAAK;SAChB,OAAO,EAAE;SACT,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;SAC5B,EAAE,CAAC,CAAC,CAAC,CAAC;IAET,SAAS,QAAQ,CAAC,KAAuC;QACvD,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,OAAO,CACL,KAAC,SAAS,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,gBAAgB,kBAEhB,KAAC,kBAAkB,OACb,UAAU,EACd,EAAE,EAAE,KAAK,CAAC,IAAI,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,UAAU,EACxB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EACjC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACxB,QAAQ,EAAE,QAAQ,GAClB,GACQ,CACb,CAAC;AACJ,CAAC"}

package/lib/components/form/components/layout/form.d.ts

@@ -31,6 +31,7 @@ export declare const AppForm: MinimalFunctionComponent<MinimalProps<import("reac
         readonly ColorPicker: typeof import("../input/color_picker.tsx").ColorPicker;
         readonly RadioGroup: typeof import("../input/radio_group.tsx").RadioGroup;
         readonly DraggableNumericInput: typeof import("../input/draggable_numeric_input.tsx").DraggableNumericInput;
+        readonly TextArea: typeof import("../input/textarea.tsx").TextArea;
     }, {
         readonly SubmitButton: typeof import("../input/submit_button.tsx").SubmitButton;
         readonly ResetButton: typeof import("../input/reset_button.tsx").ResetButton;

package/lib/components/form/components/layout/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IAGH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC;IAE5E;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAWD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;IAuCnB,CAAC;AAEF,KAAK,YAAY,CAAC,KAAK,SAAS;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IACzE;;OAEG;IACH,IAAI,EAAE,IAAI,CACR,KAAK,CAAC,MAAM,CAAC,EAKb,gBAAgB,GAAG,kBAAkB,GAAG,mBAAmB,CAC5D,CAAC;CACH,CAAC;AACF,KAAK,wBAAwB,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/layout/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGzE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;OAOG;IAGH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,eAAe,EAAE,WAAW,CAAC,KAAK,GAAG,CAAC;IAE5E;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAWD;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;IAuCnB,CAAC;AAEF,KAAK,YAAY,CAAC,KAAK,SAAS;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG;IACzE;;OAEG;IACH,IAAI,EAAE,IAAI,CACR,KAAK,CAAC,MAAM,CAAC,EAKb,gBAAgB,GAAG,kBAAkB,GAAG,mBAAmB,CAC5D,CAAC;CACH,CAAC;AACF,KAAK,wBAAwB,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC"}

package/lib/components/form/context/use_ts_form.d.ts

@@ -8,6 +8,7 @@ import { ResetButton } from '../components/input/reset_button.js';
 import { Select } from '../components/input/select.js';
 import { SubmitButton } from '../components/input/submit_button.js';
 import { Switch } from '../components/input/switch.js';
+import { TextArea } from '../components/input/textarea.tsx';
 import { Section } from '../components/layout/Section.js';
 declare const useFormContext: () => import("@tanstack/react-form").ReactFormExtendedApi<Record<string, never>, any, any, any, any, any, any, any, any, any, any, any>, useFieldContext: <TData>() => import("@tanstack/react-form").FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
 declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChange extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnChangeAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnBlur extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnBlurAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnSubmit extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnSubmitAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnDynamic extends import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined, TOnDynamicAsync extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TOnServer extends import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData> | undefined, TSubmitMeta, TRenderProps extends object = {}>({ render, props, }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
@@ -19,6 +20,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
     readonly ColorPicker: typeof ColorPicker;
     readonly RadioGroup: typeof RadioGroup;
     readonly DraggableNumericInput: typeof DraggableNumericInput;
+    readonly TextArea: typeof TextArea;
 }, {
     readonly SubmitButton: typeof SubmitButton;
     readonly ResetButton: typeof ResetButton;
@@ -33,6 +35,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
         readonly ColorPicker: typeof ColorPicker;
         readonly RadioGroup: typeof RadioGroup;
         readonly DraggableNumericInput: typeof DraggableNumericInput;
+        readonly TextArea: typeof TextArea;
     }, {
         readonly SubmitButton: typeof SubmitButton;
         readonly ResetButton: typeof ResetButton;
@@ -47,6 +50,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
     readonly ColorPicker: typeof ColorPicker;
     readonly RadioGroup: typeof RadioGroup;
     readonly DraggableNumericInput: typeof DraggableNumericInput;
+    readonly TextArea: typeof TextArea;
 }, {
     readonly SubmitButton: typeof SubmitButton;
     readonly ResetButton: typeof ResetButton;
@@ -61,6 +65,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
         readonly ColorPicker: typeof ColorPicker;
         readonly RadioGroup: typeof RadioGroup;
         readonly DraggableNumericInput: typeof DraggableNumericInput;
+        readonly TextArea: typeof TextArea;
     }, {
         readonly SubmitButton: typeof SubmitButton;
         readonly ResetButton: typeof ResetButton;
@@ -74,6 +79,7 @@ declare const withForm: <TFormData, TOnMount extends import("@tanstack/react-for
         readonly ColorPicker: typeof ColorPicker;
         readonly RadioGroup: typeof RadioGroup;
         readonly DraggableNumericInput: typeof DraggableNumericInput;
+        readonly TextArea: typeof TextArea;
     }, {
         readonly SubmitButton: typeof SubmitButton;
         readonly ResetButton: typeof ResetButton;
@@ -90,6 +96,7 @@ export declare const useForm: <TFormData, TOnMount extends import("@tanstack/rea
     readonly ColorPicker: typeof ColorPicker;
     readonly RadioGroup: typeof RadioGroup;
     readonly DraggableNumericInput: typeof DraggableNumericInput;
+    readonly TextArea: typeof TextArea;
 }, {
     readonly SubmitButton: typeof SubmitButton;
     readonly ResetButton: typeof ResetButton;

package/lib/components/form/context/use_ts_form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAS3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAkB1C,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,QAAA,MAAQ,cAAc,2IAAE,eAAe,8KACb,CAAC;AAS3B,QAAA,MAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAmB1C,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;;;;;;;;;EAAa,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/form/context/use_ts_form.js

@@ -9,6 +9,7 @@ import { ResetButton } from '../components/input/reset_button.js';
 import { Select } from '../components/input/select.js';
 import { SubmitButton } from '../components/input/submit_button.js';
 import { Switch } from '../components/input/switch.js';
+import { TextArea } from "../components/input/textarea.js";
 import { Section } from '../components/layout/Section.js';
 const { useFormContext, useFieldContext, formContext, fieldContext } = createFormHookContexts();
 /*
@@ -35,6 +36,7 @@ const { useAppForm, withForm, withFieldGroup } = createFormHook({
         ColorPicker,
         RadioGroup,
         DraggableNumericInput,
+        TextArea,
     },
 });
 export const useForm = useAppForm;

package/lib/components/form/context/use_ts_form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAsC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B;;;;;;GAMG;AACH,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC;IAC9D,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,WAAW;QACX,UAAU;QACV,qBAAqB;KACtB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"use_ts_form.js","sourceRoot":"","sources":["../../../../src/components/form/context/use_ts_form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAsC,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAkC,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAE1D,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,GAClE,sBAAsB,EAAE,CAAC;AAE3B;;;;;;GAMG;AACH,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc,CAAC;IAC9D,YAAY;IACZ,WAAW;IACX,cAAc,EAAE;QACd,YAAY;QACZ,WAAW;QACX,OAAO;KACR;IACD,eAAe,EAAE;QACf,KAAK;QACL,YAAY;QACZ,QAAQ;QACR,MAAM;QACN,MAAM;QACN,WAAW;QACX,UAAU;QACV,qBAAqB;QACrB,QAAQ;KACT;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC"}

package/lib/components/form/utils/validation/coerce_number_input.d.ts

@@ -1,3 +1,3 @@
 import { z } from 'zod';
-export declare function coerceNumberInput(schema?: z.ZodNumber): z.ZodPipe<z.ZodPipe<z.ZodString, z.ZodTransform<number, string>>, z.ZodNumber>;
+export declare function coerceNumberInput(schema?: z.ZodNumber): z.ZodCodec<z.ZodString, z.ZodNumber>;
 //# sourceMappingURL=coerce_number_input.d.ts.map

package/lib/components/form/utils/validation/coerce_number_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coerce_number_input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/utils/validation/coerce_number_input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,wBAAgB,iBAAiB,CAAC,MAAM,cAAa,kFAQpD"}
+{"version":3,"file":"coerce_number_input.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/utils/validation/coerce_number_input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,wBAAgB,iBAAiB,CAAC,MAAM,cAAa,wCAQpD"}

package/lib/components/form/utils/validation/coerce_number_input.js

@@ -1,11 +1,11 @@
 import { z } from 'zod';
 export function coerceNumberInput(schema = z.number()) {
-    return z
-        .string()
-        .transform((value) => {
-        const number = Number(value);
-        return Number.isNaN(number) ? 0 : number;
-    })
-        .pipe(schema);
+    return z.codec(z.string(), schema, {
+        decode: (value) => {
+            const number = Number(value);
+            return Number.isNaN(number) ? 0 : number;
+        },
+        encode: String,
+    });
 }
 //# sourceMappingURL=coerce_number_input.js.map

package/lib/components/form/utils/validation/coerce_number_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"coerce_number_input.js","sourceRoot":"","sources":["../../../../../src/components/form/utils/validation/coerce_number_input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,UAAU,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE;IACnD,OAAO,CAAC;SACL,MAAM,EAAE;SACR,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;QACnB,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7B,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC3C,CAAC,CAAC;SACD,IAAI,CAAC,MAAM,CAAC,CAAC;AAClB,CAAC"}
+{"version":3,"file":"coerce_number_input.js","sourceRoot":"","sources":["../../../../../src/components/form/utils/validation/coerce_number_input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,UAAU,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE;IACnD,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE;QACjC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAChB,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YAC7B,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAC3C,CAAC;QACD,MAAM,EAAE,MAAM;KACf,CAAC,CAAC;AACL,CAAC"}

package/lib/components/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './debounce.js';
 export * from './throttle.js';
 export * from './svg.js';
+export * from './svg_path_builder.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC"}

package/lib/components/utils/index.js

@@ -1,4 +1,5 @@
 export * from './debounce.js';
 export * from './throttle.js';
 export * from './svg.js';
+export * from './svg_path_builder.js';
 //# sourceMappingURL=index.js.map

package/lib/components/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC"}

package/lib/components/utils/svg_path_builder.d.ts

@@ -0,0 +1,67 @@
+/**
+ * A basic svg path line command builder.
+ * It supports the following commands:
+ * - moveTo (absolute coordinates)
+ * - lineTo (absolute coordinates)
+ * - closePath
+ *
+ * Coordinates are clamped in the [-clampValue; clampValue] interval.
+ * `clampValue` is the first argument given to the constructor.
+ * `clampValue` is a public property.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths#line_commands
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d
+ */
+export declare class SVGPathBuilder {
+    #private;
+    clampValue: number | null;
+    /**
+     * @param clampValue - All `x` and `y` values passed to moveTo and lineTo commands
+     *  will be clamped to this value. `x < -clampValue` set `x` to `-clampValue`
+     *  `x > clampValue` set `x` to `clampValue`.
+     *  Set null to disable this behavior.
+     *  defaults to `1e5`
+     */
+    constructor(clampValue?: number | null);
+    /**
+     * Get a shallow copy of internal the buffer.
+     *
+     * @param sliceArgs
+     */
+    getBufferSlice(...sliceArgs: [start?: number, end?: number]): string[];
+    /**
+     * Absolute move to
+     *
+     * @param x
+     * @param y
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#moveto_path_commands
+     */
+    moveTo(x: number, y: number): this;
+    /**
+     * Absolute line to
+     *
+     * @param x
+     * @param y
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#lineto_path_commands
+     */
+    lineTo(x: number, y: number): this;
+    /**
+     * Close the path, no-op if buffer is empty.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#closepath
+     */
+    closePath(): this;
+    /**
+     * Serialize the buffer into paths commands.
+     *
+     * @param separator - default value is debug friendly (new-line + two spaces).
+     */
+    toString(separator?: string): string;
+    /**
+     * Merge many path builders into a new single one.
+     *
+     * @param builders
+     */
+    static concat(...builders: SVGPathBuilder[]): SVGPathBuilder;
+}
+//# sourceMappingURL=svg_path_builder.d.ts.map

package/lib/components/utils/svg_path_builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_path_builder.d.ts","sourceRoot":"","sources":["../../../src/components/utils/svg_path_builder.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,qBAAa,cAAc;;IAEzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;;;;;OAMG;gBACS,UAAU,GAAE,MAAM,GAAG,IAA0B;IAqB3D;;;;OAIG;IACH,cAAc,CAAC,GAAG,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAI3D;;;;;;OAMG;IACH,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQlC;;;;;;OAMG;IACH,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAQlC;;;;OAIG;IACH,SAAS,IAAI,IAAI;IAOjB;;;;OAIG;IACH,QAAQ,CAAC,SAAS,SAAoB,GAAG,MAAM;IAI/C;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,EAAE,cAAc,EAAE,GAAG,cAAc;CAS7D"}

package/lib/components/utils/svg_path_builder.js

@@ -0,0 +1,113 @@
+/** Better dom readability */
+const DEFAULT_SEPARATOR = '\n  ';
+const DEFAULT_CLAMP_VALUE = 1e5;
+/**
+ * A basic svg path line command builder.
+ * It supports the following commands:
+ * - moveTo (absolute coordinates)
+ * - lineTo (absolute coordinates)
+ * - closePath
+ *
+ * Coordinates are clamped in the [-clampValue; clampValue] interval.
+ * `clampValue` is the first argument given to the constructor.
+ * `clampValue` is a public property.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths#line_commands
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d
+ */
+export class SVGPathBuilder {
+    #buffer = [];
+    clampValue;
+    /**
+     * @param clampValue - All `x` and `y` values passed to moveTo and lineTo commands
+     *  will be clamped to this value. `x < -clampValue` set `x` to `-clampValue`
+     *  `x > clampValue` set `x` to `clampValue`.
+     *  Set null to disable this behavior.
+     *  defaults to `1e5`
+     */
+    constructor(clampValue = DEFAULT_CLAMP_VALUE) {
+        this.clampValue = clampValue;
+    }
+    #appendPath(segment) {
+        this.#buffer.push(segment);
+    }
+    /**
+     * Clamp values to avoid rendering issues of the SVG.
+     * This assumes that the viewport has pixel coordinates
+     * (so the max values are outside of the visible area)
+     */
+    #clamp(value) {
+        const cv = this.clampValue;
+        if (cv === null)
+            return value;
+        if (value < -cv)
+            return -cv;
+        if (value > cv)
+            return cv;
+        return value;
+    }
+    /**
+     * Get a shallow copy of internal the buffer.
+     *
+     * @param sliceArgs
+     */
+    getBufferSlice(...sliceArgs) {
+        return this.#buffer.slice(...sliceArgs);
+    }
+    /**
+     * Absolute move to
+     *
+     * @param x
+     * @param y
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#moveto_path_commands
+     */
+    moveTo(x, y) {
+        x = this.#clamp(x);
+        y = this.#clamp(y);
+        this.#appendPath(`M ${x} ${y}`);
+        return this;
+    }
+    /**
+     * Absolute line to
+     *
+     * @param x
+     * @param y
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#lineto_path_commands
+     */
+    lineTo(x, y) {
+        x = this.#clamp(x);
+        y = this.#clamp(y);
+        this.#appendPath(`L ${x} ${y}`);
+        return this;
+    }
+    /**
+     * Close the path, no-op if buffer is empty.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#closepath
+     */
+    closePath() {
+        if (this.#buffer.length === 0)
+            return this;
+        this.#appendPath('Z');
+        return this;
+    }
+    /**
+     * Serialize the buffer into paths commands.
+     *
+     * @param separator - default value is debug friendly (new-line + two spaces).
+     */
+    toString(separator = DEFAULT_SEPARATOR) {
+        return this.#buffer.join(separator);
+    }
+    /**
+     * Merge many path builders into a new single one.
+     *
+     * @param builders
+     */
+    static concat(...builders) {
+        const builder = new SVGPathBuilder();
+        builder.#buffer = builder.#buffer.concat(builders.flatMap((path) => path.getBufferSlice()));
+        return builder;
+    }
+}
+//# sourceMappingURL=svg_path_builder.js.map

package/lib/components/utils/svg_path_builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg_path_builder.js","sourceRoot":"","sources":["../../../src/components/utils/svg_path_builder.ts"],"names":[],"mappings":"AAAA,6BAA6B;AAC7B,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACjC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,cAAc;IACzB,OAAO,GAAa,EAAE,CAAC;IACvB,UAAU,CAAgB;IAE1B;;;;;;OAMG;IACH,YAAY,aAA4B,mBAAmB;QACzD,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED,WAAW,CAAC,OAAe;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,KAAa;QAClB,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAC3B,IAAI,EAAE,KAAK,IAAI;YAAE,OAAO,KAAK,CAAC;QAC9B,IAAI,KAAK,GAAG,CAAC,EAAE;YAAE,OAAO,CAAC,EAAE,CAAC;QAC5B,IAAI,KAAK,GAAG,EAAE;YAAE,OAAO,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;;;OAIG;IACH,cAAc,CAAC,GAAG,SAAyC;QACzD,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,CAAS,EAAE,CAAS;QACzB,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,CAAS,EAAE,CAAS;QACzB,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEhC,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,SAAS;QACP,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC3C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAEtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,QAAQ,CAAC,SAAS,GAAG,iBAAiB;QACpC,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACtC,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,MAAM,CAAC,GAAG,QAA0B;QACzC,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;QAErC,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CACtC,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAClD,CAAC;QAEF,OAAO,OAAO,CAAC;IACjB,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "23.0.0",
+  "version": "23.1.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {

package/src/components/form/components/input/textarea.tsx

@@ -0,0 +1,54 @@
+import type { TextAreaProps as BPTextAreaProps } from '@blueprintjs/core';
+import { TextArea as BPTextArea } from '@blueprintjs/core';
+import styled from '@emotion/styled';
+import type { ChangeEvent } from 'react';
+
+import { useFieldContext } from '../../context/use_ts_form.ts';
+import type { FormGroupInputProps } from '../input_groups/index.ts';
+import { FormGroup } from '../input_groups/index.ts';
+
+interface TextAreaProps extends FormGroupInputProps, BPTextAreaProps {}
+
+const ResizeableTextArea = styled(BPTextArea)`
+  resize: both;
+  max-width: 100%;
+`;
+
+export function TextArea(props: TextAreaProps) {
+  const { label, required, helpText, layout, fullWidth, ...otherProps } = props;
+
+  const field = useFieldContext<string>();
+  const error = field
+    .getMeta()
+    .errors.map((e) => e.message)
+    .at(0);
+
+  function onChange(event: ChangeEvent<HTMLTextAreaElement>) {
+    return field.handleChange(event.target.value);
+  }
+
+  return (
+    <FormGroup
+      name={field.name}
+      label={label}
+      intent={error ? 'danger' : 'none'}
+      required={required}
+      error={error}
+      helpText={helpText}
+      layout={layout}
+      fullWidth={fullWidth}
+      contentFullWidth
+    >
+      <ResizeableTextArea
+        {...otherProps}
+        id={field.name}
+        name={field.name}
+        onChange={onChange}
+        onBlur={field.handleBlur}
+        intent={error ? 'danger' : 'none'}
+        value={field.state.value}
+        required={required}
+      />
+    </FormGroup>
+  );
+}

package/src/components/form/context/use_ts_form.ts

@@ -10,6 +10,7 @@ import { ResetButton } from '../components/input/reset_button.js';
 import { Select } from '../components/input/select.js';
 import { SubmitButton } from '../components/input/submit_button.js';
 import { Switch } from '../components/input/switch.js';
+import { TextArea } from '../components/input/textarea.tsx';
 import { Section } from '../components/layout/Section.js';
 
 const { useFormContext, useFieldContext, formContext, fieldContext } =
@@ -39,6 +40,7 @@ const { useAppForm, withForm, withFieldGroup } = createFormHook({
     ColorPicker,
     RadioGroup,
     DraggableNumericInput,
+    TextArea,
   },
 });
 

package/src/components/form/utils/validation/coerce_number_input.ts

@@ -1,11 +1,11 @@
 import { z } from 'zod';
 
 export function coerceNumberInput(schema = z.number()) {
-  return z
-    .string()
-    .transform((value) => {
+  return z.codec(z.string(), schema, {
+    decode: (value) => {
       const number = Number(value);
       return Number.isNaN(number) ? 0 : number;
-    })
-    .pipe(schema);
+    },
+    encode: String,
+  });
 }

package/src/components/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './debounce.js';
 export * from './throttle.js';
 export * from './svg.js';
+export * from './svg_path_builder.js';

package/src/components/utils/svg_path_builder.ts

@@ -0,0 +1,125 @@
+/** Better dom readability */
+const DEFAULT_SEPARATOR = '\n  ';
+const DEFAULT_CLAMP_VALUE = 1e5;
+
+/**
+ * A basic svg path line command builder.
+ * It supports the following commands:
+ * - moveTo (absolute coordinates)
+ * - lineTo (absolute coordinates)
+ * - closePath
+ *
+ * Coordinates are clamped in the [-clampValue; clampValue] interval.
+ * `clampValue` is the first argument given to the constructor.
+ * `clampValue` is a public property.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths#line_commands
+ * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d
+ */
+export class SVGPathBuilder {
+  #buffer: string[] = [];
+  clampValue: number | null;
+
+  /**
+   * @param clampValue - All `x` and `y` values passed to moveTo and lineTo commands
+   *  will be clamped to this value. `x < -clampValue` set `x` to `-clampValue`
+   *  `x > clampValue` set `x` to `clampValue`.
+   *  Set null to disable this behavior.
+   *  defaults to `1e5`
+   */
+  constructor(clampValue: number | null = DEFAULT_CLAMP_VALUE) {
+    this.clampValue = clampValue;
+  }
+
+  #appendPath(segment: string) {
+    this.#buffer.push(segment);
+  }
+
+  /**
+   * Clamp values to avoid rendering issues of the SVG.
+   * This assumes that the viewport has pixel coordinates
+   * (so the max values are outside of the visible area)
+   */
+  #clamp(value: number) {
+    const cv = this.clampValue;
+    if (cv === null) return value;
+    if (value < -cv) return -cv;
+    if (value > cv) return cv;
+    return value;
+  }
+
+  /**
+   * Get a shallow copy of internal the buffer.
+   *
+   * @param sliceArgs
+   */
+  getBufferSlice(...sliceArgs: [start?: number, end?: number]) {
+    return this.#buffer.slice(...sliceArgs);
+  }
+
+  /**
+   * Absolute move to
+   *
+   * @param x
+   * @param y
+   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#moveto_path_commands
+   */
+  moveTo(x: number, y: number): this {
+    x = this.#clamp(x);
+    y = this.#clamp(y);
+    this.#appendPath(`M ${x} ${y}`);
+
+    return this;
+  }
+
+  /**
+   * Absolute line to
+   *
+   * @param x
+   * @param y
+   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#lineto_path_commands
+   */
+  lineTo(x: number, y: number): this {
+    x = this.#clamp(x);
+    y = this.#clamp(y);
+    this.#appendPath(`L ${x} ${y}`);
+
+    return this;
+  }
+
+  /**
+   * Close the path, no-op if buffer is empty.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/d#closepath
+   */
+  closePath(): this {
+    if (this.#buffer.length === 0) return this;
+    this.#appendPath('Z');
+
+    return this;
+  }
+
+  /**
+   * Serialize the buffer into paths commands.
+   *
+   * @param separator - default value is debug friendly (new-line + two spaces).
+   */
+  toString(separator = DEFAULT_SEPARATOR): string {
+    return this.#buffer.join(separator);
+  }
+
+  /**
+   * Merge many path builders into a new single one.
+   *
+   * @param builders
+   */
+  static concat(...builders: SVGPathBuilder[]): SVGPathBuilder {
+    const builder = new SVGPathBuilder();
+
+    builder.#buffer = builder.#buffer.concat(
+      builders.flatMap((path) => path.getBufferSlice()),
+    );
+
+    return builder;
+  }
+}