@heyramzi/ui 2.24.0 → 3.0.0

package/src/animations/digit-pop-in.css

@@ -1,3 +1,5 @@
+@layer theme, base, components, utilities;
+
 /* Transitions.dev — Number pop-in */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
@@ -6,14 +8,53 @@
   add it back, or the animation won't restart.
 */
 
-:root {
-  --digit-dur: var(--duration-slow, 300ms);
-  --digit-distance: var(--distance-base, 8px);
-  --digit-stagger: 70ms;
-  --digit-blur: var(--blur-small, 2px);
-  --digit-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --digit-dir-x: 0;
-  --digit-dir-y: 1;
+@layer components {
+  :root {
+    --digit-dur: var(--duration-slow, 300ms);
+    --digit-distance: var(--distance-base, 8px);
+    --digit-stagger: 70ms;
+    --digit-blur: var(--blur-small, 2px);
+    --digit-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --digit-dir-x: 0;
+    --digit-dir-y: 1;
+  }
+
+  .t-digit-group {
+    display: inline-flex;
+    align-items: baseline;
+  }
+
+  .t-digit {
+    display: inline-block;
+    will-change: transform, opacity, filter;
+  }
+
+  .t-digit-group.is-animating .t-digit {
+    animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
+  }
+
+  .t-digit-group.is-animating .t-digit[data-stagger="1"] {
+    animation-delay: var(--digit-stagger);
+  }
+
+  .t-digit-group.is-animating .t-digit[data-stagger="2"] {
+    animation-delay: calc(var(--digit-stagger) * 2);
+  }
+
+  /* === Extension: support more than 2 stagger steps for longer numbers === */
+  .t-digit-group.is-animating .t-digit[data-stagger="3"] {
+    animation-delay: calc(var(--digit-stagger) * 3);
+  }
+
+  .t-digit-group.is-animating .t-digit[data-stagger="4"] {
+    animation-delay: calc(var(--digit-stagger) * 4);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-digit-group .t-digit {
+      animation: none !important;
+    }
+  }
 }
 
 @keyframes t-digit-pop-in {
@@ -31,35 +72,3 @@
     filter: blur(0);
   }
 }
-
-.t-digit-group {
-  display: inline-flex;
-  align-items: baseline;
-}
-.t-digit {
-  display: inline-block;
-  will-change: transform, opacity, filter;
-}
-.t-digit-group.is-animating .t-digit {
-  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
-}
-.t-digit-group.is-animating .t-digit[data-stagger="1"] {
-  animation-delay: var(--digit-stagger);
-}
-.t-digit-group.is-animating .t-digit[data-stagger="2"] {
-  animation-delay: calc(var(--digit-stagger) * 2);
-}
-
-/* === Extension: support more than 2 stagger steps for longer numbers === */
-.t-digit-group.is-animating .t-digit[data-stagger="3"] {
-  animation-delay: calc(var(--digit-stagger) * 3);
-}
-.t-digit-group.is-animating .t-digit[data-stagger="4"] {
-  animation-delay: calc(var(--digit-stagger) * 4);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .t-digit-group .t-digit {
-    animation: none !important;
-  }
-}

package/src/animations/dropdown.css

@@ -1,117 +1,135 @@
+@layer theme, base, components, utilities;
+
 /* Transitions.dev — Menu dropdown */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
-:root {
-  --dropdown-open-dur: var(--duration-fast, 250ms);
-  --dropdown-close-dur: var(--duration-quick, 150ms);
-  --dropdown-pre-scale: var(--scale-medium, 0.97);
-  --dropdown-closing-scale: var(--scale-tiny, 0.99);
-  --dropdown-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
+@layer components {
+  :root {
+    --dropdown-open-dur: var(--duration-fast, 250ms);
+    --dropdown-close-dur: var(--duration-quick, 150ms);
+    --dropdown-pre-scale: var(--scale-medium, 0.97);
+    --dropdown-closing-scale: var(--scale-tiny, 0.99);
+    --dropdown-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
 
-/* === Upstream: class-based toggle === */
-.t-dropdown {
-  transform-origin: top left;
-  transform: scale(var(--dropdown-pre-scale));
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform var(--dropdown-open-dur) var(--dropdown-ease),
-    opacity var(--dropdown-open-dur) var(--dropdown-ease);
-  will-change: transform, opacity;
-}
-.t-dropdown[data-origin="top-right"] {
-  transform-origin: top right;
-}
-.t-dropdown[data-origin="top-center"] {
-  transform-origin: top center;
-}
-.t-dropdown[data-origin="bottom-left"] {
-  transform-origin: bottom left;
-}
-.t-dropdown[data-origin="bottom-center"] {
-  transform-origin: bottom center;
-}
-.t-dropdown[data-origin="bottom-right"] {
-  transform-origin: bottom right;
-}
+  /* === Upstream: class-based toggle === */
+  .t-dropdown {
+    transform-origin: top left;
+    transform: scale(var(--dropdown-pre-scale));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--dropdown-open-dur) var(--dropdown-ease),
+      opacity var(--dropdown-open-dur) var(--dropdown-ease);
+    will-change: transform, opacity;
+  }
 
-.t-dropdown.is-open {
-  transform: scale(1);
-  opacity: 1;
-  pointer-events: auto;
-}
-.t-dropdown.is-closing {
-  transform: scale(var(--dropdown-closing-scale));
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform var(--dropdown-close-dur) var(--dropdown-ease),
-    opacity var(--dropdown-close-dur) var(--dropdown-ease);
-}
+  .t-dropdown[data-origin="top-right"] {
+    transform-origin: top right;
+  }
 
-/* === Extension: bits-ui data-state integration === */
-/* WHY: a tooltip has three open states, and without "instant-open" every tooltip
-   with delayDuration 0 sat at opacity 0, never on screen (upsys, 11 Sep 2026). */
-.t-dropdown[data-state="open"],
-.t-dropdown[data-state="delayed-open"],
-.t-dropdown[data-state="instant-open"] {
-  transform: scale(1);
-  opacity: 1;
-  pointer-events: auto;
-}
-.t-dropdown[data-state="closed"] {
-  transform: scale(var(--dropdown-closing-scale));
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    transform var(--dropdown-close-dur) var(--dropdown-ease),
-    opacity var(--dropdown-close-dur) var(--dropdown-ease);
-}
-/* WHY the floating var first: bits-ui computes the exact point on the trigger after
-   a flip or a shift, so a menu nudged off the viewport edge still grows from its
-   trigger. The side and align corners stay as the fallback for a non-bits surface. */
-.t-dropdown[data-side="bottom"][data-align="start"] {
-  transform-origin: var(--bits-floating-transform-origin, top left);
-}
-.t-dropdown[data-side="bottom"][data-align="center"] {
-  transform-origin: var(--bits-floating-transform-origin, top center);
-}
-.t-dropdown[data-side="bottom"][data-align="end"] {
-  transform-origin: var(--bits-floating-transform-origin, top right);
-}
-.t-dropdown[data-side="top"][data-align="start"] {
-  transform-origin: var(--bits-floating-transform-origin, bottom left);
-}
-.t-dropdown[data-side="top"][data-align="center"] {
-  transform-origin: var(--bits-floating-transform-origin, bottom center);
-}
-.t-dropdown[data-side="top"][data-align="end"] {
-  transform-origin: var(--bits-floating-transform-origin, bottom right);
-}
-.t-dropdown[data-side="left"],
-.t-dropdown[data-side="inline-end"] {
-  transform-origin: var(--bits-floating-transform-origin, right center);
-}
-.t-dropdown[data-side="right"],
-.t-dropdown[data-side="inline-start"] {
-  transform-origin: var(--bits-floating-transform-origin, left center);
-}
+  .t-dropdown[data-origin="top-center"] {
+    transform-origin: top center;
+  }
 
-/* Reduced motion keeps the fade and drops the scale (DESIGN.md rule 13). Same
-   specificity as the state rules above and later, so it wins without !important. */
-@media (prefers-reduced-motion: reduce) {
-  .t-dropdown,
-  .t-dropdown.is-open,
-  .t-dropdown.is-closing,
-  .t-dropdown[data-state] {
-    transform: none;
-    transition-property: opacity;
+  .t-dropdown[data-origin="bottom-left"] {
+    transform-origin: bottom left;
+  }
+
+  .t-dropdown[data-origin="bottom-center"] {
+    transform-origin: bottom center;
+  }
+
+  .t-dropdown[data-origin="bottom-right"] {
+    transform-origin: bottom right;
+  }
+
+  .t-dropdown.is-open {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .t-dropdown.is-closing {
+    transform: scale(var(--dropdown-closing-scale));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--dropdown-close-dur) var(--dropdown-ease),
+      opacity var(--dropdown-close-dur) var(--dropdown-ease);
+  }
+
+  /* === Extension: bits-ui data-state integration === */
+  /* WHY: a tooltip has three open states, and without "instant-open" every tooltip
+     with delayDuration 0 sat at opacity 0, never on screen (upsys, 11 Sep 2026). */
+  .t-dropdown[data-state="open"],
+  .t-dropdown[data-state="delayed-open"],
+  .t-dropdown[data-state="instant-open"] {
+    transform: scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .t-dropdown[data-state="closed"] {
+    transform: scale(var(--dropdown-closing-scale));
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--dropdown-close-dur) var(--dropdown-ease),
+      opacity var(--dropdown-close-dur) var(--dropdown-ease);
+  }
+
+  /* WHY the floating var first: bits-ui knows the trigger's point after a flip or shift,
+     so a nudged menu still grows from its trigger. Corners are the fallback off bits-ui. */
+  .t-dropdown[data-side="bottom"][data-align="start"] {
+    transform-origin: var(--bits-floating-transform-origin, top left);
+  }
+
+  .t-dropdown[data-side="bottom"][data-align="center"] {
+    transform-origin: var(--bits-floating-transform-origin, top center);
+  }
+
+  .t-dropdown[data-side="bottom"][data-align="end"] {
+    transform-origin: var(--bits-floating-transform-origin, top right);
+  }
+
+  .t-dropdown[data-side="top"][data-align="start"] {
+    transform-origin: var(--bits-floating-transform-origin, bottom left);
+  }
+
+  .t-dropdown[data-side="top"][data-align="center"] {
+    transform-origin: var(--bits-floating-transform-origin, bottom center);
+  }
+
+  .t-dropdown[data-side="top"][data-align="end"] {
+    transform-origin: var(--bits-floating-transform-origin, bottom right);
   }
-}
 
-/* A tooltip that skipped its delay skips its entrance too, since a neighbour opened
-   inside the skip window is already there when the eye arrives. */
-[data-slot="tooltip-content"].t-dropdown[data-state="instant-open"] {
-  transition: none;
+  .t-dropdown[data-side="left"],
+  .t-dropdown[data-side="inline-end"] {
+    transform-origin: var(--bits-floating-transform-origin, right center);
+  }
+
+  .t-dropdown[data-side="right"],
+  .t-dropdown[data-side="inline-start"] {
+    transform-origin: var(--bits-floating-transform-origin, left center);
+  }
+
+  /* Reduced motion keeps the fade and drops the scale (DESIGN.md rule 13). Same
+     specificity as the state rules above and later, so it wins without !important. */
+  @media (prefers-reduced-motion: reduce) {
+    .t-dropdown,
+    .t-dropdown.is-open,
+    .t-dropdown.is-closing,
+    .t-dropdown[data-state] {
+      transform: none;
+      transition-property: opacity;
+    }
+  }
+
+  /* A tooltip that skipped its delay skips its entrance too, since a neighbour opened
+     inside the skip window is already there when the eye arrives. */
+  [data-slot="tooltip-content"].t-dropdown[data-state="instant-open"] {
+    transition: none;
+  }
 }

package/src/animations/input-clear-dissolve.css

@@ -1,3 +1,5 @@
+@layer theme, base, components, utilities;
+
 /* Transitions.dev — Input clear with dissolve */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
@@ -7,67 +9,75 @@
   variables JS reads.
 */
 
-:root {
-  --clear-dur: 1000ms;
-  --clear-out-dur: var(--duration-slow, 300ms);
-  --clear-in-dur: var(--duration-slow, 300ms);
-  --clear-out-fly: 12px;
-  --clear-in-fly: 12px;
-  --clear-out-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --clear-in-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --clear-blur: var(--blur-small, 2px);
-  --glow-delay: 50ms;
-  --glow-peak-at: 0.15;
-  --glow-opacity: 0.42;
-  --glow-spread: 1.5;
-}
+@layer components {
+  :root {
+    --clear-dur: 1000ms;
+    --clear-out-dur: var(--duration-slow, 300ms);
+    --clear-in-dur: var(--duration-slow, 300ms);
+    --clear-out-fly: 12px;
+    --clear-in-fly: 12px;
+    --clear-out-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --clear-in-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --clear-blur: var(--blur-small, 2px);
+    --glow-delay: 50ms;
+    --glow-peak-at: 0.15;
+    --glow-opacity: 0.42;
+    --glow-spread: 1.5;
+  }
 
-/* The wrap clips the glow to its rounded box. Bring your own
-   width / height / border-radius / surface color. */
-.t-clear {
-  position: relative;
-  overflow: hidden;
-}
-.t-clear-mirror,
-.t-clear-placeholder {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 2;
-}
-.t-clear-mirror {
-  opacity: 0;
-}
-.t-clear.has-value .t-clear-mirror,
-.t-clear.is-clearing .t-clear-mirror {
-  opacity: 1;
-}
-/* Hide the input's own glyphs while the mirror owns them so the
-   cleared text doesn't double-render with the fly-up. */
-.t-clear.has-value > input,
-.t-clear.is-clearing > input {
-  -webkit-text-fill-color: transparent;
-}
-.t-clear.has-value .t-clear-placeholder {
-  opacity: 0;
-}
-/* JS paints the streak's gradients here during a clear; dark mode
-   flips multiply to screen so the same alphas lighten, not vanish. */
-.t-clear-glow {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  z-index: 3;
-  mix-blend-mode: multiply;
-}
+  /* The wrap clips the glow to its rounded box. Bring your own
+     width / height / border-radius / surface color. */
+  .t-clear {
+    position: relative;
+    overflow: hidden;
+  }
 
-@media (prefers-reduced-motion: reduce) {
+  .t-clear-mirror,
+  .t-clear-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  .t-clear-mirror {
+    opacity: 0;
+  }
+
+  .t-clear.has-value .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-mirror {
+    opacity: 1;
+  }
+
+  /* Hide the input's own glyphs while the mirror owns them so the
+     cleared text doesn't double-render with the fly-up. */
+  .t-clear.has-value > input,
+  .t-clear.is-clearing > input {
+    -webkit-text-fill-color: transparent;
+  }
+
+  .t-clear.has-value .t-clear-placeholder {
+    opacity: 0;
+  }
+
+  /* JS paints the streak's gradients here during a clear; dark mode
+     flips multiply to screen so the same alphas lighten, not vanish. */
   .t-clear-glow {
-    opacity: 0 !important;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+    z-index: 3;
+    mix-blend-mode: multiply;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-clear-glow {
+      opacity: 0 !important;
+    }
   }
 }

package/src/animations/input-shake.css

@@ -1,3 +1,5 @@
+@layer theme, base, components, utilities;
+
 /* Transitions.dev — Error state shake */
 /* Source: https://github.com/Jakubantalik/transitions.dev */
 
@@ -7,51 +9,63 @@
   reflow, then re-adding it.
 */
 
-:root {
-  --shake-distance: var(--distance-small, 6px);
-  --shake-overshoot: 4px;
-  --shake-dur-a: var(--duration-micro, 80ms);
-  --shake-dur-b: 60ms;
-  --shake-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --revert-hold: 3000ms;
-  --revert-dur: 280ms;
-}
+@layer components {
+  :root {
+    --shake-distance: var(--distance-small, 6px);
+    --shake-overshoot: 4px;
+    --shake-dur-a: var(--duration-micro, 80ms);
+    --shake-dur-b: 60ms;
+    --shake-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --revert-hold: 3000ms;
+    --revert-dur: 280ms;
+  }
 
-/* This rule owns only the border-color tween, so keep the
-   border-width constant across states or the content shifts. */
-.t-input {
-  transition: border-color 150ms ease-out;
-  will-change: transform;
-}
-.t-input.is-error {
-  /* Error border auto-reverts on the hold timer, so the
-	   fade-out uses the slower revert duration (matches the
-	   message fade). */
-  transition: border-color var(--revert-dur, 280ms) ease-out;
-}
+  /* This rule owns only the border-color tween, so keep the
+     border-width constant across states or the content shifts. */
+  .t-input {
+    transition: border-color 150ms ease-out;
+    will-change: transform;
+  }
 
-/* Hiding delays visibility by --revert-dur so the message stays
-   painted through its fade; .is-error drops the delay to 0. */
-.t-error-msg {
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity var(--revert-dur, 280ms) ease-out,
-    visibility 0s linear var(--revert-dur, 280ms);
-}
-.t-input-wrap.is-error .t-error-msg {
-  opacity: 1;
-  visibility: visible;
-  transition:
-    opacity var(--revert-dur, 280ms) ease-out,
-    visibility 0s linear 0s;
-}
+  .t-input.is-error {
+    /* Error border auto-reverts on the hold timer, so the
+  	   fade-out uses the slower revert duration (matches the
+  	   message fade). */
+    transition: border-color var(--revert-dur, 280ms) ease-out;
+  }
+
+  /* Hiding delays visibility by --revert-dur so the message stays
+     painted through its fade; .is-error drops the delay to 0. */
+  .t-error-msg {
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity var(--revert-dur, 280ms) ease-out,
+      visibility 0s linear var(--revert-dur, 280ms);
+  }
+
+  .t-input-wrap.is-error .t-error-msg {
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--revert-dur, 280ms) ease-out,
+      visibility 0s linear 0s;
+  }
 
-/* The %-stops are cumulative fractions of 280ms (80, 60, 80,
-   60), so recompute them if any segment's duration changes. */
-.t-input.is-shaking {
-  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
+  /* The %-stops are cumulative fractions of 280ms (80, 60, 80,
+     60), so recompute them if any segment's duration changes. */
+  .t-input.is-shaking {
+    animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-input {
+      animation: none !important;
+      transform: none !important;
+    }
+  }
 }
+
 @keyframes t-input-shake {
   0% {
     transform: translateX(0);
@@ -73,10 +87,3 @@
     transform: translateX(0);
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .t-input {
-    animation: none !important;
-    transform: none !important;
-  }
-}