Dot Pattern

1"use client";
2 
3import {
4  type ComponentPropsWithoutRef,
5  forwardRef,
6  useEffect,
7  useId,
8  useImperativeHandle,
9  useRef,
10  useState,
11} from "react";
12 
13// @interlace/dot-pattern v1.1.0 — Interlace design system.
14// Docs, props and live preview: https://ds.interlace.tools/c/dot-pattern
15// What changed since: https://ds.interlace.tools/c/dot-pattern#history
16// Generated banner — keep it, the upgrade diff reads this version.
17 
18/**
19 * @interlace/ui — DotPattern (decorative background pattern)
20 *
21 * A resolution-independent dotted-grid background that fills its positioned
22 * container. Two render modes share one tiled SVG `<pattern>`:
23 *
24 *   - **static** (default): a single tiled `<rect>` paints the whole grid as
25 *     one GPU-cheap fill — O(1) DOM nodes regardless of container size.
26 *   - **glow**: a radial-gradient dot is animated per-cell. We still bound the
27 *     work — glow renders individual `<circle>`s only for the measured tile
28 *     count, gated entirely behind `prefers-reduced-motion`.
29 *
30 * | Rule | Concept                          | Where in this file                                                       |
31 * | ---- | -------------------------------- | ------------------------------------------------------------------------ |
32 * | R2   | Travels (high)                   | Pure decoration, zero product nouns — any site can drop it behind a hero |
33 * | R4   | Extends native el + JSDoc        | `ComponentPropsWithoutRef<"svg">`; `@default` on every public prop       |
34 * | R5   | `data-testid` typed, no default  | `"data-testid"?: string` — consumer supplies                            |
35 * | R6   | `data-slot` on the root          | `data-slot="dot-pattern"`                                                |
36 * | R7   | className merged + ...rest + ref | `cn(...)` + `{...props}` + forwarded `ref`                               |
37 * | R8   | Booleans default-false, no `is`  | `glow = false`                                                          |
38 * | R18  | Tailwind only                    | No inline static styles; SVG geometry uses numeric attrs                |
39 * | R19  | Tokens only                      | `currentColor` + the `color` prop; no raw hex / rgb / oklch             |
40 * | R23  | CLS=0                            | `absolute inset-0` decorative chrome; no async height                   |
41 * | R25  | `"use client"` only as needed    | Required — `useId` + motion + reduced-motion hook                       |
42// … truncated