@neo-ui-kit/react 0.0.0-stage → 1.0.0

package/dist/components/media/Waveform/Waveform.d.ts

@@ -0,0 +1,9 @@
+import { type WaveformProps } from "../shared";
+/**
+ * Seekable waveform drawn the way studio editors show audio: a dense, symmetric track with
+ * translucent peaks around a solid core of average loudness. The played part burns ruby
+ * and brightens towards the light-beam cursor; hovering previews the seek point and its
+ * time. Click or drag to seek, arrows step 5 s, Home/End jump to the edges. Peaks come
+ * from `points` or are decoded from `src`.
+ */
+export declare function Waveform({ duration: total, position: controlled, defaultPosition, onSeek, points, src, bins, color, label, disabled, ...p }: WaveformProps): import("react").JSX.Element;

package/dist/components/media/Waveform/styles.css

@@ -0,0 +1,375 @@
+/* Styles owned by Waveform: a studio-style track in brushed silver; the played part burns
+   ruby, glows and catches a passing sheen, a light beam marks the position. */
+.ad-waveform {
+  position: relative;
+  contain: layout;
+  flex: 1;
+  min-width: 3rem;
+  height: clamp(3.25rem, 2.6rem + 1.8vw, 4.75rem);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  touch-action: none;
+  outline: none;
+}
+.ad-waveform:focus-visible {
+  box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--ad-pink) 70%, transparent);
+}
+.ad-waveform[aria-disabled] {
+  cursor: not-allowed;
+  filter: saturate(0.4);
+  opacity: 0.6;
+}
+.ad-waveform > svg.ad-waveform-base {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transform-origin: 50% 50%;
+  animation: ad-waveform-rise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+/* Arrival: the track grows out of the midline in a wave running left to right. */
+@keyframes ad-waveform-rise {
+  from {
+    clip-path: inset(0 100% 0 0);
+    transform: scaleY(0.15);
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+/* Light spilling from the played part onto the surface beneath it (stretched, never redrawn). */
+.ad-waveform-floor {
+  position: absolute;
+  inset: 12% 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    ellipse 100% 100% at 100% 50%,
+    color-mix(in srgb, var(--ad-wave-color, var(--ad-red)) 40%, transparent),
+    transparent 75%
+  );
+  transform: scaleX(var(--ad-wave-progress, 0));
+  transform-origin: left;
+  opacity: 0.8;
+  pointer-events: none;
+}
+/* Layers over the track: still pictures (masks) with content moved or stretched by transform. */
+.ad-waveform-overlay,
+.ad-waveform-layer,
+.ad-waveform-follow {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.ad-waveform-layer {
+  mask-size: 100% 100%;
+  -webkit-mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  animation: ad-waveform-rise-layer 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+@keyframes ad-waveform-rise-layer {
+  from {
+    transform: scaleY(0.15);
+    opacity: 0;
+  }
+}
+.ad-waveform-lit > i,
+.ad-waveform-bloom > i {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, var(--ad-primary-700), var(--ad-wave-color, var(--ad-red)) 60%, var(--ad-secondary-100));
+  transform: scaleX(var(--ad-wave-progress, 0));
+  transform-origin: left;
+}
+/* The window shows only the played part: it slides right while its content slides back. */
+.ad-waveform-window {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  transform: translateX(calc(var(--ad-wave-played, 0%) - 100%));
+}
+.ad-waveform-window-inner {
+  position: absolute;
+  inset: 0;
+  transform: translateX(calc(100% - var(--ad-wave-played, 0%)));
+}
+/* Anything that sits at the position rides a full-width layer moved by it. */
+.ad-waveform-follow {
+  transform: translateX(var(--ad-wave-played, 0%));
+}
+/* Engraved edge: a hairline traces the peaks so the shape reads crisp. */
+.ad-waveform-edge {
+  fill: none;
+  stroke: #fff;
+  stroke-width: 0.75;
+  stroke-opacity: 0.14;
+  vector-effect: non-scaling-stroke;
+}
+.ad-waveform-axis {
+  stroke: color-mix(in srgb, var(--ad-pink) 30%, transparent);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+/* Unplayed: smoked graphite, translucent peaks around a denser core of average loudness. */
+.ad-waveform-peaks {
+  opacity: 0.12;
+  transition: opacity 0.4s;
+}
+.ad-waveform-core {
+  opacity: 0.24;
+  transition: opacity 0.4s;
+}
+.ad-waveform:hover .ad-waveform-peaks {
+  opacity: 0.18;
+}
+.ad-waveform:hover .ad-waveform-core {
+  opacity: 0.34;
+}
+/* Between the cursor and the pointer: where a click would take you. */
+.ad-waveform-ahead > path {
+  fill: color-mix(in srgb, var(--ad-pink) 60%, #fff);
+  opacity: 0.18;
+}
+/* Played: ruby light, glowing, with the core burning brightest. */
+.ad-waveform-lit {
+  opacity: 0.5;
+}
+.ad-waveform-lit-core {
+  opacity: 1;
+}
+.ad-waveform-bloom {
+  opacity: 0.9;
+}
+/* Lit from above: the upper half catches light, the lower sinks into shadow. */
+.ad-waveform-layer.ad-waveform-depth {
+  background: linear-gradient(#ffffff29, #fff0 42%, #0000 56%, #0009);
+}
+/* A soft band of light drifts across the played part now and then. */
+.ad-waveform-sheen {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 16%;
+  background: #fff;
+  opacity: 0.16;
+  transform: translateX(-125%) skewX(-18deg);
+  animation: ad-waveform-sheen 5.5s cubic-bezier(0.45, 0, 0.2, 1) infinite;
+}
+@keyframes ad-waveform-sheen {
+  0%,
+  35% {
+    transform: translateX(-125%) skewX(-18deg);
+  }
+  100% {
+    transform: translateX(690%) skewX(-18deg);
+  }
+}
+/* A spot of light at the position, inside the track's shape. */
+.ad-waveform-spot {
+  position: absolute;
+  top: -50%;
+  left: 0;
+  width: 12%;
+  height: 200%;
+  translate: -50% 0;
+  border-radius: 50%;
+  background: radial-gradient(closest-side, #ffffffe6, rgb(from var(--ad-primary) r g b / 0));
+  opacity: 0.55;
+}
+.ad-waveform-depth {
+  pointer-events: none;
+}
+/* The position: a thin beam of light with a halo. */
+.ad-waveform-cursor {
+  position: absolute;
+  top: -0.2rem;
+  bottom: -0.1rem;
+  left: 0;
+  width: 0.125rem;
+  translate: -50% 0;
+  border-radius: 999rem;
+  background: linear-gradient(
+    transparent,
+    var(--ad-secondary-100) 20%,
+    #fff 50%,
+    var(--ad-secondary-100) 80%,
+    transparent
+  );
+  box-shadow:
+    0 0 0.45rem var(--ad-primary),
+    0 0 1.2rem rgb(from var(--ad-primary) r g b / 0.6);
+  pointer-events: none;
+}
+.ad-waveform-cursor::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.45rem;
+  height: 0.45rem;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow:
+    0 0 0 0.18rem rgb(from var(--ad-primary) r g b / 0.33),
+    0 0 0.7rem var(--ad-primary);
+  transition: scale 0.25s cubic-bezier(0.34, 1.56, 0.5, 1);
+}
+/* Anamorphic flare: a thin horizontal streak through the cursor, as in film. */
+.ad-waveform-cursor::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 7rem;
+  height: 0.125rem;
+  translate: -50% -50%;
+  border-radius: 999rem;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgb(from var(--ad-secondary) r g b / 0.6) 30%,
+    #fff 50%,
+    rgb(from var(--ad-secondary) r g b / 0.6) 70%,
+    transparent
+  );
+  filter: blur(0.04rem);
+  opacity: 0.75;
+  animation: ad-waveform-flare 3.2s ease-in-out infinite;
+}
+@keyframes ad-waveform-flare {
+  50% {
+    scale: 1.29 1;
+    opacity: 0.45;
+  }
+}
+/* Sparks fly off the cursor while the track plays. */
+.ad-waveform-sparks {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.ad-waveform[data-playing] .ad-waveform-sparks {
+  opacity: 1;
+}
+.ad-waveform-sparks > i {
+  position: absolute;
+  width: 0.2rem;
+  height: 0.2rem;
+  margin: -0.1rem;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 0.35rem var(--ad-primary);
+  opacity: 0;
+  animation: ad-waveform-spark 1.6s ease-out infinite;
+}
+.ad-waveform-sparks > i:nth-child(1) {
+  --dx: -1.4rem;
+  --dy: -1.5rem;
+  animation-delay: 0s;
+}
+.ad-waveform-sparks > i:nth-child(2) {
+  --dx: -2.2rem;
+  --dy: 0.9rem;
+  animation-delay: 0.2s;
+}
+.ad-waveform-sparks > i:nth-child(3) {
+  --dx: -0.8rem;
+  --dy: 1.6rem;
+  animation-delay: 0.4s;
+}
+.ad-waveform-sparks > i:nth-child(4) {
+  --dx: -2.6rem;
+  --dy: -0.6rem;
+  animation-delay: 0.6s;
+}
+.ad-waveform-sparks > i:nth-child(5) {
+  --dx: -1.1rem;
+  --dy: -2rem;
+  animation-delay: 0.8s;
+}
+.ad-waveform-sparks > i:nth-child(6) {
+  --dx: -1.9rem;
+  --dy: 1.8rem;
+  animation-delay: 1s;
+}
+.ad-waveform-sparks > i:nth-child(7) {
+  --dx: -3rem;
+  --dy: 0.2rem;
+  animation-delay: 1.2s;
+}
+.ad-waveform-sparks > i:nth-child(8) {
+  --dx: -0.6rem;
+  --dy: -1.1rem;
+  animation-delay: 1.4s;
+}
+@keyframes ad-waveform-spark {
+  10% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: translate(var(--dx), var(--dy)) scale(0.3);
+  }
+}
+.ad-waveform:hover .ad-waveform-cursor::after,
+.ad-waveform:focus-visible .ad-waveform-cursor::after {
+  scale: 1.4;
+}
+/* Hover: a faint line and the time you would jump to. */
+.ad-waveform-hover {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--ad-wave-hover);
+  width: 0.0625rem;
+  background: linear-gradient(transparent, #ffffff99 30%, transparent);
+  pointer-events: none;
+}
+/* A soft spotlight follows the pointer across the track. */
+.ad-waveform-hover::before {
+  content: "";
+  position: absolute;
+  top: -15%;
+  bottom: -15%;
+  left: 50%;
+  width: 8rem;
+  translate: -50% 0;
+  background: radial-gradient(closest-side, #ffffff1f, transparent);
+}
+.ad-waveform-tip {
+  position: absolute;
+  bottom: calc(100% + 0.35rem);
+  left: 50%;
+  translate: -50% 0;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.35rem;
+  background: rgb(from var(--ad-neutral-850) r g b / 0.9);
+  box-shadow: inset 0 0 0 0.0625rem rgb(from var(--ad-secondary) r g b / 0.4);
+  color: #fff;
+  font-size: var(--ad-font-size-caption);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  animation: ad-waveform-tip 0.18s ease-out both;
+}
+@keyframes ad-waveform-tip {
+  from {
+    opacity: 0;
+    translate: -50% 0.2rem;
+  }
+}
+/* Loading: a sheen sweeps the placeholder silhouette. */
+.ad-waveform[data-loading] :is(.ad-waveform-peaks, .ad-waveform-core) {
+  animation: ad-waveform-wait 1.4s ease-in-out infinite;
+}
+@keyframes ad-waveform-wait {
+  50% {
+    opacity: 0.4;
+  }
+}

package/dist/components/media/Waveform/useWaveformPeaks.d.ts

@@ -0,0 +1,11 @@
+/** Per slice of the track: the loudest sample (peak) and the average loudness (RMS), 0..1. */
+export interface WaveformData {
+    peaks: number[];
+    rms: number[];
+}
+/**
+ * Peaks and average loudness of an audio file for a waveform, decoded in the browser.
+ * `null` while loading, empty arrays when the file cannot be read; nothing is fetched
+ * without a source. Superseded work is aborted, and measuring samples yields to input.
+ */
+export declare function useWaveformPeaks(src?: string | Blob | null, bins?: number): WaveformData | null;

package/dist/components/media/shared.css

@@ -0,0 +1,7 @@
+/* Shared only by sibling components. */
+.ad-wave-decoration {
+  width: 100%;
+  height: 8.125rem;
+  display: block;
+  pointer-events: none;
+}

package/dist/components/media/shared.d.ts

@@ -0,0 +1,80 @@
+import type { CommonProps } from "../../core/base";
+export interface WaveformProps extends CommonProps {
+    duration?: number;
+    position?: number;
+    defaultPosition?: number;
+    onSeek?: (time: number) => void;
+    /** Ready peaks (any scale, any count); an empty array is silence. Without them the shape is read from `src`. */
+    points?: readonly number[];
+    /** An audio file (URL, File or Blob) whose peaks are decoded in the browser. */
+    src?: string | Blob | null;
+    /** How many bars to decode from `src` (clamped to 1–10,000; non-finite values use 600). */
+    bins?: number;
+    color?: string;
+    label?: string;
+    disabled?: boolean;
+}
+export interface AudioPlayerProps extends CommonProps {
+    src?: string;
+    duration?: number;
+    /** Use an external audio engine instead of creating an HTMLAudioElement. */
+    playing?: boolean;
+    /** Current position supplied by an external audio engine. */
+    position?: number;
+    disabled?: boolean;
+    onTimeChange?: (time: number) => void;
+    onPlayingChange?: (playing: boolean) => void;
+    points?: number[];
+    volume?: number;
+    defaultVolume?: number;
+    /** Requested output volume, 0–1; pair with `volume` for controlled playback engines. */
+    onVolumeChange?: (volume: number) => void;
+    showVolume?: boolean;
+}
+export interface LevelMeterProps extends CommonProps {
+    /** Current level, 0–100; change it as often as you like. */
+    value?: number;
+    /** A live input (e.g. from getUserMedia) the meter listens to by itself; overrides `value`. */
+    stream?: MediaStream | null;
+    /** Off (muted, disconnected): the wave settles and dims. */
+    active?: boolean;
+    /** Small pill-sized meter for lists and participant rows. */
+    compact?: boolean;
+    label?: string;
+}
+export interface RotaryKnobProps extends CommonProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    step?: number;
+    fineStep?: number;
+    resetValue?: number;
+    /** Value range; 0–100 (percent) by default. */
+    min?: number;
+    max?: number;
+    /** The readout and typed input show value × this (e.g. 100 for a 0–2 gain shown as 0–200 %). */
+    displayScale?: number;
+    /** Unit after the shown number; "%" by default. */
+    suffix?: string;
+    label?: string;
+    /** Print the label under the knob (otherwise it is only read out and shown on hover). */
+    showLabel?: boolean;
+    showValue?: boolean;
+    diameter?: number;
+}
+export type RotaryKnobController = {
+    get value(): number;
+    setValue(next: number, notify?: boolean): void;
+    reset(): void;
+};
+export interface SparklineProps extends CommonProps {
+    /** An empty array leaves the chart empty; omit for the demo series. */
+    values?: number[];
+    /** Scale to the values' own range instead of from zero, so small changes fill the height. */
+    fit?: boolean;
+    color?: string;
+    label?: string;
+}

package/dist/components/navigation/Router/Router.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export interface RouteAccessContext {
+    pathname: string;
+    params: Record<string, string>;
+    context?: unknown;
+}
+export interface RouteDefinition {
+    path: string;
+    element?: ReactNode | ((match: RouteMatch) => ReactNode);
+    redirectTo?: string;
+    access?: (value: RouteAccessContext) => boolean;
+    denied?: ReactNode | ((match: RouteMatch) => ReactNode);
+}
+export interface RouteMatch {
+    route: RouteDefinition;
+    pathname: string;
+    params: Record<string, string>;
+}
+export interface RouterValue extends RouteMatch {
+    navigate: (to: string, replace?: boolean) => void;
+}
+export interface RouterProps {
+    routes: readonly RouteDefinition[];
+    fallback?: ReactNode;
+    context?: unknown;
+    mode?: "hash" | "history";
+    /** Opt into native view transitions. Captured views may temporarily pause pointer interaction. Default: false. */
+    transition?: boolean;
+}
+export declare function matchRoute(routes: readonly RouteDefinition[], pathname: string): RouteMatch | null;
+export declare function Router({ routes, fallback, context, mode, transition, }: RouterProps): import("react").JSX.Element | null;
+export declare function useRouter(): RouterValue;

package/dist/components/navigation/Router/styles.css

@@ -0,0 +1 @@
+/* Router is behavior-only. */

package/dist/components.css

@@ -0,0 +1,102 @@
+@import "./fonts/melodix.css";
+/* Entry for all component styles. Add a new component styles.css here. */
+@import "./theme/base.css";
+@import "./components/layout/shared.css";
+@import "./components/controls/shared.css";
+@import "./components/feedback/shared.css";
+@import "./components/media/shared.css";
+@import "./components/editor/shared.css";
+@import "./components/controls/Autocomplete/styles.css";
+@import "./components/controls/Button/styles.css";
+@import "./components/controls/Checkbox/styles.css";
+@import "./components/controls/InputBase/styles.css";
+@import "./components/controls/Link/styles.css";
+@import "./components/controls/FilePicker/styles.css";
+@import "./components/controls/IconButton/styles.css";
+@import "./components/controls/NumberField/styles.css";
+@import "./components/controls/SegmentedControl/styles.css";
+@import "./components/controls/Select/styles.css";
+@import "./components/controls/Slider/styles.css";
+@import "./components/controls/SplitButton/styles.css";
+@import "./components/controls/Switch/styles.css";
+@import "./components/controls/Tab/styles.css";
+@import "./components/controls/Tabs/styles.css";
+@import "./components/controls/TextArea/styles.css";
+@import "./components/controls/ThemePicker/styles.css";
+@import "./components/controls/ToggleButton/styles.css";
+@import "./components/editor/PianoRoll/styles.css";
+@import "./components/effects/AnimatedBorder/styles.css";
+@import "./components/effects/Marquee/styles.css";
+@import "./components/effects/Beacon/styles.css";
+@import "./components/effects/Sparkles/styles.css";
+@import "./components/effects/Shimmer/styles.css";
+@import "./components/feedback/SignalBars/styles.css";
+@import "./components/effects/ImageShine/styles.css";
+@import "./components/effects/Equalizer/styles.css";
+@import "./components/effects/GlowText/styles.css";
+@import "./components/effects/Reveal/styles.css";
+@import "./components/effects/Tilt/styles.css";
+@import "./components/effects/Spotlight/styles.css";
+@import "./components/feedback/Badge/styles.css";
+@import "./components/feedback/CollapsibleSection/styles.css";
+@import "./components/feedback/DataTable/styles.css";
+@import "./components/feedback/Dialog/styles.css";
+@import "./components/feedback/EmptyState/styles.css";
+@import "./components/feedback/KeyValueList/styles.css";
+@import "./components/feedback/Menu/styles.css";
+@import "./components/feedback/MenuItem/styles.css";
+@import "./components/feedback/MessageBar/styles.css";
+@import "./components/feedback/Popover/styles.css";
+@import "./components/feedback/ProgressBar/styles.css";
+@import "./components/feedback/StatusIndicator/styles.css";
+@import "./components/feedback/Steps/styles.css";
+@import "./components/feedback/Toast/styles.css";
+@import "./components/feedback/Tooltip/styles.css";
+@import "./components/foundation/ThemeProvider/styles.css";
+@import "./components/foundation/Typography/styles.css";
+@import "./components/layout/Avatar/styles.css";
+@import "./components/layout/BrandMark/styles.css";
+@import "./components/layout/ButtonGroup/styles.css";
+@import "./components/layout/Card/styles.css";
+@import "./components/foundation/LoaderGenerator/styles.css";
+@import "./components/effects/MelodixText/styles.css";
+@import "./components/foundation/ThemeEditor/styles.css";
+@import "./components/controls/Chip/styles.css";
+@import "./components/controls/TagInput/styles.css";
+@import "./components/controls/PeoplePicker/styles.css";
+@import "./components/controls/ColorPicker/styles.css";
+@import "./components/controls/DatePicker/styles.css";
+@import "./components/layout/StatTile/styles.css";
+@import "./components/media/MediaCard/styles.css";
+@import "./components/layout/DialogActions/styles.css";
+@import "./components/layout/DialogBody/styles.css";
+@import "./components/layout/Divider/styles.css";
+@import "./components/layout/Grid/styles.css";
+@import "./components/layout/Header/styles.css";
+@import "./components/layout/Icon/styles.css";
+@import "./components/layout/Illustration/styles.css";
+@import "./components/layout/ScrollArea/styles.css";
+@import "./components/layout/Stack/styles.css";
+@import "./components/layout/TabPanel/styles.css";
+@import "./components/layout/Text/styles.css";
+@import "./components/layout/Toolbar/styles.css";
+@import "./components/media/AudioPlayer/styles.css";
+@import "./components/media/LevelMeter/styles.css";
+@import "./components/media/RotaryKnob/styles.css";
+@import "./components/media/PianoKeyboard/styles.css";
+@import "./components/media/MelodyRoll/styles.css";
+@import "./components/media/KaraokeLyrics/styles.css";
+@import "./components/layout/FloatingPanel/styles.css";
+@import "./components/media/Sparkline/styles.css";
+@import "./components/media/WaveDecoration/styles.css";
+@import "./components/media/Waveform/styles.css";
+@import "./components/navigation/Router/styles.css";
+@import "./components/forms/Form/styles.css";
+@import "./components/forms/FormFields/styles.css";
+@import "./components/artwork/Landscape/styles.css";
+@import "./components/artwork/Planet/styles.css";
+@import "./components/artwork/NeonWaves/styles.css";
+@import "./components/artwork/QuantumField/styles.css";
+@import "./components/artwork/Spectrum/styles.css";
+@import "./components/artwork/DatabaseArt/styles.css";
+@import "./components/artwork/ServerArt/styles.css";

package/dist/core/artwork.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+/** React's id made safe for SVG references such as `url(#id)`. */
+export declare const useSvgId: () => string;
+import type { VectorNode } from "./base";
+/** Artwork JSON already stores React-ready SVG props; only ids are rewritten. */
+export declare function vectorElement(node: VectorNode | string, prefix: string, key?: string | number): React.ReactNode;
+export interface SvgAssetProps {
+    /** Trusted React-ready SVG tree. Repeated copies receive independent ids and references. */
+    node: VectorNode;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Accessible image name. Decorative SVG trees should set aria-hidden in node.props. */
+    label?: string;
+    /** Optional data-ad-component attribute for styling and diagnostics. */
+    component?: string;
+}
+export declare function SvgAsset({ node, className, style, label, component }: SvgAssetProps): React.ReactElement<Record<string, unknown>, string | React.JSXElementConstructor<any>>;