@mehdashti/forms 0.4.1 → 0.6.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export { FieldErrors, FieldValues, Path, PathValue } from 'react-hook-form';
 import { z, ZodTypeAny } from 'zod';
 export { z } from 'zod';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { InputProps } from '@mehdashti/ui';
 import * as React$1 from 'react';
 
 interface SmartFormOptions<TFieldValues extends FieldValues = FieldValues> {
@@ -40,6 +41,279 @@ declare function useSmartForm<TFieldValues extends FieldValues = FieldValues>(op
 };
 type SmartFormReturn<TFieldValues extends FieldValues = FieldValues> = ReturnType<typeof useSmartForm<TFieldValues>>;
 
+interface FormInputProps<TFieldValues extends FieldValues> extends Omit<InputProps, "name"> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Helper text shown below the input
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+}
+declare function FormInput<TFieldValues extends FieldValues>({ name, label, helperText, required, ...inputProps }: FormInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormTextareaProps$1<TFieldValues extends FieldValues> extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Helper text shown below the input
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+}
+declare function FormTextarea$1<TFieldValues extends FieldValues>({ name, label, helperText, required, className, ...textareaProps }: FormTextareaProps$1<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface FormSelectProps$1<TFieldValues extends FieldValues> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Helper text shown below the select
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Select options
+     */
+    options: FormSelectOption[];
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (value: string) => void;
+}
+declare function FormSelect$1<TFieldValues extends FieldValues>({ name, label, helperText, required, disabled, placeholder, options, className, onChange, }: FormSelectProps$1<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormCheckboxProps$1<TFieldValues extends FieldValues> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Checkbox label
+     */
+    label?: string;
+    /**
+     * Description shown below the label
+     */
+    description?: string;
+    /**
+     * Helper text shown below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (checked: boolean) => void;
+}
+declare function FormCheckbox$1<TFieldValues extends FieldValues>({ name, label, description, helperText, required, disabled, className, onChange, }: FormCheckboxProps$1<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormSwitchProps<TFieldValues extends FieldValues> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Switch label
+     */
+    label?: string;
+    /**
+     * Description shown below the label
+     */
+    description?: string;
+    /**
+     * Help text shown below the switch
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Callback when value changes
+     */
+    onChange?: (checked: boolean) => void;
+}
+declare function FormSwitch<TFieldValues extends FieldValues>({ name, label, description, helperText, required, disabled, className, onChange, }: FormSwitchProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface FormRadioGroupProps<TFieldValues extends FieldValues> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Radio group label
+     */
+    label?: string;
+    /**
+     * Radio options
+     */
+    options: RadioOption[];
+    /**
+     * Layout orientation
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Help text shown below the radio group
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare function FormRadioGroup<TFieldValues extends FieldValues>({ name, label, options, orientation, helperText, required, disabled, className, }: FormRadioGroupProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+interface FormTagInputProps<TFieldValues extends FieldValues> {
+    /**
+     * Field name (registered with react-hook-form)
+     */
+    name: Path<TFieldValues>;
+    /**
+     * Field label
+     */
+    label?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Help text shown below the input
+     */
+    helperText?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number;
+    /**
+     * Separator keys (default: Enter, comma)
+     */
+    separators?: string[];
+    /**
+     * Validate individual tags before adding
+     */
+    validateTag?: (tag: string) => boolean | string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare function FormTagInput<TFieldValues extends FieldValues>({ name, label, placeholder, helperText, required, disabled, maxTags, separators, validateTag, className, }: FormTagInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
+
+/**
+ * FormErrorSummary Component
+ *
+ * Displays all form errors in a summary box with links to fields.
+ */
+interface FormErrorSummaryProps {
+    /**
+     * Title for the error summary
+     */
+    title?: string;
+    /**
+     * Custom field labels (for better error messages)
+     */
+    fieldLabels?: Record<string, string>;
+    /**
+     * Whether to show the error summary
+     * Defaults to showing when there are errors
+     */
+    show?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Callback when an error link is clicked
+     */
+    onErrorClick?: (fieldName: string) => void;
+}
+declare function FormErrorSummary({ title, fieldLabels, show, className, onErrorClick, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Form field component props
  */
@@ -261,158 +535,6 @@ interface FormMultiSelectProps<TFieldValues extends FieldValues = FieldValues> {
  */
 declare function FormMultiSelect<TFieldValues extends FieldValues = FieldValues>({ name, label, options, required, helpText, disabled, className, control, layout, maxSelection, }: FormMultiSelectProps<TFieldValues>): react_jsx_runtime.JSX.Element;
 
-interface RadioOption {
-    value: string;
-    label: string;
-    description?: string;
-    disabled?: boolean;
-}
-interface FormRadioGroupProps<TFieldValues extends FieldValues> {
-    /**
-     * Field name (registered with react-hook-form)
-     */
-    name: Path<TFieldValues>;
-    /**
-     * Radio group label
-     */
-    label?: string;
-    /**
-     * Radio options
-     */
-    options: RadioOption[];
-    /**
-     * Layout orientation
-     */
-    orientation?: "vertical" | "horizontal";
-    /**
-     * Help text shown below the radio group
-     */
-    helperText?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Whether the field is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-declare function FormRadioGroup<TFieldValues extends FieldValues>({ name, label, options, orientation, helperText, required, disabled, className, }: FormRadioGroupProps<TFieldValues>): react_jsx_runtime.JSX.Element;
-
-interface FormSwitchProps<TFieldValues extends FieldValues> {
-    /**
-     * Field name (registered with react-hook-form)
-     */
-    name: Path<TFieldValues>;
-    /**
-     * Switch label
-     */
-    label?: string;
-    /**
-     * Description shown below the label
-     */
-    description?: string;
-    /**
-     * Help text shown below the switch
-     */
-    helperText?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Whether the field is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Callback when value changes
-     */
-    onChange?: (checked: boolean) => void;
-}
-declare function FormSwitch<TFieldValues extends FieldValues>({ name, label, description, helperText, required, disabled, className, onChange, }: FormSwitchProps<TFieldValues>): react_jsx_runtime.JSX.Element;
-
-interface FormTagInputProps<TFieldValues extends FieldValues> {
-    /**
-     * Field name (registered with react-hook-form)
-     */
-    name: Path<TFieldValues>;
-    /**
-     * Field label
-     */
-    label?: string;
-    /**
-     * Placeholder text
-     */
-    placeholder?: string;
-    /**
-     * Help text shown below the input
-     */
-    helperText?: string;
-    /**
-     * Whether the field is required
-     */
-    required?: boolean;
-    /**
-     * Whether the field is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Maximum number of tags allowed
-     */
-    maxTags?: number;
-    /**
-     * Separator keys (default: Enter, comma)
-     */
-    separators?: string[];
-    /**
-     * Validate individual tags before adding
-     */
-    validateTag?: (tag: string) => boolean | string;
-    /**
-     * Custom className
-     */
-    className?: string;
-}
-declare function FormTagInput<TFieldValues extends FieldValues>({ name, label, placeholder, helperText, required, disabled, maxTags, separators, validateTag, className, }: FormTagInputProps<TFieldValues>): react_jsx_runtime.JSX.Element;
-
-/**
- * FormErrorSummary Component
- *
- * Displays all form errors in a summary box with links to fields.
- */
-interface FormErrorSummaryProps {
-    /**
-     * Title for the error summary
-     */
-    title?: string;
-    /**
-     * Custom field labels (for better error messages)
-     */
-    fieldLabels?: Record<string, string>;
-    /**
-     * Whether to show the error summary
-     * Defaults to showing when there are errors
-     */
-    show?: boolean;
-    /**
-     * Custom className
-     */
-    className?: string;
-    /**
-     * Callback when an error link is clicked
-     */
-    onErrorClick?: (fieldName: string) => void;
-}
-declare function FormErrorSummary({ title, fieldLabels, show, className, onErrorClick, }: FormErrorSummaryProps): react_jsx_runtime.JSX.Element | null;
-
 interface FormLayoutProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
      * Number of columns for the form layout
@@ -644,8 +766,45 @@ declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): {
     hasUnsavedChanges: boolean;
     isDirty: boolean;
 };
+
 /**
- * Hook variant for React Router integration
+ * React Router Integration for Unsaved Changes
+ *
+ * Provides adapters for blocking navigation with unsaved form changes.
+ */
+interface BlockerState {
+    /**
+     * Whether navigation is currently blocked
+     */
+    state: "unblocked" | "blocked" | "proceeding";
+    /**
+     * The location that was blocked (if blocked)
+     */
+    location?: any;
+    /**
+     * Proceed with the blocked navigation
+     */
+    proceed: () => void;
+    /**
+     * Cancel/reset the blocked navigation
+     */
+    reset: () => void;
+}
+interface UseUnsavedChangesBlockerOptions {
+    /**
+     * Custom condition for when to block navigation
+     * If not provided, blocks when form is dirty and not submitting
+     */
+    when?: boolean;
+    /**
+     * Custom message for the blocker
+     */
+    message?: string;
+}
+/**
+ * Base blocker hook for unsaved form changes
+ *
+ * Returns blocker state that can be used with React Router or custom navigation
  *
  * @example
  * ```tsx
@@ -668,11 +827,64 @@ declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): {
  * }
  * ```
  */
-declare function useUnsavedChangesBlocker(): {
+declare function useUnsavedChangesBlocker(_options?: UseUnsavedChangesBlockerOptions): BlockerState & {
     hasUnsavedChanges: boolean;
     isDirty: boolean;
-    shouldBlock: boolean;
 };
+/**
+ * React Router v6 adapter for unsaved changes blocker
+ *
+ * Uses React Router's useBlocker hook to prevent navigation
+ *
+ * @example
+ * ```tsx
+ * import { useUnsavedChangesBlockerReactRouter } from "@mehdashti/forms";
+ * import { useBlocker } from "react-router-dom";
+ *
+ * function MyForm() {
+ *   const form = useSmartForm({ schema: mySchema });
+ *   const blocker = useUnsavedChangesBlockerReactRouter(useBlocker);
+ *
+ *   if (blocker.state === "blocked") {
+ *     return (
+ *       <ConfirmDialog
+ *         title="Unsaved changes"
+ *         message="You have unsaved changes. Are you sure you want to leave?"
+ *         onConfirm={() => blocker.proceed()}
+ *         onCancel={() => blocker.reset()}
+ *       />
+ *     );
+ *   }
+ *
+ *   return <FormProvider {...form}>...</FormProvider>;
+ * }
+ * ```
+ */
+declare function useUnsavedChangesBlockerReactRouter(useBlocker: any, // React Router's useBlocker hook
+options?: UseUnsavedChangesBlockerOptions): any;
+/**
+ * TanStack Router adapter for unsaved changes blocker
+ *
+ * Uses TanStack Router's useBlocker hook to prevent navigation
+ *
+ * @example
+ * ```tsx
+ * import { useUnsavedChangesBlockerTanStack } from "@mehdashti/forms";
+ * import { useBlocker } from "@tanstack/react-router";
+ *
+ * function MyForm() {
+ *   const form = useSmartForm({ schema: mySchema });
+ *   const blocker = useUnsavedChangesBlockerTanStack(useBlocker);
+ *
+ *   // TanStack Router handles the blocking UI automatically
+ *   // or you can check blocker.status === "blocked"
+ *
+ *   return <FormProvider {...form}>...</FormProvider>;
+ * }
+ * ```
+ */
+declare function useUnsavedChangesBlockerTanStack(useBlocker: any, // TanStack Router's useBlocker hook
+options?: UseUnsavedChangesBlockerOptions): any;
 
 /**
  * Common Validation Schemas
@@ -854,4 +1066,4 @@ declare function validateFileExtension(filename: string, allowedExtensions: stri
  */
 declare function formatValidationError(error: z.ZodError): Record<string, string>;
 
-export { type FieldArrayOptions, FormCheckbox, type FormCheckboxProps, FormDatePicker, type FormDatePickerProps, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, FormFileUpload, type FormFileUploadProps, FormGrid, FormGridItem, type FormGridItemProps, type FormGridProps, FormLayout, type FormLayoutProps, FormMultiSelect, type FormMultiSelectProps, FormRadioGroup, type FormRadioGroupProps, FormSection, type FormSectionProps, FormSelect, type FormSelectProps, FormSwitch, type FormSwitchProps, FormTagInput, type FormTagInputProps, FormTextarea, type FormTextareaProps, FormWizard, type FormWizardProps, type FormWizardStep, type MultiSelectOption, type RadioOption, type SelectOption, type SmartFormOptions, type SmartFormReturn, type UseUnsavedChangesOptions, conditionalSchema, createConfirmPasswordSchema, createFileSizeSchema, createFileTypeSchema, dateStringSchema, emailSchema, formatValidationError, futureDateSchema, getAllErrors, getErrorMessage, hasError, imageFileSchema, invalidFormatMessage, lengthMessage, optionalEmailSchema, optionalUrlSchema, passwordSchema, pastDateSchema, percentageSchema, phoneSchema, positiveIntegerSchema, positiveNumberSchema, priceSchema, requiredMessage, sanitizeString, slugSchema, strongPasswordSchema, urlSchema, useSmartFieldArray, useSmartForm, useUnsavedChanges, useUnsavedChangesBlocker, usernameSchema, validateCreditCard, validateFileExtension, validateIBAN, validatePasswordStrength };
+export { type BlockerState, type FieldArrayOptions, FormCheckbox, type FormCheckboxProps, FormCheckbox$1 as FormCheckboxUI, type FormCheckboxProps$1 as FormCheckboxUIProps, FormDatePicker, type FormDatePickerProps, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, FormFileUpload, type FormFileUploadProps, FormGrid, FormGridItem, type FormGridItemProps, type FormGridProps, FormInput, type FormInputProps, FormLayout, type FormLayoutProps, FormMultiSelect, type FormMultiSelectProps, FormRadioGroup, type FormRadioGroupProps, FormSection, type FormSectionProps, FormSelect, type FormSelectOption, type FormSelectProps, FormSelect$1 as FormSelectUI, type FormSelectProps$1 as FormSelectUIProps, FormSwitch, type FormSwitchProps, FormTagInput, type FormTagInputProps, FormTextarea, type FormTextareaProps, FormTextarea$1 as FormTextareaUI, type FormTextareaProps$1 as FormTextareaUIProps, FormWizard, type FormWizardProps, type FormWizardStep, type MultiSelectOption, type RadioOption, type SelectOption, type SmartFormOptions, type SmartFormReturn, type UseUnsavedChangesBlockerOptions, type UseUnsavedChangesOptions, conditionalSchema, createConfirmPasswordSchema, createFileSizeSchema, createFileTypeSchema, dateStringSchema, emailSchema, formatValidationError, futureDateSchema, getAllErrors, getErrorMessage, hasError, imageFileSchema, invalidFormatMessage, lengthMessage, optionalEmailSchema, optionalUrlSchema, passwordSchema, pastDateSchema, percentageSchema, phoneSchema, positiveIntegerSchema, positiveNumberSchema, priceSchema, requiredMessage, sanitizeString, slugSchema, strongPasswordSchema, urlSchema, useSmartFieldArray, useSmartForm, useUnsavedChanges, useUnsavedChangesBlocker, useUnsavedChangesBlockerReactRouter, useUnsavedChangesBlockerTanStack, usernameSchema, validateCreditCard, validateFileExtension, validateIBAN, validatePasswordStrength };