@heyramzi/ui 2.23.0 → 3.0.0

package/src/animations/card-tilt.css

@@ -1,71 +1,77 @@
-/* Card hover tilt, transitions.dev `3d-tilt`: bind pointermove to the flat outer
-   `.t-tilt`, never the card, or its rotating edges slip under the cursor and the
-   hover flickers. */
-:root {
-  --tilt-perspective: 1000px;
-  --tilt-return: 1000ms;
-  --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-follow: var(--duration-slow, 300ms);
-  --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --tilt-glare-opacity: 0.32;
-  --tilt-glare-fade: 300ms;
-  --tilt-glare-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-/* touch-action lets a finger drag the tilt instead of scrolling the page. */
-.t-tilt {
-  touch-action: none;
-}
+@layer theme, base, components, utilities;
 
-.t-tilt-card {
-  position: relative;
-  border-radius: var(--radius-xl, 10px);
-  overflow: hidden;
-  transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg))
-    rotateY(var(--tilt-ry, 0deg));
-  transform-style: preserve-3d;
-  transition: transform var(--tilt-return) var(--tilt-return-ease);
-  will-change: transform;
-}
-/* A short follow clock while the pointer moves, so the tilt tracks it 1:1. */
-.t-tilt-card.is-tilting {
-  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
-}
+@layer components {
+  /* Card hover tilt, transitions.dev `3d-tilt`: bind pointermove to the flat outer
+     `.t-tilt`, never the card, or its rotating edges slip under the cursor and the
+     hover flickers. */
+  :root {
+    --tilt-perspective: 1000px;
+    --tilt-return: 1000ms;
+    --tilt-return-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --tilt-follow: var(--duration-slow, 300ms);
+    --tilt-follow-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --tilt-glare-opacity: 0.32;
+    --tilt-glare-fade: 300ms;
+    --tilt-glare-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
 
-/* Layered soft circles that add like light at the pointer position. */
-.t-tilt-glare {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  opacity: 0;
-  mix-blend-mode: screen;
-  background:
-    radial-gradient(
-      circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.48),
-      rgb(255 255 255 / 0.06) 52%,
-      rgb(255 255 255 / 0) 84%
-    ),
-    radial-gradient(
-      circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.22),
-      rgb(255 255 255 / 0.04) 58%,
-      rgb(255 255 255 / 0) 78%
-    ),
-    radial-gradient(
-      circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
-      rgb(255 255 255 / 0.1),
-      rgb(255 255 255 / 0) 88%
-    );
-  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
-}
-.t-tilt.is-hover .t-tilt-glare {
-  opacity: var(--tilt-glare-opacity);
-}
+  /* touch-action lets a finger drag the tilt instead of scrolling the page. */
+  .t-tilt {
+    touch-action: none;
+  }
 
-@media (prefers-reduced-motion: reduce) {
   .t-tilt-card {
-    transform: none !important;
-    transition: none !important;
+    position: relative;
+    border-radius: var(--radius-xl, 10px);
+    overflow: hidden;
+    transform: perspective(var(--tilt-perspective)) rotateX(var(--tilt-rx, 0deg))
+      rotateY(var(--tilt-ry, 0deg));
+    transform-style: preserve-3d;
+    transition: transform var(--tilt-return) var(--tilt-return-ease);
+    will-change: transform;
+  }
+
+  /* A short follow clock while the pointer moves, so the tilt tracks it 1:1. */
+  .t-tilt-card.is-tilting {
+    transition: transform var(--tilt-follow) var(--tilt-follow-ease);
+  }
+
+  /* Layered soft circles that add like light at the pointer position. */
+  .t-tilt-glare {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+    mix-blend-mode: screen;
+    background:
+      radial-gradient(
+        circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.48),
+        rgb(255 255 255 / 0.06) 52%,
+        rgb(255 255 255 / 0) 84%
+      ),
+      radial-gradient(
+        circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.22),
+        rgb(255 255 255 / 0.04) 58%,
+        rgb(255 255 255 / 0) 78%
+      ),
+      radial-gradient(
+        circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
+        rgb(255 255 255 / 0.1),
+        rgb(255 255 255 / 0) 88%
+      );
+    transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
+  }
+
+  .t-tilt.is-hover .t-tilt-glare {
+    opacity: var(--tilt-glare-opacity);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-tilt-card {
+      transform: none !important;
+      transition: none !important;
+    }
   }
 }

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;
+    }
   }
 }