50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:Te18,import * as React from "react"; import { cn } from "@/lib/utils"; import "./squeeze.css"; type SqueezeCardValue = number | string; export type SqueezeOptions = { /** Horizontal rebound distance. Numeric values are converted to px. Set to 0 to disable. */ shakeX?: SqueezeCardValue; /** Vertical rebound distance. Numeric values are converted to px. Set to 0 to disable. */ shakeY?: SqueezeCardValue; /** Animation duration. Numeric values are converted to ms. */ duration?: SqueezeCardValue; }; export type SqueezeProps = React.ComponentProps<"span"> & SqueezeOptions & { /** Classes applied to the animated child wrapper. */ targetClassName?: string; }; export function Squeeze({ className, children, duration, shakeX, shakeY, style, targetClassName, ...props }: SqueezeProps) { return ( {children} ); } export type SqueezeCardProps = React.ComponentProps<"div"> & SqueezeOptions & { /** Classes applied to the animated SVG group. */ targetClassName?: string; }; export function SqueezeCard({ className, duration, shakeX, shakeY, style, targetClassName, ...props }: SqueezeCardProps) { return (

); } function getSqueezeStyle( { duration, shakeX, shakeY, }: Pick, style: React.CSSProperties | undefined, ) { if (duration === undefined && shakeX === undefined && shakeY === undefined) { return style; } return { ...style, ...(duration !== undefined ? { "--squeeze-duration": formatDurationValue(duration) } : {}), ...(shakeX !== undefined ? { "--squeeze-shake-x": formatShakeValue(shakeX) } : {}), ...(shakeY !== undefined ? { "--squeeze-shake-y": formatShakeValue(shakeY) } : {}), } as React.CSSProperties; } function formatShakeValue(value: SqueezeCardValue | undefined) { return typeof value === "number" ? `${value}px` : value; } function formatDurationValue(value: SqueezeCardValue | undefined) { return typeof value === "number" ? `${value}ms` : value; } 52:T1186,/* Defaults are layered for customization. Normal unlayered styles and utilities in a later layer can override them. */ @layer components { .squeeze { --squeeze-duration: 1500ms; --squeeze-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --squeeze-rebound-ease: cubic-bezier(0.34, 1.56, 0.64, 1); --squeeze-settle-ease: cubic-bezier(0.37, 0, 0.63, 1); --squeeze-shake-x: 5px; --squeeze-shake-y: 3px; } .squeeze-target, .squeeze-icon { backface-visibility: hidden; transform-origin: center; animation: squeeze var(--squeeze-duration) both; } .squeeze-svg .squeeze-target, .squeeze-icon { transform-box: fill-box; } @keyframes squeeze { 0% { transform: translate(0, 0) scale(1); animation-timing-function: var(--squeeze-ease-out); } 6% { transform: translate( calc(var(--squeeze-shake-x) * -0.06), calc(var(--squeeze-shake-y) * 0.1) ) scale(1.08, 0.92); animation-timing-function: var(--squeeze-ease-out); } 13% { transform: translate( calc(var(--squeeze-shake-x) * -0.16), calc(var(--squeeze-shake-y) * 0.24) ) scale(1.2, 0.8); animation-timing-function: var(--squeeze-ease-out); } 23% { transform: translate( calc(var(--squeeze-shake-x) * -0.32), calc(var(--squeeze-shake-y) * 0.4) ) scale(1.34, 0.68); animation-timing-function: var(--squeeze-ease-out); } 28% { transform: translate( calc(var(--squeeze-shake-x) * -0.36), calc(var(--squeeze-shake-y) * 0.44) ) scale(1.38, 0.64); animation-timing-function: var(--squeeze-rebound-ease); } 35% { transform: translate( calc(var(--squeeze-shake-x) * 1.25), calc(var(--squeeze-shake-y) * -1.25) ) scale(0.72, 1.32); animation-timing-function: var(--squeeze-settle-ease); } 41% { transform: translate( calc(var(--squeeze-shake-x) * -0.72), calc(var(--squeeze-shake-y) * 0.72) ) scale(1.16, 0.81); animation-timing-function: var(--squeeze-settle-ease); } 47% { transform: translate( calc(var(--squeeze-shake-x) * 0.42), calc(var(--squeeze-shake-y) * -0.42) ) scale(0.91, 1.11); animation-timing-function: var(--squeeze-settle-ease); } 54% { transform: translate( calc(var(--squeeze-shake-x) * -0.24), calc(var(--squeeze-shake-y) * 0.24) ) scale(1.055, 0.94); animation-timing-function: var(--squeeze-settle-ease); } 62% { transform: translate( calc(var(--squeeze-shake-x) * 0.14), calc(var(--squeeze-shake-y) * -0.14) ) scale(0.969, 1.036); animation-timing-function: var(--squeeze-settle-ease); } 72% { transform: translate( calc(var(--squeeze-shake-x) * -0.08), calc(var(--squeeze-shake-y) * 0.08) ) scale(1.018, 0.979); animation-timing-function: var(--squeeze-settle-ease); } 82% { transform: translate( calc(var(--squeeze-shake-x) * 0.047), calc(var(--squeeze-shake-y) * -0.047) ) scale(0.99, 1.012); animation-timing-function: var(--squeeze-settle-ease); } 90% { transform: translate( calc(var(--squeeze-shake-x) * -0.027), calc(var(--squeeze-shake-y) * 0.027) ) scale(1.006, 0.993); animation-timing-function: var(--squeeze-settle-ease); } 95% { transform: translate( calc(var(--squeeze-shake-x) * 0.016), calc(var(--squeeze-shake-y) * -0.016) ) scale(0.997, 1.004); animation-timing-function: var(--squeeze-settle-ease); } 98% { transform: translate( calc(var(--squeeze-shake-x) * -0.004), calc(var(--squeeze-shake-y) * 0.004) ) scale(1.001, 0.999); animation-timing-function: var(--squeeze-settle-ease); } 100% { transform: translate(0, 0) scale(1); } } } /* Motion guards override ordinary customization, including inline timing. Keep these outside the defaults layer; only motion declarations are important. */ @media (prefers-reduced-motion: reduce) { .squeeze-target, .squeeze-icon { animation: none !important; will-change: auto; } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/base/ui/squeeze.tsx","content":"$51","type":"registry:ui","target":"@ui/squeeze.tsx"},{"path":"registry/base/ui/squeeze.css","content":"$52","type":"registry:file","target":"@ui/squeeze.css"}],"className":"h-[70svh] min-h-80"}]]}]