@heyramzi/ui 0.0.0-stage → 1.53.1

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

@@ -0,0 +1,86 @@
+/* Transitions.dev — Input clear with dissolve */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+      <div class="t-clear has-value">
+        <input type="text" value="…" />
+        <div class="t-clear-mirror" aria-hidden="true">…</div>
+        <div class="t-clear-placeholder" aria-hidden="true">Search</div>
+        <div class="t-clear-glow" aria-hidden="true"></div>
+        <button class="t-clear-btn" aria-label="Clear">…</button>
+      </div>
+
+  The transitions live in JS (per-frame transform/opacity/filter
+  writes): the streak envelope and per-word gradient stack cannot
+  be expressed as static @keyframes. This stylesheet only owns the
+  resting state + the variables JS reads.
+*/
+
+:root {
+  --clear-dur: 1000ms;
+  --clear-out-dur: var(--duration-slow, 400ms);
+  --clear-in-dur: var(--duration-slow, 400ms);
+  --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;
+}
+/* The streak overlay: empty by default; JS writes a stack of
+   radial-gradient(...) layers into background during a clear,
+   then animates opacity. mix-blend-mode: multiply darkens the
+   underlying input; flip to screen in dark mode so the same
+   alpha values lighten instead of vanish. */
+.t-clear-glow {
+  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

@@ -0,0 +1,114 @@
+/* Transitions.dev — Error state shake */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Apply .t-input-wrap to your wrapper, .t-input to the
+    element that should shake (your input field, its
+    bordered wrapper, whatever owns the visible border),
+    and .t-error-msg to the message you want to reveal.
+    Bring your own sizing, padding, border colors, and
+    typography.
+
+      <div class="t-input-wrap">
+        <div class="t-input">
+          <input type="text">
+        </div>
+        <p class="t-error-msg">Please enter a valid email.</p>
+      </div>
+
+  Trigger:
+    Add `.is-error` to .t-input-wrap and .t-input. Your
+    own border-color rules drive the visible color; this
+    stylesheet only owns the tween.
+    Restart the shake by removing `.is-shaking` from
+    .t-input, forcing a reflow, then re-adding it.
+    Optional: after --revert-hold ms, drop both
+    `.is-error` classes so border and message fade back
+    to neutral over --revert-dur.
+
+  Per-segment ease: each keyframe stop carries its own
+  animation-timing-function so each leg follows the Figma
+  cubic-bezier curve independently.
+*/
+
+: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;
+}
+
+/* Border-color tween. Define your input's default / focused
+   / error border-color in your own component CSS, this rule
+   only owns the interpolation. Use a constant border-width
+   across states so the tween never shifts inner content. */
+.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;
+}
+
+/* Error message reveal. Visibility is delayed by --revert-dur
+   on hide so the message stays painted for the full opacity
+   fade-out. Entering .is-error drops the delay to 0 so the
+   message becomes visible immediately. */
+.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;
+}
+
+/* Multi-segment keyframe with per-stop easing so each leg
+   of the shake follows its own cubic-bezier independently.
+   %-stops are cumulative durations as a fraction of the
+   total (80, 60, 80, 60 = 280ms): 28.57%, 57.14%, 78.57%,
+   100%. Recompute if any segment duration changes. */
+.t-input.is-shaking {
+  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
+}
+@keyframes t-input-shake {
+  0% {
+    transform: translateX(0);
+    animation-timing-function: var(--shake-ease);
+  }
+  28.57% {
+    transform: translateX(var(--shake-distance));
+    animation-timing-function: var(--shake-ease);
+  }
+  57.14% {
+    transform: translateX(calc(var(--shake-distance) * -1));
+    animation-timing-function: var(--shake-ease);
+  }
+  78.57% {
+    transform: translateX(var(--shake-overshoot));
+    animation-timing-function: var(--shake-ease);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-input {
+    animation: none !important;
+    transform: none !important;
+  }
+}

package/src/animations/learn-more-hover.css

@@ -0,0 +1,48 @@
+/* Learn more hover — transitions.dev 24.
+   The chevron shifts along the direction it goes and its two arms rotate
+   apart about the apex, so the arrow leans into the move. Pure CSS.
+   `transform-box: view-box` is what makes the arm origin resolve against
+   the viewBox rather than each path's own bounding box. */
+:root {
+  --learn-shift: 2px;
+  --learn-spread: 8deg;
+  --learn-in: var(--duration-medium, 350ms);
+  --learn-out: var(--duration-medium, 350ms);
+  --learn-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-learn-chevron {
+  display: inline-flex;
+  transform: translateX(0);
+  transition: transform var(--learn-out) var(--learn-ease);
+}
+.t-learn-arm {
+  transform-box: view-box;
+  transform-origin: 10px 8px;
+  vector-effect: non-scaling-stroke;
+  transition: transform var(--learn-out) var(--learn-ease);
+}
+.t-learn:hover .t-learn-chevron,
+.t-learn:focus-visible .t-learn-chevron {
+  transform: translateX(var(--learn-shift));
+  transition-duration: var(--learn-in);
+}
+.t-learn:hover .t-learn-arm,
+.t-learn:focus-visible .t-learn-arm {
+  transition-duration: var(--learn-in);
+}
+.t-learn:hover .t-learn-arm-top,
+.t-learn:focus-visible .t-learn-arm-top {
+  transform: rotate(var(--learn-spread));
+}
+.t-learn:hover .t-learn-arm-bot,
+.t-learn:focus-visible .t-learn-arm-bot {
+  transform: rotate(calc(var(--learn-spread) * -1));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-learn-chevron,
+  .t-learn-arm {
+    transition: none !important;
+  }
+}

package/src/animations/like-button.css

@@ -0,0 +1,93 @@
+/* Like button — transitions.dev 23.
+   Toggle `data-liked` to fill and pop the heart; add `.is-bursting` for
+   one particle duration to fire the spray, writing --px/--py/--pdur/--pdelay
+   per dot in JS so no two bursts match. */
+:root {
+  --like-color: #f40051;
+  --like-fill: var(--duration-quick, 150ms);
+  --like-pop: var(--duration-medium, 350ms);
+  --like-pop-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --like-particle-dur: 600ms;
+  --like-particle-dist: 20px;
+  --like-particle-size: 2.5px;
+  --like-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-like-heart {
+  color: currentcolor;
+  transition: color var(--like-fill) var(--like-ease);
+}
+.t-like-heart path {
+  fill: transparent;
+  stroke: currentcolor;
+  transition:
+    fill var(--like-fill) var(--like-ease),
+    stroke var(--like-fill) var(--like-ease);
+}
+.t-like[data-liked="true"] .t-like-heart {
+  color: var(--like-color);
+}
+.t-like[data-liked="true"] .t-like-heart path {
+  fill: currentcolor;
+}
+
+/* The pop scales an HTML wrapper, never the <svg>: transforming an inline SVG
+   makes Chromium rasterise it at 1x, which is visibly soft on hi-DPI. */
+.t-like[data-liked="true"] .t-like-icon {
+  animation: t-like-pop var(--like-pop) var(--like-pop-ease);
+}
+@keyframes t-like-pop {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(0.82);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.t-like-particles {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  color: var(--like-color);
+}
+.t-like-particles i {
+  position: absolute;
+  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
+  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
+  width: calc(var(--like-particle-size) * var(--psize, 1));
+  height: calc(var(--like-particle-size) * var(--psize, 1));
+  border-radius: 50%;
+  background: currentcolor;
+  opacity: 0;
+}
+@keyframes t-like-burst {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0) scale(0.4);
+  }
+  20% {
+    opacity: 1;
+    transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6));
+  }
+}
+.t-like.is-bursting .t-like-particles i {
+  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-like-icon,
+  .t-like-particles i {
+    animation: none !important;
+  }
+}

package/src/animations/modal.css

@@ -0,0 +1,75 @@
+/* Transitions.dev — Modal open/close */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --modal-open-dur: var(--duration-fast, 250ms);
+  --modal-close-dur: var(--duration-quick, 150ms);
+  --modal-scale: var(--scale-large, 0.96);
+  --modal-scale-close: var(--scale-large, 0.96);
+  --modal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --modal-backdrop-color: rgb(0 0 0 / 0.5);
+}
+
+/* === Upstream: class-based toggle === */
+.t-modal {
+  transform-origin: center;
+  transform: scale(var(--modal-scale));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-open-dur) var(--modal-ease),
+    opacity var(--modal-open-dur) var(--modal-ease);
+  will-change: transform, opacity;
+}
+.t-modal.is-open {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-modal.is-closing {
+  transform: scale(var(--modal-scale-close));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-close-dur) var(--modal-ease),
+    opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+/* === Extension: bits-ui data-state integration === */
+.t-modal[data-state="open"] {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+.t-modal[data-state="closed"] {
+  transform: scale(var(--modal-scale-close));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--modal-close-dur) var(--modal-ease),
+    opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+/* === Extension: backdrop helper === */
+/* WHY: pair .t-modal-backdrop with the modal so the overlay fades in sync. */
+.t-modal-backdrop {
+  background: var(--modal-backdrop-color);
+  opacity: 0;
+  transition: opacity var(--modal-open-dur) var(--modal-ease);
+}
+.t-modal-backdrop.is-open,
+.t-modal-backdrop[data-state="open"] {
+  opacity: 1;
+}
+.t-modal-backdrop.is-closing,
+.t-modal-backdrop[data-state="closed"] {
+  opacity: 0;
+  transition: opacity var(--modal-close-dur) var(--modal-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-modal,
+  .t-modal-backdrop {
+    transition: none !important;
+  }
+}

package/src/animations/page-side-by-side.css

@@ -0,0 +1,63 @@
+/* Transitions.dev — Page side-by-side */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    <div class="t-page-slide" data-page="1">
+      <section class="t-page" data-page-id="1">…</section>
+      <section class="t-page" data-page-id="2">…</section>
+    </div>
+
+  State:
+    Set data-page="1" or "2" on .t-page-slide.
+    Page 1 exits to the left, page 2 exits to the right.
+    --page-exit-enabled (0/1) disables the outgoing slide.
+*/
+
+:root {
+  --page-slide-dur: 200ms;
+  --page-fade-dur: 200ms;
+  --page-slide-distance: var(--distance-base, 8px);
+  --page-blur: var(--blur-medium, 3px);
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --page-fade-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-page-slide {
+  position: relative;
+}
+.t-page-slide .t-page[data-page-id="1"] {
+  --t-page-from-x: calc(var(--page-slide-distance) * -1);
+}
+.t-page-slide .t-page[data-page-id="2"] {
+  --t-page-from-x: var(--page-slide-distance);
+}
+.t-page-slide .t-page {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled)));
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition:
+    opacity var(--page-fade-dur) var(--page-fade-ease),
+    transform var(--page-slide-dur) var(--page-slide-ease),
+    filter var(--page-slide-dur) var(--page-slide-ease);
+  will-change: opacity, transform, filter;
+}
+.t-page-slide[data-page="1"] .t-page[data-page-id="1"],
+.t-page-slide[data-page="2"] .t-page[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-page-slide .t-page {
+    transition: none !important;
+  }
+}

package/src/animations/plus-menu-morph.css

@@ -0,0 +1,97 @@
+/* Plus to menu morph — transitions.dev `dropdown-menu-morph`.
+   The trigger becomes the surface: width, height and radius animate while the
+   plus and the menu cross-fade through a blur. Set the open footprint on the
+   consumer side; the two sizes here are the upstream demo's. Use `dropdown.css`
+   instead when the surface is a separate popover that merely grows. */
+:root {
+  --morph-open-dur: var(--duration-medium, 350ms);
+  --morph-close-dur: var(--duration-fast, 250ms);
+  --morph-ease: var(--ease-smooth-out);
+  --morph-close-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --morph-r-closed: 40px;
+  --morph-r-open: 20px;
+  --morph-size-closed: 40px;
+  --morph-w-open: 183px;
+  --morph-h-open: 172px;
+  --morph-fade-dur: 200ms;
+  --morph-slide: 40px;
+  --morph-rotate: 45deg;
+  --morph-scale: var(--scale-medium, 0.97);
+  --morph-blur: var(--blur-small, 2px);
+}
+
+.t-morph {
+  position: relative;
+  width: var(--morph-size-closed);
+  height: var(--morph-size-closed);
+  border-radius: var(--morph-r-closed);
+  overflow: hidden;
+  transition:
+    width var(--morph-close-dur) var(--morph-close-ease),
+    height var(--morph-close-dur) var(--morph-close-ease),
+    border-radius var(--morph-close-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] {
+  width: var(--morph-w-open);
+  height: var(--morph-h-open);
+  border-radius: var(--morph-r-open);
+  transition:
+    width var(--morph-open-dur) var(--morph-ease),
+    height var(--morph-open-dur) var(--morph-ease),
+    border-radius var(--morph-open-dur) var(--morph-ease);
+}
+
+.t-morph-plus {
+  position: absolute;
+  inset: auto 0 0 auto;
+  width: var(--morph-size-closed);
+  height: var(--morph-size-closed);
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph-plus svg {
+  transition: transform var(--morph-open-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-plus {
+  opacity: 0;
+  transform: translateX(calc(-1 * var(--morph-slide)));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+}
+.t-morph[data-open="true"] .t-morph-plus svg {
+  transform: scale(var(--morph-scale)) rotate(var(--morph-rotate));
+}
+
+.t-morph-menu {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transform: translateX(var(--morph-slide)) scale(var(--morph-scale));
+  filter: blur(var(--morph-blur));
+  pointer-events: none;
+  transition:
+    opacity var(--morph-fade-dur) var(--morph-close-ease),
+    transform var(--morph-open-dur) var(--morph-close-ease),
+    filter var(--morph-fade-dur) var(--morph-close-ease);
+}
+.t-morph[data-open="true"] .t-morph-menu {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+  filter: blur(0);
+  pointer-events: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-morph,
+  .t-morph-plus,
+  .t-morph-menu {
+    transition: none !important;
+  }
+}

package/src/animations/resize.css

@@ -0,0 +1,20 @@
+/* Transitions.dev — Card resize */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --resize-dur: 300ms;
+  --resize-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-resize {
+  transition:
+    width var(--resize-dur) var(--resize-ease),
+    height var(--resize-dur) var(--resize-ease);
+  will-change: width, height;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-resize {
+    transition: none !important;
+  }
+}

package/src/animations/shimmer-text.css

@@ -0,0 +1,72 @@
+/* Transitions.dev — Shimmer text */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Duplicate the visible string into data-text so the ::before
+    layer can mask the gradient onto the same glyphs. Keep them
+    in sync if the text changes.
+
+      <span class="t-shimmer" data-text="Planning next moves">
+        Planning next moves
+      </span>
+
+  Pure CSS — no JS. Tune --shimmer-base / --shimmer-highlight in
+  your own theme rules so the colors follow light / dark mode.
+*/
+
+:root {
+  --shimmer-dur: 2000ms;
+  --shimmer-base: #7c7c7c;
+  --shimmer-highlight: #0d0d0d;
+  --shimmer-band: 400%;
+  --shimmer-ease: var(--ease-linear, linear);
+}
+
+/* Two-layer construction:
+   1. The base text renders normally in --shimmer-base.
+   2. ::before duplicates it via content: attr(data-text),
+      paints a transparent → highlight → transparent gradient
+      onto it, and clips that gradient to the glyphs via
+      background-clip: text. Animating background-position
+      sweeps the band across the text. */
+.t-shimmer {
+  position: relative;
+  display: inline-block;
+  color: var(--shimmer-base);
+}
+.t-shimmer::before {
+  content: attr(data-text);
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    transparent 40%,
+    var(--shimmer-highlight) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-size: var(--shimmer-band) 100%;
+  background-repeat: no-repeat;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
+}
+@keyframes t-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-shimmer::before {
+    animation: none !important;
+  }
+}