# Component Patterns

> Maps Figma components to code implementation patterns.
> **Run /design-setup to auto-populate from your Figma file.**

---

## How to Use This Document

When implementing from Figma designs:

1. **Find the Figma component** in the design
2. **Look up the pattern** in this document
3. **Use the exact code pattern** provided
4. **Never invent** - if no pattern exists, ask or document first

---

## Buttons

### Primary Button

**Figma Component:** `Components/Button/Primary`

```tsx
<Button variant="primary" size="md">
  Label Text
</Button>
```

**Variants:**
| Figma Variant | Code Prop |
|---------------|-----------|
| Primary | `variant="primary"` |
| Secondary | `variant="secondary"` |
| Ghost | `variant="ghost"` |
| Destructive | `variant="destructive"` |

**Sizes:**
| Figma Size | Code Prop |
|------------|-----------|
| Small | `size="sm"` |
| Medium | `size="md"` |
| Large | `size="lg"` |

---

## Form Inputs

### Text Input

**Figma Component:** `Components/Input/Text`

```tsx
<Input
  type="text"
  label="Field Label"
  placeholder="Placeholder text"
  error={errorMessage}
/>
```

**States:**
| Figma State | Code Prop |
|-------------|-----------|
| Default | (default) |
| Focused | Handled by CSS |
| Error | `error="Message"` |
| Disabled | `disabled` |

---

## Cards

### Content Card

**Figma Component:** `Components/Card/Content`

```tsx
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    {children}
  </CardContent>
  <CardFooter>
    {actions}
  </CardFooter>
</Card>
```

---

## Layout Patterns

### Page Container

**Figma Frame:** `Layout/Page`

```tsx
<div className="container mx-auto px-4 py-8 max-w-7xl">
  {children}
</div>
```

### Section

**Figma Frame:** `Layout/Section`

```tsx
<section className="py-12 space-y-6">
  <h2 className="text-2xl font-semibold">{title}</h2>
  {children}
</section>
```

---

## Navigation

### Nav Item

**Figma Component:** `Components/Nav/Item`

```tsx
<NavLink
  href={href}
  active={isActive}
>
  {icon && <Icon name={icon} />}
  {label}
</NavLink>
```

---

## Adding New Patterns

When you encounter a Figma component without a documented pattern:

1. **Stop** - Don't guess the implementation
2. **Document** - Add the pattern to this file
3. **Verify** - Ensure it matches existing code conventions
4. **Then implement** - Use the documented pattern

### Pattern Template

```markdown
### [Component Name]

**Figma Component:** `[Exact Figma path]`

```tsx
// Code pattern here
```

**Variants:**
| Figma Variant | Code Prop |
|---------------|-----------|
| ... | ... |
```

---

## Validation Checklist

Before implementing from Figma:
- [ ] Component pattern exists in this document
- [ ] All variants are documented
- [ ] Token mappings exist for all design values
- [ ] Pattern matches existing codebase conventions