<!-- source-hash: 576067b7bb2d4b4d4bb10818d0012e49 -->
A client-side React component that renders a single sortable column item, cycling through ascending, descending, and cleared sort states on click.

## Key Components

### Interfaces & Types
- **`SortableColumn`** — Defines a column with `key`, `label`, and optional `sortKey`
- **`SortDirection`** — Union type `"asc" | "desc"`
- **`SortConfig`** — Configuration shape for a full sort UI (columns list, active sort state, title)
- **`SortColumnItemProps`** — Props for the `SortColumnItem` component

### Component: `SortColumnItem`
Renders a clickable row displaying a column label and a directional sort icon. Click behavior cycles through states:
1. No sort → `"asc"`
2. `"asc"` → `"desc"`
3. `"desc"` → calls `onClear()` (if provided) or resets to `"asc"`

Icons used per state:
- `Arrow01UpIcon` — ascending (accent color)
- `Arrow01DownIcon` — descending (accent color)
- `SwitchVrIcon` — unsorted (secondary color)

## Usage Example

```typescript
import { SortColumnItem, SortableColumn, SortDirection } from "./sort-column-item"

const column: SortableColumn = { key: "name", label: "Name", sortKey: "name" }

function MyTable() {
  const [direction, setDirection] = useState<SortDirection | undefined>()

  return (
    <SortColumnItem
      column={column}
      currentDirection={direction}
      onSort={(dir) => setDirection(dir)}
      onClear={() => setDirection(undefined)}
    />
  )
}
```