# Box Component

A flexible container component with optional header and footer sections, perfect for creating cards, panels, and content sections.

## Features

- **Structured Layout**: Header, content, and footer sections
- **Flexible Styling**: Individual styling for each section
- **Optional Elements**: Header and footer are only rendered when needed
- **Rounded Corners**: Optional rounded corner styling
- **Title Support**: Built-in title display or custom header content
- **Responsive**: Adapts to container size

## Basic Usage

```svelte
<script>
import Box from '@ticatec/uniface-element/Box';
</script>

<Box title="My Box">
  <p>Content goes here</p>
</Box>
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `null` | Title text for the header section |
| `style` | `string \| null` | `null` | Custom CSS styles for the main container |
| `round` | `boolean` | `false` | Enable rounded corners |
| `content$style` | `string \| null` | `null` | Custom CSS styles for the content section |
| `header$style` | `string \| null` | `null` | Custom CSS styles for the header section |
| `footer$style` | `string \| null` | `null` | Custom CSS styles for the footer section |
| `class` | `string` | `null` | Additional CSS classes |

## Slots

| Slot | Description |
|------|-------------|
| `header` | Custom header content (overrides title prop) |
| `default` | Main content area |
| `footer` | Footer content |

## Examples

### Basic Box with Title

```svelte
<Box title="Information">
  <p>This is some important information that needs to be displayed in a box.</p>
</Box>
```

### Custom Header Content

```svelte
<Box>
  <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
    <h3>Custom Header</h3>
    <button>Action</button>
  </div>
  
  <p>Content with custom header</p>
</Box>
```

### Complete Box with Footer

```svelte
<Box title="User Profile">
  <div class="profile-content">
    <img src="/avatar.jpg" alt="User Avatar" />
    <h4>John Doe</h4>
    <p>Software Developer</p>
  </div>
  
  <div slot="footer">
    <button>Edit Profile</button>
    <button>View Details</button>
  </div>
</Box>
```

### Rounded Box

```svelte
<Box title="Rounded Card" round={true}>
  <p>This box has rounded corners for a softer appearance.</p>
</Box>
```

### Styled Sections

```svelte
<Box 
  title="Styled Box"
  style="border: 2px solid #007acc; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"
  header$style="background: #007acc; color: white; padding: 16px;"
  content$style="padding: 20px; background: #f9f9f9;"
  footer$style="background: #e9e9e9; padding: 12px; text-align: right;"
>
  <p>Content with custom styling for each section.</p>
  
  <div slot="footer">
    <button>Cancel</button>
    <button>Save</button>
  </div>
</Box>
```

### Dashboard Widget

```svelte
<Box 
  title="Sales Overview"
  round={true}
  style="margin: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
>
  <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
    <h3>Sales Overview</h3>
    <select>
      <option>This Month</option>
      <option>Last Month</option>
      <option>This Year</option>
    </select>
  </div>
  
  <div class="metrics">
    <div class="metric">
      <span class="value">$12,345</span>
      <span class="label">Revenue</span>
    </div>
    <div class="metric">
      <span class="value">89</span>
      <span class="label">Orders</span>
    </div>
  </div>
  
  <div slot="footer">
    <a href="/reports/sales">View Detailed Report →</a>
  </div>
</Box>
```

### Settings Panel

```svelte
<Box title="Account Settings">
  <div class="settings-form">
    <div class="form-group">
      <label>Email Notifications</label>
      <input type="checkbox" checked />
    </div>
    <div class="form-group">
      <label>Language</label>
      <select>
        <option>English</option>
        <option>Spanish</option>
        <option>French</option>
      </select>
    </div>
  </div>
  
  <div slot="footer" style="text-align: right; gap: 8px;">
    <button type="button">Reset</button>
    <button type="submit">Save Changes</button>
  </div>
</Box>
```

### Article Card

```svelte
<Box round={true} class="article-card">
  <div slot="header">
    <img src="/article-thumb.jpg" alt="Article" class="article-image" />
    <div class="article-meta">
      <h3>Understanding Svelte Components</h3>
      <p class="byline">By Jane Smith • March 15, 2024</p>
    </div>
  </div>
  
  <p>Learn the fundamentals of building reusable components in Svelte...</p>
  
  <div slot="footer" style="display: flex; justify-content: space-between; align-items: center;">
    <div class="tags">
      <span class="tag">Svelte</span>
      <span class="tag">Tutorial</span>
    </div>
    <button>Read More</button>
  </div>
</Box>
```

### Content-Only Box

```svelte
<!-- Box without header or footer, just styled content -->
<Box 
  style="border: 1px solid #ddd; border-radius: 8px; padding: 0;"
  content$style="padding: 24px;"
>
  <div class="notification">
    <i class="icon-info"></i>
    <p>This is an important notification message.</p>
  </div>
</Box>
```

## Layout Structure

The Box component consists of three main sections:

1. **Header** (optional): Displays title or custom content
2. **Content** (required): Main content area via default slot
3. **Footer** (optional): Action buttons or additional information

## Styling

The component uses the following CSS classes:

- `.uniface-box` - Main container
- `.box-header` - Header section container
- `.box-content` - Content section container  
- `.box-footer` - Footer section container
- `.title` - Title text wrapper
- `.round` - Applied when round prop is true

### Example CSS

```css
.uniface-box {
  border: 1px solid #e0e0e0;
  background: #ffffff;
  overflow: hidden;
}

.uniface-box.round {
  border-radius: 8px;
}

.box-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px;
}

.box-content {
  padding: 16px;
}

.box-footer {
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
  padding: 12px 16px;
}

.title {
  font-weight: 600;
  color: #333;
}
```

## Common Patterns

### Info Panel

```svelte
<Box title="System Information" round={true}>
  <div class="info-grid">
    <div class="info-item">
      <strong>Version:</strong> 2.1.0
    </div>
    <div class="info-item">
      <strong>Last Updated:</strong> March 15, 2024
    </div>
    <div class="info-item">
      <strong>Status:</strong> Active
    </div>
  </div>
</Box>
```

### Action Card

```svelte
<Box>
  <div slot="header" style="text-align: center;">
    <i class="large-icon icon-upload"></i>
    <h3>Upload Files</h3>
  </div>
  
  <p style="text-align: center; color: #666;">
    Drag and drop files here or click to browse
  </p>
  
  <div slot="footer" style="text-align: center;">
    <button>Choose Files</button>
  </div>
</Box>
```

### Stats Widget

```svelte
<Box title="Website Analytics" round={true}>
  <div class="stats-grid">
    <div class="stat">
      <div class="stat-value">1,234</div>
      <div class="stat-label">Visitors</div>
    </div>
    <div class="stat">
      <div class="stat-value">89%</div>
      <div class="stat-label">Bounce Rate</div>
    </div>
  </div>
  
  <div slot="footer">
    <button>View Full Report</button>
  </div>
</Box>
```

## Responsive Design

For responsive layouts, consider using CSS Grid or Flexbox:

```css
.box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}

@media (max-width: 768px) {
  .uniface-box {
    margin: 8px;
  }
  
  .box-header,
  .box-content,
  .box-footer {
    padding: 12px;
  }
}
```

## Accessibility

- Use semantic HTML within slots
- Ensure proper heading hierarchy in headers
- Provide adequate color contrast
- Make interactive elements keyboard accessible

## Best Practices

1. **Consistent Spacing**: Use consistent padding/margins across boxes
2. **Visual Hierarchy**: Use appropriate typography in headers
3. **Action Placement**: Place primary actions in the footer
4. **Content Organization**: Group related content logically
5. **Responsive Design**: Test on different screen sizes
6. **Loading States**: Consider showing loading states for dynamic content

## Integration with Other Components

The Box component works well with other components:

```svelte
<Box title="Form Example">
  <FormField label="Name">
    <TextEditor value={name} />
  </FormField>
  
  <FormField label="Options">
    <OptionsSelect options={choices} bind:value={selected} />
  </FormField>
  
  <div slot="footer">
    <ActionBar buttons={formActions} />
  </div>
</Box>
```