- animate-stagger utility + staggerDelay() helper; lists now rise in sequence (recordings grid, moderation rows, message list, media queue, dashboard tiles). - Button gets a subtle active:scale-[0.97] press feedback. - Toaster: toast-in slide-up, tone-accent border, rounded hover-close target. - All motion is reduced-motion aware (killed under prefers-reduced-motion).
20 lines
515 B
TypeScript
20 lines
515 B
TypeScript
import { type ClassValue, clsx } from "clsx";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
export function cn(...inputs: ClassValue[]) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
|
|
/**
|
|
* Returns an inline style that staggers a list item's entrance animation.
|
|
* Pair with the `animate-stagger` class. Caps the delay so long lists still
|
|
* appear promptly.
|
|
*/
|
|
export function staggerDelay(
|
|
index: number,
|
|
step = 45,
|
|
max = 600,
|
|
): React.CSSProperties {
|
|
return { animationDelay: `${Math.min(index * step, max)}ms` };
|
|
}
|