# Media Components

> Generated reference (regen-owned; see [index.md](index.md)). Binds only under `primitives: nurix`.

Icons, avatars, and media display; import each from its kebab-case subpath, e.g. `import { Avatar } from "@nurix/components/element/avatar"`.

## Avatar

Wraps `facehash` (deterministic identicon fallback) with default sizing.

**Props:** `size` (number, default 32) — sets both `width`/`height` and drives the round mask

**Sub-components:** `AvatarImage`, `AvatarFallback` (`colors` — palette forwarded to facehash for its generated background, defaults to a 10-color set)

```tsx
<Avatar size={40}>
  <AvatarImage src="/photo.jpg" />
  <AvatarFallback name="jane@example.com" />
</Avatar>
```

## CopyButton

Click-to-copy button with a check/copy icon swap.

**Props:** `value`, `onCopy`, `copiedDuration` (ms before reverting, default 2000), `variant` [default|outline], `size` [sm|default|lg]

```tsx
<CopyButton value={apiKey} size="sm" />
```

## Logo

Official brand logo — NuPlay mark + wordmark, inline SVG.

**Props:** `variant` [blue-black|white-white|lime-white|blue-white] (fixed brand colorways, named mark-then-wordmark; blue-black is the default for light surfaces, the white-wordmark variants are for dark/animated backdrops), `height` (number|string, sizes via intrinsic aspect ratio)

```tsx
<Logo variant="white-white" height={20} />
```

## ThemeToggler

Light/dark toggle with a directional wipe reveal; cycles light → dark → system → light and persists to `localStorage`.

**Props:** `style` [icon|text-icon|icon-text], `size` [sm|md|lg], `duration` (ms, default 700)

```tsx
<ThemeToggler style="icon-text" size="md" />
```

## ViewSwitcher

Segmented control for switching a view-type projection (e.g. table/card), with an animated sliding background.

**Props:** `value`/`onChange` (controlled), `defaultValue` (default `"table"`), `options` (`{ value, label, icon }[]`, defaults to Table/Card), `size` [sm|md|lg]

```tsx
<ViewSwitcher value={view} onChange={setView} size="sm" />
```

## Other Components

- `icon-renderer` + `icons-data` — `IconRenderer`: `icon`/`family`/`size` [sm|md|lg|xl]/`color`; resolves a remote SVG from the configured icon CDN (`<cdn>/fa/<family>/<icon>.svg`) tinted via CSS filter, with a built-in fallback icon on load error. `icons-data` exports `iconsData` — `{ name, categories, tags }[]` — for building icon pickers over the local Lucide set (distinct from the remote family above).
- `live-waveform` + `mic-icon` — `LiveWaveform`: canvas mic-level visualizer; `active`, `processing`, `mode` [static|history|frequency], `barWidth`/`barGap`/`barRadius`/`barColor`, `sensitivity`, `onStreamReady`/`onStreamEnd`/`onError` (draft API — most props are untyped passthroughs). `MicIcon`: animated mic glyph with an imperative ref (`startAnimation`/`stopAnimation`); `size`, `duration`, `isAnimated`.
- `shine-border` — `ShineBorder`: absolutely-positioned animated gradient border overlay (parent needs `position: relative`); `borderWidth`, `duration` (seconds), `shineColor` (string or array, cycled through a radial gradient sweep)