lutra 0.0.19 → 0.0.33

package/dist/form/Select.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">import { getContext } from "svelte";
+<script lang="ts">import { getContext, onMount } from "svelte";
 import Label from "./Label.svelte";
 import { createId } from "../utils/id.js";
-import Copy from "../icons/Copy.svelte";
-import Done from "../icons/Done.svelte";
-import Show from "../icons/Show.svelte";
-import Hide from "../icons/Hide.svelte";
+import Copy from "../icons/IconCopy.svelte";
+import Done from "../icons/IconDone.svelte";
+import Show from "../icons/IconShow.svelte";
+import Hide from "../icons/IconHide.svelte";
 import Tooltip from "../display/Tooltip.svelte";
 import IconButton from "../display/IconButton.svelte";
 import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
@@ -13,7 +13,7 @@ import { getFromObjWithStringPath } from "./form.js";
 import { ZodType } from "zod";
 import FieldContent from "./FieldContent.svelte";
 let {
-  attrs,
+  autofocus,
   children,
   disabled,
   help,
@@ -43,46 +43,94 @@ const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
 const validator = getContext("form.validators")?.[name];
 const data = form?.data;
 const originalData = form?.originalData;
+if (!value) value = form ? getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue : "";
+onMount(() => {
+  if (value) fieldChange(form, name, () => el)({});
+});
 </script>
 
 <FieldContent
     {id}
     {label}
     {labelTip}
+    {help}
     {field}
     {issue}
+    {required}
+    contained
 >
-    <select
-        bind:this={el}
-        {disabled}
-        {id}
-        {name}
-        {onblur}
-        {onclick}
-        onchange={fieldChange(form, name, () => el, validator, onchange)}
-        {onfocus}
-        onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
-        {onkeyup}
-        {onkeypress}
-        {placeholder}
-        required={required || field?.required}
-        {results}
-        {tabindex}
-        value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
-    >
-        {#if children}
-            {@render children()}
-        {:else if options}
-            {#each options as option}
-                {#if typeof option === 'string'}
-                    <option value={option}>{option}</option>
-                {:else}
-                    <option value={option.value}>{option.label}</option>
-                {/if}
-            {/each}
-        {/if}
-    </select>
+    <div class="SelectContainer">
+        <select
+            bind:this={el}
+            {autofocus}
+            {disabled}
+            {id}
+            {name}
+            {onblur}
+            {onclick}
+            onchange={fieldChange(form, name, () => el, validator, onchange)}
+            {onfocus}
+            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+            {onkeyup}
+            {onkeypress}
+            {placeholder}
+            required={required || field?.required}
+            {results}
+            {tabindex}
+            bind:value={value}
+        >
+            {#if children}
+                {@render children()}
+            {:else if options}
+                {#each options as option}
+                    {#if typeof option === 'string'}
+                        <option value={option}>{option}</option>
+                    {:else}
+                        <option value={option.value}>{option.label}</option>
+                    {/if}
+                {/each}
+            {/if}
+        </select>
+        <div class="Arrow">
+            <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                <g transform="matrix(1,0,0,1,0,0.746639)">
+                    <path d="M6,4.248L11.493,0L12,0.507L6,6.507L0,0.507L0.507,0L6,4.248Z" fill="currentColor" stroke="currentColor"/>
+                </g>
+            </svg>
+        </div>
+    </div>
 </FieldContent>
 
 <style>
+    .SelectContainer {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-areas: "select";
+        align-items: center;
+        width: 100%;
+    }
+    select {
+        padding-inline-end: calc(1.5em + 10px);
+        width: 100%;
+        appearance: none;
+        border: none !important;
+        border-radius: 0;
+        grid-area: select;
+        background: none;
+    }
+    .Arrow {
+        grid-area: select;
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        padding-inline-end: 0.75em;
+    }
+    svg {
+        display: block;
+        color: var(--field-text);
+    }
+    select:focus-visible {
+        outline: none;
+    }
 </style>

package/dist/form/Select.svelte.d.ts

@@ -1,97 +1,70 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        attrs?: Record<string, string> | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        disabled?: boolean | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        options?: string[] | {
-            value: string;
-            label: string;
-        }[] | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        src?: string | undefined;
-        tabindex?: number | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
-export default class Select extends SvelteComponent<SelectProps, SelectEvents, SelectSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        attrs?: Record<string, string> | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        disabled?: boolean | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        options?: string[] | {
-            value: string;
-            label: string;
-        }[] | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        src?: string | undefined;
-        tabindex?: number | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-    }>);
+import { type Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Select: $$__sveltets_2_IsomorphicComponent<{
+    /** Whether the input should be autofocused. */
+    autofocus?: boolean;
+    /** Options for the select element. */
+    children?: Snippet;
+    /** Whether the input should be disabled. */
+    disabled?: boolean;
+    /** Help text to display below the input. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** The label for the input */
+    label?: string | Snippet;
+    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The name of the input element. */
+    name: string;
+    /** The onblur event handler */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler */
+    onchange?: (e: Event) => void;
+    /** Onclick event handler */
+    onclick?: (e: MouseEvent) => void;
+    /** Onfocus event handler */
+    onfocus?: (e: FocusEvent) => void;
+    /** Keyup event handler */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Keydown event handler */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keypress event handler */
+    onkeypress?: (e: KeyboardEvent) => void;
+    /** The options for the select element. */
+    options?: string[] | {
+        value: string;
+        label: string;
+    }[];
+    /** Placeholder text to display when the input is empty. */
+    placeholder?: string;
+    /** Suffix content, to display after the input. */
+    suffix?: string | Snippet;
+    /** Prefix content, to display before the input. */
+    prefix?: string | Snippet;
+    /** Whether the input should be required. */
+    required?: boolean;
+    /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
+    results?: number;
+    /** The shape of the input element. */
+    shape?: "default" | "rounded" | "pill" | "circle";
+    /** Source URL for the image type. */
+    src?: string;
+    /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+    tabindex?: number;
+    /** The value of the input element. */
+    value?: string | number | boolean | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "id">;
+type Select = InstanceType<typeof Select>;
+export default Select;

package/dist/form/Textarea.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">import { getContext, onMount } from "svelte";
+import { createId } from "../utils/id.js";
+import { IconCopy, IconDone, IconShow } from "../icons/index.js";
+import { Tooltip, IconButton } from "../display/index.js";
+import { FieldContent, fieldChange, fieldKeydown, ignoreKeys, getFromObjWithStringPath } from "../form/index.js";
+import { ZodType } from "zod";
+let {
+  autofocus,
+  autocapitalize,
+  autocomplete,
+  autocorrect,
+  autoresize,
+  checked,
+  contained,
+  copyable,
+  defaultValue,
+  dirname,
+  disabled,
+  enterkeyhint,
+  help,
+  id = $bindable(createId()),
+  inputmode,
+  label,
+  labelTip,
+  list,
+  maxlength,
+  minlength,
+  name,
+  pattern,
+  placeholder,
+  suffix,
+  onblur,
+  onchange,
+  onclick,
+  onfocus,
+  onkeydown,
+  onkeyup,
+  onkeypress,
+  prefix,
+  readonly,
+  required,
+  resize = true,
+  shape = "rounded",
+  step,
+  style,
+  tabindex,
+  title,
+  value = $bindable(),
+  ...rest
+} = $props();
+let el = $state();
+let copyTitle = $state("Copy");
+let viewTitle = $state("Show");
+let copyTooltipOpen = $state(false);
+let copyBtnIcon = $state(IconCopy);
+let viewBtnIcon = $state(IconShow);
+let resizeClass = $derived(resize === true ? "resize" : resize === false ? "" : resize);
+const form = getContext("form");
+const field = $derived(form?.fields[name]);
+const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
+const validator = getContext("form.validators")?.[name];
+const data = form?.data;
+const originalData = form?.originalData;
+if (!value) value = form ? getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue : "";
+function copy(e) {
+  e.preventDefault();
+  if (!el) return;
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(value);
+  } else {
+    el.focus();
+    el.select();
+    document.execCommand("copy");
+  }
+  copyBtnIcon = IconDone;
+  copyTitle = "Copied!";
+  copyTooltipOpen = true;
+  setTimeout(() => {
+    copyBtnIcon = IconCopy;
+    copyTitle = "Copy";
+    copyTooltipOpen = false;
+  }, 1500);
+  el.focus();
+}
+function onresize() {
+  if (!autoresize || !el || !value) return;
+  setTimeout(() => {
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight + 2}px`;
+  }, 0);
+}
+onMount(() => {
+  if (value) fieldChange(form, name, () => el)({});
+  setTimeout(() => {
+    onresize();
+  }, 5);
+});
+</script>
+
+<svelte:window onresize={onresize} />
+
+<FieldContent
+    {id}
+    {label}
+    {labelTip}
+    {field}
+    {issue}
+    {help}
+    {suffix}
+    {required}
+>
+    <textarea 
+        class="{resizeClass}"
+        bind:this={el}
+        {autofocus}
+        autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
+        {autocomplete}
+        autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
+        {dirname}
+        {disabled}
+        {enterkeyhint}
+        {id}
+        maxlength={maxlength ? maxlength : field?.maxlength}
+        minlength={minlength ? minlength : field?.minlength}
+        {name}
+        {onblur}
+        {onclick}
+        onchange={fieldChange(form, name, () => el, validator, onchange)}
+        {onfocus}
+        onkeydown={() => { onresize(); return fieldKeydown(form, name, () => el, validator, onkeydown) }}
+        {onkeyup}
+        {onkeypress}
+        {placeholder}
+        {readonly}
+        required={required || field?.required}
+        {tabindex}
+        {title}
+        bind:value={value}
+        {style}
+        {...rest}
+    ></textarea>
+
+    {#if copyable}
+        <Tooltip tip={copyTitle} open={copyTooltipOpen}>
+            <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
+        </Tooltip>
+    {/if}
+</FieldContent>
+
+<style>
+    textarea {
+        resize: none;
+    }
+    textarea.resize {
+        resize: both;
+    }
+    textarea.resize.horizontal {
+        resize: horizontal;
+    }
+    textarea.resize.vertical {
+        resize: vertical;
+    }
+</style>

package/dist/form/Textarea.svelte.d.ts

@@ -0,0 +1,108 @@
+import { type Snippet } from "svelte";
+import type { Autocomplete } from "../form/types.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const Textarea: $$__sveltets_2_IsomorphicComponent<{
+    /** Whether the input should be autofocused. */
+    autofocus?: boolean;
+    /** Whether the input should be autocapitalized. */
+    autocapitalize?: boolean | "off" | "none" | "on" | "sentences" | "words" | "characters";
+    /** Specifies whether autocomplete is enabled for the input. */
+    autocomplete?: Autocomplete;
+    /** Whether the input should be autocorrected. (Safari only) */
+    autocorrect?: boolean;
+    /** Whether the input should resize automatically. */
+    autoresize?: boolean;
+    /** A hint to the browser for which capture method to use. */
+    capture?: "user" | "environment";
+    /** Whether the input should be checked. */
+    checked?: boolean;
+    /** Whether the input should be contained. */
+    contained?: boolean;
+    /** Whether the input should be copyable. */
+    copyable?: boolean;
+    /** The default value of the input element. */
+    defaultValue?: string;
+    /** Form field name for the directionality of the element's text content during form submission */
+    dirname?: string;
+    /** Whether the input should be disabled. */
+    disabled?: boolean;
+    /** A hint to the browser for which enter key to display for the input. */
+    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
+    /** The height of the input element. Valid for image inputs. */
+    height?: number;
+    /** Help text to display below the input. */
+    help?: string | Snippet;
+    /** A random id is generated if not provided. */
+    id?: string;
+    /** Whether the input should be indeterminate. */
+    indeterminate?: boolean;
+    /** A hint to the browser for which keyboard to display. This is only used for type="text" inputs. Strongly consider using type="email" or type="url" etc. instead */
+    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+    /** The label for the input */
+    label?: string | Snippet;
+    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+    labelTip?: string | Snippet;
+    /** The id of a datalist element that contains pre-defined options for the input element. */
+    list?: string;
+    /** The maximum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
+    maxlength?: number;
+    /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
+    minlength?: number;
+    /** The name of the input element. */
+    name: string;
+    /** The onblur event handler */
+    onblur?: (e: FocusEvent) => void;
+    /** Onchange event handler */
+    onchange?: (e: Event) => void;
+    /** Onclick event handler */
+    onclick?: (e: MouseEvent) => void;
+    /** Onfocus event handler */
+    onfocus?: (e: FocusEvent) => void;
+    /** Keyup event handler */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Keydown event handler */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keypress event handler */
+    onkeypress?: (e: KeyboardEvent) => void;
+    /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
+    pattern?: string;
+    /** Placeholder text to display when the input is empty. */
+    placeholder?: string;
+    /** Suffix content, to display after the input. */
+    suffix?: string | Snippet;
+    /** Prefix content, to display before the input. */
+    prefix?: string | Snippet;
+    /** Whether the input should be read-only. */
+    readonly?: boolean;
+    /** Whether the input should be required. */
+    required?: boolean;
+    /** Whether the textarea is resizable. */
+    resize?: boolean | "both" | "horizontal" | "vertical" | "none";
+    /** The shape of the input element. */
+    shape?: "default" | "rounded" | "pill" | "circle";
+    /** Spellcheck the input. */
+    spellcheck?: boolean;
+    /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */
+    step?: number;
+    /** Inline styles to apply to the input element. */
+    style?: string;
+    /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+    tabindex?: number;
+    /** A string that defines the title of the input element. */
+    title?: string;
+    /** The value of the input element. */
+    value?: string | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "id">;
+type Textarea = InstanceType<typeof Textarea>;
+export default Textarea;

package/dist/form/Toggle.svelte

@@ -0,0 +1,2 @@
+<script lang="ts"></script>
+

package/dist/form/Toggle.svelte.d.ts

@@ -0,0 +1,15 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
+}
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Toggle = InstanceType<typeof Toggle>;
+export default Toggle;

package/dist/form/client.svelte.d.ts

@@ -1,15 +1,14 @@
 import type { ZodType } from "zod";
-import type { Form } from "./types.js";
+import type { LutraForm } from "./types.js";
 /**
  * Use a form in a Svelte component.
  * @param {Form} form - The form to use.
  * @returns
  */
-export declare function useForm(form: Form<any>): {
-    form: {
-        originalData: any;
-        data: any;
-    } & Form<any>;
+export declare function useForm(form: LutraForm<any>): LutraForm<any> & {
+    originalData: any;
+    data: any;
+    state: string;
 };
 /**
  * Validate a single field.
@@ -18,7 +17,7 @@ export declare function useForm(form: Form<any>): {
  * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
  * @param {ZodType} validator - The validator to use.
  */
-export declare function fieldValidate(form: Form<any>, name: string, el?: HTMLInputElement | HTMLSelectElement, validator?: ZodType<any, any>): void;
+export declare function fieldValidate(form: LutraForm<any>, name: string, el?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, validator?: ZodType<any, any>): void;
 /**
  * Keydown event handler for a field.
  * @param {KeyboardEvent} e - The event.
@@ -28,7 +27,7 @@ export declare function fieldValidate(form: Form<any>, name: string, el?: HTMLIn
  * @param {ZodType} validator - The validator to use.
  * @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
  */
-export declare function fieldKeydown(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onkeydown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => Promise<void>;
+export declare function fieldKeydown(form: LutraForm<any>, name: string, el: () => HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onkeydown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => Promise<void>;
 /**
  * Change event handler for a field.
  * @param {Event} e - The event.
@@ -38,7 +37,7 @@ export declare function fieldKeydown(form: Form<any>, name: string, el: () => HT
  * @param {ZodType} validator - The validator to use.
  * @param {(e: Event) => void} onchange - The onchange event handler.
  */
-export declare function fieldChange(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onchange?: (e: Event) => void): (e: Event) => Promise<void>;
+export declare function fieldChange(form: LutraForm<any>, name: string, el: () => HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onchange?: (e: Event) => void): (e: Event) => Promise<void>;
 /**
  * Keys that should be ignored when marking a field as tainted.
  */