@schandlergarcia/sf-web-components 1.6.0 → 1.8.0

package/src/components/library/filters/{ToggleFilter.jsx → ToggleFilter.tsx}

@@ -1,18 +1,19 @@
-import React from "react";
+export interface ToggleFilterProps {
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  label?: string;
+  className?: string;
+}
 
 /**
  * Toggle switch filter.
- *
- * @param {boolean} value — current on/off state
- * @param {Function} onChange — (boolean) => void
- * @param {string} label — visible label
  */
 export default function ToggleFilter({
   value = false,
   onChange,
   label,
   className = "",
-}) {
+}: ToggleFilterProps) {
   return (
     <label
       className={[

package/src/components/library/forms/{FormField.jsx → FormField.tsx}

@@ -1,5 +1,6 @@
-import React from "react";
+import * as React from "react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import type { FormField as FormFieldType } from "./FormRenderer";
 
 const INPUT_BASE =
   "h-10 w-full rounded-lg border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950";
@@ -7,11 +8,17 @@ const INPUT_BASE =
 const INPUT_ERROR =
   "border-red-300 focus:ring-red-500 dark:border-red-700 dark:focus:ring-red-500";
 
-function cx(...classes) {
+function cx(...classes: (string | boolean | undefined)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-function FieldLabel({ label, required, htmlFor }) {
+interface FieldLabelProps {
+  label?: string;
+  required?: boolean;
+  htmlFor: string;
+}
+
+function FieldLabel({ label, required, htmlFor }: FieldLabelProps) {
   if (!label) return null;
   return (
     <label htmlFor={htmlFor} className="block text-sm font-medium text-slate-700 dark:text-slate-200">
@@ -21,20 +28,36 @@ function FieldLabel({ label, required, htmlFor }) {
   );
 }
 
-function FieldError({ error }) {
+interface FieldErrorProps {
+  error?: string;
+}
+
+function FieldError({ error }: FieldErrorProps) {
   if (!error) return null;
   return <p className="text-xs text-red-600 dark:text-red-400">{error}</p>;
 }
 
-function FieldDescription({ description }) {
+interface FieldDescriptionProps {
+  description?: string;
+}
+
+function FieldDescription({ description }: FieldDescriptionProps) {
   if (!description) return null;
   return <p className="text-xs text-slate-500 dark:text-slate-400">{description}</p>;
 }
 
 // ─── Individual field renderers ───
 
-function TextField({ field, value, onChange, onBlur, error }) {
-  const inputType = field.inputType ?? field.type;
+interface FieldRendererProps {
+  field: FormFieldType & Record<string, unknown>;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+  error?: boolean;
+}
+
+function TextField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
+  const inputType = (field.inputType as string | undefined) ?? field.type;
   const type = { text: "text", email: "email", url: "url", number: "number", date: "date" }[inputType] ?? "text";
 
   return (
@@ -42,32 +65,32 @@ function TextField({ field, value, onChange, onBlur, error }) {
       id={field.id}
       name={field.id}
       type={type}
-      value={value ?? ""}
+      value={(value as string | number) ?? ""}
       onChange={(e) => onChange(field.type === "number" ? e.target.value : e.target.value)}
       onBlur={onBlur}
-      placeholder={field.placeholder}
-      disabled={field.disabled}
-      readOnly={field.readOnly}
-      min={field.min}
-      max={field.max}
-      step={field.step}
+      placeholder={field.placeholder as string | undefined}
+      disabled={field.disabled as boolean | undefined}
+      readOnly={field.readOnly as boolean | undefined}
+      min={field.min as number | undefined}
+      max={field.max as number | undefined}
+      step={field.step as number | undefined}
       className={cx(INPUT_BASE, error && INPUT_ERROR)}
     />
   );
 }
 
-function TextareaField({ field, value, onChange, onBlur, error }) {
+function TextareaField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
   return (
     <textarea
       id={field.id}
       name={field.id}
-      value={value ?? ""}
+      value={(value as string) ?? ""}
       onChange={(e) => onChange(e.target.value)}
       onBlur={onBlur}
-      placeholder={field.placeholder}
-      disabled={field.disabled}
-      readOnly={field.readOnly}
-      rows={field.rows ?? 3}
+      placeholder={field.placeholder as string | undefined}
+      disabled={field.disabled as boolean | undefined}
+      readOnly={field.readOnly as boolean | undefined}
+      rows={(field.rows as number | undefined) ?? 3}
       className={cx(
         "w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 dark:placeholder:text-slate-500 dark:focus:ring-offset-slate-950",
         error && INPUT_ERROR
@@ -76,8 +99,13 @@ function TextareaField({ field, value, onChange, onBlur, error }) {
   );
 }
 
-function SelectField({ field, value, onChange, onBlur, error }) {
-  const options = (field.options ?? []).map((opt) =>
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+function SelectField({ field, value, onChange, onBlur, error }: FieldRendererProps) {
+  const options = ((field.options as (string | SelectOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
 
@@ -86,17 +114,17 @@ function SelectField({ field, value, onChange, onBlur, error }) {
       <select
         id={field.id}
         name={field.id}
-        value={value ?? ""}
+        value={(value as string) ?? ""}
         onChange={(e) => onChange(e.target.value)}
         onBlur={onBlur}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className={cx(
           "h-10 w-full appearance-none rounded-lg border border-slate-200 bg-white py-0 pl-3 pr-9 text-sm font-medium text-slate-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:focus:ring-offset-slate-950",
           error && INPUT_ERROR
         )}
       >
         {field.placeholder ? (
-          <option value="">{field.placeholder}</option>
+          <option value="">{field.placeholder as string}</option>
         ) : null}
         {options.map((opt) => (
           <option key={opt.value} value={opt.value}>
@@ -112,11 +140,16 @@ function SelectField({ field, value, onChange, onBlur, error }) {
   );
 }
 
-function RadioField({ field, value, onChange }) {
-  const options = (field.options ?? []).map((opt) =>
+interface RadioOption extends SelectOption {
+  description?: string;
+  disabled?: boolean;
+}
+
+function RadioField({ field, value, onChange }: FieldRendererProps) {
+  const options = ((field.options as (string | RadioOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
-  const layout = field.layout ?? (options.length <= 4 ? "horizontal" : "vertical");
+  const layout = (field.layout as string | undefined) ?? (options.length <= 4 ? "horizontal" : "vertical");
 
   return (
     <div
@@ -138,7 +171,7 @@ function RadioField({ field, value, onChange }) {
             value={opt.value}
             checked={value === opt.value}
             onChange={() => onChange(opt.value)}
-            disabled={field.disabled || opt.disabled}
+            disabled={(field.disabled as boolean | undefined) || opt.disabled}
             className="h-4 w-4 border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
           />
           {opt.label}
@@ -151,7 +184,7 @@ function RadioField({ field, value, onChange }) {
   );
 }
 
-function CheckboxField({ field, value, onChange }) {
+function CheckboxField({ field, value, onChange }: FieldRendererProps) {
   return (
     <label className="inline-flex cursor-pointer items-center gap-2.5 text-sm text-slate-700 dark:text-slate-200">
       <input
@@ -160,22 +193,26 @@ function CheckboxField({ field, value, onChange }) {
         name={field.id}
         checked={Boolean(value)}
         onChange={(e) => onChange(e.target.checked)}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
       />
-      {field.checkboxLabel ?? field.label}
+      {(field.checkboxLabel as string | undefined) ?? field.label}
     </label>
   );
 }
 
-function CheckboxGroupField({ field, value, onChange }) {
+interface CheckboxOption extends SelectOption {
+  disabled?: boolean;
+}
+
+function CheckboxGroupField({ field, value, onChange }: FieldRendererProps) {
   const selected = Array.isArray(value) ? value : [];
-  const options = (field.options ?? []).map((opt) =>
+  const options = ((field.options as (string | CheckboxOption)[] | undefined) ?? []).map((opt) =>
     typeof opt === "string" ? { value: opt, label: opt } : opt
   );
-  const layout = field.layout ?? (options.length <= 4 ? "horizontal" : "vertical");
+  const layout = (field.layout as string | undefined) ?? (options.length <= 4 ? "horizontal" : "vertical");
 
-  function toggleValue(optValue) {
+  function toggleValue(optValue: string) {
     const next = selected.includes(optValue)
       ? selected.filter((v) => v !== optValue)
       : [...selected, optValue];
@@ -198,7 +235,7 @@ function CheckboxGroupField({ field, value, onChange }) {
             type="checkbox"
             checked={selected.includes(opt.value)}
             onChange={() => toggleValue(opt.value)}
-            disabled={field.disabled || opt.disabled}
+            disabled={(field.disabled as boolean | undefined) || opt.disabled}
             className="h-4 w-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800"
           />
           {opt.label}
@@ -208,7 +245,7 @@ function CheckboxGroupField({ field, value, onChange }) {
   );
 }
 
-function ToggleField({ field, value, onChange }) {
+function ToggleField({ field, value, onChange }: FieldRendererProps) {
   const checked = Boolean(value);
 
   return (
@@ -218,7 +255,7 @@ function ToggleField({ field, value, onChange }) {
         role="switch"
         aria-checked={checked}
         onClick={() => onChange(!checked)}
-        disabled={field.disabled}
+        disabled={field.disabled as boolean | undefined}
         className={cx(
           "relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950",
           checked ? "bg-brand-500" : "bg-slate-200 dark:bg-slate-700",
@@ -234,7 +271,7 @@ function ToggleField({ field, value, onChange }) {
         />
       </button>
       {field.toggleLabel ? (
-        <span className="text-sm text-slate-700 dark:text-slate-200">{field.toggleLabel}</span>
+        <span className="text-sm text-slate-700 dark:text-slate-200">{field.toggleLabel as string}</span>
       ) : null}
     </div>
   );
@@ -242,7 +279,7 @@ function ToggleField({ field, value, onChange }) {
 
 // ─── Main FormField ───
 
-const FIELD_RENDERERS = {
+const FIELD_RENDERERS: Record<string, React.ComponentType<FieldRendererProps>> = {
   text: TextField,
   email: TextField,
   url: TextField,
@@ -256,11 +293,20 @@ const FIELD_RENDERERS = {
   toggle: ToggleField,
 };
 
+export interface FormFieldProps {
+  field: FormFieldType & Record<string, unknown>;
+  value: unknown;
+  error?: string;
+  touched?: boolean;
+  onChange: (value: unknown) => void;
+  onBlur: () => void;
+}
+
 /**
  * Renders a single form field with label, description, error message,
  * and the appropriate input type.
  */
-export default function FormField({ field, value, error, touched, onChange, onBlur }) {
+export default function FormField({ field, value, error, touched, onChange, onBlur }: FormFieldProps) {
   const Renderer = FIELD_RENDERERS[field.type];
   if (!Renderer) return null;
 
@@ -273,17 +319,17 @@ export default function FormField({ field, value, error, touched, onChange, onBl
         <FieldLabel label={field.label} required={field.required} htmlFor={field.id} />
       ) : null}
       {field.description && field.type !== "toggle" ? (
-        <FieldDescription description={field.description} />
+        <FieldDescription description={field.description as string} />
       ) : null}
       <Renderer
         field={field}
         value={value}
         onChange={onChange}
         onBlur={onBlur}
-        error={showError}
+        error={Boolean(showError)}
       />
       {field.type === "toggle" && field.description ? (
-        <FieldDescription description={field.description} />
+        <FieldDescription description={field.description as string} />
       ) : null}
       {showError ? <FieldError error={error} /> : null}
     </div>

package/src/components/library/forms/{FormModal.jsx → FormModal.tsx}

@@ -1,10 +1,11 @@
-import React, { useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import Spinner from "../ui/Spinner";
 import FormRenderer from "./FormRenderer";
 import useFormState from "./useFormState";
+import type { FormSection } from "./FormRenderer";
 
 const OVERLAY_VARIANTS = {
   hidden: { opacity: 0 },
@@ -13,35 +14,35 @@ const OVERLAY_VARIANTS = {
 
 const PANEL_VARIANTS = {
   hidden: { opacity: 0, y: 24, scale: 0.97 },
-  visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", damping: 25, stiffness: 350 } },
+  visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring" as const, damping: 25, stiffness: 350 } },
   exit: { opacity: 0, y: 16, scale: 0.97, transition: { duration: 0.15 } },
 };
 
-/**
- * Size → max-width mapping.
- */
 const SIZE_CLASSES = {
   sm: "max-w-md",
   md: "max-w-xl",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
-};
+} as const;
+
+export interface FormModalProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  title: string;
+  subtitle?: string;
+  sections?: FormSection[];
+  initialValues?: Record<string, unknown>;
+  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+  submitLabel?: string;
+  cancelLabel?: string;
+  size?: keyof typeof SIZE_CLASSES;
+  destructive?: boolean;
+  minSubmitMs?: number;
+}
 
 /**
  * Modal dialog for creating or editing records.
  * Wraps FormRenderer + useFormState in an animated overlay.
- *
- * @param {boolean}  isOpen — whether the modal is visible
- * @param {Function} onClose — close handler
- * @param {string}   title — modal title (e.g. "Edit Service", "New Incident")
- * @param {string}   subtitle — optional subtitle
- * @param {Array}    sections — form schema sections
- * @param {Object}   initialValues — prefill for editing (empty = create mode)
- * @param {Function} onSubmit — async (values) => void, called on valid submit
- * @param {string}   submitLabel — submit button text (default: "Save")
- * @param {string}   cancelLabel — cancel button text (default: "Cancel")
- * @param {string}   size — "sm" | "md" | "lg" | "xl" (default: "lg")
- * @param {boolean}  destructive — if true, submit button is red (for delete confirmations)
  */
 export default function FormModal({
   isOpen = false,
@@ -56,7 +57,7 @@ export default function FormModal({
   size = "lg",
   destructive = false,
   minSubmitMs,
-}) {
+}: FormModalProps) {
   const form = useFormState({
     initialValues,
     sections,
@@ -73,7 +74,7 @@ export default function FormModal({
   }, [isOpen]);
 
   const onKeyDown = useCallback(
-    (e) => {
+    (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose?.();
     },
     [onClose]

package/src/components/library/forms/{FormRenderer.jsx → FormRenderer.tsx}

@@ -1,17 +1,39 @@
-import React from "react";
 import FormSection from "./FormSection";
 
+export interface FormSection {
+  id?: string;
+  title?: string;
+  description?: string;
+  fields: FormField[];
+}
+
+export interface FormField {
+  id: string;
+  type: string;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  required?: boolean;
+  requiredMessage?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  validate?: (value: unknown, values: Record<string, unknown>) => string | undefined;
+  [key: string]: unknown;
+}
+
+export interface FormRendererProps {
+  sections?: FormSection[];
+  values?: Record<string, unknown>;
+  errors?: Record<string, string>;
+  touched?: Record<string, boolean>;
+  onFieldChange: (fieldId: string, value: unknown) => void;
+  onFieldBlur: (fieldId: string) => void;
+  formError?: string;
+}
+
 /**
  * Renders a complete form from a schema definition.
  * Pairs with useFormState for state management.
- *
- * @param {Array}    sections — form schema sections
- * @param {Object}   values   — current form values
- * @param {Object}   errors   — current validation errors
- * @param {Object}   touched  — which fields have been touched
- * @param {Function} onFieldChange — (fieldId, value) => void
- * @param {Function} onFieldBlur — (fieldId) => void
- * @param {string}   formError — top-level form error (e.g. submission failure)
  */
 export default function FormRenderer({
   sections = [],
@@ -21,7 +43,7 @@ export default function FormRenderer({
   onFieldChange,
   onFieldBlur,
   formError,
-}) {
+}: FormRendererProps) {
   return (
     <div className="space-y-8">
       {formError ? (

package/src/components/library/forms/{FormSection.jsx → FormSection.tsx}

@@ -1,15 +1,21 @@
-import React from "react";
 import FormField from "./FormField";
+import type { FormSection as FormSectionType, FormField as FormFieldType } from "./FormRenderer";
 
-/**
- * Fields that naturally span full width by default.
- */
 const FULL_WIDTH_TYPES = new Set([
   "textarea",
   "radio",
   "checkboxGroup",
 ]);
 
+export interface FormSectionProps {
+  section: FormSectionType;
+  values: Record<string, unknown>;
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  onFieldChange: (fieldId: string, value: unknown) => void;
+  onFieldBlur: (fieldId: string) => void;
+}
+
 /**
  * A titled section of a form with a 2-column grid layout.
  * Fields default to 1-column (half width) unless the type is naturally
@@ -22,7 +28,7 @@ export default function FormSection({
   touched,
   onFieldChange,
   onFieldBlur,
-}) {
+}: FormSectionProps) {
   const fields = section.fields ?? [];
   if (!fields.length) return null;
 
@@ -42,7 +48,7 @@ export default function FormSection({
       ) : null}
 
       <div className="grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-2">
-        {fields.map((field) => {
+        {fields.map((field: FormFieldType & { colSpan?: number }) => {
           const span =
             field.colSpan ??
             (FULL_WIDTH_TYPES.has(field.type) ? 2 : 1);
@@ -57,7 +63,7 @@ export default function FormSection({
                 value={values[field.id]}
                 error={errors[field.id]}
                 touched={touched[field.id]}
-                onChange={(val) => onFieldChange(field.id, val)}
+                onChange={(val: unknown) => onFieldChange(field.id, val)}
                 onBlur={() => onFieldBlur(field.id)}
               />
             </div>

package/src/components/library/forms/index.tsx

@@ -0,0 +1,11 @@
+export { default as FormModal } from "./FormModal";
+export { default as FormRenderer } from "./FormRenderer";
+export { default as FormSection } from "./FormSection";
+export { default as FormField } from "./FormField";
+export { default as useFormState } from "./useFormState";
+
+export type { FormModalProps } from "./FormModal";
+export type { FormRendererProps } from "./FormRenderer";
+export type { FormSection as FormSectionType, FormField as FormFieldType } from "./FormRenderer";
+export type { FormSectionProps } from "./FormSection";
+export type { FormFieldProps } from "./FormField";

package/src/components/library/forms/{useFormState.jsx → useFormState.tsx}

@@ -1,12 +1,35 @@
 import { useState, useMemo, useCallback, useRef } from "react";
+import type { FormSection } from "./FormRenderer";
 
 const DEFAULT_MIN_SUBMIT_MS = 4000;
 
+interface UseFormStateOptions {
+  initialValues?: Record<string, unknown>;
+  sections?: FormSection[];
+  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+  minSubmitMs?: number;
+}
+
+interface UseFormStateReturn {
+  values: Record<string, unknown>;
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  isDirty: boolean;
+  isValid: boolean;
+  isSubmitting: boolean;
+  setValue: (id: string, value: unknown) => void;
+  setValues: (vals: Record<string, unknown>) => void;
+  setTouched: (id: string) => void;
+  validate: () => boolean;
+  reset: () => void;
+  handleSubmit: (e?: React.FormEvent) => Promise<boolean>;
+}
+
 /**
  * Extracts all field ids and their default values from a form schema.
  */
-function buildDefaults(sections) {
-  const defaults = {};
+function buildDefaults(sections: FormSection[]): Record<string, unknown> {
+  const defaults: Record<string, unknown> = {};
   for (const section of sections) {
     for (const field of section.fields ?? []) {
       if (field.type === "checkboxGroup") {
@@ -25,8 +48,8 @@ function buildDefaults(sections) {
  * Runs validation for all fields.
  * Returns an object of { fieldId: errorMessage } (empty object = valid).
  */
-function runValidation(values, sections) {
-  const errors = {};
+function runValidation(values: Record<string, unknown>, sections: FormSection[]): Record<string, string> {
+  const errors: Record<string, string> = {};
   for (const section of sections) {
     for (const field of section.fields ?? []) {
       const val = values[field.id];
@@ -54,23 +77,19 @@ function runValidation(values, sections) {
 
 /**
  * Form state management hook.
- *
- * @param {Object} options
- * @param {Object}  options.initialValues — prefill for editing (merged over field defaults)
- * @param {Array}   options.sections — form schema sections (used for defaults + validation)
- * @param {Function} options.onSubmit — called with (values) when form is valid
- * @param {number}  options.minSubmitMs — minimum time the submit spinner shows (default 4000ms, set 0 to disable)
- *
- * @returns {Object} { values, errors, touched, isDirty, isValid, isSubmitting,
- *                     setValue, setValues, setTouched, validate, reset, handleSubmit }
  */
-export default function useFormState({ initialValues = {}, sections = [], onSubmit, minSubmitMs = DEFAULT_MIN_SUBMIT_MS } = {}) {
+export default function useFormState({
+  initialValues = {},
+  sections = [],
+  onSubmit,
+  minSubmitMs = DEFAULT_MIN_SUBMIT_MS
+}: UseFormStateOptions = {}): UseFormStateReturn {
   const defaults = useMemo(() => buildDefaults(sections), [sections]);
   const merged = useMemo(() => ({ ...defaults, ...initialValues }), [defaults, initialValues]);
 
-  const [values, setValuesState] = useState(merged);
-  const [errors, setErrors] = useState({});
-  const [touched, setTouchedState] = useState({});
+  const [values, setValuesState] = useState<Record<string, unknown>>(merged);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [touched, setTouchedState] = useState<Record<string, boolean>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const submitRef = useRef(onSubmit);
   submitRef.current = onSubmit;
@@ -86,7 +105,7 @@ export default function useFormState({ initialValues = {}, sections = [], onSubm
     });
   }, [merged, values]);
 
-  const setValue = useCallback((id, value) => {
+  const setValue = useCallback((id: string, value: unknown) => {
     setValuesState((prev) => ({ ...prev, [id]: value }));
     setErrors((prev) => {
       if (!prev[id]) return prev;
@@ -96,18 +115,18 @@ export default function useFormState({ initialValues = {}, sections = [], onSubm
     });
   }, []);
 
-  const setValues = useCallback((vals) => {
+  const setValues = useCallback((vals: Record<string, unknown>) => {
     setValuesState((prev) => ({ ...prev, ...vals }));
   }, []);
 
-  const setTouched = useCallback((id) => {
+  const setTouched = useCallback((id: string) => {
     setTouchedState((prev) => (prev[id] ? prev : { ...prev, [id]: true }));
   }, []);
 
   const validate = useCallback(() => {
     const errs = runValidation(values, sections);
     setErrors(errs);
-    const allTouched = {};
+    const allTouched: Record<string, boolean> = {};
     for (const section of sections) {
       for (const field of section.fields ?? []) {
         allTouched[field.id] = true;
@@ -124,7 +143,7 @@ export default function useFormState({ initialValues = {}, sections = [], onSubm
   }, [merged]);
 
   const handleSubmit = useCallback(
-    async (e) => {
+    async (e?: React.FormEvent) => {
       e?.preventDefault?.();
       const valid = validate();
       if (!valid) return false;
@@ -137,7 +156,8 @@ export default function useFormState({ initialValues = {}, sections = [], onSubm
         await Promise.all([submitRef.current?.(values), delay]);
         return true;
       } catch (err) {
-        setErrors((prev) => ({ ...prev, _form: err?.message ?? "Submission failed" }));
+        const errorMessage = err instanceof Error ? err.message : "Submission failed";
+        setErrors((prev) => ({ ...prev, _form: errorMessage }));
         return false;
       } finally {
         setIsSubmitting(false);