@neo-ui-kit/react 1.0.0 → 1.0.1

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

@@ -1,30 +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;
-}
+/* 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/MelodyRoll/styles.css

@@ -1,196 +1,196 @@
-/* Styles owned by MelodyRoll: a dark glass lane with a semitone and seconds grid; notes glide in,
-   flash green when sung right; the playhead and lane breathe with the music. */
-.ad-melody-roll {
-  --ad-roll-keys: clamp(2.75rem, 8%, 4.5rem);
-  position: relative;
-  display: grid;
-  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
-  width: 100%;
-  height: 100%;
-  min-height: 8rem;
-  overflow: hidden;
-  isolation: isolate;
-  /* Room for the hairline edge that the glass layer below draws. */
-  padding: 0.0625rem;
-  border-radius: var(--ad-radius-lg, 1rem);
-  box-shadow: 0 0 calc(var(--ad-roll-beat) * 1.6rem) rgb(from var(--ad-primary) r g b / 0.25);
-  transition: box-shadow 0.12s;
-}
-/* The glass: its own still layer, so the frosted backdrop is never redrawn by the beat or by the
-   notes moving over it. */
-.ad-melody-roll::before,
-.ad-melody-roll::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.18);
-  border-radius: inherit;
-  pointer-events: none;
-}
-.ad-melody-roll::before {
-  background:
-    radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.05), transparent 70%),
-    linear-gradient(180deg, rgb(from var(--ad-neutral-950) r g b / 0.72), rgb(from var(--ad-neutral-900) r g b / 0.6));
-  box-shadow: inset 0 0.0625rem 0 #ffffff12;
-  backdrop-filter: blur(0.5rem);
-}
-/* The beat: a brighter edge and a warmer light over the glass, faded in with the music. */
-.ad-melody-roll::after {
-  border-color: rgb(from var(--ad-primary) r g b / 0.35);
-  background: radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%);
-  opacity: var(--ad-roll-beat);
-  transition: opacity 0.12s;
-  will-change: opacity;
-}
-.ad-melody-roll-keys.ad-piano-keyboard {
-  min-height: 0;
-  z-index: 2;
-}
-.ad-melody-roll-lane {
-  position: relative;
-  container-type: size;
-  overflow: hidden;
-  border-left: 0.0625rem solid #ffffff22;
-  /* One line per semitone; the second lines scroll with the song on a layer of their own. */
-  background: linear-gradient(#ffffff0d 0.0625rem, transparent 0.0625rem) 0 0 / 100% calc(100% / var(--ad-roll-rows));
-}
-/* One line per second, a second wider than the lane, slid back by the song's fraction of a second. */
-.ad-melody-roll-seconds {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: calc(100cqw + var(--ad-roll-second));
-  background: linear-gradient(90deg, #ffffff0a 0.0625rem, transparent 0.0625rem) 0 0 / var(--ad-roll-second) 100%;
-  transform: translateX(var(--ad-roll-shift));
-  will-change: transform;
-  pointer-events: none;
-}
-.ad-melody-roll-strip {
-  position: absolute;
-  inset: 0;
-  will-change: transform;
-}
-/* A note: a glossy capsule in the theme colours. */
-.ad-melody-note {
-  position: absolute;
-  /* Three quarters of a semitone row, centred in it. */
-  height: calc(100% / var(--ad-roll-rows) * 0.76);
-  translate: 0 15.8%;
-  border-radius: 999px;
-  background-image: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
-  box-shadow: inset 0 0.0625rem 0 #ffffff55;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  transition:
-    filter 0.2s,
-    opacity 0.3s;
-}
-.ad-melody-note > span {
-  padding-inline: 0.4em;
-  color: #fff;
-  font: 600 clamp(0.5rem, 1.6cqh, 0.75rem) / 1 var(--ad-font-family-sans);
-  white-space: nowrap;
-  text-shadow: 0 0 0.3em #0008;
-}
-/* Under the playhead: brighter, lifted. */
-.ad-melody-note[data-now] {
-  filter: brightness(1.3) drop-shadow(0 0 0.4rem var(--ad-primary));
-}
-.ad-melody-note[data-past]:not([data-hit]) {
-  opacity: 0.45;
-}
-/* Sung right: green with a burst of light. */
-.ad-melody-note[data-hit] {
-  background-image: linear-gradient(90deg, #55ff9a, #16d875);
-  filter: drop-shadow(0 0 0.45rem #32ff8ff0) drop-shadow(0 0 1.1rem #32ff8f99);
-  animation: ad-melody-hit 0.62s ease-out;
-}
-@keyframes ad-melody-hit {
-  28% {
-    filter: brightness(1.9) drop-shadow(0 0 1.2rem #32ff8f);
-    scale: 1 1.6;
-  }
-}
-.ad-melody-trail {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-.ad-melody-trail > path {
-  fill: none;
-  stroke: color-mix(in oklch, var(--ad-secondary-100), #3dff91 calc(var(--ad-roll-accuracy) * 100%));
-  stroke-width: 0.15rem;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  opacity: 0.75;
-}
-/* The trail's glow without a filter: two wider, faint copies of the line under it, so the
-   growing trail is never re-blurred. */
-.ad-melody-trail > path[data-halo] {
-  stroke: currentColor;
-}
-.ad-melody-trail > path[data-halo="wide"] {
-  stroke-width: calc(0.15rem + 0.5rem);
-  opacity: 0.1;
-}
-.ad-melody-trail > path[data-halo="near"] {
-  stroke-width: calc(0.15rem + 0.25rem);
-  opacity: 0.22;
-}
-.ad-melody-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);
-}
-/* The playhead flares on the beat: a wider glow, drawn once, faded in. */
-.ad-melody-playhead::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  box-shadow:
-    0 0 1.6rem #fff,
-    0 0 2.6rem var(--ad-primary);
-  opacity: var(--ad-roll-beat);
-  will-change: opacity;
-}
-/* The singer's voice: grows with loudness, greens with accuracy. */
-.ad-melody-voice {
-  --ad-voice: calc(0.95rem + var(--ad-roll-level) * 0.7rem);
-  position: absolute;
-  z-index: 3;
-  width: var(--ad-voice);
-  height: var(--ad-voice);
-  translate: -50% -50%;
-  border: 0.125rem solid #fff;
-  border-radius: 50%;
-  background: color-mix(in oklch, #fff, #2ee886 calc(var(--ad-roll-accuracy) * 100%));
-  box-shadow:
-    0 0 0 0.2rem #ffffff22,
-    0 0 calc(0.5rem + var(--ad-roll-accuracy) * 1rem) rgb(46 232 134 / calc(0.2 + var(--ad-roll-accuracy) * 0.7));
-  transition:
-    top 0.08s linear,
-    width 0.08s,
-    height 0.08s,
-    background 0.08s;
-}
-.ad-melody-voice[data-hit] {
-  background: #4dffa0;
-  animation: ad-melody-voice-hit 0.42s ease-out;
-}
-@keyframes ad-melody-voice-hit {
-  45% {
-    scale: 1.35;
-  }
-}
+/* Styles owned by MelodyRoll: a dark glass lane with a semitone and seconds grid; notes glide in,
+   flash green when sung right; the playhead and lane breathe with the music. */
+.ad-melody-roll {
+  --ad-roll-keys: clamp(2.75rem, 8%, 4.5rem);
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--ad-roll-keys) minmax(0, 1fr);
+  width: 100%;
+  height: 100%;
+  min-height: 8rem;
+  overflow: hidden;
+  isolation: isolate;
+  /* Room for the hairline edge that the glass layer below draws. */
+  padding: 0.0625rem;
+  border-radius: var(--ad-radius-lg, 1rem);
+  box-shadow: 0 0 calc(var(--ad-roll-beat) * 1.6rem) rgb(from var(--ad-primary) r g b / 0.25);
+  transition: box-shadow 0.12s;
+}
+/* The glass: its own still layer, so the frosted backdrop is never redrawn by the beat or by the
+   notes moving over it. */
+.ad-melody-roll::before,
+.ad-melody-roll::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.18);
+  border-radius: inherit;
+  pointer-events: none;
+}
+.ad-melody-roll::before {
+  background:
+    radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.05), transparent 70%),
+    linear-gradient(180deg, rgb(from var(--ad-neutral-950) r g b / 0.72), rgb(from var(--ad-neutral-900) r g b / 0.6));
+  box-shadow: inset 0 0.0625rem 0 #ffffff12;
+  backdrop-filter: blur(0.5rem);
+}
+/* The beat: a brighter edge and a warmer light over the glass, faded in with the music. */
+.ad-melody-roll::after {
+  border-color: rgb(from var(--ad-primary) r g b / 0.35);
+  background: radial-gradient(80% 120% at 25% 50%, rgb(from var(--ad-primary) r g b / 0.12), transparent 70%);
+  opacity: var(--ad-roll-beat);
+  transition: opacity 0.12s;
+  will-change: opacity;
+}
+.ad-melody-roll-keys.ad-piano-keyboard {
+  min-height: 0;
+  z-index: 2;
+}
+.ad-melody-roll-lane {
+  position: relative;
+  container-type: size;
+  overflow: hidden;
+  border-left: 0.0625rem solid #ffffff22;
+  /* One line per semitone; the second lines scroll with the song on a layer of their own. */
+  background: linear-gradient(#ffffff0d 0.0625rem, transparent 0.0625rem) 0 0 / 100% calc(100% / var(--ad-roll-rows));
+}
+/* One line per second, a second wider than the lane, slid back by the song's fraction of a second. */
+.ad-melody-roll-seconds {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: calc(100cqw + var(--ad-roll-second));
+  background: linear-gradient(90deg, #ffffff0a 0.0625rem, transparent 0.0625rem) 0 0 / var(--ad-roll-second) 100%;
+  transform: translateX(var(--ad-roll-shift));
+  will-change: transform;
+  pointer-events: none;
+}
+.ad-melody-roll-strip {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+/* A note: a glossy capsule in the theme colours. */
+.ad-melody-note {
+  position: absolute;
+  /* Three quarters of a semitone row, centred in it. */
+  height: calc(100% / var(--ad-roll-rows) * 0.76);
+  translate: 0 15.8%;
+  border-radius: 999px;
+  background-image: linear-gradient(90deg, var(--ad-primary), var(--ad-secondary));
+  box-shadow: inset 0 0.0625rem 0 #ffffff55;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  transition:
+    filter 0.2s,
+    opacity 0.3s;
+}
+.ad-melody-note > span {
+  padding-inline: 0.4em;
+  color: #fff;
+  font: 600 clamp(0.5rem, 1.6cqh, 0.75rem) / 1 var(--ad-font-family-sans);
+  white-space: nowrap;
+  text-shadow: 0 0 0.3em #0008;
+}
+/* Under the playhead: brighter, lifted. */
+.ad-melody-note[data-now] {
+  filter: brightness(1.3) drop-shadow(0 0 0.4rem var(--ad-primary));
+}
+.ad-melody-note[data-past]:not([data-hit]) {
+  opacity: 0.45;
+}
+/* Sung right: green with a burst of light. */
+.ad-melody-note[data-hit] {
+  background-image: linear-gradient(90deg, #55ff9a, #16d875);
+  filter: drop-shadow(0 0 0.45rem #32ff8ff0) drop-shadow(0 0 1.1rem #32ff8f99);
+  animation: ad-melody-hit 0.62s ease-out;
+}
+@keyframes ad-melody-hit {
+  28% {
+    filter: brightness(1.9) drop-shadow(0 0 1.2rem #32ff8f);
+    scale: 1 1.6;
+  }
+}
+.ad-melody-trail {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.ad-melody-trail > path {
+  fill: none;
+  stroke: color-mix(in oklch, var(--ad-secondary-100), #3dff91 calc(var(--ad-roll-accuracy) * 100%));
+  stroke-width: 0.15rem;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  opacity: 0.75;
+}
+/* The trail's glow without a filter: two wider, faint copies of the line under it, so the
+   growing trail is never re-blurred. */
+.ad-melody-trail > path[data-halo] {
+  stroke: currentColor;
+}
+.ad-melody-trail > path[data-halo="wide"] {
+  stroke-width: calc(0.15rem + 0.5rem);
+  opacity: 0.1;
+}
+.ad-melody-trail > path[data-halo="near"] {
+  stroke-width: calc(0.15rem + 0.25rem);
+  opacity: 0.22;
+}
+.ad-melody-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);
+}
+/* The playhead flares on the beat: a wider glow, drawn once, faded in. */
+.ad-melody-playhead::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow:
+    0 0 1.6rem #fff,
+    0 0 2.6rem var(--ad-primary);
+  opacity: var(--ad-roll-beat);
+  will-change: opacity;
+}
+/* The singer's voice: grows with loudness, greens with accuracy. */
+.ad-melody-voice {
+  --ad-voice: calc(0.95rem + var(--ad-roll-level) * 0.7rem);
+  position: absolute;
+  z-index: 3;
+  width: var(--ad-voice);
+  height: var(--ad-voice);
+  translate: -50% -50%;
+  border: 0.125rem solid #fff;
+  border-radius: 50%;
+  background: color-mix(in oklch, #fff, #2ee886 calc(var(--ad-roll-accuracy) * 100%));
+  box-shadow:
+    0 0 0 0.2rem #ffffff22,
+    0 0 calc(0.5rem + var(--ad-roll-accuracy) * 1rem) rgb(46 232 134 / calc(0.2 + var(--ad-roll-accuracy) * 0.7));
+  transition:
+    top 0.08s linear,
+    width 0.08s,
+    height 0.08s,
+    background 0.08s;
+}
+.ad-melody-voice[data-hit] {
+  background: #4dffa0;
+  animation: ad-melody-voice-hit 0.42s ease-out;
+}
+@keyframes ad-melody-voice-hit {
+  45% {
+    scale: 1.35;
+  }
+}