# SilkeDivider

A visual separator component for dividing content sections. Supports horizontal and vertical orientations with configurable spacing.

## Features

- **Horizontal/Vertical**: Separate content in either direction
- **Configurable spacing**: Add space before, after, or both sides
- **Light/Dark modes**: Match your design context
- **Flexible spacing sizes**: From xxs to xxxl

## Basic Usage

```js
<SilkeBox column gap="s">
  <SilkeText>Content above</SilkeText>
  <SilkeDivider />
  <SilkeText>Content below</SilkeText>
</SilkeBox>
```

## Horizontal Divider

The default divider is horizontal:

```js
<SilkeBox column>
  <SilkeText>Section 1</SilkeText>
  <SilkeDivider space="m" />
  <SilkeText>Section 2</SilkeText>
  <SilkeDivider space="m" />
  <SilkeText>Section 3</SilkeText>
</SilkeBox>
```

## Vertical Divider

Use `vertical` to separate content horizontally:

```js
<SilkeBox vAlign="center">
  <SilkeText>Left</SilkeText>
  <SilkeDivider vertical space="m" />
  <SilkeText>Middle</SilkeText>
  <SilkeDivider vertical space="m" />
  <SilkeText>Right</SilkeText>
</SilkeBox>
```

## Spacing Options

### Uniform Spacing

Add equal spacing on both sides:

```js
<SilkeBox column bg="neutral-10" pad="s" rounded>
  {['xxs', 'xs', 's', 'm', 'l', 'xl'].map((size) => (
    <React.Fragment key={size}>
      <SilkeText size="s">space="{size}"</SilkeText>
      <SilkeDivider space={size} />
    </React.Fragment>
  ))}
  <SilkeText size="s">End</SilkeText>
</SilkeBox>
```

### Asymmetric Spacing

Add space only before or after the divider:

```js
<SilkeBox column bg="neutral-10" pad="s" rounded>
  <SilkeText>No space below</SilkeText>
  <SilkeDivider vSpace="after-l" />
  <SilkeText>Space above, no space below</SilkeText>
  <SilkeDivider vSpace="before-l" />
  <SilkeText>Space above only</SilkeText>
</SilkeBox>
```

### Separate Horizontal and Vertical Spacing

```js
<SilkeBox column bg="neutral-10" rounded>
  <SilkeText>Horizontal and vertical spacing</SilkeText>
  <SilkeDivider vSpace="m" hSpace="xl" />
  <SilkeText>Notice the indented divider</SilkeText>
</SilkeBox>
```

## Dark Mode

Use `dark` for a more prominent divider:

```js
<SilkeBox column gap="m">
  <SilkeBox column bg="neutral-10" pad="s" rounded>
    <SilkeText>Light divider (default)</SilkeText>
    <SilkeDivider space="s" />
    <SilkeText>Subtle separation</SilkeText>
  </SilkeBox>
  <SilkeBox column bg="neutral-10" pad="s" rounded>
    <SilkeText>Dark divider</SilkeText>
    <SilkeDivider dark space="s" />
    <SilkeText>More prominent separation</SilkeText>
  </SilkeBox>
</SilkeBox>
```

## In a Navigation

```js
<SilkeBox column gap="xs" style={{ width: 200 }}>
  <SilkeButton kind="ghost" label="Dashboard" icon="home" />
  <SilkeButton kind="ghost" label="Projects" icon="folder" />
  <SilkeDivider space="xs" />
  <SilkeButton kind="ghost" label="Settings" icon="settings" />
  <SilkeButton kind="ghost" label="Help" icon="help" />
</SilkeBox>
```

## In a Toolbar

```js
<SilkeBox gap="xs" vAlign="center" pad="xs" bg="neutral-10" rounded>
  <SilkeButton kind="ghost" icon="bold" />
  <SilkeButton kind="ghost" icon="italic" />
  <SilkeButton kind="ghost" icon="underline" />
  <SilkeDivider vertical space="xs" />
  <SilkeButton kind="ghost" icon="align.left" />
  <SilkeButton kind="ghost" icon="align.center" />
  <SilkeButton kind="ghost" icon="align.right" />
  <SilkeDivider vertical space="xs" />
  <SilkeButton kind="ghost" icon="list.bullet" />
  <SilkeButton kind="ghost" icon="list.number" />
</SilkeBox>
```

## Props

| Prop       | Type                  | Default | Description                                |
| ---------- | --------------------- | ------- | ------------------------------------------ |
| `vertical` | `boolean`             | `false` | Render as vertical divider                 |
| `dark`     | `boolean`             | `false` | Use darker/more prominent line             |
| `space`    | `DividerSpace`        | -       | Spacing on both axes                       |
| `vSpace`   | `DividerSpace`        | -       | Vertical spacing (top/bottom)              |
| `hSpace`   | `DividerSpace`        | -       | Horizontal spacing (left/right)            |

## Types

```typescript
type DividerSpaceSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl';

type SpacePlacement = 'before' | 'after';

// Use size for uniform spacing, or 'before-size'/'after-size' for asymmetric
type DividerSpace = DividerSpaceSize | `${SpacePlacement}-${DividerSpaceSize}`;
```

## Spacing Reference

| Size   | Pixels |
| ------ | ------ |
| `xxs`  | 2px    |
| `xs`   | 4px    |
| `s`    | 8px    |
| `m`    | 16px   |
| `l`    | 24px   |
| `xl`   | 32px   |
| `xxl`  | 48px   |
| `xxxl` | 64px   |