@samuel-charpentier/sform 0.0.1

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

@@ -0,0 +1,51 @@
+import type { RemoteFormInstance, ValidateOn, EnhanceCallback } from './types.js';
+import type { RemoteFormFields } from '@sveltejs/kit';
+import type { StandardSchemaV1 } from '@standard-schema/spec';
+import type { Snippet } from 'svelte';
+declare function $$render<Input extends import('@sveltejs/kit').RemoteFormInput, Output>(): {
+    props: {
+        /** Remote form object from form() API, or the result of form.for(id) */
+        form: RemoteFormInstance<Input, Output>;
+        /** Preflight validation schema (Valibot, Zod, or any StandardSchema) */
+        schema?: StandardSchemaV1<Input, unknown>;
+        /** Enhance callback for custom form submission handling */
+        enhance?: EnhanceCallback<Input>;
+        /** When to validate and show issues: 'blur' (default), 'change', or 'submit' */
+        validateOn?: ValidateOn;
+        /** Form element class */
+        class?: string;
+        /**
+         * Children snippet receives typed fields for type-safe field access.
+         * @example
+         * ```svelte
+         * <Sform {form}>
+         *   {#snippet children(fields)}
+         *     <Sfield field={fields.username} type="text" />
+         *   {/snippet}
+         * </Sform>
+         * ```
+         */
+        children: Snippet<[RemoteFormFields<Input>]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Input extends import('@sveltejs/kit').RemoteFormInput, Output> {
+    props(): ReturnType<typeof $$render<Input, Output>>['props'];
+    events(): ReturnType<typeof $$render<Input, Output>>['events'];
+    slots(): ReturnType<typeof $$render<Input, Output>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Input extends import('@sveltejs/kit').RemoteFormInput, Output>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Input, Output>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Input, Output>['props']>, ReturnType<__sveltets_Render<Input, Output>['events']>, ReturnType<__sveltets_Render<Input, Output>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Input, Output>['bindings']>;
+    } & ReturnType<__sveltets_Render<Input, Output>['exports']>;
+    <Input extends import('@sveltejs/kit').RemoteFormInput, Output>(internal: unknown, props: ReturnType<__sveltets_Render<Input, Output>['props']> & {}): ReturnType<__sveltets_Render<Input, Output>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Sform: $$IsomorphicComponent;
+type Sform<Input extends import('@sveltejs/kit').RemoteFormInput, Output> = InstanceType<typeof Sform<Input, Output>>;
+export default Sform;

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

@@ -0,0 +1,3 @@
+import type { SformContext, ValidateOn } from './types.js';
+export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void): SformContext;
+export declare function getSformContext(): SformContext;

package/dist/Sform/context.svelte.js

@@ -0,0 +1,65 @@
+import { getContext, setContext } from 'svelte';
+import { SvelteSet } from 'svelte/reactivity';
+const SFORM_CONTEXT_KEY = Symbol('sform-context');
+export function createSformContext(getValidateOn, getFieldNames, triggerValidation) {
+    const touched = new SvelteSet();
+    const dirty = new SvelteSet();
+    let submitted = $state(false);
+    const context = {
+        get validateOn() {
+            return getValidateOn();
+        },
+        get submitted() {
+            return submitted;
+        },
+        triggerValidation,
+        getFieldState: (name) => ({
+            touched: touched.has(name),
+            dirty: dirty.has(name)
+        }),
+        markTouched: (name) => {
+            touched.add(name);
+        },
+        markDirty: (name) => {
+            dirty.add(name);
+        },
+        shouldDisplayIssues: (name, fieldValidateOn) => {
+            const effectiveValidateOn = fieldValidateOn ?? getValidateOn();
+            switch (effectiveValidateOn) {
+                case 'blur':
+                    return touched.has(name);
+                case 'change':
+                    return dirty.has(name);
+                case 'submit':
+                    return submitted;
+                default:
+                    return false;
+            }
+        },
+        markSubmitted: () => {
+            submitted = true;
+        },
+        markAllFieldsDirty: () => {
+            // Get all field names from the form and mark them as touched and dirty
+            const fieldNames = getFieldNames();
+            for (const name of fieldNames) {
+                touched.add(name);
+                dirty.add(name);
+            }
+        },
+        resetFieldStates: () => {
+            touched.clear();
+            dirty.clear();
+            submitted = false;
+        }
+    };
+    setContext(SFORM_CONTEXT_KEY, context);
+    return context;
+}
+export function getSformContext() {
+    const context = getContext(SFORM_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Sfield must be used within an Sform component');
+    }
+    return context;
+}

package/dist/Sform/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Sform } from './Sform.svelte';
+export { default as Sfield } from './Sfield.svelte';
+export { default as Sbutton } from './inputs/ButtonInput.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, ButtonFormState, ButtonInputProps, 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';

package/dist/Sform/index.js

@@ -0,0 +1,7 @@
+// Main components
+export { default as Sform } from './Sform.svelte';
+export { default as Sfield } from './Sfield.svelte';
+// Standalone components (not routed through Sfield)
+export { default as Sbutton } from './inputs/ButtonInput.svelte';
+// Utilities
+export { applyMask, unmask, MASK_PATTERNS, DEFAULT_TOKENS } from './utils/mask.js';

package/dist/Sform/inputs/ButtonInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ButtonFormState, RemoteFormIssue } from '../types.js';
+
+	interface FormLike {
+		pending?: number;
+		result?: unknown;
+		fields: {
+			allIssues?: () => RemoteFormIssue[] | undefined;
+		};
+	}
+
+	interface Props {
+		/** The remote form - required for button state */
+		form: FormLike;
+		/** Button text (used if no snippets provided) */
+		label?: string;
+		/** Button type */
+		buttonType?: 'submit' | 'reset' | 'button';
+		/** Button class */
+		class?: string;
+		/** Whether button is disabled */
+		disabled?: boolean;
+		/** Snippet for default state */
+		defaultState?: Snippet<[ButtonFormState]>;
+		/** Snippet for pending state */
+		pendingState?: Snippet<[ButtonFormState]>;
+		/** Snippet for success state */
+		successState?: Snippet<[ButtonFormState]>;
+		/** Snippet for error/issues state */
+		errorState?: Snippet<[ButtonFormState]>;
+	}
+
+	let {
+		form,
+		label = 'Submit',
+		buttonType = 'submit',
+		class: className,
+		disabled = false,
+		defaultState,
+		pendingState,
+		successState,
+		errorState
+	}: Props = $props();
+
+	const formState: ButtonFormState = $derived.by(() => {
+		const pending = (form.pending ?? 0) !== 0;
+		const hasResult = form.result !== undefined;
+		const issues = form.fields.allIssues?.() ?? [];
+		const hasIssues = issues.length > 0;
+
+		return {
+			pending,
+			success: hasResult && !hasIssues && !pending,
+			hasIssues,
+			result: form.result
+		};
+	});
+
+	const isDisabled = $derived(disabled || formState.pending);
+</script>
+
+<button type={buttonType} class={className} disabled={isDisabled}>
+	{#if formState.pending && pendingState}
+		{@render pendingState(formState)}
+	{:else if formState.success && successState}
+		{@render successState(formState)}
+	{:else if formState.hasIssues && errorState}
+		{@render errorState(formState)}
+	{:else if defaultState}
+		{@render defaultState(formState)}
+	{:else}
+		{label}
+	{/if}
+</button>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { ButtonFormState, RemoteFormIssue } from '../types.js';
+interface FormLike {
+    pending?: number;
+    result?: unknown;
+    fields: {
+        allIssues?: () => RemoteFormIssue[] | undefined;
+    };
+}
+interface Props {
+    /** The remote form - required for button state */
+    form: FormLike;
+    /** Button text (used if no snippets provided) */
+    label?: string;
+    /** Button type */
+    buttonType?: 'submit' | 'reset' | 'button';
+    /** Button class */
+    class?: string;
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Snippet for default state */
+    defaultState?: Snippet<[ButtonFormState]>;
+    /** Snippet for pending state */
+    pendingState?: Snippet<[ButtonFormState]>;
+    /** Snippet for success state */
+    successState?: Snippet<[ButtonFormState]>;
+    /** Snippet for error/issues state */
+    errorState?: Snippet<[ButtonFormState]>;
+}
+declare const ButtonInput: import("svelte").Component<Props, {}, "">;
+type ButtonInput = ReturnType<typeof ButtonInput>;
+export default ButtonInput;

package/dist/Sform/inputs/CheckboxGroupInput.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { CheckboxGroupInputProps, SelectOption } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		disabled,
+		options = [],
+		showIssues,
+		onblur,
+		oninput
+	}: CheckboxGroupInputProps = $props();
+
+	// Normalize options to SelectOption format
+	const normalizedOptions = $derived(
+		options.map((opt): SelectOption => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
+	);
+
+	// Helper to get field attrs with controlled aria-invalid
+	function getFieldAttrs(optionValue: string) {
+		const attrs = field.as('checkbox', optionValue);
+		return {
+			...attrs,
+			'aria-invalid': showIssues ? attrs['aria-invalid'] : undefined
+		};
+	}
+</script>
+
+<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
+	{#if label}
+		<legend class={labelClass}>{label}</legend>
+	{/if}
+	{#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>
+	{/each}
+</fieldset>
+
+<style>
+	.sform-checkbox-group {
+		border: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.sform-checkbox-group legend {
+		padding: 0;
+		margin-bottom: 0.5rem;
+	}
+
+	.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/CheckboxGroupInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxGroupInputProps } from '../types.js';
+declare const CheckboxGroupInput: import("svelte").Component<CheckboxGroupInputProps, {}, "">;
+type CheckboxGroupInput = ReturnType<typeof CheckboxGroupInput>;
+export default CheckboxGroupInput;

package/dist/Sform/inputs/CheckboxInput.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { CheckboxRadioInputProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		disabled,
+		value,
+		showIssues,
+		onblur,
+		oninput
+	}: CheckboxRadioInputProps = $props();
+
+	// Single boolean checkbox - no value needed
+	const fieldAttrs = $derived({
+		...field.as('checkbox'),
+		'aria-invalid': showIssues ? field.as('checkbox')['aria-invalid'] : undefined
+	});
+</script>
+
+<label class="sform-checkbox {className ?? ''}" class:disabled>
+	<input {...fieldAttrs} type="checkbox" id={name} {disabled} {onblur} {oninput} />
+	{#if label}
+		<span class={labelClass}>{label}</span>
+	{/if}
+</label>
+
+<style>
+	.sform-checkbox {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
+
+	.sform-checkbox.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.sform-checkbox input {
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { CheckboxRadioInputProps } from '../types.js';
+declare const CheckboxInput: import("svelte").Component<CheckboxRadioInputProps, {}, "">;
+type CheckboxInput = ReturnType<typeof CheckboxInput>;
+export default CheckboxInput;

package/dist/Sform/inputs/MaskedInput.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { MaskedInputProps } from '../types.js';
+	import { applyMask, MASK_PATTERNS, type MaskPattern, type MaskToken } from '../utils/mask.js';
+
+	let {
+		field,
+		name,
+		label,
+		placeholder,
+		class: className,
+		labelClass,
+		disabled,
+		readonly,
+		autocomplete,
+		mask,
+		tokens,
+		maskPlaceholder = '_',
+		showMaskPlaceholder = false,
+		unmaskValue = true,
+		showIssues,
+		prefix,
+		suffix,
+		wrapperClass,
+		onblur,
+		oninput
+	}: MaskedInputProps = $props();
+
+	// Resolve mask pattern
+	const resolvedMask = $derived(mask in MASK_PATTERNS ? MASK_PATTERNS[mask as MaskPattern] : mask);
+
+	// Get aria-invalid from field, respecting showIssues
+	const ariaInvalid = $derived(showIssues ? field.as('text')['aria-invalid'] : undefined);
+
+	let inputElement: HTMLInputElement | undefined = $state();
+
+	// Local display value state - synced with field
+	let displayValue = $state('');
+	let maskComplete = $state(false);
+
+	// Track the last value WE stored to distinguish our updates from external changes
+	let lastStoredValue: string | undefined = undefined;
+
+	// Initialize from field value - only for EXTERNAL changes (initial load, programmatic updates)
+	$effect(() => {
+		const fieldVal = field.value();
+		const val = typeof fieldVal === 'string' ? fieldVal : '';
+
+		// Only sync from field if this is NOT a value we just stored
+		// This prevents the $effect from fighting with user input
+		if (val === lastStoredValue) {
+			// This is our own update echoing back, ignore it
+			return;
+		}
+
+		if (val) {
+			const result = applyMask(val, {
+				mask: resolvedMask,
+				tokens,
+				placeholder: maskPlaceholder,
+				showPlaceholder: showMaskPlaceholder
+			});
+			displayValue = result.masked;
+			maskComplete = result.complete;
+			// Update lastStoredValue to match what we're displaying
+			lastStoredValue = unmaskValue ? result.raw : result.masked;
+		} else {
+			displayValue = '';
+			maskComplete = false;
+			lastStoredValue = '';
+		}
+	});
+
+	function processInput(
+		inputValue: string,
+		cursorPos: number
+	): { masked: string; raw: string; cursorPosition: number; complete: boolean } {
+		const result = applyMask(
+			inputValue,
+			{
+				mask: resolvedMask,
+				tokens,
+				placeholder: maskPlaceholder,
+				showPlaceholder: showMaskPlaceholder
+			},
+			cursorPos
+		);
+
+		return result;
+	}
+
+	function handleInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const cursorPos = input.selectionStart ?? 0;
+
+		const result = processInput(input.value, cursorPos);
+
+		// Update local state immediately
+		displayValue = result.masked;
+		maskComplete = result.complete;
+
+		// Store in field and track what we stored
+		const valueToStore = unmaskValue ? result.raw : result.masked;
+		lastStoredValue = valueToStore;
+		field.set(valueToStore);
+
+		// Restore cursor position after DOM update
+		requestAnimationFrame(() => {
+			if (inputElement) {
+				inputElement.setSelectionRange(result.cursorPosition, result.cursorPosition);
+			}
+		});
+
+		oninput?.();
+	}
+
+	function handlePaste(event: ClipboardEvent) {
+		event.preventDefault();
+		const input = event.target as HTMLInputElement;
+		const pastedText = event.clipboardData?.getData('text') ?? '';
+		const selStart = input.selectionStart ?? 0;
+		const selEnd = input.selectionEnd ?? 0;
+
+		// Build new value with pasted content
+		const before = displayValue.slice(0, selStart);
+		const after = displayValue.slice(selEnd);
+		const newValue = before + pastedText + after;
+
+		const result = processInput(newValue, selStart + pastedText.length);
+
+		displayValue = result.masked;
+		maskComplete = result.complete;
+
+		// Store and track the value
+		const valueToStore = unmaskValue ? result.raw : result.masked;
+		lastStoredValue = valueToStore;
+		field.set(valueToStore);
+
+		requestAnimationFrame(() => {
+			if (inputElement) {
+				inputElement.setSelectionRange(result.cursorPosition, result.cursorPosition);
+			}
+		});
+
+		oninput?.();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		// Handle backspace specially to skip over literals
+		if (event.key === 'Backspace') {
+			const input = event.target as HTMLInputElement;
+			const cursorPos = input.selectionStart ?? 0;
+
+			if (cursorPos > 0 && input.selectionStart === input.selectionEnd) {
+				const charBefore = displayValue[cursorPos - 1];
+				const maskChar = resolvedMask[cursorPos - 1];
+
+				// If the character before cursor is a literal, skip it
+				if (charBefore === maskChar && !/[9aA*]/.test(maskChar)) {
+					event.preventDefault();
+					input.setSelectionRange(cursorPos - 1, cursorPos - 1);
+				}
+			}
+		}
+	}
+
+	// Handle autocomplete/autofill by watching for changes
+	function handleChange(event: Event) {
+		const input = event.target as HTMLInputElement;
+
+		// Process the entire autofilled value
+		const result = processInput(input.value, input.value.length);
+
+		displayValue = result.masked;
+		maskComplete = result.complete;
+
+		// Store and track the value
+		const valueToStore = unmaskValue ? result.raw : result.masked;
+		lastStoredValue = valueToStore;
+		field.set(valueToStore);
+
+		oninput?.();
+	}
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<!-- Hidden input holds the actual value for form submission -->
+<input type="hidden" {name} value={field.value() ?? ''} />
+<!-- Visible input shows masked display value but doesn't submit (no name) -->
+<div class="sform-input-wrapper {wrapperClass ?? ''}">
+	{#if prefix}
+		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">
+			{#if typeof prefix === 'function'}{@render prefix()}{:else}{prefix}{/if}
+		</div>
+	{/if}
+	<input
+		bind:this={inputElement}
+		type="text"
+		id={name}
+		class={className}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{autocomplete}
+		aria-invalid={ariaInvalid}
+		bind:value={displayValue}
+		oninput={handleInput}
+		onpaste={handlePaste}
+		onchange={handleChange}
+		onkeydown={handleKeyDown}
+		{onblur}
+		data-mask-complete={maskComplete}
+	/>
+	{#if suffix}
+		<div class="sform-suffix" onclick={() => inputElement?.focus()} role="presentation">
+			{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { MaskedInputProps } from '../types.js';
+declare const MaskedInput: import("svelte").Component<MaskedInputProps, {}, "">;
+type MaskedInput = ReturnType<typeof MaskedInput>;
+export default MaskedInput;