@neo-ui-kit/react 1.0.0 → 1.0.1

package/dist/components/editor/shared.css

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

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

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

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

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

@@ -1,46 +1,46 @@
-/* Styles owned by Marquee. */
-.ad-marquee {
-  overflow: hidden;
-  min-width: 0;
-  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-}
-.ad-marquee-track {
-  display: flex;
-  width: max-content;
-  animation: ad-marquee var(--ad-marquee-time) linear infinite;
-}
-.ad-marquee[data-reverse] .ad-marquee-track {
-  animation-direction: reverse;
-}
-.ad-marquee:is(:hover, :focus-within) .ad-marquee-track {
-  animation-play-state: paused;
-}
-.ad-marquee[data-static] {
-  mask: none;
-}
-.ad-marquee[data-static] .ad-marquee-track {
-  animation: none;
-  width: 100%;
-}
-.ad-marquee[data-static] .ad-marquee-group {
-  flex: 1;
-  min-width: 0;
-  flex-wrap: wrap;
-  padding: 0;
-  overflow-wrap: anywhere;
-}
-.ad-marquee[data-static] .ad-marquee-group[aria-hidden] {
-  display: none;
-}
-.ad-marquee-group {
-  display: flex;
-  align-items: center;
-  gap: var(--ad-space-6);
-  padding-right: var(--ad-space-6);
-  flex: none;
-}
-@keyframes ad-marquee {
-  to {
-    transform: translateX(-50%);
-  }
-}
+/* Styles owned by Marquee. */
+.ad-marquee {
+  overflow: hidden;
+  min-width: 0;
+  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+}
+.ad-marquee-track {
+  display: flex;
+  width: max-content;
+  animation: ad-marquee var(--ad-marquee-time) linear infinite;
+}
+.ad-marquee[data-reverse] .ad-marquee-track {
+  animation-direction: reverse;
+}
+.ad-marquee:is(:hover, :focus-within) .ad-marquee-track {
+  animation-play-state: paused;
+}
+.ad-marquee[data-static] {
+  mask: none;
+}
+.ad-marquee[data-static] .ad-marquee-track {
+  animation: none;
+  width: 100%;
+}
+.ad-marquee[data-static] .ad-marquee-group {
+  flex: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  padding: 0;
+  overflow-wrap: anywhere;
+}
+.ad-marquee[data-static] .ad-marquee-group[aria-hidden] {
+  display: none;
+}
+.ad-marquee-group {
+  display: flex;
+  align-items: center;
+  gap: var(--ad-space-6);
+  padding-right: var(--ad-space-6);
+  flex: none;
+}
+@keyframes ad-marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}

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

@@ -1,25 +1,25 @@
-/* Styles owned by Reveal. */
-.ad-reveal {
-  display: grid;
-  gap: var(--ad-space-3);
-}
-.ad-reveal > * {
-  transition:
-    opacity 0.6s ease-out,
-    transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15),
-    filter 0.6s ease-out;
-  transition-delay: calc(var(--ad-reveal-i, 0) * var(--ad-reveal-stagger));
-}
-.ad-reveal:not([data-shown]) > * {
-  opacity: 0;
-}
-.ad-reveal[data-effect="rise"]:not([data-shown]) > * {
-  transform: translateY(1.5rem);
-}
-.ad-reveal[data-effect="zoom"]:not([data-shown]) > * {
-  transform: scale(0.85);
-}
-.ad-reveal[data-effect="blur"]:not([data-shown]) > * {
-  filter: blur(0.75rem);
-  transform: scale(1.05);
-}
+/* Styles owned by Reveal. */
+.ad-reveal {
+  display: grid;
+  gap: var(--ad-space-3);
+}
+.ad-reveal > * {
+  transition:
+    opacity 0.6s ease-out,
+    transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15),
+    filter 0.6s ease-out;
+  transition-delay: calc(var(--ad-reveal-i, 0) * var(--ad-reveal-stagger));
+}
+.ad-reveal:not([data-shown]) > * {
+  opacity: 0;
+}
+.ad-reveal[data-effect="rise"]:not([data-shown]) > * {
+  transform: translateY(1.5rem);
+}
+.ad-reveal[data-effect="zoom"]:not([data-shown]) > * {
+  transform: scale(0.85);
+}
+.ad-reveal[data-effect="blur"]:not([data-shown]) > * {
+  filter: blur(0.75rem);
+  transform: scale(1.05);
+}

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

@@ -1,48 +1,48 @@
-/* Styles owned by Shimmer. */
-.ad-shimmer {
-  display: flex;
-  align-items: center;
-  gap: var(--ad-space-3);
-  min-width: 0;
-}
-.ad-shimmer-lines {
-  display: grid;
-  gap: 0.6rem;
-  flex: 1;
-  min-width: 0;
-}
-.ad-shimmer i {
-  position: relative;
-  display: block;
-  height: 0.75rem;
-  overflow: hidden;
-  border-radius: 999rem;
-  background: #ffffff10;
-}
-/* The sweep: a light 60% as wide as the line, slid across it on its own layer (no repaint). */
-.ad-shimmer i::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  width: 60%;
-  background: linear-gradient(
-    100deg,
-    transparent 30%,
-    rgb(from var(--ad-secondary) r g b / 0.2) 50%,
-    transparent 70%
-  );
-  transform: translateX(-100%);
-  animation: ad-shimmer-run 1.6s ease-in-out infinite;
-  will-change: transform;
-}
-.ad-shimmer-circle {
-  flex: none;
-  width: 2.75rem !important;
-  height: 2.75rem !important;
-}
-@keyframes ad-shimmer-run {
-  to {
-    /* From 60% of the line left of it to just past its right edge, as the old background ran. */
-    transform: translateX(166.667%);
-  }
-}
+/* Styles owned by Shimmer. */
+.ad-shimmer {
+  display: flex;
+  align-items: center;
+  gap: var(--ad-space-3);
+  min-width: 0;
+}
+.ad-shimmer-lines {
+  display: grid;
+  gap: 0.6rem;
+  flex: 1;
+  min-width: 0;
+}
+.ad-shimmer i {
+  position: relative;
+  display: block;
+  height: 0.75rem;
+  overflow: hidden;
+  border-radius: 999rem;
+  background: #ffffff10;
+}
+/* The sweep: a light 60% as wide as the line, slid across it on its own layer (no repaint). */
+.ad-shimmer i::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  width: 60%;
+  background: linear-gradient(
+    100deg,
+    transparent 30%,
+    rgb(from var(--ad-secondary) r g b / 0.2) 50%,
+    transparent 70%
+  );
+  transform: translateX(-100%);
+  animation: ad-shimmer-run 1.6s ease-in-out infinite;
+  will-change: transform;
+}
+.ad-shimmer-circle {
+  flex: none;
+  width: 2.75rem !important;
+  height: 2.75rem !important;
+}
+@keyframes ad-shimmer-run {
+  to {
+    /* From 60% of the line left of it to just past its right edge, as the old background ran. */
+    transform: translateX(166.667%);
+  }
+}

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

@@ -1,28 +1,28 @@
-/* Styles owned by Sparkles. */
-.ad-sparkles {
-  --ad-sparkle: var(--ad-neutral-200);
-  position: relative;
-  contain: layout;
-  display: inline-block;
-}
-.ad-sparkle {
-  position: absolute;
-  aspect-ratio: 1;
-  translate: -50% -50%;
-  fill: var(--ad-sparkle);
-  filter: drop-shadow(0 0 0.25em var(--ad-primary));
-  pointer-events: none;
-  scale: 0;
-  animation: ad-sparkle-twinkle 2.4s ease-in-out infinite;
-}
-@keyframes ad-sparkle-twinkle {
-  0%,
-  100% {
-    scale: 0;
-    rotate: 0deg;
-  }
-  50% {
-    scale: 1;
-    rotate: 90deg;
-  }
-}
+/* Styles owned by Sparkles. */
+.ad-sparkles {
+  --ad-sparkle: var(--ad-neutral-200);
+  position: relative;
+  contain: layout;
+  display: inline-block;
+}
+.ad-sparkle {
+  position: absolute;
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  fill: var(--ad-sparkle);
+  filter: drop-shadow(0 0 0.25em var(--ad-primary));
+  pointer-events: none;
+  scale: 0;
+  animation: ad-sparkle-twinkle 2.4s ease-in-out infinite;
+}
+@keyframes ad-sparkle-twinkle {
+  0%,
+  100% {
+    scale: 0;
+    rotate: 0deg;
+  }
+  50% {
+    scale: 1;
+    rotate: 90deg;
+  }
+}

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

@@ -1,45 +1,45 @@
-/* Styles owned by Spotlight. */
-.ad-spotlight {
-  --ad-spot-color: var(--ad-red);
-  --ad-spot-r: 18rem;
-  position: relative;
-  isolation: isolate;
-  border-radius: var(--ad-radius);
-}
-.ad-spotlight::before,
-.ad-spotlight::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  opacity: 0;
-  transition: opacity 0.35s;
-  pointer-events: none;
-}
-/* Glow over the surface. */
-.ad-spotlight::before {
-  z-index: 1;
-  background: radial-gradient(
-    var(--ad-spot-r) circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 50%),
-    color-mix(in srgb, var(--ad-spot-color) 18%, transparent),
-    transparent 65%
-  );
-}
-/* Edge that lights up near the pointer. */
-.ad-spotlight::after {
-  z-index: 2;
-  padding: 0.0625rem;
-  background: radial-gradient(
-    calc(var(--ad-spot-r) * 0.6) circle at var(--ad-spot-x, 50%)
-      var(--ad-spot-y, 50%),
-    color-mix(in srgb, var(--ad-spot-color) 90%, #fff),
-    transparent 70%
-  );
-  mask:
-    linear-gradient(#000 0 0) content-box exclude,
-    linear-gradient(#000 0 0);
-}
-.ad-spotlight:hover::before,
-.ad-spotlight:hover::after {
-  opacity: 1;
-}
+/* Styles owned by Spotlight. */
+.ad-spotlight {
+  --ad-spot-color: var(--ad-red);
+  --ad-spot-r: 18rem;
+  position: relative;
+  isolation: isolate;
+  border-radius: var(--ad-radius);
+}
+.ad-spotlight::before,
+.ad-spotlight::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.35s;
+  pointer-events: none;
+}
+/* Glow over the surface. */
+.ad-spotlight::before {
+  z-index: 1;
+  background: radial-gradient(
+    var(--ad-spot-r) circle at var(--ad-spot-x, 50%) var(--ad-spot-y, 50%),
+    color-mix(in srgb, var(--ad-spot-color) 18%, transparent),
+    transparent 65%
+  );
+}
+/* Edge that lights up near the pointer. */
+.ad-spotlight::after {
+  z-index: 2;
+  padding: 0.0625rem;
+  background: radial-gradient(
+    calc(var(--ad-spot-r) * 0.6) circle at var(--ad-spot-x, 50%)
+      var(--ad-spot-y, 50%),
+    color-mix(in srgb, var(--ad-spot-color) 90%, #fff),
+    transparent 70%
+  );
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+}
+.ad-spotlight:hover::before,
+.ad-spotlight:hover::after {
+  opacity: 1;
+}