# Molecules

Molecules are simple groups of atoms that function together as a cohesive unit. Built on Material UI.

## Components

| Component | Description | Atoms Used |
|-----------|-------------|------------|
| `Card` | Container with header/content/footer | Box, Typography |
| `Dialog` | Modal dialog with transitions | MuiDialog |
| `Alert` | Feedback message with severity | MuiAlert |
| `Tabs` | Tab navigation | MuiTabs, MuiTab |
| `Accordion` | Collapsible sections | MuiAccordion |
| `Select` | Dropdown selection | MuiSelect |
| `DropdownMenu` | Context/action menu | Menu, MenuItem |
| `FormField` | Label + input + error | Label, Input |
| `SearchInput` | Input with search icon | TextField |
| `Popover` | Floating content panel | MuiPopover |

### Application Molecules
- `AppHeader` - Application header with logo and navigation
- `AppFooter` - Application footer with links
- `ProfileCard` - User profile display card
- `SecurityWarningDialog` - Security warning modal
- `PasswordChangeDialog` - Password change form modal

## Usage

```typescript
import { Card, CardHeader, CardContent, Dialog, Alert } from '@/components/molecules'

function MyPage() {
  return (
    <Box>
      <Card>
        <CardHeader title="Title" description="Subtitle" />
        <CardContent>Content here</CardContent>
      </Card>

      <Alert variant="success" title="Success!">
        Operation completed.
      </Alert>

      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent>Modal content</DialogContent>
      </Dialog>
    </Box>
  )
}
```

## Rules

1. ✅ **DO** compose molecules from atoms
2. ✅ **DO** keep molecules focused on a single purpose
3. ✅ **DO** use MUI `sx` prop for styling
4. ✅ **DO** support both controlled and uncontrolled modes
5. ❌ **DON'T** import organisms
6. ❌ **DON'T** add complex business logic
7. ❌ **DON'T** use Tailwind classes (use MUI `sx` prop)

## Styling

```tsx
<Card sx={{ maxWidth: 400, mx: 'auto' }}>
  <CardHeader 
    title="User Profile"
    sx={{ bgcolor: 'primary.light' }}
  />
  <CardContent>
    <Typography>Content with theme colors</Typography>
  </CardContent>
</Card>
```
```
