@samuel-charpentier/sform 1.0.0 → 1.1.0

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,43 +1,26 @@
 <script lang="ts" generics="T = unknown">
-	import { tick, type Snippet } from 'svelte';
-	import type { ButtonState, RemoteFormIssue } from '../types.js';
+	import { tick } from 'svelte';
+	import type { ButtonInputProps } from '../types.js';
 	import { getSformContext } from '../context.svelte.js';
 
-	/**
-	 * Minimal form shape needed for type inference.
-	 * This allows the component to infer T from the form's result type.
-	 */
-	interface FormLike<Output> {
-		result?: Output;
-		pending?: number;
-		fields: {
-			allIssues?: () => RemoteFormIssue[] | undefined;
-			[key: string]: unknown;
-		};
-	}
-
-	interface Props {
-		/** The remote form - used to infer the result type T */
-		form: FormLike<T>;
-		/** Button text (used if no children snippet provided) */
-		label?: string | Snippet<[ButtonState<T>]>;
-		/** Button type */
-		buttonType?: 'submit' | 'reset' | 'button';
-		/** Button class */
-		class?: string;
-		/** Whether button is disabled */
-		disabled?: boolean;
-		/** Callback that runs before validation/submission (can be async) */
-		onsubmit?: () => void | Promise<void>;
-	}
-
 	let {
+		form,
 		label = 'Submit',
 		buttonType = 'submit',
 		class: className,
 		disabled = false,
-		onsubmit
-	}: Props = $props();
+		onsubmit,
+		children
+	}: ButtonInputProps<T> = $props();
+
+	$effect(() => {
+		// Keep the prop "form" observably consumed for strict compiler checks.
+		void form.result;
+		void form.pending;
+		void form.fields;
+	});
+
+	const hasForm = $derived(form !== undefined);
 
 	// Get Sform context for form state and actions
 	const sformContext = getSformContext();
@@ -45,13 +28,17 @@
 	// Get form state from context with the generic type
 	const formState = $derived.by(sformContext.getFormState<T>);
 
-	const isDisabled = $derived(disabled || formState.pending);
+	const isDisabled = $derived(
+		disabled || formState.pending || !hasForm || sformContext.disabled
+	);
 
 	async function handleClick(event: MouseEvent) {
 		if (buttonType !== 'submit') return;
 
 		event.preventDefault();
 
+		if (sformContext.disabled) return;
+
 		// Focus the button to trigger blur on any focused input before submission
 		// This ensures blur validation runs with valid form data, not stale data
 		buttonElement.focus();
@@ -62,12 +49,15 @@
 			await onsubmit();
 		}
 
+		await sformContext.runLifecycleHooks('beforeSubmit');
+
 		// Mark form as submitted and all fields dirty so issues display when server responds
 		sformContext.markSubmitted();
 		sformContext.markAllFieldsDirty();
 
 		// Submit the form via context
 		sformContext.submitForm();
+		await sformContext.runLifecycleHooks('afterSubmitTriggered');
 	}
 	let buttonElement: HTMLButtonElement;
 </script>
@@ -79,7 +69,9 @@
 	disabled={isDisabled}
 	onclick={handleClick}
 >
-	{#if typeof label === 'function'}
+	{#if children}
+		{@render children(formState)}
+	{:else if typeof label === 'function'}
 		{@render label(formState)}
 	{:else}
 		{label}

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

@@ -1,27 +1,6 @@
-import { type Snippet } from 'svelte';
-import type { ButtonState, RemoteFormIssue } from '../types.js';
+import type { ButtonInputProps } from '../types.js';
 declare function $$render<T = unknown>(): {
-    props: {
-        /** The remote form - used to infer the result type T */
-        form: {
-            result?: T | undefined;
-            pending?: number;
-            fields: {
-                allIssues?: () => RemoteFormIssue[] | undefined;
-                [key: string]: unknown;
-            };
-        };
-        /** Button text (used if no children snippet provided) */
-        label?: string | Snippet<[ButtonState<T>]>;
-        /** Button type */
-        buttonType?: "submit" | "reset" | "button";
-        /** Button class */
-        class?: string;
-        /** Whether button is disabled */
-        disabled?: boolean;
-        /** Callback that runs before validation/submission (can be async) */
-        onsubmit?: () => void | Promise<void>;
-    };
+    props: ButtonInputProps<T>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/Sform/inputs/HiddenInput.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-	import type { HiddenInputProps } from '../types.js';
-
-	let { field, name, value }: HiddenInputProps = $props();
-
-	// Hidden fields require the value to be passed to field.as('hidden', value)
-	const fieldAttrs = $derived(field.as('hidden', value ?? ''));
-</script>
-
-<input {...fieldAttrs} type="hidden" id={name} />
+<script lang="ts">
+	import type { HiddenInputProps } from '../types.js';
+
+	let { field, name, value, disabled }: HiddenInputProps = $props();
+
+	// Hidden fields require the value to be passed to field.as('hidden', value)
+	const fieldAttrs = $derived(field.as('hidden', value ?? ''));
+</script>
+
+<input {...fieldAttrs} type="hidden" id={name} {disabled} />

package/dist/Sform/inputs/MaskedInput.svelte

@@ -185,7 +185,7 @@
 
 <TopLabel {label} {labelClass} {name} />
 <!-- Hidden input holds the actual value for form submission -->
-<input type="hidden" {name} value={field.value() ?? ''} />
+<input type="hidden" {name} value={field.value() ?? ''} {disabled} />
 <!-- Visible input shows masked display value but doesn't submit (no name) -->
 <div class="sform-input-wrapper {wrapperClass ?? ''}">
 	{#if prefix}

package/dist/Sform/sform.css

@@ -417,47 +417,6 @@ select.sform-input {
 	user-select: none;
 }
 
-/* ===========================================
-   Toggle Options (Segmented Control)
-   =========================================== */
-.sform-toggle-options {
-	display: inline-flex;
-	background: var(--sform-bg-muted);
-	border-radius: var(--sform-radius-lg);
-	padding: 0.25rem;
-	gap: 0.25rem;
-}
-
-.sform-toggle-option {
-	padding: var(--sform-padding-sm);
-	font-size: var(--sform-font-size-sm);
-	font-weight: 500;
-	color: var(--sform-text-muted);
-	background: transparent;
-	border: none;
-	border-radius: var(--sform-radius);
-	cursor: pointer;
-	transition:
-		background-color var(--sform-transition),
-		color var(--sform-transition);
-}
-
-.sform-toggle-option:hover:not(:disabled):not(.selected) {
-	color: var(--sform-text);
-	background: rgba(0, 0, 0, 0.05);
-}
-
-.sform-toggle-option.selected {
-	color: var(--sform-primary);
-	background: var(--sform-bg);
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.sform-toggle-option:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
 /* ===========================================
    Password Input with Toggle
    =========================================== */

package/dist/Sform/types.d.ts

@@ -18,6 +18,39 @@ export type { RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFor
  * - 'submit': Validate and show all issues only after submit
  */
 export type ValidateOn = 'blur' | 'change' | 'submit';
+/**
+ * Lifecycle event names emitted by Sform.
+ */
+export type SformLifecycleEvent = 'beforeSubmit' | 'afterSubmitTriggered' | 'afterSubmitResponse' | 'beforeValidate' | 'afterValidateCalled' | 'afterValidateSettled';
+/**
+ * Function signature for lifecycle hooks.
+ */
+export type SformLifecycleHook = () => void | Promise<void>;
+/**
+ * Lifecycle hooks that can be registered by Sform and Sfield components.
+ */
+export interface SformLifecycleHooks {
+    /** Runs before submit is triggered by Sbutton. */
+    beforeSubmit?: SformLifecycleHook;
+    /** Runs right after submit is triggered by Sbutton. */
+    afterSubmitTriggered?: SformLifecycleHook;
+    /** Runs after the submit cycle receives a response (pending -> idle). */
+    afterSubmitResponse?: SformLifecycleHook;
+    /** Runs immediately before form.validate() is called. */
+    beforeValidate?: SformLifecycleHook;
+    /** Runs immediately after form.validate() is called. */
+    afterValidateCalled?: SformLifecycleHook;
+    /** Runs when form.validate() settles (resolves or rejects). */
+    afterValidateSettled?: SformLifecycleHook;
+}
+/**
+ * Where a field's issues should be displayed.
+ * - auto: visible fields display their own issues; hidden fields leave issues to SIssues
+ * - field: this field displays its own issues
+ * - form: this field leaves issues to SIssues
+ * - none: this field marks issues as handled without rendering them
+ */
+export type IssueDisplay = 'auto' | 'field' | 'form' | 'none';
 /**
  * Field state tracking
  */
@@ -72,7 +105,6 @@ export interface SfieldTypeMap {
     toggle: boolean;
     select: string;
     radio: string;
-    'toggle-options': string;
     'checkbox-group': string[];
     file: File;
 }
@@ -86,7 +118,7 @@ export type AllowedSfieldType<T> = {
 /**
  * Supported input types for Sfield
  */
-export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'textarea' | 'select' | 'checkbox' | 'checkbox-group' | 'radio' | 'file' | 'hidden' | 'range' | 'toggle' | 'toggle-options' | 'masked';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'textarea' | 'select' | 'checkbox' | 'checkbox-group' | 'radio' | 'file' | 'hidden' | 'range' | 'toggle' | 'masked';
 /** Text-like input types */
 export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'file';
 /** Numeric input types */
@@ -158,9 +190,11 @@ export interface SformContext {
     /** Form-level validateOn mode */
     validateOn: ValidateOn;
     /** Trigger validation (called on blur/input based on mode) */
-    triggerValidation: () => void;
+    triggerValidation: () => void | Promise<void>;
     /** Whether form has been submitted */
     submitted: boolean;
+    /** Whether the whole form is disabled */
+    disabled: boolean;
     /** Mark form as submitted */
     markSubmitted: () => void;
     /** Mark all fields as touched and dirty to show all issues */
@@ -173,6 +207,10 @@ export interface SformContext {
     registerFieldWithIssueDisplay: (name: string) => void;
     /** Programmatically submit the form */
     submitForm: () => void;
+    /** Register lifecycle hooks. Returns an unregister callback. */
+    registerLifecycleHooks: (hooks: SformLifecycleHooks) => () => void;
+    /** Run all hooks for a lifecycle event. */
+    runLifecycleHooks: (event: SformLifecycleEvent) => Promise<void>;
     /** Get the current form state (for buttons and state-aware components) */
     getFormState: <T = unknown>() => ButtonState<T>;
     /** Get issues that are not displayed by any Sfield component */
@@ -211,6 +249,14 @@ export interface SformProps<Input extends RemoteFormInput = RemoteFormInput, Out
     validateOn?: ValidateOn;
     /** Form element class */
     class?: string;
+    /** 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;
+    /** If true, disables the entire form: no validation, no submission, all fields disabled */
+    disabled?: boolean;
     /** Children content */
     children: Snippet;
 }
@@ -327,16 +373,6 @@ export interface ToggleSfieldProps extends BaseSfieldProps {
     /** Value when unchecked */
     uncheckedValue?: string;
 }
-/**
- * Props for toggle-options input (button group)
- */
-export interface ToggleOptionsSfieldProps extends BaseSfieldProps {
-    type: 'toggle-options';
-    /** Options for toggle buttons */
-    options: ToggleOption[] | string[];
-    /** Allow multiple selections */
-    multiple?: boolean;
-}
 /**
  * Props for masked input
  */
@@ -354,7 +390,7 @@ export interface MaskedSfieldProps extends BaseSfieldProps {
 /**
  * Discriminated union of all Sfield prop types
  */
-export type SfieldProps = TextSfieldProps | PasswordSfieldProps | NumberSfieldProps | TextareaSfieldProps | SelectSfieldProps | CheckboxSfieldProps | CheckboxGroupSfieldProps | RadioSfieldProps | RangeSfieldProps | ToggleSfieldProps | ToggleOptionsSfieldProps | MaskedSfieldProps;
+export type SfieldProps = TextSfieldProps | PasswordSfieldProps | NumberSfieldProps | TextareaSfieldProps | SelectSfieldProps | CheckboxSfieldProps | CheckboxGroupSfieldProps | RadioSfieldProps | RangeSfieldProps | ToggleSfieldProps | MaskedSfieldProps;
 /**
  * Props that Sfield manages internally and should NOT be passed from parent.
  * These are set by Sfield itself based on context and internal state.
@@ -372,10 +408,14 @@ interface SfieldExtraProps<T extends RemoteFormFieldValue> {
     field: RemoteFormField<T>;
     /** Field-level validateOn override */
     validateOn?: ValidateOn;
+    /** Where this field's issues should be displayed */
+    issueDisplay?: IssueDisplay;
     /** CSS classes for sub-elements (wrapper, label, input, messages) */
     class?: SfieldClasses | string;
     /** Hint text displayed below the input, above validation messages */
     hint?: string | Snippet;
+    /** Lifecycle hooks registered while this field is mounted */
+    lifecycle?: SformLifecycleHooks;
 }
 /**
  * Helper type: Create Sfield props from component props
@@ -404,14 +444,12 @@ export type SfieldRadioProps = SfieldPropsFrom<RadioInputProps, string, 'radio'>
 export type SfieldRangeProps = SfieldPropsFrom<RangeInputProps, number, 'range'>;
 /** Props for toggle input */
 export type SfieldToggleProps = SfieldPropsFrom<ToggleInputProps, boolean, 'toggle'>;
-/** Props for toggle-options input */
-export type SfieldToggleOptionsProps = SfieldPropsFrom<ToggleOptionsInputProps, string, 'toggle-options'>;
 /** Props for masked input */
 export type SfieldMaskedProps = SfieldPropsFrom<MaskedInputProps, string, 'masked'>;
 /** Props for hidden input */
 export type SfieldHiddenProps = SfieldPropsFrom<HiddenInputProps, string, 'hidden'>;
 /** All possible Sfield props as a discriminated union */
-type AllSfieldProps = SfieldTextProps | SfieldPasswordProps | SfieldNumberProps | SfieldTextareaProps | SfieldSelectProps | SfieldCheckboxProps | SfieldCheckboxGroupProps | SfieldRadioProps | SfieldRangeProps | SfieldToggleProps | SfieldToggleOptionsProps | SfieldMaskedProps | SfieldHiddenProps;
+type AllSfieldProps = SfieldTextProps | SfieldPasswordProps | SfieldNumberProps | SfieldTextareaProps | SfieldSelectProps | SfieldCheckboxProps | SfieldCheckboxGroupProps | SfieldRadioProps | SfieldRangeProps | SfieldToggleProps | SfieldMaskedProps | SfieldHiddenProps;
 /**
  * Extract props that match a specific field value type.
  * This ensures type="number" is only valid for number fields, etc.
@@ -575,6 +613,8 @@ export interface HiddenInputProps {
     name: string;
     /** The value for the hidden field - required for hidden inputs */
     value?: string;
+    /** Whether the hidden input is disabled */
+    disabled?: boolean;
 }
 /**
  * @deprecated Use ButtonState instead
@@ -608,8 +648,8 @@ export interface ButtonFormLike<T = unknown> {
 export interface ButtonInputProps<T = unknown> {
     /** The remote form - used to infer the result type T */
     form: ButtonFormLike<T>;
-    /** Button text (used if no children snippet provided) */
-    label?: string | Snippet;
+    /** Button text (used if no children snippet provided). Can also be a snippet receiving ButtonState<T>. */
+    label?: string | Snippet<[ButtonState<T>]>;
     /** Button type */
     buttonType?: 'submit' | 'reset' | 'button';
     /** Button class */
@@ -666,23 +706,6 @@ export interface ToggleInputProps extends BaseInputComponentProps {
     /** Value when unchecked */
     uncheckedValue?: string;
 }
-/**
- * Toggle option for ToggleOptions component
- */
-export interface ToggleOption {
-    value: string;
-    label: string | Snippet;
-    disabled?: boolean;
-}
-/**
- * Props for toggle options (button group) component
- */
-export interface ToggleOptionsInputProps extends BaseInputComponentProps {
-    /** Options to display as toggle buttons */
-    options: ToggleOption[] | string[];
-    /** Allow multiple selections */
-    multiple?: boolean;
-}
 /**
  * Props for masked input component
  */

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { Sform, Sfield, Sbutton, SIssues, SResult } from './Sform/index.js';
-export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonInputProps, InputAffixProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './Sform/index.js';
+export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonInputProps, InputAffixProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './Sform/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",