@samuel-charpentier/sform 0.0.12 → 1.1.0

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,46 +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;
-		/** Button type */
-		buttonType?: 'submit' | 'reset' | 'button';
-		/** Button class */
-		class?: string;
-		/** Whether button is disabled */
-		disabled?: boolean;
-		/** Children snippet receives ButtonState<T> for custom rendering with typed result */
-		children?: Snippet<[ButtonState<T>]>;
-		/** Callback that runs before validation/submission (can be async) */
-		onsubmit?: () => void | Promise<void>;
-	}
-
 	let {
+		form,
 		label = 'Submit',
 		buttonType = 'submit',
 		class: className,
 		disabled = false,
-		children,
-		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();
@@ -48,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();
@@ -65,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>
@@ -84,6 +71,8 @@
 >
 	{#if children}
 		{@render children(formState)}
+	{:else if typeof label === 'function'}
+		{@render label(formState)}
 	{:else}
 		{label}
 	{/if}

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

@@ -1,29 +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;
-        /** Button type */
-        buttonType?: "submit" | "reset" | "button";
-        /** Button class */
-        class?: string;
-        /** Whether button is disabled */
-        disabled?: boolean;
-        /** Children snippet receives ButtonState<T> for custom rendering with typed result */
-        children?: Snippet<[ButtonState<T>]>;
-        /** Callback that runs before validation/submission (can be async) */
-        onsubmit?: () => void | Promise<void>;
-    };
+    props: ButtonInputProps<T>;
     exports: {};
     bindings: "";
     slots: {};

package/dist/Sform/inputs/CheckboxGroupInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { CheckboxGroupInputProps, SelectOption } from '../types.js';
 	import Fieldset from '../utils/Fieldset.svelte';
+	import RadioCheckboxLabel from './RadioCheckboxLabel.svelte';
 
 	let {
 		field,
@@ -30,39 +31,10 @@
 	}
 </script>
 
-<Fieldset {label} {labelClass} {className} {disabled}>
+<Fieldset {label} {labelClass} {className} {disabled} type="checkbox">
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
-		<label class="sform-checkbox-option" class:disabled={option.disabled}>
-			<input
-				{...fieldAttrs}
-				type="checkbox"
-				id={uniqueId}
-				disabled={disabled || option.disabled}
-				{onblur}
-				{oninput}
-			/>
-			<span class="sform-checkbox-label">{option.label}</span>
-		</label>
+		<RadioCheckboxLabel {fieldAttrs} {uniqueId} {option} {disabled} {onblur} {oninput} />
 	{/each}
 </Fieldset>
-
-<style>
-	.sform-checkbox-option {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		cursor: pointer;
-		padding: 0.25rem 0;
-	}
-
-	.sform-checkbox-option.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.sform-checkbox-option input {
-		margin: 0;
-	}
-</style>

package/dist/Sform/inputs/CheckboxInput.svelte

@@ -24,7 +24,11 @@
 <label class="sform-checkbox {className ?? ''}" class:disabled>
 	<input {...fieldAttrs} type="checkbox" id={name} {disabled} {onblur} {oninput} />
 	{#if label}
-		<span class={labelClass}>{label}</span>
+		{#if typeof label === 'function'}
+			{@render label()}
+		{:else}
+			<span class={labelClass}>{label}</span>
+		{/if}
 	{/if}
 </label>
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { MaskedInputProps } from '../types.js';
 	import { applyMask, MASK_PATTERNS, type MaskPattern, type MaskToken } from '../utils/mask.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -182,11 +183,9 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<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/inputs/NumberInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { NumberInputComponentProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -73,9 +74,7 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">

package/dist/Sform/inputs/PasswordInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { PasswordInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -32,9 +33,7 @@
 	}
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-password-wrapper">
 	<input
 		{...fieldAttrs}

package/dist/Sform/inputs/RadioCheckboxLabel.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" generics="InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')">
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import type { SelectOption } from '../types';
+
+	type FieldAttrs<InputType> = {
+		'aria-invalid'?: boolean | 'false' | 'true';
+		name: string;
+		type: InputType;
+		value?: string;
+		checked: boolean;
+	};
+	type Props = {
+		fieldAttrs: FieldAttrs<InputType>;
+		uniqueId: string;
+		option: SelectOption;
+		disabled?: boolean;
+		onblur?: (event: FocusEvent) => void;
+		oninput?: (event: Event) => void;
+	};
+	let { fieldAttrs, uniqueId, option, disabled, onblur, oninput }: Props = $props();
+</script>
+
+<label class={`sform-${fieldAttrs.type}-option`} class:disabled={option.disabled}>
+	<input {...fieldAttrs} id={uniqueId} disabled={disabled || option.disabled} {onblur} {oninput} />
+	{#if typeof option.label === 'function'}
+		{@render option.label(option)}
+	{:else}
+		<span class={`sform-${fieldAttrs.type}-label`}>{option.label}</span>
+	{/if}
+</label>
+
+<style>
+	.sform-checkbox-option,
+	.sform-radio-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		padding: 0.25rem 0;
+	}
+
+	:is(.sform-checkbox-option, .sform-radio-option).disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	:is(.sform-checkbox-option, .sform-radio-option) input {
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,39 @@
+import type { HTMLInputTypeAttribute } from 'svelte/elements';
+import type { SelectOption } from '../types';
+declare function $$render<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(): {
+    props: {
+        fieldAttrs: {
+            'aria-invalid'?: boolean | "false" | "true";
+            name: string;
+            type: InputType;
+            value?: string;
+            checked: boolean;
+        };
+        uniqueId: string;
+        option: SelectOption;
+        disabled?: boolean;
+        onblur?: (event: FocusEvent) => void;
+        oninput?: (event: Event) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')> {
+    props(): ReturnType<typeof $$render<InputType>>['props'];
+    events(): ReturnType<typeof $$render<InputType>>['events'];
+    slots(): ReturnType<typeof $$render<InputType>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<InputType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<InputType>['props']>, ReturnType<__sveltets_Render<InputType>['events']>, ReturnType<__sveltets_Render<InputType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<InputType>['bindings']>;
+    } & ReturnType<__sveltets_Render<InputType>['exports']>;
+    <InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')>(internal: unknown, props: ReturnType<__sveltets_Render<InputType>['props']> & {}): ReturnType<__sveltets_Render<InputType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioCheckboxLabel: $$IsomorphicComponent;
+type RadioCheckboxLabel<InputType extends HTMLInputTypeAttribute & ('checkbox' | 'radio')> = InstanceType<typeof RadioCheckboxLabel<InputType>>;
+export default RadioCheckboxLabel;

package/dist/Sform/inputs/RadioInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { RadioInputProps, SelectOption } from '../types.js';
 	import Fieldset from '../utils/Fieldset.svelte';
+	import RadioCheckboxLabel from './RadioCheckboxLabel.svelte';
 
 	let {
 		field,
@@ -30,50 +31,10 @@
 	}
 </script>
 
-<Fieldset {label} {labelClass} {className} {disabled}>
+<Fieldset {label} {labelClass} {className} {disabled} type="radio">
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
-		<label class="sform-radio-option" class:disabled={option.disabled}>
-			<input
-				{...fieldAttrs}
-				type="radio"
-				id={uniqueId}
-				disabled={disabled || option.disabled}
-				{onblur}
-				{oninput}
-			/>
-			<span class="sform-radio-label">{option.label}</span>
-		</label>
+		<RadioCheckboxLabel {fieldAttrs} {uniqueId} {option} {disabled} {onblur} {oninput} />
 	{/each}
 </Fieldset>
-
-<style>
-	.sform-radio-group {
-		border: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.sform-radio-group legend {
-		padding: 0;
-		margin-bottom: 0.5rem;
-	}
-
-	.sform-radio-option {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		cursor: pointer;
-		padding: 0.25rem 0;
-	}
-
-	.sform-radio-option.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	.sform-radio-option input {
-		margin: 0;
-	}
-</style>

package/dist/Sform/inputs/RangeInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { RangeInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -30,9 +31,7 @@
 	});
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-range-wrapper">
 	<input
 		{...fieldAttrs}

package/dist/Sform/inputs/SelectInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { SelectInputProps, SelectOption } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -24,9 +25,7 @@
 	);
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <select {...fieldAttrs} id={name} class={className} {disabled} {onblur} {oninput}>
 	{#each normalizedOptions as option (option.value)}
 		<option value={option.value} disabled={option.disabled}>

package/dist/Sform/inputs/TextInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { TextInputComponentProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -28,9 +29,7 @@
 	let inputElement: HTMLInputElement | undefined = $state();
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">

package/dist/Sform/inputs/TextareaInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { TextareaInputProps } from '../types.js';
+	import TopLabel from './TopLabel.svelte';
 
 	let {
 		field,
@@ -27,9 +28,7 @@
 	let textareaElement: HTMLTextAreaElement | undefined = $state();
 </script>
 
-{#if label}
-	<label class={labelClass} for={name}>{label}</label>
-{/if}
+<TopLabel {label} {labelClass} {name} />
 <div class="sform-input-wrapper sform-textarea-wrapper {wrapperClass ?? ''}">
 	{#if prefix}
 		<div class="sform-prefix" onclick={() => textareaElement?.focus()} role="presentation">

package/dist/Sform/inputs/ToggleInput.svelte

@@ -25,7 +25,11 @@
 </script>
 
 {#if label}
-	<span id="{name}-label" class={labelClass}>{label}</span>
+	{#if typeof label === 'function'}
+		{@render label()}
+	{:else}
+		<span id="{name}-label" class={labelClass}>{label}</span>
+	{/if}
 {/if}
 <label class="sform-toggle {className ?? ''}" class:disabled>
 	<input

package/dist/Sform/inputs/TopLabel.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { BaseInputComponentProps } from '../types';
+
+	let { label, labelClass, name }: Pick<BaseInputComponentProps, 'label' | 'labelClass' | 'name'> =
+		$props();
+</script>
+
+{#if label}
+	{#if typeof label === 'function'}
+		{@render label()}
+	{:else}
+		<label class={labelClass} for={name}>{label}</label>
+	{/if}
+{/if}

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

@@ -0,0 +1,4 @@
+import type { BaseInputComponentProps } from '../types';
+declare const TopLabel: import("svelte").Component<Pick<BaseInputComponentProps, "name" | "labelClass" | "label">, {}, "">;
+type TopLabel = ReturnType<typeof TopLabel>;
+export default TopLabel;

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
    =========================================== */