react-animated-ui/docs/AnimatedForm.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

---


## docs/AnimatedForm.md

```md
# Animated Form

## Description  
A form wrapper component that adds smooth animated transitions for form field focus, validation feedback, and submission handling.

---


## Props

| Prop         | Type                       | Default | Description                         |
|--------------|----------------------------|---------|-----------------------------------|
| `onSubmit`   | `(data: Record<string, any>) => void` | `-`     | Callback fired when form is submitted |
| `children`   | `React.ReactNode`          | `-`     | Form fields, buttons, and other content |
| `className`  | `string`                   | `""`    | Custom CSS class for styling        |

---


## Usage

```tsx
import React, { useState } from 'react';
import { AnimatedForm, AnimatedButton } from 'react-animated-ui';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Perform validation or API calls here
    alert(`Submitted: ${JSON.stringify(formData)}`);
  };

  return (
    <AnimatedForm onSubmit={handleSubmit} className="my-form">
      <label>
        Name:
        <input 
          type="text" 
          name="name" 
          value={formData.name} 
          onChange={handleChange} 
          required 
        />
      </label>

      <label>
        Email:
        <input 
          type="email" 
          name="email" 
          value={formData.email} 
          onChange={handleChange} 
          required 
        />
      </label>

      <AnimatedButton type="submit">Submit</AnimatedButton>
    </AnimatedForm>
  );
}