{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-dog",
  "type": "registry:block",
  "title": "Tooltip dog",
  "description": "Tooltip dog",
  "files": [
    {
      "path": "components/usages/tooltipdogusage.tsx",
      "content": "import TooltipDog from \"@/registry/open-source/tooltip-dog\";\n\nexport default function TooltipDogUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <TooltipDog>\n                <h1>Tooltip Dog</h1>\n            </TooltipDog>\n        </div>\n    );\n}",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/tooltipdogusage.tsx",
      "content": "import TooltipDog from \"@/registry/open-source/tooltip-dog\";\n\nexport default function TooltipDogUsage() {\n    return (\n        <div className=\"relative w-full flex items-center justify-center\">\n            <TooltipDog>\n                <h1>Tooltip Dog</h1>\n            </TooltipDog>\n        </div>\n    );\n}",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/tooltip-dog.tsx",
      "content": "'use client'\n\nimport { ReactNode } from 'react'\nimport { cn } from '@/registry/utilities/cn'\n\ninterface Props {\n    children?: ReactNode\n    containerClasses?: string\n    wrapperClasses?: string\n    dogClasses?: string\n    dogGradientClasses?: string\n}\n\nexport default function TooltipDog({\n    children,\n    containerClasses,\n    wrapperClasses,\n    dogClasses,\n    dogGradientClasses,\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                    'dog-light absolute top-0 right-0 h-36 w-36 rounded-full blur-xl transition duration-500 ease-in group-hover:bg-amber-200/10 max-md:hidden',\n                    dogGradientClasses\n                )}\n            />\n            <div className={cn('dog 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                        dogClasses\n                    )}\n                >\n                    <div className={cn('thedog 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='dog-svg'\n                            xmlns='http://www.w3.org/2000/svg'\n                            aria-hidden\n                            className='overflow-visible!'\n                        >\n                            <g\n                                id='layer1'\n                                className='inline'\n                                transform='translate(-121.80376,-101.90461)'\n                            >\n                                <path\n                                    className='inline fill-[#C9A66B] 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='head-top'\n                                />\n                                <path\n                                    className='inline fill-[#C9A66B] 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='leg-front-right'\n                                />\n                                <path\n                                    className='inline fill-[#C9A66B] 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='leg-front-left'\n                                />\n                                <path\n                                    className='inline fill-[#C9A66B] 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='leg-back-left'\n                                />\n                                <path\n                                    id='face'\n                                    className='inline fill-[#C9A66B] 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                                {/* Floppy left ear */}\n                                <path\n                                    className='inline fill-[#B8895A] stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 125.2,112.8 c -4.8,-0.8 -7.2,3.2 -6.2,7.2 1,4 5.2,5.2 8.2,2.8 1.2,-1.6 0.5,-6.5 -2,-10 z'\n                                    id='ear-left'\n                                />\n                                {/* Floppy right ear */}\n                                <path\n                                    className='inline fill-[#B8895A] stroke-none stroke-[0.264583] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 144.8,112.8 c 4.8,-0.8 7.2,3.2 6.2,7.2 -1,4 -5.2,5.2 -8.2,2.8 -1.2,-1.6 -0.5,-6.5 2,-10 z'\n                                    id='ear-right'\n                                />\n                                {/* White snout / muzzle */}\n                                <ellipse\n                                    className='inline fill-[#FFFBF5] stroke-none'\n                                    cx='137.02'\n                                    cy='119.2'\n                                    rx='4.2'\n                                    ry='3.1'\n                                    id='snout'\n                                />\n                                {/* White cheek markings */}\n                                <ellipse\n                                    className='inline fill-[#FFFBF5] stroke-none stroke-[0.56967] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\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                                    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                                    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-[#FFFBF5] stroke-none stroke-[0.56967] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\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                                    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                                    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                                {/* Dog tail — short, upturned */}\n                                <path\n                                    className='visible inline fill-[#C9A66B] stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                    d='m 161.8,117.5 c 2.8,1.2 5.2,5.5 4.8,10.5 -0.3,3.5 -2.8,4.2 -4.8,1.8 -1.5,-2 -1.2,-7.5 0,-12.3 z'\n                                    id='tail'\n                                />\n                                <path\n                                    className='inline fill-[#C9A66B] 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='leg-back-right'\n                                />\n                                <g id='lefteyelid' className='inline group-hover:invisible'>\n                                    <ellipse\n                                        className='fill-[#8B6F47] stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\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                                    />\n                                </g>\n                                <g id='righteyelid' className='inline'>\n                                    <ellipse\n                                        className='fill-[#8B6F47] stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\n                                        cx='139.07704'\n                                        cy='113.0834'\n                                        rx='3.1571214'\n                                        ry='3.2155864'\n                                    />\n                                    <path\n                                        className='fill-[#C9A66B] stroke-[#FFFBF5] 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                                    />\n                                </g>\n                                <g id='eyesdown'>\n                                    <ellipse\n                                        className='fill-[#FFFBF5] stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\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                                        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                                        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-[#FFFBF5] stroke-none stroke-[0.529167] [fill-opacity:1] [stroke-dasharray:none] [stroke-linecap:round] [stroke-linejoin:round] [stroke-opacity:0.988235]'\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                                        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                                        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                                {/* Nose */}\n                                <ellipse\n                                    className='inline fill-[#1a1a1a] stroke-none'\n                                    cx='137.02'\n                                    cy='118.3'\n                                    rx='1.35'\n                                    ry='1.05'\n                                    id='nose'\n                                />\n                                {/* Tongue — shows on hover */}\n                                <path\n                                    id='tongue'\n                                    className='inline fill-red-500 opacity-0 transition-opacity group-hover:opacity-100'\n                                    d='m 135.2,120.2 c 0.5,2.2 2.2,3.8 4.2,3.6 2,-0.2 3.5,-2 3.8,-4.2 -1.2,0.6 -2.5,0.9 -4,0.9 -1.5,0 -2.8,-0.3 -4,-0.9 z'\n                                />\n                            </g>\n                        </svg>\n                    </div>\n                </div>\n\n                <div className='dog-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>Woof!</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                    <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}\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"
    }
  ]
}