@mehdashti/forms 0.3.1 → 0.4.0

package/dist/index.d.ts

@@ -261,6 +261,158 @@ 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
@@ -451,6 +603,77 @@ declare function useSmartFieldArray<TFieldValues extends FieldValues = FieldValu
     fields: react_hook_form.FieldArrayWithId<TFieldValues, ArrayPath<TFieldValues>, "id">[];
 };
 
+/**
+ * useUnsavedChanges Hook
+ *
+ * Warns users before leaving the page if form has unsaved changes.
+ */
+interface UseUnsavedChangesOptions {
+    /**
+     * Custom message for the confirmation dialog
+     */
+    message?: string;
+    /**
+     * Whether to enable the warning
+     * Defaults to true
+     */
+    enabled?: boolean;
+    /**
+     * Callback when user tries to leave with unsaved changes
+     */
+    onBeforeUnload?: (isDirty: boolean) => void;
+}
+/**
+ * Hook to warn users before leaving the page with unsaved form changes
+ *
+ * @example
+ * ```tsx
+ * function MyForm() {
+ *   const form = useSmartForm({ schema: mySchema });
+ *
+ *   useUnsavedChanges({
+ *     message: "You have unsaved changes. Are you sure you want to leave?",
+ *     enabled: true
+ *   });
+ *
+ *   return <FormProvider {...form}>...</FormProvider>;
+ * }
+ * ```
+ */
+declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): {
+    hasUnsavedChanges: boolean;
+    isDirty: boolean;
+};
+/**
+ * Hook variant for React Router integration
+ *
+ * @example
+ * ```tsx
+ * function MyForm() {
+ *   const form = useSmartForm({ schema: mySchema });
+ *   const blocker = useUnsavedChangesBlocker();
+ *
+ *   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 useUnsavedChangesBlocker(): {
+    hasUnsavedChanges: boolean;
+    isDirty: boolean;
+    shouldBlock: boolean;
+};
+
 /**
  * Common Validation Schemas
  *
@@ -631,4 +854,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, FormField, type FormFieldProps, FormFileUpload, type FormFileUploadProps, FormGrid, FormGridItem, type FormGridItemProps, type FormGridProps, FormLayout, type FormLayoutProps, FormMultiSelect, type FormMultiSelectProps, FormSection, type FormSectionProps, FormSelect, type FormSelectProps, FormTextarea, type FormTextareaProps, FormWizard, type FormWizardProps, type FormWizardStep, type MultiSelectOption, type SelectOption, type SmartFormOptions, type SmartFormReturn, 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, usernameSchema, validateCreditCard, validateFileExtension, validateIBAN, validatePasswordStrength };
+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 };