@neo-ui-kit/react 1.3.8 → 1.3.9

package/dist/components/controls/InputBase/styles.css

@@ -37,21 +37,21 @@
 }
 
 /* Control box. */
-.ad-input-base {
+.ad.ad-input-base {
   --ad-input-accent: var(--ad-pink);
   --ad-input-icon: calc(var(--ad-size-font) * 1.45);
   position: relative;
   display: flex;
   align-items: center;
-  gap: calc(var(--ad-size-gap) * 0.75);
+  gap: var(--ad-size-gap);
   min-width: 0;
   width: 100%;
   min-height: var(--ad-size-h);
-  padding-inline: var(--ad-size-pad-x);
-  border: 0.0625rem solid rgb(from var(--ad-secondary) r g b / 0.18);
-  border-radius: var(--ad-size-radius);
-  background: var(--ad-surface-input);
-  box-shadow: var(--ad-shadow-input);
+  padding-inline: calc(var(--ad-size-pad-x) * 1.5);
+  border: 0.0625rem solid var(--ad-input-accent);
+  border-radius: var(--ad-radius-pill);
+  background: transparent;
+  box-shadow: 0 0 0.65rem rgb(from var(--ad-input-accent) r g b / 0.22);
   font-size: var(--ad-size-font);
   color: var(--ad-text);
   cursor: text;
@@ -61,36 +61,22 @@
     background 0.18s;
 }
 .ad-input-base:hover:not([data-disabled]) {
-  border-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-color: var(--ad-input-accent);
+  box-shadow: 0 0 0.9rem rgb(from var(--ad-input-accent) r g b / 0.35);
 }
 .ad-input-base:focus-within {
   border-color: var(--ad-input-accent);
   box-shadow:
     0 0 0 0.1875rem rgb(from var(--ad-primary) r g b / 0.14),
-    0 0 1rem rgb(from var(--ad-primary) r g b / 0.15),
-    inset 0 0.0625rem 0.125rem rgb(from var(--ad-neutral-200) r g b / 0.13);
+    0 0 1rem rgb(from var(--ad-input-accent) r g b / 0.35);
 }
-/* Fluent-style accent line that grows from the centre on focus. */
-.ad-input-base::after {
-  content: "";
+/* Use the same neon contour as the rest of the kit. */
+.ad-input-base > .ad-input-border {
   position: absolute;
-  inset: auto 0.5rem -0.0625rem;
-  height: 0.125rem;
-  border-radius: 999rem;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--ad-input-accent),
-    transparent
-  );
-  box-shadow: 0 0 0.5rem var(--ad-red);
-  transform: scaleX(0);
-  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
+  inset: -0.0625rem;
+  border-radius: inherit;
   pointer-events: none;
 }
-.ad-input-base:focus-within::after {
-  transform: scaleX(1);
-}
 .ad-input-base[data-invalid] {
   --ad-input-accent: var(--ad-secondary);
   border-color: rgb(from var(--ad-primary) r g b / 0.61);
@@ -102,28 +88,24 @@
 .ad-input-base[data-readonly] {
   border-style: dashed;
   border-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  background: var(--ad-neutral-900);
   box-shadow: none;
 }
 
 /* Variants. */
 .ad-input-base[data-ad-variant="filled"] {
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.4);
-  border-end-start-radius: 0.25rem;
-  border-end-end-radius: 0.25rem;
-  background: linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
-  box-shadow: inset 0 0.0625rem 0 #ffffff10;
+  border-color: rgb(from var(--ad-neutral-200) r g b / 0.2);
+  background:
+    radial-gradient(ellipse at 100% 100%, rgb(from var(--ad-primary) r g b / 0.4), transparent 55%),
+    linear-gradient(180deg, var(--ad-neutral-800), var(--ad-neutral-850));
+  box-shadow: inset 0 0.0625rem 0 rgb(from var(--ad-text) r g b / 0.1);
 }
 .ad-input-base[data-ad-variant="filled"]:hover:not([data-disabled]) {
-  background: linear-gradient(180deg, var(--ad-primary-800), var(--ad-neutral-800));
-  border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.66);
+  border-color: rgb(from var(--ad-input-accent) r g b / 0.66);
 }
 .ad-input-base[data-ad-variant="underlined"] {
   padding-inline: 0.125rem;
   border-color: transparent;
-  border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.42);
+  border-bottom-color: var(--ad-input-accent);
   border-radius: 0;
   background: transparent;
   box-shadow: none;
@@ -131,17 +113,17 @@
 .ad-input-base[data-ad-variant="underlined"]:hover:not([data-disabled]) {
   border-color: transparent;
   border-bottom-color: rgb(from var(--ad-secondary) r g b / 0.77);
+  box-shadow: none;
 }
-.ad-input-base:is(
-    [data-ad-variant="filled"],
-    [data-ad-variant="underlined"]
-  ):focus-within {
+.ad-input-base[data-ad-variant="underlined"]:focus-within {
   border-color: transparent;
   border-bottom-color: var(--ad-input-accent);
   box-shadow: none;
 }
-.ad-input-base[data-ad-variant="underlined"]::after {
-  inset-inline: 0;
+.ad-input-base[data-ad-variant="underlined"] > .ad-input-border {
+  inset: auto -0.0625rem -0.0625rem;
+  height: 0.0625rem;
+  border-radius: 0;
 }
 
 /* Content. */
@@ -173,7 +155,7 @@
 }
 .ad-input-base input::placeholder,
 .ad-input-base textarea::placeholder {
-  color: var(--ad-neutral-500);
+  color: var(--ad-neutral-200);
   opacity: 1;
 }
 .ad-input-base textarea {
@@ -205,7 +187,7 @@
   align-items: center;
   gap: 0.125rem;
   flex: none;
-  color: var(--ad-muted);
+  color: var(--ad-text);
 }
 .ad-input-base[data-multiline] .ad-input-adornment {
   min-height: calc(var(--ad-size-h) - 0.125rem - var(--ad-size-pad-x) * 1.5);

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

@@ -1,5 +1,10 @@
 /* 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. */
+@property --ad-roll-beat {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
 .ad-melody-roll {
   --ad-roll-keys: clamp(2.75rem, 8%, 4.5rem);
   position: relative;
@@ -20,6 +25,7 @@
    notes moving over it. */
 .ad-melody-roll::before,
 .ad-melody-roll::after {
+  --ad-roll-beat: inherit;
   content: "";
   position: absolute;
   inset: 0;
@@ -156,6 +162,7 @@
 }
 /* The playhead flares on the beat: a wider glow, drawn once, faded in. */
 .ad-melody-playhead::after {
+  --ad-roll-beat: inherit;
   content: "";
   position: absolute;
   inset: 0;

package/dist/core.js

@@ -11,7 +11,7 @@ import {
   useSmoothWheel,
   useTabShape,
   useTick
-} from "./chunks/chunk-YVRQTI7B.js";
+} from "./chunks/chunk-OCH27SNY.js";
 import {
   LocaleProvider,
   addMessages,

package/dist/forms.js

@@ -4,8 +4,8 @@ import {
   defaultFieldRegistry,
   useForm,
   useFormContext
-} from "./chunks/chunk-FRALT7ER.js";
-import "./chunks/chunk-YVRQTI7B.js";
+} from "./chunks/chunk-L6VCC7AS.js";
+import "./chunks/chunk-OCH27SNY.js";
 import "./chunks/chunk-BJSFN52W.js";
 import "./chunks/chunk-FCOU3ODR.js";
 export {