@heyramzi/ui 0.0.0-stage → 6.0.1

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

package/src/animations/skeleton-reveal.css

@@ -0,0 +1,97 @@
+/* Transitions.dev — Skeleton loader and reveal */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+      <div class="t-skel" data-state="loading">
+        <div class="t-skel-skeleton is-pulsing">…</div>
+        <div class="t-skel-content">…</div>
+      </div>
+
+  State:
+    Mount with .is-pulsing on the skeleton so it pulses
+    --pulse-count times. When data arrives, add .is-revealed to
+    .t-skel. To replay without animating the reverse, add
+    .is-resetting, remove .is-revealed, force a reflow, then
+    drop .is-resetting.
+*/
+
+:root {
+  --pulse-dur: 1000ms;
+  --pulse-count: 1;
+  --pulse-min: 0.5;
+  --reveal-dur: var(--duration-slow, 400ms);
+  --reveal-blur: var(--blur-small, 2px);
+  --reveal-ease: var(--ease-in-out, ease-in-out);
+}
+
+/* The wrap stacks two layers on the same coordinates. The
+   skeleton owns the cold pulse + the fade-out side of the
+   reveal; the content owns the fade-in side. They share the
+   same duration / ease so the swap reads as one motion. */
+.t-skel {
+  position: relative;
+}
+.t-skel-skeleton,
+.t-skel-content {
+  position: absolute;
+  inset: 0;
+}
+
+.t-skel-skeleton {
+  z-index: 1;
+  opacity: 1;
+  filter: blur(0);
+  transition:
+    opacity var(--reveal-dur) var(--reveal-ease),
+    filter var(--reveal-dur) var(--reveal-ease);
+}
+.t-skel-content {
+  z-index: 2;
+  opacity: 0;
+  filter: blur(var(--reveal-blur));
+  transition:
+    opacity var(--reveal-dur) var(--reveal-ease),
+    filter var(--reveal-dur) var(--reveal-ease);
+}
+.t-skel.is-revealed .t-skel-skeleton {
+  opacity: 0;
+  filter: blur(var(--reveal-blur));
+}
+.t-skel.is-revealed .t-skel-content {
+  opacity: 1;
+  filter: blur(0);
+}
+/* Snap-back when replaying: kill transitions so the reverse
+   (revealed → skeleton) is instant. Drop .is-resetting after a
+   forced reflow and the next reveal animates again. */
+.t-skel.is-resetting .t-skel-skeleton,
+.t-skel.is-resetting .t-skel-content {
+  transition: none !important;
+}
+
+/* Pulse: place the animation on the bar/avatar children, not
+   on the skeleton itself, so the skeleton's opacity / filter
+   stay free for the cross-fade transition above. */
+.t-skel-skeleton.is-pulsing > * {
+  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
+}
+@keyframes t-skel-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--pulse-min);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-skel-skeleton,
+  .t-skel-content {
+    transition: none !important;
+  }
+  .t-skel-skeleton.is-pulsing > * {
+    animation: none !important;
+  }
+}

package/src/animations/spinning-counter.css

@@ -0,0 +1,52 @@
+/* Spinning counter — transitions.dev 26.
+   One column per digit clips a 0-9 strip; JS translates each strip up by
+   (spins * 10 + digit) cells and staggers the columns. The motion streak is an
+   SVG feGaussianBlur with stdDeviation="0 Y" decayed per column: a CSS blur()
+   is isotropic and would smear the digit sideways. Use `digit-pop-in.css` when
+   a number simply updates in place. */
+:root {
+  --reel-dur: 1400ms;
+  --reel-cell: 30px;
+  --reel-spin-blur: var(--blur-medium, 3px);
+  --reel-stagger: 90ms;
+  --reel-ease: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.t-reel {
+  display: inline-flex;
+  align-items: center;
+  height: var(--reel-cell);
+  font-variant-numeric: tabular-nums;
+}
+/* Soft-fade the window edges rather than hard-cropping the strip. */
+.t-reel-col {
+  position: relative;
+  height: var(--reel-cell);
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    #000 22%,
+    #000 78%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
+}
+.t-reel-strip {
+  display: flex;
+  flex-direction: column;
+  will-change: transform, filter;
+}
+.t-reel-digit {
+  height: var(--reel-cell);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-reel-strip {
+    transition: none !important;
+    filter: none !important;
+  }
+}

package/src/animations/streaming-text.css

@@ -0,0 +1,31 @@
+/* Streaming text — transitions.dev 30.
+   JS wraps each word in a `.t-stream-w` and adds `.is-in` word by word every
+   --stream-gap, so each word resolves out of a small blur instead of appearing.
+   To replay: wipe every span with transition: none, force one reflow, restore
+   the transition, then release the words again. */
+:root {
+  --stream-gap: 60ms;
+  --stream-fade: var(--duration-medium, 350ms);
+  --stream-blur: 1px;
+  --stream-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+.t-stream-w {
+  opacity: 0;
+  filter: blur(var(--stream-blur));
+  transition:
+    opacity var(--stream-fade) var(--stream-ease),
+    filter var(--stream-fade) var(--stream-ease);
+}
+.t-stream-w.is-in {
+  opacity: 1;
+  filter: blur(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-stream-w {
+    transition: none !important;
+    filter: none !important;
+    opacity: 1 !important;
+  }
+}

package/src/animations/success-check.css

@@ -0,0 +1,120 @@
+/* Transitions.dev — Success check */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+    Wrap your icon (SVG, image, anything) in .t-success-check.
+    The wrapper drives fade + rotate + blur + Y-bob; if your
+    icon is an SVG <path>, it gets the stroke-draw animation.
+
+      <span class="t-success-check" data-state="out" aria-hidden="true">
+        <svg viewBox="0 0 48 48" fill="none">…</svg>
+      </span>
+
+  Trigger:
+    Cold load is data-state="out" (opacity 0; no animation).
+    Show: set data-state="in".
+
+  Replace the stroke-dasharray placeholder (20) with the result
+  of path.getTotalLength() for your path, or set it inline in JS.
+*/
+
+:root {
+  --check-opacity-dur: var(--duration-very-slow, 500ms);
+  --check-rotate-dur: var(--duration-very-slow, 500ms);
+  --check-rotate-from: 80deg;
+  --check-bob-dur: var(--duration-very-slow, 500ms);
+  --check-y-amount: 40px;
+  --check-blur-dur: var(--duration-very-slow, 500ms);
+  --check-blur-from: 10px;
+  --check-path-dur: var(--duration-very-slow, 500ms);
+  --check-path-delay: 80ms;
+  --check-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-opacity: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-rotate: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-bob: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --check-ease-path: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Wrapper drives the appear animation; it doesn't own any
+   sizing or color so you can drop in any icon. */
+.t-success-check {
+  display: inline-block;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+/* overflow: visible keeps the stroke from clipping while it
+   draws; display: block kills the inline whitespace under SVGs. */
+.t-success-check svg {
+  display: block;
+  overflow: visible;
+}
+/* Stroke-draw setup. Replace 20 with the result of
+   path.getTotalLength() for your path; round caps mean any
+   sub-pixel overshoot is invisible. */
+.t-success-check svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+}
+
+.t-success-check[data-state="in"] {
+  animation:
+    t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
+    t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
+    t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,
+    t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards;
+}
+.t-success-check[data-state="in"] svg path {
+  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms)
+    forwards;
+}
+
+@keyframes t-check-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes t-check-rotate {
+  from {
+    transform: rotate(var(--check-rotate-from));
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+@keyframes t-check-blur {
+  from {
+    filter: blur(var(--check-blur-from));
+  }
+  to {
+    filter: blur(0);
+  }
+}
+@keyframes t-check-bob {
+  from {
+    translate: 0 var(--check-y-amount);
+  }
+  to {
+    translate: 0 0;
+  }
+}
+@keyframes t-check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check {
+    animation: none !important;
+    opacity: 1;
+  }
+  .t-success-check svg path {
+    animation: none !important;
+    stroke-dashoffset: 0 !important;
+  }
+}

package/src/animations/tabs-sliding.css

@@ -0,0 +1,83 @@
+/* Transitions.dev — Tabs sliding */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+      <div class="t-tabs" role="tablist">
+        <span class="t-tabs-pill" aria-hidden="true"></span>
+        <button class="t-tab" role="tab" aria-selected="true">Plan</button>
+        <button class="t-tab" role="tab" aria-selected="false">Debug</button>
+      </div>
+
+  Wire-up:
+    On click, flip aria-selected on each tab and write the active
+    tab's offsetLeft / offsetWidth onto the pill. On first paint
+    and resize, write the same values WITHOUT a transition so the
+    pill snaps to position before any animation can run.
+*/
+
+:root {
+  --tabs-dur: var(--duration-fast, 250ms);
+  --tabs-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  --tabs-text-muted: rgba(15, 15, 15, 0.8);
+  --tabs-text-active: #0f0f0f;
+  --tabs-bar-bg: #f1f1f1;
+  --tabs-pill-bg: #ffffff;
+}
+
+/* The bar is just a flex container with padding for the pill
+   to sit inside. Tabs sit on z-index: 1, the pill on z-index: 0,
+   so labels read above the pill background. */
+.t-tabs {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 3px;
+  border-radius: 48px;
+  background: var(--tabs-bar-bg);
+}
+.t-tab {
+  position: relative;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  height: 30px;
+  padding: 4px 12px;
+  color: var(--tabs-text-muted);
+  cursor: pointer;
+  border-radius: 48px;
+  z-index: 1;
+  transition: color var(--tabs-dur) var(--tabs-ease);
+}
+.t-tab:not([aria-selected="true"]):hover,
+.t-tab[aria-selected="true"] {
+  color: var(--tabs-text-active);
+}
+
+/* The pill: width + transform are written inline by JS so the
+   transition tweens between the previous and next measured
+   positions. */
+.t-tabs-pill {
+  position: absolute;
+  top: 3px;
+  left: 0;
+  height: 30px;
+  width: 0;
+  background: var(--tabs-pill-bg);
+  border-radius: 48px;
+  transform: translateX(0);
+  transition:
+    transform var(--tabs-dur) var(--tabs-ease),
+    width var(--tabs-dur) var(--tabs-ease);
+  will-change: transform, width;
+  z-index: 0;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-tabs-pill,
+  .t-tab {
+    transition: none !important;
+  }
+}

package/src/animations/text-swap.css

@@ -0,0 +1,40 @@
+/* Transitions.dev — Text swap */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+:root {
+  --text-swap-dur: 200ms;
+  --text-swap-translate-y: var(--distance-base, 8px);
+  --text-swap-blur: var(--blur-small, 2px);
+  --text-swap-ease: var(--ease-out, ease-out);
+}
+
+.t-text-swap {
+  display: inline-block;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--text-swap-dur) var(--text-swap-ease),
+    filter var(--text-swap-dur) var(--text-swap-ease),
+    opacity var(--text-swap-dur) var(--text-swap-ease);
+  will-change: transform, filter, opacity;
+}
+
+.t-text-swap.is-exit {
+  transform: translateY(calc(var(--text-swap-translate-y) * -1));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+}
+
+.t-text-swap.is-enter-start {
+  transform: translateY(var(--text-swap-translate-y));
+  filter: blur(var(--text-swap-blur));
+  opacity: 0;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-text-swap {
+    transition: none !important;
+  }
+}

package/src/animations/text-swap.ts

@@ -0,0 +1,40 @@
+export interface SwapTextOptions {
+  durationMs?: number;
+}
+
+function parseDuration(value: string | null | undefined): number {
+  if (!value) return 200;
+  const trimmed = value.trim();
+  if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
+  if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1000;
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) ? parsed : 200;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+export function swapText(el: HTMLElement, newText: string, opts?: SwapTextOptions): void {
+  if (prefersReducedMotion()) {
+    el.textContent = newText;
+    el.classList.remove("is-exit", "is-enter-start");
+    return;
+  }
+
+  const durationMs =
+    opts?.durationMs ?? parseDuration(getComputedStyle(el).getPropertyValue("--text-swap-dur"));
+  el.classList.add("t-text-swap", "is-exit");
+
+  window.setTimeout(() => {
+    el.textContent = newText;
+    el.classList.remove("is-exit");
+    el.classList.add("is-enter-start");
+
+    requestAnimationFrame(() => {
+      void el.offsetHeight; // read to force a reflow between the two class changes
+      el.classList.remove("is-enter-start");
+    });
+  }, durationMs);
+}

package/src/animations/texts-reveal.css

@@ -0,0 +1,70 @@
+/* Transitions.dev — Texts reveal */
+/* Source: https://github.com/Jakubantalik/transitions.dev */
+
+/*
+  Usage:
+      <div class="t-stagger">
+        <strong class="t-stagger-line t-stagger-line--1">…</strong>
+        <span class="t-stagger-line t-stagger-line--2">…</span>
+      </div>
+
+  State:
+    Add .is-shown to play the staggered entrance. Add .is-hiding
+    (and remove .is-shown) to fade out in place over 200ms,
+    independent of the entrance timing.
+
+  Add more lines with .t-stagger-line--N and
+  transition-delay: calc(var(--stagger-stagger) * (N - 1)).
+*/
+
+:root {
+  --stagger-dur: var(--duration-very-slow, 500ms);
+  --stagger-distance: var(--distance-medium, 12px);
+  --stagger-stagger: var(--duration-stagger, 40ms);
+  --stagger-blur: var(--blur-medium, 3px);
+  --stagger-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+}
+
+/* Lines start translated down + blurred + invisible; .is-shown
+   on the parent flips them to their resting state. The second
+   line's transition-delay holds it back by --stagger-stagger so
+   the eye lands on the headline first. */
+.t-stagger-line {
+  display: block;
+  opacity: 0;
+  transform: translateY(var(--stagger-distance));
+  filter: blur(var(--stagger-blur));
+  transition:
+    opacity var(--stagger-dur) var(--stagger-ease),
+    transform var(--stagger-dur) var(--stagger-ease),
+    filter var(--stagger-dur) var(--stagger-ease);
+  will-change: transform, opacity, filter;
+}
+.t-stagger-line--2 {
+  transition-delay: var(--stagger-stagger);
+}
+
+.t-stagger.is-shown .t-stagger-line {
+  opacity: 1;
+  transform: translateY(0);
+  filter: blur(0);
+}
+/* Exit decouples from the stagger: same fade for every line,
+   no Y return, no blur — so the disappearance reads as a single
+   quiet fade instead of a reverse reveal. */
+.t-stagger.is-hiding .t-stagger-line {
+  opacity: 0;
+  transform: translateY(0);
+  filter: blur(0);
+  transition:
+    opacity 200ms ease,
+    transform 0s linear,
+    filter 0s linear;
+  transition-delay: 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-stagger-line {
+    transition: none !important;
+  }
+}

package/src/animations/thinking-states.css

@@ -0,0 +1,65 @@
+/* Thinking states — transitions.dev 28.
+   A status line that swaps copy while a model works. This file owns only the
+   swap: JS exits the old line upward and enters the new one from below, held
+   back by --think-gap. The sweep is `.t-shimmer` from shimmer-text.css — put
+   both classes on the line and keep data-text in sync with the text, or the
+   shimmer paints the wrong words. The hidden sizer carries your longest state
+   and is what stops the box resizing mid-swap. */
+:root {
+  --think-hold: 2000ms;
+  --think-swap: var(--duration-quick, 150ms);
+  --think-gap: 50ms;
+  --think-distance: var(--distance-base, 8px);
+  --think-blur: var(--blur-small, 2px);
+  --think-ease: var(--ease-in-out, ease-in-out);
+}
+
+/* Set your type on .t-think: the sizer only reports the right width if it is
+   set in the same font as the line it stands in for. */
+.t-think {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+}
+.t-think-sizer {
+  display: block;
+  visibility: hidden;
+  white-space: nowrap;
+}
+.t-think-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  white-space: nowrap;
+  transform: translateY(0);
+  filter: blur(0);
+  opacity: 1;
+  transition:
+    transform var(--think-swap) var(--think-ease),
+    filter var(--think-swap) var(--think-ease),
+    opacity var(--think-swap) var(--think-ease);
+  will-change: transform, filter, opacity;
+}
+
+/* The outgoing line floats over the box so both halves animate at once. */
+.t-think-text.is-exit {
+  transform: translateY(calc(var(--think-distance) * -1));
+  filter: blur(var(--think-blur));
+  opacity: 0;
+}
+.t-think-text.is-enter-start {
+  transition: none;
+  transform: translateY(var(--think-distance));
+  filter: blur(var(--think-blur));
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-think-text {
+    transition: none !important;
+    transform: none !important;
+    filter: none !important;
+  }
+}