@samuel-charpentier/sform 0.0.2 → 0.0.4

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
@@ -612,3 +682,13 @@ export interface MaskedInputProps extends BaseInputComponentProps, InputAffixPro
     /** Whether to store the unmasked (raw) value. If true, stores '1234567890'. If false, stores '(123) 456-7890'. Default: true */
     unmaskValue?: boolean;
 }
+/**
+ * Props for Fieldset utils component
+ */
+export type FieldsetProps = {
+    label?: string;
+    labelClass?: string;
+    className?: string;
+    disabled?: boolean;
+    children: Snippet;
+};

package/dist/Sform/utils/Fieldset.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FieldsetProps } from '../types';
+
+	let { label, labelClass, className, disabled, children }: FieldsetProps = $props();
+</script>
+
+<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
+	{#if label}
+		<legend class={labelClass}>{label}</legend>
+	{/if}
+	{@render children()}
+</fieldset>
+
+<style>
+	.sform-checkbox-group legend {
+		padding: 0.25rem 0.5rem;
+		margin: 0;
+		border: var(--sform-border-width) solid var(--sform-border);
+		background: var(--sform-bg);
+		border-radius: 0.25rem;
+		line-height: 1;
+	}
+</style>

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

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

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.4",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",