{"version":3,"file":"Tooltip.mjs","sources":["../../../src/components/internal/Tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport React, { forwardRef, useMemo } from \"react\";\n\nimport { useCommentsConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { classNames } from \"../../utils/class-names\";\nimport { isApple } from \"../../utils/is-apple\";\n\nconst KEYS = {\n  alt: () => ({ title: \"Alt\", key: \"⌥\" }),\n  mod: () =>\n    isApple() ? { title: \"Command\", key: \"⌘\" } : { title: \"Ctrl\", key: \"⌃\" },\n  shift: () => {\n    return { title: \"Shift\", key: \"⇧\" };\n  },\n  enter: () => {\n    return { title: \"Enter\", key: \"⏎\" };\n  },\n} as const;\n\nexport interface TooltipProps\n  extends Pick<TooltipPrimitive.TooltipTriggerProps, \"children\">,\n    Omit<TooltipPrimitive.TooltipContentProps, \"content\"> {\n  content: ReactNode;\n  multiline?: boolean;\n}\n\nexport interface ShortcutTooltipProps extends TooltipProps {\n  shortcut?: ReactNode;\n}\n\nexport interface ShortcutTooltipKeyProps extends ComponentProps<\"abbr\"> {\n  name: keyof typeof KEYS;\n}\n\nexport const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(\n  ({ children, content, multiline, className, ...props }, forwardedRef) => {\n    const { portalContainer } = useCommentsConfig();\n\n    return (\n      <TooltipPrimitive.Root disableHoverableContent>\n        <TooltipPrimitive.Trigger asChild ref={forwardedRef}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={portalContainer}>\n          <TooltipPrimitive.Content\n            className={classNames(\n              \"lb-root lb-portal lb-tooltip\",\n              multiline && \"lb-tooltip:multiline\",\n              className\n            )}\n            side=\"top\"\n            align=\"center\"\n            sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n            collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n            {...props}\n          >\n            {content}\n          </TooltipPrimitive.Content>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    );\n  }\n);\n\nexport const ShortcutTooltip = forwardRef<\n  HTMLButtonElement,\n  ShortcutTooltipProps\n>(({ children, content, shortcut, ...props }, forwardedRef) => {\n  return (\n    <Tooltip\n      content={\n        <>\n          {content}\n          {shortcut && <kbd className=\"lb-tooltip-shortcut\">{shortcut}</kbd>}\n        </>\n      }\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n\nexport function ShortcutTooltipKey({\n  name,\n  ...props\n}: ShortcutTooltipKeyProps) {\n  const { title, key } = useMemo(() => KEYS[name]?.(), [name]);\n\n  return (\n    <abbr title={title} {...props}>\n      {key}\n    </abbr>\n  );\n}\n\nexport { TooltipProvider } from \"@radix-ui/react-tooltip\";\n"],"names":[],"mappings":";;;;;;;;;AAcA;AAAa;AAC0B;AAEoC;AAEvE;AAAkC;AACpC;AAEE;AAAkC;AAEtC;AAiBO;AAAgB;AAEnB;AAEA;AACG;AAA6C;AAC3C;AAAgC;AAAM;AAGtC;AAAmC;AACjC;AACY;AACT;AACa;AACb;AACF;AACK;AACC;AACM;AACM;AACd;AAKV;AAGN;AAEa;AAIX;AACG;AAImB;AAAc;AAC9B;AAEE;AACC;AAKX;AAEO;AAA4B;AACjC;AAEF;AACE;AAEA;AACG;AAAK;AAAkB;AAI5B;;"}