Favorite

import * as Toggle from '@radix-ui/react-toggle';import { Heart } from '@/vibes/soul/primitives/favorite/heart';export interface FavoriteProps {  checked?: boolean;  setChecked: (liked: boolean) => void;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { *   --favorite-focus: hsl(var(--primary)); *   --favorite-border: hsl(var(--contrast-100)); *   --favorite-icon: hsl(var(--foreground)); *   --favorite-on-background: hsl(var(--contrast-100)); *   --favorite-off-border: hsl(var(--contrast-200)); * } * ``` */export const Favorite = function Favorite({ checked = false, setChecked }: FavoriteProps) {  return (    <Toggle.Root      className="group relative flex h-[50px] w-[50px] shrink-0 cursor-pointer items-center justify-center rounded-full border border-[var(--favorite-border,hsl(var(--contrast-100)))] text-[var(--favorite-icon,hsl(var(--foreground)))] ring-[var(--favorite-focus,hsl(var(--primary)))] transition-[colors,transform] duration-300 focus-within:outline-none focus-within:ring-2 data-[state=on]:bg-[var(--favorite-on-background,hsl(var(--contrast-100)))] data-[state=off]:hover:border-[var(--favorite-off-border,hsl(var(--contrast-200)))]"      onPressedChange={setChecked}      pressed={checked}    >      <Heart filled={checked} />    </Toggle.Root>  );};

import { clsx } from 'clsx';import './styles.css';export function Heart({ filled = false }: { filled?: boolean }) {  return (    <svg      className="group-active:heart-pulse transform-gpu transition-transform duration-300 ease-out group-active:scale-75 sm:group-hover:scale-110"      fill="none"      height="21"      viewBox="0 0 20 21"      width="20"      xmlns="http://www.w3.org/2000/svg"    >      {/* Line Heart */}      <path        className={clsx({          '-translate-x-px -translate-y-px scale-110 opacity-0 transition-[opacity,transform] delay-100':            filled,        })}        d="M17.3666 4.34166C16.941 3.91583 16.4356 3.57803 15.8794 3.34757C15.3232 3.1171 14.727 2.99847 14.1249 2.99847C13.5229 2.99847 12.9267 3.1171 12.3705 3.34757C11.8143 3.57803 11.3089 3.91583 10.8833 4.34166L9.99994 5.225L9.1166 4.34166C8.25686 3.48192 7.0908 2.99892 5.87494 2.99892C4.65908 2.99892 3.49301 3.48192 2.63327 4.34166C1.77353 5.20141 1.29053 6.36747 1.29053 7.58333C1.29053 8.79919 1.77353 9.96525 2.63327 10.825L3.5166 11.7083L9.99994 18.1917L16.4833 11.7083L17.3666 10.825C17.7924 10.3994 18.1302 9.89401 18.3607 9.33779C18.5912 8.78158 18.7098 8.1854 18.7098 7.58333C18.7098 6.98126 18.5912 6.38508 18.3607 5.82887C18.1302 5.27265 17.7924 4.76729 17.3666 4.34166Z"        stroke="currentColor"        strokeLinecap="round"        strokeLinejoin="round"      />      {/* Inner Filler Heart */}      <path        className={clsx(          'origin-center transition-transform duration-300 ease-out',          filled ? 'scale-100 fill-current' : 'scale-0',        )}        d="M17.3666 4.34166C16.941 3.91583 16.4356 3.57803 15.8794 3.34757C15.3232 3.1171 14.727 2.99847 14.1249 2.99847C13.5229 2.99847 12.9267 3.1171 12.3705 3.34757C11.8143 3.57803 11.3089 3.91583 10.8833 4.34166L9.99994 5.225L9.1166 4.34166C8.25686 3.48192 7.0908 2.99892 5.87494 2.99892C4.65908 2.99892 3.49301 3.48192 2.63327 4.34166C1.77353 5.20141 1.29053 6.36747 1.29053 7.58333C1.29053 8.79919 1.77353 9.96525 2.63327 10.825L3.5166 11.7083L9.99994 18.1917L16.4833 11.7083L17.3666 10.825C17.7924 10.3994 18.1302 9.89401 18.3607 9.33779C18.5912 8.78158 18.7098 8.1854 18.7098 7.58333C18.7098 6.98126 18.5912 6.38508 18.3607 5.82887C18.1302 5.27265 17.7924 4.76729 17.3666 4.34166Z"      />    </svg>  );}

.heart-pulse {  animation: heart-pulse 0.75s forwards;}@keyframes heart-pulse {  0% {    transform: scale(1);  }  50% {    transform: scale(1.3);  }  100% {    transform: scale(1);  }}