@teambit/react.ui.component-highlighter 0.0.447 → 0.0.451

package/bubble/bubble.module.scss

@@ -13,7 +13,7 @@
     background: var(--bit-highlighter-color, #eebcc9);
 
     &:hover {
-      background: var(--bit-highlighter-color-light, #f6dae2);
+      background: var(--bit-highlighter-color-hover, #f6dae2);
     }
 
     &:active {

package/component-highlighter/hover-highlighter/hover-highlighter.compositions.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { IconButton } from '@teambit/design.ui.icon-button';
+import { HoverHighlighter } from './hover-highlighter';
+
+export const ShowWhenHovering = () => {
+  const [disabled, setDisabled] = useState<boolean>(false);
+
+  return (
+    <div style={{ padding: '16px 80px 32px 16px' }}>
+      <HoverHighlighter style={{ padding: 16 }} disabled={disabled}>
+        <div>
+          some div
+          <br />
+          <div>
+            <IconButton onClick={() => setDisabled((x) => !x)}>Hover here</IconButton>
+          </div>
+        </div>
+      </HoverHighlighter>
+    </div>
+  );
+};

package/{dist/component-highlighter/component-highlighter.module.scss → component-highlighter/hover-highlighter/hover-highlighter.module.scss}

@@ -6,17 +6,8 @@
 
   transition: border 300ms;
 
-  --bit-highlighter-color: #eebcc9;
-  --bit-highlighter-color-light: #f6dae2;
-  --bit-highlighter-color-active: #e79db1;
-
   &.active {
     border-width: 8px;
     overflow: auto;
   }
 }
-
-.label {
-  font-family: sans-serif;
-  padding: 8px;
-}

package/component-highlighter/hover-highlighter/hover-highlighter.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useCallback, useEffect, CSSProperties } from 'react';
+import classnames from 'classnames';
+import { useDebouncedCallback } from 'use-debounce';
+import { domToReact, toRootElement } from '@teambit/react.modules.dom-to-react';
+import { HoverSelector } from '@teambit/react.ui.hover-selector';
+import { hasComponentMeta } from '../bit-react-component';
+
+import styles from './hover-highlighter.module.scss';
+import { excludeHighlighterSelector } from '../../ignore-highlighter';
+import { ElementHighlighter, HighlightTarget, Placement, HighlightClasses } from '../../element-highlighter';
+
+export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+  disabled?: boolean;
+  /** default pop location for the label */
+  placement?: Placement;
+  /** customize styles */
+  classes?: HighlightClasses;
+  /** customize highlighter */
+  highlightStyle?: CSSProperties;
+}
+
+/** automatically highlight components on hover */
+export function HoverHighlighter({
+  children,
+  disabled,
+  classes,
+  highlightStyle,
+  placement,
+  ...rest
+}: HoverHighlighterProps) {
+  const [target, setTarget] = useState<HighlightTarget | undefined>();
+
+  const _handleElement = useCallback((element: HTMLElement | null) => {
+    // clear highlighter at the edges:
+    if (!element || element.hasAttribute('data-nullify-component-highlight')) {
+      setTarget(undefined);
+      return;
+    }
+
+    // skip DOM trees having 'data-ignore-component-highlight'
+    if (element.closest(excludeHighlighterSelector)) return;
+
+    const result = bubbleToBitComponent(element);
+    if (!result) return;
+
+    setTarget({
+      element: result.element,
+      id: result.meta.id,
+      scopeLink: undefined,
+      link: result.meta.homepage,
+      local: result.meta.exported === false,
+    });
+  }, []);
+
+  const handleElement = useDebouncedCallback(_handleElement, target ? 80 : 0);
+
+  // clear target when disabled
+  useEffect(() => {
+    if (disabled) {
+      setTarget(undefined);
+    }
+  }, [disabled]);
+
+  return (
+    <>
+      <HoverSelector
+        {...rest}
+        className={classnames(styles.highlighter, !disabled && styles.active)}
+        onElementChange={handleElement}
+        disabled={disabled}
+        data-nullify-component-highlight
+      >
+        {children}
+      </HoverSelector>
+      {target && <ElementHighlighter target={target} classes={classes} style={highlightStyle} placement={placement} />}
+    </>
+  );
+}
+
+/** go up the dom tree until reaching a react bit component */
+function bubbleToBitComponent(element: HTMLElement | null, filter?: (elem: Element) => boolean) {
+  for (let current = element; current; current = current.parentElement) {
+    current = toRootElement(current);
+    if (!current || filter?.(current) === false) return undefined;
+
+    const component = domToReact(current);
+
+    if (hasComponentMeta(component)) {
+      const meta = component.__bit_component;
+
+      return {
+        element: current,
+        component,
+        meta,
+      };
+    }
+  }
+
+  return undefined;
+}

package/component-highlighter/hover-highlighter/index.ts

@@ -0,0 +1 @@
+export { HoverHighlighterProps, HoverHighlighter } from './hover-highlighter';

package/component-highlighter/index.ts

@@ -1,2 +1,2 @@
-export { ComponentHighlighter } from './component-highlighter';
-export type { ComponentHighlightProps } from './component-highlighter';
+export { HoverHighlighter } from './hover-highlighter';
+export type { HoverHighlighterProps } from './hover-highlighter';

package/component-highlighter.docs.md

@@ -0,0 +1,110 @@
+---
+description: Highlights Bit Components and links to their Bit scope
+labels: ['component', 'highlight', 'react']
+---
+
+import { HighlightedElement } from './element-highlighter/element-highlighter.compositions';
+
+The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.  
+It is mostly used for compositions debugging.
+
+<HighlightedElement />
+
+## How to use?
+
+Simplest way to use the component is by wrapping your code with `HoverHighlighter`.  
+It will automatically detect components from DOM elements, just by hovering on them.
+
+```tsx
+import { HoverHighlightbr } from '@teambit/react.ui.component-highlighter';
+
+function App() {
+  return (
+    <HoverHighlighter>
+      <Header />
+      <Feed />
+    </HoverHighlighter>
+  );
+}
+```
+
+You can also use it manually, to have more control:
+
+```tsx
+const [element, setElement] = useState<HTMLElement | undefined>(undefined);
+
+useEffect(() => setElement(
+    document.getElementById('to-highlight')
+), [targetRef.current]);
+
+const target = targetElement && {
+  element: targetElement,
+  id: 'teambit.design/ui/icon-button',
+
+  // explicit overrides:
+  link: 'https://bit.dev/teambit/design/ui/icon-button',
+  scopeLink: 'https://bit.dev/teambit/design',
+};
+
+return (
+  <div>
+    <div id="to-highlight">highlight target</div>
+    {target && <ElementHighlighter target={target} />}
+  </div>
+);
+```
+
+## How does it work?
+The manual highlighter works by positioning elements (a frame and a label) to a target element. It uses [PopperJS](https://popper.js.org/) to correctly align them to the element.
+
+The automatic highlighter then adds an event listener for hover events, which automatically tracks mouse movements and finds the most relevant React component using [DOM-to-react](https://bit.dev/teambit/react/modules/dom-to-react). It bubbles up the DOM until it finds a component with bit metadata.
+
+Where does the metadata come from? The highlighter assumes the code has been transpiled by Bit's [custom babel plugin](https://bit.dev/teambit/react/babel/bit-react-transformer). The plugin looks for React components (i.e. functions or classes), and attaches a metadata object to them.
+> The `Bit React Transformer` babel plugin is already running in the Preview during `bit start`.  
+It only effects the browser bundle, and not the dists.
+
+The result looks like this:
+
+```tsx
+var __bit_component = {
+  id: 'teambit.base-ui/button@1.0.0',
+  homepage: 'https://bit.dev/teambit/base-ui/input/button', 
+  exported: true,
+}
+
+export function Button() {
+  return <div>click me!</div>;
+}
+
+// attaches metadata:
+Button.__bit_component = __bit_component;
+```
+
+## Customization
+
+Use these CSS variables to edit the highlighter color
+```css
+--bit-highlighter-color: #eebcc9;
+--bit-highlighter-color-hover: #f6dae2;
+--bit-highlighter-color-active: #e79db1;
+```
+
+You can also pass these classes for complete control:
+
+```tsx
+const classes = {
+  /** containing div */
+  container?: string;
+  /** border */
+  frame?: string;
+  /** component id links */
+  label?: string;
+};
+
+<HoverHighlighter classes={classes}>
+  ...
+</HoverHighlighter>
+```
+
+You can control the size using regular `font-size`.  
+Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)

package/dist/bubble/bubble.module.scss

@@ -13,7 +13,7 @@
     background: var(--bit-highlighter-color, #eebcc9);
 
     &:hover {
-      background: var(--bit-highlighter-color-light, #f6dae2);
+      background: var(--bit-highlighter-color-hover, #f6dae2);
     }
 
     &:active {

package/dist/component-highlighter/hover-highlighter/hover-highlighter.compositions.d.ts

@@ -0,0 +1 @@
+export declare const ShowWhenHovering: () => JSX.Element;

package/dist/component-highlighter/hover-highlighter/hover-highlighter.compositions.js

@@ -0,0 +1,37 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowWhenHovering = void 0;
+const react_1 = __importStar(require("react"));
+const design_ui_icon_button_1 = require("@teambit/design.ui.icon-button");
+const hover_highlighter_1 = require("./hover-highlighter");
+const ShowWhenHovering = () => {
+    const [disabled, setDisabled] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { style: { padding: '16px 80px 32px 16px' } },
+        react_1.default.createElement(hover_highlighter_1.HoverHighlighter, { style: { padding: 16 }, disabled: disabled },
+            react_1.default.createElement("div", null,
+                "some div",
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(design_ui_icon_button_1.IconButton, { onClick: () => setDisabled((x) => !x) }, "Hover here"))))));
+};
+exports.ShowWhenHovering = ShowWhenHovering;
+//# sourceMappingURL=hover-highlighter.compositions.js.map

package/dist/component-highlighter/hover-highlighter/hover-highlighter.compositions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-highlighter.compositions.js","sourceRoot":"","sources":["../../../component-highlighter/hover-highlighter/hover-highlighter.compositions.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,0EAA4D;AAC5D,2DAAuD;AAEhD,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;QAC5C,8BAAC,oCAAgB,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ;YAC1D;;gBAEE,yCAAM;gBACN;oBACE,8BAAC,kCAAU,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,iBAAyB,CACtE,CACF,CACW,CACf,CACP,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,gBAAgB,oBAgB3B"}

package/dist/component-highlighter/hover-highlighter/hover-highlighter.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties } from 'react';
+import { Placement, HighlightClasses } from '../../element-highlighter';
+export interface HoverHighlighterProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    /** default pop location for the label */
+    placement?: Placement;
+    /** customize styles */
+    classes?: HighlightClasses;
+    /** customize highlighter */
+    highlightStyle?: CSSProperties;
+}
+/** automatically highlight components on hover */
+export declare function HoverHighlighter({ children, disabled, classes, highlightStyle, placement, ...rest }: HoverHighlighterProps): JSX.Element;

package/dist/component-highlighter/{component-highlighter.js → hover-highlighter/hover-highlighter.js}

@@ -33,25 +33,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentHighlighter = void 0;
+exports.HoverHighlighter = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const use_debounce_1 = require("use-debounce");
 const react_modules_dom_to_react_1 = require("@teambit/react.modules.dom-to-react");
 const react_ui_hover_selector_1 = require("@teambit/react.ui.hover-selector");
-const use_debounce_1 = require("use-debounce");
-const frame_1 = require("../frame");
-const label_1 = require("../label");
-const bit_react_component_1 = require("./bit-react-component");
-const component_highlighter_module_scss_1 = __importDefault(require("./component-highlighter.module.scss"));
-function ComponentHighlighter(_a) {
-    var { children, disabled } = _a, rest = __rest(_a, ["children", "disabled"]);
+const bit_react_component_1 = require("../bit-react-component");
+const hover_highlighter_module_scss_1 = __importDefault(require("./hover-highlighter.module.scss"));
+const ignore_highlighter_1 = require("../../ignore-highlighter");
+const element_highlighter_1 = require("../../element-highlighter");
+/** automatically highlight components on hover */
+function HoverHighlighter(_a) {
+    var { children, disabled, classes, highlightStyle, placement } = _a, rest = __rest(_a, ["children", "disabled", "classes", "highlightStyle", "placement"]);
     const [target, setTarget] = (0, react_1.useState)();
     const _handleElement = (0, react_1.useCallback)((element) => {
-        if (!element || (element === null || element === void 0 ? void 0 : element.hasAttribute('data-nullify-component-highlight'))) {
+        // clear highlighter at the edges:
+        if (!element || element.hasAttribute('data-nullify-component-highlight')) {
             setTarget(undefined);
             return;
         }
-        const result = bubbleToBitComponent(element, (elem) => !elem.hasAttribute('data-ignore-component-highlight'));
+        // skip DOM trees having 'data-ignore-component-highlight'
+        if (element.closest(ignore_highlighter_1.excludeHighlighterSelector))
+            return;
+        const result = bubbleToBitComponent(element);
         if (!result)
             return;
         setTarget({
@@ -63,19 +68,18 @@ function ComponentHighlighter(_a) {
         });
     }, []);
     const handleElement = (0, use_debounce_1.useDebouncedCallback)(_handleElement, target ? 80 : 0);
+    // clear target when disabled
     (0, react_1.useEffect)(() => {
         if (disabled) {
             setTarget(undefined);
         }
     }, [disabled]);
-    return (react_1.default.createElement(react_ui_hover_selector_1.HoverSelector, Object.assign({}, rest, { className: (0, classnames_1.default)(component_highlighter_module_scss_1.default.highlighter, !disabled && component_highlighter_module_scss_1.default.active), onElementChange: handleElement, disabled: disabled, "data-nullify-component-highlight": true }),
-        children,
-        target && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(frame_1.Frame, { targetRef: target.element, "data-ignore-component-highlight": true }),
-            target.id && (react_1.default.createElement(label_1.LabelContainer, { className: component_highlighter_module_scss_1.default.label, targetRef: target.element, placement: "top", "data-ignore-component-highlight": true },
-                react_1.default.createElement(label_1.Label, { componentId: target.id, link: target.link, scopeLink: target.scopeLink, local: target.local, "data-ignore-component-highlight": true })))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_ui_hover_selector_1.HoverSelector, Object.assign({}, rest, { className: (0, classnames_1.default)(hover_highlighter_module_scss_1.default.highlighter, !disabled && hover_highlighter_module_scss_1.default.active), onElementChange: handleElement, disabled: disabled, "data-nullify-component-highlight": true }), children),
+        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, classes: classes, style: highlightStyle, placement: placement })));
 }
-exports.ComponentHighlighter = ComponentHighlighter;
+exports.HoverHighlighter = HoverHighlighter;
+/** go up the dom tree until reaching a react bit component */
 function bubbleToBitComponent(element, filter) {
     for (let current = element; current; current = current.parentElement) {
         current = (0, react_modules_dom_to_react_1.toRootElement)(current);
@@ -93,4 +97,4 @@ function bubbleToBitComponent(element, filter) {
     }
     return undefined;
 }
-//# sourceMappingURL=component-highlighter.js.map
+//# sourceMappingURL=hover-highlighter.js.map

package/dist/component-highlighter/hover-highlighter/hover-highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-highlighter.js","sourceRoot":"","sources":["../../../component-highlighter/hover-highlighter/hover-highlighter.tsx"],"names":[],"mappings":"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"}

package/{component-highlighter/component-highlighter.module.scss → dist/component-highlighter/hover-highlighter/hover-highlighter.module.scss}

@@ -6,17 +6,8 @@
 
   transition: border 300ms;
 
-  --bit-highlighter-color: #eebcc9;
-  --bit-highlighter-color-light: #f6dae2;
-  --bit-highlighter-color-active: #e79db1;
-
   &.active {
     border-width: 8px;
     overflow: auto;
   }
 }
-
-.label {
-  font-family: sans-serif;
-  padding: 8px;
-}

package/dist/component-highlighter/hover-highlighter/index.d.ts

@@ -0,0 +1 @@
+export { HoverHighlighterProps, HoverHighlighter } from './hover-highlighter';

package/dist/component-highlighter/hover-highlighter/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HoverHighlighter = void 0;
+var hover_highlighter_1 = require("./hover-highlighter");
+Object.defineProperty(exports, "HoverHighlighter", { enumerable: true, get: function () { return hover_highlighter_1.HoverHighlighter; } });
+//# sourceMappingURL=index.js.map

package/dist/component-highlighter/hover-highlighter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../component-highlighter/hover-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,yDAA8E;AAA9C,qHAAA,gBAAgB,OAAA"}

package/dist/component-highlighter/index.d.ts

@@ -1,2 +1,2 @@
-export { ComponentHighlighter } from './component-highlighter';
-export type { ComponentHighlightProps } from './component-highlighter';
+export { HoverHighlighter } from './hover-highlighter';
+export type { HoverHighlighterProps } from './hover-highlighter';

package/dist/component-highlighter/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentHighlighter = void 0;
-var component_highlighter_1 = require("./component-highlighter");
-Object.defineProperty(exports, "ComponentHighlighter", { enumerable: true, get: function () { return component_highlighter_1.ComponentHighlighter; } });
+exports.HoverHighlighter = void 0;
+var hover_highlighter_1 = require("./hover-highlighter");
+Object.defineProperty(exports, "HoverHighlighter", { enumerable: true, get: function () { return hover_highlighter_1.HoverHighlighter; } });
 //# sourceMappingURL=index.js.map

package/dist/component-highlighter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../component-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,iEAA+D;AAAtD,6HAAA,oBAAoB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../component-highlighter/index.ts"],"names":[],"mappings":";;;AAAA,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}

package/dist/component-highlighter.docs.md

@@ -0,0 +1,110 @@
+---
+description: Highlights Bit Components and links to their Bit scope
+labels: ['component', 'highlight', 'react']
+---
+
+import { HighlightedElement } from './element-highlighter/element-highlighter.compositions';
+
+The component highlighter allows you to visually inspect bit react components, and provides a link to its documentation page.  
+It is mostly used for compositions debugging.
+
+<HighlightedElement />
+
+## How to use?
+
+Simplest way to use the component is by wrapping your code with `HoverHighlighter`.  
+It will automatically detect components from DOM elements, just by hovering on them.
+
+```tsx
+import { HoverHighlightbr } from '@teambit/react.ui.component-highlighter';
+
+function App() {
+  return (
+    <HoverHighlighter>
+      <Header />
+      <Feed />
+    </HoverHighlighter>
+  );
+}
+```
+
+You can also use it manually, to have more control:
+
+```tsx
+const [element, setElement] = useState<HTMLElement | undefined>(undefined);
+
+useEffect(() => setElement(
+    document.getElementById('to-highlight')
+), [targetRef.current]);
+
+const target = targetElement && {
+  element: targetElement,
+  id: 'teambit.design/ui/icon-button',
+
+  // explicit overrides:
+  link: 'https://bit.dev/teambit/design/ui/icon-button',
+  scopeLink: 'https://bit.dev/teambit/design',
+};
+
+return (
+  <div>
+    <div id="to-highlight">highlight target</div>
+    {target && <ElementHighlighter target={target} />}
+  </div>
+);
+```
+
+## How does it work?
+The manual highlighter works by positioning elements (a frame and a label) to a target element. It uses [PopperJS](https://popper.js.org/) to correctly align them to the element.
+
+The automatic highlighter then adds an event listener for hover events, which automatically tracks mouse movements and finds the most relevant React component using [DOM-to-react](https://bit.dev/teambit/react/modules/dom-to-react). It bubbles up the DOM until it finds a component with bit metadata.
+
+Where does the metadata come from? The highlighter assumes the code has been transpiled by Bit's [custom babel plugin](https://bit.dev/teambit/react/babel/bit-react-transformer). The plugin looks for React components (i.e. functions or classes), and attaches a metadata object to them.
+> The `Bit React Transformer` babel plugin is already running in the Preview during `bit start`.  
+It only effects the browser bundle, and not the dists.
+
+The result looks like this:
+
+```tsx
+var __bit_component = {
+  id: 'teambit.base-ui/button@1.0.0',
+  homepage: 'https://bit.dev/teambit/base-ui/input/button', 
+  exported: true,
+}
+
+export function Button() {
+  return <div>click me!</div>;
+}
+
+// attaches metadata:
+Button.__bit_component = __bit_component;
+```
+
+## Customization
+
+Use these CSS variables to edit the highlighter color
+```css
+--bit-highlighter-color: #eebcc9;
+--bit-highlighter-color-hover: #f6dae2;
+--bit-highlighter-color-active: #e79db1;
+```
+
+You can also pass these classes for complete control:
+
+```tsx
+const classes = {
+  /** containing div */
+  container?: string;
+  /** border */
+  frame?: string;
+  /** component id links */
+  label?: string;
+};
+
+<HoverHighlighter classes={classes}>
+  ...
+</HoverHighlighter>
+```
+
+You can control the size using regular `font-size`.  
+Keep in mind that the label can be either two elements (when using component id), and a single element (for other texts)

package/dist/element-highlighter/element-highlighter.compositions.d.ts

@@ -0,0 +1,6 @@
+export declare const HighlightedElement: ({ style, className }: {
+    style?: Record<string, string>;
+    className?: string;
+}) => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const Sizes: () => JSX.Element;

package/dist/element-highlighter/element-highlighter.compositions.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sizes = exports.Customized = exports.HighlightedElement = void 0;
+const react_1 = __importStar(require("react"));
+const element_highlighter_1 = require("./element-highlighter");
+const mockTargetId = 'teambit.design/ui/icon-button';
+const HighlightedElement = ({ style, className }) => {
+    const [targetElement, setTargetElement] = (0, react_1.useState)(undefined);
+    const targetRef = (0, react_1.createRef)();
+    (0, react_1.useEffect)(() => {
+        const { current } = targetRef;
+        setTargetElement(current || undefined);
+    }, [targetRef.current]);
+    const target = targetElement && {
+        element: targetElement,
+        id: mockTargetId,
+        link: 'https://bit.dev/teambit/design/ui/icon-button',
+        scopeLink: 'https://bit.dev/teambit/design',
+    };
+    return (react_1.default.createElement("div", { className: className, style: { padding: '16px 160px 50px 16px' } },
+        react_1.default.createElement("div", { ref: targetRef, style: { width: 100 } }, "highlight target"),
+        target && react_1.default.createElement(element_highlighter_1.ElementHighlighter, { target: target, style: style, placement: "bottom" })));
+};
+exports.HighlightedElement = HighlightedElement;
+const Customized = () => {
+    return (react_1.default.createElement(exports.HighlightedElement, { style: {
+            '--bit-highlighter-color': '#94deb4',
+            '--bit-highlighter-color-hover': '#d0f1de',
+            '--bit-highlighter-color-active': '#37b26c',
+        } }));
+};
+exports.Customized = Customized;
+const Sizes = () => {
+    return react_1.default.createElement(exports.HighlightedElement, { style: { fontSize: '16px' } });
+};
+exports.Sizes = Sizes;
+//# sourceMappingURL=element-highlighter.compositions.js.map