Jelly Button

1"use client";
2 
3import * as React from "react";
4 
5export type JellyButtonVariant = "primary" | "secondary" | "outline";
6export type JellyButtonSize = "sm" | "md" | "lg";
7 
8export type JellyButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
9  variant?: JellyButtonVariant;
10  size?: JellyButtonSize;
11  /**
12   * How hard the button squashes on press, `0`–`1`. Higher = more deform.
13   * Drives the `--jelly-press` scale the button snaps to while held.
14   * @default 0.6
15   */
16  squash?: number;
17};
18 
19// Squishy/tactile button. The whole surface squashes on press (scaleX ↑,
20// scaleY ↓ from `origin-bottom`) and springs back with a single overshoot via
21// the `back` easing — a jelly wobble that never leaves the compositor. Only
22// `scale` animates (MotionScore S); color/shadow differences between states are
23// static, never transitioned. Reduced motion drops the deform entirely.
24const BUTTON_CLASS =
25  "group relative inline-flex origin-bottom cursor-pointer select-none items-center justify-center border-none font-medium [will-change:transform] [-webkit-tap-highlight-color:transparent] [transition:scale_300ms_cubic-bezier(0.3,0.7,0.4,1.5)] hover:[scale:1.04] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:[scale:1.04] active:[scale:var(--jelly-press)] active:[transition:scale_120ms_cubic-bezier(0.3,0.7,0.4,1)] data-[pressed=true]:[scale:var(--jelly-press)] data-[pressed=true]:[transition:scale_120ms_cubic-bezier(0.3,0.7,0.4,1)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:[transition:none] motion-reduce:hover:[scale:1] motion-reduce:focus-visible:[scale:1] motion-reduce:active:[scale:1] motion-reduce:data-[pressed=true]:[scale:1]";
26 
27const variantClasses: Record<JellyButtonVariant, string> = {
28  primary: "bg-primary text-primary-foreground shadow-sm",
29  secondary: "bg-secondary text-secondary-foreground shadow-sm",
30  outline:
31    "border border-border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground",
32};
33 
34const sizeClasses: Record<JellyButtonSize, string> = {
35  sm: "rounded-[var(--button-radius-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-[length:var(--button-text-sm)] leading-[var(--button-leading-sm)]",
36// … truncated