{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip-07",
  "title": "Tooltips on four sides",
  "description": "Four pan buttons share one tooltip that moves to each side with its shortcut.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/kbd.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/tooltip.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/tooltip/tooltip-07.tsx",
      "content": "'use client';\n\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleIcon,\n  type Icon,\n} from '@/registry/ndeko/lib/icons';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { Kbd, KbdGroup } from '@/registry/ndeko/ui/kbd';\nimport {\n  TOOLTIP_GLIDE_CLOSE_DELAY,\n  Tooltip,\n  TooltipContent,\n  type TooltipHandle,\n  TooltipProvider,\n  TooltipTrigger,\n  useTooltipHandle,\n} from '@/registry/ndeko/ui/tooltip';\n\ntype PanSide = 'top' | 'right' | 'bottom' | 'left';\n\ntype PanDirection = {\n  label: string;\n  hint: string;\n  shortcut: string;\n  side: PanSide;\n  icon: Icon;\n  className?: string;\n};\n\nconst PAN_UP: PanDirection = {\n  label: 'Pan camera up',\n  hint: 'Pan up',\n  shortcut: 'T',\n  side: 'top',\n  icon: ChevronUpIcon,\n  className: 'col-start-2',\n};\n\nconst PAN_LEFT: PanDirection = {\n  label: 'Pan camera left',\n  hint: 'Pan left',\n  shortcut: 'L',\n  side: 'left',\n  icon: ChevronLeftIcon,\n  className: 'col-start-1',\n};\n\nconst PAN_RIGHT: PanDirection = {\n  label: 'Pan camera right',\n  hint: 'Pan right',\n  shortcut: 'R',\n  side: 'right',\n  icon: ChevronRightIcon,\n};\n\nconst PAN_DOWN: PanDirection = {\n  label: 'Pan camera down',\n  hint: 'Pan down',\n  shortcut: 'B',\n  side: 'bottom',\n  icon: ChevronDownIcon,\n  className: 'col-start-2',\n};\n\nfunction sideOf(direction: PanDirection | undefined): PanSide {\n  if (!direction) {\n    return 'top';\n  }\n  return direction.side;\n}\n\ntype PanButtonProps = {\n  direction: PanDirection;\n  panHint: TooltipHandle<PanDirection>;\n};\n\nfunction PanButton({ direction, panHint }: PanButtonProps) {\n  return (\n    <TooltipTrigger\n      handle={panHint}\n      payload={direction}\n      closeDelay={TOOLTIP_GLIDE_CLOSE_DELAY}\n      render={\n        <Button\n          variant='outline'\n          size='icon'\n          aria-label={direction.label}\n          className={direction.className}\n        />\n      }\n    >\n      <direction.icon />\n    </TooltipTrigger>\n  );\n}\n\nfunction PanHint({ direction }: { direction: PanDirection | undefined }) {\n  if (!direction) {\n    return null;\n  }\n  return (\n    <span className='flex items-center gap-2'>\n      {direction.hint}\n      <KbdGroup className='-me-1'>\n        <Kbd>⌘</Kbd>\n        <Kbd>{direction.shortcut}</Kbd>\n      </KbdGroup>\n    </span>\n  );\n}\n\nexport default function Tooltip07() {\n  const panHint = useTooltipHandle<PanDirection>();\n\n  return (\n    <TooltipProvider delay={0}>\n      <div className='inline-grid w-fit grid-cols-3 gap-1'>\n        <PanButton direction={PAN_UP} panHint={panHint} />\n        <PanButton direction={PAN_LEFT} panHint={panHint} />\n        <div className='flex items-center justify-center' aria-hidden='true'>\n          <CircleIcon className='size-4 opacity-60' />\n        </div>\n        <PanButton direction={PAN_RIGHT} panHint={panHint} />\n        <PanButton direction={PAN_DOWN} panHint={panHint} />\n      </div>\n      <Tooltip handle={panHint}>\n        {({ payload }) => (\n          <TooltipContent glide side={sideOf(payload)}>\n            <PanHint direction={payload} />\n          </TooltipContent>\n        )}\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "tooltip"
  ],
  "type": "registry:component"
}