{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-cat",
  "type": "registry:block",
  "title": "Tooltip cat",
  "description": "Tooltip cat",
  "files": [
    {
      "path": "components/usages/tooltipcatusage.tsx",
      "content": "import TooltipCat from \"@/registry/open-source/tooltip-cat\";\n\nexport default function TooltipCatUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <TooltipCat>\n                <h1>Tooltip Cat</h1>\n            </TooltipCat>\n        </div>\n    );\n}",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tooltipcatusage.tsx",
      "content": "import TooltipCat from \"@/registry/open-source/tooltip-cat\";\n\nexport default function TooltipCatUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <TooltipCat>\n                <h1>Tooltip Cat</h1>\n            </TooltipCat>\n        </div>\n    );\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tooltip-cat.tsx",
      "content": "'use client'\n\n/**\n * @author: @shatlyk1011\n * @description: A playful cat tooltip component with CSS sleep animations\n * @version: 1.0.0\n * @date: 2026-04-25\n * @license: MIT\n * @website: https://emerald-ui.com\n */\n\n// ! Please, add these styles to your globals.css file to avoid animation bugs\n/* Cat styling */\n// @layer utilities {\n// @keyframes sleep {\n//   0% {\n//     opacity: 1;\n//     transform: translateY(0) scale(1);\n//   }\n//   50% {\n//     opacity: 0.5;\n//     transform: translate(-5px, -35px) scale(1.2);\n//   }\n//   100% {\n//     opacity: 0;\n//     transform: translateY(-60px) scale(1.5);\n//   }\n// }\n// }\n// .sleep-symbol span:nth-child(1) {\n//   animation-delay: 0s;\n// }\n// .sleep-symbol span:nth-child(2) {\n//   animation-delay: 1s;\n//   margin-left: -10px;\n// }\n// .sleep-symbol span:nth-child(3) {\n//   animation-delay: 2s;\n//   margin-left: -10px;\n// }\n// .cat:hover #righteyelid {\n//   visibility: hidden;\n// }\n// .thecat #eyesdown {\n//   visibility: hidden;\n// }\n// .cat:has(.content:hover) {\n//   #righteyelid,\n//   #lefteyelid,\n//   .sleep-symbol {\n//     visibility: hidden;\n//   }\n//   #eyesdown {\n//     visibility: visible;\n//   }\n// }\nimport { ReactNode } from 'react'\nimport { cn } from '@/registry/utilities/cn'\n\ninterface Props {\n    children?: ReactNode\n    containerClasses?: string\n    wrapperClasses?: string\n    catClasses?: string\n    catGradientClasses?: string\n}\n\nexport default function TooltipCat({\n    children,\n    containerClasses,\n    wrapperClasses,\n    catClasses,\n    catGradientClasses,\n}: Props) {\n    return (\n        <div\n            className={cn(\n                'mouse-detector group relative -m-5 w-full p-5 max-md:m-0 max-md:p-0',\n                containerClasses\n            )}\n        >\n            <div\n                className={cn(\n                    'cat-light absolute top-0 right-0 h-36 w-36 rounded-full blur-xl transition duration-500 ease-in group-hover:bg-white/5 max-md:hidden',\n                    catGradientClasses\n                )}\n            ></div>\n            <div className={cn('cat relative scale-100 p-5 pt-0!', wrapperClasses)}>\n                <div\n                    className={cn(\n                        'pointer-events-none relative z-20 -mb-15 flex w-full justify-end',\n                        catClasses\n                    )}\n                >\n                    <div className={cn('thecat relative max-w-max')}>\n                        <div className='sleep-symbol absolute top-2.5 right-30 w-max group-hover:invisible'>\n                            {Array.from({ length: 3 }).map((_, index) => (\n                                <span\n                                    className='relative inline-block scale-100 animate-[sleep_4s_ease-in-out_infinite] opacity-100'\n                                    key={index}\n                                >\n                                    z\n                                </span>\n                            ))}\n                        </div>\n\n                        <svg\n                            width='45.952225mm'\n                            height='35.678726mm'\n                            viewBox='0 0 45.952225 35.678726'\n                            version='1.1'\n                            id='svg1'\n                            xmlns='http://www.w3.org/2000/svg'\n                        >\n                            <defs id='defs1' />\n                            <g\n                                id='layer1'\n                                className='inline'\n                                transform='translate(-121.80376,-101.90461)'\n                            >\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 144.95859,104.74193 c 6.01466,-2.1201 14.02915,-0.85215 17.62787,2.77812 3.59872,3.63027 2.91927,7.6226 -0.0661,11.80703 -2.98542,4.18443 -9.54667,3.58363 -15.1474,3.43959 -5.60073,-0.14404 -10.30411,-0.0586 -11.67474,-3.9026 7.85671,-2.22341 3.24576,-12.00205 9.26042,-14.12214 z'\n                                    id='path1'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 156.30732,121.30486 c 0,0 -3.82398,2.52741 -4.14054,3.7997 -0.31656,1.2723 0.31438,2.18109 0.95701,2.55128 0.64264,0.3702 1.59106,-0.085 2.13559,-0.75306 0.54452,-0.6681 1.5629,-2.25488 2.47945,-3.20579 0.91654,-0.95091 2.96407,-2.74361 2.96407,-2.74361 l 0.73711,-3.60348 z'\n                                    id='path2'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 136.93356,123.08347 c 0,0 -3.20149,3.2804 -3.24123,4.59088 -0.0397,1.31049 0.60411,1.83341 1.3106,2.05901 0.7065,0.22559 1.60304,-0.55255 1.99363,-1.32084 0.39056,-0.76832 1.14875,-2.30337 2.04139,-3.29463 0.89264,-0.99126 3.37363,-3.37561 3.37363,-3.37561 l -1.30007,-3.61169 z'\n                                    id='path3'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 130.12859,121.60522 c -2.15849,1.92962 -3.38576,3.23532 -3.61836,4.5256 -0.23257,1.2903 0.0956,1.80324 0.76105,2.13059 0.66549,0.32733 1.66701,-0.31006 2.16665,-1.01233 0.49961,-0.70231 1.04598,-1.14963 2.83575,-3.05671 1.78977,-1.90708 5.91823,-3.27102 5.91823,-3.27102 l -0.75313,-3.99546 c 0,0 -5.15171,2.7497 -7.31019,4.67933 z'\n                                    id='path4'\n                                />\n                                <path\n                                    id='path5'\n                                    className='inline fill-black stroke-none stroke-[0.292536] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 147.59927,113.85404 c 0.68896,4.40837 -4.04042,7.93759 -10.51533,8.9455 -6.47491,1.00791 -12.24344,-0.88717 -12.9324,-5.29555 -0.68895,-4.40838 3.44199,-9.94186 9.9169,-10.94977 6.47491,-1.0079 12.84186,2.89144 13.53083,7.29982 z'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 126.36446,111.82609 c 0,0 -2.37067,-6.28072 -0.86724,-7.10855 1.50342,-0.82783 5.87139,3.72617 5.87139,3.72617 z'\n                                    id='path6'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 143.50182,108.85407 c 0,0 -0.0544,-6.71302 -1.75519,-6.94283 -1.70081,-0.22982 -4.13211,5.59314 -4.13211,5.59314 z'\n                                    id='path7'\n                                />\n                                <g id='g25' className='inline stroke-black'>\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 125.27102,116.06007 -2.97783,-1.05373'\n                                        id='path8'\n                                    />\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 124.91643,116.80991 -2.84808,0.0754'\n                                        id='path9'\n                                    />\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 124.97798,118.00308 -2.53111,0.5156'\n                                        id='path10'\n                                    />\n                                </g>\n                                <g\n                                    id='g13'\n                                    transform='rotate(-23.188815,49.755584,71.047761)'\n                                    className='inline fill-none stroke-black'\n                                >\n                                    {/* usiki */}\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 121.77448,146.87682 3.00963,-0.95912'\n                                        id='path11'\n                                    />\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 122.10521,147.63749 2.84427,0.16537'\n                                        id='path12'\n                                    />\n                                    <path\n                                        className='fill-none stroke-inherit stroke-[0.529167] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 122.00599,148.82812 2.51354,0.59531'\n                                        id='path13'\n                                    />\n                                </g>\n                                <ellipse\n                                    className='inline fill-white stroke-none stroke-[0.56967] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='path14'\n                                    cx='142.61723'\n                                    cy='108.6707'\n                                    rx='3.0261719'\n                                    ry='3.0757811'\n                                    transform='rotate(1.8105864)'\n                                />\n                                <ellipse\n                                    className='inline fill-black stroke-none stroke-[0.597086] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='ellipse15'\n                                    cx='112.57543'\n                                    cy='138.29808'\n                                    rx='1.0380507'\n                                    ry='1.3097118'\n                                    transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                />\n                                <ellipse\n                                    className='inline fill-[#f9f9f9] stroke-none stroke-[0.184905] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='ellipse16'\n                                    cx='112.70263'\n                                    cy='137.817'\n                                    rx='0.32146212'\n                                    ry='0.40558979'\n                                    transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                />\n                                <ellipse\n                                    className='inline fill-white stroke-none stroke-[0.56967] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='ellipse17'\n                                    cx='135.40735'\n                                    cy='110.12592'\n                                    rx='3.0261719'\n                                    ry='3.0757811'\n                                    transform='rotate(1.8105864)'\n                                />\n                                <ellipse\n                                    className='inline fill-black stroke-none stroke-[0.597086] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='ellipse18'\n                                    cx='105.22613'\n                                    cy='138.07497'\n                                    rx='1.0380507'\n                                    ry='1.3097118'\n                                    transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                />\n                                <ellipse\n                                    className='inline fill-[#f9f9f9] stroke-none stroke-[0.184905] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    id='ellipse19'\n                                    cx='105.35332'\n                                    cy='137.59389'\n                                    rx='0.32146212'\n                                    ry='0.40558979'\n                                    transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                />\n                                <path\n                                    className='visible inline fill-black stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 163.77708,109.27292 c 4.36563,2.71198 4.26447,17.63497 3.70417,21.03437 -0.5603,3.3994 -1.86906,4.06275 -4.53099,4.49791 -5.87463,0.96037 -8.39724,-5.87134 -5.7547,-5.72161 2.64254,0.14973 3.15958,3.46446 5.95314,2.05052 2.79356,-1.41394 -1.42214,-13.46068 -1.42214,-13.46068 z'\n                                    id='tail'\n                                />\n                                <path\n                                    className='inline fill-black stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 159.74981,121.34445 c 0,0 -2.98896,3.47517 -2.94624,4.78555 0.0427,1.31039 0.89775,2.01247 1.61702,2.1932 0.71928,0.18075 1.50745,-0.51603 1.84897,-1.30735 0.34149,-0.79135 0.88811,-2.59584 1.51032,-3.76081 0.62219,-1.16497 2.10268,-3.44845 2.10268,-3.44845 l -0.27441,-3.66785 z'\n                                    id='path20'\n                                />\n                                <g id='lefteyelid' className='inline group-hover:invisible'>\n                                    <ellipse\n                                        className='fill-black stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='path21'\n                                        cx='131.94429'\n                                        cy='114.29948'\n                                        rx='3.1571214'\n                                        ry='3.2155864'\n                                    />\n                                    <path\n                                        className='stroke-white stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 129.32504,114.80228 c 2.54908,-1.14592 4.60706,-0.65481 4.60706,-0.65481'\n                                        id='path22'\n                                    />\n                                </g>\n                                <g id='righteyelid' className='inline'>\n                                    <ellipse\n                                        className='fill-black stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse22'\n                                        cx='139.07704'\n                                        cy='113.0834'\n                                        rx='3.1571214'\n                                        ry='3.2155864'\n                                    />\n                                    <path\n                                        className='fill-red-500 stroke-white stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        d='m 136.48089,113.70683 c 2.48528,-1.2784 4.56624,-0.89621 4.56624,-0.89621'\n                                        id='path23'\n                                    />\n                                </g>\n                                <g id='eyesdown'>\n                                    <ellipse\n                                        className='fill-white stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='path26'\n                                        cx='139.12122'\n                                        cy='113.61373'\n                                        rx='1.8686198'\n                                        ry='2.0422525'\n                                    />\n                                    <ellipse\n                                        className='fill-black stroke-none stroke-[0.597086] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse25'\n                                        cx='112.24622'\n                                        cy='139.77037'\n                                        rx='1.0380507'\n                                        ry='1.3097118'\n                                        transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                    />\n                                    <ellipse\n                                        className='fill-[#f9f9f9] stroke-none stroke-[0.184905] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse26'\n                                        cx='112.37342'\n                                        cy='139.28929'\n                                        rx='0.32146212'\n                                        ry='0.40558979'\n                                        transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                    />\n                                    <ellipse\n                                        className='fill-white stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse27'\n                                        cx='131.994'\n                                        cy='114.92011'\n                                        rx='1.8686198'\n                                        ry='2.0422525'\n                                    />\n                                    <ellipse\n                                        className='fill-black stroke-none stroke-[0.597086] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse28'\n                                        cx='105.00267'\n                                        cy='139.64998'\n                                        rx='1.0380507'\n                                        ry='1.3097118'\n                                        transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                    />\n                                    <ellipse\n                                        className='fill-[#f9f9f9] stroke-none stroke-[0.184905] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        id='ellipse29'\n                                        cx='105.12987'\n                                        cy='139.1689'\n                                        rx='0.32146212'\n                                        ry='0.40558979'\n                                        transform='matrix(0.98048242,-0.19660678,0.20800608,0.97812753,0,0)'\n                                    />\n                                </g>\n                            </g>\n                        </svg>\n                    </div>\n                </div>\n\n                <div className='cat-tooltip tracking-two bg-card invisible absolute -top-8 right-40 z-10 flex w-72 max-w-max flex-col gap-1 rounded-lg rounded-br-none border px-3 py-1.5 text-left font-mono text-xs font-medium opacity-0 transition-all delay-[4s] ease-out select-none group-hover:visible group-hover:opacity-100 group-hover:select-auto max-md:hidden'>\n                    <span>Meow!</span>\n                    <span>Like this component?</span>\n                    <button className='mt-1 max-h-max max-w-max cursor-pointer text-xs underline'>\n                        <a\n                            target='_blank'\n                            rel='noopener'\n                            href='https://github.com/Shatlyk1011/emerald-ui'\n                        >\n                            Give it a star ⭐\n                        </a>\n                    </button>\n                    {/* paws */}\n                    <span className='absolute top-[-1.5] left-4 z-[-2] text-3xl opacity-5 dark:opacity-20'>\n                        🐾\n                    </span>\n                    <span className='absolute top-[-1.5] right-16 z-[-2] text-3xl opacity-5 dark:opacity-20'>\n                        🐾\n                    </span>\n                    <span className='absolute top-1 right-4 z-[-2] text-3xl opacity-5 dark:opacity-20'>\n                        🐾\n                    </span>\n                    <span className='absolute bottom-0 left-4 z-[-2] text-3xl opacity-5 dark:opacity-20'>\n                        🐾\n                    </span>\n                    <span className='absolute right-7 bottom-2 z-[-2] text-3xl opacity-5 dark:opacity-20'>\n                        🐾\n                    </span>\n                </div>\n\n                <div className='content'>{children}</div>\n            </div>\n        </div>\n    )\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}