Squeeze Animation

1import * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5import "./squeeze-animation.css";
6 
7type SqueezeAnimationValue = number | string;
8 
9export type SqueezeOptions = {
10  /** Horizontal rebound distance. Numeric values are converted to px. Set to 0 to disable. */
11  shakeX?: SqueezeAnimationValue;
12  /** Vertical rebound distance. Numeric values are converted to px. Set to 0 to disable. */
13  shakeY?: SqueezeAnimationValue;
14  /** Animation duration. Numeric values are converted to ms. */
15  duration?: SqueezeAnimationValue;
16};
17 
18export type SqueezeProps = React.ComponentPropsWithoutRef<"span"> &
19  SqueezeOptions & {
20    /** Classes applied to the animated child wrapper. */
21    targetClassName?: string;
22  };
23 
24export function Squeeze({
25  className,
26  children,
27  duration,
28  shakeX,
29  shakeY,
30  style,
31  targetClassName,
32  ...props
33}: SqueezeProps) {
34  return (
35    <span
36      data-slot="squeeze"
37      className={cn("squeeze-animation inline-flex", className)}
38      style={getSqueezeAnimationStyle({ duration, shakeX, shakeY }, style)}
39      {...props}
40    >
41      <span
42        data-slot="squeeze-target"
43        className={cn("squeeze-animation-target inline-flex", targetClassName)}
44      >
45        {children}
46      </span>
47    </span>
48  );
49}
50 
51export type SqueezeAnimationProps = React.ComponentPropsWithoutRef<"div"> &
52  SqueezeOptions & {
53    /** Classes applied to the animated SVG group. */
54    targetClassName?: string;
55  };
56 
57export function SqueezeAnimation({
58  className,
59  duration,
60  shakeX,
61  shakeY,
62  style,
63  targetClassName,
64  ...props
65}: SqueezeAnimationProps) {
66  return (
67    <div
68      data-slot="squeeze-animation"
69      className={cn(
70        "squeeze-animation flex flex-col items-center text-foreground",
71        className,
72      )}
73      style={getSqueezeAnimationStyle({ duration, shakeX, shakeY }, style)}
74      {...props}
75    >
76      <svg
77        viewBox="0 0 100 100"
78        aria-hidden="true"
79        className="squeeze-animation-svg h-auto w-full max-w-80"
80      >
81        <g
82          data-slot="squeeze-animation-target"
83          className={cn(
84            "squeeze-animation-target squeeze-animation-icon",
85            targetClassName,
86          )}
87        >
88          <rect
89            x="26"
90            y="30"
91            width="48"
92            height="40"
93            rx="12"
94            fill="currentColor"
95            fillOpacity="0.1"
96            stroke="currentColor"
97            strokeWidth="6"
98          />
99          <path
100// … truncated