@samuel-charpentier/sform 0.0.1 → 0.0.3

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.
@@ -130,6 +161,16 @@ export interface SformContext {
     markAllFieldsDirty: () => void;
     /** Reset all field states (touched, dirty, submitted) */
     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.
@@ -361,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.
@@ -511,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 */
@@ -523,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';
@@ -535,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.1",
+	"version": "0.0.3",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",
@@ -56,6 +56,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@types/node": "^22",
 		"@vitest/browser-playwright": "^4.0.15",
+		"@vitest/coverage-v8": "4.0.16",
 		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.13.1",