@samuel-charpentier/sform 0.0.1

package/dist/Sform/inputs/NumberInput.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { NumberInputComponentProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		placeholder,
+		class: className,
+		labelClass,
+		min,
+		max,
+		step,
+		disabled,
+		readonly,
+		autocomplete,
+		showIssues,
+		prefix,
+		suffix,
+		wrapperClass,
+		showControls = true,
+		align = 'start',
+		maxDecimals,
+		onblur,
+		oninput
+	}: NumberInputComponentProps = $props();
+
+	const fieldAttrs = $derived({
+		...field.as('number'),
+		'aria-invalid': showIssues ? field.as('number')['aria-invalid'] : undefined
+	});
+
+	const inputStyle = $derived(
+		[!showControls && 'appearance: textfield;', align === 'end' && 'text-align: end;']
+			.filter(Boolean)
+			.join(' ') || undefined
+	);
+
+	let inputElement: HTMLInputElement | undefined = $state();
+
+	// Handle keydown to prevent period when maxDecimals is 0
+	function handleKeyDown(event: KeyboardEvent) {
+		if (maxDecimals === 0 && (event.key === '.' || event.key === ',')) {
+			event.preventDefault();
+		}
+	}
+
+	// Handle input to enforce decimal limits
+	function handleInput(event: Event) {
+		if (maxDecimals === undefined) {
+			oninput?.();
+			return;
+		}
+
+		const input = event.target as HTMLInputElement;
+		const value = input.value;
+
+		// Find decimal separator (. or ,)
+		const decimalIndex = Math.max(value.indexOf('.'), value.indexOf(','));
+
+		if (decimalIndex !== -1) {
+			const decimals = value.length - decimalIndex - 1;
+			if (decimals > maxDecimals) {
+				// Truncate to maxDecimals
+				const truncated = value.slice(0, decimalIndex + maxDecimals + 1);
+				input.value = truncated;
+				// Also update the field value
+				field.set(parseFloat(truncated) || 0);
+			}
+		}
+
+		oninput?.();
+	}
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<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}
+		{...fieldAttrs}
+		id={name}
+		class="{className ?? ''}{showControls ? '' : ' sform-number-no-controls'}"
+		style={inputStyle}
+		{placeholder}
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{readonly}
+		{autocomplete}
+		{onblur}
+		onkeydown={handleKeyDown}
+		oninput={handleInput}
+	/>
+	{#if suffix}
+		<div class="sform-suffix" onclick={() => inputElement?.focus()} role="presentation">
+			{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Hide spinbuttons when showControls is false */
+	input.sform-number-no-controls::-webkit-outer-spin-button,
+	input.sform-number-no-controls::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+</style>

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

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

package/dist/Sform/inputs/PasswordInput.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type { PasswordInputProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		placeholder,
+		class: className,
+		labelClass,
+		disabled,
+		readonly,
+		autocomplete,
+		showToggle = true,
+		showIssues,
+		onblur,
+		oninput,
+		showToggleIcon
+	}: PasswordInputProps = $props();
+
+	let showPassword = $state(false);
+
+	const fieldAttrs = $derived({
+		...field.as(showPassword ? 'text' : 'password'),
+		'aria-invalid': showIssues
+			? field.as(showPassword ? 'text' : 'password')['aria-invalid']
+			: undefined
+	});
+
+	function toggleVisibility() {
+		showPassword = !showPassword;
+	}
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<div class="sform-password-wrapper">
+	<input
+		{...fieldAttrs}
+		type={showPassword ? 'text' : 'password'}
+		id={name}
+		class={className}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{autocomplete}
+		{onblur}
+		{oninput}
+	/>
+	{#if showToggle}
+		<button
+			type="button"
+			class="sform-password-toggle"
+			onclick={toggleVisibility}
+			aria-label={showPassword ? 'Hide password' : 'Show password'}
+			tabindex={-1}
+			{disabled}
+		>
+			{#if showToggleIcon !== undefined}
+				{@render showToggleIcon(showPassword)}
+			{:else if showPassword}
+				<!-- Eye closed icon (password visible) -->
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path
+						d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+					></path>
+					<line x1="1" y1="1" x2="23" y2="23"></line>
+				</svg>
+			{:else}
+				<!-- Eye open icon (password hidden) -->
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="20"
+					height="20"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+					<circle cx="12" cy="12" r="3"></circle>
+				</svg>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.sform-password-wrapper {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		width: 100%;
+	}
+
+	.sform-password-wrapper input {
+		width: 100%;
+		padding-right: 2.5rem;
+	}
+
+	.sform-password-toggle {
+		position: absolute;
+		right: 0.5rem;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #666;
+		border-radius: 0.25rem;
+	}
+
+	.sform-password-toggle:hover:not(:disabled) {
+		color: #333;
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+
+	.sform-password-toggle:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.sform-password-toggle:focus {
+		outline: 2px solid #2196f3;
+		outline-offset: 2px;
+	}
+</style>

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

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

package/dist/Sform/inputs/RadioInput.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { RadioInputProps, SelectOption } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		disabled,
+		options = [],
+		showIssues,
+		onblur,
+		oninput
+	}: RadioInputProps = $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('radio', optionValue);
+		return {
+			...attrs,
+			'aria-invalid': showIssues ? attrs['aria-invalid'] : undefined
+		};
+	}
+</script>
+
+<fieldset class="sform-radio-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-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>
+	{/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/RadioInput.svelte.d.ts

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

package/dist/Sform/inputs/RangeInput.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { RangeInputProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled,
+		showValue = true,
+		formatValue = (v: number) => String(v),
+		showIssues,
+		onblur,
+		oninput
+	}: RangeInputProps = $props();
+
+	const fieldAttrs = $derived({
+		...field.as('range'),
+		'aria-invalid': showIssues ? field.as('range')['aria-invalid'] : undefined
+	});
+
+	// Get current value for display
+	const currentValue = $derived.by(() => {
+		const val = field.value();
+		return typeof val === 'number' ? val : Number(val) || Number(min);
+	});
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<div class="sform-range-wrapper">
+	<input
+		{...fieldAttrs}
+		type="range"
+		id={name}
+		class={className}
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{onblur}
+		{oninput}
+	/>
+	{#if showValue}
+		<output for={name} class="sform-range-value">
+			{formatValue(currentValue)}
+		</output>
+	{/if}
+</div>
+
+<style>
+	.sform-range-wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.sform-range-value {
+		min-width: 3ch;
+		text-align: right;
+	}
+</style>

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

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

package/dist/Sform/inputs/SelectInput.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { SelectInputProps, SelectOption } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		disabled,
+		showIssues,
+		onblur,
+		oninput,
+		options
+	}: SelectInputProps = $props();
+
+	const fieldAttrs = $derived({
+		...field.as('select'),
+		'aria-invalid': showIssues ? field.as('select')['aria-invalid'] : undefined
+	});
+
+	const normalizedOptions: SelectOption[] = $derived(
+		options.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
+	);
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<select {...fieldAttrs} id={name} class={className} {disabled} {onblur} {oninput}>
+	{#each normalizedOptions as option (option.value)}
+		<option value={option.value} disabled={option.disabled}>
+			{option.label}
+		</option>
+	{/each}
+</select>

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

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

package/dist/Sform/inputs/TextInput.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { TextInputComponentProps } from '../types.js';
+
+	let {
+		field,
+		type,
+		name,
+		label,
+		placeholder,
+		class: className,
+		labelClass,
+		disabled,
+		readonly,
+		autocomplete,
+		showIssues,
+		prefix,
+		suffix,
+		wrapperClass,
+		onblur,
+		oninput
+	}: TextInputComponentProps = $props();
+
+	const fieldAttrs = $derived({
+		...field.as(type as 'text'),
+		'aria-invalid': showIssues ? field.as(type as 'text')['aria-invalid'] : undefined
+	});
+
+	let inputElement: HTMLInputElement | undefined = $state();
+</script>
+
+{#if type !== 'hidden'}
+	{#if label}
+		<label class={labelClass} for={name}>{label}</label>
+	{/if}
+	<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}
+			{...fieldAttrs}
+			id={name}
+			class={className}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{autocomplete}
+			{onblur}
+			{oninput}
+		/>
+		{#if suffix}
+			<div class="sform-suffix" onclick={() => inputElement?.focus()} role="presentation">
+				{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
+			</div>
+		{/if}
+	</div>
+{:else}
+	<input {...fieldAttrs} type="hidden" id={name} />
+{/if}

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

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

package/dist/Sform/inputs/TextareaInput.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { TextareaInputProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		placeholder,
+		class: className,
+		labelClass,
+		disabled,
+		readonly,
+		autocomplete,
+		showIssues,
+		prefix,
+		suffix,
+		wrapperClass,
+		onblur,
+		oninput
+	}: TextareaInputProps = $props();
+
+	const fieldAttrs = $derived({
+		...field.as('text'),
+		'aria-invalid': showIssues ? field.as('text')['aria-invalid'] : undefined
+	});
+
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+</script>
+
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
+{/if}
+<div class="sform-input-wrapper sform-textarea-wrapper {wrapperClass ?? ''}">
+	{#if prefix}
+		<div class="sform-prefix" onclick={() => textareaElement?.focus()} role="presentation">
+			{#if typeof prefix === 'function'}{@render prefix()}{:else}{prefix}{/if}
+		</div>
+	{/if}
+	<textarea
+		bind:this={textareaElement}
+		{...fieldAttrs}
+		id={name}
+		class={className}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{autocomplete}
+		{onblur}
+		{oninput}
+	></textarea>
+	{#if suffix}
+		<div class="sform-suffix" onclick={() => textareaElement?.focus()} role="presentation">
+			{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
+		</div>
+	{/if}
+</div>

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

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

package/dist/Sform/inputs/ToggleInput.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import type { ToggleInputProps } from '../types.js';
+
+	let {
+		field,
+		name,
+		label,
+		class: className,
+		labelClass,
+		disabled,
+		onLabel = 'On',
+		offLabel = 'Off',
+		checkedValue = 'true',
+		uncheckedValue = 'false',
+		onblur,
+		oninput
+	}: ToggleInputProps = $props();
+
+	const fieldAttrs = $derived(field.as('checkbox', checkedValue));
+
+	const isChecked = $derived.by(() => {
+		const val = field.value();
+		return val === checkedValue || val === true;
+	});
+</script>
+
+{#if label}
+	<span id="{name}-label" class={labelClass}>{label}</span>
+{/if}
+<label class="sform-toggle {className ?? ''}" class:disabled>
+	<input
+		{...fieldAttrs}
+		type="checkbox"
+		id={name}
+		aria-labelledby={label ? `${name}-label` : undefined}
+		{disabled}
+		value={checkedValue}
+		{onblur}
+		{oninput}
+	/>
+	<span class="sform-toggle-track">
+		<span class="sform-toggle-thumb"></span>
+	</span>
+	<span class="sform-toggle-label">
+		{isChecked ? onLabel : offLabel}
+	</span>
+</label>
+
+<style>
+	.sform-toggle {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+	}
+
+	.sform-toggle.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.sform-toggle input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.sform-toggle-track {
+		position: relative;
+		width: 2.5rem;
+		height: 1.25rem;
+		background-color: #ccc;
+		border-radius: 1rem;
+		transition: background-color 0.2s;
+	}
+
+	.sform-toggle input:checked + .sform-toggle-track {
+		background-color: #4caf50;
+	}
+
+	.sform-toggle-thumb {
+		position: absolute;
+		top: 0.125rem;
+		left: 0.125rem;
+		width: 1rem;
+		height: 1rem;
+		background-color: white;
+		border-radius: 50%;
+		transition: transform 0.2s;
+	}
+
+	.sform-toggle input:checked + .sform-toggle-track .sform-toggle-thumb {
+		transform: translateX(1.25rem);
+	}
+
+	.sform-toggle input:focus + .sform-toggle-track {
+		outline: 2px solid #2196f3;
+		outline-offset: 2px;
+	}
+</style>