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

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

@@ -0,0 +1,204 @@
+import React from "react";
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode, Ref } from "react";
+import { type CommonProps, type Variant } from "../../core/base";
+import type { MenuProps } from "../feedback/shared";
+export interface ButtonProps extends CommonProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps | "color"> {
+    variant?: Variant;
+    icon?: string;
+    endIcon?: string;
+    loading?: boolean;
+    round?: boolean;
+    label?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function buttonView(p: ButtonProps, name?: string): React.JSX.Element;
+export interface IconButtonProps extends ButtonProps {
+    label: string;
+}
+export interface ToggleButtonProps extends ButtonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onValueChange?: (value: boolean) => void;
+}
+export interface SplitButtonProps extends CommonProps {
+    variant?: Variant;
+    icon?: string;
+    label?: string;
+    items?: MenuProps["items"];
+    onClick?: () => void;
+    children?: ReactNode;
+}
+export interface TabProps extends ButtonProps {
+    selected?: boolean;
+    panelId?: string;
+}
+export interface TabItem<V extends string = string> {
+    value: V;
+    label: ReactNode;
+    icon?: string;
+    disabled?: boolean;
+    panelId?: string;
+    id?: string;
+}
+/** `V` narrows the values, e.g. `Tabs<"audio" | "video">`, so handlers get the exact type. */
+export interface TabsProps<V extends string = string> extends CommonProps {
+    items?: TabItem<V>[];
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    label?: string;
+}
+/** Field appearance: boxed outline, tinted fill or a single bottom line. */
+export type InputVariant = "outlined" | "filled" | "underlined";
+/** Label above the field, or inside it rising on focus like Material inputs. */
+export type LabelPlacement = "top" | "floating";
+export interface FieldProps extends CommonProps, Omit<InputHTMLAttributes<HTMLInputElement>, keyof CommonProps | "size" | "value" | "defaultValue" | "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    inputRef?: Ref<HTMLInputElement>;
+    variant?: InputVariant;
+    labelPlacement?: LabelPlacement;
+}
+export interface TextFieldProps extends FieldProps {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    clearable?: boolean;
+    type?: InputHTMLAttributes<HTMLInputElement>["type"];
+}
+export interface NumberFieldProps extends Omit<TextFieldProps, "value" | "defaultValue" | "onValueChange" | "type"> {
+    value?: number | "";
+    defaultValue?: number | "";
+    onValueChange?: (value: number | "") => void;
+    /** The − and + buttons; off for values applied only when typing ends. */
+    controls?: boolean;
+}
+export interface TextAreaProps extends Omit<CommonProps, "children">, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, keyof CommonProps | "value" | "defaultValue" | "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    variant?: InputVariant;
+    labelPlacement?: LabelPlacement;
+    /** Which way the reader may drag the corner; `both` lets the field follow the width too. */
+    resize?: "vertical" | "both" | "none";
+}
+export interface AutocompleteOption {
+    value: string;
+    label: string;
+}
+export interface AutocompleteProps extends TextFieldProps {
+    options?: Array<string | AutocompleteOption>;
+    onOptionSelect?: (value: string) => void;
+}
+/** One choice of a Select: any value, shown with rich content. */
+export interface SelectOption<V = string> {
+    value: V;
+    /** What the option shows; any content (text, badges, markup). */
+    label: ReactNode;
+    /** Plain text of the option for search, screen readers and the form value; defaults to the label when it is text. */
+    text?: string;
+    /** Icon before the label. */
+    icon?: string;
+    /** A person or item picture before the label: initials from `name`, or a photo. */
+    avatar?: {
+        name: string;
+        src?: string;
+    };
+    /** A second, quieter line under the label. */
+    description?: ReactNode;
+    /** Options with the same group are listed together under its name. */
+    group?: string;
+    disabled?: boolean;
+}
+/**
+ * `V` is the type of the values: strings, numbers or whole objects, e.g. `Select<User>`;
+ * the handler gets that exact type back.
+ * `className` and `style` size the field wrapper; `id`, ARIA and data attributes target
+ * the native trigger button. Explicit ARIA replaces the field label; the rendered value
+ * remains part of the button's accessible name for voice control.
+ */
+export interface SelectProps<V = string> extends CommonProps {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    /** Plain strings or numbers, or options with labels, icons, avatars, descriptions and groups. */
+    options?: Array<(V & (string | number)) | SelectOption<V>>;
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    /** Identity of a value, for values that are objects (default: the value itself, or its JSON). */
+    getKey?: (value: V) => string;
+    /** Your own content for an option in the list. */
+    renderOption?: (option: SelectOption<V>, state: {
+        selected: boolean;
+    }) => ReactNode;
+    /** Your own content for the chosen value in the field. */
+    renderValue?: (option: SelectOption<V>) => ReactNode;
+    /** A search box above the list, for long lists. */
+    searchable?: boolean;
+    /** Placeholder of the search box. */
+    searchPlaceholder?: string;
+    icon?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    ref?: Ref<HTMLButtonElement>;
+    variant?: InputVariant;
+    labelPlacement?: LabelPlacement;
+}
+export interface BooleanProps extends CommonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onValueChange?: (value: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    required?: boolean;
+    /** Checkbox only: neither on nor off, e.g. "select all" when some rows are chosen. */
+    indeterminate?: boolean;
+}
+export interface BooleanControlProps extends BooleanProps {
+    kind: "Switch" | "Checkbox";
+}
+export declare function BooleanControl({ kind, ...p }: BooleanControlProps): React.JSX.Element;
+export interface SliderProps extends CommonProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    disabled?: boolean;
+    onValueChange?: (value: number) => void;
+    ref?: Ref<HTMLInputElement>;
+}
+export interface FilePickerProps extends CommonProps {
+    label?: string;
+    description?: string;
+    icon?: string;
+    /** Name and existing photo used by the avatar chooser. */
+    name?: string;
+    src?: string;
+    avatarVariant?: "initials" | "host";
+    accept?: string;
+    multiple?: boolean;
+    onFiles?: (files: File[]) => void;
+    /** "zone" is a large drop area; "avatar" is an animated image chooser with an edit affordance. */
+    variant?: "button" | "zone" | "avatar";
+    /** Your own chooser instead of the browser's file input (e.g. a native dialog of a desktop app). */
+    onPick?: () => void;
+    /** Name of the chosen file, when the choice is kept outside (with `onPick`). */
+    value?: string;
+    disabled?: boolean;
+}

package/dist/components/editor/PianoRoll/PianoRoll.d.ts

@@ -0,0 +1,65 @@
+import { type CommonProps } from "../../../core/base";
+export interface PianoRollNote {
+    id: string;
+    /** Seconds. */
+    start: number;
+    end: number;
+    /** MIDI pitch: 60 is C4. */
+    pitch: number;
+}
+export interface PianoRollWord {
+    id: string;
+    text: string;
+    start: number;
+    end: number;
+}
+/** A drag in progress, measured from where it started; the owner applies its own rules (snapping, limits). */
+export type PianoRollGesture = {
+    kind: "move";
+    ids: readonly string[];
+    pitch: number;
+    seconds: number;
+} | {
+    kind: "resize";
+    id: string;
+    edge: "start" | "end";
+    seconds: number;
+};
+export interface PianoRollProps extends CommonProps {
+    notes?: readonly PianoRollNote[];
+    words?: readonly PianoRollWord[];
+    /** Length of the song, seconds. */
+    duration?: number;
+    /** Playback position, seconds. */
+    position?: number;
+    selected?: ReadonlySet<string>;
+    /** Horizontal zoom, 1 = a comfortable default; Ctrl + wheel changes it. */
+    zoom?: number;
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** Pitch range, lowest to highest MIDI note. */
+    minPitch?: number;
+    maxPitch?: number;
+    /** Keep the playhead in view while it moves. */
+    follow?: boolean;
+    /** Show the beat grid. */
+    grid?: boolean;
+    /** Seconds an arrow key moves a note. */
+    nudgeSeconds?: number;
+    onSelect?: (id: string, additive: boolean) => void;
+    onSelectArea?: (ids: string[], additive: boolean) => void;
+    onSeek?: (seconds: number) => void;
+    /** Offsets from the gesture start; cancellation sends zero offsets before `onNoteDragEnd`. */
+    onNoteDrag?: (gesture: PianoRollGesture) => void;
+    onNoteDragEnd?: () => void;
+    onNudge?: (id: string, pitch: number, seconds: number) => void;
+    /** Pressing a key, e.g. to hear its pitch. */
+    onKeyPress?: (midi: number) => void;
+    label?: string;
+}
+/**
+ * A melody editor: notes on a piano grid with the keyboard at the left, a ruler to seek, the
+ * syllables under the notes and the playhead. Drag a note to move it in time and pitch, drag its
+ * edges to change its length, drag on the empty grid to select an area, Ctrl + wheel to zoom.
+ */
+export declare const PianoRoll: ({ notes, words, duration, position, selected, zoom: zoomProp, defaultZoom, onZoomChange, minPitch, maxPitch, follow, grid, nudgeSeconds, onSelect, onSelectArea, onSeek, onNoteDrag, onNoteDragEnd, onNudge, onKeyPress, label, ...p }: PianoRollProps) => import("react").JSX.Element;

package/dist/components/editor/PianoRoll/styles.css

@@ -0,0 +1,186 @@
+/* Styles owned by PianoRoll: a scrolling piano grid; the keyboard and ruler stay in view, notes are
+   glossy capsules that glow when selected and flare under the playhead. */
+.ad-piano-roll {
+  --ad-roll-row: clamp(0.85rem, 2.2dvh, 1.35rem);
+  --ad-roll-keys: clamp(3rem, 7vw, 4.5rem);
+  position: relative;
+  min-width: 0;
+  min-height: 12rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.25);
+  border-radius: var(--ad-radius-lg, 1rem);
+  background: var(--ad-neutral-950);
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.ad-piano-roll-scroll {
+  display: grid;
+  grid-template-columns: var(--ad-roll-keys) max-content;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary-700) transparent;
+}
+.ad-piano-roll-corner {
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  background: var(--ad-neutral-900);
+}
+.ad-piano-roll-corner:first-child {
+  top: 0;
+  z-index: 5;
+}
+/* The corner beside the syllables stays with them at the bottom, covering the keyboard under it. */
+.ad-piano-roll-corner:has(+ .ad-piano-roll-words) {
+  bottom: 0;
+  z-index: 5;
+  border-top: 0.0625rem solid #ffffff14;
+}
+/* Ruler: seconds, the playhead mark; press to seek. */
+.ad-piano-roll-ruler {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  height: 1.5rem;
+  border-bottom: 0.0625rem solid #ffffff14;
+  background: linear-gradient(180deg, var(--ad-neutral-850), var(--ad-neutral-900));
+  cursor: pointer;
+}
+.ad-piano-roll-ruler > span {
+  position: absolute;
+  bottom: 0.1rem;
+  padding-left: 0.2rem;
+  border-left: 0.0625rem solid #ffffff22;
+  color: var(--ad-muted);
+  font-size: var(--ad-font-size-caption);
+  line-height: 1;
+}
+.ad-piano-roll-ruler > span[data-major] {
+  border-left-color: rgb(from var(--ad-primary) r g b / 0.6);
+  color: var(--ad-text);
+}
+.ad-piano-roll-head-mark {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.6rem;
+  translate: -50% 0;
+  background: var(--ad-primary);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.ad-piano-roll-keys.ad-piano-keyboard {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  height: calc(var(--ad-roll-row) * var(--ad-roll-rows));
+  min-height: 0;
+  border-radius: 0;
+}
+/* The grid: a shaded band for every black key, a line every second. */
+.ad-piano-roll-world {
+  position: relative;
+  height: calc(var(--ad-roll-row) * var(--ad-roll-rows));
+  cursor: crosshair;
+}
+.ad-piano-roll[data-grid] .ad-piano-roll-world {
+  background:
+    linear-gradient(90deg, #ffffff12 0.0625rem, transparent 0.0625rem) 0 0 / var(--ad-pps) 100%,
+    linear-gradient(#ffffff08 0.0625rem, transparent 0.0625rem) 0 0 / 100% var(--ad-roll-row);
+}
+.ad-piano-roll-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: var(--ad-roll-row);
+  background: #ffffff05;
+  pointer-events: none;
+}
+.ad-piano-roll-note {
+  position: absolute;
+  height: var(--ad-roll-row);
+}
+.ad-piano-roll-note-body {
+  position: absolute;
+  inset: 12% 0;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
+  box-shadow: inset 0 0.0625rem 0 #ffffff55, 0 0 0.4rem rgb(from var(--ad-primary) r g b / 0.45);
+  cursor: grab;
+  transition: filter 0.15s, box-shadow 0.15s;
+}
+.ad-piano-roll-note-body:active {
+  cursor: grabbing;
+}
+.ad-piano-roll-note-body:focus-visible {
+  outline: 0.125rem solid #fff;
+  outline-offset: 0.1rem;
+}
+.ad-piano-roll-note[data-selected] .ad-piano-roll-note-body {
+  box-shadow: inset 0 0 0 0.125rem #fff, 0 0 0.9rem var(--ad-primary);
+}
+.ad-piano-roll-note[data-now] .ad-piano-roll-note-body {
+  filter: brightness(1.35);
+}
+.ad-piano-roll-edge {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: max(0.35rem, 18%);
+  max-width: 0.6rem;
+  cursor: ew-resize;
+}
+.ad-piano-roll-edge[data-edge="start"] {
+  left: 0;
+}
+.ad-piano-roll-edge[data-edge="end"] {
+  right: 0;
+}
+.ad-piano-roll-area {
+  position: absolute;
+  display: none;
+  border: 0.0625rem dashed var(--ad-secondary-100);
+  background: rgb(from var(--ad-primary) r g b / 0.12);
+  pointer-events: none;
+}
+.ad-piano-roll-playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.125rem;
+  translate: -50% 0;
+  background: #fff;
+  box-shadow: 0 0 0.6rem #fff, 0 0 1rem var(--ad-primary);
+  pointer-events: none;
+}
+/* Syllables under the notes: sung ones dim, the current one lights up. */
+.ad-piano-roll-words {
+  position: sticky;
+  bottom: 0;
+  z-index: 3;
+  height: 1.6rem;
+  border-top: 0.0625rem solid #ffffff14;
+  background: var(--ad-neutral-900);
+}
+.ad-piano-roll-words > span {
+  position: absolute;
+  top: 0.25rem;
+  overflow: hidden;
+  padding-left: 0.2rem;
+  border-left: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.4);
+  color: var(--ad-text);
+  font-size: var(--ad-font-size-caption);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ad-piano-roll-words > span[data-sung] {
+  color: var(--ad-muted);
+}
+.ad-piano-roll-words > span[data-now] {
+  color: var(--ad-secondary-100);
+  text-shadow: 0 0 0.4rem var(--ad-primary);
+}

package/dist/components/editor/shared.css

@@ -0,0 +1 @@
+/* Shared only by sibling components. */

package/dist/components/effects/AnimatedBorder/AnimatedBorder.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface AnimatedBorderProps extends CommonProps {
+    as?: ElementType;
+    children?: ReactNode;
+    shell?: boolean;
+    round?: boolean;
+}
+export declare function AnimatedBorder({ as, shell, round, children, ...props }: AnimatedBorderProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/AnimatedBorder/styles.css

@@ -0,0 +1,7 @@
+/* AnimatedBorder owns only the decoration host. Layout stays with the consumer. */
+.ad-animated-border {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  border-radius: inherit;
+}

package/dist/components/effects/Beacon/Beacon.d.ts

@@ -0,0 +1,9 @@
+import { type CommonProps } from "../../../core/base";
+export interface BeaconProps extends CommonProps {
+    /** Rings run only while active. */
+    active?: boolean;
+    /** Ring colour; defaults to the theme accent. */
+    color?: string;
+}
+/** Radar rings spreading from behind the content, to draw attention to it. */
+export declare function Beacon({ active, color, style, children, ...p }: BeaconProps): import("react").JSX.Element;

package/dist/components/effects/Beacon/styles.css

@@ -0,0 +1,38 @@
+/* Styles owned by Beacon. */
+.ad-beacon {
+  --ad-beacon: var(--ad-red);
+  position: relative;
+  contain: layout;
+  display: inline-grid;
+  place-items: center;
+  isolation: isolate;
+}
+.ad-beacon > i {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: 50%;
+  border: 0.125rem solid var(--ad-beacon);
+  box-shadow: 0 0 1rem var(--ad-beacon);
+  opacity: 0;
+  pointer-events: none;
+}
+.ad-beacon[data-active] > i {
+  animation: ad-beacon-ring 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
+}
+.ad-beacon[data-active] > i:nth-child(2) {
+  animation-delay: 0.8s;
+}
+.ad-beacon[data-active] > i:nth-child(3) {
+  animation-delay: 1.6s;
+}
+@keyframes ad-beacon-ring {
+  from {
+    opacity: 0.85;
+    scale: 0.9;
+  }
+  to {
+    opacity: 0;
+    scale: 2.2;
+  }
+}

package/dist/components/effects/Equalizer/Equalizer.d.ts

@@ -0,0 +1,14 @@
+import { type CommonProps } from "../../../core/base";
+export interface EqualizerProps extends CommonProps {
+    /** Number of bars. */
+    bars?: number;
+    /** Bars move only while playing. */
+    playing?: boolean;
+    /** Bar heights 0–1 from a live spectrum; they replace the built-in bounce. */
+    levels?: readonly number[];
+    /** Shifts the bounce, in seconds, so neighbouring equalizers do not move in step. */
+    phase?: number;
+    label?: string;
+}
+/** "Now playing" bars that bounce at different tempos. */
+export declare function Equalizer({ bars, playing, levels, phase, label, ...p }: EqualizerProps): import("react").JSX.Element;

package/dist/components/effects/Equalizer/styles.css

@@ -0,0 +1,38 @@
+/* Styles owned by Equalizer. Size follows the font size. */
+.ad-equalizer {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: 0.15em;
+  height: 1.25em;
+}
+.ad-equalizer > i {
+  width: 0.22em;
+  height: 100%;
+  border-radius: 999rem;
+  background: linear-gradient(0deg, var(--ad-primary), var(--ad-secondary-100));
+  box-shadow: 0 0 0.35em rgb(from var(--ad-primary) r g b / 0.53);
+  transform-origin: bottom;
+  scale: 1 0.25;
+  transition: scale 0.3s;
+}
+.ad-equalizer[data-playing] > i {
+  animation: ad-eq-bounce 0.8s ease-in-out infinite alternate;
+}
+@keyframes ad-eq-bounce {
+  0% {
+    scale: 1 0.2;
+  }
+  40% {
+    scale: 1 0.9;
+  }
+  70% {
+    scale: 1 0.45;
+  }
+  100% {
+    scale: 1 1;
+  }
+}
+/* Driven by a live spectrum: the bars follow it closely instead of bouncing. */
+.ad-equalizer[data-live] > i {
+  transition: scale 0.08s linear;
+}

package/dist/components/effects/GlowText/GlowText.d.ts

@@ -0,0 +1,9 @@
+import { type ElementType } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface GlowTextProps extends CommonProps {
+    as?: ElementType;
+    /** Flicker now and then like a neon sign. */
+    flicker?: boolean;
+}
+/** Neon text: a gradient flows through the letters under a soft halo. */
+export declare function GlowText({ as, flicker, children, ...p }: GlowTextProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/effects/GlowText/styles.css

@@ -0,0 +1,56 @@
+/* Styles owned by GlowText. */
+.ad-glow-text {
+  display: inline-block;
+  margin: 0;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  color: transparent;
+  background: linear-gradient(
+      100deg,
+      var(--ad-primary),
+      var(--ad-secondary-200) 30%,
+      #fff 45%,
+      var(--ad-secondary-200) 60%,
+      var(--ad-primary) 80%,
+      var(--ad-primary)
+    )
+    0 0 / 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  position: relative;
+  isolation: isolate;
+  animation: ad-glow-flow 5s linear infinite;
+}
+.ad-glow-text-halo {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  color: transparent;
+  text-shadow: 0 0 0.35em rgb(from var(--ad-primary) r g b / 0.53), 0 0 1em rgb(from var(--ad-primary) r g b / 0.27);
+  pointer-events: none;
+  user-select: none;
+  will-change: transform;
+}
+.ad-glow-text[data-flicker] {
+  animation:
+    ad-glow-flow 5s linear infinite,
+    ad-glow-flicker 4.5s steps(1, end) infinite;
+}
+@keyframes ad-glow-flow {
+  to {
+    background-position: -250% 0;
+  }
+}
+@keyframes ad-glow-flicker {
+  0%,
+  41%,
+  44%,
+  47%,
+  100% {
+    opacity: 1;
+  }
+  42%,
+  46% {
+    opacity: 0.35;
+  }
+}

package/dist/components/effects/ImageShine/ImageShine.d.ts

@@ -0,0 +1,13 @@
+import { type CommonProps } from "../../../core/base";
+export interface ImageShineProps extends CommonProps {
+    /** A picture with transparency (an icon, a logo): the light runs over its visible pixels only. */
+    src: string;
+    /** Breathe and glow around the picture as well. */
+    glow?: boolean;
+    label?: string;
+}
+/**
+ * A band of light sweeps across a picture's shape, as on a polished badge; the picture breathes.
+ * Built from stacked layers that only move and fade, so the browser composites it on the GPU.
+ */
+export declare function ImageShine({ src, glow, label, style, ...p }: ImageShineProps): import("react").JSX.Element;