{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tooltip",
  "title": "Tooltip",
  "description": "A small inverted label that names what's under the pointer.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/tooltip.tsx",
      "content": "\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { typeStyles } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  durations,\n  easings,\n  fontWeights,\n  layers,\n  media,\n  motion,\n  offsets,\n  radii,\n  sizes,\n  space,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst offstage = \":is([data-starting-style], [data-ending-style])\";\n\nconst styles = stylex.create({\n  positioner: {\n    zIndex: layers.tooltip,\n  },\n  popup: {\n    alignItems: \"center\",\n    backgroundColor: colors.invertedSolid,\n    borderStartStartRadius: radii.sm,\n    borderStartEndRadius: radii.sm,\n    borderEndStartRadius: radii.sm,\n    borderEndEndRadius: radii.sm,\n    color: colors.invertedOnSolid,\n    display: \"flex\",\n    fontWeight: fontWeights.medium,\n    gap: space.xs,\n    maxWidth: sizes.tooltip,\n    opacity: { default: 1, [offstage]: 0 },\n    paddingBlock: space.xxs,\n    paddingInlineEnd: {\n      default: space.xs,\n      \":has(> [data-slot^='kbd']:last-child)\": space.xxs,\n    },\n    paddingInlineStart: space.xs,\n    transform: { default: \"none\", [offstage]: `scale(${motion.popoverScale})` },\n    transformOrigin: \"var(--transform-origin)\",\n    // Once one tooltip is open, the next opens at once, so moving along a toolbar stays quick.\n    transitionDuration: {\n      default: durations.hover,\n      \":is([data-instant])\": \"0s\",\n    },\n    transitionProperty: {\n      default: \"opacity, transform\",\n      [media.reducedMotion]: \"opacity\",\n    },\n    transitionTimingFunction: easings.out,\n  },\n});\n\nfunction TooltipProvider(props: TooltipPrimitive.Provider.Props) {\n  return <TooltipPrimitive.Provider data-slot=\"tooltip-provider\" {...props} />;\n}\n\nfunction Tooltip(props: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root {...props} />;\n}\n\nfunction TooltipTrigger({\n  // oxlint-disable-next-line unicorn/prefer-number-coercion -- `Number(\"300ms\")` is NaN\n  delay = Number.parseFloat(durations.tooltipDelay),\n  sx,\n  ...props\n}: Styled<TooltipPrimitive.Trigger.Props>) {\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      delay={delay}\n      {...props}\n      {...stylex.props(sx)}\n    />\n  );\n}\n\nfunction TooltipPortal({\n  sx,\n  ...props\n}: Styled<TooltipPrimitive.Portal.Props>) {\n  return (\n    <TooltipPrimitive.Portal\n      data-slot=\"tooltip-portal\"\n      {...props}\n      {...stylex.props(sx)}\n    />\n  );\n}\n\nfunction TooltipPositioner({\n  sideOffset = Number(offsets.tooltip),\n  sx,\n  ...props\n}: Styled<TooltipPrimitive.Positioner.Props>) {\n  return (\n    <TooltipPrimitive.Positioner\n      data-slot=\"tooltip-positioner\"\n      sideOffset={sideOffset}\n      {...props}\n      {...stylex.props(styles.positioner, sx)}\n    />\n  );\n}\n\nfunction TooltipPopup({ sx, ...props }: Styled<TooltipPrimitive.Popup.Props>) {\n  return (\n    <TooltipPrimitive.Popup\n      data-slot=\"tooltip-popup\"\n      {...props}\n      {...stylex.props([typeStyles.captionLg, styles.popup], sx)}\n    />\n  );\n}\n\n/** Renders the portal, the positioner and the popup. Placement props go to the positioner. */\nfunction TooltipContent({\n  align,\n  alignOffset,\n  side,\n  sideOffset,\n  ...props\n}: Styled<TooltipPrimitive.Popup.Props> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPortal>\n      <TooltipPositioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPopup {...props} />\n      </TooltipPositioner>\n    </TooltipPortal>\n  );\n}\n\nexport {\n  Tooltip,\n  TooltipContent,\n  TooltipPopup,\n  TooltipPortal,\n  TooltipPositioner,\n  TooltipProvider,\n  TooltipTrigger,\n};\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/tooltip/index.md",
  "type": "registry:ui"
}