# Primitives

The shared atoms — Mark, SectionTag, Rule, Badge, Spinner, Frame, Slider and Tooltip. Every other component is built from these.

- Family: Foundation, imported from `mizu-ui` or `mizu-ui/ui`
- Docs: https://mizu.user64bit.world/components/primitives
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/ui/Mark.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import {
  SectionTag,
  Rule,
  Badge,
  Spinner,
  Frame,
  Slider,
  Tooltip,
} from "mizu-ui";

export function Header() {
  const [v, setV] = useState(40);
  return (
    <>
      <SectionTag tone="muted">01 — Foundation</SectionTag>
      <Rule label="Interlude" />
      <Badge tone="accent">Live</Badge>
      <Spinner size={12} />
      <Frame label="Fig. 01">
        <p>Framed content</p>
      </Frame>
      <Slider label="Density" value={v} min={0} max={100} onChange={setV} />
      <Tooltip label="Help">
        <button>Focus me</button>
      </Tooltip>
    </>
  );
}
```

## Props

- `Mark`: `size, tone`. The diamond glyph. Tones: accent, paper, muted, line.
- `SectionTag`: `tone, diamond`. Mono uppercase label with optional diamond marker.
- `Rule`: `label, node, tone`. Hairline divider with optional centered node and label.
- `Badge`: `tone, diamond`. Status chip. Tones: paper, muted, accent, line.
- `Spinner`: `size, tone, label`. Rotating diamond loader with role=status.
- `Frame`: `label, tone`. Crop-mark frame for media with optional caption plate.
- `Slider`: `label, value, min, max, step, onChange`. Diamond-thumb range control.
- `Tooltip`: `label, side`. Linked tooltip on hover/focus, dismissible with Escape.

## Accessibility

Mark is aria-hidden (decorative). Spinner exposes role=status with a label. Tooltip appears on :focus-within as well as hover. Slider is a labelled native input.

## Motion

Spinner rotates on a 900ms linear loop. Tooltip fades and rises on hover/focus.