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

package/dist/components/layout/shared.css

@@ -0,0 +1,79 @@
+/* Shared only by sibling components. */
+.ad {
+  font-family: inherit;
+  color: var(--ad-text);
+}
+/* Ruby and tile remain intentionally dark in a light theme, so their inherited copy stays light. */
+:is([data-ad-material="ruby"], [data-ad-material="tile"]) {
+  --ad-text: var(--ad-on-accent);
+  --ad-muted: var(--ad-on-accent-muted);
+}
+[data-ad-material="shell"] {
+  --ad-material-bg: var(--ad-surface-shell);
+  --ad-material-shadow: var(--ad-shadow-shell);
+}
+[data-ad-material="card"] {
+  --ad-material-bg: var(--ad-surface-card);
+  --ad-material-shadow: var(--ad-shadow-card);
+}
+[data-ad-material="glass"] {
+  --ad-material-bg: var(--ad-surface-glass);
+  --ad-material-shadow: var(--ad-shadow-glass);
+}
+[data-ad-material="ruby"] {
+  --ad-material-bg: var(--ad-surface-ruby);
+  --ad-material-shadow: var(--ad-shadow-ruby);
+}
+[data-ad-material="tile"] {
+  --ad-material-bg: var(--ad-surface-tile);
+  --ad-material-shadow: var(--ad-shadow-tile);
+}
+[data-ad-material="input"] {
+  --ad-material-bg: var(--ad-surface-input);
+  --ad-material-shadow: var(--ad-shadow-input);
+}
+[data-ad-material="dialog"] {
+  --ad-material-bg: var(--ad-surface-dialog);
+  --ad-material-shadow: var(--ad-shadow-dialog);
+}
+.ad-surface,
+.ad-card {
+  position: relative;
+  border-radius: 1.125rem;
+  isolation: isolate;
+}
+.ad-surface:not(.ad-card) {
+  padding: 1.25rem;
+}
+.ad-header-copy {
+  min-width: 0;
+  flex: 1;
+}
+.ad-header-copy p {
+  color: var(--ad-muted);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  margin: 0.3125rem 0 0;
+}
+.ad-header-actions {
+  margin-left: auto;
+}
+.ad-toolbar,
+.ad-button-group {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+}
+.ad-collapsible-section summary > .ad-icon:last-child {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+.ad-collapsible-section[open] summary > .ad-icon:last-child {
+  transform: rotate(180deg);
+}
+
+/* Vector artwork is drawn in ruby; it turns to the theme hue. */
+:is(.ad-illustration, .ad-brand-mark, .ad-host-seal) svg {
+  filter: hue-rotate(var(--ad-hue-shift, 0deg));
+}

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

@@ -0,0 +1,64 @@
+import type { ElementType, ReactNode } from "react";
+import { type CommonProps, type Material, type VectorNode } from "../../core/base";
+import iconData from "../../artwork/icons.json";
+import artworkData from "../../artwork/illustrations.json";
+export type IconName = keyof typeof iconData;
+export declare const icons: Record<string, VectorNode>;
+export declare const illustrations: Record<string, VectorNode>;
+export interface IconProps extends Omit<CommonProps, "size"> {
+    name?: IconName | string;
+    /** xs/sm/md/lg, a CSS length, or pixels converted to rem at the 16px design baseline. */
+    size?: number | string;
+    label?: string;
+    surface?: "none" | "tile";
+}
+export interface TextProps extends CommonProps {
+    as?: ElementType;
+    variant?: "muted" | "eyebrow" | "body" | "title";
+    text?: string;
+}
+export interface HeaderProps extends CommonProps {
+    as?: "header" | "div";
+    level?: 1 | 2 | 3 | 4;
+    title?: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    icon?: IconName | string;
+    actions?: ReactNode;
+    compact?: boolean;
+}
+export interface CardProps extends CommonProps, Omit<HeaderProps, "as"> {
+    as?: "section" | "div" | "article";
+    border?: boolean;
+    shell?: boolean;
+    padding?: "none" | "sm" | "md" | "lg";
+    material?: Material;
+}
+export interface AvatarProps extends CommonProps {
+    name?: string;
+    /** Initials in a turning ring, or the animated host seal with a crown. */
+    variant?: "initials" | "host";
+    /** Photo shown in place of the initials, or inside the host seal instead of its crown. */
+    src?: string;
+    /** Short tag on the lower edge of the ring, e.g. "ГОСТЬ". */
+    badge?: string;
+    /** A dot on the ring: online, busy (e.g. singing in a room) or offline. */
+    presence?: "online" | "busy" | "offline";
+}
+export interface TabPanelProps extends CommonProps {
+    labelledBy?: string;
+    hidden?: boolean;
+}
+export interface ScrollAreaProps extends CommonProps {
+    height?: number | string;
+    label?: string;
+}
+export interface DividerProps extends CommonProps {
+    vertical?: boolean;
+}
+export interface IllustrationProps extends CommonProps {
+    variant?: keyof typeof artworkData;
+    label?: string;
+    framed?: boolean;
+    fit?: "contain" | "cover";
+}

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

@@ -0,0 +1,2 @@
+import type { AudioPlayerProps } from "../shared";
+export declare const AudioPlayer: (p: AudioPlayerProps) => import("react").JSX.Element;

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

@@ -0,0 +1,86 @@
+/* Styles owned by AudioPlayer: while playing, rings of light pulse out of the play button. */
+.ad-audio-player {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: clamp(0.75rem, 2vw, 1.25rem);
+  min-width: 0;
+  padding: 0.75rem clamp(0.75rem, 2vw, 1.1rem);
+  border-radius: calc(var(--ad-radius) * 1.2);
+  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.2);
+  background:
+    radial-gradient(40% 120% at 0 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%),
+    linear-gradient(180deg, var(--ad-neutral-850), var(--ad-neutral-900));
+  box-shadow: inset 0 0.0625rem 0 #ffffff0f;
+}
+.ad-player-play {
+  position: relative;
+  display: grid;
+  flex: none;
+}
+.ad-player-play > .ad-icon-button {
+  --ad-size-h: 3rem;
+  width: 3rem;
+  height: 3rem;
+}
+.ad-player-play::before,
+.ad-player-play::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 0.0625rem solid var(--ad-secondary);
+  opacity: 0;
+  pointer-events: none;
+}
+.ad-audio-player[data-playing] .ad-player-play::before,
+.ad-audio-player[data-playing] .ad-player-play::after {
+  animation: ad-player-wave 1.8s ease-out infinite;
+}
+.ad-audio-player[data-playing] .ad-player-play::after {
+  animation-delay: 0.9s;
+}
+.ad-player-track {
+  flex: 1 1 4rem;
+  min-width: 0;
+  display: grid;
+  gap: 0.15rem;
+}
+.ad-player-times {
+  display: flex;
+  justify-content: space-between;
+}
+.ad-time {
+  white-space: nowrap;
+  font-size: 0.6875rem;
+  color: var(--ad-muted);
+  font-variant-numeric: tabular-nums;
+}
+.ad-player-volume {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex: 0 1 9rem;
+  min-width: 0;
+}
+.ad-player-volume > .ad-slider-field {
+  flex: 1;
+  min-width: 0;
+}
+.ad-player-volume .ad-slider {
+  width: 100%;
+}
+.ad-player-volume > [data-muted] {
+  color: var(--ad-muted);
+  opacity: 0.6;
+}
+@keyframes ad-player-wave {
+  from {
+    opacity: 0.8;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 1.7;
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface LyricWord {
+    id: string;
+    text: string;
+    /** How much of the word is sung, 0–1; it fills left to right. */
+    progress?: number;
+}
+export interface KaraokeLyricsProps extends CommonProps {
+    /** The line being sung now. */
+    current?: readonly LyricWord[];
+    /** The line after it, dimmed below. */
+    next?: readonly LyricWord[];
+    /** Shown in place of the current line, e.g. a countdown before it. */
+    message?: ReactNode;
+    /** Keys of the lines: a new key fades the line in, the same key keeps it in place. */
+    currentKey?: string | number;
+    nextKey?: string | number;
+    /** The music's percussion, 0–1: the line swells and glows with the kick and flashes with the snare. */
+    kick?: number;
+    snare?: number;
+    pulse?: number;
+}
+/** Karaoke lyrics: the current line fills as it is sung and breathes with the drums; the next one waits below. */
+export declare const KaraokeLyrics: ({ current, next, message, currentKey, nextKey, kick, snare, pulse, ...p }: KaraokeLyricsProps) => import("react").JSX.Element;

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

@@ -0,0 +1,56 @@
+/* Styles owned by KaraokeLyrics: big filling words in the theme's colours, swelling with the drums. */
+.ad-karaoke-lyrics {
+  --ad-lyric-kick: 0;
+  --ad-lyric-snare: 0;
+  --ad-lyric-pulse: 0;
+  display: grid;
+  justify-items: center;
+  gap: 0.4em;
+  padding-inline: 7%;
+  text-align: center;
+  text-shadow: 0 0.2rem 1rem #000;
+  pointer-events: none;
+}
+.ad-karaoke-lyrics > p {
+  margin: 0;
+  animation: ad-lyric-in 0.22s ease both;
+}
+.ad-lyrics-current {
+  font: 750 clamp(1.75rem, 1rem + 3.2vw, 3.25rem) / 1.15 var(--ad-font-family-heading);
+  letter-spacing: -0.02em;
+  min-block-size: 1.15em;
+  filter:
+    brightness(calc(1.08 + var(--ad-lyric-pulse) * 0.28))
+    saturate(calc(1.04 + var(--ad-lyric-kick) * 0.22))
+    drop-shadow(0 0 calc(0.15rem + var(--ad-lyric-snare) * 0.25rem) rgb(255 238 244 / calc(0.28 + var(--ad-lyric-snare) * 0.4)))
+    drop-shadow(0 0 calc(0.2rem + var(--ad-lyric-kick) * 0.4rem) rgb(from var(--ad-primary) r g b / calc(0.3 + var(--ad-lyric-kick) * 0.36)));
+  transition: filter 55ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ad-lyrics-current[data-message] {
+  color: #fff;
+}
+.ad-lyrics-next {
+  min-block-size: 1.2em;
+  color: rgb(255 255 255 / 0.45);
+  font: 500 clamp(1rem, 0.7rem + 1.4vw, 1.6rem) / 1.2 var(--ad-font-family-heading);
+}
+/* A word fills with the theme's glowing gradient as it is sung; the rest stays white. */
+.ad-lyrics-current .ad-lyric-word {
+  color: transparent;
+  background-image:
+    linear-gradient(180deg, #fff 0%, var(--ad-secondary-100) 18%, var(--ad-primary) 62%, var(--ad-secondary) 100%),
+    linear-gradient(#fff, #fff);
+  background-size: var(--ad-lyric-fill, 0%) 100%, 100% 100%;
+  background-position: left, left;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: none;
+}
+@keyframes ad-lyric-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.3em);
+  }
+}

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

@@ -0,0 +1,7 @@
+import { type LevelMeterProps } from "../shared";
+/**
+ * Live input level as a scrolling mirrored wave. Feed it a changing `value` (0–100) or hand
+ * it a `stream` (e.g. from getUserMedia) and it listens by itself. The wave is redrawn
+ * outside React on every display refresh, so it never re-renders at the animation rate.
+ */
+export declare function LevelMeter({ value, stream, active, compact, label, ...p }: LevelMeterProps): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+/* Styles owned by LevelMeter: a glowing mirrored wave scrolls along a faint axis; muted, it dims. */
+.ad-level-meter {
+  position: relative;
+  width: 100%;
+  height: clamp(2rem, 1.6rem + 1vw, 3rem);
+  overflow: hidden;
+}
+.ad-level-meter > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  filter: drop-shadow(
+    0 0 0.22rem color-mix(in srgb, var(--ad-red) 78%, transparent)
+  );
+}
+.ad-level-meter-axis {
+  stroke: color-mix(in srgb, var(--ad-red) 24%, transparent);
+  stroke-width: 0.7;
+}
+.ad-level-meter-wave {
+  transition: opacity 0.18s ease;
+}
+.ad-level-meter[data-active="false"] .ad-level-meter-wave {
+  opacity: 0.28;
+}
+.ad-level-meter[data-compact] {
+  width: 4.6rem;
+  height: 1.45rem;
+  border-radius: 999rem;
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export interface MediaCardProps extends CommonProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Cover picture; without it an equalizer dances behind the card. */
+    image?: string;
+    /** Bar heights 0–1 from a live spectrum for the equalizer cover; without them it bounces on its own. */
+    levels?: readonly number[];
+    /** Shifts the equalizer's bounce so neighbouring cards do not move in step. */
+    phase?: number;
+    /** A status mark in the top corner. */
+    badge?: ReactNode;
+    /** Round buttons in the glass pill at the bottom. */
+    actions?: ReactNode;
+    /** Lean toward the pointer with a glossy glare; a number sets the largest lean in degrees. */
+    tilt?: boolean | number;
+}
+/**
+ * A song, album or take as a card: its cover (or a dancing equalizer) fills the card, the title and
+ * a status sit on top, the actions ride in a glass pill at the bottom; children go into the pill
+ * before the actions (e.g. a progress read-out).
+ */
+export declare function MediaCard({ title, subtitle, image, levels, phase, badge, actions, tilt, children, ...p }: MediaCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,108 @@
+/* Styles owned by MediaCard: the cover fills the card under a dark gradient, the equalizer stands in
+   for a missing cover, the actions float in a glass pill. The card fills the height it is given. */
+.ad-media-card,
+.ad-media-card > .ad-tilt,
+.ad-media-card-card.ad-card {
+  height: 100%;
+  min-width: 0;
+}
+.ad-media-card-card.ad-card {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  transition: transform 0.18s var(--ad-ease-standard);
+}
+.ad-media-card-card.ad-card:hover {
+  transform: translateY(-0.2rem);
+}
+.ad-media-card-image {
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  object-position: center 28%;
+  transition: transform 0.42s var(--ad-ease-standard), filter 0.24s;
+}
+.ad-media-card-card:hover .ad-media-card-image {
+  filter: saturate(1.12) contrast(1.04);
+  transform: scale(1.045);
+}
+.ad-media-card-card[data-image]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(180deg, rgb(from var(--ad-neutral-950) r g b / 0.68), transparent 42%),
+    linear-gradient(0deg, rgb(from var(--ad-neutral-950) r g b / 0.76), rgb(from var(--ad-neutral-950) r g b / 0.28) 48%, transparent 74%);
+}
+.ad-media-card-art {
+  position: absolute;
+  inset: 15% 0 0;
+  z-index: -1;
+  display: flex;
+  opacity: 0.25;
+  mask-image:
+    linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
+    linear-gradient(180deg, transparent, #000 14%, #000 88%, transparent);
+  mask-composite: intersect;
+  transition: opacity 0.18s;
+  pointer-events: none;
+}
+.ad-media-card-card[data-image] .ad-media-card-art {
+  opacity: 0.18;
+}
+.ad-media-card-card:hover .ad-media-card-art {
+  opacity: 0.32;
+}
+.ad-media-card-art > .ad-equalizer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 0.35rem;
+  padding-inline: 0.75rem;
+}
+.ad-media-card-art > .ad-equalizer > i {
+  flex: 1;
+  width: auto;
+}
+.ad-media-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ad-space-3);
+  block-size: 100%;
+  box-sizing: border-box;
+  padding: clamp(0.85rem, 1.2vw, 1.25rem);
+}
+.ad-media-card-head {
+  display: flex;
+  gap: var(--ad-space-2);
+  align-items: flex-start;
+  justify-content: space-between;
+  min-inline-size: 0;
+}
+.ad-media-card-card[data-image] .ad-media-card-head {
+  text-shadow: 0 0.0625rem 0.125rem #000, 0 0 0.7rem #000c;
+}
+.ad-media-card-title {
+  display: grid;
+  flex: 1;
+  gap: 0.18rem;
+  min-inline-size: 0;
+}
+.ad-media-card-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ad-space-2);
+  inline-size: fit-content;
+  max-inline-size: 100%;
+  margin-block-start: auto;
+  padding: 0.22rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.2);
+  border-radius: var(--ad-radius-pill);
+  background: rgb(from var(--ad-neutral-950) r g b / 0.6);
+  backdrop-filter: blur(0.9rem) saturate(1.25);
+}

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

@@ -0,0 +1,48 @@
+import { type CommonProps } from "../../../core/base";
+export interface MelodyNote {
+    id: string;
+    /** Seconds. */
+    start: number;
+    end: number;
+    /** MIDI pitch: 60 is C4. */
+    pitch: number;
+    /** Syllable sung on the note. */
+    lyric?: string;
+}
+export interface MelodyRollProps extends CommonProps {
+    notes?: readonly MelodyNote[];
+    /** Playback position, seconds. */
+    position?: number;
+    /** Seconds shown across the lane; the wheel zooms it when uncontrolled or with `onWindowChange`. */
+    window?: number;
+    defaultWindow?: number;
+    onWindowChange?: (seconds: number) => void;
+    /** Where the playhead sits across the lane, 0–1. */
+    lead?: number;
+    /** Pitch range shown; by default the notes' own range with a little air. */
+    minPitch?: number;
+    maxPitch?: number;
+    /** The singer's pitch now, as a fractional MIDI note; nothing when silent. */
+    livePitch?: number;
+    /** How close the singer is to the note under the playhead, 0–1: colours the voice marker. */
+    accuracy?: number;
+    /** The singer is on the right note now: marker and key turn green. */
+    hit?: boolean;
+    /** Notes already sung right: they turn green with a burst. */
+    hitIds?: ReadonlySet<string>;
+    /** Loudness of the voice, 0–1: the marker swells with it. */
+    level?: number;
+    /** Pulse of the music, 0–1 (e.g. the kick drum): the playhead and lane flash with it. */
+    beat?: number;
+    /** Syllables inside the notes. */
+    showLyrics?: boolean;
+    /** Pressing a key, e.g. to hear its pitch. */
+    onKeyPress?: (midi: number) => void;
+    label?: string;
+}
+/**
+ * The karaoke melody lane: notes glide towards the playhead, the singer's voice is a marker that
+ * leaves a trail, notes sung right flash green, and the lane breathes with the music. The keyboard
+ * on the left shows which key the voice is on. Scroll the wheel to zoom in or out in time.
+ */
+export declare const MelodyRoll: ({ notes, position, window: windowProp, defaultWindow, onWindowChange, lead, minPitch, maxPitch, livePitch, accuracy, hit, hitIds, level, beat, showLyrics, onKeyPress, label, ...p }: MelodyRollProps) => import("react").JSX.Element;