Delta

1import * as React from 'react';
2 
3// @interlace/delta v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/delta
5// What changed since: https://ds.interlace.tools/c/delta#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Delta
10 *
11 * "It moved, this much, this way." The smallest complete unit of analysis and
12 * the most-repeated element in a dense view, so it is worth getting exactly
13 * right once.
14 *
15 * ## Three signals, not one
16 *
17 * Direction is carried by a **glyph** (▲ ▼ –), a **sign** (+ / −), and a
18 * **colour** — in that order of reliability. Colour is last on purpose: it is
19 * the one that disappears in greyscale, in bright sun, and for the ~8% of men
20 * with red-green colour vision deficiency. Any of the three alone is enough to
21 * read the value, which is the actual requirement behind WCAG 1.4.1.
22 *
23 * ## "Good" is not a property of a number
24 *
25 * A rising error rate is bad; a rising follower count is good. `polarity`
26 * decides which direction gets `--viz-positive`. It defaults to `normal`
27 * (up = good) because that is the common case, but a chart of latency,
28 * bounce rate, or cost must pass `polarity="inverse"` — otherwise the
29 * dashboard cheerfully paints a regression green.
30 *
31 * ## MIN_VIEWPORT — 320
32 *
33 * Inline text; wraps with its line.
34 *
35 * | Rule | Concept                    | Where in this file                                     |
36 * | ---- | -------------------------- | ------------------------------------------------------ |
37 * | R6   | data-slot                  | `data-slot="delta"`                                    |
38 * | R7   | className merged + ...rest | `cn(...)` + `{...props}`                               |
39 * | R8   | Enums for >2 states        | `polarity` (normal/inverse); `direction` from the data |
40 * | R14  | Declares min viewport      | `data-min-viewport={String(MIN_VIEWPORT)}`             |
41 * | R18  | Tailwind only              | zero inline `style`                                    |
42 * | R19  | Tokens only                | `text-viz-positive/-negative/-neutral`                 |
43 * | R20  | AA contrast                | aliases `--success` / `--destructive` (≥7:1 both themes)|
44 * | R26  | A11y                       | glyph is `aria-hidden`; the sentence is in the label   |
45 */
46 
47import { cn } from '@/lib/utils';
48// … truncated