@gnist/design-system 0.1.0

package/dist/utilities/forms/formContext.cjs

@@ -0,0 +1,47 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+const React = require("react");
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === "object" && "default" in e) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceCompat(React);
+const formContext = React__namespace.createContext(void 0);
+const Form = ({ onSubmit, submitOnEnter, children, ...rest }) => jsxRuntime.jsx("form", { onSubmit: (event) => {
+  event.preventDefault();
+  onSubmit == null ? void 0 : onSubmit();
+}, ...rest, children: jsxRuntime.jsx("div", { role: "presentation", onKeyDown: (event) => {
+  if (event.key === "Enter" && !submitOnEnter) {
+    event.preventDefault();
+  }
+}, children }) });
+function FormProvider({ id, form, onSubmit, hideNecessityText = false, submitOnEnter = false, children, ...rest }) {
+  return jsxRuntime.jsxs(formContext.Provider, { value: { id, form }, children: [!hideNecessityText && jsxRuntime.jsx("p", { className: atoms_css_js.atoms({ marginBottom: "m" }), children: form.necessityText }), jsxRuntime.jsx(Form, { onSubmit: () => {
+    if (form.state.isValid) {
+      onSubmit == null ? void 0 : onSubmit(form.state.validated);
+      return;
+    }
+    form.showAllErrors();
+  }, submitOnEnter, ...rest, children })] });
+}
+function useForm() {
+  return React__namespace.useContext(formContext);
+}
+exports.FormProvider = FormProvider;
+exports.useForm = useForm;

package/dist/utilities/forms/formContext.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { FormHTMLAttributes } from "react";
+import { LocalFormState } from "./useLocalFormState.js";
+interface FormContext<T> {
+    id: string;
+    form: LocalFormState<T>;
+}
+export interface FormProviderProps<T> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    /**
+     * An id for the form. Must be unique for the current page.
+     */
+    id: string;
+    /**
+     * Form state, validation data and helper functions. Create this with `useLocalFormState` hook. See {@link LocalFormState}
+     */
+    form: LocalFormState<T>;
+    /**
+     * Will be run when the form submit event is triggered, but only if the form data is valid. Receives the validated, sanitized data according to the validation setup.
+     */
+    onSubmit?: (state: T) => void;
+    /**
+     * Use this to hide the auto-generated text explaining which fields are necessary/optional.
+     *
+     * Note that the text itself, or an equivalent, is **required** for good usability.
+     * The auto-generated text is accessible on {@link LocalFormState}.necessityText if you want
+     * to include it a different place in the layout.
+     */
+    hideNecessityText?: boolean;
+    /**
+     * Use this to trigger submit when enter is pressed.
+     */
+    submitOnEnter?: boolean;
+}
+/**
+Provides an easy way to create a form with consistent validation logic. Input fields inside this component will automatically be connected to the form, as long as their `field` prop refers to one of the form's fields.
+
+The following input component properties will be set automatically:
+  - `value`
+  - `onChange`
+  - `onBlur`
+  - `validity`
+  - `id`
+
+A text explaining the necessity (required/optional) of fields will be inserted at the top unless `hideNecessityText` is set to true.
+
+Additionally, `helperText` will be prefixed with the correct necessity indicator if the form contains a mix of required and optional fields.
+*/
+export declare function FormProvider<T>({ id, form, onSubmit, hideNecessityText, submitOnEnter, children, ...rest }: React.PropsWithChildren<FormProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function useForm<T>(): FormContext<T> | undefined;
+export {};
+//# sourceMappingURL=formContext.d.ts.map

package/dist/utilities/forms/formContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formContext.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/formContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,UAAU,WAAW,CAAC,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC3B;AAsCD,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAChC,SAAQ,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;EAaE;AACF,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC5B,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,iBAAyB,EACzB,aAAqB,EACrB,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAuB/C;AAED,wBAAgB,OAAO,CAAC,CAAC,KACmB,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CACrE"}

package/dist/utilities/forms/formContext.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { atoms } from "@gnist/themes/atoms.css.js";
+import * as React from "react";
+const formContext = React.createContext(void 0);
+const Form = ({ onSubmit, submitOnEnter, children, ...rest }) => jsx("form", { onSubmit: (event) => {
+  event.preventDefault();
+  onSubmit == null ? void 0 : onSubmit();
+}, ...rest, children: jsx("div", { role: "presentation", onKeyDown: (event) => {
+  if (event.key === "Enter" && !submitOnEnter) {
+    event.preventDefault();
+  }
+}, children }) });
+function FormProvider({ id, form, onSubmit, hideNecessityText = false, submitOnEnter = false, children, ...rest }) {
+  return jsxs(formContext.Provider, { value: { id, form }, children: [!hideNecessityText && jsx("p", { className: atoms({ marginBottom: "m" }), children: form.necessityText }), jsx(Form, { onSubmit: () => {
+    if (form.state.isValid) {
+      onSubmit == null ? void 0 : onSubmit(form.state.validated);
+      return;
+    }
+    form.showAllErrors();
+  }, submitOnEnter, ...rest, children })] });
+}
+function useForm() {
+  return React.useContext(formContext);
+}
+export {
+  FormProvider,
+  useForm
+};

package/dist/utilities/forms/formHelpers.cjs

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const immer = require("immer");
+const React = require("react");
+const LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
+require("../validation/validators.cjs");
+const validation = require("../validation/validation.cjs");
+function useFormHelpers(form, validators, setField, setBlurred) {
+  const lang = LocalizationProvider.useLanguage();
+  const setValue = React.useCallback((field) => (value) => setField([field, value]), [setField]);
+  return {
+    setValue,
+    inputProps: (field) => {
+      var _a;
+      return {
+        value: form.raw[field],
+        setValue: setValue(field),
+        ...form.showError[field] && !((_a = form.validation[field]) == null ? void 0 : _a.isValid) && {
+          validity: {
+            type: "error",
+            message: validation.getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
+          }
+        },
+        onBlur: () => setBlurred(field)
+      };
+    }
+  };
+}
+const makePropertySetter = (formValidator) => (state, [property, value]) => {
+  const raw = immer.produce(state.raw, (draft) => {
+    draft[property] = value;
+  });
+  const result = formValidator(raw);
+  const showError = immer.produce(state.showError, (draft) => {
+    var _a;
+    if ((_a = result.validation[property]) == null ? void 0 : _a.showMessageImmediately) {
+      draft[property] = true;
+    } else {
+      draft[property] = false;
+    }
+  });
+  return {
+    ...state,
+    ...result,
+    raw,
+    showError
+  };
+};
+const makeBlurSetter = () => (state, property) => immer.produce(state, (draft) => {
+  const rawValue = draft.raw[property];
+  if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) {
+    draft.showError[property] = true;
+  }
+});
+exports.makeBlurSetter = makeBlurSetter;
+exports.makePropertySetter = makePropertySetter;
+exports.useFormHelpers = useFormHelpers;

package/dist/utilities/forms/formHelpers.d.ts

@@ -0,0 +1,53 @@
+import { UserInput, ObjectValidator, ValidatorMap } from "../validation/index.js";
+/**
+ * An action with a string type and an associated payload.
+ *
+ * @template P The type of the action's payload.
+ * @template T the type used for the action type.
+ */
+export interface PayloadAction<P = void, T extends string = string> {
+    payload: P;
+    type: T;
+}
+export interface FormHelpers<T> {
+    /**
+     * Set the value of the given form field. Curried, so `setValue('someField')` returns a setter function for `someField`.
+     */
+    setValue: <TField extends keyof T>(field: TField) => (value: T[TField]) => void;
+    /**
+     * A function which, given a form field, returns props that are needed for input fields.
+     */
+    inputProps: <TField extends keyof T>(field: TField) => {
+        value: T[TField];
+        setValue: (value: T[TField]) => void;
+        validity?: {
+            type: "error";
+            message: string;
+        };
+        onBlur: () => void;
+    };
+}
+/**
+ * Hook for getting utilities like `inputProps('myFormField')` for handling form logic
+ * @param form The form state
+ * @param setField Setter for updating a field
+ * @param setBlurred Setter for updating a field's blur state
+ * @returns A {@link FormHelpers} object for easily setting up the correct values for each field in the view
+ */
+export declare function useFormHelpers<T>(form: UserInput<T>, validators: ValidatorMap<T>, setField: <K extends keyof T>(args: [property: K, value: T[K]]) => void, setBlurred: <K extends keyof T>(property: K) => void): FormHelpers<T>;
+/**
+ * Function for creating a "property setter", which sets properties in a form object.
+ * Ensures validation state is updated.
+ *
+ * @param formValidator Validation function for the form object
+ * @returns Function for setting individual properties in a form object
+ */
+export declare const makePropertySetter: <TForm>(formValidator: ObjectValidator<TForm>) => <K extends keyof TForm>(state: UserInput<TForm>, [property, value]: [property: K, value: TForm[K]]) => UserInput<TForm>;
+/**
+ * Function for creating an "onBlur" function, which sets the blur state for properties in a form object.
+ * Ensures validation is shown, if necessary, when the user leaves a form field.
+ *
+ * @returns Function for usage "onBlur" on individual form fields
+ */
+export declare const makeBlurSetter: <TForm>() => <K extends keyof TForm>(state: UserInput<TForm>, property: K) => UserInput<TForm>;
+//# sourceMappingURL=formHelpers.d.ts.map

package/dist/utilities/forms/formHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formHelpers.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/formHelpers.ts"],"names":[],"mappings":"AAGA,OAAO,EAEH,SAAS,EACT,eAAe,EAEf,YAAY,EACf,MAAM,wBAAwB,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9D,OAAO,EAAE,CAAC,CAAC;IACX,IAAI,EAAE,CAAC,CAAC;CACX;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,SAAS,MAAM,CAAC,EAC7B,KAAK,EAAE,MAAM,KACZ,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAChC;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,SAAS,MAAM,CAAC,EAC/B,KAAK,EAAE,MAAM,KACZ;QACD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;QACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;QACrC,QAAQ,CAAC,EAAE;YAAE,IAAI,EAAE,OAAO,CAAC;YAAC,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC;QAC9C,MAAM,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACL;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC5B,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAClB,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,EAC3B,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EACvE,UAAU,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,IAAI,GACrD,WAAW,CAAC,CAAC,CAAC,CA0BhB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC1B,KAAK,iBAAiB,eAAe,CAAC,KAAK,CAAC,MAC5C,CAAC,SAAS,MAAM,KAAK,SACX,SAAS,CAAC,KAAK,CAAC,qBACJ,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAClD,SAAS,CAAC,KAAK,CAqBjB,CAAC;AAEN;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACtB,KAAK,QACL,CAAC,SAAS,MAAM,KAAK,SAAS,SAAS,CAAC,KAAK,CAAC,YAAY,CAAC,qBAStD,CAAC"}

package/dist/utilities/forms/formHelpers.js

@@ -0,0 +1,58 @@
+"use client";
+import { produce } from "immer";
+import { useCallback } from "react";
+import { useLanguage } from "../../translations/LocalizationProvider.js";
+import "../validation/validators.js";
+import { getValidationMessage } from "../validation/validation.js";
+function useFormHelpers(form, validators, setField, setBlurred) {
+  const lang = useLanguage();
+  const setValue = useCallback((field) => (value) => setField([field, value]), [setField]);
+  return {
+    setValue,
+    inputProps: (field) => {
+      var _a;
+      return {
+        value: form.raw[field],
+        setValue: setValue(field),
+        ...form.showError[field] && !((_a = form.validation[field]) == null ? void 0 : _a.isValid) && {
+          validity: {
+            type: "error",
+            message: getValidationMessage(form.validation[field], validators[field].messagePrefix, lang)
+          }
+        },
+        onBlur: () => setBlurred(field)
+      };
+    }
+  };
+}
+const makePropertySetter = (formValidator) => (state, [property, value]) => {
+  const raw = produce(state.raw, (draft) => {
+    draft[property] = value;
+  });
+  const result = formValidator(raw);
+  const showError = produce(state.showError, (draft) => {
+    var _a;
+    if ((_a = result.validation[property]) == null ? void 0 : _a.showMessageImmediately) {
+      draft[property] = true;
+    } else {
+      draft[property] = false;
+    }
+  });
+  return {
+    ...state,
+    ...result,
+    raw,
+    showError
+  };
+};
+const makeBlurSetter = () => (state, property) => produce(state, (draft) => {
+  const rawValue = draft.raw[property];
+  if (typeof rawValue === "string" && rawValue.length >= 1 || typeof rawValue !== "string" && rawValue !== void 0) {
+    draft.showError[property] = true;
+  }
+});
+export {
+  makeBlurSetter,
+  makePropertySetter,
+  useFormHelpers
+};

package/dist/utilities/forms/formInputs.cjs

@@ -0,0 +1,19 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components = require("./internal/components.cjs");
+function formInputs() {
+  const TextField = components.FormTextField;
+  const TextArea = components.FormTextArea;
+  const Checkbox = components.FormCheckbox;
+  const SingleSelect = components.FormSingleSelect;
+  const MultiSelect = components.FormMultiSelect;
+  return {
+    TextField,
+    TextArea,
+    Checkbox,
+    SingleSelect,
+    MultiSelect
+  };
+}
+exports.formInputs = formInputs;

package/dist/utilities/forms/formInputs.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Given a form type, returns input components for use with that form
+ * @template _T The form type
+ * @returns specialized input components where a `field` prop is required and must be one of the property names in `_T`
+ */
+export declare function formInputs<_T>(): {
+    TextField: (originalProps: import("react").PropsWithChildren<Omit<import("../../components/inputs/textFields/TextField.js").TextFieldProps, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
+    TextArea: (originalProps: import("react").PropsWithChildren<Omit<import("../../components/inputs/textFields/TextArea.js").TextAreaProps, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
+    Checkbox: (originalProps: import("react").PropsWithChildren<Omit<Omit<import("../../index.js").CheckboxProps, "value" | "id"> & import("./types.js").FormContext<_T>, "canShowErrorMessage">>) => import("react/jsx-runtime").JSX.Element;
+    SingleSelect: (originalProps: import("react").PropsWithChildren<Omit<Omit<import("../../components/inputs/dropdowns/SingleSelect.js").SingleSelectProps, "onChange"> & {
+        onChange?: ((value: string) => void) | undefined;
+    }, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
+    MultiSelect: (originalProps: import("react").PropsWithChildren<Omit<Omit<import("../../components/inputs/dropdowns/MultiSelect.js").MultiSelectProps, "onChange"> & {
+        onChange?: ((value: string[]) => void) | undefined;
+    }, "value" | "id"> & import("./types.js").FormContext<_T>>) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=formInputs.d.ts.map

package/dist/utilities/forms/formInputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formInputs.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/formInputs.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE;;;;;;;;;;EAa5B"}

package/dist/utilities/forms/formInputs.js

@@ -0,0 +1,19 @@
+"use client";
+import { FormTextField, FormTextArea, FormCheckbox, FormSingleSelect, FormMultiSelect } from "./internal/components.js";
+function formInputs() {
+  const TextField = FormTextField;
+  const TextArea = FormTextArea;
+  const Checkbox = FormCheckbox;
+  const SingleSelect = FormSingleSelect;
+  const MultiSelect = FormMultiSelect;
+  return {
+    TextField,
+    TextArea,
+    Checkbox,
+    SingleSelect,
+    MultiSelect
+  };
+}
+export {
+  formInputs
+};

package/dist/utilities/forms/index.cjs

@@ -0,0 +1,10 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const formContext = require("./formContext.cjs");
+const formInputs = require("./formInputs.cjs");
+const useLocalFormState = require("./useLocalFormState.cjs");
+exports.FormProvider = formContext.FormProvider;
+exports.useForm = formContext.useForm;
+exports.formInputs = formInputs.formInputs;
+exports.useLocalFormState = useLocalFormState.useLocalFormState;

package/dist/utilities/forms/index.d.ts

@@ -0,0 +1,4 @@
+export { FormProvider, useForm } from "./formContext.js";
+export { formInputs } from "./formInputs.js";
+export { useLocalFormState } from "./useLocalFormState.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/utilities/forms/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/utilities/forms/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { FormProvider, useForm } from "./formContext.js";
+import { formInputs } from "./formInputs.js";
+import { useLocalFormState } from "./useLocalFormState.js";
+export {
+  FormProvider,
+  formInputs,
+  useForm,
+  useLocalFormState
+};

package/dist/utilities/forms/internal/components.cjs

@@ -0,0 +1,75 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const MultiSelect = require("../../../components/inputs/dropdowns/MultiSelect.cjs");
+const SingleSelect = require("../../../components/inputs/dropdowns/SingleSelect.cjs");
+const Checkbox = require("../../../components/actions/selectionControls/Checkbox.cjs");
+const TextArea = require("../../../components/inputs/textFields/TextArea.cjs");
+const TextField = require("../../../components/inputs/textFields/TextField.cjs");
+const LocalizationProvider = require("../../../translations/LocalizationProvider.cjs");
+require("../../validation/validators.cjs");
+const validation = require("../../validation/validation.cjs");
+const formContext = require("../formContext.cjs");
+const useFormProps = require("../useFormProps.cjs");
+function FormTextField(originalProps) {
+  const props = useFormProps.useFormProps(originalProps, (event) => event.target.value);
+  return jsxRuntime.jsx(TextField.TextField, { ...props });
+}
+function FormTextArea(originalProps) {
+  const props = useFormProps.useFormProps(originalProps, (event) => event.target.value);
+  return jsxRuntime.jsx(TextArea.TextArea, { ...props });
+}
+function FormCheckbox(originalProps) {
+  const props = useFormProps.useFormProps(originalProps, (event) => event.target.checked);
+  return jsxRuntime.jsx(Checkbox.Checkbox, { ...props, canShowErrorMessage: true });
+}
+function FormSingleSelect(originalProps) {
+  const formCtx = formContext.useForm();
+  if (!formCtx) {
+    throw new Error("FormSingleSelect must be used inside a <FormProvider />");
+  }
+  const lang = LocalizationProvider.useLanguage();
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    id: `${formId}_${String(originalProps.field)}`,
+    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+    onChange: (value) => {
+      var _a;
+      (_a = originalProps.onChange) == null ? void 0 : _a.call(originalProps, value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsxRuntime.jsx(SingleSelect.SingleSelect, { ...props });
+}
+function FormMultiSelect(originalProps) {
+  const formCtx = formContext.useForm();
+  if (!formCtx) {
+    throw new Error("FormMultiSelect must be used inside a <FormProvider />");
+  }
+  const lang = LocalizationProvider.useLanguage();
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    id: `${formId}_${String(originalProps.field)}`,
+    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+    onChange: (value) => {
+      var _a;
+      (_a = originalProps.onChange) == null ? void 0 : _a.call(originalProps, value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsxRuntime.jsx(MultiSelect.MultiSelect, { ...props });
+}
+exports.FormCheckbox = FormCheckbox;
+exports.FormMultiSelect = FormMultiSelect;
+exports.FormSingleSelect = FormSingleSelect;
+exports.FormTextArea = FormTextArea;
+exports.FormTextField = FormTextField;

package/dist/utilities/forms/internal/components.d.ts

@@ -0,0 +1,21 @@
+import { MultiSelectProps } from "../../../components/inputs/dropdowns/MultiSelect.js";
+import { SingleSelectProps } from "../../../components/inputs/dropdowns/SingleSelect.js";
+import { CheckboxProps } from "../../../components/actions/selectionControls/Checkbox.js";
+import { TextAreaProps } from "../../../components/inputs/textFields/TextArea.js";
+import { TextFieldProps } from "../../../components/inputs/textFields/TextField.js";
+import { FormComponentProps } from "../types.js";
+type FormTextFieldProps<T> = FormComponentProps<T, TextFieldProps>;
+export declare function FormTextField<T>(originalProps: React.PropsWithChildren<FormTextFieldProps<T>>): import("react/jsx-runtime").JSX.Element;
+type FormTextAreaProps<T> = FormComponentProps<T, TextAreaProps>;
+export declare function FormTextArea<T>(originalProps: React.PropsWithChildren<FormTextAreaProps<T>>): import("react/jsx-runtime").JSX.Element;
+type FormCheckboxProps<T> = FormComponentProps<T, CheckboxProps>;
+export declare function FormCheckbox<T>(originalProps: React.PropsWithChildren<Omit<FormCheckboxProps<T>, "canShowErrorMessage">>): import("react/jsx-runtime").JSX.Element;
+type WithOptional<K extends keyof T, T> = Omit<T, K> & {
+    [Key in K]?: T[Key];
+};
+type FormSingleSelectProps<T> = FormComponentProps<T, WithOptional<"onChange", SingleSelectProps>>;
+export declare function FormSingleSelect<T>(originalProps: React.PropsWithChildren<FormSingleSelectProps<T>>): import("react/jsx-runtime").JSX.Element;
+type FormMultiSelectProps<T> = FormComponentProps<T, WithOptional<"onChange", MultiSelectProps>>;
+export declare function FormMultiSelect<T>(originalProps: React.PropsWithChildren<FormMultiSelectProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=components.d.ts.map

package/dist/utilities/forms/internal/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/utilities/forms/internal/components.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,gBAAgB,EACnB,4DAAwE;AACzE,OAAO,EAEH,iBAAiB,EACpB,6DAAyE;AAC1E,OAAO,EAEH,aAAa,EAChB,MAAM,2DAA2D,CAAC;AACnE,OAAO,EAEH,aAAa,EAChB,MAAM,mDAAmD,CAAC;AAC3D,OAAO,EAEH,cAAc,EACjB,MAAM,oDAAoD,CAAC;AAI5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD,KAAK,kBAAkB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAEnE,wBAAgB,aAAa,CAAC,CAAC,EAC3B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,2CAShE;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,2CAU/D;AAED,KAAK,iBAAiB,CAAC,CAAC,IAAI,kBAAkB,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;AAEjE,wBAAgB,YAAY,CAAC,CAAC,EAC1B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAClC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,qBAAqB,CAAC,CACpD,2CASJ;AAED,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;KAAG,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CAAE,CAAC;AAE/E,KAAK,qBAAqB,CAAC,CAAC,IAAI,kBAAkB,CAC9C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAC9C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,EAC9B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,2CA8BnE;AAED,KAAK,oBAAoB,CAAC,CAAC,IAAI,kBAAkB,CAC7C,CAAC,EACD,YAAY,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC7C,CAAC;AAEF,wBAAgB,eAAe,CAAC,CAAC,EAC7B,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,2CA8BlE"}

package/dist/utilities/forms/internal/components.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MultiSelect } from "../../../components/inputs/dropdowns/MultiSelect.js";
+import { SingleSelect } from "../../../components/inputs/dropdowns/SingleSelect.js";
+import { Checkbox } from "../../../components/actions/selectionControls/Checkbox.js";
+import { TextArea } from "../../../components/inputs/textFields/TextArea.js";
+import { TextField } from "../../../components/inputs/textFields/TextField.js";
+import { useLanguage } from "../../../translations/LocalizationProvider.js";
+import "../../validation/validators.js";
+import { addNecessityIndicator } from "../../validation/validation.js";
+import { useForm } from "../formContext.js";
+import { useFormProps } from "../useFormProps.js";
+function FormTextField(originalProps) {
+  const props = useFormProps(originalProps, (event) => event.target.value);
+  return jsx(TextField, { ...props });
+}
+function FormTextArea(originalProps) {
+  const props = useFormProps(originalProps, (event) => event.target.value);
+  return jsx(TextArea, { ...props });
+}
+function FormCheckbox(originalProps) {
+  const props = useFormProps(originalProps, (event) => event.target.checked);
+  return jsx(Checkbox, { ...props, canShowErrorMessage: true });
+}
+function FormSingleSelect(originalProps) {
+  const formCtx = useForm();
+  if (!formCtx) {
+    throw new Error("FormSingleSelect must be used inside a <FormProvider />");
+  }
+  const lang = useLanguage();
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    id: `${formId}_${String(originalProps.field)}`,
+    helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+    onChange: (value) => {
+      var _a;
+      (_a = originalProps.onChange) == null ? void 0 : _a.call(originalProps, value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsx(SingleSelect, { ...props });
+}
+function FormMultiSelect(originalProps) {
+  const formCtx = useForm();
+  if (!formCtx) {
+    throw new Error("FormMultiSelect must be used inside a <FormProvider />");
+  }
+  const lang = useLanguage();
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = {
+    ...originalProps,
+    id: `${formId}_${String(originalProps.field)}`,
+    helperText: addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+    onChange: (value) => {
+      var _a;
+      (_a = originalProps.onChange) == null ? void 0 : _a.call(originalProps, value);
+      formProps.setValue(value);
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  };
+  return jsx(MultiSelect, { ...props });
+}
+export {
+  FormCheckbox,
+  FormMultiSelect,
+  FormSingleSelect,
+  FormTextArea,
+  FormTextField
+};

package/dist/utilities/forms/package.json

@@ -0,0 +1,7 @@
+{
+    "type": "module",
+    "internal": true,
+    "main": "./index.cjs",
+    "module": "./index.js",
+    "types": "./index.d.ts"
+}

package/dist/utilities/forms/types.d.ts

@@ -0,0 +1,12 @@
+import { CommonInputProps, Validity, HelperText } from "../../components/inputs/textFields/shared.js";
+export type CommonFormInputProps<TForm, TVal> = FormContext<TForm> & CommonInputProps<TVal> & Validity<{
+    errorMsgRequired: false;
+}> & HelperText;
+export interface FormContext<T> {
+    /**
+     * Reference to the field in the form context
+     */
+    field: keyof T;
+}
+export type FormComponentProps<TForm, TProps> = Omit<TProps, "value" | "id"> & FormContext<TForm>;
+//# sourceMappingURL=types.d.ts.map

package/dist/utilities/forms/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/utilities/forms/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACb,MAAM,8CAA8C,CAAC;AAEtD,MAAM,MAAM,oBAAoB,CAAC,KAAK,EAAE,IAAI,IAAI,WAAW,CAAC,KAAK,CAAC,GAC9D,gBAAgB,CAAC,IAAI,CAAC,GACtB,QAAQ,CAAC;IAAE,gBAAgB,EAAE,KAAK,CAAA;CAAE,CAAC,GACrC,UAAU,CAAC;AAEf,MAAM,WAAW,WAAW,CAAC,CAAC;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,CAAC,KAAK,EAAE,MAAM,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC,GACxE,WAAW,CAAC,KAAK,CAAC,CAAC"}

package/dist/utilities/forms/useFormProps.cjs

@@ -0,0 +1,34 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const LocalizationProvider = require("../../translations/LocalizationProvider.cjs");
+const validation = require("../validation/validation.cjs");
+const formContext = require("./formContext.cjs");
+function useFormProps(originalProps, getChangedValue) {
+  const lang = LocalizationProvider.useLanguage();
+  const formCtx = formContext.useForm();
+  if (!formCtx || !originalProps.field) {
+    return originalProps;
+  }
+  const { id: formId, form } = formCtx;
+  const formProps = form.inputProps(originalProps.field);
+  const props = formProps ? {
+    ...originalProps,
+    id: originalProps.id ?? `${formId}_${String(originalProps.field)}`,
+    helperText: validation.addNecessityIndicator(form.state.raw, form.validationConfig.validators, form.validationConfig.options.showNecessityOn, lang, originalProps.helperText, originalProps.field),
+    onChange: (event) => {
+      var _a;
+      (_a = originalProps.onChange) == null ? void 0 : _a.call(originalProps, event);
+      formProps.setValue(getChangedValue(event));
+    },
+    onBlur: (event) => {
+      var _a;
+      (_a = originalProps.onBlur) == null ? void 0 : _a.call(originalProps, event);
+      formProps.onBlur();
+    },
+    value: formProps.value,
+    validity: formProps.validity ?? originalProps.validity
+  } : originalProps;
+  return props;
+}
+exports.useFormProps = useFormProps;