@samuel-charpentier/sform 0.0.2 → 0.0.3

package/README.md

@@ -2,6 +2,39 @@
 
 A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
 
+## Table of Contents
+
+- [Features](#features)
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+  - [Create a Remote Form](#1-create-a-remote-form)
+  - [Create Your Form Component](#2-create-your-form-component)
+- [Components](#components)
+  - [`<Sform>`](#sform)
+  - [`<Sfield>`](#sfield)
+    - [Common Props (all types)](#common-props-all-types)
+    - [Text Inputs](#text-inputs)
+    - [Password Input](#password-input)
+    - [Number Input](#number-input)
+    - [Textarea](#textarea)
+    - [Select](#select)
+    - [Checkbox](#checkbox)
+    - [Radio](#radio)
+    - [Range](#range)
+    - [Toggle](#toggle)
+    - [Toggle Options](#toggle-options)
+    - [Masked Input](#masked-input)
+    - [Hidden Input](#hidden-input)
+  - [`<Sbutton>`](#sbutton)
+  - [`<SIssues>`](#sissues)
+  - [`<SResult>`](#sresult)
+- [Styling](#styling)
+- [Validation](#validation)
+- [Type Safety](#type-safety)
+- [Development](#development)
+- [License](#license)
+
 ## Features
 
 - ✅ **Type-safe** - Discriminated union types for each input type
@@ -69,10 +102,12 @@ export const login = form(loginSchema, async ({ username, _password }) => {
 </script>
 
 <Sform form={login} validateOn="blur">
-	<Sfield name="username" type="text" label="Username" />
-	<Sfield name="_password" type="password" label="Password" />
+	{#snippet children(fields)}
+		<Sfield field={fields.username} type="text" label="Username" />
+		<Sfield field={fields._password} type="password" label="Password" />
 
-	<Sbutton label="Login" />
+		<Sbutton form={login} label="Login" />
+	{/snippet}
 </Sform>
 ```
 
@@ -84,7 +119,9 @@ Wrapper component that provides form context to all child fields.
 
 ```svelte
 <Sform form={remoteForm} validateOn="blur" class="my-form">
-	<!-- Sfield components here -->
+	{#snippet children(fields)}
+		<!-- Sfield components here -->
+	{/snippet}
 </Sform>
 ```
 
@@ -106,27 +143,28 @@ Smart field component with type-safe props based on input type.
 
 #### Common Props (all types)
 
-| Prop          | Type                      | Default     | Description                    |
-| ------------- | ------------------------- | ----------- | ------------------------------ |
-| `name`        | `string`                  | required    | Field name (must match schema) |
-| `type`        | `InputType`               | required    | Input type                     |
-| `label`       | `string`                  | `undefined` | Field label                    |
-| `placeholder` | `string`                  | `undefined` | Placeholder text               |
-| `disabled`    | `boolean`                 | `false`     | Disable the field              |
-| `readonly`    | `boolean`                 | `false`     | Make field readonly            |
-| `validateOn`  | `ValidateOn`              | inherited   | Override form validateOn       |
-| `class`       | `SfieldClasses \| string` | `undefined` | CSS classes                    |
+| Prop          | Type                      | Default     | Description                           |
+| ------------- | ------------------------- | ----------- | ------------------------------------- |
+| `field`       | `RemoteFormField`         | required    | Field from `fields` snippet parameter |
+| `type`        | `InputType`               | required    | Input type                            |
+| `label`       | `string`                  | `undefined` | Field label                           |
+| `placeholder` | `string`                  | `undefined` | Placeholder text (text/password/etc)  |
+| `disabled`    | `boolean`                 | `false`     | Disable the field                     |
+| `readonly`    | `boolean`                 | `false`     | Make field readonly                   |
+| `validateOn`  | `ValidateOn`              | inherited   | Override form validateOn              |
+| `class`       | `SfieldClasses \| string` | `undefined` | CSS classes                           |
+| `hint`        | `string \| Snippet`       | `undefined` | Help text shown below the field       |
 
 #### Text Inputs
 
 ```svelte
-<Sfield name="email" type="email" label="Email" placeholder="you@example.com" />
-<Sfield name="search" type="search" label="Search" />
-<Sfield name="phone" type="tel" label="Phone" />
-<Sfield name="website" type="url" label="Website" prefix="https://" />
+<Sfield field={fields.email} type="email" label="Email" placeholder="you@example.com" />
+<Sfield field={fields.search} type="search" label="Search" />
+<Sfield field={fields.phone} type="tel" label="Phone" />
+<Sfield field={fields.website} type="url" label="Website" prefix="https://" />
 ```
 
-Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime-local`, `time`, `month`, `week`, `color`, `file`, `hidden`
+Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime-local`, `time`, `month`, `week`, `color`, `file`
 
 | Prop     | Type                | Default     | Description          |
 | -------- | ------------------- | ----------- | -------------------- |
@@ -136,20 +174,32 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Password Input
 
 ```svelte
-<Sfield name="_password" type="password" label="Password" />
-<Sfield name="_password" type="password" label="Password" showToggle={false} />
+<Sfield field={fields._password} type="password" label="Password" />
+<Sfield field={fields._password} type="password" label="Password" showToggle={false} />
+<Sfield field={fields._password} type="password" label="Password">
+	{#snippet showToggleIcon(passwordShown)}
+		{#if passwordShown}
+			🙈
+		{:else}
+			👁️
+		{/if}
+	{/snippet}
+</Sfield>
 ```
 
-| Prop         | Type      | Default | Description                        |
-| ------------ | --------- | ------- | ---------------------------------- |
-| `showToggle` | `boolean` | `true`  | Show eye icon to toggle visibility |
+| Prop             | Type                                | Default     | Description                        |
+| ---------------- | ----------------------------------- | ----------- | ---------------------------------- |
+| `showToggle`     | `boolean`                           | `true`      | Show eye icon to toggle visibility |
+| `showToggleIcon` | `Snippet<[passwordShown: boolean]>` | `undefined` | Custom toggle icon snippet         |
+| `prefix`         | `string \| Snippet`                 | `undefined` | Content before input               |
+| `suffix`         | `string \| Snippet`                 | `undefined` | Content after input                |
 
 #### Number Input
 
 ```svelte
-<Sfield name="age" type="number" label="Age" min={0} max={150} step={1} />
-<Sfield name="price" type="number" label="Price" prefix="$" suffix="USD" align="end" />
-<Sfield name="quantity" type="number" label="Qty" showControls={false} maxDecimals={0} />
+<Sfield field={fields.age} type="number" label="Age" min={0} max={150} step={1} />
+<Sfield field={fields.price} type="number" label="Price" prefix="$" suffix="USD" align="end" />
+<Sfield field={fields.quantity} type="number" label="Qty" showControls={false} maxDecimals={0} />
 ```
 
 | Prop           | Type                | Default     | Description                            |
@@ -162,18 +212,26 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 | `showControls` | `boolean`           | `true`      | Show spinner controls                  |
 | `align`        | `'start' \| 'end'`  | `'start'`   | Text alignment                         |
 | `maxDecimals`  | `number`            | `undefined` | Max decimal places (0 = integers only) |
+| `autocomplete` | `string`            | `undefined` | HTML autocomplete attribute            |
 
 #### Textarea
 
 ```svelte
-<Sfield name="bio" type="textarea" label="Bio" placeholder="Tell us about yourself" />
+<Sfield field={fields.bio} type="textarea" label="Bio" placeholder="Tell us about yourself" />
+<Sfield field={fields.notes} type="textarea" label="Notes" prefix="📝" suffix="(max 500 chars)" />
 ```
 
+| Prop           | Type                | Default     | Description                 |
+| -------------- | ------------------- | ----------- | --------------------------- |
+| `prefix`       | `string \| Snippet` | `undefined` | Content before input        |
+| `suffix`       | `string \| Snippet` | `undefined` | Content after input         |
+| `autocomplete` | `string`            | `undefined` | HTML autocomplete attribute |
+
 #### Select
 
 ```svelte
 <Sfield
-	name="country"
+	field={fields.country}
 	type="select"
 	label="Country"
 	options={[
@@ -191,14 +249,14 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Checkbox
 
 ```svelte
-<Sfield name="subscribe" type="checkbox" label="Subscribe to newsletter" />
+<Sfield field={fields.subscribe} type="checkbox" label="Subscribe to newsletter" />
 ```
 
 #### Radio
 
 ```svelte
 <Sfield
-	name="plan"
+	field={fields.plan}
 	type="radio"
 	label="Plan"
 	options={[
@@ -216,7 +274,16 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Range
 
 ```svelte
-<Sfield name="volume" type="range" label="Volume" min={0} max={100} step={5} showValue />
+<Sfield field={fields.volume} type="range" label="Volume" min={0} max={100} step={5} showValue />
+<Sfield
+	field={fields.brightness}
+	type="range"
+	label="Brightness"
+	min={0}
+	max={100}
+	formatValue={(v) => `${v}%`}
+	showValue
+/>
 ```
 
 | Prop          | Type                        | Default     | Description            |
@@ -230,8 +297,8 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Toggle
 
 ```svelte
-<Sfield name="notifications" type="toggle" label="Enable Notifications" />
-<Sfield name="darkMode" type="toggle" label="Theme" onLabel="Dark" offLabel="Light" />
+<Sfield field={fields.notifications} type="toggle" label="Enable Notifications" />
+<Sfield field={fields.darkMode} type="toggle" label="Theme" onLabel="Dark" offLabel="Light" />
 ```
 
 | Prop             | Type     | Default     | Description          |
@@ -245,7 +312,7 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 
 ```svelte
 <Sfield
-	name="theme"
+	field={fields.theme}
 	type="toggle-options"
 	label="Theme"
 	options={[
@@ -254,6 +321,18 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 		{ value: 'auto', label: 'Auto' }
 	]}
 />
+<!-- Multiple selection -->
+<Sfield
+	field={fields.features}
+	type="toggle-options"
+	label="Features"
+	multiple={true}
+	options={[
+		{ value: 'push', label: 'Push Notifications' },
+		{ value: 'email', label: 'Email' },
+		{ value: 'sms', label: 'SMS' }
+	]}
+/>
 ```
 
 | Prop       | Type                         | Default  | Description               |
@@ -264,19 +343,28 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 #### Masked Input
 
 ```svelte
-<Sfield name="phone" type="masked" label="Phone" mask="(###) ###-####" />
-<Sfield name="creditCard" type="masked" label="Credit Card" mask="#### #### #### ####" />
-<Sfield name="ssn" type="masked" label="SSN" mask="###-##-####" />
+<Sfield field={fields.phone} type="masked" label="Phone" mask="(###) ###-####" />
+<Sfield field={fields.creditCard} type="masked" label="Credit Card" mask="#### #### #### ####" />
+<Sfield field={fields.ssn} type="masked" label="SSN" mask="###-##-####" />
+<!-- Custom tokens -->
+<Sfield
+	field={fields.code}
+	type="masked"
+	label="Code"
+	mask="AAAA-99-LL"
+	tokens={{ A: /[A-Z]/, L: /[a-z]/ }}
+/>
 ```
 
-| Prop                  | Type                | Default     | Description                      |
-| --------------------- | ------------------- | ----------- | -------------------------------- |
-| `mask`                | `string`            | required    | Mask pattern                     |
-| `maskPlaceholder`     | `string`            | `'_'`       | Placeholder character            |
-| `showMaskPlaceholder` | `boolean`           | `false`     | Show full mask with placeholders |
-| `unmaskValue`         | `boolean`           | `true`      | Store unmasked value             |
-| `prefix`              | `string \| Snippet` | `undefined` | Content before input             |
-| `suffix`              | `string \| Snippet` | `undefined` | Content after input              |
+| Prop                  | Type                     | Default     | Description                      |
+| --------------------- | ------------------------ | ----------- | -------------------------------- |
+| `mask`                | `string`                 | required    | Mask pattern                     |
+| `tokens`              | `Record<string, RegExp>` | `undefined` | Custom token definitions         |
+| `maskPlaceholder`     | `string`                 | `'_'`       | Placeholder character            |
+| `showMaskPlaceholder` | `boolean`                | `false`     | Show full mask with placeholders |
+| `unmaskValue`         | `boolean`                | `true`      | Store unmasked value             |
+| `prefix`              | `string \| Snippet`      | `undefined` | Content before input             |
+| `suffix`              | `string \| Snippet`      | `undefined` | Content after input              |
 
 **Mask Tokens:**
 
@@ -285,41 +373,158 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 - `A` - Alphabetic uppercase
 - `*` - Alphanumeric
 
+#### Hidden Input
+
+```svelte
+<Sfield field={fields.token} type="hidden" value={authToken} />
+<Sfield field={fields.userId} type="hidden" value="12345" />
+```
+
+| Prop    | Type     | Default | Description                                      |
+| ------- | -------- | ------- | ------------------------------------------------ |
+| `value` | `string` | `''`    | The value for the hidden field (can be reactive) |
+
+Hidden inputs are useful for including data in form submissions without displaying it to the user. The `value` prop is reactive, so you can update it programmatically:
+
+```svelte
+<script lang="ts">
+	let token = $state(initialToken);
+
+	async function refreshToken() {
+		token = await getNewToken();
+	}
+</script>
+
+<Sfield field={fields.token} type="hidden" value={token} />
+```
+
 ### `<Sbutton>`
 
-Stateful submit button that reacts to form state.
+Stateful submit button that reacts to form state. Pass the `form` prop to enable typed result access.
+
+```svelte
+<Sbutton form={myForm} label="Submit" class="my-button" />
+
+<!-- With custom state rendering -->
+<Sbutton form={myForm} class="submit-btn">
+	{#snippet children(state)}
+		{#if state.state === 'pending'}
+			Submitting...
+		{:else if state.state === 'success'}
+			✓ {state.result.message}
+		{:else if state.state === 'hasIssues'}
+			Fix Errors
+		{:else}
+			Submit Form
+		{/if}
+	{/snippet}
+</Sbutton>
+```
+
+The `state` parameter is a discriminated union of type `ButtonState<T>` where `T` is inferred from the form's result type:
+
+```typescript
+type ButtonState<T = unknown> =
+	| { state: 'default'; pending: false; success: false; hasIssues: false; result: undefined }
+	| { state: 'pending'; pending: true; success: false; hasIssues: false; result: undefined }
+	| { state: 'success'; pending: false; success: true; hasIssues: false; result: T }
+	| { state: 'hasIssues'; pending: false; success: false; hasIssues: true; result: undefined };
+```
+
+#### Typed Result Access
+
+The result type is automatically inferred from the `form` prop. When your remote function returns a typed result, you can access it directly:
 
 ```svelte
-<Sbutton label="Submit" class="my-button" />
+<script lang="ts">
+	import { login } from './auth.remote'; // Returns { success: boolean; message: string }
+</script>
 
-<!-- With custom state snippets -->
-<Sbutton class="submit-btn">
-	{#snippet defaultState(state)}
-		Submit Form
+<Sbutton form={login} class="submit-btn">
+	{#snippet children(state)}
+		{#if state.state === 'success'}
+			{state.result.message} <!-- TypeScript knows this is string -->
+		{:else if state.state === 'pending'}
+			Logging in...
+		{:else}
+			Login
+		{/if}
 	{/snippet}
-	{#snippet pendingState(state)}
-		Submitting...
+</Sbutton>
+```
+
+| Prop         | Type                              | Default     | Description                       |
+| ------------ | --------------------------------- | ----------- | --------------------------------- |
+| `form`       | `RemoteForm`                      | required    | Remote form for type inference    |
+| `label`      | `string`                          | `'Submit'`  | Button text (when no children)    |
+| `buttonType` | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type                       |
+| `class`      | `string`                          | `undefined` | CSS class                         |
+| `disabled`   | `boolean`                         | `false`     | Disable button                    |
+| `children`   | `Snippet<[ButtonState<T>]>`       | `undefined` | Custom content with typed state   |
+| `onsubmit`   | `() => void \| Promise<void>`     | `undefined` | Callback before validation/submit |
+
+### `<SIssues>`
+
+Displays form-level issues and issues not shown by any Sfield component (e.g., hidden field issues or programmatic validation via `invalid()`).
+
+```svelte
+<SIssues message="There are some issues with your form:" />
+
+<!-- With custom message snippet -->
+<SIssues>
+	{#snippet message()}
+		<strong>⚠️ Please fix the following issues:</strong>
 	{/snippet}
-	{#snippet successState(state)}
-		✓ Success!
+</SIssues>
+```
+
+| Prop        | Type                | Default               | Description                       |
+| ----------- | ------------------- | --------------------- | --------------------------------- |
+| `message`   | `string \| Snippet` | `undefined`           | General message shown when issues |
+| `class`     | `string`            | `'sform-issues'`      | CSS class for wrapper             |
+| `listClass` | `string`            | `'sform-issues-list'` | CSS class for issues list         |
+
+The component filters issues to only show:
+
+- Form-level issues (from `invalid("message")`)
+- Field issues for hidden inputs (no Sfield displays them)
+- Issues for fields without a corresponding Sfield
+
+### `<SResult>`
+
+Displays form result with typed access. Only renders when the form has a result. Pass the `form` prop to enable typed result access in the children snippet.
+
+```svelte
+<SResult form={myLogin} class="sform-result sform-result-success">
+	{#snippet children(result)}
+		{result.message}
 	{/snippet}
-	{#snippet errorState(state)}
-		Fix Errors
+</SResult>
+```
+
+The `result` parameter is typed based on your remote function's return type:
+
+```svelte
+<script lang="ts">
+	import { login } from './auth.remote'; // Returns { success: boolean; message: string }
+</script>
+
+<SResult form={login} class="success-message">
+	{#snippet children(result)}
+		<!-- TypeScript knows result is { success: boolean; message: string } -->
+		<h2>Welcome!</h2>
+		<p>{result.message}</p>
 	{/snippet}
-</Sbutton>
+</SResult>
 ```
 
-| Prop           | Type                              | Default     | Description                       |
-| -------------- | --------------------------------- | ----------- | --------------------------------- |
-| `label`        | `string`                          | `'Submit'`  | Button text                       |
-| `buttonType`   | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type                       |
-| `class`        | `string`                          | `undefined` | CSS class                         |
-| `disabled`     | `boolean`                         | `false`     | Disable button                    |
-| `onsubmit`     | `() => void \| Promise<void>`     | `undefined` | Callback before validation/submit |
-| `defaultState` | `Snippet`                         | `undefined` | Default state snippet             |
-| `pendingState` | `Snippet`                         | `undefined` | Pending state snippet             |
-| `successState` | `Snippet`                         | `undefined` | Success state snippet             |
-| `errorState`   | `Snippet`                         | `undefined` | Error state snippet               |
+| Prop       | Type           | Default     | Description                    |
+| ---------- | -------------- | ----------- | ------------------------------ |
+| `form`     | `RemoteForm`   | required    | Remote form for type inference |
+| `children` | `Snippet<[T]>` | required    | Content with typed result      |
+| `class`    | `string`       | `undefined` | CSS class for wrapper          |
+
+The component only renders when `form.result !== undefined`, so the `result` parameter in the children snippet is guaranteed to be defined.
 
 ## Styling
 
@@ -337,11 +542,11 @@ Sfield adds these classes automatically:
 
 ```svelte
 <!-- String class applies to wrapper -->
-<Sfield name="email" type="email" class="my-field" />
+<Sfield field={fields.email} type="email" class="my-field" />
 
 <!-- Object for granular control -->
 <Sfield
-	name="email"
+	field={fields.email}
 	type="email"
 	class={{
 		wrapper: 'field-wrapper',
@@ -379,16 +584,16 @@ Sform uses TypeScript discriminated unions to provide type-safe props for each i
 
 ```typescript
 // ✅ TypeScript knows 'showToggle' is only valid for password type
-<Sfield name="_password" type="password" showToggle={false} />
+<Sfield field={fields._password} type="password" showToggle={false} />
 
 // ✅ TypeScript knows 'options' is required for select type
-<Sfield name="country" type="select" options={countries} />
+<Sfield field={fields.country} type="select" options={countries} />
 
 // ✅ TypeScript knows 'min', 'max', 'step' are valid for number type
-<Sfield name="age" type="number" min={0} max={150} />
+<Sfield field={fields.age} type="number" min={0} max={150} />
 
 // ❌ TypeScript error: 'showToggle' doesn't exist on text type
-<Sfield name="username" type="text" showToggle />
+<Sfield field={fields.username} type="text" showToggle />
 ```
 
 ## Development

package/dist/Sform/SIssues.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getSformContext } from './context.svelte.js';
+
+	interface Props {
+		/** General message shown when there are any issues (string or snippet) */
+		message?: string | Snippet;
+		/** Display message only if  */
+		showMessageIf?: 'noUnhandledIssue' | 'hasUnhandledIssue' | 'hasAnyIssue';
+		/** CSS class for the wrapper */
+		class?: string;
+		/** CSS class for the issues list */
+		listClass?: string;
+	}
+
+	let { message, class: className, listClass, showMessageIf = 'hasAnyIssue' }: Props = $props();
+
+	const context = getSformContext();
+
+	// Get unhandled issues from context (issues not displayed by any Sfield)
+	const unhandledIssues = $derived(context.getUnhandledIssues());
+	const formState = $derived(context.getFormState());
+
+	// Show issues only after form submission and when there are issues
+	const shouldShow = $derived(context.submitted && formState.hasIssues);
+	const hasUnhandledIssues = $derived(unhandledIssues.length > 0);
+</script>
+
+{#if shouldShow}
+	<div class={className ?? 'sform-issues'}>
+		{#if message && (showMessageIf === 'hasAnyIssue' || (showMessageIf === 'noUnhandledIssue' && !hasUnhandledIssues) || (showMessageIf === 'hasUnhandledIssue' && hasUnhandledIssues))}
+			<div class="sform-issues-message">
+				{#if typeof message === 'string'}
+					{message}
+				{:else}
+					{@render message()}
+				{/if}
+			</div>
+		{/if}
+
+		{#if hasUnhandledIssues}
+			<ul class={listClass ?? 'sform-issues-list'}>
+				{#each unhandledIssues as issue, i (i)}
+					<li>{issue.message}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** General message shown when there are any issues (string or snippet) */
+    message?: string | Snippet;
+    /** Display message only if  */
+    showMessageIf?: 'noUnhandledIssue' | 'hasUnhandledIssue' | 'hasAnyIssue';
+    /** CSS class for the wrapper */
+    class?: string;
+    /** CSS class for the issues list */
+    listClass?: string;
+}
+declare const SIssues: import("svelte").Component<Props, {}, "">;
+type SIssues = ReturnType<typeof SIssues>;
+export default SIssues;

package/dist/Sform/SResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" generics="T = unknown">
+	import type { Snippet } from 'svelte';
+	import type { RemoteFormIssue } from './types.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;
+		fields: {
+			allIssues?: () => RemoteFormIssue[] | undefined;
+			[key: string]: unknown;
+		};
+	}
+
+	interface Props {
+		/** The remote form - used to infer the result type T */
+		form: FormLike<T>;
+		/** Children snippet receives the result (guaranteed to be defined) */
+		children: Snippet<[T]>;
+		/** CSS class for the wrapper */
+		class?: string;
+	}
+
+	let { form, children, class: className }: Props = $props();
+
+	// Only show when there's a result
+	const hasResult = $derived(form.result !== undefined);
+</script>
+
+{#if hasResult}
+	<div class={className}>
+		{@render children(form.result as T)}
+	</div>
+{/if}

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { RemoteFormIssue } from './types.js';
+declare function $$render<T = unknown>(): {
+    props: {
+        /** The remote form - used to infer the result type T */
+        form: {
+            result?: T | undefined;
+            fields: {
+                allIssues?: () => RemoteFormIssue[] | undefined;
+                [key: string]: unknown;
+            };
+        };
+        /** Children snippet receives the result (guaranteed to be defined) */
+        children: Snippet<[T]>;
+        /** CSS class for the wrapper */
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SResult: $$IsomorphicComponent;
+type SResult<T = unknown> = InstanceType<typeof SResult<T>>;
+export default SResult;

package/dist/Sform/Sfield.svelte

@@ -18,6 +18,7 @@
 	import ToggleOptionsInput from './inputs/ToggleOptionsInput.svelte';
 	import MaskedInput from './inputs/MaskedInput.svelte';
 	import PasswordInput from './inputs/PasswordInput.svelte';
+	import HiddenInput from './inputs/HiddenInput.svelte';
 
 	/**
 	 * Sfield - Type-safe form field component.
@@ -41,6 +42,10 @@
 	// 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') {
+			context.registerFieldWithIssueDisplay(name);
+		}
 	});
 
 	const classes: SfieldClasses = $derived(
@@ -112,7 +117,6 @@
 			'month',
 			'week',
 			'color',
-			'hidden',
 			'file'
 		].includes(props.type)
 	);
@@ -147,6 +151,8 @@
 		<ToggleOptionsInput {...passthroughProps()} {...internalProps} />
 	{:else if props.type === 'masked'}
 		<MaskedInput {...passthroughProps()} {...internalProps} />
+	{:else if props.type === 'hidden'}
+		<HiddenInput {...passthroughProps()} {...internalProps} />
 	{/if}
 
 	{#if props.hint}

package/dist/Sform/Sform.svelte

@@ -60,7 +60,8 @@
 		() => {
 			// Use setTimeout to ensure we're outside the current event loop
 			setTimeout(() => formElement?.requestSubmit(), 0);
-		}
+		},
+		() => form
 	);
 
 	// Apply preflight schema if provided

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

@@ -1,3 +1,12 @@
-import type { SformContext, ValidateOn } from './types.js';
-export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void): SformContext;
+import type { RemoteFormIssue, SformContext, ValidateOn } from './types.js';
+interface FormLike {
+    pending?: number;
+    result?: unknown;
+    fields: {
+        allIssues?: () => RemoteFormIssue[] | undefined;
+        [key: string]: unknown;
+    };
+}
+export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void, getForm: () => FormLike): SformContext;
 export declare function getSformContext(): SformContext;
+export {};

package/dist/Sform/context.svelte.js

@@ -1,10 +1,11 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 const SFORM_CONTEXT_KEY = Symbol('sform-context');
-export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm) {
+export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm, getForm) {
     const touched = new SvelteSet();
     const dirty = new SvelteSet();
     const registeredFields = new SvelteSet();
+    const fieldsWithIssueDisplay = new SvelteSet();
     let submitted = $state(false);
     const context = {
         get validateOn() {
@@ -51,12 +52,71 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
         registerField: (name) => {
             registeredFields.add(name);
         },
+        registerFieldWithIssueDisplay: (name) => {
+            fieldsWithIssueDisplay.add(name);
+        },
         resetFieldStates: () => {
             touched.clear();
             dirty.clear();
             submitted = false;
         },
-        submitForm
+        submitForm,
+        getFormState: () => {
+            const form = getForm();
+            const pending = (form.pending ?? 0) !== 0;
+            const hasResult = form.result !== undefined;
+            const issues = form.fields.allIssues?.() ?? [];
+            const hasIssues = issues.length > 0;
+            if (pending) {
+                return {
+                    state: 'pending',
+                    pending: true,
+                    success: false,
+                    hasIssues: false,
+                    result: undefined
+                };
+            }
+            if (hasResult) {
+                // If there's a result, it's success (issues come via invalid() which throws, no result)
+                return {
+                    state: 'success',
+                    pending: false,
+                    success: true,
+                    hasIssues: false,
+                    result: form.result
+                };
+            }
+            if (hasIssues) {
+                return {
+                    state: 'hasIssues',
+                    pending: false,
+                    success: false,
+                    hasIssues: true,
+                    result: undefined
+                };
+            }
+            return {
+                state: 'default',
+                pending: false,
+                success: false,
+                hasIssues: false,
+                result: undefined
+            };
+        },
+        getUnhandledIssues: () => {
+            const form = getForm();
+            const allIssues = form.fields.allIssues?.() ?? [];
+            // Filter out issues that are linked to fields with issue display
+            return allIssues.filter((issue) => {
+                // If issue has no path, it's a form-level issue (from invalid("message"))
+                if (!issue.path || issue.path.length === 0) {
+                    return true;
+                }
+                // Check if the first path segment is a field that displays issues
+                const fieldName = String(issue.path[0]);
+                return !fieldsWithIssueDisplay.has(fieldName);
+            });
+        }
     };
     setContext(SFORM_CONTEXT_KEY, context);
     return context;

package/dist/Sform/index.d.ts

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

package/dist/Sform/index.js

@@ -3,5 +3,7 @@ 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';
+export { default as SIssues } from './SIssues.svelte';
+export { default as SResult } from './SResult.svelte';
 // Utilities
 export { applyMask, unmask, MASK_PATTERNS, DEFAULT_TOKENS } from './utils/mask.js';

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,20 +1,25 @@
-<script lang="ts">
+<script lang="ts" generics="T = unknown">
 	import type { Snippet } from 'svelte';
-	import type { ButtonFormState, RemoteFormIssue } from '../types.js';
+	import type { ButtonState, RemoteFormIssue } from '../types.js';
 	import { getSformContext } from '../context.svelte.js';
 
-	interface FormLike {
+	/**
+	 * 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;
-		result?: unknown;
 		fields: {
 			allIssues?: () => RemoteFormIssue[] | undefined;
+			[key: string]: unknown;
 		};
 	}
 
 	interface Props {
-		/** The remote form - required for button state */
-		form: FormLike;
-		/** Button text (used if no snippets provided) */
+		/** 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';
@@ -22,55 +27,37 @@
 		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>;
-		/** 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,
-		onsubmit,
-		defaultState,
-		pendingState,
-		successState,
-		errorState
+		children,
+		onsubmit
 	}: Props = $props();
 
-	// Get Sform context to trigger validation display
+	// Get Sform context for form state and actions
 	const sformContext = getSformContext();
 
-	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
-		};
-	});
+	// Get form state from context with the generic type
+	const formState = $derived.by(sformContext.getFormState<T>);
 
 	const isDisabled = $derived(disabled || formState.pending);
 
 	async function handleClick(event: MouseEvent) {
-		if (buttonType !== 'submit' || !onsubmit) return;
+		if (buttonType !== 'submit') return;
 
 		event.preventDefault();
-		await onsubmit();
+
+		if (onsubmit) {
+			await onsubmit();
+		}
 
 		// Mark form as submitted and all fields dirty so issues display when server responds
 		sformContext.markSubmitted();
@@ -82,14 +69,8 @@
 </script>
 
 <button type={buttonType} class={className} disabled={isDisabled} onclick={handleClick}>
-	{#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)}
+	{#if children}
+		{@render children(formState)}
 	{:else}
 		{label}
 	{/if}

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

@@ -1,34 +1,48 @@
 import type { Snippet } from 'svelte';
-import type { ButtonFormState, RemoteFormIssue } from '../types.js';
-interface FormLike {
-    pending?: number;
-    result?: unknown;
-    fields: {
-        allIssues?: () => RemoteFormIssue[] | undefined;
+import type { ButtonState, RemoteFormIssue } 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>;
     };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-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;
-    /** Callback that runs before validation/submission (can be async) */
-    onsubmit?: () => void | Promise<void>;
-    /** 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]>;
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const ButtonInput: import("svelte").Component<Props, {}, "">;
-type ButtonInput = ReturnType<typeof ButtonInput>;
+declare const ButtonInput: $$IsomorphicComponent;
+type ButtonInput<T = unknown> = InstanceType<typeof ButtonInput<T>>;
 export default ButtonInput;

package/dist/Sform/inputs/HiddenInput.svelte

@@ -0,0 +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} />

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

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

package/dist/Sform/inputs/TextInput.svelte

@@ -28,34 +28,30 @@
 	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 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>

package/dist/Sform/sform.css

@@ -600,6 +600,7 @@ select.sform-input {
 .sform-result-success {
 	color: #065f46;
 	background: var(--sform-success-bg);
+	margin-block-start: 1rem;
 }
 
 .sform-result-error {
@@ -612,6 +613,19 @@ select.sform-input {
 	background: var(--sform-warning-bg);
 }
 
+/* ===========================================
+   Issues List
+   =========================================== */
+
+.sform-issues-message {
+	font-weight: bold;
+	margin-bottom: 0.25rem;
+}
+.sform-issues-list {
+	margin: 0;
+	padding-inline-start: 1.25rem;
+}
+
 /* ===========================================
    Utilities
    =========================================== */

package/dist/Sform/types.d.ts

@@ -82,7 +82,7 @@ export type AllowedSfieldType<T> = {
  */
 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';
 /** Text-like input types */
-export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'file' | 'hidden';
+export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'file';
 /** Numeric input types */
 export type NumericInputType = 'number';
 /**
@@ -105,6 +105,37 @@ export type RemoteForm<Input extends RemoteFormInput | void = RemoteFormInput, O
  * The .for(id) method returns Omit<RemoteForm, 'for'>, so this type accepts both.
  */
 export type RemoteFormInstance<Input extends RemoteFormInput | void = RemoteFormInput, Output = unknown> = SvelteKitRemoteForm<Input, Output> | Omit<SvelteKitRemoteForm<Input, Output>, 'for'>;
+/**
+ * Form state for buttons and state-aware components.
+ * State is derived from context - no result means default or pending,
+ * result with no issues means success, issues (via invalid()) means hasIssues.
+ * @template T - The type of the form result (defaults to unknown)
+ */
+export type ButtonState<T = unknown> = {
+    state: 'default';
+    pending: false;
+    success: false;
+    hasIssues: false;
+    result: undefined;
+} | {
+    state: 'pending';
+    pending: true;
+    success: false;
+    hasIssues: false;
+    result: undefined;
+} | {
+    state: 'success';
+    pending: false;
+    success: true;
+    hasIssues: false;
+    result: T;
+} | {
+    state: 'hasIssues';
+    pending: false;
+    success: false;
+    hasIssues: true;
+    result: undefined;
+};
 /**
  * Form context provided by Sform to children.
  * Manages field state (touched, dirty, submitted) for validation display.
@@ -132,8 +163,14 @@ export interface SformContext {
     resetFieldStates: () => void;
     /** Register a field name (called by Sfield on mount) */
     registerField: (name: string) => void;
+    /** Register a field that displays its own issues (all except hidden) */
+    registerFieldWithIssueDisplay: (name: string) => void;
     /** Programmatically submit the form */
     submitForm: () => 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 */
+    getUnhandledIssues: () => RemoteFormIssue[];
 }
 /**
  * Enhance callback options - typed based on form Input type.
@@ -365,8 +402,10 @@ export type SfieldToggleProps = SfieldPropsFrom<ToggleInputProps, boolean, 'togg
 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;
+type AllSfieldProps = SfieldTextProps | SfieldPasswordProps | SfieldNumberProps | SfieldTextareaProps | SfieldSelectProps | SfieldCheckboxProps | SfieldCheckboxGroupProps | SfieldRadioProps | SfieldRangeProps | SfieldToggleProps | SfieldToggleOptionsProps | SfieldMaskedProps | SfieldHiddenProps;
 /**
  * Extract props that match a specific field value type.
  * This ensures type="number" is only valid for number fields, etc.
@@ -515,7 +554,18 @@ export interface RadioInputProps extends BaseInputComponentProps {
     options: SelectOption[] | string[];
 }
 /**
- * Form state for button snippets
+ * Props for hidden input component
+ */
+export interface HiddenInputProps {
+    /** Remote field from form */
+    field: RemoteFormField<RemoteFormFieldValue>;
+    /** Field name */
+    name: string;
+    /** The value for the hidden field - required for hidden inputs */
+    value?: string;
+}
+/**
+ * @deprecated Use ButtonState instead
  */
 export interface ButtonFormState {
     /** Whether form is submitting */
@@ -527,11 +577,26 @@ export interface ButtonFormState {
     /** The form result if available */
     result: unknown;
 }
+/**
+ * Minimal form shape for Sbutton type inference.
+ * Allows the button to infer the result type T from the form.
+ */
+export interface ButtonFormLike<T = unknown> {
+    result?: T;
+    pending?: number;
+    fields: {
+        allIssues?: () => RemoteFormIssue[] | undefined;
+        [key: string]: unknown;
+    };
+}
 /**
  * Props for button input component
+ * @template T - The type of the form result (inferred from form prop)
  */
-export interface ButtonInputProps {
-    /** Button text (used if no snippets provided) */
+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;
     /** Button type */
     buttonType?: 'submit' | 'reset' | 'button';
@@ -539,16 +604,21 @@ export interface ButtonInputProps {
     class?: string;
     /** Whether button is disabled */
     disabled?: boolean;
-    /** Snippet for default state */
-    defaultState?: Snippet;
-    /** Snippet for pending state */
-    pendingState?: Snippet;
-    /** Snippet for success state */
-    successState?: Snippet;
-    /** Snippet for error/issues state */
-    errorState?: Snippet;
-    /** Access to form state for custom rendering */
-    formState?: ButtonFormState;
+    /** 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 for SIssues component
+ */
+export interface SIssuesProps {
+    /** General message shown when there are any issues */
+    message?: string | Snippet;
+    /** CSS class for the wrapper */
+    class?: string;
+    /** CSS class for the issues list */
+    listClass?: string;
 }
 /**
  * Props for range input component

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { Sform, Sfield, Sbutton } from './Sform/index.js';
+export { Sform, Sfield, Sbutton, SIssues, SResult } from './Sform/index.js';
 export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonFormState, 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';

package/dist/index.js

@@ -1 +1 @@
-export { Sform, Sfield, Sbutton } from './Sform/index.js';
+export { Sform, Sfield, Sbutton, SIssues, SResult } from './Sform/index.js';

package/package.json

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