@samuel-charpentier/sform 1.0.0 → 1.1.0

package/dist/Sform/SIssues.svelte

@@ -22,7 +22,7 @@
 	const formState = $derived(context.getFormState());
 
 	// Show issues only after form submission and when there are issues
-	const shouldShow = $derived(context.submitted && formState.hasIssues);
+	const shouldShow = $derived(!context.disabled && context.submitted && formState.hasIssues);
 	const hasUnhandledIssues = $derived(unhandledIssues.length > 0);
 </script>
 

package/dist/Sform/Sfield.svelte

@@ -3,7 +3,19 @@
 		SfieldClasses,
 		RemoteFormField,
 		RemoteFormFieldValue,
-		TypedSfieldProps
+		TypedSfieldProps,
+		SfieldTextProps,
+		SfieldPasswordProps,
+		SfieldNumberProps,
+		SfieldTextareaProps,
+		SfieldSelectProps,
+		SfieldCheckboxProps,
+		SfieldCheckboxGroupProps,
+		SfieldRadioProps,
+		SfieldRangeProps,
+		SfieldToggleProps,
+		SfieldMaskedProps,
+		SfieldHiddenProps
 	} from './types.js';
 	import { getSformContext } from './context.svelte.js';
 	import TextInput from './inputs/TextInput.svelte';
@@ -37,58 +49,219 @@
 
 	// Derive name from the field - all field types include name in their .as() output
 	const name = $derived(field.as('text').name);
+	const issueDisplay = $derived(props.issueDisplay ?? 'auto');
+	const shouldRenderFieldIssues = $derived(
+		issueDisplay === 'field' || (issueDisplay === 'auto' && props.type !== 'hidden')
+	);
+	const shouldMarkIssuesHandled = $derived(issueDisplay === 'none' || shouldRenderFieldIssues);
+
+	// Form-level disabled always wins over a field's own disabled prop (OR semantics)
+	const effectiveDisabled = $derived(context.disabled || props.disabled === true);
 
 	// Register this field with the context on mount
 	$effect(() => {
 		context.registerField(name);
-		// Register for issue display tracking (all types except hidden display their issues)
-		if (props.type !== 'hidden') {
+		if (shouldMarkIssuesHandled) {
 			context.registerFieldWithIssueDisplay(name);
 		}
 	});
 
+	$effect(() => {
+		if (!props.lifecycle) return;
+		return context.registerLifecycleHooks(props.lifecycle);
+	});
+
 	const classes: SfieldClasses = $derived(
 		typeof props.class === 'string' ? { wrapper: props.class } : (props.class ?? {})
 	);
 
-	const showIssues = $derived(context.shouldDisplayIssues(name, props.validateOn));
+	const showIssues = $derived(
+		shouldRenderFieldIssues && context.shouldDisplayIssues(name, props.validateOn)
+	);
 	const issues = $derived(showIssues ? field.issues() : []);
 	const hasIssues = $derived(issues && issues instanceof Array && issues.length > 0);
 
 	async function handleBlur() {
+		if (effectiveDisabled) return;
 		context.markTouched(name);
 		context.triggerValidation();
 	}
 
 	function handleInput() {
+		if (effectiveDisabled) return;
 		context.markDirty(name);
 	}
 
-	// Props that Sfield manages internally - these are set by Sfield, not passed from parent
-	const internalPropKeys = [
-		'field',
-		'name',
-		'showIssues',
-		'onblur',
-		'oninput',
-		'labelClass',
-		'class'
-	];
-	// Props that are Sfield-specific and not passed to components
-	const sfieldOnlyPropKeys = ['validateOn', 'hint', 'type'];
-
-	// Passthrough props: everything from parent except internal and sfield-only props
-	// This allows new component props to automatically flow through without updating Sfield
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const passthroughProps = $derived((): any => {
-		const result: Record<string, unknown> = {};
-		for (const [key, value] of Object.entries(props)) {
-			if (!internalPropKeys.includes(key) && !sfieldOnlyPropKeys.includes(key)) {
-				result[key] = value;
-			}
+	function isTextSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldTextProps {
+		switch (input.type) {
+			case 'text':
+			case 'email':
+			case 'tel':
+			case 'url':
+			case 'search':
+			case 'date':
+			case 'datetime-local':
+			case 'time':
+			case 'month':
+			case 'week':
+			case 'color':
+			case 'file':
+				return true;
+			default:
+				return false;
 		}
-		return result;
-	});
+	}
+
+	function isPasswordSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldPasswordProps {
+		return input.type === 'password';
+	}
+
+	function isNumberSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldNumberProps {
+		return input.type === 'number';
+	}
+
+	function isTextareaSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldTextareaProps {
+		return input.type === 'textarea';
+	}
+
+	function isSelectSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldSelectProps {
+		return input.type === 'select';
+	}
+
+	function isCheckboxSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldCheckboxProps {
+		return input.type === 'checkbox';
+	}
+
+	function isCheckboxGroupSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldCheckboxGroupProps {
+		return input.type === 'checkbox-group';
+	}
+
+	function isRadioSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldRadioProps {
+		return input.type === 'radio';
+	}
+
+	function isRangeSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldRangeProps {
+		return input.type === 'range';
+	}
+
+	function isToggleSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldToggleProps {
+		return input.type === 'toggle';
+	}
+
+	function isMaskedSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldMaskedProps {
+		return input.type === 'masked';
+	}
+
+	function isHiddenSfieldProps(
+		input: TypedSfieldProps<RemoteFormFieldValue>
+	): input is SfieldHiddenProps {
+		return input.type === 'hidden';
+	}
+
+	// Props that Sfield manages internally - these are set by Sfield, not passed from parent
+	type SfieldManagedProps =
+		| 'field'
+		| 'validateOn'
+		| 'issueDisplay'
+		| 'hint'
+		| 'type'
+		| 'lifecycle'
+		| 'class'
+		| 'disabled';
+
+	type InputPassthrough<T extends TypedSfieldProps<RemoteFormFieldValue>> = Omit<
+		T,
+		SfieldManagedProps
+	>;
+
+	function getPassthroughProps<T extends TypedSfieldProps<RemoteFormFieldValue>>(
+		input: T
+	): InputPassthrough<T> {
+		const {
+			field,
+			validateOn,
+			issueDisplay,
+			hint,
+			type,
+			lifecycle,
+			class: className,
+			disabled: fieldDisabled,
+			...rest
+		} = input;
+
+		void field;
+		void validateOn;
+		void issueDisplay;
+		void hint;
+		void type;
+		void lifecycle;
+		void className;
+		void fieldDisabled;
+
+		return rest;
+	}
+
+	// Passthrough props: everything from parent except Sfield-managed props.
+	// Keep this generic so each input branch can recover exact prop typing.
+	const textPassthrough = $derived.by(() =>
+		isTextSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const passwordPassthrough = $derived.by(() =>
+		isPasswordSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const numberPassthrough = $derived.by(() =>
+		isNumberSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const textareaPassthrough = $derived.by(() =>
+		isTextareaSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const selectPassthrough = $derived.by(() =>
+		isSelectSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const checkboxPassthrough = $derived.by(() =>
+		isCheckboxSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const checkboxGroupPassthrough = $derived.by(() =>
+		isCheckboxGroupSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const radioPassthrough = $derived.by(() =>
+		isRadioSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const rangePassthrough = $derived.by(() =>
+		isRangeSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const togglePassthrough = $derived.by(() =>
+		isToggleSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const maskedPassthrough = $derived.by(() =>
+		isMaskedSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const hiddenPassthrough = $derived.by(() =>
+		isHiddenSfieldProps(props) ? getPassthroughProps(props) : undefined
+	);
+	const textInputType = $derived.by(() => (isTextSfieldProps(props) ? props.type : undefined));
 
 	// Internal props that Sfield computes/manages
 	const internalProps = $derived({
@@ -98,6 +271,7 @@
 		labelClass: classes.label,
 		wrapperClass: classes.inputWrapper,
 		showIssues,
+		disabled: effectiveDisabled,
 		onblur: handleBlur,
 		oninput: handleInput
 	});
@@ -122,34 +296,30 @@
 </script>
 
 <div class={classes.wrapper}>
-	{#if isTextType}
-		<TextInput
-			{...passthroughProps()}
-			{...internalProps}
-			type={props.type as import('./types.js').TextInputType}
-		/>
-	{:else if props.type === 'password'}
-		<PasswordInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'number'}
-		<NumberInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'textarea'}
-		<TextareaInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'select'}
-		<SelectInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'checkbox'}
-		<CheckboxInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'checkbox-group'}
-		<CheckboxGroupInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'radio'}
-		<RadioInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'range'}
-		<RangeInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'toggle'}
-		<ToggleInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'masked'}
-		<MaskedInput {...passthroughProps()} {...internalProps} />
-	{:else if props.type === 'hidden'}
-		<HiddenInput {...passthroughProps()} {...internalProps} />
+	{#if isTextType && textPassthrough && textInputType}
+		<TextInput {...textPassthrough} {...internalProps} type={textInputType} />
+	{:else if passwordPassthrough}
+		<PasswordInput {...passwordPassthrough} {...internalProps} />
+	{:else if numberPassthrough}
+		<NumberInput {...numberPassthrough} {...internalProps} />
+	{:else if textareaPassthrough}
+		<TextareaInput {...textareaPassthrough} {...internalProps} />
+	{:else if selectPassthrough}
+		<SelectInput {...selectPassthrough} {...internalProps} />
+	{:else if checkboxPassthrough}
+		<CheckboxInput {...checkboxPassthrough} {...internalProps} />
+	{:else if checkboxGroupPassthrough}
+		<CheckboxGroupInput {...checkboxGroupPassthrough} {...internalProps} />
+	{:else if radioPassthrough}
+		<RadioInput {...radioPassthrough} {...internalProps} />
+	{:else if rangePassthrough}
+		<RangeInput {...rangePassthrough} {...internalProps} />
+	{:else if togglePassthrough}
+		<ToggleInput {...togglePassthrough} {...internalProps} />
+	{:else if maskedPassthrough}
+		<MaskedInput {...maskedPassthrough} {...internalProps} />
+	{:else if hiddenPassthrough}
+		<HiddenInput {...hiddenPassthrough} {...internalProps} />
 	{/if}
 
 	{#if props.hint}

package/dist/Sform/Sform.svelte

@@ -1,5 +1,10 @@
 <script lang="ts" generics="Input extends import('@sveltejs/kit').RemoteFormInput, Output">
-	import type { RemoteFormInstance, ValidateOn, EnhanceCallback } from './types.js';
+	import type {
+		RemoteFormInstance,
+		ValidateOn,
+		EnhanceCallback,
+		SformLifecycleHooks
+	} from './types.js';
 	import type { RemoteFormFields } from '@sveltejs/kit';
 	import type { StandardSchemaV1 } from '@standard-schema/spec';
 	import { createSformContext } from './context.svelte.js';
@@ -18,7 +23,10 @@
 		validateOn = 'blur',
 		class: className,
 		preflightOnly = false,
-		children
+		resetOnSuccess = true,
+		lifecycle,
+		children,
+		disabled
 	}: {
 		/** Remote form object from form() API, or the result of form.for(id) */
 		form: RemoteFormInstance<Input, Output>;
@@ -30,6 +38,10 @@
 		validateOn?: ValidateOn;
 		/** If true, only run preflight validation (no submission) */
 		preflightOnly?: boolean;
+		/** If true, reset touched/dirty/submitted state after successful submit response */
+		resetOnSuccess?: boolean;
+		/** Lifecycle hooks for submit/validate phases */
+		lifecycle?: SformLifecycleHooks;
 		/** Form element class */
 		class?: string;
 		/**
@@ -44,6 +56,7 @@
 		 * ```
 		 */
 		children: Snippet<[FormFields]>;
+		disabled?: boolean;
 	} = $props();
 
 	// Get field names for marking all dirty on submit
@@ -51,9 +64,32 @@
 		return Object.keys(form.fields).filter((key) => !['value', 'set', 'allIssues'].includes(key));
 	};
 
+	const isDisabled = $derived(disabled === true);
+
 	// Trigger validation including untouched fields (for blur mode)
-	const triggerValidation = () => {
-		form.validate({ includeUntouched: true, preflightOnly });
+	const triggerValidation = async () => {
+		if (isDisabled) return;
+
+		await context.runLifecycleHooks('beforeValidate');
+
+		const validateRequest = form.validate({ includeUntouched: true, preflightOnly });
+		let afterCalledError: unknown;
+
+		try {
+			await context.runLifecycleHooks('afterValidateCalled');
+		} catch (error) {
+			afterCalledError = error;
+		}
+
+		try {
+			await validateRequest;
+		} finally {
+			await context.runLifecycleHooks('afterValidateSettled');
+		}
+
+		if (afterCalledError) {
+			throw afterCalledError;
+		}
 	};
 
 	const context = createSformContext(
@@ -61,14 +97,33 @@
 		getFieldNames,
 		triggerValidation,
 		() => formElement?.requestSubmit(),
-		() => form
+		() => form,
+		() => isDisabled
 	);
 
+	$effect(() => {
+		if (!lifecycle) return;
+		return context.registerLifecycleHooks(lifecycle);
+	});
+
 	// Apply preflight schema if provided
 	const formWithSchema = $derived(schema ? form.preflight(schema) : form);
 
+	// Guard the consumer-provided enhance callback so a disabled form never submits,
+	// even if the native submit-blocking guards below are bypassed.
+	const guardedEnhance = $derived(
+		enhance
+			? (opts: Parameters<EnhanceCallback<Input>>[0]) => {
+					if (isDisabled) return;
+					return enhance(opts);
+				}
+			: undefined
+	);
+
 	// Apply enhance if provided - returns a minimal object for spreading onto form element
-	const formProps = $derived(enhance ? formWithSchema.enhance(enhance) : formWithSchema);
+	const formProps = $derived(
+		guardedEnhance ? formWithSchema.enhance(guardedEnhance) : formWithSchema
+	);
 
 	// Track previous pending state to detect submission completion
 	let wasPending = $state(false);
@@ -80,19 +135,29 @@
 			(form.fields as { allIssues?: () => unknown[] | undefined }).allIssues?.() ?? [];
 		const hasNoIssues = allIssues.length === 0;
 
-		// Submission just completed successfully (was pending, now not, has result, no issues)
-		if (wasPending && !isPending && hasResult && hasNoIssues) {
-			context.resetFieldStates();
+		if (wasPending && !isPending) {
+			void context.runLifecycleHooks('afterSubmitResponse');
+
+			// Submission just completed successfully (was pending, now not, has result, no issues)
+			if (resetOnSuccess && hasResult && hasNoIssues) {
+				context.resetFieldStates();
+			}
 		}
 
 		wasPending = isPending;
 	});
 
 	function handleInput() {
-		triggerValidation();
+		if (isDisabled) return;
+		void triggerValidation();
 	}
 
-	function handleSubmit() {
+	function handleSubmit(event: SubmitEvent) {
+		if (isDisabled) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return;
+		}
 		context.markSubmitted();
 		context.markAllFieldsDirty();
 	}
@@ -100,6 +165,7 @@
 	let formElement: HTMLFormElement | undefined = $state();
 </script>
 
+<!-- svelte-ignore a11y_role_supports_aria_props_implicit -->
 <form
 	bind:this={formElement}
 	{...formProps as unknown as HTMLFormAttributes}
@@ -107,6 +173,8 @@
 	novalidate
 	oninput={handleInput}
 	onsubmit={handleSubmit}
+	aria-disabled={isDisabled ? 'true' : undefined}
+	data-disabled={isDisabled ? '' : undefined}
 >
 	{@render (children as Snippet<[FormFields]>)(form.fields)}
 </form>

package/dist/Sform/Sform.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RemoteFormInstance, ValidateOn, EnhanceCallback } from './types.js';
+import type { RemoteFormInstance, ValidateOn, EnhanceCallback, SformLifecycleHooks } from './types.js';
 import type { RemoteFormFields } from '@sveltejs/kit';
 import type { StandardSchemaV1 } from '@standard-schema/spec';
 import type { Snippet } from 'svelte';
@@ -14,6 +14,10 @@ declare function $$render<Input extends import('@sveltejs/kit').RemoteFormInput,
         validateOn?: ValidateOn;
         /** If true, only run preflight validation (no submission) */
         preflightOnly?: boolean;
+        /** If true, reset touched/dirty/submitted state after successful submit response */
+        resetOnSuccess?: boolean;
+        /** Lifecycle hooks for submit/validate phases */
+        lifecycle?: SformLifecycleHooks;
         /** Form element class */
         class?: string;
         /**
@@ -28,6 +32,7 @@ declare function $$render<Input extends import('@sveltejs/kit').RemoteFormInput,
          * ```
          */
         children: Snippet<[RemoteFormFields<Input>]>;
+        disabled?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/Sform/context.svelte.d.ts

@@ -7,6 +7,6 @@ interface FormLike {
         [key: string]: unknown;
     };
 }
-export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void, getForm: () => FormLike): SformContext;
+export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void | Promise<void>, submitForm: () => void, getForm: () => FormLike, getDisabled?: () => boolean): SformContext;
 export declare function getSformContext(): SformContext;
 export {};

package/dist/Sform/context.svelte.js

@@ -1,11 +1,19 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 const SFORM_CONTEXT_KEY = Symbol('sform-context');
-export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm, getForm) {
+export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm, getForm, getDisabled = () => false) {
     const touched = new SvelteSet();
     const dirty = new SvelteSet();
     const registeredFields = new SvelteSet();
     const fieldsWithIssueDisplay = new SvelteSet();
+    const lifecycleHooks = {
+        beforeSubmit: new SvelteSet(),
+        afterSubmitTriggered: new SvelteSet(),
+        afterSubmitResponse: new SvelteSet(),
+        beforeValidate: new SvelteSet(),
+        afterValidateCalled: new SvelteSet(),
+        afterValidateSettled: new SvelteSet()
+    };
     let submitted = $state(false);
     const context = {
         get validateOn() {
@@ -14,18 +22,27 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
         get submitted() {
             return submitted;
         },
+        get disabled() {
+            return getDisabled();
+        },
         triggerValidation,
         getFieldState: (name) => ({
             touched: touched.has(name),
             dirty: dirty.has(name)
         }),
         markTouched: (name) => {
+            if (getDisabled())
+                return;
             touched.add(name);
         },
         markDirty: (name) => {
+            if (getDisabled())
+                return;
             dirty.add(name);
         },
         shouldDisplayIssues: (name, fieldValidateOn) => {
+            if (getDisabled())
+                return false;
             const effectiveValidateOn = fieldValidateOn ?? getValidateOn();
             switch (effectiveValidateOn) {
                 case 'blur':
@@ -39,9 +56,13 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
             }
         },
         markSubmitted: () => {
+            if (getDisabled())
+                return;
             submitted = true;
         },
         markAllFieldsDirty: () => {
+            if (getDisabled())
+                return;
             // Use registered fields from Sfield components
             const fieldNames = [...registeredFields];
             for (const name of fieldNames) {
@@ -55,6 +76,25 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
         registerFieldWithIssueDisplay: (name) => {
             fieldsWithIssueDisplay.add(name);
         },
+        registerLifecycleHooks: (hooks) => {
+            const registrations = [];
+            for (const event of Object.keys(lifecycleHooks)) {
+                const hook = hooks[event];
+                if (!hook)
+                    continue;
+                lifecycleHooks[event].add(hook);
+                registrations.push([event, hook]);
+            }
+            return () => {
+                for (const [event, hook] of registrations) {
+                    lifecycleHooks[event].delete(hook);
+                }
+            };
+        },
+        runLifecycleHooks: async (event) => {
+            const hooks = [...lifecycleHooks[event]];
+            await Promise.all(hooks.map(async (hook) => hook()));
+        },
         resetFieldStates: () => {
             touched.clear();
             dirty.clear();

package/dist/Sform/index.d.ts

@@ -4,4 +4,4 @@ export { default as Sbutton } from './inputs/ButtonInput.svelte';
 export { default as SIssues } from './SIssues.svelte';
 export { default as SResult } from './SResult.svelte';
 export { applyMask, unmask, MASK_PATTERNS, DEFAULT_TOKENS, type MaskOptions, type MaskResult, type MaskToken, type MaskPattern } from './utils/mask.js';
-export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonFormState, ButtonInputProps, SIssuesProps, InputAffixProps, RangeInputProps, ToggleInputProps, ToggleOption, ToggleOptionsInputProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './types.js';
+export type { ValidateOn, SformLifecycleEvent, SformLifecycleHook, SformLifecycleHooks, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonFormState, ButtonInputProps, SIssuesProps, InputAffixProps, RangeInputProps, ToggleInputProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './types.js';